Fix legacy editable styles

ts/bundle_svelte.mjs

@@ -42,6 +42,16 @@ if (!sourcemap) {
     ];
 }
 
+const ignoreCssUrlPlugin = {
+    name: "ignore-css-url",
+    setup(build) {
+        // This works around esbuild unconditionally resolving CSS imports that uses Vite's `?url` syntax in the editor
+        build.onResolve({ filter: /.*?\.scss\?url$/ }, (args) => {
+            return { path: args.path, external: true };
+        });
+    },
+};
+
 build({
     bundle: true,
     entryPoints: [entrypoint],
@@ -51,6 +61,7 @@ build({
     loader: { ".svg": "text" },
     preserveSymlinks: true,
     sourcemap: sourcemap ? "inline" : false,
+
     plugins: [
         sassPlugin({ loadPaths: ["node_modules"] }),
         sveltePlugin({
@@ -59,6 +70,7 @@ build({
             // let us focus on errors; we can see the warnings with svelte-check
             filterWarnings: (_warning) => false,
         }),
+        ignoreCssUrlPlugin,
     ],
     target,
     // logLevel: "info",

ts/routes/editor/rich-text-input/RichTextStyles.svelte

@@ -7,9 +7,6 @@ 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 editableBaseCSS from "$lib/editable/editable-base.scss?url";
-    import contentEditableCSS from "$lib/editable/content-editable.scss?url";
-    import mathjaxCSS from "$lib/editable/mathjax.scss?url";
 
     import { mount } from "svelte";
 
@@ -49,6 +46,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: setStyling("fontSize", fontSize + "px");
     $: setStyling("direction", direction);
 
+
+    async function attachToShadow(element: Element) {
         let styles: StyleLinkType[];
         if (isLegacy) {
             styles = [
@@ -63,22 +62,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {
                     id: "editableBaseStyle",
                     type: "link",
-                href: editableBaseCSS,
+                    href: (await import("$lib/editable/editable-base.scss?url")).default,
                 },
                 {
                     id: "contentEditableStyle",
                     type: "link",
-                href: contentEditableCSS,
+                    href: (await import("$lib/editable/content-editable.scss?url")).default,
                 },
                 {
                     id: "mathjaxStyle",
                     type: "link",
-                href: mathjaxCSS,
+                    href: (await import("$lib/editable/mathjax.scss?url")).default,
                 },
             ];
         }
-
-    function attachToShadow(element: Element) {
         const customStyles = mount(CustomStyles, {
             target: element.shadowRoot!,
             props: { styles },