Add EditorField export (#1915)

- This is useful when you want to set up hooks, etc. on the EditorField
  component
- Because when you can only use the NoteEditor export, you cannot notice
  when fields are mounted or destroyed
This commit is contained in:
Henrik Giesel 2022-06-20 04:07:07 +02:00 committed by GitHub
parent 05adb50153
commit 336ad05693
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 2 deletions

View file

@ -5,7 +5,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script context="module" lang="ts"> <script context="module" lang="ts">
import type { Readable } from "svelte/store"; import type { Readable } from "svelte/store";
import contextProperty from "../sveltelib/context-property";
import type { EditingAreaAPI } from "./EditingArea.svelte"; import type { EditingAreaAPI } from "./EditingArea.svelte";
export interface FieldData { export interface FieldData {
@ -22,10 +21,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
editingArea: EditingAreaAPI; editingArea: EditingAreaAPI;
} }
import { registerPackage } from "../lib/runtime-require";
import contextProperty from "../sveltelib/context-property";
import lifecycleHooks from "../sveltelib/lifecycle-hooks";
const key = Symbol("editorField"); const key = Symbol("editorField");
const [context, setContextProperty] = contextProperty<EditorFieldAPI>(key); const [context, setContextProperty] = contextProperty<EditorFieldAPI>(key);
const [lifecycle, instances, setupLifecycleHooks] =
lifecycleHooks<EditorFieldAPI>();
export { context }; export { context };
registerPackage("anki/EditorField", {
context,
lifecycle,
instances,
});
</script> </script>
<script lang="ts"> <script lang="ts">
@ -67,6 +78,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}); });
setContextProperty(api); setContextProperty(api);
setupLifecycleHooks(api);
onDestroy(() => api?.destroy()); onDestroy(() => api?.destroy());
</script> </script>

View file

@ -13,6 +13,7 @@ html {
overflow: hidden; overflow: hidden;
} }
html, body { html,
body {
height: 100%; height: 100%;
} }

View file

@ -16,6 +16,7 @@
*/ */
type AnkiPackages = type AnkiPackages =
| "anki/NoteEditor" | "anki/NoteEditor"
| "anki/EditorField"
| "anki/PlainTextInput" | "anki/PlainTextInput"
| "anki/TemplateButtons" | "anki/TemplateButtons"
| "anki/packages" | "anki/packages"