Speed up editor by lazily loading CodeMirror - Second try (#1776)

* Revert "Revert "Speed up editor by lazily loading CodeMirror (#1766)""

This reverts commit b0a2884f19.

* Pass in options via action update + Make access to editor optional

ts/editor/CodeMirror.svelte

@@ -30,6 +30,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let configuration: CodeMirrorLib.EditorConfiguration;
     export let code: Writable<string>;
+    export let hidden = false;
 
     const defaultConfiguration = {
         rtlMoveVisually: true,
@@ -50,9 +51,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const direction = getContext<Writable<"ltr" | "rtl">>(directionKey);
 
-    $: setOption("direction", $direction);
-    $: setOption("theme", $pageTheme.isDark ? darkTheme : lightTheme);
-
     let apiPartial: Partial<CodeMirrorAPI>;
     export { apiPartial as api };
 
@@ -77,8 +75,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         tabindex="-1"
         hidden
         use:openCodeMirror={{
-            configuration: { ...configuration, ...defaultConfiguration },
+            configuration: {
+                ...configuration,
+                ...defaultConfiguration,
+                direction: $direction,
+                theme: $pageTheme.isDark ? darkTheme : lightTheme,
+            },
             resolve,
+            hidden,
         }}
     />
 </div>

ts/editor/code-mirror.ts

@@ -63,26 +63,40 @@ export function focusAndSetCaret(
 interface OpenCodeMirrorOptions {
     configuration: CodeMirror.EditorConfiguration;
     resolve(editor: CodeMirror.EditorFromTextArea): void;
+    hidden: boolean;
 }
 
 export function openCodeMirror(
     textarea: HTMLTextAreaElement,
-    { configuration, resolve }: Partial<OpenCodeMirrorOptions>,
+    options: Partial<OpenCodeMirrorOptions>,
 ): { update: (options: Partial<OpenCodeMirrorOptions>) => void; destroy: () => void } {
-    const editor = CodeMirror.fromTextArea(textarea, configuration);
+    let editor: CodeMirror.EditorFromTextArea | null = null;
-    resolve?.(editor);
 
-    return {
+    function update({
-        update({ configuration }: Partial<OpenCodeMirrorOptions>): void {
+        configuration,
+        resolve,
+        hidden,
+    }: Partial<OpenCodeMirrorOptions>): void {
+        if (editor) {
             for (const key in configuration) {
                 editor.setOption(
                     key as keyof CodeMirror.EditorConfiguration,
                     configuration[key],
                 );
             }
-        },
+        } else if (!hidden) {
+            editor = CodeMirror.fromTextArea(textarea, configuration);
+            resolve?.(editor);
+        }
+    }
+
+    update(options);
+
+    return {
+        update,
         destroy(): void {
-            editor.toTextArea();
+            editor?.toTextArea();
+            editor = null;
         },
     };
 }

ts/editor/plain-text-input/PlainTextInput.svelte

@@ -136,7 +136,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:hidden
     on:focusin={() => ($focusedInput = api)}
 >
-    <CodeMirror {configuration} {code} bind:api={codeMirror} on:change={onChange} />
+    <CodeMirror
+        {configuration}
+        {code}
+        {hidden}
+        bind:api={codeMirror}
+        on:change={onChange}
+    />
 </div>
 
 <style lang="scss">