chore(react/type_widget): add back keyboard shortcut for editable code

apps/client/src/widgets/NoteDetail.tsx

@@ -16,8 +16,6 @@ import "./NoteDetail.css";
 import File from "./type_widgets/File";
 import Image from "./type_widgets/Image";
 import { ReadOnlyCode, EditableCode } from "./type_widgets/code/Code";
-import SpacedUpdate from "../services/spaced_update";
-import server from "../services/server";
 
 /**
  * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
@@ -30,14 +28,15 @@ type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code"> | "empty
  */
 export default function NoteDetail() {
     const { note, type, noteContext } = useNoteInfo();
-    const { ntxId, viewScope } = noteContext ?? {};
+    const { ntxId, viewScope, parent } = noteContext ?? {};
     const [ correspondingWidget, setCorrespondingWidget ] = useState<VNode>();
     const isFullHeight = checkFullHeight(noteContext, type);
 
     const props: TypeWidgetProps = {
         note: note!,
         viewScope,
-        ntxId
+        ntxId,
+        parentComponent: parent
     };
     useEffect(() => setCorrespondingWidget(getCorrespondingWidget(type, props)), [ note, viewScope, type ]);
 

apps/client/src/widgets/type_widgets/code/Code.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { default as VanillaCodeMirror } from "@triliumnext/codemirror";
 import { TypeWidgetProps } from "../type_widget";
 import "./code.css";
@@ -8,6 +8,8 @@ import { useEditorSpacedUpdate, useNoteBlob, useTriliumOptionBool } from "../../
 import { t } from "../../../services/i18n";
 import appContext from "../../../components/app_context";
 import TouchBar, { TouchBarButton } from "../../react/TouchBar";
+import keyboard_actions from "../../../services/keyboard_actions";
+import { refToJQuerySelector } from "../../react/react_utils";
 
 export function ReadOnlyCode({ note, viewScope, ntxId }: TypeWidgetProps) {
     const [ content, setContent ] = useState("");
@@ -32,11 +34,12 @@ export function ReadOnlyCode({ note, viewScope, ntxId }: TypeWidgetProps) {
     )
 }
 
-export function EditableCode({ note, ntxId, debounceUpdate }: TypeWidgetProps & {
+export function EditableCode({ note, ntxId, debounceUpdate, parentComponent }: TypeWidgetProps & {
     // if true, the update will be debounced to prevent excessive updates. Especially useful if the editor is linked to a live preview.
     debounceUpdate?: boolean;
 }) {
     const editorRef = useRef<VanillaCodeMirror>(null);
+    const containerRef = useRef<HTMLPreElement>(null);
     const [ vimKeymapEnabled ] = useTriliumOptionBool("vimKeymapEnabled");
     const spacedUpdate = useEditorSpacedUpdate({
         note,
@@ -50,10 +53,15 @@ export function EditableCode({ note, ntxId, debounceUpdate }: TypeWidgetProps &
         }
     });
 
+    useEffect(() => {
+        if (!parentComponent) return;
+        keyboard_actions.setupActionsForElement("code-detail", refToJQuerySelector(containerRef), parentComponent);
+    }, []);
+
     return (
         <div className="note-detail-code note-detail-printable">
             <CodeMirror
-                editorRef={editorRef}
+                editorRef={editorRef} containerRef={containerRef}
                 className="note-detail-code-editor"
                 ntxId={ntxId}
                 placeholder={t("editable_code.placeholder")}

apps/client/src/widgets/type_widgets/code/CodeMirror.tsx

@@ -10,10 +10,11 @@ interface CodeMirrorProps extends Omit<EditorConfig, "parent"> {
     className?: string;
     ntxId: string | null | undefined;
     editorRef?: RefObject<VanillaCodeMirror>;
+    containerRef?: RefObject<HTMLPreElement>;
 }
 
-export default function CodeMirror({ className, content, mime, ntxId, editorRef: externalEditorRef, ...extraOpts }: CodeMirrorProps) {
+export default function CodeMirror({ className, content, mime, ntxId, editorRef: externalEditorRef, containerRef: externalContainerRef, ...extraOpts }: CodeMirrorProps) {
-    const parentRef = useRef<HTMLPreElement>(null);
+    const parentRef = useSyncedRef(externalContainerRef);
     const codeEditorRef = useRef<VanillaCodeMirror>();
     const [ codeLineWrapEnabled ] = useTriliumOptionBool("codeLineWrapEnabled");
     const initialized = $.Deferred();

apps/client/src/widgets/type_widgets/type_widget.ts

@@ -1,9 +1,10 @@
 import FNote from "../../entities/fnote";
 import { ViewScope } from "../../services/link";
-import SpacedUpdate from "../../services/spaced_update";
+import { TypedComponent } from "../../components/component";
 
 export interface TypeWidgetProps {
     note: FNote;
     viewScope: ViewScope | undefined;
     ntxId: string | null | undefined;
+    parentComponent: TypedComponent<any> | undefined;
 }

apps/client/src/widgets/type_widgets_old/editable_code.ts

@@ -1,32 +0,0 @@
-import type { CommandListenerData, EventData } from "../../components/app_context.js";
-import type FNote from "../../entities/fnote.js";
-import { t } from "../../services/i18n.js";
-import keyboardActionService from "../../services/keyboard_actions.js";
-import options from "../../services/options.js";
-import AbstractCodeTypeWidget from "./abstract_code_type_widget.js";
-import appContext from "../../components/app_context.js";
-import type { TouchBarItem } from "../../components/touch_bar.js";
-import { hasTouchBar } from "../../services/utils.js";
-import type { EditorConfig } from "@triliumnext/codemirror";
-
-const TPL = /*html*/`
-`;
-
-export default class EditableCodeTypeWidget extends AbstractCodeTypeWidget {
-
-
-    static getType() {
-        return "editableCode";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-        this.$editor = this.$widget.find(".note-detail-code-editor");
-
-        keyboardActionService.setupActionsForElement("code-detail", this.$widget, this);
-
-        super.doRender();
-    }
-
-}