Display non-markdown content in the WYSIWYG mode of the SSE::Kramdown

Implementation issue for #216836 (closed)

Custom HTML Renderer - Kramdown

• Target syntax: {: }
• Regex: (^{:.+}$)/gm

Solution thoughts:

• custom renderer on text inline node type

  customHTMLRenderer: {
    text(node, context) {
      // parse node.literal and if matches against kramdownRegex, wrap and return an HTML div node with contenteditable="false"
    },
  }

• return an array of nodes vs the same text node via https://github.com/nhn/tui.editor/blob/master/apps/editor/docs/custom-html-renderer.md#using-multiple-tags-for-a-node
• possibly leverage origin https://github.com/nhn/tui.editor/blob/master/apps/editor/docs/custom-html-renderer.md#origin

TODO

• Implementation
  • initial
  • - TOC accounted for? (node.type === 'list' parent and replace it and children if confirmed match)
  • cleanup
    • abstraction for all kramdown related processing into a single service possible against the customHTMLRenderer API?
    • Toast UI .ts import consts vs. magic strings?
• Tests
• Code review