Make auto-closing of HTML tags default but optional (#2101)

ftl/core/editing.ftl

@@ -62,6 +62,7 @@ editing-unordered-list = Unordered list
 editing-warning-cloze-deletions-will-not-work = Warning, cloze deletions will not work until you switch the type at the top to Cloze.
 editing-toggle-mathjax-rendering = Toggle MathJax Rendering
 editing-shrink-images = Shrink Images
+editing-close-html-tags = Auto-close HTML tags
 
 ## You don't need to translate these strings, as they will be replaced with different ones soon.
 

qt/aqt/editor.py

@@ -536,6 +536,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
             setTagsCollapsed({});
             setMathjaxEnabled({});
             setShrinkImages({});
+            setCloseHTMLTags({});
             """.format(
             json.dumps(data),
             json.dumps(collapsed),
@@ -549,6 +550,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
             json.dumps(self.mw.pm.tags_collapsed(self.editorMode)),
             json.dumps(self.mw.col.get_config("renderMathjax", True)),
             json.dumps(self.mw.col.get_config("shrinkEditorImages", True)),
+            json.dumps(self.mw.col.get_config("closeHTMLTags", True)),
         )
 
         if self.addMode:
@@ -1169,6 +1171,12 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
             not self.mw.col.get_config("shrinkEditorImages", True),
         )
 
+    def toggleCloseHTMLTags(self) -> None:
+        self.mw.col.set_config(
+            "closeHTMLTags",
+            not self.mw.col.get_config("closeHTMLTags", True),
+        )
+
     def collapseTags(self) -> None:
         aqt.mw.pm.set_tags_collapsed(self.editorMode, True)
 
@@ -1203,6 +1211,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
             mathjaxChemistry=Editor.insertMathjaxChemistry,
             toggleMathjax=Editor.toggleMathjax,
             toggleShrinkImages=Editor.toggleShrinkImages,
+            toggleCloseHTMLTags=Editor.toggleCloseHTMLTags,
             expandTags=Editor.expandTags,
             collapseTags=Editor.collapseTags,
         )

ts/editor/NoteEditor.svelte

@@ -68,6 +68,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import MathjaxElement from "./MathjaxElement.svelte";
     import Notification from "./Notification.svelte";
     import PlainTextInput from "./plain-text-input";
+    import { closeHTMLTags } from "./plain-text-input/PlainTextInput.svelte";
     import PlainTextBadge from "./PlainTextBadge.svelte";
     import RichTextInput, { editingInputIsRichText } from "./rich-text-input";
     import RichTextBadge from "./RichTextBadge.svelte";
@@ -278,6 +279,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         $shrinkImagesByDefault = shrinkByDefault;
     }
 
+    function setCloseHTMLTags(closeTags: boolean) {
+        $closeHTMLTags = closeTags;
+    }
+
     import { mathjaxConfig } from "../editable/mathjax-element";
     import { wrapInternal } from "../lib/wrap";
     import { refocusInput } from "./helpers";
@@ -313,6 +318,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             setMathjaxEnabled,
             setInsertSymbolsEnabled,
             setShrinkImages,
+            setCloseHTMLTags,
             ...oldEditorAdapter,
         });
 

ts/editor/code-mirror.ts

@@ -10,6 +10,7 @@ import "codemirror/addon/fold/foldcode";
 import "codemirror/addon/fold/foldgutter";
 import "codemirror/addon/fold/xml-fold";
 import "codemirror/addon/edit/matchtags";
+import "codemirror/addon/edit/closetag";
 import "codemirror/addon/display/placeholder";
 
 import CodeMirror from "codemirror";

ts/editor/editor-toolbar/OptionsButton.svelte

@@ -11,6 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { bridgeCommand } from "../../lib/bridgecommand";
     import * as tr from "../../lib/ftl";
     import { shrinkImagesByDefault } from "../image-overlay/ImageOverlay.svelte";
+    import { closeHTMLTags } from "../plain-text-input/PlainTextInput.svelte";
     import { cogIcon } from "./icons";
 
     let showFloating = false;
@@ -20,6 +21,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         bridgeCommand("toggleShrinkImages");
         showFloating = false;
     }
+
+    function toggleCloseHTMLTags(_evt: MouseEvent): void {
+        $closeHTMLTags = !$closeHTMLTags;
+        bridgeCommand("toggleCloseHTMLTags");
+        showFloating = false;
+    }
 </script>
 
 <WithFloating
@@ -43,5 +50,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <CheckBox value={$shrinkImagesByDefault} />
             <span class="d-flex-inline ps-3">{tr.editingShrinkImages()}</span>
         </DropdownItem>
+        <DropdownItem on:click={toggleCloseHTMLTags}>
+            <CheckBox value={$closeHTMLTags} />
+            <span class="d-flex-inline ps-3">{tr.editingCloseHtmlTags()}</span>
+        </DropdownItem>
     </Popover>
 </WithFloating>

ts/editor/plain-text-input/PlainTextInput.svelte

@@ -16,6 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     export const parsingInstructions: string[] = [];
+    export const closeHTMLTags = writable(true);
 
     const [lifecycle, instances, setupLifecycleHooks] =
         lifecycleHooks<PlainTextInputAPI>();
@@ -43,10 +44,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let hidden = false;
     export let richTextHidden: boolean;
 
-    const configuration = {
+    $: configuration = {
         mode: htmlanki,
         ...baseOptions,
         ...gutterOptions,
+        ...{ autoCloseTags: $closeHTMLTags },
     };
 
     const { focusedInput } = noteEditorContext.get();