anki/ts/editor/editor-toolbar/TemplateButtons.svelte
Henrik Giesel 30bbbaf00b
Use eslint for sorting our imports (#1637)
* Make eslint sort our imports

* fix missing deps in eslint rule (dae)

Caught on Linux due to the stricter sandboxing

* Remove exports-last eslint rule (for now?)

* Adjust browserslist settings

- We use ResizeObserver which is not supported in browsers like KaiOS,
  Baidu or Android UC

* Raise minimum iOS version 13.4

- It's the first version that supports ResizeObserver

* Apply new eslint rules to sort imports
2022-02-04 18:36:34 +10:00

89 lines
2.7 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 ButtonGroup from "../../components/ButtonGroup.svelte";
import ButtonGroupItem, {
createProps,
setSlotHostContext,
updatePropsList,
} from "../../components/ButtonGroupItem.svelte";
import DynamicallySlottable from "../../components/DynamicallySlottable.svelte";
import IconButton from "../../components/IconButton.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import { bridgeCommand } from "../../lib/bridgecommand";
import * as tr from "../../lib/ftl";
import { getPlatformString } from "../../lib/shortcuts";
import { context } from "../NoteEditor.svelte";
import { editingInputIsRichText } from "../rich-text-input";
import ClozeButton from "./ClozeButton.svelte";
import { micIcon, paperclipIcon } from "./icons";
import LatexButton from "./LatexButton.svelte";
const { focusedInput } = context.get();
const attachmentKeyCombination = "F7";
function onAttachment(): void {
bridgeCommand("attach");
}
const recordKeyCombination = "F8";
function onRecord(): void {
bridgeCommand("record");
}
$: disabled = !editingInputIsRichText($focusedInput);
export let api = {};
</script>
<ButtonGroup>
<DynamicallySlottable
slotHost={ButtonGroupItem}
{createProps}
{updatePropsList}
{setSlotHostContext}
{api}
>
<ButtonGroupItem>
<IconButton
tooltip="{tr.editingAttachPicturesaudiovideo()} ({getPlatformString(
attachmentKeyCombination,
)})"
iconSize={70}
{disabled}
on:click={onAttachment}
>
{@html paperclipIcon}
</IconButton>
<Shortcut
keyCombination={attachmentKeyCombination}
on:action={onAttachment}
/>
</ButtonGroupItem>
<ButtonGroupItem>
<IconButton
tooltip="{tr.editingRecordAudio()} ({getPlatformString(
recordKeyCombination,
)})"
iconSize={70}
{disabled}
on:click={onRecord}
>
{@html micIcon}
</IconButton>
<Shortcut keyCombination={recordKeyCombination} on:action={onRecord} />
</ButtonGroupItem>
<ButtonGroupItem id="cloze">
<ClozeButton />
</ButtonGroupItem>
<ButtonGroupItem>
<LatexButton />
</ButtonGroupItem>
</DynamicallySlottable>
</ButtonGroup>