anki/ts/deckoptions/DeckOptionsPage.svelte
Henrik Giesel 5cc6fc7d9b Use TextInputModal directly from svelte component
* the only important thing is that it is not positioned within elements
  with display: none
* I think we can treat the existence of the modal to be a kind of
  "precondition" that has to be met for the component to be used
2021-05-26 08:46:12 +10:00

46 lines
1.4 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 ConfigSelector from "./ConfigSelector.svelte";
import ConfigEditor from "./ConfigEditor.svelte";
import type { DeckOptionsState } from "./lib";
import { onMount, onDestroy } from "svelte";
import { registerShortcut } from "lib/shortcuts";
import type { Writable } from "svelte/store";
import HtmlAddon from "./HtmlAddon.svelte";
import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
export let state: DeckOptionsState;
let addons = state.addonComponents;
export function auxData(): Writable<Record<string, unknown>> {
return state.currentAuxData;
}
export function addSvelteAddon(component: DynamicSvelteComponent): void {
$addons = [...$addons, component];
}
export function addHtmlAddon(html: string, mounted: () => void): void {
$addons = [
...$addons,
{
component: HtmlAddon,
html,
mounted,
},
];
}
let registerCleanup: () => void;
onMount(() => {
registerCleanup = registerShortcut(() => state.save(false), "Control+Enter");
});
onDestroy(() => registerCleanup?.());
</script>
<ConfigSelector {state} />
<ConfigEditor {state} />