anki/ts/editable/ContentEditable.svelte
Henrik Giesel 489eadb352
Fix IME input after tab (#1584)
* Avoid initial call of mirror-dom

* Disable updateFocus from OldEditorAdapter

* fixes IME input duplication bug

* Fix saving of latestLocation for ContentEditable

* Fix IME after calling placeCaretAfterContent

* Export other libraries from domlib/index.ts

* Remove dead code

+ Uncomment code which was mistakenly left commmented
2022-01-12 08:39:41 +10:00

67 lines
1.8 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script context="module" lang="ts">
export type { ContentEditableAPI } from "./content-editable";
</script>
<script lang="ts">
import type { Writable } from "svelte/store";
import { updateAllState } from "../components/WithState.svelte";
import actionList from "../sveltelib/action-list";
import contentEditableAPI, {
saveLocation,
initialFocusHandling,
preventBuiltinContentEditableShortcuts,
} from "./content-editable";
import type { ContentEditableAPI } from "./content-editable";
import type { MirrorAction } from "../sveltelib/mirror-dom";
import type { InputManagerAction } from "../sveltelib/input-manager";
export let resolve: (editable: HTMLElement) => void;
export let mirrors: MirrorAction[];
export let nodes: Writable<DocumentFragment>;
const mirrorAction = actionList(mirrors);
const mirrorOptions = { store: nodes };
export let managers: InputManagerAction[];
const managerAction = actionList(managers);
export let api: Partial<ContentEditableAPI>;
Object.assign(api, contentEditableAPI);
</script>
<anki-editable
contenteditable="true"
use:resolve
use:saveLocation
use:initialFocusHandling
use:preventBuiltinContentEditableShortcuts
use:mirrorAction={mirrorOptions}
use:managerAction={{}}
on:focus
on:blur
on:click={updateAllState}
on:keyup={updateAllState}
/>
<style lang="scss">
anki-editable {
display: block;
padding: 6px;
overflow: auto;
overflow-wrap: break-word;
&:focus {
outline: none;
}
}
/* editable-base.scss contains styling targeting user HTML */
</style>