[Bug] Hardcoded colors.

[MichalNemec]

Bug Description

I cant change lightblue color in toolbar, on quote and link.

How to Reproduce

just insert those and change colorscheme.

Expected Behavior

able to color everything to suit colors to app color ecosystem.

Operating System

MacOS, but its anything

AppFlowy Editor Version(s)

1.0.3

Screenshots

No response

Additional Context

No response

[annieappflowy]

cc: @hyj1204 @LucasXu0

[LucasXu0]

@hyj1204 I believe we should provide options to customize the colors for the text color picker and highlight color picker.

[MichalNemec]

@hyj1204 I believe we should provide options to customize the colors for the text color picker and highlight color picker.

So if i understand correctly, this quote should stay lightblue forever?

[hyj1204]

@hyj1204 I believe we should provide options to customize the colors for the text color picker and highlight color picker.

Agree.

I think we should have customized colors in both following areas

1. The primary color in different Block components(like the highlight color for the selected item in the toolbar, quote, and link)
2. The color options of color picker(to change the text and background color)

[hyj1204]

Related PR https://github.com/AppFlowy-IO/appflowy-editor/pull/233

[MichalNemec]

I just checked the PR and i see you made changes to the text and bg for colorization, awesome work! Do you know the status of the hardcoded colors i.e. checkbox in a list (as in demo image in readme) and the quote?

[annieappflowy]

Hi @MichalNemec , it would be helpful for us to better understand your needs if you could provide some high-level information. Could you share a bit about what you are building with appflowy_editor and why you decided to use the package? If you're still exploring, what are the missing features that prevent you from switching to appflowy_editor?

[MichalNemec]

Hello @annieappflowy, I spent really long time to find some editor, which could suit our needs. We need editor to write articles and have custom functionality that fits within the scope of our application. We tried markdown, but cannot extend it easily and its clunky for people who dont know it well, then we tried html editor and what we tried was clunky too, super_editor fell short, so we decided to give appflowy_editor a try.

This is the most comfortable for our uses to work with. We need to have two usecases of this editor. One is for content managers, which should have more functionality, second should be for users, with less functionality, but easy to understand. We also need custom functionality, i.e. custom links which are not urls, which navigate to specific pages in flutter (i.e. select specific word and custom icon in toolbar -> click -> show typeahead to find different article->click-> selected word now has attribute that has data for that different article->style it by default as link, so basically copy of link functionality, but does not launch url, but custom code #275 ).

We also need the editor to fit in the ecosystem of our colors, because we dont use blue color and by default it should mimic what we have in the theme. The editor will be used for articles, posts, products. Its limited for now for us, because of the colors and extendability. We contemplate a lot about forking it so we have options to tweak it to our needs with custom functionality. Also we need some kind of cleaner, which shows just a text (in post card for example, to not have it formatted, because it could break the visual) and also some parser for website in angular.

[LucasXu0]

Hey, @MichalNemec. All the icons for the text-based block component are customizable in the latest version.

https://github.com/AppFlowy-IO/appflowy-editor/pull/274

[LucasXu0]

Its limited for now for us, because of the colors and extendability.

What do you mean the 'extendability'?

[MichalNemec]

Its limited for now for us, because of the colors and extendability.

What do you mean the 'extendability'?

For example, there was no clear way of doing the custom link, no direct options for grabbing stuff from theme, no parser, No options for image upload, etc.. its more of details, what we heavily rely on at this moment is the custom linking, where you have "thats in the scope of Accountability of reliance" where the italic thing is the actual text (colored default by primary color) and when you click it, it directs to you some other page (not url). Then more will come, but when this is working, we can then have this as an example and try to push it more for future needs. We also experimented with slash command and that is awesome, but there is a lot of redefining i believe. .custom({}) editor could have default the standard stuff. Slash command option isnt working for us with the custom link, since it behaves like a block instead of text.

those are the things that are crutial for us now. I hope that answered your question.

[MichalNemec]

Hey, @MichalNemec. All the icons for the text-based block component are customizable in the latest version.

274

i tried it and there is no option for the blue to get rid of. I can only style the text, i want the blue bar next to the text to be colored red.

This is exactly what i want:

[LucasXu0]

Hey, @MichalNemec. All the icons for the text-based block component are customizable in the latest version.

274

i tried it and there is no option for the blue to get rid of. I can only style the text, i want the blue bar next to the text to be colored red.

This is exactly what i want:

Please use the code shown in the PR. The icon is not part of the text configuration; instead, please use iconBuilder.

[LucasXu0]

For example, there was no clear way of doing the custom link, no direct options for grabbing stuff from theme, no parser, No options for image upload, etc.. its more of details, what we heavily rely on at this moment is the custom linking, where you have "thats in the scope of Accountability of reliance" where the italic thing is the actual text (colored default by primary color) and when you click it, it directs to you some other page (not url). Then more will come, but when this is working, we can then have this as an example and try to push it more for future needs. We also experimented with slash command and that is awesome, but there is a lot of redefining i believe. .custom({}) editor could have default the standard stuff. Slash command option isnt working for us with the custom link, since it behaves like a block instead of text.

those are the things that are crutial for us now. I hope that answered your question.

Thanks. Good insights.

there was no clear way of doing the custom link, no direct options for grabbing stuff from theme,

Here are some basic rules: the text configuration provided by the editor style controls all text-based blocks, but we also provide a customized configuration for each block. So, in your case, if you want to customize the link color, please use the following code instead.

no parser What do you mean 'no parser'?

No options for image upload

What options do you expect?

there is a lot of redefining i believe. .custom({}) editor could have default the standard stuff.

Sure. I can provide the default standard values to the .custom function.

Slash command option isnt working for us with the custom link, since it behaves like a block instead of text.

I will remove the default behavior for the link, allowing you to customize its behavior after tapping it.

Finally, if you want to customize a feature similar to the link (href), but with very different behaviors, I suggest customizing your own attribute keys. This will give it a distinct and personalized touch. For example, in AppFlowy, we have a mention block that functions similarly to the link feature. However, when you touch it, it opens our internal page instead of a website.

I believe these files will provide you with more hints. Additionally, I will update the theme documentation as it is slightly outdated. customize the style customize the block

[LucasXu0]

@MichalNemec I think this documentation will be helpful in understanding how to customize the editor further.

https://github.com/AppFlowy-IO/appflowy-editor/blob/1fd0e62b7be75a449f50f85feb25f0df4abf9150/documentation/customizing.md#customizing-a-theme

[MichalNemec]

Thank you, i didnt realize the quote bar next to the text is an actual icon, lol. I looked at the mention you have, its as a block, so it doesnt work as simple link within the text "visual" right? Ive made my custom link, which works as intended, but the limitation with one character to hook it up does not make sense for us. Since you have access to the text it could with one backspace know how many characters is there and delete it all.

[LucasXu0]

I looked at the mention you have, its as a block, so it doesnt work as simple link within the text "visual" right?

Yes. The mention block has it's own style, like padding, so it's not just a simple text.

Ive made my custom link, which works as intended, but the limitation with one word to hook it up does not make sense for us. Since you have access to the text it could with one backspace know how many characters is there and delete it all.

The content inside 'delta' must be 1 if it's not just a simple text. We can control the number of words to delete at one time, but it will increase the complexity. If you declare text with this attribute, it should delete all at once.

I don't know why it's considered a limitation, as the actual text can be retrieved from the attributes.

[MichalNemec]

The limitation is usability. When im new and try to write something i dont know i should write just one character and then hook up custom link. Most people do i.e. "As seen here" where here is the actual custom link, then continue typing and its bugging out. Without actually telling them to do format "as seen x" and hook up custom link, they wouldn ever know and it would be much easier even for future to make that change happen. Whenever i do in extended field #foobar then it makes it as one widget within text and when im deleting it, it just deletes the whole widget. I think there is problem with calculation right? How can we approach this situation?

The only thing thats as solution is:

• to write above/below editor explanation about custom link
• skip widgetspan and make it as a textspan without any icon etc.. then it works exactly same as link, but its confusing because of normal link.

[LucasXu0]

to write above/below editor explanation about custom link

Sure, I will list the limitations and update the documentation when developers need to customize attributes with WidgetSpan.

[MichalNemec]

i meant this whole response as from user of editor point of view. When user A opens app and sees this editor. Not from developers perspective. Devs know that they should do one characters to do widget span, plain user does not.

[LucasXu0]

It is not related to the user. When formatting the text to a widget span, you should also format its plain text.

Let me clarify further. It is not required for users to only select a single character for formatting. They can select any text they want. What developers should do is format the selected text to a new style and change its text to a single character.

Here's an example of an inline math equation where the user can select any text they want to format.

https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/inline_math_equation/inline_math_equation_toolbar_item.dart

[MichalNemec]

aaah, now i fully understand and this answers the culprit question i had, glad we understood each other now, i didnt know that there is something like that and thought its missing in implementation. I'll make it work now.

Thank you!!!!