Include editor-toolbar as a library in editor

qt/aqt/data/web/css/BUILD.bazel

@@ -26,20 +26,11 @@ copy_files_into_group(
     package = "//ts/editor",
 )
 
-copy_files_into_group(
-    name = "editor-toolbar",
-    srcs = [
-        "editor-toolbar.css",
-    ],
-    package = "//ts/editor-toolbar",
-)
-
 filegroup(
     name = "css",
     srcs = [
         "css_local",
         "editor",
-        "editor-toolbar",
     ],
     visibility = ["//qt:__subpackages__"],
 )

qt/aqt/data/web/js/BUILD.bazel

@@ -37,20 +37,11 @@ copy_files_into_group(
     package = "//ts/editor",
 )
 
-copy_files_into_group(
-    name = "editor-toolbar",
-    srcs = [
-        "editor-toolbar.js",
-    ],
-    package = "//ts/editor-toolbar",
-)
-
 filegroup(
     name = "js",
     srcs = [
         "aqt_es5",
         "editor",
-        "editor-toolbar",
         "mathjax.js",
         "//qt/aqt/data/web/js/vendor",
     ],

qt/aqt/editor.py

@@ -141,13 +141,11 @@ class Editor:
             _html % (bgcol, tr.editing_show_duplicates()),
             css=[
                 "css/editor.css",
-                "css/editor-toolbar.css",
             ],
             js=[
                 "js/vendor/jquery.min.js",
                 "js/vendor/protobuf.min.js",
                 "js/editor.js",
-                "js/editor-toolbar.js",
             ],
             context=self,
             default_css=False,

ts/compile_sass.bzl

@@ -1,6 +1,6 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 
-def compile_sass(group, srcs, visibility, deps):
+def compile_sass(group, srcs, deps = [], visibility = ["//visibility:private"]):
     css_files = []
     for scss_file in srcs:
         base = scss_file.replace(".scss", "")

ts/editor-toolbar/BUILD.bazel

@@ -17,6 +17,7 @@ compile_svelte(
         "//ts/sass:button_mixins_lib",
         "//ts/sass/bootstrap",
     ],
+    visibility = ["//visibility:public"],
 )
 
 compile_sass(
@@ -26,42 +27,11 @@ compile_sass(
         "legacy.scss",
     ],
     group = "local_css",
-    visibility = ["//visibility:public"],
     deps = [
         "//ts/sass:button_mixins_lib",
         "//ts/sass/bootstrap",
     ],
-)
+    visibility = ["//visibility:public"],
-
-ts_library(
-    name = "index",
-    srcs = ["index.ts"],
-    deps = [
-        "EditorToolbar",
-        "lib",
-        "//ts/lib",
-        "//ts/sveltelib",
-        "@npm//svelte",
-        "@npm//svelte2tsx",
-    ],
-)
-
-ts_library(
-    name = "lib",
-    srcs = glob(
-        ["*.ts"],
-        exclude = ["index.ts"],
-    ),
-    deps = [
-        "//ts:image_module_support",
-        "//ts/lib",
-        "//ts/lib:backend_proto",
-        "//ts/sveltelib",
-        "@npm//@popperjs/core",
-        "@npm//@types/bootstrap",
-        "@npm//bootstrap",
-        "@npm//svelte",
-    ],
 )
 
 copy_bootstrap_icons(
@@ -88,6 +58,7 @@ copy_bootstrap_icons(
         "text-indent-left.svg",
         "text-indent-right.svg",
     ],
+    visibility = ["//visibility:public"],
 )
 
 copy_mdi_icons(
@@ -99,35 +70,28 @@ copy_mdi_icons(
         "code-brackets.svg",
         "xml.svg",
     ],
+    visibility = ["//visibility:public"],
 )
 
-esbuild(
+ts_library(
     name = "editor-toolbar",
-    srcs = [
+    module_name = "editor-toolbar",
-        "//ts:protobuf-shim.js",
+    srcs = glob(
-    ],
+        ["*.ts"],
-    args = [
+        exclude = ["*.test.ts"],
-        "--global-name=editorToolbar",
+    ),
-        "--inject:$(location //ts:protobuf-shim.js)",
+    tsconfig = "//ts:tsconfig.json",
-        "--resolve-extensions=.mjs,.js",
-        "--loader:.svg=text",
-        "--log-level=warning",
-    ],
-    entry_point = "index.ts",
-    external = [
-        "protobufjs/light",
-    ],
-    output_css = "editor-toolbar.css",
     visibility = ["//visibility:public"],
     deps = [
         "//ts/lib",
         "//ts/lib:backend_proto",
         "//ts:image_module_support",
-        "index",
+        "//ts/sveltelib",
-        "bootstrap-icons",
+        "@npm//@popperjs/core",
-        "mdi-icons",
+        "@npm//@types/bootstrap",
-        "local_css",
+        "@npm//bootstrap",
-    ] + svelte_names,
+        "@npm//svelte",
+    ],
 )
 
 # Tests

ts/editor-toolbar/index.ts

@@ -202,9 +202,10 @@ class EditorToolbar extends HTMLElement {
 
 customElements.define("anki-editor-toolbar", EditorToolbar);
 
-/* Exports for editor
+/* Exports for editor/
- * @ts-expect-error */
+/* @ts-expect-error */
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
+/* @ts-expect-error */
 export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
 
 /* Exports for add-ons */

ts/editor/BUILD.bazel

@@ -8,7 +8,17 @@ load("//ts:compile_sass.bzl", "compile_sass")
 compile_sass(
     srcs = [
         "editable.scss",
-        "editor.scss",
+    ],
+    group = "editable_scss",
+    visibility = ["//visibility:public"],
+    deps = [
+        "//ts/sass:scrollbar_lib",
+    ],
+)
+
+compile_sass(
+    srcs = [
+        "fields.scss",
     ],
     group = "base_css",
     visibility = ["//visibility:public"],
@@ -26,6 +36,7 @@ ts_library(
     deps = [
         "//ts:image_module_support",
         "//ts/html-filter",
+        "//ts/editor-toolbar",
     ],
 )
 
@@ -36,17 +47,42 @@ copy_bootstrap_icons(
 
 esbuild(
     name = "editor",
+    srcs = [
+        "//ts:protobuf-shim.js",
+    ],
     args = [
         "--loader:.svg=text",
+        "--inject:$(location //ts:protobuf-shim.js)",
         "--resolve-extensions=.mjs,.js",
         "--log-level=warning",
     ],
+    output_css = "editor.css",
+    external = [
+        "protobufjs/light",
+    ],
     entry_point = "index_wrapper.ts",
     visibility = ["//visibility:public"],
     deps = [
         "base_css",
-        ":bootstrap-icons",
+        "bootstrap-icons",
-        ":editor_ts",
+        "editor_ts",
+        "//ts/editor-toolbar:local_css",
+        "//ts/editor-toolbar:bootstrap-icons",
+        "//ts/editor-toolbar:mdi-icons",
+        "//ts/editor-toolbar:ButtonDropdown",
+        "//ts/editor-toolbar:ButtonGroup",
+        "//ts/editor-toolbar:IconButton",
+        "//ts/editor-toolbar:LabelButton",
+        "//ts/editor-toolbar:SelectButton",
+        "//ts/editor-toolbar:SelectOption",
+        "//ts/editor-toolbar:RawButton",
+        "//ts/editor-toolbar:EditorToolbar",
+        "//ts/editor-toolbar:CommandIconButton",
+        "//ts/editor-toolbar:WithDropdownMenu",
+        "//ts/editor-toolbar:DropdownItem",
+        "//ts/editor-toolbar:DropdownMenu",
+        "//ts/editor-toolbar:SquareButton",
+        "//ts/editor-toolbar:ColorPicker",
     ],
 )
 

ts/editor/editingArea.ts

@@ -3,6 +3,7 @@
 
 import type { Editable } from "./editable";
 
+import { updateActiveButtons } from "editor-toolbar";
 import { bridgeCommand } from "./lib";
 import { onInput, onKey, onKeyUp } from "./inputHandlers";
 import { onFocus, onBlur } from "./focusHandlers";
@@ -59,8 +60,7 @@ export class EditingArea extends HTMLDivElement {
         this.addEventListener("paste", onPaste);
         this.addEventListener("copy", onCutOrCopy);
         this.addEventListener("oncut", onCutOrCopy);
-        // @ts-expect-error
+        this.addEventListener("mouseup", updateActiveButtons);
-        this.addEventListener("mouseup", editorToolbar.updateActiveButtons);
 
         const baseStyleSheet = this.baseStyle.sheet as CSSStyleSheet;
         baseStyleSheet.insertRule("anki-editable {}", 0);
@@ -75,8 +75,7 @@ export class EditingArea extends HTMLDivElement {
         this.removeEventListener("paste", onPaste);
         this.removeEventListener("copy", onCutOrCopy);
         this.removeEventListener("oncut", onCutOrCopy);
-        // @ts-expect-error
+        this.removeEventListener("mouseup", updateActiveButtons);
-        this.removeEventListener("mouseup", editorToolbar.updateActiveButtons);
     }
 
     initialize(color: string, content: string): void {

ts/editor/focusHandlers.ts

@@ -1,6 +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 type { EditingArea } from "./editingArea";
 
 import { saveField } from "./changeTimer";
@@ -10,8 +11,7 @@ export function onFocus(evt: FocusEvent): void {
     const currentField = evt.currentTarget as EditingArea;
     currentField.focusEditable();
     bridgeCommand(`focus:${currentField.ord}`);
-    // @ts-expect-error
+    enableButtons();
-    editorToolbar.enableButtons();
 }
 
 export function onBlur(evt: FocusEvent): void {
@@ -19,6 +19,5 @@ export function onBlur(evt: FocusEvent): void {
     const currentFieldUnchanged = previousFocus === document.activeElement;
 
     saveField(previousFocus, currentFieldUnchanged ? "key" : "blur");
-    // @ts-expect-error
+    disableButtons();
-    editorToolbar.disableButtons();
 }

ts/editor/index.ts

@@ -2,6 +2,8 @@
 // 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 "./fields.css";
 
 import { caretToEnd } from "./helpers";
 import { saveField } from "./changeTimer";
@@ -24,6 +26,7 @@ declare global {
     }
 }
 
+import "editor-toolbar";
 customElements.define("anki-editable", Editable);
 customElements.define("anki-editing-area", EditingArea, { extends: "div" });
 customElements.define("anki-label-container", LabelContainer, { extends: "div" });
@@ -41,8 +44,7 @@ export function focusField(n: number): void {
     if (field) {
         field.editingArea.focusEditable();
         caretToEnd(field.editingArea);
-        // @ts-expect-error
+        updateActiveButtons();
-        editorToolbar.updateActiveButtons();
     }
 }
 
@@ -122,8 +124,7 @@ export function setFields(fields: [string, string][]): void {
 
     if (!getCurrentField()) {
         // when initial focus of the window is not on editor (e.g. browser)
-        // @ts-expect-error
+        disableButtons();
-        editorToolbar.disableButtons();
     }
 }
 
@@ -158,7 +159,6 @@ export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void
     document.execCommand(cmd, false, arg);
     if (!nosave) {
         saveField(getCurrentField() as EditingArea, "key");
-        // @ts-expect-error
+        updateActiveButtons();
-        editorToolbar.updateActiveButtons();
     }
 }

ts/editor/inputHandlers.ts

@@ -1,6 +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 { EditingArea } from "./editingArea";
 import { caretToEnd, nodeIsElement } from "./helpers";
 import { triggerChangeTimer } from "./changeTimer";
@@ -37,8 +38,7 @@ const getParagraph = getAnchorParent(
 export function onInput(event: Event): void {
     // make sure IME changes get saved
     triggerChangeTimer(event.currentTarget as EditingArea);
-    // @ts-ignore
+    updateActiveButtons();
-    editorToolbar.updateActiveButtons();
 }
 
 export function onKey(evt: KeyboardEvent): void {
@@ -89,8 +89,7 @@ globalThis.addEventListener("keydown", (evt: KeyboardEvent) => {
                 const newFocusTarget = evt.target;
                 if (newFocusTarget instanceof EditingArea) {
                     caretToEnd(newFocusTarget);
-                    // @ts-ignore
+                    updateActiveButtons();
-                    editorToolbar.updateActiveButtons();
                 }
             },
             { once: true }

ts/html-filter/BUILD.bazel

@@ -5,11 +5,11 @@ load("//ts:eslint.bzl", "eslint_test")
 
 ts_library(
     name = "html-filter",
+    module_name = "html-filter",
     srcs = glob(
         ["*.ts"],
         exclude = ["*.test.ts"],
     ),
-    module_name = "html-filter",
     tsconfig = "//ts:tsconfig.json",
     visibility = ["//visibility:public"],
     deps = [],

ts/svelte/svelte.bzl

@@ -63,17 +63,19 @@ svelte = rule(
     },
 )
 
-def compile_svelte(name, srcs, deps = []):
+def compile_svelte(name, srcs, deps = [], visibility = ["//visibility:private"]):
     for src in srcs:
         svelte(
             name = src.replace(".svelte", ""),
             entry_point = src,
             deps = deps,
+            visibility = visibility,
         )
 
     native.filegroup(
         name = name,
         srcs = srcs,
+        visibility = visibility,
     )
 
 def svelte_check(name = "svelte_check", srcs = []):

ts/tsconfig.json

@@ -8,7 +8,8 @@
         "paths": {
             "anki/*": ["../bazel-bin/ts/lib/*"],
             "sveltelib/*": ["../bazel-bin/ts/sveltelib/*"],
-            "html-filter/*": ["../bazel-bin/ts/html-filter/*"]
+            "html-filter/*": ["../bazel-bin/ts/html-filter/*"],
+            "editor-toolbar/*": ["../bazel-bin/ts/editor-toolbar/*"]
         },
         "importsNotUsedAsValues": "error",
         "outDir": "dist",