Text Highlighter
The following is the current design guide for Wax:
You can see where the highlighter UX should appear (expanded at top)
link : https://musing-hawking-156433.netlify.app/ (our apologies, but this is slow to load)
Wax Repo : https://gitlab.coko.foundation/wax/wax-prosemirror
Text Highlighter Brief for Amnet
Functionality description:
- Users should be able to select any part of the text and apply a background color from a set of predefined colors.
- Tool should only be enabled when the selection is text and selection length is equal or greater than 1 character.
- It should work both on the main editor and in notes.
- When the tool is active clicking the toolbar icon or clicking anywhere outside of the tool should close it.
- The Last box inside the tool should be a white/transparent one which will be used to clear existing highlights.
- The Last color used should be reflected in the tool icon
- When the user has already applied color and makes a new selection double-clicking the toolbar icon should apply the last color. A single click should expand the tool to select color
Implementation Steps:
- Create a new service. Each service in Wax contains all the functionality for a specific feature. You can read more about services in the README. Also, check the code in the Wax repo as there are numerous examples of already created ones.
- Create a new Prosemirror mark and register it in the Service.
- Create a new tool.
- Assign the tool to an existing tool group or creating a new one.
- Add all the necessary code to build all the functionality described above in the newly created tool. Please also check the Prosemirror documentation.
- Add in the theme all necessary styling.
Please check the existing plugins in the Wax repo for illustration of how it all fits together.
If you need help ping me on Mattermost! https://mattermost.coko.foundation/ in the public Wax channel - Christos