Add extra button group for cloze commands (#1756)

* First attempt at adding a directory for icons under //ts

* Fix image import

* Fix import order

* Add cloze button group

* Fix issue with toolbar.toolbar dynamically slottable

* Change tooltip for repeating cloze deletion

* Fix repeat cloze button not working on macOS (dae)

ftl/core/editing.ftl

@@ -9,6 +9,7 @@ editing-cards = Cards
 editing-center = Center
 editing-change-color = Change color
 editing-cloze-deletion = Cloze deletion
+editing-cloze-deletion-repeat = Repeat cloze deletion
 editing-couldnt-record-audio-have-you-installed = Couldn't record audio. Have you installed 'lame'?
 editing-customize-card-templates = Customize Card Templates
 editing-customize-fields = Customize Fields

qt/aqt/editor.py

@@ -1387,7 +1387,7 @@ def set_cloze_button(editor: Editor) -> None:
     action = "show" if editor.note.note_type()["type"] == MODEL_CLOZE else "hide"
     editor.web.eval(
         'require("anki/ui").loaded.then(() =>'
-        f'require("anki/NoteEditor").instances[0].toolbar.templateButtons.{action}("cloze")'
+        f'require("anki/NoteEditor").instances[0].toolbar.toolbar.{action}("cloze")'
         "); "
     )
 

ts/BUILD.bazel

@@ -35,3 +35,11 @@ alias(
     name = "node",
     actual = "@nodejs//:node",
 )
+
+filegroup(
+    name = "ts",
+    srcs = [
+        "//ts/icons",
+    ],
+    visibility = ["//ts:__subpackages__"],
+)

ts/editor/BUILD.bazel

@@ -47,6 +47,7 @@ _esbuild_deps = [
     "//sass:button_mixins_lib",
     "@npm//@mdi",
     "@npm//bootstrap-icons",
+    "//ts/icons",
     "@npm//protobufjs",
 ]
 

ts/editor/editor-toolbar/BlockButtons.svelte

@@ -12,7 +12,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     } from "../../components/ButtonGroupItem.svelte";
     import DynamicallySlottable from "../../components/DynamicallySlottable.svelte";
     import IconButton from "../../components/IconButton.svelte";
-    import Item from "../../components/Item.svelte";
     import Shortcut from "../../components/Shortcut.svelte";
     import WithDropdown from "../../components/WithDropdown.svelte";
     import { getListItem } from "../../lib/dom";
@@ -92,7 +91,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </IconButton>
 
                 <ButtonDropdown>
-                    <Item id="justify">
                     <ButtonGroup>
                         <CommandIconButton
                             key="justifyLeft"
@@ -121,9 +119,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             >{@html justifyFullIcon}</CommandIconButton
                         >
                     </ButtonGroup>
-                    </Item>
 
-                    <Item id="indentation">
                     <ButtonGroup>
                         <IconButton
                             tooltip="{tr.editingOutdent()} ({getPlatformString(
@@ -158,7 +154,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             on:action={indentListItem}
                         />
                     </ButtonGroup>
-                    </Item>
                 </ButtonDropdown>
             </WithDropdown>
         </ButtonGroupItem>

ts/editor/editor-toolbar/ClozeButtons.svelte

@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { get } from "svelte/store";
 
+    import ButtonGroup from "../../components/ButtonGroup.svelte";
     import IconButton from "../../components/IconButton.svelte";
     import Shortcut from "../../components/Shortcut.svelte";
     import * as tr from "../../lib/ftl";
@@ -14,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { context as noteEditorContext } from "../NoteEditor.svelte";
     import type { RichTextInputAPI } from "../rich-text-input";
     import { editingInputIsRichText } from "../rich-text-input";
-    import { ellipseIcon } from "./icons";
+    import { clozeIcon, incrementClozeIcon } from "./icons";
 
     const { focusedInput, fields } = noteEditorContext.get();
 
@@ -49,27 +50,54 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     $: richTextAPI = $focusedInput as RichTextInputAPI;
 
-    async function onCloze(event: KeyboardEvent | MouseEvent): Promise<void> {
+    async function onIncrementCloze(): Promise<void> {
-        const highestCloze = getCurrentHighestCloze(!event.getModifierState("Alt"));
         const richText = await richTextAPI.element;
+
+        const highestCloze = getCurrentHighestCloze(true);
+        wrapInternal(richText, `{{c${highestCloze}::`, "}}", false);
+    }
+
+    async function onSameCloze(): Promise<void> {
+        const richText = await richTextAPI.element;
+
+        const highestCloze = getCurrentHighestCloze(false);
         wrapInternal(richText, `{{c${highestCloze}::`, "}}", false);
     }
 
     $: disabled = !editingInputIsRichText($focusedInput);
 
-    const keyCombination = "Control+Alt?+Shift+C";
+    const incrementKeyCombination = "Control+Shift+C";
+    const sameKeyCombination = "Control+Alt+Shift+C";
 </script>
 
-<IconButton
+<ButtonGroup>
-    tooltip="{tr.editingClozeDeletion()} {getPlatformString(keyCombination)}"
+    <IconButton
+        tooltip="{tr.editingClozeDeletion()} {getPlatformString(
+            incrementKeyCombination,
+        )}"
         {disabled}
-    on:click={onCloze}
+        on:click={onIncrementCloze}
->
+        --border-left-radius="5px"
-    {@html ellipseIcon}
+    >
-</IconButton>
+        {@html incrementClozeIcon}
+    </IconButton>
 
-<Shortcut
+    <Shortcut
-    {keyCombination}
+        keyCombination={incrementKeyCombination}
         {event}
-    on:action={(event) => onCloze(event.detail.originalEvent)}
+        on:action={onIncrementCloze}
-/>
+    />
+
+    <IconButton
+        tooltip="{tr.editingClozeDeletionRepeat()} {getPlatformString(
+            sameKeyCombination,
+        )}"
+        {disabled}
+        on:click={onSameCloze}
+        --border-right-radius="5px"
+    >
+        {@html clozeIcon}
+    </IconButton>
+
+    <Shortcut keyCombination={sameKeyCombination} {event} on:action={onSameCloze} />
+</ButtonGroup>

ts/editor/editor-toolbar/EditorToolbar.svelte

@@ -56,6 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Item from "../../components/Item.svelte";
     import StickyContainer from "../../components/StickyContainer.svelte";
     import BlockButtons from "./BlockButtons.svelte";
+    import ClozeButtons from "./ClozeButtons.svelte";
     import InlineButtons from "./InlineButtons.svelte";
     import NotetypeButtons from "./NotetypeButtons.svelte";
     import TemplateButtons from "./TemplateButtons.svelte";
@@ -105,6 +106,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <Item id="template">
                 <TemplateButtons api={templateButtons} />
             </Item>
+
+            <Item id="cloze">
+                <ClozeButtons />
+            </Item>
         </DynamicallySlottable>
     </ButtonToolbar>
 </StickyContainer>

ts/editor/editor-toolbar/TemplateButtons.svelte

@@ -20,7 +20,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { context } from "../NoteEditor.svelte";
     import { setFormat } from "../old-editor-adapter";
     import { editingInputIsRichText } from "../rich-text-input";
-    import ClozeButton from "./ClozeButton.svelte";
     import { micIcon, paperclipIcon } from "./icons";
     import LatexButton from "./LatexButton.svelte";
 
@@ -116,10 +115,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             />
         </ButtonGroupItem>
 
-        <ButtonGroupItem id="cloze">
-            <ClozeButton />
-        </ButtonGroupItem>
-
         <ButtonGroupItem>
             <LatexButton />
         </ButtonGroupItem>

ts/editor/editor-toolbar/icons.ts

@@ -24,7 +24,8 @@ export { default as underlineIcon } from "bootstrap-icons/icons/type-underline.s
 export const arrowIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="transparent" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>';
 
-export { default as ellipseIcon } from "@mdi/svg/svg/contain.svg";
+export { default as incrementClozeIcon } from "../../icons/contain-plus.svg";
+export { default as clozeIcon } from "@mdi/svg/svg/contain.svg";
 export { default as functionIcon } from "@mdi/svg/svg/function-variant.svg";
 export { default as paperclipIcon } from "@mdi/svg/svg/paperclip.svg";
 export { default as micIcon } from "bootstrap-icons/icons/mic.svg";

ts/icons/BUILD.bazel

@@ -0,0 +1,9 @@
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+
+js_library(
+    name = "icons",
+    srcs = glob([
+        "*.svg",
+    ]),
+    visibility = ["//visibility:public"],
+)

ts/icons/contain-plus.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-contain" width="24" height="24" viewBox="0 0 24 24"><path d="M1 2h6v2h-4v14h4v2h-6zm5 14v-2h2v2zm4 0v-2h2v2zm4 0v-2h2v.54c-.625.583-.891.887-1.191 1.46zM21 2v11.082c-.68-.11-1.32-.11-2 0v-9.082h-4v-2zm0 13v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2Z" /></svg>

ts/tsconfig.json

@@ -12,7 +12,8 @@
         { "path": "reviewer" },
         { "path": "lib" },
         { "path": "domlib" },
-        { "path": "sveltelib" }
+        { "path": "sveltelib" },
+        { "path": "icons" }
     ],
     "compilerOptions": {
         "declaration": true,