Rich Text Editor Bug: A line starting with # symbol gets saved in two different ways

Problem:

In rich text editing, if you create a line that is starting with the #-symbol (by placing a # on one line and inserting a linebreak before the symbol) it will get saved in either of two ways in markdown.

• Saved as \# if no further edits have been done
• Saved as <span dir="">#</div> if a new line is created after the one starting with #-sign

Example:

Context:

Comment

Implementation guide:

Below patch should fix this:

diff --git a/app/assets/javascripts/content_editor/extensions/html_marks.js b/app/assets/javascripts/content_editor/extensions/html_marks.js
index 79fc0eea2c78..58fa2655e250 100644
--- a/app/assets/javascripts/content_editor/extensions/html_marks.js
+++ b/app/assets/javascripts/content_editor/extensions/html_marks.js
@@ -50,7 +50,8 @@ export default marks.map((name) =>
     },

     parseHTML() {
-      return [{ tag: name, priority: PARSE_HTML_PRIORITY_LOWEST }];
+      const tag = name === 'span' ? `${name}:not([data-escaped-char])` : name;
+      return [{ tag, priority: PARSE_HTML_PRIORITY_LOWEST }];
     },

     renderHTML({ HTMLAttributes }) {

Explanation: The backend renderer puts all escaped characters in a new span with a data-escaped-char attribute. These span tags are inserted by the backend and not the user, so they should be ignored by the rich text editor parser.