From 797f6a02c5ec11db6efc658a80f179979d738925 Mon Sep 17 00:00:00 2001
From: Abdo <abdo@abdnh.net>
Date: Wed, 14 Aug 2024 17:26:17 +0300
Subject: [PATCH] Fix editor loading

---
 ts/editor/base.ts                             | 19 ++++---------------
 .../rich-text-input/RichTextInput.svelte      |  4 ++--
 .../rich-text-input/RichTextStyles.svelte     |  4 ++--
 3 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/ts/editor/base.ts b/ts/editor/base.ts
index 7baf3f724..5123ff6a6 100644
--- a/ts/editor/base.ts
+++ b/ts/editor/base.ts
@@ -33,6 +33,7 @@ declare global {
 }
 
 import { ModuleName } from "@tslib/i18n";
+import { mount } from "svelte";
 
 export const editorModules = [
     ModuleName.EDITING,
@@ -56,29 +57,17 @@ export { editorToolbar } from "./editor-toolbar";
 
 async function setupBrowserEditor(): Promise<void> {
     await setupI18n({ modules: editorModules });
-
-    new BrowserEditor({
-        target: document.body,
-        props: { uiResolve },
-    });
+    mount(BrowserEditor, {target: document.body, props: { uiResolve }});
 }
 
 async function setupNoteCreator(): Promise<void> {
     await setupI18n({ modules: editorModules });
-
-    new NoteCreator({
-        target: document.body,
-        props: { uiResolve },
-    });
+    mount(NoteCreator, {target: document.body, props: { uiResolve }});
 }
 
 async function setupReviewerEditor(): Promise<void> {
     await setupI18n({ modules: editorModules });
-
-    new ReviewerEditor({
-        target: document.body,
-        props: { uiResolve },
-    });
+    mount(ReviewerEditor, {target: document.body, props: { uiResolve }});
 }
 
 export function setupEditor(mode: "add" | "browse" | "review") {
diff --git a/ts/editor/rich-text-input/RichTextInput.svelte b/ts/editor/rich-text-input/RichTextInput.svelte
index 7e4fa5b64..dc75e1573 100644
--- a/ts/editor/rich-text-input/RichTextInput.svelte
+++ b/ts/editor/rich-text-input/RichTextInput.svelte
@@ -66,7 +66,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { directionKey, fontFamilyKey, fontSizeKey } from "@tslib/context-keys";
     import { promiseWithResolver } from "@tslib/promise";
     import { singleCallback } from "@tslib/typing";
-    import { getAllContexts, getContext, onMount, tick } from "svelte";
+    import { getAllContexts, getContext, mount, onMount, tick } from "svelte";
     import type { Readable } from "svelte/store";
 
     import { placeCaretAfterContent } from "$lib/domlib/place-caret";
@@ -164,7 +164,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         (async () => {
             await stylesDidLoad;
 
-            new ContentEditable({
+            mount(ContentEditable, {
                 target: element.shadowRoot!,
                 props: {
                     nodes,
diff --git a/ts/editor/rich-text-input/RichTextStyles.svelte b/ts/editor/rich-text-input/RichTextStyles.svelte
index 0f1990842..1f79380a7 100644
--- a/ts/editor/rich-text-input/RichTextStyles.svelte
+++ b/ts/editor/rich-text-input/RichTextStyles.svelte
@@ -7,6 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import type { StyleLinkType, StyleObject } from "./CustomStyles.svelte";
     import CustomStyles from "./CustomStyles.svelte";
+    import { mount } from "svelte";
 
     export let callback: (styles: CustomStyles) => void;
 
@@ -51,11 +52,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     ];
 
     function attachToShadow(element: Element) {
-        const customStyles = new CustomStyles({
+        const customStyles = mount(CustomStyles, {
             target: element.shadowRoot as any,
             props: { styles },
         });
-
         customStyles.addStyleTag("userBase").then((styleTag) => {
             userBaseResolve(styleTag);
             callback(customStyles);