Anki/ts/editor/editor-toolbar/ClozeButton.svelte
Henrik Giesel f534dbb8e5
Separate input components into their own directories / Remove WithShortcut (#1613)
* Put PlainTextInput into its own directory

* Create a directory for RichTextInput

* Create editor-toolbar directory

* Move PreviewButton into editor-toolbar

* The time to refactor this is not quite yet here

* Create tag-editor directory

* Remove some of the uses of WithShortcut

* Remove all uses of WithShortcut from editor package

* Remove last uses of WithShortcut

* Fix typo
2022-01-24 11:43:09 +10:00

66 lines
2.1 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import IconButton from "../../components/IconButton.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import * as tr from "../../lib/ftl";
import { wrapInternal } from "../../lib/wrap";
import { getPlatformString } from "../../lib/shortcuts";
import { get } from "svelte/store";
import { getNoteEditor } from "../OldEditorAdapter.svelte";
import type { RichTextInputAPI } from "../rich-text-input";
import { ellipseIcon } from "./icons";
const noteEditor = getNoteEditor();
const { focusInRichText, activeInput } = noteEditor;
const clozePattern = /\{\{c(\d+)::/gu;
function getCurrentHighestCloze(increment: boolean): number {
let highest = 0;
for (const field of noteEditor.fields) {
const content = field.editingArea?.content;
const fieldHTML = content ? get(content) : "";
const matches: number[] = [];
let match: RegExpMatchArray | null = null;
while ((match = clozePattern.exec(fieldHTML))) {
matches.push(Number(match[1]));
}
highest = Math.max(highest, ...matches);
}
if (increment) {
highest++;
}
return Math.max(1, highest);
}
$: richTextAPI = $activeInput as RichTextInputAPI;
async function onCloze(event: KeyboardEvent | MouseEvent): Promise<void> {
const highestCloze = getCurrentHighestCloze(!event.getModifierState("Alt"));
const richText = await richTextAPI.element;
wrapInternal(richText, `{{c${highestCloze}::`, "}}", false);
}
$: disabled = !$focusInRichText;
const keyCombination = "Control+Alt?+Shift+C";
</script>
<IconButton
tooltip="{tr.editingClozeDeletion()} {getPlatformString(keyCombination)}"
{disabled}
on:click={onCloze}
>
{@html ellipseIcon}
</IconButton>
<Shortcut {keyCombination} on:action={(event) => onCloze(event.detail.originalEvent)} />