Add support for strikethrough in content editor

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

@@ -63,6 +63,15 @@ export default {
       :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
+    <toolbar-button
+      data-testid="strike"
+      content-type="strike"
+      icon-name="strikethrough"
+      editor-command="toggleStrike"
+      :label="__('Strikethrough')"
+      :tiptap-editor="contentEditor.tiptapEditor"
+      @execute="trackToolbarControlExecution"
+    />
     <toolbar-button
       data-testid="code"
       content-type="code"

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

+import { Strike } from '@tiptap/extension-strike';
+
+export const tiptapExtension = Strike;
+export const serializer = {
+  open: '~~',
+  close: '~~',
+  mixable: true,
+  expelEnclosingWhitespace: true,
+};

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

@@ -19,6 +19,7 @@ import * as Link from '../extensions/link';
 import * as ListItem from '../extensions/list_item';
 import * as OrderedList from '../extensions/ordered_list';
 import * as Paragraph from '../extensions/paragraph';
+import * as Strike from '../extensions/strike';
 import * as Text from '../extensions/text';
 import buildSerializerConfig from './build_serializer_config';
 import { ContentEditor } from './content_editor';
@@ -44,6 +45,7 @@ const builtInContentEditorExtensions = [
   ListItem,
   OrderedList,
   Paragraph,
+  Strike,
   Text,
 ];
 

locale/gitlab.pot

@@ -31227,6 +31227,9 @@ msgstr ""
 msgid "StorageSize|Unknown"
 msgstr ""
 
+msgid "Strikethrough"
+msgstr ""
+
 msgid "Subgroup information"
 msgstr ""
 

spec/frontend/content_editor/components/top_toolbar_spec.js

@@ -42,6 +42,7 @@ describe('content_editor/components/top_toolbar', () => {
     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' }}

spec/frontend/fixtures/api_markdown.yml

 # This data file drives the specs in
 # spec/frontend/fixtures/api_markdown.rb and
-# spec/frontend/rich_text_editor/extensions/markdown_processing_spec.js
+# spec/frontend/content_editor/extensions/markdown_processing_spec.js
 ---
 - name: bold
   markdown: '**bold**'
@@ -8,6 +8,8 @@
   markdown: '_emphasized text_'
 - name: inline_code
   markdown: '`code`'
+- name: strike
+  markdown: '~~del~~'
 - name: link
   markdown: '[GitLab](https://gitlab.com)'
 - name: code_block