Fix toggle code block button in Content Editor

When clicking the toggle code block button
in the content editor, the content editor
is inserting an invalid frontmatter
block instead of a highlighted code block

Changelog: fixed

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

@@ -14,9 +14,20 @@ export default CodeBlockHighlight.extend({
       },
     ];
   },
+  addCommands() {
+    return {
+      setFrontmatter: (attributes) => ({ commands }) => {
+        return commands.setNode(this.name, attributes);
+      },
+      toggleFrontmatter: (attributes) => ({ commands }) => {
+        return commands.toggleNode(this.name, 'paragraph', attributes);
+      },
+    };
+  },
   addNodeView() {
     return new VueNodeViewRenderer(FrontmatterWrapper);
   },
+
   addInputRules() {
     return [];
   },

spec/frontend/content_editor/extensions/frontmatter_spec.js

 import Frontmatter from '~/content_editor/extensions/frontmatter';
+import CodeBlockHighlight from '~/content_editor/extensions/code_block_highlight';
 import { createTestEditor, createDocBuilder, triggerNodeInputRule } from '../test_utils';
 
 describe('content_editor/extensions/frontmatter', () => {
   let tiptapEditor;
   let doc;
-  let p;
+  let frontmatter;
+  let codeBlock;
 
   beforeEach(() => {
-    tiptapEditor = createTestEditor({ extensions: [Frontmatter] });
+    tiptapEditor = createTestEditor({ extensions: [Frontmatter, CodeBlockHighlight] });
 
     ({
-      builders: { doc, p },
+      builders: { doc, codeBlock, frontmatter },
     } = createDocBuilder({
       tiptapEditor,
       names: {
         frontmatter: { nodeType: Frontmatter.name },
+        codeBlock: { nodeType: CodeBlockHighlight.name },
       },
     }));
   });
 
   it('does not insert a frontmatter block when executing code block input rule', () => {
-    const expectedDoc = doc(p(''));
+    const expectedDoc = doc(codeBlock(''));
     const inputRuleText = '``` ';
 
     triggerNodeInputRule({ tiptapEditor, inputRuleText });
 
     expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
   });
+
+  it.each`
+    command                | result                        | resultDesc
+    ${'toggleCodeBlock'}   | ${() => doc(codeBlock(''))}   | ${'code block element'}
+    ${'setCodeBlock'}      | ${() => doc(codeBlock(''))}   | ${'code block element'}
+    ${'setFrontmatter'}    | ${() => doc(frontmatter(''))} | ${'frontmatter element'}
+    ${'toggleFrontmatter'} | ${() => doc(frontmatter(''))} | ${'frontmatter element'}
+  `('executing $command should generate a document with a $resultDesc', ({ command, result }) => {
+    const expectedDoc = result();
+
+    tiptapEditor.commands[command]();
+
+    expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
+  });
 });