Anki/ts/editor/editor-toolbar/LatexButton.svelte
Henrik Giesel a981e56008
Improved add-on extension API (#1626)
* Add componentHook functionality

* Register package NoteEditor

* Rename OldEditorAdapter to NoteEditor

* Expose instances in component-hook as well

* Rename NoteTypeButtons to NotetypeButtons

* Move PreviewButton initialization to BrowserEditor.svelte

* Remove focusInRichText

- Same thing can be done by inspecting activeInput

* Satisfy formatter

* Fix remaining rebase issues

* Add .bazel to .prettierignore

* Rename currentField and activeInput to focused{Field,Input}

* Move identifier to lib and registration to sveltelib

* Fix Dynamic component insertion

* Simplify editingInputIsRichText

* Give extra warning in svelte/svelte.ts

- This was caused by doing a rename of a files, that only differed in
  case: NoteTypeButtons.svelte to NotetypeButtons.svelte
- It was quite tough to figure out, and this console.log might make it
  easier if it ever happens again

* Change signature of contextProperty

* Add ts/typings for add-on definition files

* Add Anki types in typings/common/index.d.ts

* Export without .svelte suffix

It conflicts with how Svelte types its packages

* Fix left over .svelte import from editor.py

* Rename NoteTypeButtons to unrelated to ensure case-only rename

* Rename back to NotetypeButtons.svelte

* Remove unused component-hook.ts, Fix typing in lifecycle-hooks

* Merge runtime-require and register-package into one file

+ Give some preliminary types to require

* Rename uiDidLoad to loaded

* Fix eslint / svelte-check

* Rename context imports to noteEditorContext

* Fix import name mismatch

- I wonder why these issues are not caught by svelte-check?

* Rename two missed usages of uiDidLoad

* Fix ButtonDropdown from having wrong border-radius

* Uniformly rename libraries to packages

- I don't have a strong opinion on whether to name them libraries or
  packages, I just think we should have a uniform name.
- JS/TS only uses the terms "module" and "namespace", however `package`
  is a reserved keyword for future use, whereas `library` is not.

* Refactor registration.ts into dynamic-slotting

- This is part of an effort to refactor the dynamic slotting (extending
  buttons) functionality out of components like ButtonGroup.

* Remove dynamically-slottable logic from ButtonToolbar

* Use DynamicallySlottable in editor-toolbar

* Fix no border radius on indentation button dropdown

* Fix AddonButtons

* Remove Item/ButtonGroupItem in deck-options, where it's not necessary

* Remove unnecessary uses of Item and ButtonGroupItem

* Fix remaining tests

* Fix relative imports

* Revert change return value of remapBinToSrcDir to ./bazel/out...

* Remove typings directory

* Adjust comments for dynamic-slottings
2022-02-03 14:52:11 +10:00

80 lines
2.9 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 * as tr from "../../lib/ftl";
import IconButton from "../../components/IconButton.svelte";
import WithDropdown from "../../components/WithDropdown.svelte";
import DropdownMenu from "../../components/DropdownMenu.svelte";
import DropdownItem from "../../components/DropdownItem.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import { withButton } from "../../components/helpers";
import { getPlatformString } from "../../lib/shortcuts";
import { wrapInternal } from "../../lib/wrap";
import { functionIcon } from "./icons";
import { context as noteEditorContext } from "../NoteEditor.svelte";
import type { RichTextInputAPI } from "../rich-text-input";
import { editingInputIsRichText } from "../rich-text-input";
const { focusedInput } = noteEditorContext.get();
$: richTextAPI = $focusedInput as RichTextInputAPI;
async function surround(front: string, back: string): Promise<void> {
const element = await richTextAPI.element;
wrapInternal(element, front, back, false);
}
function onMathjaxInline(): void {
surround("<anki-mathjax focusonmount>", "</anki-mathjax>");
}
function onMathjaxBlock(): void {
surround('<anki-mathjax block="true" focusonmount>', "</anki-matjax>");
}
function onMathjaxChemistry(): void {
surround("<anki-mathjax focusonmount>\\ce{", "}</anki-mathjax>");
}
function onLatex(): void {
surround("[latex]", "[/latex]");
}
function onLatexEquation(): void {
surround("[$]", "[/$]");
}
function onLatexMathEnv(): void {
surround("[$$]", "[/$$]");
}
type LatexItem = [() => void, string, string];
const dropdownItems: LatexItem[] = [
[onMathjaxInline, "Control+M, M", tr.editingMathjaxInline()],
[onMathjaxBlock, "Control+M, E", tr.editingMathjaxBlock()],
[onMathjaxChemistry, "Control+M, C", tr.editingMathjaxChemistry()],
[onLatex, "Control+T, T", tr.editingLatex()],
[onLatexEquation, "Control+T, E", tr.editingLatexEquation()],
[onLatexMathEnv, "Control+T, M", tr.editingLatexMathEnv()],
];
$: disabled = !editingInputIsRichText($focusedInput);
</script>
<WithDropdown let:createDropdown>
<IconButton {disabled} on:mount={withButton(createDropdown)}>
{@html functionIcon}
</IconButton>
<DropdownMenu>
{#each dropdownItems as [callback, keyCombination, label]}
<DropdownItem on:click={callback}>
{label}
<span class="ps-1 float-end">{getPlatformString(keyCombination)}</span>
</DropdownItem>
<Shortcut {keyCombination} on:action={callback} />
{/each}
</DropdownMenu>
</WithDropdown>