1 files changed, 49 insertions, 0 deletions
diff --git a/app/assets/javascripts/content_editor/extensions/comment.js b/app/assets/javascripts/content_editor/extensions/comment.js
new file mode 100644
index 00000000000..8e247e552a3
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/comment.js
@@ -0,0 +1,49 @@
+import { Node, textblockTypeInputRule } from '@tiptap/core';
+
+export const commentInputRegex = /^<!--[\s\n]$/;
+
+export default Node.create({
+  name: 'comment',
+  content: 'text*',
+  marks: '',
+  group: 'block',
+  code: true,
+  isolating: true,
+  defining: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'comment',
+        preserveWhitespace: 'full',
+        getContent(element, schema) {
+          const node = schema.node('paragraph', {}, [
+            schema.text(
+              element.textContent.replace(/&#x([0-9A-F]{2,4});/gi, (_, code) =>
+                String.fromCharCode(parseInt(code, 16)),
+              ) || ' ',
+            ),
+          ]);
+          return node.content;
+        },
+      },
+    ];
+  },
+
+  renderHTML() {
+    return [
+      'pre',
+      { class: 'gl-p-0 gl-border-0 gl-bg-transparent gl-text-gray-300' },
+      ['span', { class: 'content-editor-comment' }, 0],
+    ];
+  },
+
+  addInputRules() {
+    return [
+      textblockTypeInputRule({
+        find: commentInputRegex,
+        type: this.type,
+      }),
+    ];
+  },
+});