From e6675c35dc6135a54e119a5523a554f752d8783a Mon Sep 17 00:00:00 2001
From: William Allen <william.allen@kitware.com>
Date: Thu, 22 Jan 2026 14:57:14 -0500
Subject: [PATCH] Re-work CodeBox UI component

---
 .../js/vue/components/BuildNotesPage.vue      |  2 +-
 .../js/vue/components/shared/CodeBox.vue      | 52 ++-----------------
 tests/cypress/component/code-box.cy.js        |  9 ++--
 3 files changed, 10 insertions(+), 53 deletions(-)

diff --git a/resources/js/vue/components/BuildNotesPage.vue b/resources/js/vue/components/BuildNotesPage.vue
index c507b9d3a0..2b68b09743 100644
--- a/resources/js/vue/components/BuildNotesPage.vue
+++ b/resources/js/vue/components/BuildNotesPage.vue
@@ -49,7 +49,7 @@
               :id="note.node.id"
               :key="note.node.id"
               :ref="r => noteRefs.push(r)"
-              class="tw-border tw-border-base-300 tw-bg-base-100 tw-rounded-box tw-scroll-mt-28"
+              class="tw-border tw-border-base-300 tw-bg-base-100 tw-rounded-box tw-scroll-mt-28 tw-overflow-hidden"
               data-test="notes-content-item"
             >
               <h3 class="tw-p-4 tw-text-xl tw-font-bold tw-break-words">
diff --git a/resources/js/vue/components/shared/CodeBox.vue b/resources/js/vue/components/shared/CodeBox.vue
index e8efcc132c..d64168c1cb 100644
--- a/resources/js/vue/components/shared/CodeBox.vue
+++ b/resources/js/vue/components/shared/CodeBox.vue
@@ -1,15 +1,13 @@
 <template>
   <div
-    ref="editor"
-    class="code-box"
-    :class="{ 'tw-border': bordered }"
-  />
+    class="tw-font-mono tw-bg-gray-100 tw-p-2 tw-whitespace-pre-wrap tw-break-all tw-overflow-hidden"
+    :class="{ 'tw-border': bordered, 'tw-rounded': bordered }"
+  >
+    {{ text }}
+  </div>
 </template>
 
 <script>
-import { EditorView, lineNumbers, drawSelection } from '@codemirror/view';
-import { EditorState } from '@codemirror/state';
-
 export default {
   name: 'CodeBox',
   props: {
@@ -23,45 +21,5 @@ export default {
       default: true,
     },
   },
-  data() {
-    return {
-      editor: null,
-    };
-  },
-  watch: {
-    text(newText) {
-      if (this.editor) {
-        this.editor.dispatch({
-          changes: { from: 0, to: this.editor.state.doc.length, insert: newText },
-        });
-      }
-    },
-  },
-  mounted() {
-    const state = EditorState.create({
-      doc: this.text,
-      extensions: [
-        lineNumbers(),
-        drawSelection(),
-        EditorState.readOnly.of(true),
-        EditorView.theme({
-          '.cm-scroller': {
-            overflow: 'auto',
-          },
-        }),
-        EditorView.lineWrapping,
-      ],
-    });
-
-    this.editor = new EditorView({
-      state,
-      parent: this.$refs.editor,
-    });
-  },
-  beforeUnmount() {
-    if (this.editor) {
-      this.editor.destroy();
-    }
-  },
 };
 </script>
diff --git a/tests/cypress/component/code-box.cy.js b/tests/cypress/component/code-box.cy.js
index 9aa9a568d0..615f381c85 100644
--- a/tests/cypress/component/code-box.cy.js
+++ b/tests/cypress/component/code-box.cy.js
@@ -10,8 +10,7 @@ describe('CodeBox', () => {
       },
     });
 
-    cy.get('.cm-editor').should('be.visible');
-    cy.get('.cm-content').should('contain.text', 'Hello, World!');
+    cy.contains('Hello, World!').should('exist');
   });
 
   it('updates the content when the text prop changes', () => {
@@ -23,11 +22,11 @@ describe('CodeBox', () => {
         text: initialCode,
       },
     }).then(({ wrapper }) => {
-      cy.get('.cm-content').should('contain.text', 'const a = 1;');
+      cy.contains('const a = 1;').should('exist');
       wrapper.setProps({ text: updatedCode });
       // Wait for the DOM to update before asserting the new content.
-      cy.get('.cm-content').should('not.contain.text', 'const a = 1;').then(() => {
-        cy.get('.cm-content').should('contain.text', 'const b = 2;');
+      cy.contains('const a = 1;').should('not.exist').then(() => {
+        cy.contains('const b = 2;').should('exist');
       });
     });
   });