Add titles to buttons with lazyProperties

ts/editor-toolbar/ColorPicker.svelte

@@ -2,6 +2,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
+    export let title: string;
 
     export let onChange: (event: ChangeEvent) => void;
 </script>
@@ -41,6 +42,12 @@
     }
 </style>
 
-<button tabindex="-1" {id} class={className} {...props} on:mousedown|preventDefault>
+<button
+    tabindex="-1"
+    {id}
+    class={className}
+    {...props}
+    {title}
+    on:mousedown|preventDefault>
     <span> <input type="color" on:change={onChange} /> </span>
 </button>

ts/editor-toolbar/CommandIconButton.svelte

@@ -39,6 +39,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
+    export let title: string;
 
     export let icon = "";
     export let command: string;
@@ -60,6 +61,6 @@
     }
 </script>
 
-<SquareButton {id} {className} {props} {active} {onClick} on:mount>
+<SquareButton {id} {className} {props} {title} {active} {onClick} on:mount>
     {@html icon}
 </SquareButton>

ts/editor-toolbar/DropdownItem.svelte

@@ -0,0 +1,22 @@
+<script lang="typescript">
+    export let id = "";
+    export let className = "";
+    export let props: Record<string, string> = {};
+    export let title: string;
+
+    export let onClick: (event: ClickEvent) => void;
+    export let label: string;
+    export let endLabel: string;
+</script>
+
+<button
+    {id}
+    class={`dropdown-item ${className}`}
+    {...props}
+    {title}
+    on:click={onClick}
+    on:mousedown|preventDefault>
+    <span class="float-start">{label}</span>
+
+    {#if endLabel}<span class="float-end">{endLabel}</span>{/if}
+</button>

ts/editor-toolbar/DropdownMenu.svelte

@@ -1,26 +1,14 @@
 <script lang="typescript">
-    interface DropdownItem {
+    import type { SvelteComponentDefinition } from "./types";
-        label: string;
-        endLabel: string;
-        onClick: (event: ClickEvent) => void;
-    }
 
     export let id: string;
-    export let menuItems: DropdownItem[];
+    export let menuItems: SvelteComponentDefinition[];
 </script>
 
 <ul class="dropdown-menu" {id}>
     {#each menuItems as menuItem}
         <li>
-            <button
+            <svelte:component this={menuItem.component} {...menuItem} />
-                class="dropdown-item"
-                on:click={menuItem.onClick}
-                on:mousedown|preventDefault>
-                <span class="float-start">{menuItem.label}</span>
-                {#if menuItem.endLabel}
-                    <span class="float-end">{menuItem.endLabel}</span>
-                {/if}
-            </button>
         </li>
     {/each}
 </ul>

ts/editor-toolbar/IconButton.svelte

@@ -4,11 +4,12 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
+    export let title: string;
 
     export let icon = "";
     export let onClick: (event: ClickEvent) => void;
 </script>
 
-<SquareButton {id} {className} {props} {onClick} on:mount>
+<SquareButton {id} {className} {props} {title} {onClick} on:mount>
     {@html icon}
 </SquareButton>

ts/editor-toolbar/SelectButton.svelte

@@ -13,6 +13,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
+    export let title: string;
 
     function extendClassName(classes: string) {
         return `form-select ${classes}`;
@@ -59,7 +60,8 @@
     {disabled}
     {id}
     class={extendClassName(className)}
-    {...props}>
+    {...props}
+    {title}>
     {#each options as option}
         <SelectOption {...option} />
     {/each}

ts/editor-toolbar/SquareButton.svelte

@@ -6,6 +6,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
+    export let title: string;
 
     export let onClick: (event: ClickEvent) => void;
     export let active = false;
@@ -85,6 +86,7 @@
     {id}
     class={className}
     {...props}
+    {title}
     class:active
     tabindex="-1"
     {disabled}

ts/editor-toolbar/color.ts

@@ -1,5 +1,9 @@
 import IconButton from "./IconButton.svelte";
 import ColorPicker from "./ColorPicker.svelte";
+
+import { lazyProperties } from "anki/lazy";
+import * as tr from "anki/i18n";
+
 import squareFillIcon from "./square-fill.svg";
 import "./color.css";
 
@@ -24,10 +28,18 @@ const forecolorButton = {
     onClick: () => wrapWithForecolor(getForecolor()),
 };
 
+lazyProperties(forecolorButton, {
+    title: tr.editingSetForegroundColourF7,
+});
+
 const colorpickerButton = {
     component: ColorPicker,
     className: "rainbow",
     onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
 };
 
+lazyProperties(colorpickerButton, {
+    title: tr.editingChangeColourF8,
+});
+
 export const colorButtons = [forecolorButton, colorpickerButton];

ts/editor-toolbar/format.ts

@@ -1,5 +1,8 @@
-// @ts-ignore
 import CommandIconButton from "./CommandIconButton.svelte";
+
+import { lazyProperties } from "anki/lazy";
+import * as tr from "anki/i18n";
+
 import boldIcon from "./type-bold.svg";
 import italicIcon from "./type-italic.svg";
 import underlineIcon from "./type-underline.svg";
@@ -13,42 +16,66 @@ const boldButton = {
     command: "bold",
 };
 
+lazyProperties(boldButton, {
+    title: tr.editingBoldTextCtrlandb,
+});
+
 const italicButton = {
     component: CommandIconButton,
     icon: italicIcon,
     command: "italic",
 };
 
+lazyProperties(italicButton, {
+    title: tr.editingItalicTextCtrlandi,
+});
+
 const underlineButton = {
     component: CommandIconButton,
     icon: underlineIcon,
     command: "underline",
 };
 
+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",
 };
 
-const eraserButton = {
+lazyProperties(subscriptButton, {
+    title: tr.editingSubscriptCtrland,
+});
+
+const removeFormatButton = {
     component: CommandIconButton,
     icon: eraserIcon,
     command: "removeFormat",
-    highlightable: false,
+    activatable: false,
 };
 
+lazyProperties(removeFormatButton, {
+    title: tr.editingRemoveFormattingCtrlandr,
+});
+
 export const formatButtons = [
     boldButton,
     italicButton,
     underlineButton,
     superscriptButton,
     subscriptButton,
-    eraserButton,
+    removeFormatButton,
 ];

ts/editor-toolbar/index.ts

@@ -1,8 +1,7 @@
 import type { SvelteComponent } from "svelte";
 
 import { checkNightMode } from "anki/nightmode";
-import { setupI18n, ModuleName, i18n } from "anki/i18n";
+import { setupI18n, ModuleName } from "anki/i18n";
-import * as tr from "anki/i18n";
 
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
@@ -27,8 +26,6 @@ class EditorToolbar extends HTMLElement {
         this.disabled = writable(false);
 
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
-            console.log(i18n, tr);
-
             this.component = new EditorToolbarSvelte({
                 target: this,
                 props: {

ts/editor-toolbar/template.ts

@@ -1,7 +1,11 @@
-import { bridgeCommand } from "anki/bridgecommand";
-
 import IconButton from "./IconButton.svelte";
 import DropdownMenu from "./DropdownMenu.svelte";
+import DropdownItem from "./DropdownItem.svelte";
+import WithDropdownMenu from "./WithDropdownMenu.svelte";
+
+import { bridgeCommand } from "anki/bridgecommand";
+import { lazyProperties } from "anki/lazy";
+import * as tr from "anki/i18n";
 
 import paperclipIcon from "./paperclip.svg";
 import micIcon from "./mic.svg";
@@ -31,23 +35,45 @@ const attachmentButton = {
     onClick: onAttachment,
 };
 
+lazyProperties(attachmentButton, {
+    title: tr.editingAttachPicturesaudiovideoF3,
+});
+
 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 mathjaxButton = {
     component: IconButton,
     icon: functionIcon,
 };
 
+const mathjaxMenuId = "mathjaxMenu";
+
 const mathjaxMenu = {
     component: DropdownMenu,
-    id: "mathjaxMenu",
+    id: mathjaxMenuId,
-    menuItems: [{ label: "Foo", onClick: () => console.log("foo") }],
+    menuItems: [
+        { component: DropdownItem, label: "Foo", onClick: () => console.log("foo") },
+    ],
+};
+
+const mathjaxButtonWithMenu = {
+    component: WithDropdownMenu,
+    button: mathjaxButton,
+    menuId: mathjaxMenuId,
 };
 
 const htmlButton = {
@@ -56,11 +82,15 @@ const htmlButton = {
     onClick: onHtmlEdit,
 };
 
+lazyProperties(htmlButton, {
+    title: tr.editingHtmlEditor,
+});
+
 export const templateButtons = [
     attachmentButton,
     recordButton,
     clozeButton,
-    mathjaxButton,
+    mathjaxButtonWithMenu,
     htmlButton,
 ];
 

ts/editor-toolbar/types.ts

@@ -1,12 +1,15 @@
 import type { SvelteComponent } from "svelte/internal";
 
-export interface ButtonDefinition {
+export interface SvelteComponentDefinition {
     component: SvelteComponent;
+    [arg: string]: unknown;
+}
+
+export interface ButtonDefinition extends SvelteComponentDefinition {
     id?: string;
     className?: string;
     props?: Record<string, string>;
     button: HTMLButtonElement;
-    [arg: string]: unknown;
 }
 
 export type Buttons = ButtonDefinition | Buttons[];