Add labels and titles to all buttons

qt/aqt/editor.py

@@ -1114,6 +1114,9 @@ class Editor:
         paste=onPaste,
         cutOrCopy=onCutOrCopy,
         htmlEdit=onHtmlEdit,
+        mathjaxInline=insertMathjaxInline,
+        mathjaxBlock=insertMathjaxBlock,
+        mathjaxChemistry=insertMathjaxChemistry,
     )
 
 

ts/editor-toolbar/color.ts

@@ -1,7 +1,7 @@
 import IconButton from "./IconButton.svelte";
 import ColorPicker from "./ColorPicker.svelte";
 
-import { lazyProperties } from "anki/lazy";
+import { withLazyProperties } from "anki/lazy";
 import * as tr from "anki/i18n";
 
 import squareFillIcon from "./square-fill.svg";
@@ -21,25 +21,27 @@ function wrapWithForecolor(color: string): void {
     document.execCommand("forecolor", false, color);
 }
 
-const forecolorButton = {
-    component: IconButton,
-    icon: squareFillIcon,
-    className: "forecolor",
-    onClick: () => wrapWithForecolor(getForecolor()),
-};
+const forecolorButton = withLazyProperties(
+    {
+        component: IconButton,
+        icon: squareFillIcon,
+        className: "forecolor",
+        onClick: () => wrapWithForecolor(getForecolor()),
+    },
+    {
+        title: tr.editingSetForegroundColourF7,
+    }
+);
 
-lazyProperties(forecolorButton, {
-    title: tr.editingSetForegroundColourF7,
-});
-
-const colorpickerButton = {
-    component: ColorPicker,
-    className: "rainbow",
-    onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
-};
-
-lazyProperties(colorpickerButton, {
-    title: tr.editingChangeColourF8,
-});
+const colorpickerButton = withLazyProperties(
+    {
+        component: ColorPicker,
+        className: "rainbow",
+        onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
+    },
+    {
+        title: tr.editingChangeColourF8,
+    }
+);
 
 export const colorButtons = [forecolorButton, colorpickerButton];

ts/editor-toolbar/format.ts

@@ -1,6 +1,6 @@
 import CommandIconButton from "./CommandIconButton.svelte";
 
-import { lazyProperties } from "anki/lazy";
+import { withLazyProperties } from "anki/lazy";
 import * as tr from "anki/i18n";
 
 import boldIcon from "./type-bold.svg";
@@ -10,66 +10,72 @@ import superscriptIcon from "./format-superscript.svg";
 import subscriptIcon from "./format-subscript.svg";
 import eraserIcon from "./eraser.svg";
 
-const boldButton = {
-    component: CommandIconButton,
-    icon: boldIcon,
-    command: "bold",
-};
+const boldButton = withLazyProperties(
+    {
+        component: CommandIconButton,
+        icon: boldIcon,
+        command: "bold",
+    },
+    {
+        title: tr.editingBoldTextCtrlandb,
+    }
+);
 
-lazyProperties(boldButton, {
-    title: tr.editingBoldTextCtrlandb,
-});
+const italicButton = withLazyProperties(
+    {
+        component: CommandIconButton,
+        icon: italicIcon,
+        command: "italic",
+    },
+    {
+        title: tr.editingItalicTextCtrlandi,
+    }
+);
 
-const italicButton = {
-    component: CommandIconButton,
-    icon: italicIcon,
-    command: "italic",
-};
+const underlineButton = withLazyProperties(
+    {
+        component: CommandIconButton,
+        icon: underlineIcon,
+        command: "underline",
+    },
+    {
+        title: tr.editingUnderlineTextCtrlandu,
+    }
+);
 
-lazyProperties(italicButton, {
-    title: tr.editingItalicTextCtrlandi,
-});
+const superscriptButton = withLazyProperties(
+    {
+        component: CommandIconButton,
+        icon: superscriptIcon,
+        command: "superscript",
+    },
+    {
+        title: tr.editingSuperscriptCtrlandand,
+    }
+);
 
-const underlineButton = {
-    component: CommandIconButton,
-    icon: underlineIcon,
-    command: "underline",
-};
+const subscriptButton = withLazyProperties(
+    {
+        component: CommandIconButton,
+        icon: subscriptIcon,
+        command: "subscript",
+    },
+    {
+        title: tr.editingSubscriptCtrland,
+    }
+);
 
-lazyProperties(underlineButton, {
-    title: tr.editingUnderlineTextCtrlandu,
-});
-
-const superscriptButton = {
-    component: CommandIconButton,
-    icon: superscriptIcon,
-    command: "superscript",
-};
-
-lazyProperties(superscriptButton, {
-    title: tr.editingSuperscriptCtrlandand,
-});
-
-const subscriptButton = {
-    component: CommandIconButton,
-    icon: subscriptIcon,
-    command: "subscript",
-};
-
-lazyProperties(subscriptButton, {
-    title: tr.editingSubscriptCtrland,
-});
-
-const removeFormatButton = {
-    component: CommandIconButton,
-    icon: eraserIcon,
-    command: "removeFormat",
-    activatable: false,
-};
-
-lazyProperties(removeFormatButton, {
-    title: tr.editingRemoveFormattingCtrlandr,
-});
+const removeFormatButton = withLazyProperties(
+    {
+        component: CommandIconButton,
+        icon: eraserIcon,
+        command: "removeFormat",
+        activatable: false,
+    },
+    {
+        title: tr.editingRemoveFormattingCtrlandr,
+    }
+);
 
 export const formatButtons = [
     boldButton,

ts/editor-toolbar/notetype.ts

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

ts/editor-toolbar/template.ts

@@ -4,7 +4,7 @@ import DropdownItem from "./DropdownItem.svelte";
 import WithDropdownMenu from "./WithDropdownMenu.svelte";
 
 import { bridgeCommand } from "anki/bridgecommand";
-import { lazyProperties } from "anki/lazy";
+import { withLazyProperties } from "anki/lazy";
 import * as tr from "anki/i18n";
 
 import paperclipIcon from "./paperclip.svg";
@@ -29,31 +29,34 @@ function onHtmlEdit(): void {
     bridgeCommand("htmlEdit");
 }
 
-const attachmentButton = {
-    component: IconButton,
-    icon: paperclipIcon,
-    onClick: onAttachment,
-};
+const attachmentButton = withLazyProperties(
+    {
+        component: IconButton,
+        icon: paperclipIcon,
+        onClick: onAttachment,
+    },
+    {
+        title: tr.editingAttachPicturesaudiovideoF3,
+    }
+);
 
-lazyProperties(attachmentButton, {
-    title: tr.editingAttachPicturesaudiovideoF3,
-});
+const recordButton = withLazyProperties(
+    { component: IconButton, icon: micIcon, onClick: onRecord },
+    {
+        title: tr.editingRecordAudioF5,
+    }
+);
 
-const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
-
-lazyProperties(recordButton, {
-    title: tr.editingRecordAudioF5,
-});
-
-const clozeButton = {
-    component: IconButton,
-    icon: bracketsIcon,
-    onClick: onCloze,
-};
-
-lazyProperties(clozeButton, {
-    title: tr.editingClozeDeletionCtrlandshiftandc,
-});
+const clozeButton = withLazyProperties(
+    {
+        component: IconButton,
+        icon: bracketsIcon,
+        onClick: onCloze,
+    },
+    {
+        title: tr.editingClozeDeletionCtrlandshiftandc,
+    }
+);
 
 const mathjaxButton = {
     component: IconButton,
@@ -66,7 +69,21 @@ const mathjaxMenu = {
     component: DropdownMenu,
     id: mathjaxMenuId,
     menuItems: [
-        { component: DropdownItem, label: "Foo", onClick: () => console.log("foo") },
+        withLazyProperties(
+            { component: DropdownItem, onClick: () => bridgeCommand("mathjaxInline") },
+            { label: tr.editingMathjaxInline }
+        ),
+        withLazyProperties(
+            { component: DropdownItem, onClick: () => bridgeCommand("mathjaxBlock") },
+            { label: tr.editingMathjaxBlock }
+        ),
+        withLazyProperties(
+            {
+                component: DropdownItem,
+                onClick: () => bridgeCommand("mathjaxChemistry"),
+            },
+            { label: tr.editingMathjaxChemistry }
+        ),
     ],
 };
 
@@ -76,15 +93,16 @@ const mathjaxButtonWithMenu = {
     menuId: mathjaxMenuId,
 };
 
-const htmlButton = {
-    component: IconButton,
-    icon: xmlIcon,
-    onClick: onHtmlEdit,
-};
-
-lazyProperties(htmlButton, {
-    title: tr.editingHtmlEditor,
-});
+const htmlButton = withLazyProperties(
+    {
+        component: IconButton,
+        icon: xmlIcon,
+        onClick: onHtmlEdit,
+    },
+    {
+        title: tr.editingHtmlEditor,
+    }
+);
 
 export const templateButtons = [
     attachmentButton,

ts/lib/lazy.ts

@@ -23,3 +23,29 @@ export function lazyProperties(
 
     Object.defineProperties(object, propertyDescriptorMap);
 }
+
+export function withLazyProperties(
+    object: Record<string, unknown>,
+    properties: Record<string, () => unknown>
+): Record<string, unknown> {
+    const propertyDescriptorMap = Object.entries(properties)
+        .map(([name, getter]: [string, () => unknown]): [
+            string,
+            PropertyDescriptor
+        ] => [
+            name,
+            {
+                get: getter,
+                enumerable: true,
+            },
+        ])
+        .reduce(
+            (
+                accumulator: PropertyDescriptorMap,
+                [name, property]
+            ): PropertyDescriptorMap => ((accumulator[name] = property), accumulator),
+            {}
+        );
+
+    return Object.defineProperties(object, propertyDescriptorMap);
+}