Revert "Revert "Revert "Preserve HTML formatting inside clozes (#3038)"""

This reverts commit 9c733848b8.

ftl/core-repo

@@ -1 +1 @@
-Subproject commit 056ff810563e7a7220aa723611abdf832ed7f437
+Subproject commit c74c15b7f82c0f184910e5b6f695b635e6d81faf

ftl/qt-repo

@@ -1 +1 @@
-Subproject commit 45155310c3302cbbbe645dec52ca196894422463
+Subproject commit 06ad12df7a2c8400cf64e9c7b986e9ee722e5b38

qt/aqt/editor.py

@@ -1246,7 +1246,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
             highest += 1
         # must start at 1
         highest = max(1, highest)
-        self.web.eval("wrapCloze(%d);" % highest)
+        self.web.eval("wrap('{{c%d::', '}}');" % highest)
 
     def setupForegroundButton(self) -> None:
         self.fcolour = self.mw.pm.profile.get("lastColour", "#00f")

ts/editor/ClozeButtons.svelte

@@ -56,16 +56,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     async function onIncrementCloze(): Promise<void> {
         const highestCloze = getCurrentHighestCloze(true);
 
-        dispatch("cloze", {
+        dispatch("surround", {
-            n: highestCloze,
+            prefix: `{{c${highestCloze}::`,
+            suffix: "}}",
         });
     }
 
     async function onSameCloze(): Promise<void> {
         const highestCloze = getCurrentHighestCloze(false);
 
-        dispatch("cloze", {
+        dispatch("surround", {
-            n: highestCloze,
+            prefix: `{{c${highestCloze}::`,
+            suffix: "}}",
         });
     }
 

ts/editor/NoteEditor.svelte

@@ -393,7 +393,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import { ImageOcclusionFieldIndexes } from "@generated/anki/image_occlusion_pb";
     import { getImageOcclusionFields } from "@generated/backend";
-    import { wrapClozeInternal, wrapInternal } from "@tslib/wrap";
+    import { wrapInternal } from "@tslib/wrap";
 
     import Shortcut from "$lib/components/Shortcut.svelte";
 
@@ -548,16 +548,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             });
         }
 
-        function wrapCloze(n: number): void {
-            if (!$focusedInput || !editingInputIsRichText($focusedInput)) {
-                return;
-            }
-
-            $focusedInput.element.then((element) => {
-                wrapClozeInternal(element, n);
-            });
-        }
-
         Object.assign(globalThis, {
             saveSession,
             setFields,
@@ -576,7 +566,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             setNoteId,
             setNotetypeMeta,
             wrap,
-            wrapCloze,
             setMathjaxEnabled,
             setShrinkImages,
             setCloseHTMLTags,

ts/editor/editor-toolbar/RichTextClozeButtons.svelte

@@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { wrapClozeInternal } from "@tslib/wrap";
+    import { wrapInternal } from "@tslib/wrap";
 
     import ClozeButtons from "../ClozeButtons.svelte";
     import { context as noteEditorContext } from "../NoteEditor.svelte";
@@ -13,11 +13,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     $: richTextAPI = $focusedInput as RichTextInputAPI;
 
-    async function onCloze({ detail }): Promise<void> {
+    async function onSurround({ detail }): Promise<void> {
         const richText = await richTextAPI.element;
-        const { n } = detail;
+        const { prefix, suffix } = detail;
-        wrapClozeInternal(richText, n);
+
+        wrapInternal(richText, prefix, suffix, false);
     }
 </script>
 
-<ClozeButtons on:cloze={onCloze} />
+<ClozeButtons on:surround={onSurround} />

ts/editor/mathjax-overlay/MathjaxButtons.svelte

@@ -40,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </IconButton>
     </ButtonGroup>
 
-    <ClozeButtons on:cloze alwaysEnabled={true} />
+    <ClozeButtons on:surround alwaysEnabled={true} />
 
     <ButtonGroup>
         <IconButton

ts/editor/mathjax-overlay/MathjaxOverlay.svelte

@@ -261,11 +261,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                     clear();
                                 }
                             }}
-                            on:cloze={async ({ detail }) => {
+                            on:surround={async ({ detail }) => {
                                 const editor = await mathjaxEditor.editor;
-                                const { n } = detail;
+                                const { prefix, suffix } = detail;
+
                                 editor.replaceSelection(
-                                    `{{c${n}::` + editor.getSelection() + "}}",
+                                    prefix + editor.getSelection() + suffix,
                                 );
                             }}
                         />

ts/lib/tslib/wrap.ts

@@ -1,7 +1,6 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { placeCaretAfter } from "../domlib/place-caret";
 import { getRange, getSelection } from "./cross-browser";
 
 function wrappedExceptForWhitespace(text: string, front: string, back: string): string {
@@ -54,36 +53,3 @@ export function wrapInternal(
         moveCursorInside(selection, back);
     }
 }
-
-export function wrapClozeInternal(base: Element, n: number): void {
-    const selection = getSelection(base)!;
-    const range = getRange(selection);
-    if (!range) {
-        return;
-    }
-
-    const fragment = range.extractContents();
-    if (fragment.childNodes.length === 0) {
-        document.execCommand("inserthtml", false, `{{c${n}::}}`);
-        moveCursorInside(selection, "}}");
-    } else {
-        const startNode = document.createTextNode(`{{c${n}::`);
-        const endNode = document.createTextNode("}}");
-        range.insertNode(endNode);
-        range.insertNode(fragment);
-        range.insertNode(startNode);
-        placeCaretAfter(endNode);
-        // Remove empty <li> elements added by extractContents()
-        const elementsToCheck = [
-            startNode.previousElementSibling,
-            startNode.nextElementSibling,
-            endNode.previousElementSibling,
-            endNode.nextElementSibling,
-        ];
-        for (const element of elementsToCheck) {
-            if (element?.tagName === "LI" && !element?.textContent?.trim()) {
-                element.remove();
-            }
-        }
-    }
-}