diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/components/BUILD.bazel similarity index 80% rename from ts/editor-toolbar/BUILD.bazel rename to ts/components/BUILD.bazel index 975f48ec4..54919451e 100644 --- a/ts/editor-toolbar/BUILD.bazel +++ b/ts/components/BUILD.bazel @@ -3,7 +3,6 @@ load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check") load("//ts:prettier.bzl", "prettier_test") load("//ts:eslint.bzl", "eslint_test") load("//ts:esbuild.bzl", "esbuild") -load("//ts:compile_sass.bzl", "compile_sass") svelte_files = glob(["*.svelte"]) @@ -25,22 +24,9 @@ compile_svelte( visibility = ["//visibility:public"], ) -compile_sass( - srcs = [ - "bootstrap.scss", - "legacy.scss", - ], - group = "local_css", - deps = [ - "//ts/sass:button_mixins_lib", - "//ts/sass/bootstrap", - ], - visibility = ["//visibility:public"], -) - ts_library( - name = "editor-toolbar", - module_name = "editor-toolbar", + name = "components", + module_name = "components", srcs = glob( ["*.ts"], exclude = ["*.test.ts"], diff --git a/ts/editor-toolbar/ButtonDropdown.d.ts b/ts/components/ButtonDropdown.d.ts similarity index 100% rename from ts/editor-toolbar/ButtonDropdown.d.ts rename to ts/components/ButtonDropdown.d.ts diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/components/ButtonDropdown.svelte similarity index 100% rename from ts/editor-toolbar/ButtonDropdown.svelte rename to ts/components/ButtonDropdown.svelte diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte similarity index 100% rename from ts/editor-toolbar/ButtonGroup.svelte rename to ts/components/ButtonGroup.svelte diff --git a/ts/editor-toolbar/ButtonGroupItem.svelte b/ts/components/ButtonGroupItem.svelte similarity index 100% rename from ts/editor-toolbar/ButtonGroupItem.svelte rename to ts/components/ButtonGroupItem.svelte diff --git a/ts/editor-toolbar/ColorPicker.d.ts b/ts/components/ColorPicker.d.ts similarity index 100% rename from ts/editor-toolbar/ColorPicker.d.ts rename to ts/components/ColorPicker.d.ts diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/components/ColorPicker.svelte similarity index 100% rename from ts/editor-toolbar/ColorPicker.svelte rename to ts/components/ColorPicker.svelte diff --git a/ts/editor-toolbar/CommandIconButton.d.ts b/ts/components/CommandIconButton.d.ts similarity index 100% rename from ts/editor-toolbar/CommandIconButton.d.ts rename to ts/components/CommandIconButton.d.ts diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/components/CommandIconButton.svelte similarity index 100% rename from ts/editor-toolbar/CommandIconButton.svelte rename to ts/components/CommandIconButton.svelte diff --git a/ts/editor-toolbar/DropdownItem.d.ts b/ts/components/DropdownItem.d.ts similarity index 100% rename from ts/editor-toolbar/DropdownItem.d.ts rename to ts/components/DropdownItem.d.ts diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/components/DropdownItem.svelte similarity index 100% rename from ts/editor-toolbar/DropdownItem.svelte rename to ts/components/DropdownItem.svelte diff --git a/ts/editor-toolbar/DropdownMenu.d.ts b/ts/components/DropdownMenu.d.ts similarity index 100% rename from ts/editor-toolbar/DropdownMenu.d.ts rename to ts/components/DropdownMenu.d.ts diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/components/DropdownMenu.svelte similarity index 100% rename from ts/editor-toolbar/DropdownMenu.svelte rename to ts/components/DropdownMenu.svelte diff --git a/ts/editor-toolbar/IconButton.d.ts b/ts/components/IconButton.d.ts similarity index 100% rename from ts/editor-toolbar/IconButton.d.ts rename to ts/components/IconButton.d.ts diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/components/IconButton.svelte similarity index 100% rename from ts/editor-toolbar/IconButton.svelte rename to ts/components/IconButton.svelte diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/components/LabelButton.svelte similarity index 100% rename from ts/editor-toolbar/LabelButton.svelte rename to ts/components/LabelButton.svelte diff --git a/ts/editor-toolbar/RawButton.svelte b/ts/components/RawButton.svelte similarity index 100% rename from ts/editor-toolbar/RawButton.svelte rename to ts/components/RawButton.svelte diff --git a/ts/editor-toolbar/SelectButton.d.ts b/ts/components/SelectButton.d.ts similarity index 100% rename from ts/editor-toolbar/SelectButton.d.ts rename to ts/components/SelectButton.d.ts diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/components/SelectButton.svelte similarity index 100% rename from ts/editor-toolbar/SelectButton.svelte rename to ts/components/SelectButton.svelte diff --git a/ts/editor-toolbar/SelectOption.svelte b/ts/components/SelectOption.svelte similarity index 100% rename from ts/editor-toolbar/SelectOption.svelte rename to ts/components/SelectOption.svelte diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/components/SquareButton.svelte similarity index 100% rename from ts/editor-toolbar/SquareButton.svelte rename to ts/components/SquareButton.svelte diff --git a/ts/editor-toolbar/StickyBar.svelte b/ts/components/StickyBar.svelte similarity index 100% rename from ts/editor-toolbar/StickyBar.svelte rename to ts/components/StickyBar.svelte diff --git a/ts/editor-toolbar/WithDropdownMenu.d.ts b/ts/components/WithDropdownMenu.d.ts similarity index 100% rename from ts/editor-toolbar/WithDropdownMenu.d.ts rename to ts/components/WithDropdownMenu.d.ts diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/components/WithDropdownMenu.svelte similarity index 100% rename from ts/editor-toolbar/WithDropdownMenu.svelte rename to ts/components/WithDropdownMenu.svelte diff --git a/ts/editor-toolbar/WithLabel.d.ts b/ts/components/WithLabel.d.ts similarity index 100% rename from ts/editor-toolbar/WithLabel.d.ts rename to ts/components/WithLabel.d.ts diff --git a/ts/editor-toolbar/WithLabel.svelte b/ts/components/WithLabel.svelte similarity index 100% rename from ts/editor-toolbar/WithLabel.svelte rename to ts/components/WithLabel.svelte diff --git a/ts/editor-toolbar/WithShortcut.svelte b/ts/components/WithShortcut.svelte similarity index 100% rename from ts/editor-toolbar/WithShortcut.svelte rename to ts/components/WithShortcut.svelte diff --git a/ts/editor-toolbar/WithTheming.svelte b/ts/components/WithTheming.svelte similarity index 100% rename from ts/editor-toolbar/WithTheming.svelte rename to ts/components/WithTheming.svelte diff --git a/ts/editor-toolbar/contextKeys.ts b/ts/components/contextKeys.ts similarity index 100% rename from ts/editor-toolbar/contextKeys.ts rename to ts/components/contextKeys.ts diff --git a/ts/editor-toolbar/dynamicComponents.ts b/ts/components/dynamicComponents.ts similarity index 100% rename from ts/editor-toolbar/dynamicComponents.ts rename to ts/components/dynamicComponents.ts diff --git a/ts/editor-toolbar/helpers.ts b/ts/components/helpers.ts similarity index 100% rename from ts/editor-toolbar/helpers.ts rename to ts/components/helpers.ts diff --git a/ts/editor-toolbar/hideable.ts b/ts/components/hideable.ts similarity index 100% rename from ts/editor-toolbar/hideable.ts rename to ts/components/hideable.ts diff --git a/ts/editor-toolbar/identifiable.ts b/ts/components/identifiable.ts similarity index 100% rename from ts/editor-toolbar/identifiable.ts rename to ts/components/identifiable.ts diff --git a/ts/editor-toolbar/types.ts b/ts/components/types.ts similarity index 100% rename from ts/editor-toolbar/types.ts rename to ts/components/types.ts diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts deleted file mode 100644 index 11dcda3ae..000000000 --- a/ts/editor-toolbar/index.ts +++ /dev/null @@ -1,38 +0,0 @@ -// Copyright: Ankitects Pty Ltd and contributors -// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html -import type { ToolbarItem, IterableToolbarItem } from "./types"; - -import EditorToolbar from "./EditorToolbar.svelte"; -export { default as EditorToolbar } from "./EditorToolbar.svelte"; - -import "./bootstrap.css"; - -interface EditorToolbarArgs { - target: HTMLElement; - anchor?: HTMLElement; - buttons?: IterableToolbarItem[]; - menus?: ToolbarItem[]; -} - -export function editorToolbar({ - target, - anchor = undefined, - buttons = [], - menus = [], -}: EditorToolbarArgs): EditorToolbar { - return new EditorToolbar({ - target, - anchor, - props: { - buttons, - menus, - nightMode: document.documentElement.classList.contains("night-mode"), - }, - }); -} - -/* Exports for editor */ -// @ts-expect-error insufficient typing of svelte modules -export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte"; -// @ts-expect-error insufficient typing of svelte modules -export { enableButtons, disableButtons } from "./EditorToolbar.svelte"; diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel index 92ce959a2..f561474b2 100644 --- a/ts/editor/BUILD.bazel +++ b/ts/editor/BUILD.bazel @@ -1,10 +1,28 @@ load("@npm//@bazel/typescript:index.bzl", "ts_library") +load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check") load("//ts:prettier.bzl", "prettier_test") load("//ts:eslint.bzl", "eslint_test") load("//ts:esbuild.bzl", "esbuild") load("//ts:vendor.bzl", "copy_bootstrap_icons", "copy_mdi_icons") load("//ts:compile_sass.bzl", "compile_sass") +svelte_files = glob(["*.svelte"]) + +svelte_names = [f.replace(".svelte", "") for f in svelte_files] + +filegroup( + name = "svelte_components", + srcs = svelte_names, + visibility = ["//visibility:public"], +) + +compile_svelte( + name = "svelte", + srcs = svelte_files, + deps = [], + visibility = ["//visibility:public"], +) + compile_sass( srcs = [ "editable.scss", @@ -30,6 +48,19 @@ compile_sass( ], ) +compile_sass( + srcs = [ + "bootstrap.scss", + "legacy.scss", + ], + group = "local_css", + deps = [ + "//ts/sass:button_mixins_lib", + "//ts/sass/bootstrap", + ], + visibility = ["//visibility:public"], +) + ts_library( name = "editor_ts", srcs = glob(["*.ts"]), @@ -38,8 +69,8 @@ ts_library( "//ts:image_module_support", "//ts/lib", "//ts/sveltelib", + "//ts/components", "//ts/html-filter", - "//ts/editor-toolbar", "@npm//svelte", ], ) @@ -106,8 +137,9 @@ esbuild( "bootstrap-icons", "mdi-icons", "editor_ts", - "//ts/editor-toolbar:local_css", - "//ts/editor-toolbar:svelte_components", + "local_css", + "svelte_components", + "//ts/components:svelte_components", ], ) @@ -129,3 +161,15 @@ prettier_test( # ], # ), # ) + +svelte_check( + name = "svelte_check", + srcs = glob([ + "*.ts", + "*.svelte", + ]) + [ + "//ts/sass:button_mixins_lib", + "//ts/sass/bootstrap", + "@npm//@types/bootstrap", + ], +) diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte similarity index 83% rename from ts/editor-toolbar/EditorToolbar.svelte rename to ts/editor/EditorToolbar.svelte index dfd4a6cc2..0b8ebe14a 100644 --- a/ts/editor-toolbar/EditorToolbar.svelte +++ b/ts/editor/EditorToolbar.svelte @@ -19,10 +19,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html diff --git a/ts/editor-toolbar/bootstrap.scss b/ts/editor/bootstrap.scss similarity index 100% rename from ts/editor-toolbar/bootstrap.scss rename to ts/editor/bootstrap.scss diff --git a/ts/editor/editingArea.ts b/ts/editor/editingArea.ts index a87161683..8056fac3d 100644 --- a/ts/editor/editingArea.ts +++ b/ts/editor/editingArea.ts @@ -3,7 +3,7 @@ import type { Editable } from "./editable"; -import { updateActiveButtons } from "editor-toolbar"; +import { updateActiveButtons } from "./toolbar"; import { bridgeCommand } from "./lib"; import { onInput, onKey, onKeyUp } from "./inputHandlers"; import { onFocus, onBlur } from "./focusHandlers"; diff --git a/ts/editor/focusHandlers.ts b/ts/editor/focusHandlers.ts index 6bcadd8bd..1c748f4fb 100644 --- a/ts/editor/focusHandlers.ts +++ b/ts/editor/focusHandlers.ts @@ -1,7 +1,7 @@ // Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html -import { enableButtons, disableButtons } from "editor-toolbar"; +import { enableButtons, disableButtons } from "./toolbar"; import type { EditingArea } from "./editingArea"; import { saveField } from "./changeTimer"; diff --git a/ts/editor/index.ts b/ts/editor/index.ts index d953648be..114e878de 100644 --- a/ts/editor/index.ts +++ b/ts/editor/index.ts @@ -2,7 +2,7 @@ // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import { filterHTML } from "html-filter"; -import { updateActiveButtons, disableButtons } from "editor-toolbar"; +import { updateActiveButtons, disableButtons } from "./toolbar"; import { setupI18n, ModuleName } from "lib/i18n"; import "./fields.css"; @@ -169,4 +169,6 @@ export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void const i18n = setupI18n({ modules: [ModuleName.EDITING, ModuleName.KEYBOARD] }); -export const $editorToolbar = initToolbar(i18n); +import type EditorToolbar from "./EditorToolbar.svelte"; + +export const $editorToolbar: Promise = initToolbar(i18n); diff --git a/ts/editor/inputHandlers.ts b/ts/editor/inputHandlers.ts index 7d43b283f..0a60547ba 100644 --- a/ts/editor/inputHandlers.ts +++ b/ts/editor/inputHandlers.ts @@ -1,7 +1,7 @@ // Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html -import { updateActiveButtons } from "editor-toolbar"; +import { updateActiveButtons } from "./toolbar"; import { EditingArea } from "./editingArea"; import { caretToEnd, nodeIsElement, getBlockElement } from "./helpers"; import { triggerChangeTimer } from "./changeTimer"; diff --git a/ts/editor-toolbar/legacy.scss b/ts/editor/legacy.scss similarity index 100% rename from ts/editor-toolbar/legacy.scss rename to ts/editor/legacy.scss diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts index d27051317..6f0c7e557 100644 --- a/ts/editor/toolbar.ts +++ b/ts/editor/toolbar.ts @@ -1,14 +1,10 @@ // Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html -import { editorToolbar, EditorToolbar } from "editor-toolbar"; -// import { getNotetypeGroup } from "./notetype"; -// import { getFormatInlineGroup } from "./formatInline"; -// import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock"; -// import { getColorGroup } from "./color"; -// import { getTemplateGroup, getTemplateMenus } from "./template"; +import EditorToolbar from "./EditorToolbar.svelte"; +import "./bootstrap.css"; -export function initToolbar(i18n: Promise) { +export function initToolbar(i18n: Promise): Promise { let toolbarResolve: (value: EditorToolbar) => void; const toolbarPromise = new Promise((resolve) => { toolbarResolve = resolve; @@ -19,21 +15,28 @@ export function initToolbar(i18n: Promise) { const target = document.body; const anchor = document.getElementById("fields")!; - const buttons = [ - // getNotetypeGroup(), - // getFormatInlineGroup(), - // getFormatBlockGroup(), - // getColorGroup(), - // getTemplateGroup(), - ]; - - const menus = [ - /*...getFormatBlockMenus(), ...getTemplateMenus()*/ - ]; - - toolbarResolve(editorToolbar({ target, anchor, buttons, menus })); + toolbarResolve( + new EditorToolbar({ + target, + anchor, + props: { + nightMode: document.documentElement.classList.contains( + "night-mode" + ), + }, + }) + ); }); }); return toolbarPromise; } + +/* Exports for editor */ +// @ts-expect-error insufficient typing of svelte modules +export { enableButtons, disableButtons } from "./EditorToolbar.svelte"; +// @ts-expect-error insufficient typing of svelte modules +export { + updateActiveButtons, + clearActiveButtons, +} from "components/CommandIconButton.svelte"; diff --git a/ts/tsconfig.json b/ts/tsconfig.json index 01bdb0333..6c59e78df 100644 --- a/ts/tsconfig.json +++ b/ts/tsconfig.json @@ -8,8 +8,8 @@ "paths": { "lib/*": ["../bazel-bin/ts/lib/*"], "sveltelib/*": ["../bazel-bin/ts/sveltelib/*"], - "html-filter/*": ["../bazel-bin/ts/html-filter/*"], - "editor-toolbar/*": ["../bazel-bin/ts/editor-toolbar/*"] + "components/*": ["../bazel-bin/ts/components/*"], + "html-filter/*": ["../bazel-bin/ts/html-filter/*"] }, "importsNotUsedAsValues": "error", "outDir": "dist",