Custom Tags
Custom Tags Brief for Amnet
Functionality description:
Custom Tags, allow users to tag, either inline or block level, a piece of text with a tag of his choice that he will create. As an example of inline, we have strong, underline, italics, etc. The user might want to create a new tag that will help him, style let's say a dialogue.
John:hi
Joel:hello John
By creating a new tag ex. dialogue-space the user can tag John: and Joel: and in the css apply of the book apply a rule, for separating them. So the HTML would look something like that.
<span class="custom-tag-inline dialogue-space"> John:</span>hi
<span class="custom-tag-inline dialogue-space"> Joel:</span>hello John
The functionality will also allow tagging whole blocks of texts like paragraphs. You can check also the old version of Wax(http://wax-demo.coko.foundation/), on how this was implemented. On the left, the user can create a new block-level custom tag or choose one that was previously created. (In Editoria integration all of the custom tags are saved into Editoria's DB). Also by clicking the check icon
on the toolbar the user enables/disables the ability to tag inline custom tags by selecting some part of the text.
For Wax 2 let's keep the same UI and in future iterations, we will improve both the UI and the feature.
So the feature is broken down into 2 separate tags "groups". Inline and block level.
Inline: By clicking a toolbar icon, the feature gets enabled/disabled. When enabled, and the user makes a selection an overlay tool should appear, displaying the list of existing tags, and the ability to add a new one. When the cursor is on a selection and a tag exists, it should work like the rest of Wax's/prosemirror inline commands do.
Block Level: Similar to Wax 1 on the left toolbar create block-level custom tags as you see them, and again they should work as Wax2/prosemirror paragraphs work.
Implementation Steps:
- Create a custom tags Service. Through the config you can pass configuration to that service, that will be of the following format:
CustomTagsService: { tags: [{label: 'custom-tag-label-1', tagType: 'inline'}, {label: 'custom-tag-label-2', tagType: 'block'}] }
etc
- Create 2 extra services CustomTagsInlineService and CustomTagsBlockService with their tools. You can check as an example the TrackChangeService.
- For the CustomTagsInlineService you will also need to register an overlay tool. You can check as an example the linkService and CommentService.
- For the CustomTagsBlockService you will have to check how the first tab of the left menu is created, as you can also render ToolGroups (https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js)
- For the schema create 2 new tags one inline and one block.
custom-tag-inline
andcustom-tag-block
with a class attribute for both of them. - Each name added by the user will result in a class. So if you add a new custom inline tag of
Test Tag
the end result in the editor would be<custom-tag-inline class="test-tag"> Some text </custom-tag-inline>
- To get the existing custom tags from config in either inline or block-level tools you can get them from the context. It should be something like that
app.config.get('config.CustomTagsService')
and for each one pick the tags that apply. - For now save the tags on React's state or local/storage. During integration with editoria an update method from editoria will allow us to save the tags into the DB.
- the format of each custom tag, similar to the config passed will be ,
const addNewTag = { label: customTag, tagType: 'inline' }
const addNewTag = { label: customTag, tagType: 'block' }
for inline and block-level ones.
If anything,is unclear, after reading the above, or you have any questions during implementation you can talk to me on mattermost or reply on the issue.
Also, let's break the feature into 2 separate branches/MR. One for the inline and on the Block level. Start with either first, create a MR, and then start on the next one.