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 #8202] [FR] Rounded corners for colored texts #3645

New issue

Closed

opened 2026-03-23 21:32:02 +00:00 by mirror · 7 comments

mirror commented

2026-03-23 21:32:02 +00:00

Owner

Originally created by @baranwalsh on GitHub (Aug 31, 2025).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/8202

Originally assigned to: @ChiragKr04 on GitHub.

Description

Please make it rounded like this

Impact

Everyone. it's an aesthetic thing.

Additional Context

This is how to access the text block coloring feature.

Originally created by @baranwalsh on GitHub (Aug 31, 2025). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/8202 Originally assigned to: @ChiragKr04 on GitHub. ### Description <img width="1438" height="268" alt="Image" src="https://github.com/user-attachments/assets/c38acced-7cad-4786-b8fb-5ea8c2f701e0" /> Please make it rounded like this <img width="929" height="116" alt="Image" src="https://github.com/user-attachments/assets/7e65e69c-1222-4820-a6b2-a36f5f08bce1" /> ### Impact Everyone. it's an aesthetic thing. ### Additional Context <img width="717" height="419" alt="Image" src="https://github.com/user-attachments/assets/134bfd9c-1745-4ad5-845b-2e92e4fae359" /> This is how to access the text block coloring feature.

mirror

2026-03-23 21:32:02 +00:00

closed this issue
added the
Q4 25

good first issue for experienced devs

editor

good first issue for devs
labels

mirror commented

2026-03-23 21:32:03 +00:00

Author

Owner

@ChiragKr04 commented on GitHub (Sep 30, 2025):

Hey, is anybody working on this. Would love to work on this! @MayurSMahajan @annieappflowy

@ChiragKr04 commented on GitHub (Sep 30, 2025): Hey, is anybody working on this. Would love to work on this! @MayurSMahajan @annieappflowy

mirror commented

2026-03-23 21:32:03 +00:00

Author

Owner

@RishiAhuja commented on GitHub (Oct 5, 2025):

Hi team! I'm a new contributor with my local development environment set up and running. I'd love to pick up this issue as my first contribution. Please let me know if it's available and if there's any specific guidance I should follow. Thanks! @MayurSMahajan @annieappflowy

@RishiAhuja commented on GitHub (Oct 5, 2025): Hi team! I'm a new contributor with my local development environment set up and running. I'd love to pick up this issue as my first contribution. Please let me know if it's available and if there's any specific guidance I should follow. Thanks! @MayurSMahajan @annieappflowy

mirror commented

2026-03-23 21:32:03 +00:00

Author

Owner

@MayurSMahajan commented on GitHub (Oct 5, 2025):

@ChiragKr04 @RishiAhuja, according to AppFlowy's guidelines I will assign this issue to @ChiragKr04.

Don't worry @RishiAhuja about not being assigned before starting work on it. Even if you aren't assigned, all pull requests that solve a GitHub issue are appreciated.

Reference:
https://docs.appflowy.io/docs/documentation/appflowy/draft-how-to-contribute-to-appflowy#finding-an-issue-to-work-on

@MayurSMahajan commented on GitHub (Oct 5, 2025): @ChiragKr04 @RishiAhuja, according to AppFlowy's guidelines I will assign this issue to @ChiragKr04. Don't worry @RishiAhuja about not being assigned before starting work on it. Even if you aren't assigned, all pull requests that solve a GitHub issue are appreciated. Reference: https://docs.appflowy.io/docs/documentation/appflowy/draft-how-to-contribute-to-appflowy#finding-an-issue-to-work-on

mirror commented

2026-03-23 21:32:03 +00:00

Author

Owner

@RishiAhuja commented on GitHub (Oct 6, 2025):

@MayurSMahajan As a new contributor, I'm still getting familiar with the codebase, but I've started to investigate. I tried looking for the code to solve this certain issue.

My initial search led me to lib/plugins/document/presentation/editor_style.dart and editor_configuration.dart, as they seem to handle editor styling. However, I'm having trouble pinpointing the exact code that renders the background highlight for a selected block (the part that needs to be rounded).

Could someone point me in the right direction for the widget or decorator that applies this background style? Any guidance on where this block-level decoration is defined would be a huge help.

Thanks for your time!

cc @ChiragKR04

@RishiAhuja commented on GitHub (Oct 6, 2025): @MayurSMahajan As a new contributor, I'm still getting familiar with the codebase, but I've started to investigate. I tried looking for the code to solve this certain issue. My initial search led me to `lib/plugins/document/presentation/editor_style.dart` and `editor_configuration.dart`, as they seem to handle editor styling. However, I'm having trouble pinpointing the exact code that renders the background highlight for a selected block (the part that needs to be rounded). Could someone point me in the right direction for the widget or decorator that applies this background style? Any guidance on where this block-level decoration is defined would be a huge help. Thanks for your time! cc @ChiragKR04

mirror commented

2026-03-23 21:32:03 +00:00

Author

Owner

@ChiragKr04 commented on GitHub (Oct 7, 2025):

@RishiAhuja
If you go over to this file /lib/plugins/document/presentation/editor_plugins/actions/option/color_option_action.dart this is the file where you will find the function which updated the background color of the heading/para etc, widget/block.

The problem is the background color and styling you see is grouped with the node (look at the code below)
blockComponentBackgroundColor is getting updated which handles widget's background color.

And to update the UI or color related to node we need to go to different repository which is AppflowyEditor

As under the hood all the UI widgets/blocks you see in Appflowy is using AppflowyEditor through a package under the hood

This issue is not easy as it looks 😅 kinda tricky in a way! Or maybe im overthinking 😅

// In multiple selection, we need to update all the nodes in the selection
        //
        if (selectionType == SelectionType.block && selection != null) {
          final nodes = editorState.getNodesInSelection(selection.normalized);
          for (final node in nodes) {
            transaction.updateNode(node, {
              blockComponentBackgroundColor: option.id,
            });
          }
        } else {
          transaction.updateNode(node, {
            blockComponentBackgroundColor: option.id,
          });
        }

The fix I already found out in AppflowyEditor inside file lib/src/editor/block_component/heading_block_component/heading_block_component.dart which handles only heading block not the other blocks

Looking more into this if we can somehow do it at one place.

@ChiragKr04 commented on GitHub (Oct 7, 2025): @RishiAhuja If you go over to this file `/lib/plugins/document/presentation/editor_plugins/actions/option/color_option_action.dart` this is the file where you will find the function which updated the background color of the heading/para etc, widget/block. The problem is the background color and styling you see is grouped with the `node` (look at the code below) `blockComponentBackgroundColor` is getting updated which handles widget's background color. And to update the UI or color related to node we need to go to different repository which is [AppflowyEditor](https://github.com/AppFlowy-IO/appflowy-editor) As under the hood all the UI widgets/blocks you see in Appflowy is using AppflowyEditor through a package under the hood This issue is not easy as it looks 😅 kinda tricky in a way! Or maybe im overthinking 😅 ``` // In multiple selection, we need to update all the nodes in the selection // if (selectionType == SelectionType.block && selection != null) { final nodes = editorState.getNodesInSelection(selection.normalized); for (final node in nodes) { transaction.updateNode(node, { blockComponentBackgroundColor: option.id, }); } } else { transaction.updateNode(node, { blockComponentBackgroundColor: option.id, }); } ``` The fix I already found out in AppflowyEditor inside file `lib/src/editor/block_component/heading_block_component/heading_block_component.dart` which handles only heading block not the other blocks Looking more into this if we can somehow do it at one place. <img width="1030" height="594" alt="Image" src="https://github.com/user-attachments/assets/1cd22c19-b691-4546-b7e4-8701f54028f8" />

mirror commented

2026-03-23 21:32:03 +00:00

Author

Owner

@RishiAhuja commented on GitHub (Oct 7, 2025):

I see 😅

So from what I can understand, we'd need to either,
Change the AppFlowyEditor package directly to modify the rendering or
intercept the rendering somewhere in the pipeline and do custom rendering there, which doesn't feel like good practice and could break things down the line.

ParagraphBlockKeys.type: ParagraphBlockComponentBuilder() // From AppFlowyEditor

// intercept if we need to do it in this repo
ParagraphBlockKeys.type: CustomParagraphBlockComponentBuilder()

@RishiAhuja commented on GitHub (Oct 7, 2025): I see 😅 So from what I can understand, we'd need to either, Change the AppFlowyEditor package directly to modify the rendering or intercept the rendering somewhere in the pipeline and do custom rendering there, which doesn't feel like good practice and could break things down the line. ```dart ParagraphBlockKeys.type: ParagraphBlockComponentBuilder() // From AppFlowyEditor // intercept if we need to do it in this repo ParagraphBlockKeys.type: CustomParagraphBlockComponentBuilder() ```

mirror commented

2026-03-23 21:32:03 +00:00

Author

Owner

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

Supported in the upcoming release (v0.10.4)

@annieappflowy commented on GitHub (Nov 5, 2025): Supported in the upcoming release (v0.10.4)

mirror referenced this issue

2026-03-23 22:20:24 +00:00

[PR #3645] [MERGED] Updated, fixed and filled most of the spanish chapter for the translation of AppFlowy #5806