Move dynamic component initialization logic from editor to editor-toolbar

ts/editor-toolbar/dynamicComponents.ts

@@ -0,0 +1,57 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+import LabelButton from "./LabelButton.svelte";
+import type { LabelButtonProps } from "./LabelButton";
+import IconButton from "./IconButton.svelte";
+import type { IconButtonProps } from "./IconButton";
+import CommandIconButton from "./CommandIconButton.svelte";
+import type { CommandIconButtonProps } from "./CommandIconButton";
+import ColorPicker from "./ColorPicker.svelte";
+import type { ColorPickerProps } from "./ColorPicker";
+import ButtonGroup from "./ButtonGroup.svelte";
+import type { ButtonGroupProps } from "./ButtonGroup";
+
+import ButtonDropdown from "./ButtonDropdown.svelte";
+import type { ButtonDropdownProps } from "./ButtonDropdown";
+import DropdownMenu from "./DropdownMenu.svelte";
+import type { DropdownMenuProps } from "./DropdownMenu";
+import DropdownItem from "./DropdownItem.svelte";
+import type { DropdownItemProps } from "./DropdownItem";
+import WithDropdownMenu from "./WithDropdownMenu.svelte";
+import type { WithDropdownMenuProps } from "./WithDropdownMenu";
+
+import { dynamicComponent } from "sveltelib/dynamicComponent";
+
+export const labelButton = dynamicComponent<typeof LabelButton, LabelButtonProps>(
+    LabelButton
+);
+export const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(
+    IconButton
+);
+export const commandIconButton = dynamicComponent<
+    typeof CommandIconButton,
+    CommandIconButtonProps
+>(CommandIconButton);
+export const colorPicker = dynamicComponent<typeof ColorPicker, ColorPickerProps>(
+    ColorPicker
+);
+
+export const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(
+    ButtonGroup
+);
+export const buttonDropdown = dynamicComponent<
+    typeof ButtonDropdown,
+    ButtonDropdownProps
+>(ButtonDropdown);
+
+export const dropdownMenu = dynamicComponent<typeof DropdownMenu, DropdownMenuProps>(
+    DropdownMenu
+);
+export const dropdownItem = dynamicComponent<typeof DropdownItem, DropdownItemProps>(
+    DropdownItem
+);
+
+export const withDropdownMenu = dynamicComponent<
+    typeof WithDropdownMenu,
+    WithDropdownMenuProps
+>(WithDropdownMenu);

ts/editor/cloze.ts

@@ -1,18 +1,20 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import IconButton from "editor-toolbar/IconButton.svelte";
+import type IconButton from "editor-toolbar/IconButton.svelte";
 import type { IconButtonProps } from "editor-toolbar/IconButton";
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
-import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
+import { iconButton } from "editor-toolbar/dynamicComponents";
 
 import bracketsIcon from "./code-brackets.svg";
 
+import { forEditorField } from ".";
+
 const clozePattern = /\{\{c(\d+)::/gu;
 function getCurrentHighestCloze(increment: boolean): number {
     let highest = 0;
 
-    // @ts-expect-error
     forEditorField([], (field) => {
         const matches = field.editingArea.editable.fieldHTML.matchAll(clozePattern);
         highest = Math.max(
@@ -35,8 +37,6 @@ function onCloze(event: MouseEvent): void {
     wrap(`{{c${highestCloze}::`, "}}");
 }
 
-const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButton);
-
 export function getClozeButton(): DynamicSvelteComponent<typeof IconButton> &
     IconButtonProps {
     return iconButton({

ts/editor/color.ts

@@ -1,13 +1,10 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import IconButton from "editor-toolbar/IconButton.svelte";
-import type { IconButtonProps } from "editor-toolbar/IconButton";
-import ColorPicker from "editor-toolbar/ColorPicker.svelte";
-import type { ColorPickerProps } from "editor-toolbar/ColorPicker";
-import ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
+import type ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
 import type { ButtonGroupProps } from "editor-toolbar/ButtonGroup";
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
-import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
+import { iconButton, colorPicker, buttonGroup } from "editor-toolbar/dynamicComponents";
 import * as tr from "anki/i18n";
 
 import squareFillIcon from "./square-fill.svg";
@@ -27,10 +24,6 @@ function wrapWithForecolor(color: string): void {
     document.execCommand("forecolor", false, color);
 }
 
-const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButton);
-const colorPicker = dynamicComponent<typeof ColorPicker, ColorPickerProps>(ColorPicker);
-const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
-
 export function getColorGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     ButtonGroupProps {
     const forecolorButton = iconButton({

ts/editor/formatBlock.ts

@@ -1,21 +1,21 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
+import type ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
 import type { ButtonGroupProps } from "editor-toolbar/ButtonGroup";
-import ButtonDropdown from "editor-toolbar/ButtonDropdown.svelte";
+import type ButtonDropdown from "editor-toolbar/ButtonDropdown.svelte";
 import type { ButtonDropdownProps } from "editor-toolbar/ButtonDropdown";
-import WithDropdownMenu from "editor-toolbar/WithDropdownMenu.svelte";
-import type { WithDropdownMenuProps } from "editor-toolbar/WithDropdownMenu";
-
-import CommandIconButton from "editor-toolbar/CommandIconButton.svelte";
-import type { CommandIconButtonProps } from "editor-toolbar/CommandIconButton";
-import IconButton from "editor-toolbar/IconButton.svelte";
-import type { IconButtonProps } from "editor-toolbar/IconButton";
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
 import type { EditingArea } from "./editingArea";
 
-import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
+import {
+    commandIconButton,
+    iconButton,
+    buttonGroup,
+    buttonDropdown,
+    withDropdownMenu,
+} from "editor-toolbar/dynamicComponents";
 
 import { getListItem, getParagraph } from "./helpers";
 
@@ -32,23 +32,6 @@ import justifyCenterIcon from "./text-center.svg";
 import indentIcon from "./text-indent-left.svg";
 import outdentIcon from "./text-indent-right.svg";
 
-const commandIconButton = dynamicComponent<
-    typeof CommandIconButton,
-    CommandIconButtonProps
->(CommandIconButton);
-
-const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButton);
-
-const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
-const buttonDropdown = dynamicComponent<typeof ButtonDropdown, ButtonDropdownProps>(
-    ButtonDropdown
-);
-
-const withDropdownMenu = dynamicComponent<
-    typeof WithDropdownMenu,
-    WithDropdownMenuProps
->(WithDropdownMenu);
-
 const outdentListItem = () => {
     const currentField = document.activeElement as EditingArea;
     if (getListItem(currentField.shadowRoot!)) {

ts/editor/formatInline.ts

@@ -1,14 +1,15 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import CommandIconButton from "editor-toolbar/CommandIconButton.svelte";
-import type { CommandIconButtonProps } from "editor-toolbar/CommandIconButton";
-import IconButton from "editor-toolbar/IconButton.svelte";
-import type { IconButtonProps } from "editor-toolbar/IconButton";
-import ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
+import type ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
 import type { ButtonGroupProps } from "editor-toolbar/ButtonGroup";
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
-import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
+import {
+    commandIconButton,
+    iconButton,
+    buttonGroup,
+} from "editor-toolbar/dynamicComponents";
 
 import boldIcon from "./type-bold.svg";
 import italicIcon from "./type-italic.svg";
@@ -17,13 +18,6 @@ import superscriptIcon from "./format-superscript.svg";
 import subscriptIcon from "./format-subscript.svg";
 import eraserIcon from "./eraser.svg";
 
-const commandIconButton = dynamicComponent<
-    typeof CommandIconButton,
-    CommandIconButtonProps
->(CommandIconButton);
-const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButton);
-const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
-
 export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     ButtonGroupProps {
     const boldButton = commandIconButton({

ts/editor/notetype.ts

@@ -1,16 +1,12 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import LabelButton from "editor-toolbar/LabelButton.svelte";
-import type { LabelButtonProps } from "editor-toolbar/LabelButton";
-import ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
+import type ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
 import type { ButtonGroupProps } from "editor-toolbar/ButtonGroup";
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
-import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
 import { bridgeCommand } from "anki/bridgecommand";
 import * as tr from "anki/i18n";
-
-const labelButton = dynamicComponent<typeof LabelButton, LabelButtonProps>(LabelButton);
-const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
+import { labelButton, buttonGroup } from "editor-toolbar/dynamicComponents";
 
 export function getNotetypeGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     ButtonGroupProps {

ts/editor/template.ts

@@ -1,18 +1,19 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import IconButton from "editor-toolbar/IconButton.svelte";
-import type { IconButtonProps } from "editor-toolbar/IconButton";
-import DropdownMenu from "editor-toolbar/DropdownMenu.svelte";
+import type DropdownMenu from "editor-toolbar/DropdownMenu.svelte";
 import type { DropdownMenuProps } from "editor-toolbar/DropdownMenu";
-import DropdownItem from "editor-toolbar/DropdownItem.svelte";
-import type { DropdownItemProps } from "editor-toolbar/DropdownItem";
-import WithDropdownMenu from "editor-toolbar/WithDropdownMenu.svelte";
-import type { WithDropdownMenuProps } from "editor-toolbar/WithDropdownMenu";
-import ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
+import type ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
 import type { ButtonGroupProps } from "editor-toolbar/ButtonGroup";
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
 import { bridgeCommand } from "anki/bridgecommand";
-import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
+import {
+    iconButton,
+    withDropdownMenu,
+    dropdownMenu,
+    dropdownItem,
+    buttonGroup,
+} from "editor-toolbar/dynamicComponents";
 import * as tr from "anki/i18n";
 
 import { wrap } from "./wrap";
@@ -38,19 +39,6 @@ function onHtmlEdit(): void {
 
 const mathjaxMenuId = "mathjaxMenu";
 
-const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButton);
-const withDropdownMenu = dynamicComponent<
-    typeof WithDropdownMenu,
-    WithDropdownMenuProps
->(WithDropdownMenu);
-const dropdownMenu = dynamicComponent<typeof DropdownMenu, DropdownMenuProps>(
-    DropdownMenu
-);
-const dropdownItem = dynamicComponent<typeof DropdownItem, DropdownItemProps>(
-    DropdownItem
-);
-const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
-
 export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     ButtonGroupProps {
     const attachmentButton = iconButton({

ts/tsconfig.json

@@ -3,7 +3,14 @@
     "compilerOptions": {
         "target": "es6",
         "module": "es6",
-        "lib": ["es2017", "es2019.array", "es2018.promise", "dom", "dom.iterable"],
+        "lib": [
+            "es2017",
+            "es2020.string",
+            "es2019.array",
+            "es2018.promise",
+            "dom",
+            "dom.iterable"
+        ],
         "baseUrl": ".",
         "paths": {
             "anki/*": ["../bazel-bin/ts/lib/*"],