Fix infinite loop in Content Editor codeblocks

The copy_code feature creates an infinite loop
in the content editor because ProseMirror causes
MutationObservers to trigger infinitely

Changelog: fixed

app/assets/javascripts/behaviors/copy_code.js

@@ -29,7 +29,7 @@ class CopyCodeButton extends HTMLElement {
 }
 
 function addCodeButton() {
-  [...document.querySelectorAll('pre.code.js-syntax-highlight')]
+  [...document.querySelectorAll('pre.code.js-syntax-highlight:not(.content-editor-code-block)')]
     .filter((el) => el.attr('lang') !== 'mermaid')
     .filter((el) => !el.closest('.js-markdown-code'))
     .forEach((el) => {

app/assets/javascripts/content_editor/components/wrappers/frontmatter.vue

@@ -20,7 +20,7 @@ export default {
 };
 </script>
 <template>
-  <node-view-wrapper class="gl-relative code highlight" as="pre">
+  <node-view-wrapper class="content-editor-code-block gl-relative code highlight" as="pre">
     <span
       data-testid="frontmatter-label"
       class="gl-absolute gl-top-0 gl-right-3"

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

@@ -19,7 +19,14 @@ export default CodeBlockLowlight.extend({
     };
   },
   renderHTML({ HTMLAttributes }) {
-    return ['div', ['pre', HTMLAttributes, ['code', {}, 0]]];
+    return [
+      'pre',
+      {
+        ...HTMLAttributes,
+        class: `content-editor-code-block ${HTMLAttributes.class}`,
+      },
+      ['code', {}, 0],
+    ];
   },
 }).configure({
   lowlight,

spec/frontend/content_editor/components/wrappers/frontmatter_spec.js

@@ -26,6 +26,11 @@ describe('content/components/wrappers/frontmatter', () => {
     expect(wrapper.findComponent(NodeViewWrapper).classes()).toContain('gl-relative');
   });
 
+  it('adds content-editor-code-block class to the pre element', () => {
+    createWrapper();
+    expect(wrapper.findComponent(NodeViewWrapper).classes()).toContain('content-editor-code-block');
+  });
+
   it('renders a node-view-content as a code element', () => {
     createWrapper();
 

spec/frontend/content_editor/extensions/code_block_highlight_spec.js

@@ -36,4 +36,10 @@ describe('content_editor/extensions/code_block_highlight', () => {
 
     expect(editorHtmlOutput.classList.toString()).toContain('code highlight js-syntax-highlight');
   });
+
+  it('adds content-editor-code-block class to the pre element', () => {
+    const editorHtmlOutput = parseHTML(tiptapEditor.getHTML()).querySelector('pre');
+
+    expect(editorHtmlOutput.classList.toString()).toContain('content-editor-code-block');
+  });
 });