Mount TagEditor

ts/components/StickyBottom.svelte

@@ -0,0 +1,26 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    export let id: string | undefined = undefined;
+    let className: string = "";
+    export { className as class };
+</script>
+
+<footer {id} class={`container-fluid py-1 ${className}`}>
+    <slot />
+</footer>
+
+<style lang="scss">
+    footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 10;
+
+        background: var(--window-bg);
+        border-top: 1px solid var(--medium-border);
+    }
+</style>

ts/editor/TagEditor.svelte

@@ -0,0 +1,11 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import StickyBottom from "components/StickyBottom.svelte";
+</script>
+
+<StickyBottom>
+    <span>Tags</span>
+</StickyBottom>

ts/editor/index.ts

@@ -9,6 +9,9 @@
 import "sveltelib/export-runtime";
 import "lib/register-package";
 
+import type EditorToolbar from "./EditorToolbar.svelte";
+import type TagEditor from "./TagEditor.svelte";
+
 import { filterHTML } from "html-filter";
 import { updateActiveButtons } from "./toolbar";
 import { setupI18n, ModuleName } from "lib/i18n";
@@ -27,7 +30,7 @@ import { EditableContainer } from "./editable-container";
 import { Editable } from "./editable";
 import { Codable } from "./codable";
 import { initToolbar, fieldFocused } from "./toolbar";
-import { getCurrentField } from "./helpers";
+import { initTagEditor } from "./tagEditor";
 
 export { setNoteId, getNoteId } from "./note-id";
 export { saveNow } from "./change-timer";
@@ -201,6 +204,5 @@ export const i18n = setupI18n({
     ],
 });
 
-import type EditorToolbar from "./EditorToolbar.svelte";
-
 export const $editorToolbar: Promise<EditorToolbar> = initToolbar(i18n);
+export const $tagEditor: Promise<TagEditor> = initTagEditor(i18n);

ts/editor/tagEditor.ts

@@ -0,0 +1,42 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+/* eslint
+@typescript-eslint/no-non-null-assertion: "off",
+@typescript-eslint/no-explicit-any: "off",
+ */
+
+import { disabledKey, nightModeKey } from "components/contextKeys";
+import { writable } from "svelte/store";
+
+import TagEditor from "./TagEditor.svelte";
+import "./bootstrap.css";
+
+const disabled = writable(false);
+
+export function initTagEditor(i18n: Promise<void>): Promise<TagEditor> {
+    let tagEditorResolve: (value: TagEditor) => void;
+    const tagEditorPromise = new Promise<TagEditor>((resolve) => {
+        tagEditorResolve = resolve;
+    });
+
+    document.addEventListener("DOMContentLoaded", () =>
+        i18n.then(() => {
+            const target = document.body;
+            const anchor = document.getElementById("fields")!;
+
+            const context = new Map();
+            context.set(disabledKey, disabled);
+            context.set(
+                nightModeKey,
+                document.documentElement.classList.contains("night-mode")
+            );
+
+            tagEditorResolve(new TagEditor({ target, anchor, context } as any));
+        })
+    );
+
+    return tagEditorPromise;
+}
+
+export {} from "./TagEditor.svelte";