fix(html-comment): fix html comments from being visible in the rich editor #211
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #195
Hello, first time contributor here. 👋
I thought I would pick up an issue labeled as
good first issue
to familiarize myself with the codebase and your code conventions. I have to say the PR turned out to be a bit bigger than I initially thought. Nevertheless I hope this is useful and I look forward to your feedback.Describe your changes
Issue Analysis
The blue bar in RT mode described in #195 appears because of this CSS rule which applies to all selected
html_block
nodes markdown-it parses out (html comments are treated as any anotherhtml_block
node).Furthermore I found that all the html comments get a margin bottom in RT mode (which I assume is not desired behavior) as a consequence of being categorized as any other
html_block
by the parser.Proposed Solution
The solution I implemented introduces an
html_comment
markdown-it plugin which allows to differentiate html comments and handle them accordingly in the RT mode.The plugin detects only html comments blocks.
Html comments inlined with other elements/text are ignored and they are processed as they were before.
A more detailed explanation about the plugin's logic can be found in the related unit test file (
html-comment.test.ts
).PR Checklist
/** ... */
docsbug
/enhancement
and other labels as appropriateEnvironment(s) tested