Speed up editor by lazily loading CodeMirror (#1766)

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,
@@ -79,6 +80,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         use:openCodeMirror={{
             configuration: { ...configuration, ...defaultConfiguration },
             resolve,
+            hidden,
         }}
     />
 </div>

ts/editor/code-mirror.ts

@@ -63,24 +63,37 @@ 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;
-    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();
         },

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">