From b1de09516218dab84931e7c5136d48d92fe8668d Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Mon, 19 Apr 2021 23:51:09 +0200 Subject: [PATCH] Include editor-toolbar as a library in editor --- qt/aqt/data/web/css/BUILD.bazel | 9 ---- qt/aqt/data/web/js/BUILD.bazel | 9 ---- qt/aqt/editor.py | 2 - ts/compile_sass.bzl | 2 +- ts/editor-toolbar/BUILD.bazel | 70 +++++++------------------- ts/editor-toolbar/index.ts | 5 +- ts/editor/BUILD.bazel | 42 ++++++++++++++-- ts/editor/editingArea.ts | 7 ++- ts/editor/{editor.scss => fields.scss} | 0 ts/editor/focusHandlers.ts | 7 ++- ts/editor/index.ts | 12 ++--- ts/editor/inputHandlers.ts | 7 ++- ts/html-filter/BUILD.bazel | 2 +- ts/svelte/svelte.bzl | 4 +- ts/tsconfig.json | 3 +- 15 files changed, 81 insertions(+), 100 deletions(-) rename ts/editor/{editor.scss => fields.scss} (100%) diff --git a/qt/aqt/data/web/css/BUILD.bazel b/qt/aqt/data/web/css/BUILD.bazel index cb92658a0..e29acf7ed 100644 --- a/qt/aqt/data/web/css/BUILD.bazel +++ b/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__"], ) diff --git a/qt/aqt/data/web/js/BUILD.bazel b/qt/aqt/data/web/js/BUILD.bazel index 83f4718fc..b138bd31b 100644 --- a/qt/aqt/data/web/js/BUILD.bazel +++ b/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", ], diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index efb3ef5b9..420653512 100644 --- a/qt/aqt/editor.py +++ b/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, diff --git a/ts/compile_sass.bzl b/ts/compile_sass.bzl index 4e0090dac..c8d96cfb3 100644 --- a/ts/compile_sass.bzl +++ b/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", "") diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel index a52e9b3ea..b4831e813 100644 --- a/ts/editor-toolbar/BUILD.bazel +++ b/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", ], -) - -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", - ], + visibility = ["//visibility:public"], ) 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 = [ - "//ts:protobuf-shim.js", - ], - args = [ - "--global-name=editorToolbar", - "--inject:$(location //ts:protobuf-shim.js)", - "--resolve-extensions=.mjs,.js", - "--loader:.svg=text", - "--log-level=warning", - ], - entry_point = "index.ts", - external = [ - "protobufjs/light", - ], - output_css = "editor-toolbar.css", + module_name = "editor-toolbar", + srcs = glob( + ["*.ts"], + exclude = ["*.test.ts"], + ), + tsconfig = "//ts:tsconfig.json", visibility = ["//visibility:public"], deps = [ "//ts/lib", "//ts/lib:backend_proto", "//ts:image_module_support", - "index", - "bootstrap-icons", - "mdi-icons", - "local_css", - ] + svelte_names, + "//ts/sveltelib", + "@npm//@popperjs/core", + "@npm//@types/bootstrap", + "@npm//bootstrap", + "@npm//svelte", + ], ) # Tests diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts index ff744851b..6fa1b5437 100644 --- a/ts/editor-toolbar/index.ts +++ b/ts/editor-toolbar/index.ts @@ -202,9 +202,10 @@ class EditorToolbar extends HTMLElement { customElements.define("anki-editor-toolbar", EditorToolbar); -/* Exports for editor - * @ts-expect-error */ +/* Exports for editor/ +/* @ts-expect-error */ export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte"; +/* @ts-expect-error */ export { enableButtons, disableButtons } from "./EditorToolbar.svelte"; /* Exports for add-ons */ diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel index bdcf754fa..d7da845d2 100644 --- a/ts/editor/BUILD.bazel +++ b/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", - ":editor_ts", + "bootstrap-icons", + "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", ], ) diff --git a/ts/editor/editingArea.ts b/ts/editor/editingArea.ts index 5002ba817..a87161683 100644 --- a/ts/editor/editingArea.ts +++ b/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", editorToolbar.updateActiveButtons); + this.addEventListener("mouseup", 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", editorToolbar.updateActiveButtons); + this.removeEventListener("mouseup", updateActiveButtons); } initialize(color: string, content: string): void { diff --git a/ts/editor/editor.scss b/ts/editor/fields.scss similarity index 100% rename from ts/editor/editor.scss rename to ts/editor/fields.scss diff --git a/ts/editor/focusHandlers.ts b/ts/editor/focusHandlers.ts index fb9f44b8c..6bcadd8bd 100644 --- a/ts/editor/focusHandlers.ts +++ b/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 - editorToolbar.enableButtons(); + 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 - editorToolbar.disableButtons(); + disableButtons(); } diff --git a/ts/editor/index.ts b/ts/editor/index.ts index c7e2121b8..0297963e1 100644 --- a/ts/editor/index.ts +++ b/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 - editorToolbar.updateActiveButtons(); + 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 - editorToolbar.disableButtons(); + 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 - editorToolbar.updateActiveButtons(); + updateActiveButtons(); } } diff --git a/ts/editor/inputHandlers.ts b/ts/editor/inputHandlers.ts index eed5e72e4..d9a5eb857 100644 --- a/ts/editor/inputHandlers.ts +++ b/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 - editorToolbar.updateActiveButtons(); + 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 - editorToolbar.updateActiveButtons(); + updateActiveButtons(); } }, { once: true } diff --git a/ts/html-filter/BUILD.bazel b/ts/html-filter/BUILD.bazel index d4fed4512..cf5e71d7e 100644 --- a/ts/html-filter/BUILD.bazel +++ b/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 = [], diff --git a/ts/svelte/svelte.bzl b/ts/svelte/svelte.bzl index 9b9b1c9e6..149447286 100644 --- a/ts/svelte/svelte.bzl +++ b/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 = []): diff --git a/ts/tsconfig.json b/ts/tsconfig.json index 1895c002b..bc98946fd 100644 --- a/ts/tsconfig.json +++ b/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",