Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Desktop: Resolves #9468: Add support for changing text colors in rich text editor #9578

Merged

Conversation

personalizedrefrigerator
Copy link
Collaborator

@personalizedrefrigerator personalizedrefrigerator commented Dec 21, 2023

Summary

Adds support for changing text colors in TinyMCE.

Resolves #9468.

Notes & known issues

  • Changing the color of text within inline code is not supported currently. At present, it works within the editor, but Turndown discards the formatting.
  • When changing the color of text in the first line (and the note is auto-titled), the title becomes something similar to: <span style="color: #2DC26B;">This</span> is a <span style="color: #e67e23;">tes

Screenshots

screenshot: Text color dropdown shown under extended formatting menu, light mode
screenshot: Text color dropdown shown under extended formatting menu, dark mode

Testing

  1. Create a new, empty note.
  2. Type This is a test.
  3. Select test and change its color to orange.
  4. Switch to the markdown viewer.
  5. Verify that the text is still orange.
  6. Re-open the rich text editor.
  7. Select This and change its color to green.
  8. Switch to the markdown viewer.
  9. Verify that both colors are still present.

This has been successfully tested on Ubuntu 23.10.

Comment on lines 135 to 136
const hexColorRegex = /^\#[a-zA-Z0-9]+$/;
return node.nodeName === 'SPAN' && node.getAttribute('joplin-color')?.match(hexColorRegex);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps a better option here would be to use a turndown option perserveTextColors (similar to what we do with nested tables).

It may also make sense to put rules.foregroundColor somewhere else (turndown-plugin-gfm?).

Copy link
Owner

@laurent22 laurent22 Dec 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I wonder about this too. We can't have it enabled by default as it would apply to email-to-note or clipped web pages, but when switching between the rich text and Markdown I think that would make sense.

And it means we have a more generic solution without needing an extra "joplin-color" attribute

@laurent22
Copy link
Owner

Looks good, thanks Henry!

@laurent22 laurent22 merged commit 7e8c87e into laurent22:dev Jan 4, 2024
10 checks passed
@Inntel-Joplin
Copy link

Hi, I just installed Joplin and I am looking to use this new feature but can't find any trace of it in the current version. Is this scheduled for the next version or is there a particular way to enable it. I just started migrating from Evernote and text colors is the one feature that Joplin is missing for me to use it. I am using the Windows version.

@personalizedrefrigerator
Copy link
Collaborator Author

Hi, I just installed Joplin and I am looking to use this new feature but can't find any trace of it in the current version. Is this scheduled for the next version or is there a particular way to enable it. I just started migrating from Evernote and text colors is the one feature that Joplin is missing for me to use it. I am using the Windows version.

This feature should be in Joplin ≥ 2.14.6, which is currently in pre-release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for colours in RTE
3 participants