Allow to insert highlighted code blocks in the Content Editor

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

@@ -80,6 +80,15 @@ export default {
       :tiptap-editor="contentEditor.tiptapEditor"
       @execute="trackToolbarControlExecution"
     />
+    <toolbar-button
+      data-testid="code-block"
+      content-type="codeBlock"
+      icon-name="doc-code"
+      editor-command="toggleCodeBlock"
+      :label="__('Insert a code block')"
+      :tiptap-editor="contentEditor.tiptapEditor"
+      @execute="trackToolbarControlExecution"
+    />
     <toolbar-button
       data-testid="bullet-list"
       content-type="bulletList"

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

 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
+import * as lowlight from 'lowlight';
 import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
 
 const extractLanguage = (element) => element.getAttribute('lang');
@@ -6,7 +7,14 @@ const extractLanguage = (element) => element.getAttribute('lang');
 const ExtendedCodeBlockLowlight = CodeBlockLowlight.extend({
   addAttributes() {
     return {
-      ...this.parent(),
+      language: {
+        default: null,
+        parseHTML: (element) => {
+          return {
+            language: extractLanguage(element),
+          };
+        },
+      },
       /* `params` is the name of the attribute that
         prosemirror-markdown uses to extract the language
         of a codeblock.
@@ -19,8 +27,16 @@ const ExtendedCodeBlockLowlight = CodeBlockLowlight.extend({
           };
         },
       },
+      class: {
+        default: 'code highlight js-syntax-highlight',
+      },
     };
   },
+  renderHTML({ HTMLAttributes }) {
+    return ['pre', HTMLAttributes, ['code', {}, 0]];
+  },
+}).configure({
+  lowlight,
 });
 
 export const tiptapExtension = ExtendedCodeBlockLowlight;

app/assets/stylesheets/page_bundles/wiki.scss

 @import 'mixins_and_variables_and_functions';
+@import 'highlight.js/scss/a11y-light';
 
 .title .edit-wiki-header {
   width: 780px;

package.json

@@ -138,6 +138,7 @@
     "jszip-utils": "^0.0.2",
     "katex": "^0.13.2",
     "lodash": "^4.17.20",
+    "lowlight": "^1.20.0",
     "marked": "^0.3.12",
     "mathjax": "3",
     "mermaid": "^8.9.2",

spec/frontend/content_editor/components/top_toolbar_spec.js

@@ -46,6 +46,7 @@ describe('content_editor/components/top_toolbar', () => {
     ${'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'}  | ${{}}
   `('given a $testId toolbar control', ({ testId, controlProps }) => {
     beforeEach(() => {

spec/frontend/content_editor/extensions/code_block_highlight_spec.js

+import { tiptapExtension as CodeBlockHighlight } from '~/content_editor/extensions/code_block_highlight';
+import { loadMarkdownApiResult } from '../markdown_processing_examples';
+import { createTestEditor } from '../test_utils';
+
+describe('content_editor/extensions/code_block_highlight', () => {
+  let codeBlockHtmlFixture;
+  let parsedCodeBlockHtmlFixture;
+  let tiptapEditor;
+
+  const parseHTML = (html) => new DOMParser().parseFromString(html, 'text/html');
+  const preElement = () => parsedCodeBlockHtmlFixture.querySelector('pre');
+
+  beforeEach(() => {
+    const { html } = loadMarkdownApiResult('code_block');
+
+    tiptapEditor = createTestEditor({ extensions: [CodeBlockHighlight] });
+    codeBlockHtmlFixture = html;
+    parsedCodeBlockHtmlFixture = parseHTML(codeBlockHtmlFixture);
+
+    tiptapEditor.commands.setContent(codeBlockHtmlFixture);
+  });
+
+  it('extracts language and params attributes from Markdown API output', () => {
+    const language = preElement().getAttribute('lang');
+
+    expect(tiptapEditor.getJSON().content[0].attrs).toMatchObject({
+      language,
+      params: language,
+    });
+  });
+
+  it('adds code, highlight, and js-syntax-highlight to code block element', () => {
+    const editorHtmlOutput = parseHTML(tiptapEditor.getHTML()).querySelector('pre');
+
+    expect(editorHtmlOutput.classList.toString()).toContain('code highlight js-syntax-highlight');
+  });
+});