diff --git a/ts/editor-toolbar/dynamicComponents.ts b/ts/editor-toolbar/dynamicComponents.ts new file mode 100644 index 000000000..72fc9de30 --- /dev/null +++ b/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( + LabelButton +); +export const iconButton = dynamicComponent( + IconButton +); +export const commandIconButton = dynamicComponent< + typeof CommandIconButton, + CommandIconButtonProps +>(CommandIconButton); +export const colorPicker = dynamicComponent( + ColorPicker +); + +export const buttonGroup = dynamicComponent( + ButtonGroup +); +export const buttonDropdown = dynamicComponent< + typeof ButtonDropdown, + ButtonDropdownProps +>(ButtonDropdown); + +export const dropdownMenu = dynamicComponent( + DropdownMenu +); +export const dropdownItem = dynamicComponent( + DropdownItem +); + +export const withDropdownMenu = dynamicComponent< + typeof WithDropdownMenu, + WithDropdownMenuProps +>(WithDropdownMenu); diff --git a/ts/editor/cloze.ts b/ts/editor/cloze.ts index ffa5f5101..112c393e6 100644 --- a/ts/editor/cloze.ts +++ b/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(IconButton); - export function getClozeButton(): DynamicSvelteComponent & IconButtonProps { return iconButton({ diff --git a/ts/editor/color.ts b/ts/editor/color.ts index 04d18e82f..2e3a36d55 100644 --- a/ts/editor/color.ts +++ b/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(IconButton); -const colorPicker = dynamicComponent(ColorPicker); -const buttonGroup = dynamicComponent(ButtonGroup); - export function getColorGroup(): DynamicSvelteComponent & ButtonGroupProps { const forecolorButton = iconButton({ diff --git a/ts/editor/formatBlock.ts b/ts/editor/formatBlock.ts index 316f5ff62..785971aff 100644 --- a/ts/editor/formatBlock.ts +++ b/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(IconButton); - -const buttonGroup = dynamicComponent(ButtonGroup); -const buttonDropdown = dynamicComponent( - ButtonDropdown -); - -const withDropdownMenu = dynamicComponent< - typeof WithDropdownMenu, - WithDropdownMenuProps ->(WithDropdownMenu); - const outdentListItem = () => { const currentField = document.activeElement as EditingArea; if (getListItem(currentField.shadowRoot!)) { diff --git a/ts/editor/formatInline.ts b/ts/editor/formatInline.ts index ffa0bea66..09d8ee3b9 100644 --- a/ts/editor/formatInline.ts +++ b/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(IconButton); -const buttonGroup = dynamicComponent(ButtonGroup); - export function getFormatInlineGroup(): DynamicSvelteComponent & ButtonGroupProps { const boldButton = commandIconButton({ diff --git a/ts/editor/notetype.ts b/ts/editor/notetype.ts index f90152ea2..d11aefa79 100644 --- a/ts/editor/notetype.ts +++ b/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(LabelButton); -const buttonGroup = dynamicComponent(ButtonGroup); +import { labelButton, buttonGroup } from "editor-toolbar/dynamicComponents"; export function getNotetypeGroup(): DynamicSvelteComponent & ButtonGroupProps { diff --git a/ts/editor/template.ts b/ts/editor/template.ts index 99b503fcd..0f958cfe7 100644 --- a/ts/editor/template.ts +++ b/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(IconButton); -const withDropdownMenu = dynamicComponent< - typeof WithDropdownMenu, - WithDropdownMenuProps ->(WithDropdownMenu); -const dropdownMenu = dynamicComponent( - DropdownMenu -); -const dropdownItem = dynamicComponent( - DropdownItem -); -const buttonGroup = dynamicComponent(ButtonGroup); - export function getTemplateGroup(): DynamicSvelteComponent & ButtonGroupProps { const attachmentButton = iconButton({ diff --git a/ts/tsconfig.json b/ts/tsconfig.json index bc98946fd..63afaad58 100644 --- a/ts/tsconfig.json +++ b/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/*"],