Move logic from index.ts to their individual files

ts/editor-toolbar/color.ts

@@ -17,15 +17,17 @@ function wrapWithForecolor(color: string): void {
     document.execCommand("forecolor", false, color);
 }
 
-export const forecolorButton = {
+const forecolorButton = {
     component: IconButton,
     icon: squareFillIcon,
     className: "forecolor",
     onClick: () => wrapWithForecolor(getForecolor()),
 };
 
-export const colorpickerButton = {
+const colorpickerButton = {
     component: ColorPicker,
     className: "rainbow",
     onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
 };
+
+export const colorButtons = [forecolorButton, colorpickerButton];

ts/editor-toolbar/format.ts

@@ -7,39 +7,48 @@ import superscriptIcon from "./format-superscript.svg";
 import subscriptIcon from "./format-subscript.svg";
 import eraserIcon from "./eraser.svg";
 
-export const boldButton = {
+const boldButton = {
     component: CommandIconButton,
     icon: boldIcon,
     command: "bold",
 };
 
-export const italicButton = {
+const italicButton = {
     component: CommandIconButton,
     icon: italicIcon,
     command: "italic",
 };
 
-export const underlineButton = {
+const underlineButton = {
     component: CommandIconButton,
     icon: underlineIcon,
     command: "underline",
 };
 
-export const superscriptButton = {
+const superscriptButton = {
     component: CommandIconButton,
     icon: superscriptIcon,
     command: "superscript",
 };
 
-export const subscriptButton = {
+const subscriptButton = {
     component: CommandIconButton,
     icon: subscriptIcon,
     command: "subscript",
 };
 
-export const eraserButton = {
+const eraserButton = {
     component: CommandIconButton,
     icon: eraserIcon,
     command: "removeFormat",
     highlightable: false,
 };
+
+export const formatButtons = [
+    boldButton,
+    italicButton,
+    underlineButton,
+    superscriptButton,
+    subscriptButton,
+    eraserButton,
+];

ts/editor-toolbar/index.ts

@@ -6,63 +6,18 @@ import * as tr from "anki/i18n";
 
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
-import DropdownMenu from "./DropdownMenu.svelte";
-import WithDropdownMenu from "./WithDropdownMenu.svelte";
-import SelectButton from "./SelectButton.svelte";
-
 // @ts-ignore
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
 import { Writable, writable } from "svelte/store";
 
-import { fieldsButton, cardsButton } from "./notetype";
+import { notetypeButtons } from "./notetype";
+import { formatButtons } from "./format";
+import { colorButtons } from "./color";
+import { templateButtons, templateMenus } from "./template";
 
-import {
-    boldButton,
-    italicButton,
-    underlineButton,
-    superscriptButton,
-    subscriptButton,
-    eraserButton,
-} from "./format";
+const defaultMenus = [...templateMenus];
 
-import { forecolorButton, colorpickerButton } from "./color";
-
-import {
-    attachmentButton,
-    recordButton,
-    clozeButton,
-    mathjaxButton,
-    htmlButton,
-} from "./extra";
-
-const defaultMenus = [
-    {
-        component: DropdownMenu,
-        id: "mathjaxMenu",
-        menuItems: [{ label: "Foo", onClick: () => console.log("foo") }],
-    },
-];
-
-const defaultButtons = [
-    [fieldsButton, cardsButton],
-    [
-        boldButton,
-        italicButton,
-        underlineButton,
-        superscriptButton,
-        subscriptButton,
-        eraserButton,
-    ],
-    [forecolorButton, colorpickerButton],
-    [
-        attachmentButton,
-        recordButton,
-        clozeButton,
-        { component: WithDropdownMenu, menuId: "mathjaxMenu", button: mathjaxButton },
-        htmlButton,
-        { component: SelectButton, options: [{ label: "Test" }, { label: "Test2" }] },
-    ],
-];
+const defaultButtons = [notetypeButtons, formatButtons, colorButtons, templateButtons];
 
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponent;

ts/editor-toolbar/notetype.ts

@@ -1,26 +1,28 @@
 import { bridgeCommand } from "anki/bridgecommand";
-import { lazyLoaded } from "anki/lazy";
+import { lazyProperties } from "anki/lazy";
 import * as tr from "anki/i18n";
 import LabelButton from "./LabelButton.svelte";
 
-export const fieldsButton = {
+const fieldsButton = {
     component: LabelButton,
     onClick: () => bridgeCommand("fields"),
     disables: false,
 };
 
-lazyLoaded(fieldsButton, {
+lazyProperties(fieldsButton, {
     label: () => `${tr.editingFields()}...`,
     title: tr.editingCustomizeFields,
 });
 
-export const cardsButton = {
+const cardsButton = {
     component: LabelButton,
     onClick: () => bridgeCommand("cards"),
     disables: false,
 };
 
-lazyLoaded(cardsButton, {
+lazyProperties(cardsButton, {
     label: () => `${tr.editingCards()}...`,
     title: tr.editingCustomizeCardTemplatesCtrlandl,
 });
+
+export const notetypeButtons = [fieldsButton, cardsButton];

ts/editor-toolbar/template.ts

@@ -1,6 +1,7 @@
 import { bridgeCommand } from "anki/bridgecommand";
 
 import IconButton from "./IconButton.svelte";
+import DropdownMenu from "./DropdownMenu.svelte";
 
 import paperclipIcon from "./paperclip.svg";
 import micIcon from "./mic.svg";
@@ -24,27 +25,43 @@ function onHtmlEdit(): void {
     bridgeCommand("htmlEdit");
 }
 
-export const attachmentButton = {
+const attachmentButton = {
     component: IconButton,
     icon: paperclipIcon,
     onClick: onAttachment,
 };
 
-export const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
+const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
 
-export const clozeButton = {
+const clozeButton = {
     component: IconButton,
     icon: bracketsIcon,
     onClick: onCloze,
 };
 
-export const mathjaxButton = {
+const mathjaxButton = {
     component: IconButton,
     icon: functionIcon,
 };
 
-export const htmlButton = {
+const mathjaxMenu = {
+    component: DropdownMenu,
+    id: "mathjaxMenu",
+    menuItems: [{ label: "Foo", onClick: () => console.log("foo") }],
+};
+
+const htmlButton = {
     component: IconButton,
     icon: xmlIcon,
     onClick: onHtmlEdit,
 };
+
+export const templateButtons = [
+    attachmentButton,
+    recordButton,
+    clozeButton,
+    mathjaxButton,
+    htmlButton,
+];
+
+export const templateMenus = [mathjaxMenu];

ts/lib/lazy.ts

@@ -1,4 +1,4 @@
-export function lazyLoaded(
+export function lazyProperties(
     object: Record<string, unknown>,
     properties: Record<string, () => unknown>
 ): void {