langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move button implementations from editor-toolbar to editor

Browse Source
This commit is contained in:
Henrik Giesel 2021-04-20 02:07:15 +02:00
parent b1de095162
commit 9803bb19ca
13 changed files with 156 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ts/editor-toolbar/BUILD.bazel
View File

@ -4,7 +4,6 @@ load("//ts:prettier.bzl", "prettier_test")
load("//ts:eslint.bzl", "eslint_test")
load("//ts:esbuild.bzl", "esbuild")
load("//ts:compile_sass.bzl", "compile_sass")
load("//ts:vendor.bzl", "copy_bootstrap_icons", "copy_mdi_icons")
svelte_files = glob(["*.svelte"])
@ -23,7 +22,6 @@ compile_svelte(
compile_sass(
srcs = [
"bootstrap.scss",
"color.scss",
"legacy.scss",
],
group = "local_css",
@ -34,45 +32,6 @@ compile_sass(
visibility = ["//visibility:public"],
)
copy_bootstrap_icons(
name = "bootstrap-icons",
icons = [
# inline formatting
"type-bold.svg",
"type-italic.svg",
"type-underline.svg",
"eraser.svg",
"square-fill.svg",
"paperclip.svg",
"mic.svg",
# block formatting
"paragraph.svg",
"list-ul.svg",
"list-ol.svg",
"text-paragraph.svg",
"justify.svg",
"text-left.svg",
"text-right.svg",
"text-center.svg",
"text-indent-left.svg",
"text-indent-right.svg",
],
visibility = ["//visibility:public"],
)
copy_mdi_icons(
name = "mdi-icons",
icons = [
"format-superscript.svg",
"format-subscript.svg",
"function-variant.svg",
"code-brackets.svg",
"xml.svg",
],
visibility = ["//visibility:public"],
)
ts_library(
name = "editor-toolbar",
module_name = "editor-toolbar",

5
ts/editor-toolbar/editorToolbar.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
import type { EditorToolbar } from ".";
declare global {
var $editorToolbar: EditorToolbar;
}

61
ts/editor-toolbar/index.ts
View File

@ -11,15 +11,8 @@ import { Writable, writable } from "svelte/store";
import EditorToolbarSvelte from "./EditorToolbar.svelte";
import { setupI18n, ModuleName } from "anki/i18n";
import "./bootstrap.css";
import { getNotetypeGroup } from "./notetype";
import { getFormatInlineGroup } from "./formatInline";
import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
import { getColorGroup } from "./color";
import { getTemplateGroup, getTemplateMenus } from "./template";
import { Identifiable, search, add, insert } from "./identifiable";
interface Hideable {
@ -45,7 +38,7 @@ let buttonsResolve: (
) => void;
let menusResolve: (value: Writable<ToolbarItem[]>) => void;
class EditorToolbar extends HTMLElement {
export class EditorToolbar extends HTMLElement {
component?: SvelteComponentDev;
buttonsPromise: Promise<
@ -60,30 +53,20 @@ class EditorToolbar extends HTMLElement {
connectedCallback(): void {
globalThis.$editorToolbar = this;
setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
const buttons = writable([
getNotetypeGroup(),
getFormatInlineGroup(),
getFormatBlockGroup(),
getColorGroup(),
getTemplateGroup(),
]);
const menus = writable([...getTemplateMenus(), ...getFormatBlockMenus()]);
const buttons = writable([]);
const menus = writable([]);
this.component = new EditorToolbarSvelte({
target: this,
props: {
buttons,
menus,
nightMode: document.documentElement.classList.contains(
"night-mode"
),
},
});
buttonsResolve(buttons);
menusResolve(menus);
this.component = new EditorToolbarSvelte({
target: this,
props: {
buttons,
menus,
nightMode: document.documentElement.classList.contains("night-mode"),
},
});
buttonsResolve(buttons);
menusResolve(menus);
}
updateButtonGroup<T>(
@ -202,20 +185,8 @@ 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 */
// @ts-expect-error
export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
/* Exports for add-ons */
export { default as RawButton } from "./RawButton.svelte";
export { default as LabelButton } from "./LabelButton.svelte";
export { default as IconButton } from "./IconButton.svelte";
export { default as CommandIconButton } from "./CommandIconButton.svelte";
export { default as SelectButton } from "./SelectButton.svelte";
export { default as DropdownMenu } from "./DropdownMenu.svelte";
export { default as DropdownItem } from "./DropdownItem.svelte";
export { default as ButtonDropdown } from "./DropdownMenu.svelte";
export { default as WithDropdownMenu } from "./WithDropdownMenu.svelte";

47
ts/editor/BUILD.bazel
View File

@ -2,7 +2,7 @@ load("@npm//@bazel/typescript:index.bzl", "ts_library")
load("//ts:prettier.bzl", "prettier_test")
load("//ts:eslint.bzl", "eslint_test")
load("//ts:esbuild.bzl", "esbuild")
load("//ts:vendor.bzl", "copy_bootstrap_icons")
load("//ts:vendor.bzl", "copy_bootstrap_icons", "copy_mdi_icons")
load("//ts:compile_sass.bzl", "compile_sass")
compile_sass(
@ -19,6 +19,7 @@ compile_sass(
compile_sass(
srcs = [
"fields.scss",
"color.scss",
],
group = "base_css",
visibility = ["//visibility:public"],
@ -35,14 +36,53 @@ ts_library(
tsconfig = "//ts:tsconfig.json",
deps = [
"//ts:image_module_support",
"//ts/lib",
"//ts/sveltelib",
"//ts/html-filter",
"//ts/editor-toolbar",
"@npm//svelte",
],
)
copy_bootstrap_icons(
name = "bootstrap-icons",
icons = ["pin-angle.svg"],
icons = [
"pin-angle.svg",
# inline formatting
"type-bold.svg",
"type-italic.svg",
"type-underline.svg",
"eraser.svg",
"square-fill.svg",
"paperclip.svg",
"mic.svg",
# block formatting
"paragraph.svg",
"list-ul.svg",
"list-ol.svg",
"text-paragraph.svg",
"justify.svg",
"text-left.svg",
"text-right.svg",
"text-center.svg",
"text-indent-left.svg",
"text-indent-right.svg",
],
visibility = ["//visibility:public"],
)
copy_mdi_icons(
name = "mdi-icons",
icons = [
"format-superscript.svg",
"format-subscript.svg",
"function-variant.svg",
"code-brackets.svg",
"xml.svg",
],
visibility = ["//visibility:public"],
)
esbuild(
@ -65,10 +105,9 @@ esbuild(
deps = [
"base_css",
"bootstrap-icons",
"mdi-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",

22
ts/editor/addons.ts Normal file
View File

@ -0,0 +1,22 @@
import { default as RawButton } from "editor-toolbar/RawButton.svelte";
import { default as LabelButton } from "editor-toolbar/LabelButton.svelte";
import { default as IconButton } from "editor-toolbar/IconButton.svelte";
import { default as CommandIconButton } from "editor-toolbar/CommandIconButton.svelte";
import { default as SelectButton } from "editor-toolbar/SelectButton.svelte";
import { default as DropdownMenu } from "editor-toolbar/DropdownMenu.svelte";
import { default as DropdownItem } from "editor-toolbar/DropdownItem.svelte";
import { default as ButtonDropdown } from "editor-toolbar/DropdownMenu.svelte";
import { default as WithDropdownMenu } from "editor-toolbar/WithDropdownMenu.svelte";
export const editorToolbar = {
RawButton,
LabelButton,
IconButton,
CommandIconButton,
SelectButton,
DropdownMenu,
DropdownItem,
ButtonDropdown,
WithDropdownMenu,
};

4
ts/editor-toolbar/cloze.ts → ts/editor/cloze.ts
View File

@ -1,7 +1,7 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import IconButton from "./IconButton.svelte";
import type { IconButtonProps } from "./IconButton";
import IconButton from "editor-toolbar/IconButton.svelte";
import type { IconButtonProps } from "editor-toolbar/IconButton";
import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
import * as tr from "anki/i18n";

0
ts/editor-toolbar/color.scss → ts/editor/color.scss
View File

12
ts/editor-toolbar/color.ts → ts/editor/color.ts
View File

@ -1,11 +1,11 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import IconButton from "./IconButton.svelte";
import type { IconButtonProps } from "./IconButton";
import ColorPicker from "./ColorPicker.svelte";
import type { ColorPickerProps } from "./ColorPicker";
import ButtonGroup from "./ButtonGroup.svelte";
import type { ButtonGroupProps } from "./ButtonGroup";
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 { ButtonGroupProps } from "editor-toolbar/ButtonGroup";
import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
import * as tr from "anki/i18n";

20
ts/editor-toolbar/formatBlock.ts → ts/editor/formatBlock.ts
View File

@ -1,16 +1,16 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import ButtonGroup from "./ButtonGroup.svelte";
import type { ButtonGroupProps } from "./ButtonGroup";
import ButtonDropdown from "./ButtonDropdown.svelte";
import type { ButtonDropdownProps } from "./ButtonDropdown";
import WithDropdownMenu from "./WithDropdownMenu.svelte";
import type { WithDropdownMenuProps } from "./WithDropdownMenu";
import ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
import type { ButtonGroupProps } from "editor-toolbar/ButtonGroup";
import 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 "./CommandIconButton.svelte";
import type { CommandIconButtonProps } from "./CommandIconButton";
import IconButton from "./IconButton.svelte";
import type { IconButtonProps } from "./IconButton";
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 { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
import * as tr from "anki/i18n";

8
ts/editor-toolbar/formatInline.ts → ts/editor/formatInline.ts
View File

@ -1,9 +1,9 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import CommandIconButton from "./CommandIconButton.svelte";
import type { CommandIconButtonProps } from "./CommandIconButton";
import ButtonGroup from "./ButtonGroup.svelte";
import type { ButtonGroupProps } from "./ButtonGroup";
import CommandIconButton from "editor-toolbar/CommandIconButton.svelte";
import type { CommandIconButtonProps } from "editor-toolbar/CommandIconButton";
import ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
import type { ButtonGroupProps } from "editor-toolbar/ButtonGroup";
import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
import * as tr from "anki/i18n";

34
ts/editor/index.ts
View File

@ -3,6 +3,8 @@
import { filterHTML } from "html-filter";
import { updateActiveButtons, disableButtons } from "editor-toolbar";
import { setupI18n, ModuleName } from "anki/i18n";
import "./fields.css";
import { caretToEnd } from "./helpers";
@ -17,6 +19,8 @@ export { setNoteId, getNoteId } from "./noteId";
export { saveNow } from "./changeTimer";
export { wrap, wrapIntoText } from "./wrap";
export * from "./addons";
declare global {
interface Selection {
modify(s: string, t: string, u: string): void;
@ -162,3 +166,33 @@ export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void
updateActiveButtons();
}
}
////////// EDITOR TOOLBAR
import { getNotetypeGroup } from "./notetype";
import { getFormatInlineGroup } from "./formatInline";
import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
import { getColorGroup } from "./color";
import { getTemplateGroup, getTemplateMenus } from "./template";
const i18n = setupI18n({ modules: [ModuleName.EDITING] });
document.addEventListener("DOMContentLoaded", () => {
i18n.then(() => {
$editorToolbar.buttonsPromise.then((buttons) => {
buttons.update(() => [
getNotetypeGroup(),
getFormatInlineGroup(),
getFormatBlockGroup(),
getColorGroup(),
getTemplateGroup(),
]);
return buttons;
});
$editorToolbar.menusPromise.then((menus) => {
menus.update(() => [...getFormatBlockMenus(), ...getTemplateMenus()]);
return menus;
});
});
});

8
ts/editor-toolbar/notetype.ts → ts/editor/notetype.ts
View File

@ -1,9 +1,9 @@
// 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 ButtonGroup from "./ButtonGroup.svelte";
import type { ButtonGroupProps } from "./ButtonGroup";
import LabelButton from "editor-toolbar/LabelButton.svelte";
import type { LabelButtonProps } from "editor-toolbar/LabelButton";
import ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
import type { ButtonGroupProps } from "editor-toolbar/ButtonGroup";
import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
import { bridgeCommand } from "anki/bridgecommand";

20
ts/editor-toolbar/template.ts → ts/editor/template.ts
View File

@ -1,15 +1,15 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import IconButton from "./IconButton.svelte";
import type { IconButtonProps } from "./IconButton";
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 ButtonGroup from "./ButtonGroup.svelte";
import type { ButtonGroupProps } from "./ButtonGroup";
import IconButton from "editor-toolbar/IconButton.svelte";
import type { IconButtonProps } from "editor-toolbar/IconButton";
import 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 { ButtonGroupProps } from "editor-toolbar/ButtonGroup";
import { bridgeCommand } from "anki/bridgecommand";
import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";