Rename editor-toolbar to components

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",
+    name = "components",
-    module_name = "editor-toolbar",
+    module_name = "components",
     srcs = glob(
         ["*.ts"],
         exclude = ["*.test.ts"],

ts/editor-toolbar/index.ts

@@ -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";

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",
+        "local_css",
-        "//ts/editor-toolbar:svelte_components",
+        "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",
+    ],
+)

ts/editor/EditorToolbar.svelte

@@ -19,10 +19,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <script lang="typescript">
     import { setContext } from "svelte";
-    import { disabledKey, nightModeKey } from "./contextKeys";
+    import { disabledKey, nightModeKey } from "components/contextKeys";
+
+    import WithTheming from "components/WithTheming.svelte";
+    import StickyBar from "components/StickyBar.svelte";
 
-    import WithTheming from "./WithTheming.svelte";
-    import StickyBar from "./StickyBar.svelte";
     import NoteTypeButtons from "./NoteTypeButtons.svelte";
 
     export let nightMode: boolean;

ts/editor/NoteTypeButtons.svelte

@@ -6,9 +6,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { bridgeCommand } from "lib/bridgecommand";
     import * as tr from "lib/i18n";
 
-    import ButtonGroup from "./ButtonGroup.svelte";
+    import ButtonGroup from "components/ButtonGroup.svelte";
-    import LabelButton from "./LabelButton.svelte";
+    import LabelButton from "components/LabelButton.svelte";
-    import WithShortcut from "./WithShortcut.svelte";
+    import WithShortcut from "components/WithShortcut.svelte";
 
     export let api = {};
 </script>

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";

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";

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<EditorToolbar> = initToolbar(i18n);

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";

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 EditorToolbar from "./EditorToolbar.svelte";
-// import { getFormatInlineGroup } from "./formatInline";
+import "./bootstrap.css";
-// import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
-// import { getColorGroup } from "./color";
-// import { getTemplateGroup, getTemplateMenus } from "./template";
 
-export function initToolbar(i18n: Promise<void>) {
+export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
     let toolbarResolve: (value: EditorToolbar) => void;
     const toolbarPromise = new Promise<EditorToolbar>((resolve) => {
         toolbarResolve = resolve;
@@ -19,21 +15,28 @@ export function initToolbar(i18n: Promise<void>) {
             const target = document.body;
             const anchor = document.getElementById("fields")!;
 
-            const buttons = [
+            toolbarResolve(
-                // getNotetypeGroup(),
+                new EditorToolbar({
-                // getFormatInlineGroup(),
+                    target,
-                // getFormatBlockGroup(),
+                    anchor,
-                // getColorGroup(),
+                    props: {
-                // getTemplateGroup(),
+                        nightMode: document.documentElement.classList.contains(
-            ];
+                            "night-mode"
-
+                        ),
-            const menus = [
+                    },
-                /*...getFormatBlockMenus(), ...getTemplateMenus()*/
+                })
-            ];
+            );
-
-            toolbarResolve(editorToolbar({ target, anchor, buttons, menus }));
         });
     });
 
     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";

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/*"],
+            "components/*": ["../bazel-bin/ts/components/*"],
-            "editor-toolbar/*": ["../bazel-bin/ts/editor-toolbar/*"]
+            "html-filter/*": ["../bazel-bin/ts/html-filter/*"]
         },
         "importsNotUsedAsValues": "error",
         "outDir": "dist",