diff --git a/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx b/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx
index cf2d88b0f..7a22d58f7 100644
--- a/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx
+++ b/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx
@@ -1,18 +1,35 @@
 import { useEffect, useRef } from "preact/hooks";
 import { EditorConfig, default as VanillaCodeMirror } from "@triliumnext/codemirror";
-import { useTriliumOptionBool } from "../../react/hooks";
+import { useTriliumEvent, useTriliumOptionBool } from "../../react/hooks";
+import { refToJQuerySelector } from "../../react/react_utils";
 
 interface CodeMirrorProps extends Omit<EditorConfig, "parent"> {
     content: string;
     mime: string;
     className?: string;
+    ntxId: string | null | undefined;
 }
 
-export default function CodeMirror({ className, content, mime, ...extraOpts }: CodeMirrorProps) {
+export default function CodeMirror({ className, content, mime, ntxId, ...extraOpts }: CodeMirrorProps) {
     const parentRef = useRef<HTMLPreElement>(null);
     const codeEditorRef = useRef<VanillaCodeMirror>(null);
     const [ codeLineWrapEnabled ] = useTriliumOptionBool("codeLineWrapEnabled");
+    const initialized = $.Deferred();
 
+    // Integration within Trilium's event system.
+    useTriliumEvent("executeWithCodeEditor", async ({ resolve, ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        await initialized.promise();
+        resolve(codeEditorRef.current!);
+    });
+
+    useTriliumEvent("executeWithContentElement", async ({ resolve, ntxId: eventNtxId}) => {
+        if (eventNtxId !== ntxId) return;
+        await initialized.promise();
+        resolve(refToJQuerySelector(parentRef));
+    });
+
+    // Create CodeMirror instance.
     useEffect(() => {
         if (!parentRef.current) return;
 
@@ -22,10 +39,12 @@ export default function CodeMirror({ className, content, mime, ...extraOpts }: C
             ...extraOpts
         });
         codeEditorRef.current = codeEditor;
+        initialized.resolve();
 
         return () => codeEditor.destroy();
     }, []);
 
+    // React to text changes.
     useEffect(() => {
         const codeEditor = codeEditorRef.current;
         codeEditor?.setText(content ?? "");
diff --git a/apps/client/src/widgets/type_widgets/code/ReadOnlyCode.tsx b/apps/client/src/widgets/type_widgets/code/ReadOnlyCode.tsx
index be9fc1ba0..bdbb71ad5 100644
--- a/apps/client/src/widgets/type_widgets/code/ReadOnlyCode.tsx
+++ b/apps/client/src/widgets/type_widgets/code/ReadOnlyCode.tsx
@@ -5,7 +5,7 @@ import CodeMirror from "./CodeMirror";
 import utils from "../../../services/utils";
 import { useNoteBlob } from "../../react/hooks";
 
-export default function ReadOnlyCode({ note, viewScope }: TypeWidgetProps) {
+export default function ReadOnlyCode({ note, viewScope, ntxId }: TypeWidgetProps) {
     const [ content, setContent ] = useState("");
     const blob = useNoteBlob(note);
 
@@ -22,6 +22,7 @@ export default function ReadOnlyCode({ note, viewScope }: TypeWidgetProps) {
                 content={content}
                 mime={note.mime}
                 readOnly
+                ntxId={ntxId}
             />
         </div>
     )
diff --git a/apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts b/apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts
index b2fd8c8b6..055e7f450 100644
--- a/apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts
+++ b/apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts
@@ -82,16 +82,6 @@ export default class AbstractCodeTypeWidget extends TypeWidget {
         this.updateBackgroundColor("unset");
     }
 
-    async executeWithCodeEditorEvent({ resolve, ntxId }: EventData<"executeWithCodeEditor">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        await this.initialized;
-
-        resolve(this.codeEditor);
-    }
-
     async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         if (loadResults.isOptionReloaded("codeNoteTheme")) {
             const themeId = options.get("codeNoteTheme");
diff --git a/apps/client/src/widgets/type_widgets_old/read_only_code.ts b/apps/client/src/widgets/type_widgets_old/read_only_code.ts
deleted file mode 100644
index 6c9aca73a..000000000
--- a/apps/client/src/widgets/type_widgets_old/read_only_code.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { EventData } from "../../components/app_context.js";
-import type FNote from "../../entities/fnote.js";
-import AbstractCodeTypeWidget from "./abstract_code_type_widget.js";
-import utils from "../../services/utils.js";
-
-const TPL = /*html*/`
-`;
-
-export default class ReadOnlyCodeTypeWidget extends AbstractCodeTypeWidget {
-
-    async doRefresh(note: FNote) {
-        const blob = await this.note?.getBlob();
-        if (!blob) return;
-
-        this._update(note, content);
-        this.show();
-    }
-
-    async executeWithContentElementEvent({ resolve, ntxId }: EventData<"executeWithContentElement">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        await this.initialized;
-
-        resolve(this.$editor);
-    }
-}