AppFlowy-IO/AppFlowy

Fork 0

mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2026-03-24 21:00:19 +00:00

[GH-ISSUE #3477] [FR] Support inserting caption in image block #1564

New issue

Closed

opened 2026-03-23 20:51:02 +00:00 by mirror · 8 comments

mirror commented

2026-03-23 20:51:02 +00:00

Owner

Originally created by @LucasXu0 on GitHub (Sep 20, 2023).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/3477

Originally assigned to: @richardshiue on GitHub.

Description

Support inserting caption in image block

For example,

Impact

for the user who need to insert caption under the image block

Additional Context

No response

Originally created by @LucasXu0 on GitHub (Sep 20, 2023). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/3477 Originally assigned to: @richardshiue on GitHub. ### Description - Support inserting caption in image block For example, <img width="330" alt="Screenshot 2023-09-20 at 22 28 16" src="https://github.com/AppFlowy-IO/AppFlowy/assets/11863087/97a604e0-2334-453d-9874-db66ffd039f9"> ### Impact for the user who need to insert caption under the image block ### Additional Context _No response_

mirror

2026-03-23 20:51:02 +00:00

closed this issue
added the
Q4 25

images

hacktoberfest

new feature

2025
labels

mirror commented

2026-03-23 20:51:03 +00:00

Author

Owner

@RawatDevanshu commented on GitHub (Sep 27, 2023):

Hello Lucas, I would like to work on this

@RawatDevanshu commented on GitHub (Sep 27, 2023): Hello Lucas, I would like to work on this

mirror commented

2026-03-23 20:51:04 +00:00

Author

Owner

@cherish2003 commented on GitHub (Oct 3, 2023):

@LucasXu0 can you assign me issue i want to work on it

@cherish2003 commented on GitHub (Oct 3, 2023): @LucasXu0 can you assign me issue i want to work on it

mirror commented

2026-03-23 20:51:04 +00:00

Author

Owner

@annieappflowy commented on GitHub (Oct 4, 2023):

Would you like to take it @RawatDevanshu ?
Otherwise, I'll assign this to @cherish2003

@annieappflowy commented on GitHub (Oct 4, 2023): Would you like to take it @RawatDevanshu ? Otherwise, I'll assign this to @cherish2003

mirror commented

2026-03-23 20:51:04 +00:00

Author

Owner

@RawatDevanshu commented on GitHub (Oct 4, 2023):

yes I will be working on this issue as soon as you assign.

@RawatDevanshu commented on GitHub (Oct 4, 2023): yes I will be working on this issue as soon as you assign.

mirror commented

2026-03-23 20:51:04 +00:00

Author

Owner

@annieappflowy commented on GitHub (Oct 4, 2023):

Assigned to @RawatDevanshu

@annieappflowy commented on GitHub (Oct 4, 2023): Assigned to @RawatDevanshu

mirror commented

2026-03-23 20:51:05 +00:00

Author

Owner

@annieappflowy commented on GitHub (Oct 4, 2023):

@cherish2003 , have you found any other issues that interest you?

@annieappflowy commented on GitHub (Oct 4, 2023): @cherish2003 , have you found any other issues that interest you?

mirror commented

2026-03-23 20:51:05 +00:00

Author

Owner

@RawatDevanshu commented on GitHub (Oct 22, 2023):

hello @LucasXu0, I have implemented the required change and it looks visually as asked but it is not functionally working can you share some insights on what can work, I have tried moving the text field widget up the tree but it's not working, after selecting text field and pressing backspace the whole image block gets deleted.

I have added gif example here:-
https://pasteboard.co/MnqpivItCKSi.gif

so basically keyboard controls are not working as usual for textfield widget

this is how it looks right now:-

Here are the changes i made to line 119 in custom_image_block_component.dart
child = BlockSelectionContainer( node: node, delegate: this, listenable: editorState.selectionNotifier, blockColor: editorState.editorStyle.selectionColor, supportTypes: const [ BlockSelectionType.block, ], child: Padding( key: imageKey, padding: padding, child: Column( children: [ child, const Padding( padding: EdgeInsets.symmetric(horizontal: 10.0), child: TextField( style: TextStyle(decoration: TextDecoration.underline), decoration: InputDecoration( border: InputBorder.none, hintText: 'Caption', hintStyle: TextStyle(decoration: TextDecoration.underline), ), ), ), ], ), ), );

@RawatDevanshu commented on GitHub (Oct 22, 2023): hello @LucasXu0, I have implemented the required change and it looks visually as asked but it is not functionally working can you share some insights on what can work, I have tried moving the text field widget up the tree but it's not working, after selecting text field and pressing backspace the whole image block gets deleted. I have added gif example here:- https://pasteboard.co/MnqpivItCKSi.gif so basically keyboard controls are not working as usual for textfield widget this is how it looks right now:- ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/76153868/dbc68eab-a08c-4e03-b33c-8d73cca8573e) ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/76153868/641b05a4-3bfc-4b64-a0c7-20f8b9bce653) Here are the changes i made to line 119 in custom_image_block_component.dart ` child = BlockSelectionContainer( node: node, delegate: this, listenable: editorState.selectionNotifier, blockColor: editorState.editorStyle.selectionColor, supportTypes: const [ BlockSelectionType.block, ], child: Padding( key: imageKey, padding: padding, child: Column( children: [ child, const Padding( padding: EdgeInsets.symmetric(horizontal: 10.0), child: TextField( style: TextStyle(decoration: TextDecoration.underline), decoration: InputDecoration( border: InputBorder.none, hintText: 'Caption', hintStyle: TextStyle(decoration: TextDecoration.underline), ), ), ), ], ), ), ); `

mirror commented

2026-03-23 20:51:05 +00:00

Author

Owner

@annieappflowy commented on GitHub (Dec 5, 2025):

Supported in v0.10.5

@annieappflowy commented on GitHub (Dec 5, 2025): Supported in v0.10.5

mirror referenced this issue

2026-03-23 22:15:59 +00:00

[PR #1564] [MERGED] fix: the grid cell border color didn't change after switch to new theme #4824

mirror referenced this issue

2026-03-24 21:45:49 +00:00