From f9b320e105e70000fbe1a63ff467bf3689b7099a Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Wed, 23 Jun 2021 17:11:19 +0200 Subject: [PATCH 001/160] Mount TagEditor --- ts/components/StickyBottom.svelte | 26 +++++++++++++++++++ ts/editor/TagEditor.svelte | 11 ++++++++ ts/editor/index.ts | 8 +++--- ts/editor/tagEditor.ts | 42 +++++++++++++++++++++++++++++++ 4 files changed, 84 insertions(+), 3 deletions(-) create mode 100644 ts/components/StickyBottom.svelte create mode 100644 ts/editor/TagEditor.svelte create mode 100644 ts/editor/tagEditor.ts diff --git a/ts/components/StickyBottom.svelte b/ts/components/StickyBottom.svelte new file mode 100644 index 000000000..9546b83b9 --- /dev/null +++ b/ts/components/StickyBottom.svelte @@ -0,0 +1,26 @@ + + + + + + diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte new file mode 100644 index 000000000..6c97a51e3 --- /dev/null +++ b/ts/editor/TagEditor.svelte @@ -0,0 +1,11 @@ + + + + + Tags + diff --git a/ts/editor/index.ts b/ts/editor/index.ts index bdb0c7f03..4d9c159da 100644 --- a/ts/editor/index.ts +++ b/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 = initToolbar(i18n); +export const $tagEditor: Promise = initTagEditor(i18n); diff --git a/ts/editor/tagEditor.ts b/ts/editor/tagEditor.ts new file mode 100644 index 000000000..c55ab6217 --- /dev/null +++ b/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): Promise { + let tagEditorResolve: (value: TagEditor) => void; + const tagEditorPromise = new Promise((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"; From 0e858d87d41b3b43fd79d5137b27dcbb000e66a8 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Wed, 23 Jun 2021 17:35:50 +0200 Subject: [PATCH 002/160] Add Tag.svelte --- ts/editor/BUILD.bazel | 3 +++ ts/editor/Tag.svelte | 30 ++++++++++++++++++++++++++++++ ts/editor/TagEditor.svelte | 5 ++++- ts/editor/icons.ts | 2 ++ 4 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 ts/editor/Tag.svelte diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel index 470777076..206c7bdd9 100644 --- a/ts/editor/BUILD.bazel +++ b/ts/editor/BUILD.bazel @@ -103,6 +103,9 @@ copy_bootstrap_icons( "text-center.svg", "text-indent-left.svg", "text-indent-right.svg", + + # tag editor + "x.svg", ], visibility = ["//visibility:public"], ) diff --git a/ts/editor/Tag.svelte b/ts/editor/Tag.svelte new file mode 100644 index 000000000..698eca901 --- /dev/null +++ b/ts/editor/Tag.svelte @@ -0,0 +1,30 @@ + + + +{#if active} + active! +{:else} + + + {@html deleteIcon} + +{/if} + + diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte index 6c97a51e3..f44b65f61 100644 --- a/ts/editor/TagEditor.svelte +++ b/ts/editor/TagEditor.svelte @@ -4,8 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> - Tags + Tags: + en::foobar + zh::あちこ diff --git a/ts/editor/icons.ts b/ts/editor/icons.ts index 00ae6776c..bce7f0f67 100644 --- a/ts/editor/icons.ts +++ b/ts/editor/icons.ts @@ -31,6 +31,8 @@ export { default as ellipseIcon } from "./contain.svg"; export { default as functionIcon } from "./function-variant.svg"; export { default as xmlIcon } from "./xml.svg"; +export { default as deleteIcon } from "./x.svg"; + export const arrowIcon = ''; From bb6db5bd95045993b3c8842b06cc9b6655c7453e Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Wed, 23 Jun 2021 17:42:37 +0200 Subject: [PATCH 003/160] Add Tag DeleteIcon --- ts/{deck-options => components}/Badge.svelte | 0 ts/deck-options/RevertButton.svelte | 2 +- ts/deck-options/TooltipLabel.svelte | 2 +- ts/editor/Tag.svelte | 3 ++- 4 files changed, 4 insertions(+), 3 deletions(-) rename ts/{deck-options => components}/Badge.svelte (100%) diff --git a/ts/deck-options/Badge.svelte b/ts/components/Badge.svelte similarity index 100% rename from ts/deck-options/Badge.svelte rename to ts/components/Badge.svelte diff --git a/ts/deck-options/RevertButton.svelte b/ts/deck-options/RevertButton.svelte index 8432893ea..32090cfd1 100644 --- a/ts/deck-options/RevertButton.svelte +++ b/ts/deck-options/RevertButton.svelte @@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import WithDropdown from "components/WithDropdown.svelte"; import DropdownMenu from "components/DropdownMenu.svelte"; import DropdownItem from "components/DropdownItem.svelte"; - import Badge from "./Badge.svelte"; + import Badge from "components/Badge.svelte"; import { revertIcon } from "./icons"; import { isEqual as isEqualLodash, cloneDeep } from "lodash-es"; import { touchDeviceKey } from "components/context-keys"; diff --git a/ts/deck-options/TooltipLabel.svelte b/ts/deck-options/TooltipLabel.svelte index a2611665a..44ccff33a 100644 --- a/ts/deck-options/TooltipLabel.svelte +++ b/ts/deck-options/TooltipLabel.svelte @@ -7,7 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import { infoCircle } from "./icons"; import WithTooltip from "./WithTooltip.svelte"; import Label from "./Label.svelte"; - import Badge from "./Badge.svelte"; + import Badge from "components/Badge.svelte"; export let markdownTooltip: string; let forId: string; diff --git a/ts/editor/Tag.svelte b/ts/editor/Tag.svelte index 698eca901..63f373259 100644 --- a/ts/editor/Tag.svelte +++ b/ts/editor/Tag.svelte @@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> -