Add support for horizontal rule in content editor

Users can now add a horizontal rule using the button in the toolbar
or by typing --- in the editor window in content editor.

Changelog: added

app/assets/javascripts/content_editor/components/top_toolbar.vue

@@ -123,5 +123,14 @@ export default {
       :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
+    <toolbar-button
+      data-testid="horizontal-rule"
+      content-type="horizontalRule"
+      icon-name="dash"
+      editor-command="setHorizontalRule"
+      :label="__('Add a horizontal rule')"
+      :tiptap-editor="contentEditor.tiptapEditor"
+      @execute="trackToolbarControlExecution"
+    />
   </div>
 </template>

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

+import { nodeInputRule } from '@tiptap/core';
 import { HorizontalRule } from '@tiptap/extension-horizontal-rule';
 import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
 
-export const tiptapExtension = HorizontalRule;
+export const hrInputRuleRegExp = /^---$/;
+
+export const tiptapExtension = HorizontalRule.extend({
+  addInputRules() {
+    return [nodeInputRule(hrInputRuleRegExp, this.type)];
+  },
+});
 export const serializer = defaultMarkdownSerializer.nodes.horizontal_rule;

locale/gitlab.pot

@@ -1921,6 +1921,9 @@ msgstr ""
 msgid "Add a homepage to your wiki that contains information about your project and GitLab will display it here instead of this message."
 msgstr ""
 
+msgid "Add a horizontal rule"
+msgstr ""
+
 msgid "Add a line"
 msgstr ""
 

spec/frontend/content_editor/components/top_toolbar_spec.js

@@ -39,17 +39,18 @@ describe('content_editor/components/top_toolbar', () => {
   });
 
   describe.each`
-    testId            | controlProps
-    ${'bold'}         | ${{ contentType: 'bold', iconName: 'bold', label: 'Bold text', editorCommand: 'toggleBold' }}
-    ${'italic'}       | ${{ contentType: 'italic', iconName: 'italic', label: 'Italic text', editorCommand: 'toggleItalic' }}
-    ${'strike'}       | ${{ contentType: 'strike', iconName: 'strikethrough', label: 'Strikethrough', editorCommand: 'toggleStrike' }}
-    ${'code'}         | ${{ contentType: 'code', iconName: 'code', label: 'Code', editorCommand: 'toggleCode' }}
-    ${'blockquote'}   | ${{ contentType: 'blockquote', iconName: 'quote', label: 'Insert a quote', editorCommand: 'toggleBlockquote' }}
-    ${'bullet-list'}  | ${{ contentType: 'bulletList', iconName: 'list-bulleted', label: 'Add a bullet list', editorCommand: 'toggleBulletList' }}
-    ${'ordered-list'} | ${{ contentType: 'orderedList', iconName: 'list-numbered', label: 'Add a numbered list', editorCommand: 'toggleOrderedList' }}
-    ${'code-block'}   | ${{ contentType: 'codeBlock', iconName: 'doc-code', label: 'Insert a code block', editorCommand: 'toggleCodeBlock' }}
-    ${'text-styles'}  | ${{}}
-    ${'link'}         | ${{}}
+    testId               | controlProps
+    ${'bold'}            | ${{ contentType: 'bold', iconName: 'bold', label: 'Bold text', editorCommand: 'toggleBold' }}
+    ${'italic'}          | ${{ contentType: 'italic', iconName: 'italic', label: 'Italic text', editorCommand: 'toggleItalic' }}
+    ${'strike'}          | ${{ contentType: 'strike', iconName: 'strikethrough', label: 'Strikethrough', editorCommand: 'toggleStrike' }}
+    ${'code'}            | ${{ contentType: 'code', iconName: 'code', label: 'Code', editorCommand: 'toggleCode' }}
+    ${'blockquote'}      | ${{ contentType: 'blockquote', iconName: 'quote', label: 'Insert a quote', editorCommand: 'toggleBlockquote' }}
+    ${'bullet-list'}     | ${{ contentType: 'bulletList', iconName: 'list-bulleted', label: 'Add a bullet list', editorCommand: 'toggleBulletList' }}
+    ${'ordered-list'}    | ${{ contentType: 'orderedList', iconName: 'list-numbered', label: 'Add a numbered list', editorCommand: 'toggleOrderedList' }}
+    ${'horizontal-rule'} | ${{ contentType: 'horizontalRule', iconName: 'dash', label: 'Add a horizontal rule', editorCommand: 'setHorizontalRule' }}
+    ${'code-block'}      | ${{ contentType: 'codeBlock', iconName: 'doc-code', label: 'Insert a code block', editorCommand: 'toggleCodeBlock' }}
+    ${'text-styles'}     | ${{}}
+    ${'link'}            | ${{}}
   `('given a $testId toolbar control', ({ testId, controlProps }) => {
     beforeEach(() => {
       buildWrapper();

spec/frontend/content_editor/extensions/horizontal_rule_spec.js

+import { hrInputRuleRegExp } from '~/content_editor/extensions/horizontal_rule';
+
+describe('content_editor/extensions/horizontal_rule', () => {
+  describe.each`
+    input      | matches
+    ${'---'}   | ${true}
+    ${'--'}    | ${false}
+    ${'---x'}  | ${false}
+    ${' ---x'} | ${false}
+    ${' --- '} | ${false}
+    ${'x---x'} | ${false}
+    ${'x---'}  | ${false}
+  `('hrInputRuleRegExp', ({ input, matches }) => {
+    it(`${matches ? 'matches' : 'does not match'}: "${input}"`, () => {
+      const match = new RegExp(hrInputRuleRegExp).test(input);
+
+      expect(match).toBe(matches);
+    });
+  });
+});

spec/frontend/fixtures/api_markdown.yml

@@ -10,6 +10,8 @@
   markdown: '`code`'
 - name: strike
   markdown: '~~del~~'
+- name: horizontal_rule
+  markdown: '---'
 - name: link
   markdown: '[GitLab](https://gitlab.com)'
 - name: code_block