1 files changed, 29 insertions, 0 deletions
diff --git a/app/assets/javascripts/content_editor/extensions/word_break.js b/app/assets/javascripts/content_editor/extensions/word_break.js
new file mode 100644
index 00000000000..93b42466850
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/word_break.js
@@ -0,0 +1,29 @@
+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)];
+  },
+});