Add support for wbr in content editor

This MR adds support for word break opportunity tags (wbr)
in content editor.

Changelog: added

app/assets/javascripts/content_editor/extensions/word_break.js

+import { Node, mergeAttributes, nodeInputRule } from '@tiptap/core';
+
+export const inputRegex = /^<wbr>$/;
+
+export default Node.create({
+  name: 'wordBreak',
+  inline: true,
+  group: 'inline',
+  selectable: false,
+  atom: true,
+
+  defaultOptions: {
+    HTMLAttributes: {
+      class: 'gl-display-inline-flex gl-px-1 gl-bg-blue-100 gl-rounded-base gl-font-sm',
+    },
+  },
+
+  parseHTML() {
+    return [{ tag: 'wbr' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), '-'];
+  },
+
+  addInputRules() {
+    return [nodeInputRule(inputRegex, this.type)];
+  },
+});

app/assets/javascripts/content_editor/services/create_content_editor.js

@@ -43,6 +43,7 @@ import TaskItem from '../extensions/task_item';
 import TaskList from '../extensions/task_list';
 import Text from '../extensions/text';
 import Video from '../extensions/video';
+import WordBreak from '../extensions/word_break';
 import { ContentEditor } from './content_editor';
 import createMarkdownSerializer from './markdown_serializer';
 import trackInputRulesAndShortcuts from './track_input_rules_and_shortcuts';
@@ -112,6 +113,7 @@ export const createContentEditor = ({
     TaskList,
     Text,
     Video,
+    WordBreak,
   ];
 
   const allExtensions = [...builtInContentEditorExtensions, ...extensions];

app/assets/javascripts/content_editor/services/markdown_serializer.js

@@ -39,6 +39,7 @@ import TaskItem from '../extensions/task_item';
 import TaskList from '../extensions/task_list';
 import Text from '../extensions/text';
 import Video from '../extensions/video';
+import WordBreak from '../extensions/word_break';
 import {
   isPlainURL,
   renderHardBreak,
@@ -166,6 +167,7 @@ const defaultSerializerConfig = {
     },
     [Text.name]: defaultMarkdownSerializer.nodes.text,
     [Video.name]: renderPlayable,
+    [WordBreak.name]: (state) => state.write('<wbr>'),
   },
 };
 

spec/frontend/fixtures/api_markdown.yml

@@ -219,3 +219,5 @@
     # Sit amit
 
     ### I don't know
+- name: word_break
+  markdown: Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz