Add ts/editor-toolbar

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

@@ -26,11 +26,20 @@ 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,11 +37,20 @@ 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",
     ],

ts/editor-toolbar/BUILD.bazel

@@ -0,0 +1,92 @@
+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")
+
+svelte_files = glob(["*.svelte"])
+
+svelte_names = [f.replace(".svelte", "") for f in svelte_files]
+
+compile_svelte(
+    name = "svelte",
+    srcs = svelte_files,
+)
+
+ts_library(
+    name = "index",
+    srcs = ["index.ts"],
+    deps = [
+        "EditorToolbar",
+        "lib",
+        "//ts/lib",
+        "@npm//svelte",
+        "@npm//svelte2tsx",
+    ],
+)
+
+ts_library(
+    name = "lib",
+    srcs = glob(
+        ["*.ts"],
+        exclude = ["index.ts"],
+    ),
+    deps = [
+        "//ts/lib",
+        "//ts/lib:backend_proto",
+        "@npm//svelte",
+    ],
+)
+
+esbuild(
+    name = "editor-toolbar",
+    srcs = [
+        "//ts:protobuf-shim.js",
+    ],
+    args = [
+        "--global-name=anki",
+        "--inject:ts/protobuf-shim.js",
+    ],
+    entry_point = "index.ts",
+    external = [
+        "protobufjs/light",
+    ],
+    output_css = True,
+    visibility = ["//visibility:public"],
+    deps = [
+        "//ts/lib",
+        "//ts/lib:backend_proto",
+        "//ts/lib:fluent_proto",
+        ":index",
+        "//ts/sass:core_css",
+    ] + svelte_names,
+)
+
+# Tests
+################
+
+prettier_test(
+    name = "format_check",
+    srcs = glob([
+        "*.ts",
+        "*.svelte",
+    ]),
+)
+
+eslint_test(
+    name = "eslint",
+    srcs = glob(
+        [
+            "*.ts",
+        ],
+    ),
+)
+
+svelte_check(
+    name = "svelte_check",
+    srcs = glob([
+        "*.ts",
+        "*.svelte",
+    ]),
+)
+

ts/editor-toolbar/EditorToolbar.svelte

@@ -0,0 +1,10 @@
+<script>
+</script>
+
+<style lang="scss">
+    p {
+        color: red;
+        }
+</style>
+
+<p>Test</p>

ts/editor-toolbar/index.ts

@@ -0,0 +1,23 @@
+import type { SvelteComponent } from "svelte";
+import { setupI18n } from "anki/i18n";
+import { checkNightMode } from "anki/nightmode";
+import EditorToolbarSvelte from "./EditorToolbar.svelte";
+
+class EditorToolbar extends HTMLElement {
+    component?: SvelteComponent;
+
+    async connectedCallback(): Promise<void> {
+        const nightMode = checkNightMode();
+        const i18n = await setupI18n();
+
+        this.component = new EditorToolbarSvelte({
+            target: this,
+            props: {
+                i18n,
+                nightMode,
+            },
+        });
+    }
+}
+
+customElements.define("anki-editor-toolbar", EditorToolbar);

ts/sveltelib/WithBase.svelte

@@ -0,0 +1,13 @@
+<script lang="typescript">
+    import useAsync from "sveltelib/async";
+    import { setupI18n } from "anki/i18n";
+    import { checkNightMode } from "anki/nightmode";
+
+    const nightMode = checkNightMode();
+
+    const { loading, value: i18n } = useAsync(() => setupI18n());
+</script>
+
+{#if !$loading}
+    <slot i18n={$i18n} {nightMode} />
+{/if}