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 = {
+const forecolorButton = withLazyProperties(
-    component: IconButton,
+    {
-    icon: squareFillIcon,
+        component: IconButton,
-    className: "forecolor",
+        icon: squareFillIcon,
-    onClick: () => wrapWithForecolor(getForecolor()),
+        className: "forecolor",
-};
+        onClick: () => wrapWithForecolor(getForecolor()),
+    },
+    {
+        title: tr.editingSetForegroundColourF7,
+    }
+);
 
-lazyProperties(forecolorButton, {
+const colorpickerButton = withLazyProperties(
-    title: tr.editingSetForegroundColourF7,
+    {
-});
+        component: ColorPicker,
-
+        className: "rainbow",
-const colorpickerButton = {
+        onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
-    component: ColorPicker,
+    },
-    className: "rainbow",
+    {
-    onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
+        title: tr.editingChangeColourF8,
-};
+    }
-
+);
-lazyProperties(colorpickerButton, {
-    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 = {
+const boldButton = withLazyProperties(
-    component: CommandIconButton,
+    {
-    icon: boldIcon,
+        component: CommandIconButton,
-    command: "bold",
+        icon: boldIcon,
-};
+        command: "bold",
+    },
+    {
+        title: tr.editingBoldTextCtrlandb,
+    }
+);
 
-lazyProperties(boldButton, {
+const italicButton = withLazyProperties(
-    title: tr.editingBoldTextCtrlandb,
+    {
-});
+        component: CommandIconButton,
+        icon: italicIcon,
+        command: "italic",
+    },
+    {
+        title: tr.editingItalicTextCtrlandi,
+    }
+);
 
-const italicButton = {
+const underlineButton = withLazyProperties(
-    component: CommandIconButton,
+    {
-    icon: italicIcon,
+        component: CommandIconButton,
-    command: "italic",
+        icon: underlineIcon,
-};
+        command: "underline",
+    },
+    {
+        title: tr.editingUnderlineTextCtrlandu,
+    }
+);
 
-lazyProperties(italicButton, {
+const superscriptButton = withLazyProperties(
-    title: tr.editingItalicTextCtrlandi,
+    {
-});
+        component: CommandIconButton,
+        icon: superscriptIcon,
+        command: "superscript",
+    },
+    {
+        title: tr.editingSuperscriptCtrlandand,
+    }
+);
 
-const underlineButton = {
+const subscriptButton = withLazyProperties(
-    component: CommandIconButton,
+    {
-    icon: underlineIcon,
+        component: CommandIconButton,
-    command: "underline",
+        icon: subscriptIcon,
-};
+        command: "subscript",
+    },
+    {
+        title: tr.editingSubscriptCtrland,
+    }
+);
 
-lazyProperties(underlineButton, {
+const removeFormatButton = withLazyProperties(
-    title: tr.editingUnderlineTextCtrlandu,
+    {
-});
+        component: CommandIconButton,
-
+        icon: eraserIcon,
-const superscriptButton = {
+        command: "removeFormat",
-    component: CommandIconButton,
+        activatable: false,
-    icon: superscriptIcon,
+    },
-    command: "superscript",
+    {
-};
+        title: tr.editingRemoveFormattingCtrlandr,
-
+    }
-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,
-});
 
 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 = {
+import { bridgeCommand } from "anki/bridgecommand";
-    component: LabelButton,
+import { withLazyProperties } from "anki/lazy";
-    onClick: () => bridgeCommand("fields"),
+import * as tr from "anki/i18n";
-    disables: false,
-};
 
-lazyProperties(fieldsButton, {
+const fieldsButton = withLazyProperties(
-    label: () => `${tr.editingFields()}...`,
+    {
-    title: tr.editingCustomizeFields,
+        component: LabelButton,
-});
+        onClick: () => bridgeCommand("fields"),
+        disables: false,
+    },
+    {
+        label: () => `${tr.editingFields()}...`,
+        title: tr.editingCustomizeFields,
+    }
+);
 
-const cardsButton = {
+const cardsButton = withLazyProperties(
-    component: LabelButton,
+    {
-    onClick: () => bridgeCommand("cards"),
+        component: LabelButton,
-    disables: false,
+        onClick: () => bridgeCommand("cards"),
-};
+        disables: false,
-
+    },
-lazyProperties(cardsButton, {
+    {
-    label: () => `${tr.editingCards()}...`,
+        label: () => `${tr.editingCards()}...`,
-    title: tr.editingCustomizeCardTemplatesCtrlandl,
+        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 = {
+const attachmentButton = withLazyProperties(
-    component: IconButton,
+    {
-    icon: paperclipIcon,
+        component: IconButton,
-    onClick: onAttachment,
+        icon: paperclipIcon,
-};
+        onClick: onAttachment,
+    },
+    {
+        title: tr.editingAttachPicturesaudiovideoF3,
+    }
+);
 
-lazyProperties(attachmentButton, {
+const recordButton = withLazyProperties(
-    title: tr.editingAttachPicturesaudiovideoF3,
+    { component: IconButton, icon: micIcon, onClick: onRecord },
-});
+    {
+        title: tr.editingRecordAudioF5,
+    }
+);
 
-const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
+const clozeButton = withLazyProperties(
-
+    {
-lazyProperties(recordButton, {
+        component: IconButton,
-    title: tr.editingRecordAudioF5,
+        icon: bracketsIcon,
-});
+        onClick: onCloze,
-
+    },
-const clozeButton = {
+    {
-    component: IconButton,
+        title: tr.editingClozeDeletionCtrlandshiftandc,
-    icon: bracketsIcon,
+    }
-    onClick: onCloze,
+);
-};
-
-lazyProperties(clozeButton, {
-    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 = {
+const htmlButton = withLazyProperties(
-    component: IconButton,
+    {
-    icon: xmlIcon,
+        component: IconButton,
-    onClick: onHtmlEdit,
+        icon: xmlIcon,
-};
+        onClick: onHtmlEdit,
-
+    },
-lazyProperties(htmlButton, {
+    {
-    title: tr.editingHtmlEditor,
+        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);
+}