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 issueto 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_blocknodes markdown-it parses out (html comments are treated as any anotherhtml_blocknode).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_blockby the parser.Proposed Solution
The solution I implemented introduces an
html_commentmarkdown-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/enhancementand other labels as appropriateEnvironment(s) tested