Fix anki-editable styles not applying

build/configure/src/aqt.rs

@@ -148,8 +148,7 @@ fn build_css(build: &mut Build) -> Result<()> {
             },
         )?;
     }
-    let other_ts_css =
+    let other_ts_css = build.inputs_with_suffix(inputs![":ts:reviewer:reviewer.css"], ".css");
-        build.inputs_with_suffix(inputs![":ts:editable", ":ts:reviewer:reviewer.css"], ".css");
     build.add_action(
         "qt:aqt:data:web:css",
         CopyFiles {

build/configure/src/web.rs

@@ -202,19 +202,6 @@ fn build_and_check_pages(build: &mut Build) -> Result<()> {
 
         Ok(())
     };
-    // we use the generated .css file separately
-    build_page(
-        "editable",
-        false,
-        inputs![
-            ":ts:lib",
-            ":ts:components",
-            ":ts:domlib",
-            ":ts:sveltelib",
-            ":sass",
-            ":sveltekit",
-        ],
-    )?;
     build_page(
         "congrats",
         true,

ts/lib/editable/ContentEditable.svelte

@@ -57,21 +57,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 ></anki-editable>
 
 <style lang="scss">
-    anki-editable {
+    @import "./content-editable.scss";
-        display: block;
-        position: relative;
-
-        overflow: auto;
-        overflow-wrap: anywhere;
-        /* fallback for iOS */
-        word-break: break-word;
-
-        &:focus {
-            outline: none;
-        }
-
-        min-height: 1.5em;
-    }
-
-    /* editable-base.scss contains styling targeting user HTML */
 </style>

ts/lib/editable/Mathjax.svelte

@@ -127,24 +127,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 />
 
 <style lang="scss">
-    :global(anki-mathjax) {
+    @import "./mathjax.scss";
-        white-space: pre;
-    }
-
-    img {
-        vertical-align: var(--vertical-center);
-    }
-
-    .block {
-        display: block;
-        margin: 1rem auto;
-        transform: scale(1.1);
-    }
-
-    .empty {
-        vertical-align: text-bottom;
-
-        width: var(--font-size);
-        height: var(--font-size);
-    }
 </style>

ts/lib/editable/content-editable.scss

@@ -0,0 +1,15 @@
+anki-editable {
+    display: block;
+    position: relative;
+
+    overflow: auto;
+    overflow-wrap: anywhere;
+    /* fallback for iOS */
+    word-break: break-word;
+
+    &:focus {
+        outline: none;
+    }
+
+    min-height: 1.5em;
+}

ts/lib/editable/index.ts

@@ -2,6 +2,5 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 import "./editable-base.scss";
-/* only imported for the CSS */
+import "./content-editable.scss";
-import "./ContentEditable.svelte";
+import "./mathjax.scss";
-import "./Mathjax.svelte";

ts/lib/editable/mathjax.scss

@@ -0,0 +1,20 @@
+:global(anki-mathjax) {
+    white-space: pre;
+}
+
+img {
+    vertical-align: var(--vertical-center);
+}
+
+.block {
+    display: block;
+    margin: 1rem auto;
+    transform: scale(1.1);
+}
+
+.empty {
+    vertical-align: text-bottom;
+
+    width: var(--font-size);
+    height: var(--font-size);
+}

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

@@ -7,6 +7,10 @@ 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";
 
     export let callback: (styles: Record<string, any>) => void;
@@ -45,9 +49,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const styles: StyleLinkType[] = [
         {
-            id: "rootStyle",
+            id: "editableBaseStyle",
             type: "link",
-            href: "./_anki/css/editable.css",
+            href: editableBaseCSS,
+        },
+        {
+            id: "contentEditableStyle",
+            type: "link",
+            href: contentEditableCSS,
+        },
+        {
+            id: "mathjaxStyle",
+            type: "link",
+            href: mathjaxCSS,
         },
     ];