Add support for inline diff in content editor

Add support for inline diff elements using {+added+} and {-deleted-}.

Changelog: added

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

+import { Mark, markInputRule, mergeAttributes } from '@tiptap/core';
+
+export const inputRegexAddition = /(\{\+(.+?)\+\})$/gm;
+export const inputRegexDeletion = /(\{-(.+?)-\})$/gm;
+
+export default Mark.create({
+  name: 'inlineDiff',
+
+  defaultOptions: {
+    HTMLAttributes: {},
+  },
+
+  addAttributes() {
+    return {
+      type: {
+        default: 'addition',
+        parseHTML: (element) => {
+          return {
+            type: element.classList.contains('deletion') ? 'deletion' : 'addition',
+          };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'span.idiff',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes: { type, ...HTMLAttributes } }) {
+    return [
+      'span',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        class: `idiff left right ${type}`,
+      }),
+      0,
+    ];
+  },
+
+  addInputRules() {
+    return [
+      markInputRule(inputRegexAddition, this.type, () => ({ type: 'addition' })),
+      markInputRule(inputRegexDeletion, this.type, () => ({ type: 'deletion' })),
+    ];
+  },
+});

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

@@ -16,6 +16,7 @@ import Heading from '../extensions/heading';
 import History from '../extensions/history';
 import HorizontalRule from '../extensions/horizontal_rule';
 import Image from '../extensions/image';
+import InlineDiff from '../extensions/inline_diff';
 import Italic from '../extensions/italic';
 import Link from '../extensions/link';
 import ListItem from '../extensions/list_item';
@@ -74,6 +75,7 @@ export const createContentEditor = ({
     History,
     HorizontalRule,
     Image,
+    InlineDiff,
     Italic,
     Link,
     ListItem,

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

@@ -13,6 +13,7 @@ import HardBreak from '../extensions/hard_break';
 import Heading from '../extensions/heading';
 import HorizontalRule from '../extensions/horizontal_rule';
 import Image from '../extensions/image';
+import InlineDiff from '../extensions/inline_diff';
 import Italic from '../extensions/italic';
 import Link from '../extensions/link';
 import ListItem from '../extensions/list_item';
@@ -36,6 +37,15 @@ const defaultSerializerConfig = {
     [Italic.name]: { open: '_', close: '_', mixable: true, expelEnclosingWhitespace: true },
     [Subscript.name]: { open: '<sub>', close: '</sub>', mixable: true },
     [Superscript.name]: { open: '<sup>', close: '</sup>', mixable: true },
+    [InlineDiff.name]: {
+      mixable: true,
+      open(state, mark) {
+        return mark.attrs.type === 'addition' ? '{+' : '{-';
+      },
+      close(state, mark) {
+        return mark.attrs.type === 'addition' ? '+}' : '-}';
+      },
+    },
     [Link.name]: {
       open() {
         return '[';

spec/frontend/content_editor/extensions/inline_diff_spec.js

+import { inputRegexAddition, inputRegexDeletion } from '~/content_editor/extensions/inline_diff';
+
+describe('content_editor/extensions/inline_diff', () => {
+  describe.each`
+    inputRegex            | description             | input                         | matches
+    ${inputRegexAddition} | ${'inputRegexAddition'} | ${'hello{+world+}'}           | ${true}
+    ${inputRegexAddition} | ${'inputRegexAddition'} | ${'hello{+ world +}'}         | ${true}
+    ${inputRegexAddition} | ${'inputRegexAddition'} | ${'hello {+ world+}'}         | ${true}
+    ${inputRegexAddition} | ${'inputRegexAddition'} | ${'{+hello world +}'}         | ${true}
+    ${inputRegexAddition} | ${'inputRegexAddition'} | ${'{+hello with \nnewline+}'} | ${false}
+    ${inputRegexAddition} | ${'inputRegexAddition'} | ${'{+open only'}              | ${false}
+    ${inputRegexAddition} | ${'inputRegexAddition'} | ${'close only+}'}             | ${false}
+    ${inputRegexDeletion} | ${'inputRegexDeletion'} | ${'hello{-world-}'}           | ${true}
+    ${inputRegexDeletion} | ${'inputRegexDeletion'} | ${'hello{- world -}'}         | ${true}
+    ${inputRegexDeletion} | ${'inputRegexDeletion'} | ${'hello {- world-}'}         | ${true}
+    ${inputRegexDeletion} | ${'inputRegexDeletion'} | ${'{-hello world -}'}         | ${true}
+    ${inputRegexDeletion} | ${'inputRegexDeletion'} | ${'{+hello with \nnewline+}'} | ${false}
+    ${inputRegexDeletion} | ${'inputRegexDeletion'} | ${'{-open only'}              | ${false}
+    ${inputRegexDeletion} | ${'inputRegexDeletion'} | ${'close only-}'}             | ${false}
+  `('$description', ({ inputRegex, input, matches }) => {
+    it(`${matches ? 'matches' : 'does not match'}: "${input}"`, () => {
+      const match = new RegExp(inputRegex).test(input);
+
+      expect(match).toBe(matches);
+    });
+  });
+});

spec/frontend/fixtures/api_markdown.yml

@@ -8,6 +8,10 @@
   markdown: '_emphasized text_'
 - name: inline_code
   markdown: '`code`'
+- name: inline_diff
+  markdown: |-
+    * {-deleted-}
+    * {+added+}
 - name: subscript
   markdown: H<sub>2</sub>O
 - name: superscript