@mdxeditor/editor 2.9.0 → 2.10.0

package/dist/MDXEditor.js

@@ -1,14 +1,14 @@
+import { useCellValues, usePublisher, useRealm } from "@mdxeditor/gurx";
 import React__default from "react";
-import { corePlugin, initialRootEditorState$, usedLexicalNodes$, readOnly$, contentEditableClassName$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, editorRootElementRef$, viewMode$, markdownSourceEditorValue$, markdown$, setMarkdown$, insertMarkdown$, rootEditor$ } from "./plugins/core/index.js";
 import { RealmWithPlugins } from "./RealmWithPlugins.js";
-import { useCellValues, usePublisher, useRealm } from "@mdxeditor/gurx";
-import { lexicalTheme } from "./styles/lexicalTheme.js";
+import { corePlugin, initialRootEditorState$, usedLexicalNodes$, readOnly$, contentEditableClassName$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, editorRootElementRef$, viewMode$, markdownSourceEditorValue$, markdown$, setMarkdown$, insertMarkdown$, rootEditor$ } from "./plugins/core/index.js";
 import { LexicalComposer } from "@lexical/react/LexicalComposer.js";
-import styles from "./styles/ui.module.css.js";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
 import classNames from "classnames";
+import { lexicalTheme } from "./styles/lexicalTheme.js";
+import styles from "./styles/ui.module.css.js";
 import { noop } from "./utils/fp.js";
 const LexicalProvider = ({ children }) => {
   const [initialRootEditorState, nodes, readOnly] = useCellValues(initialRootEditorState$, usedLexicalNodes$, readOnly$);
@@ -56,10 +56,14 @@ const IconFallback = () => {
 const defaultIconComponentFor = (name) => {
   return /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: /* @__PURE__ */ React__default.createElement(IconFallback, null) }, /* @__PURE__ */ React__default.createElement(DefaultIcon, { name }));
 };
-const RenderRecursiveWrappers = ({
-  wrappers,
-  children
-}) => {
+function defaultTranslation(key, defaultValue, interpolations = {}) {
+  let value = defaultValue;
+  for (const [k, v] of Object.entries(interpolations)) {
+    value = value.replaceAll(`{{${k}}}`, String(v));
+  }
+  return value;
+}
+const RenderRecursiveWrappers = ({ wrappers, children }) => {
   if (wrappers.length === 0) {
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
   }
@@ -130,7 +134,8 @@ const MDXEditor = React__default.forwardRef((props, ref) => {
           readOnly: Boolean(props.readOnly),
           iconComponentFor: props.iconComponentFor ?? defaultIconComponentFor,
           suppressHtmlProcessing: props.suppressHtmlProcessing ?? false,
-          onError: props.onError ?? noop
+          onError: props.onError ?? noop,
+          translation: props.translation ?? defaultTranslation
         }),
         ...props.plugins || []
       ]

package/dist/index.d.ts

@@ -240,6 +240,8 @@ export declare const AdmonitionDirectiveDescriptor: DirectiveDescriptor;
 
 /* Excluded from this release type: AdmonitionKind */
 
+export declare function admonitionLabelsMap(t: Translation): Record<(typeof ADMONITION_TYPES)[number], string>;
+
 /**
  * @group Headings
  */
@@ -1984,6 +1986,10 @@ export declare interface MDXEditorProps {
      * Set to false if you want to suppress the processing of HTML tags.
      */
     suppressHtmlProcessing?: boolean;
+    /**
+     * Pass your own translation function if you want to localize the editor.
+     */
+    translation?: Translation;
 }
 
 /**
@@ -2536,7 +2542,7 @@ export declare function thrush<I, K>(arg: I, proc: (arg: I) => K): K;
 
 /* Excluded from this release type: ToggleSingleGroupWithItem */
 
-/* Excluded from this release type: ToMarkdownExtension */
+export declare type ToMarkdownExtension = NonNullable<ToMarkdownOptions['extensions']>[number];
 
 /* Excluded from this release type: toMarkdownExtensions$ */
 
@@ -2570,6 +2576,10 @@ export declare const TooltipWrap: React_2.ForwardRefExoticComponent<{
 
 /* Excluded from this release type: topAreaChildren$ */
 
+export declare const translation$: NodeRef<Translation>;
+
+export declare type Translation = (key: string, defaultValue: string, interpolations?: Record<string, any>) => string;
+
 /* Excluded from this release type: TYPE_NAME */
 
 /**
@@ -2621,6 +2631,8 @@ export declare function useMdastNodeUpdater<T extends Mdast.RootContent>(): (nod
  */
 export declare function useNestedEditorContext<T extends Mdast.RootContent>(): NestedEditorsContextValue<T>;
 
+export declare function useTranslation(): Translation;
+
 /* Excluded from this release type: uuidv4 */
 
 /**

package/dist/index.js

@@ -3,7 +3,7 @@ export * from "@mdxeditor/gurx";
 import { MDXEditor } from "./MDXEditor.js";
 import { MarkdownParseError, UnrecognizedMarkdownConstructError, importMarkdownToLexical, importMdastTreeToLexical } from "./importMarkdownToLexical.js";
 import { exportLexicalTreeToMdast, exportMarkdownFromLexical } from "./exportMarkdownFromLexical.js";
-import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialRootEditorState$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
+import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialRootEditorState$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
 import { ALL_HEADING_LEVELS, allowedHeadingLevels$, headingsPlugin } from "./plugins/headings/index.js";
 import { insertThematicBreak$, thematicBreakPlugin } from "./plugins/thematic-break/index.js";
 import { applyListType$, currentListType$, listsPlugin } from "./plugins/lists/index.js";
@@ -28,7 +28,7 @@ import { cmExtensions$, diffMarkdown$, diffSourcePlugin } from "./plugins/diff-s
 import { markdownShortcutPlugin } from "./plugins/markdown-shortcut/index.js";
 import { BlockTypeSelect } from "./plugins/toolbar/components/BlockTypeSelect.js";
 import { BoldItalicUnderlineToggles } from "./plugins/toolbar/components/BoldItalicUnderlineToggles.js";
-import { ChangeAdmonitionType } from "./plugins/toolbar/components/ChangeAdmonitionType.js";
+import { ChangeAdmonitionType, admonitionLabelsMap } from "./plugins/toolbar/components/ChangeAdmonitionType.js";
 import { ChangeCodeMirrorLanguage } from "./plugins/toolbar/components/ChangeCodeMirrorLanguage.js";
 import { CodeToggle } from "./plugins/toolbar/components/CodeToggle.js";
 import { CreateLink } from "./plugins/toolbar/components/CreateLink.js";
@@ -149,6 +149,7 @@ export {
   addSyntaxExtension$,
   addToMarkdownExtension$,
   addTopAreaChild$,
+  admonitionLabelsMap,
   allowedHeadingLevels$,
   always,
   appendCodeBlockEditorDescriptor$,
@@ -279,11 +280,13 @@ export {
   toolbarContents$,
   toolbarPlugin,
   topAreaChildren$,
+  translation$,
   updateLink$,
   useCodeBlockEditorContext,
   useLexicalNodeRemove,
   useMdastNodeUpdater,
   useNestedEditorContext,
+  useTranslation,
   usedLexicalNodes$,
   uuidv4,
   viewMode$,

package/dist/plugins/core/index.js

@@ -3,7 +3,7 @@ import { createEmptyHistoryState } from "@lexical/react/LexicalHistoryPlugin.js"
 import { $isHeadingNode } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
 import { $findMatchingParent, $wrapNodeInElement, $insertNodeToNearestRoot } from "@lexical/utils";
-import { Cell, withLatestFrom, Signal, filter, map, scan } from "@mdxeditor/gurx";
+import { Cell, withLatestFrom, Signal, filter, map, useCellValue, scan } from "@mdxeditor/gurx";
 import { createCommand, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getRoot, $setSelection, $getSelection, $insertNodes, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, KEY_DOWN_COMMAND, $isDecoratorNode, BLUR_COMMAND, $isRangeSelection, $createParagraphNode, ParagraphNode, TextNode } from "lexical";
 import { mdxJsxFromMarkdown, mdxJsxToMarkdown } from "mdast-util-mdx-jsx";
 import { mdxJsx } from "micromark-extension-mdx-jsx";
@@ -474,6 +474,9 @@ const markdownSourceEditorValue$ = Cell("", (r) => {
 });
 const activePlugins$ = Cell([]);
 const addActivePlugin$ = Appender(activePlugins$);
+const translation$ = Cell(() => {
+  throw new Error("No translation function provided");
+});
 const corePlugin = realmPlugin({
   init(r, params) {
     r.register(createRootEditorSubscription$);
@@ -503,7 +506,8 @@ const corePlugin = realmPlugin({
       [toMarkdownOptions$]: params == null ? void 0 : params.toMarkdownOptions,
       [autoFocus$]: params == null ? void 0 : params.autoFocus,
       [placeholder$]: params == null ? void 0 : params.placeholder,
-      [readOnly$]: params == null ? void 0 : params.readOnly
+      [readOnly$]: params == null ? void 0 : params.readOnly,
+      [translation$]: params == null ? void 0 : params.translation
     });
     if (!(params == null ? void 0 : params.suppressHtmlProcessing)) {
       r.pubIn({
@@ -527,6 +531,9 @@ const corePlugin = realmPlugin({
     realm.singletonSub(markdownErrorSignal$, params == null ? void 0 : params.onError);
   }
 });
+function useTranslation() {
+  return useCellValue(translation$);
+}
 export {
   $createGenericHTMLNode,
   $isGenericHTMLNode,
@@ -593,6 +600,8 @@ export {
   toMarkdownExtensions$,
   toMarkdownOptions$,
   topAreaChildren$,
+  translation$,
+  useTranslation,
   usedLexicalNodes$,
   viewMode$
 };

package/dist/plugins/frontmatter/FrontmatterEditor.js

@@ -5,7 +5,7 @@ import React__default from "react";
 import { useForm, useFieldArray } from "react-hook-form";
 import { frontmatterDialogOpen$, removeFrontmatter$ } from "./index.js";
 import styles from "../../styles/ui.module.css.js";
-import { readOnly$, editorRootElementRef$, iconComponentFor$ } from "../core/index.js";
+import { readOnly$, editorRootElementRef$, iconComponentFor$, useTranslation } from "../core/index.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 const FrontmatterEditor = ({ yaml, onChange }) => {
   const [readOnly, editorRootElementRef, iconComponentFor, frontmatterDialogOpen] = useCellValues(
@@ -14,6 +14,7 @@ const FrontmatterEditor = ({ yaml, onChange }) => {
     iconComponentFor$,
     frontmatterDialogOpen$
   );
+  const t = useTranslation();
   const setFrontmatterDialogOpen = usePublisher(frontmatterDialogOpen$);
   const removeFrontmatter = usePublisher(removeFrontmatter$);
   const yamlConfig = React__default.useMemo(() => {
@@ -52,7 +53,7 @@ const FrontmatterEditor = ({ yaml, onChange }) => {
     },
     [onChange, setFrontmatterDialogOpen, removeFrontmatter]
   );
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Dialog.Root, { open: frontmatterDialogOpen, onOpenChange: (open) => setFrontmatterDialogOpen(open) }, /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.largeDialogContent, "data-editor-type": "frontmatter" }, /* @__PURE__ */ React__default.createElement(Dialog.Title, { className: styles.dialogTitle }, "Edit document frontmatter"), /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Dialog.Root, { open: frontmatterDialogOpen, onOpenChange: (open) => setFrontmatterDialogOpen(open) }, /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.largeDialogContent, "data-editor-type": "frontmatter" }, /* @__PURE__ */ React__default.createElement(Dialog.Title, { className: styles.dialogTitle }, t("frontmatterEditor.title", "Edit document frontmatter")), /* @__PURE__ */ React__default.createElement(
     "form",
     {
       onSubmit: (e) => {
@@ -64,7 +65,7 @@ const FrontmatterEditor = ({ yaml, onChange }) => {
         setFrontmatterDialogOpen(false);
       }
     },
-    /* @__PURE__ */ React__default.createElement("table", { className: styles.propertyEditorTable }, /* @__PURE__ */ React__default.createElement("colgroup", null, /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null)), /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null, "Key"), /* @__PURE__ */ React__default.createElement("th", null, "Value"), /* @__PURE__ */ React__default.createElement("th", null))), /* @__PURE__ */ React__default.createElement("tbody", null, fields.map((item, index) => {
+    /* @__PURE__ */ React__default.createElement("table", { className: styles.propertyEditorTable }, /* @__PURE__ */ React__default.createElement("colgroup", null, /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null)), /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null, t("frontmatterEditor.key", "Key")), /* @__PURE__ */ React__default.createElement("th", null, t("frontmatterEditor.value", "Value")), /* @__PURE__ */ React__default.createElement("th", null))), /* @__PURE__ */ React__default.createElement("tbody", null, fields.map((item, index) => {
       return /* @__PURE__ */ React__default.createElement("tr", { key: item.id }, /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(TableInput, { ...register(`yamlConfig.${index}.key`, { required: true }), autofocusIfEmpty: true, readOnly })), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(TableInput, { ...register(`yamlConfig.${index}.value`, { required: true }), readOnly })), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement("button", { type: "button", onClick: () => remove(index), className: styles.iconButton, disabled: readOnly }, iconComponentFor("delete_big"))));
     })), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(
       "button",
@@ -76,10 +77,10 @@ const FrontmatterEditor = ({ yaml, onChange }) => {
           append({ key: "", value: "" });
         }
       },
-      "Add entry"
+      t("frontmatterEditor.addEntry", "Add entry")
     ))))),
-    /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement("button", { type: "submit", className: styles.primaryButton }, "Save"), /* @__PURE__ */ React__default.createElement("button", { type: "reset", className: styles.secondaryButton }, "Cancel"))
-  ), /* @__PURE__ */ React__default.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React__default.createElement("button", { className: styles.dialogCloseButton, "aria-label": "Close" }, iconComponentFor("close")))))));
+    /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement("button", { type: "submit", className: styles.primaryButton }, t("dialogControls.save", "Save")), /* @__PURE__ */ React__default.createElement("button", { type: "reset", className: styles.secondaryButton }, t("dialogControls.cancel", "Cancel")))
+  ), /* @__PURE__ */ React__default.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React__default.createElement("button", { className: styles.dialogCloseButton, "aria-label": t("dialogControls.cancel", "Cancel") }, iconComponentFor("close")))))));
 };
 const TableInput = React__default.forwardRef(({ className, autofocusIfEmpty: _, ...props }, ref) => {
   return /* @__PURE__ */ React__default.createElement("input", { className: classNames(styles.propertyEditorInput, className), ...props, ref });

package/dist/plugins/image/ImageDialog.js

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import React__default from "react";
 import { useForm } from "react-hook-form";
 import styles from "../../styles/ui.module.css.js";
-import { editorRootElementRef$ } from "../core/index.js";
+import { editorRootElementRef$, useTranslation } from "../core/index.js";
 import { imageAutocompleteSuggestions$, imageDialogState$, saveImage$, closeImageDialog$ } from "./index.js";
 import { DownshiftAutoComplete } from "../core/ui/DownshiftAutoComplete.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
@@ -15,6 +15,7 @@ const ImageDialog = () => {
   );
   const saveImage = usePublisher(saveImage$);
   const closeImageDialog = usePublisher(closeImageDialog$);
+  const t = useTranslation();
   const { register, handleSubmit, control, setValue, reset } = useForm({
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     values: state.type === "editing" ? state.initialValues : {}
@@ -49,8 +50,8 @@ const ImageDialog = () => {
           },
           className: styles.multiFieldForm
         },
-        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "file" }, "Upload an image from your device:"), /* @__PURE__ */ React__default.createElement("input", { type: "file", ...register("file") })),
-        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "src" }, "Or add an image from an URL:"), /* @__PURE__ */ React__default.createElement(
+        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "file" }, t("uploadImage.uploadInstructions", "Upload an image from your device:")), /* @__PURE__ */ React__default.createElement("input", { type: "file", ...register("file") })),
+        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "src" }, t("uploadImage.addViaUrlInstructions", "Or add an image from an URL:")), /* @__PURE__ */ React__default.createElement(
           DownshiftAutoComplete,
           {
             register,
@@ -59,12 +60,30 @@ const ImageDialog = () => {
             suggestions: imageAutocompleteSuggestions,
             setValue,
             control,
-            placeholder: "Select or paste an image src"
+            placeholder: t("uploadImage.autoCompletePlaceholder", "Select or paste an image src")
           }
         )),
-        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "alt" }, "Alt:"), /* @__PURE__ */ React__default.createElement("input", { type: "text", ...register("altText"), className: styles.textInput })),
-        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "title" }, "Title:"), /* @__PURE__ */ React__default.createElement("input", { type: "text", ...register("title"), className: styles.textInput })),
-        /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement("button", { type: "submit", title: "Save", "aria-label": "Save", className: classNames(styles.primaryButton) }, "Save"), /* @__PURE__ */ React__default.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React__default.createElement("button", { type: "reset", title: "Cancel", "aria-label": "Cancel", className: classNames(styles.secondaryButton) }, "Cancel")))
+        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "alt" }, t("uploadImage.alt", "Alt:")), /* @__PURE__ */ React__default.createElement("input", { type: "text", ...register("altText"), className: styles.textInput })),
+        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "title" }, t("uploadImage.title", "Title:")), /* @__PURE__ */ React__default.createElement("input", { type: "text", ...register("title"), className: styles.textInput })),
+        /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement(
+          "button",
+          {
+            type: "submit",
+            title: t("dialogControls.save", "Save"),
+            "aria-label": t("dialogControls.save", "Save"),
+            className: classNames(styles.primaryButton)
+          },
+          t("dialogControls.save", "Save")
+        ), /* @__PURE__ */ React__default.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+          "button",
+          {
+            type: "reset",
+            title: t("dialogControls.cancel", "Cancel"),
+            "aria-label": t("dialogControls.cancel", "Cancel"),
+            className: classNames(styles.secondaryButton)
+          },
+          t("dialogControls.cancel", "Cancel")
+        )))
       )
     ))
   );

package/dist/plugins/image/ImageEditor.js

@@ -6,7 +6,7 @@ import classNames from "classnames";
 import { $isNodeSelection, $getSelection, $getNodeByKey, $setSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, CLICK_COMMAND, DRAGSTART_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND } from "lexical";
 import { disableImageResize$, imagePreviewHandler$, openEditImageDialog$ } from "./index.js";
 import styles from "../../styles/ui.module.css.js";
-import { iconComponentFor$, readOnly$ } from "../core/index.js";
+import { iconComponentFor$, readOnly$, useTranslation } from "../core/index.js";
 import { $isImageNode } from "./ImageNode.js";
 import ImageResizer from "./ImageResizer.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
@@ -64,6 +64,7 @@ function ImageEditor({ src, title, alt, nodeKey, width, height }) {
   const [isResizing, setIsResizing] = React__default.useState(false);
   const [imageSource, setImageSource] = React__default.useState(null);
   const [initialImagePath, setInitialImagePath] = React__default.useState(null);
+  const t = useTranslation();
   const onDelete = React__default.useCallback(
     (payload) => {
       if (isSelected && $isNodeSelection($getSelection())) {
@@ -214,7 +215,7 @@ function ImageEditor({ src, title, alt, nodeKey, width, height }) {
     {
       type: "button",
       className: classNames(styles.iconButton, styles.editImageButton),
-      title: "Edit image",
+      title: t("imageEditor.editImage", "Edit image"),
       disabled: readOnly,
       onClick: () => {
         openEditImageDialog({

package/dist/plugins/link-dialog/LinkDialog.js

@@ -1,7 +1,7 @@
 import * as RadixPopover from "@radix-ui/react-popover";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import React__default from "react";
-import { editorRootElementRef$, activeEditor$, iconComponentFor$ } from "../core/index.js";
+import { editorRootElementRef$, activeEditor$, iconComponentFor$, useTranslation } from "../core/index.js";
 import { DownshiftAutoComplete } from "../core/ui/DownshiftAutoComplete.js";
 import styles from "../../styles/ui.module.css.js";
 import classNames from "classnames";
@@ -23,6 +23,7 @@ function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggesti
       title
     }
   });
+  const t = useTranslation();
   return /* @__PURE__ */ React__default.createElement(
     "form",
     {
@@ -37,7 +38,7 @@ function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggesti
       },
       className: classNames(styles.multiFieldForm, styles.linkDialogEditForm)
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-url" }, "URL"), /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-url" }, t("createLink.url", "URL")), /* @__PURE__ */ React__default.createElement(
       DownshiftAutoComplete,
       {
         register,
@@ -46,12 +47,30 @@ function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggesti
         suggestions: linkAutocompleteSuggestions,
         setValue,
         control,
-        placeholder: "Select or paste an URL",
+        placeholder: t("createLink.urlPlaceholder", "Select or paste an URL"),
         autofocus: true
       }
     )),
-    /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-title" }, "Title"), /* @__PURE__ */ React__default.createElement("input", { id: "link-title", className: styles.textInput, size: 40, ...register("title") })),
-    /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement("button", { type: "submit", title: "Set URL", "aria-label": "Set URL", className: classNames(styles.primaryButton) }, "Save"), /* @__PURE__ */ React__default.createElement("button", { type: "reset", title: "Cancel change", "aria-label": "Cancel change", className: classNames(styles.secondaryButton) }, "Cancel"))
+    /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-title" }, t("createLink.title", "Title")), /* @__PURE__ */ React__default.createElement("input", { id: "link-title", className: styles.textInput, size: 40, ...register("title") })),
+    /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement(
+      "button",
+      {
+        type: "submit",
+        title: t("createLink.saveTooltip", "Set URL"),
+        "aria-label": t("createLink.saveTooltip", "Set URL"),
+        className: classNames(styles.primaryButton)
+      },
+      t("dialogControls.save", "Save")
+    ), /* @__PURE__ */ React__default.createElement(
+      "button",
+      {
+        type: "reset",
+        title: t("createLink.cancelTooltip", "Cancel change"),
+        "aria-label": t("createLink.cancelTooltip", "Cancel change"),
+        className: classNames(styles.secondaryButton)
+      },
+      t("dialogControls.cancel", "Cancel")
+    ))
   );
 }
 const LinkDialog = () => {
@@ -82,6 +101,7 @@ const LinkDialog = () => {
     };
   }, [activeEditor, publishWindowChange]);
   const [copyUrlTooltipOpen, setCopyUrlTooltipOpen] = React__default.useState(false);
+  const t = useTranslation();
   const theRect = linkDialogState == null ? void 0 : linkDialogState.rectangle;
   const urlIsExternal = linkDialogState.type === "preview" && linkDialogState.url.startsWith("http");
   return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, { open: linkDialogState.type !== "inactive" }, /* @__PURE__ */ React__default.createElement(
@@ -126,15 +146,23 @@ const LinkDialog = () => {
             onClickLinkCallback(linkDialogState.url);
           }
         },
-        title: urlIsExternal ? `Open ${linkDialogState.url} in new window` : linkDialogState.url
+        title: urlIsExternal ? t("linkPreview.open", `Open {{url}} in new window`, { url: linkDialogState.url }) : linkDialogState.url
       },
       /* @__PURE__ */ React__default.createElement("span", null, linkDialogState.url),
       urlIsExternal && iconComponentFor("open_in_new")
-    ), /* @__PURE__ */ React__default.createElement(ActionButton, { onClick: () => switchFromPreviewToLinkEdit(), title: "Edit link URL", "aria-label": "Edit link URL" }, iconComponentFor("edit")), /* @__PURE__ */ React__default.createElement(Tooltip.Provider, null, /* @__PURE__ */ React__default.createElement(Tooltip.Root, { open: copyUrlTooltipOpen }, /* @__PURE__ */ React__default.createElement(Tooltip.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement(
       ActionButton,
       {
-        title: "Copy to clipboard",
-        "aria-label": "Copy link URL",
+        onClick: () => switchFromPreviewToLinkEdit(),
+        title: t("linkPreview.edit", "Edit link URL"),
+        "aria-label": t("linkPreview.edit", "Edit link URL")
+      },
+      iconComponentFor("edit")
+    ), /* @__PURE__ */ React__default.createElement(Tooltip.Provider, null, /* @__PURE__ */ React__default.createElement(Tooltip.Root, { open: copyUrlTooltipOpen }, /* @__PURE__ */ React__default.createElement(Tooltip.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+      ActionButton,
+      {
+        title: t("linkPreview.copyToClipboard", "Copy to clipboard"),
+        "aria-label": t("linkPreview.copyToClipboard", "Copy to clipboard"),
         onClick: () => {
           void window.navigator.clipboard.writeText(linkDialogState.url).then(() => {
             setCopyUrlTooltipOpen(true);
@@ -143,7 +171,15 @@ const LinkDialog = () => {
         }
       },
       copyUrlTooltipOpen ? iconComponentFor("check") : iconComponentFor("content_copy")
-    )), /* @__PURE__ */ React__default.createElement(Tooltip.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 5 }, "Copied!", /* @__PURE__ */ React__default.createElement(Tooltip.Arrow, null))))), /* @__PURE__ */ React__default.createElement(ActionButton, { title: "Remove link", "aria-label": "Remove link", onClick: () => removeLink() }, iconComponentFor("link_off"))),
+    )), /* @__PURE__ */ React__default.createElement(Tooltip.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 5 }, t("linkPreview.copied", "Copied!"), /* @__PURE__ */ React__default.createElement(Tooltip.Arrow, null))))), /* @__PURE__ */ React__default.createElement(
+      ActionButton,
+      {
+        title: t("linkPreview.remove", "Remove link"),
+        "aria-label": t("linkPreview.remove", "Remove link"),
+        onClick: () => removeLink()
+      },
+      iconComponentFor("link_off")
+    )),
     /* @__PURE__ */ React__default.createElement(RadixPopover.Arrow, { className: styles.popoverArrow })
   )));
 };

package/dist/plugins/table/TableEditor.js

@@ -15,7 +15,7 @@ import classNames from "classnames";
 import styles from "../../styles/ui.module.css.js";
 import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
 import { uuidv4 } from "../../utils/uuid4.js";
-import { iconComponentFor$, readOnly$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, jsxIsAvailable$, rootEditor$, NESTED_EDITOR_UPDATED_COMMAND, editorRootElementRef$ } from "../core/index.js";
+import { iconComponentFor$, readOnly$, useTranslation, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, jsxIsAvailable$, rootEditor$, NESTED_EDITOR_UPDATED_COMMAND, editorRootElementRef$ } from "../core/index.js";
 import { useCellValues } from "@mdxeditor/gurx";
 const AlignToTailwindClassMap = {
   center: styles.centeredCell,
@@ -115,6 +115,7 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
     const rowIndex = tableCell.tagName === "TH" ? -1 : Array.from(tableRow.parentElement.children).indexOf(tableRow);
     setHighlightedCoordinates([colIndex, rowIndex]);
   }, []);
+  const t = useTranslation();
   return /* @__PURE__ */ React__default.createElement("table", { className: styles.tableEditor, onMouseOver: onTableMouseOver, onMouseLeave: () => setHighlightedCoordinates([-1, -1]) }, /* @__PURE__ */ React__default.createElement("colgroup", null, readOnly ? null : /* @__PURE__ */ React__default.createElement("col", null), Array.from({ length: mdastNode.children[0].children.length }, (_, colIndex) => {
     const align = mdastNode.align || [];
     const currentColumnAlign = align[colIndex] || "left";
@@ -125,7 +126,7 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
     {
       className: styles.iconButton,
       type: "button",
-      title: "Delete table",
+      title: t("table.deleteTable", "Delete table"),
       onClick: (e) => {
         e.preventDefault();
         parentEditor.update(() => {
@@ -332,12 +333,13 @@ const ColumnEditor = ({
     },
     [parentEditor, lexicalTable]
   );
+  const t = useTranslation();
   return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, null, /* @__PURE__ */ React__default.createElement(
     RadixPopover.PopoverTrigger,
     {
       className: styles.tableColumnEditorTrigger,
       "data-active": highlightedCoordinates[0] === colIndex + 1,
-      title: "Column menu"
+      title: t("table.columnMenu", "Column menu")
     },
     iconComponentFor("more_horiz")
   ), /* @__PURE__ */ React__default.createElement(RadixPopover.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(
@@ -357,12 +359,26 @@ const ColumnEditor = ({
         },
         value: align || "left",
         type: "single",
-        "aria-label": "Text alignment"
+        "aria-label": t("table.textAlignment", "Text alignment")
       },
-      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "left", title: "Align left" }, iconComponentFor("format_align_left")),
-      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "center", title: "Align center" }, iconComponentFor("format_align_center")),
-      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "right", title: "Align right" }, iconComponentFor("format_align_right"))
-    ), /* @__PURE__ */ React__default.createElement(RadixToolbar.Separator, null), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertColumnAt.bind(null, colIndex), title: "Insert a column to the left of this one" }, iconComponentFor("insert_col_left")), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertColumnAt.bind(null, colIndex + 1), title: "Insert a column to the right of this one" }, iconComponentFor("insert_col_right")), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: deleteColumnAt.bind(null, colIndex), title: "Delete this column" }, iconComponentFor("delete_small"))),
+      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "left", title: t("table.alignLeft", "Align left") }, iconComponentFor("format_align_left")),
+      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "center", title: t("table.alignCenter", "Align center") }, iconComponentFor("format_align_center")),
+      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "right", title: t("table.alignRight", "Align right") }, iconComponentFor("format_align_right"))
+    ), /* @__PURE__ */ React__default.createElement(RadixToolbar.Separator, null), /* @__PURE__ */ React__default.createElement(
+      RadixToolbar.Button,
+      {
+        onClick: insertColumnAt.bind(null, colIndex),
+        title: t("table.insertColumnLeft", "Insert a column to the left of this one")
+      },
+      iconComponentFor("insert_col_left")
+    ), /* @__PURE__ */ React__default.createElement(
+      RadixToolbar.Button,
+      {
+        onClick: insertColumnAt.bind(null, colIndex + 1),
+        title: t("table.insertColumnRight", "Insert a column to the right of this one")
+      },
+      iconComponentFor("insert_col_right")
+    ), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: deleteColumnAt.bind(null, colIndex), title: t("table.deleteColumn", "Delete this column") }, iconComponentFor("delete_small"))),
     /* @__PURE__ */ React__default.createElement(RadixPopover.Arrow, { className: styles.popoverArrow })
   )));
 };
@@ -391,7 +407,16 @@ const RowEditor = ({
     },
     [parentEditor, lexicalTable]
   );
-  return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, null, /* @__PURE__ */ React__default.createElement(RadixPopover.PopoverTrigger, { className: styles.tableColumnEditorTrigger, "data-active": highlightedCoordinates[1] === rowIndex }, iconComponentFor("more_horiz")), /* @__PURE__ */ React__default.createElement(RadixPopover.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(
+  const t = useTranslation();
+  return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, null, /* @__PURE__ */ React__default.createElement(
+    RadixPopover.PopoverTrigger,
+    {
+      className: styles.tableColumnEditorTrigger,
+      "data-active": highlightedCoordinates[1] === rowIndex,
+      title: t("table.rowMenu", "Row menu")
+    },
+    iconComponentFor("more_horiz")
+  ), /* @__PURE__ */ React__default.createElement(RadixPopover.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(
     RadixPopover.PopoverContent,
     {
       className: classNames(styles.tableColumnEditorPopoverContent),
@@ -399,7 +424,21 @@ const RowEditor = ({
       sideOffset: 5,
       side: "bottom"
     },
-    /* @__PURE__ */ React__default.createElement(RadixToolbar.Root, { className: styles.tableColumnEditorToolbar }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertRowAt.bind(null, rowIndex), title: "Insert a row above this one" }, iconComponentFor("insert_row_above")), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertRowAt.bind(null, rowIndex + 1), title: "Insert a row below this one" }, iconComponentFor("insert_row_below")), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: deleteRowAt.bind(null, rowIndex), title: "Delete this row" }, iconComponentFor("delete_small"))),
+    /* @__PURE__ */ React__default.createElement(RadixToolbar.Root, { className: styles.tableColumnEditorToolbar }, /* @__PURE__ */ React__default.createElement(
+      RadixToolbar.Button,
+      {
+        onClick: insertRowAt.bind(null, rowIndex),
+        title: t("table.insertRowAbove", "Insert a row above this one")
+      },
+      iconComponentFor("insert_row_above")
+    ), /* @__PURE__ */ React__default.createElement(
+      RadixToolbar.Button,
+      {
+        onClick: insertRowAt.bind(null, rowIndex + 1),
+        title: t("table.insertRowBelow", "Insert a row below this one")
+      },
+      iconComponentFor("insert_row_below")
+    ), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: deleteRowAt.bind(null, rowIndex), title: t("table.deleteRow", "Delete this row") }, iconComponentFor("delete_small"))),
     /* @__PURE__ */ React__default.createElement(RadixPopover.Arrow, { className: styles.popoverArrow })
   )));
 };

package/dist/plugins/toolbar/components/BlockTypeSelect.js

@@ -2,7 +2,7 @@ import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
 import { usePublisher, useCellValue } from "@mdxeditor/gurx";
 import { $createParagraphNode } from "lexical";
 import React__default from "react";
-import { convertSelectionToNode$, currentBlockType$, activePlugins$ } from "../../core/index.js";
+import { convertSelectionToNode$, currentBlockType$, activePlugins$, useTranslation } from "../../core/index.js";
 import { allowedHeadingLevels$ } from "../../headings/index.js";
 import { Select } from "../primitives/select.js";
 const BlockTypeSelect = () => {
@@ -11,16 +11,23 @@ const BlockTypeSelect = () => {
   const activePlugins = useCellValue(activePlugins$);
   const hasQuote = activePlugins.includes("quote");
   const hasHeadings = activePlugins.includes("headings");
+  const t = useTranslation();
   if (!hasQuote && !hasHeadings) {
     return null;
   }
-  const items = [{ label: "Paragraph", value: "paragraph" }];
+  const items = [
+    { label: t("toolbar.blockTypes.paragraph", "Paragraph"), value: "paragraph" }
+  ];
   if (hasQuote) {
-    items.push({ label: "Quote", value: "quote" });
+    items.push({ label: t("toolbar.blockTypes.quote", "Quote"), value: "quote" });
   }
   if (hasHeadings) {
     const allowedHeadingLevels = useCellValue(allowedHeadingLevels$);
-    items.push(...allowedHeadingLevels.map((n) => ({ label: `Heading ${n}`, value: `h${n}` })));
+    items.push(
+      ...allowedHeadingLevels.map(
+        (n) => ({ label: t("toolbar.blockTypes.heading", "Heading {{level}}", { level: n }), value: `h${n}` })
+      )
+    );
   }
   return /* @__PURE__ */ React__default.createElement(
     Select,
@@ -44,8 +51,8 @@ const BlockTypeSelect = () => {
             }
         }
       },
-      triggerTitle: "Select block type",
-      placeholder: "Block type",
+      triggerTitle: t("toolbar.blockTypeSelect.selectBlockTypeTooltip", "Select block type"),
+      placeholder: t("toolbar.blockTypeSelect.placeholder", "Block type"),
       items
     }
   );

package/dist/plugins/toolbar/components/BoldItalicUnderlineToggles.js

@@ -1,4 +1,4 @@
-import { currentFormat$, iconComponentFor$, applyFormat$ } from "../../core/index.js";
+import { currentFormat$, iconComponentFor$, applyFormat$, useTranslation } from "../../core/index.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 import React__default from "react";
 import { IS_BOLD, IS_ITALIC, IS_UNDERLINE } from "../../../FormatConstants.js";
@@ -6,12 +6,13 @@ import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
 const BoldItalicUnderlineToggles = () => {
   const [currentFormat, iconComponentFor] = useCellValues(currentFormat$, iconComponentFor$);
   const applyFormat = usePublisher(applyFormat$);
+  const t = useTranslation();
   const boldIsOn = (currentFormat & IS_BOLD) !== 0;
   const italicIsOn = (currentFormat & IS_ITALIC) !== 0;
   const underlineIsOn = (currentFormat & IS_UNDERLINE) !== 0;
-  const boldTitle = boldIsOn ? "Remove bold" : "Bold";
-  const italicTitle = italicIsOn ? "Remove italic" : "Italic";
-  const underlineTitle = underlineIsOn ? "Remove underline" : "Underline";
+  const boldTitle = boldIsOn ? t("toolbar.removeBold", "Remove bold") : t("toolbar.bold", "Bold");
+  const italicTitle = italicIsOn ? t("toolbar.removeItalic", "Remove italic") : t("toolbar.italic", "Italic");
+  const underlineTitle = underlineIsOn ? t("toolbar.underline", "Remove underline") : t("toolbar.removeUnderline", "Underline");
   return /* @__PURE__ */ React__default.createElement(
     MultipleChoiceToggleGroup,
     {

package/dist/plugins/toolbar/components/ChangeAdmonitionType.js

@@ -1,11 +1,22 @@
 import React__default from "react";
-import { editorInFocus$, rootEditor$ } from "../../core/index.js";
+import { editorInFocus$, rootEditor$, useTranslation } from "../../core/index.js";
 import { Select } from "../primitives/select.js";
 import { ADMONITION_TYPES } from "../../../directive-editors/AdmonitionDirectiveDescriptor.js";
 import { useCellValues } from "@mdxeditor/gurx";
+function admonitionLabelsMap(t) {
+  return {
+    note: t("admonitions.note", "Note"),
+    tip: t("admonitions.tip", "Tip"),
+    danger: t("admonitions.danger", "Danger"),
+    info: t("admonitions.info", "Info"),
+    caution: t("admonitions.caution", "Caution")
+  };
+}
 const ChangeAdmonitionType = () => {
   const [editorInFocus, rootEditor] = useCellValues(editorInFocus$, rootEditor$);
   const admonitionNode = editorInFocus.rootNode;
+  const t = useTranslation();
+  const labels = admonitionLabelsMap(t);
   return /* @__PURE__ */ React__default.createElement(
     Select,
     {
@@ -20,12 +31,13 @@ const ChangeAdmonitionType = () => {
           }, 80);
         });
       },
-      triggerTitle: "Select admonition type",
-      placeholder: "Admonition type",
-      items: ADMONITION_TYPES.map((type) => ({ label: type.replace(/^./, (l) => l.toUpperCase()), value: type }))
+      triggerTitle: t("admonitions.changeType", "Select admonition type"),
+      placeholder: t("admonitions.placeholder", "Admonition type"),
+      items: ADMONITION_TYPES.map((type) => ({ label: labels[type], value: type }))
     }
   );
 };
 export {
-  ChangeAdmonitionType
+  ChangeAdmonitionType,
+  admonitionLabelsMap
 };

package/dist/plugins/toolbar/components/ChangeCodeMirrorLanguage.js

@@ -2,17 +2,18 @@ import { useCellValues } from "@mdxeditor/gurx";
 import React__default from "react";
 import styles from "../../../styles/ui.module.css.js";
 import { codeBlockLanguages$ } from "../../codemirror/index.js";
-import { editorInFocus$, activeEditor$ } from "../../core/index.js";
+import { editorInFocus$, activeEditor$, useTranslation } from "../../core/index.js";
 import { Select } from "../primitives/select.js";
 const EMPTY_VALUE = "__EMPTY_VALUE__";
 const ChangeCodeMirrorLanguage = () => {
   const [editorInFocus, theEditor, codeBlockLanguages] = useCellValues(editorInFocus$, activeEditor$, codeBlockLanguages$);
   const codeBlockNode = editorInFocus.rootNode;
+  const t = useTranslation();
   let currentLanguage = codeBlockNode.getLanguage();
   if (currentLanguage === "") {
     currentLanguage = EMPTY_VALUE;
   }
-  return /* @__PURE__ */ React__default.createElement("div", { className: styles.selectWithLabel }, /* @__PURE__ */ React__default.createElement("label", null, "Code block language:"), /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.selectWithLabel }, /* @__PURE__ */ React__default.createElement("label", null, t("codeBlock.language", "Code block language")), /* @__PURE__ */ React__default.createElement(
     Select,
     {
       value: currentLanguage,
@@ -26,8 +27,8 @@ const ChangeCodeMirrorLanguage = () => {
           });
         });
       },
-      triggerTitle: "Select code block language",
-      placeholder: "Code block language",
+      triggerTitle: t("codeBlock.selectLanguage", "Select code block language"),
+      placeholder: t("codeBlock.language", "Code block language"),
       items: Object.entries(codeBlockLanguages).map(([value, label]) => ({ value: value ? value : EMPTY_VALUE, label }))
     }
   ));

package/dist/plugins/toolbar/components/CodeToggle.js

@@ -1,13 +1,14 @@
 import React__default from "react";
 import { IS_CODE } from "../../../FormatConstants.js";
-import { currentFormat$, iconComponentFor$, applyFormat$ } from "../../core/index.js";
+import { currentFormat$, iconComponentFor$, applyFormat$, useTranslation } from "../../core/index.js";
 import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 const CodeToggle = () => {
   const [currentFormat, iconComponentFor] = useCellValues(currentFormat$, iconComponentFor$);
   const applyFormat = usePublisher(applyFormat$);
+  const t = useTranslation();
   const codeIsOn = (currentFormat & IS_CODE) !== 0;
-  const title = codeIsOn ? "Remove code format" : "Inline code format";
+  const title = codeIsOn ? t("toolbar.removeInlineCode", "Remove code format") : t("toolbar.inlineCode", "Inline code format");
   return /* @__PURE__ */ React__default.createElement(
     MultipleChoiceToggleGroup,
     {

package/dist/plugins/toolbar/components/CreateLink.js

@@ -2,14 +2,15 @@ import React__default from "react";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
 import { openLinkEditDialog$ } from "../../link-dialog/index.js";
 import { usePublisher, useCellValue } from "@mdxeditor/gurx";
-import { iconComponentFor$ } from "../../core/index.js";
+import { iconComponentFor$, useTranslation } from "../../core/index.js";
 const CreateLink = () => {
   const openLinkDialog = usePublisher(openLinkEditDialog$);
   const iconComponentFor = useCellValue(iconComponentFor$);
+  const t = useTranslation();
   return /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
     {
-      title: "Create link",
+      title: t("toolbar.link", "Create link"),
       onClick: (_) => {
         openLinkDialog();
       }

package/dist/plugins/toolbar/components/DiffSourceToggleWrapper.js

@@ -1,4 +1,4 @@
-import { viewMode$, iconComponentFor$ } from "../../core/index.js";
+import { viewMode$, iconComponentFor$, useTranslation } from "../../core/index.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 import React__default from "react";
 import styles from "../../../styles/ui.module.css.js";
@@ -9,17 +9,18 @@ const DiffSourceToggleWrapper = ({
 }) => {
   const [viewMode, iconComponentFor] = useCellValues(viewMode$, iconComponentFor$);
   const changeViewMode = usePublisher(viewMode$);
+  const t = useTranslation();
   const toggleGroupItems = [];
   if (options.includes("rich-text")) {
-    toggleGroupItems.push({ title: "Rich text", contents: iconComponentFor("rich_text"), value: "rich-text" });
+    toggleGroupItems.push({ title: t("toolbar.richText", "Rich text"), contents: iconComponentFor("rich_text"), value: "rich-text" });
   }
   if (options.includes("diff")) {
-    toggleGroupItems.push({ title: "Diff mode", contents: iconComponentFor("difference"), value: "diff" });
+    toggleGroupItems.push({ title: t("toolbar.diffMode", "Diff mode"), contents: iconComponentFor("difference"), value: "diff" });
   }
   if (options.includes("source")) {
-    toggleGroupItems.push({ title: "Source", contents: iconComponentFor("markdown"), value: "source" });
+    toggleGroupItems.push({ title: t("toolbar.source", "Source mode"), contents: iconComponentFor("markdown"), value: "source" });
   }
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, viewMode === "rich-text" ? children : viewMode === "diff" ? /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, "Diff mode") : /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, "Source mode"), /* @__PURE__ */ React__default.createElement("div", { style: { marginLeft: "auto", pointerEvents: "auto", opacity: 1 } }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, viewMode === "rich-text" ? children : viewMode === "diff" ? /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, t("toolbar.diffMode", "Diff mode")) : /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, t("toolbar.source", "Source mode")), /* @__PURE__ */ React__default.createElement("div", { style: { marginLeft: "auto", pointerEvents: "auto", opacity: 1 } }, /* @__PURE__ */ React__default.createElement(
     SingleChoiceToggleGroup,
     {
       className: styles.diffSourceToggle,

package/dist/plugins/toolbar/components/InsertAdmonition.js

@@ -3,18 +3,20 @@ import { ButtonOrDropdownButton } from "../primitives/toolbar.js";
 import { insertDirective$ } from "../../directives/index.js";
 import { ADMONITION_TYPES } from "../../../directive-editors/AdmonitionDirectiveDescriptor.js";
 import { usePublisher, useCellValue } from "@mdxeditor/gurx";
-import { iconComponentFor$ } from "../../core/index.js";
+import { iconComponentFor$, useTranslation } from "../../core/index.js";
+import { admonitionLabelsMap } from "./ChangeAdmonitionType.js";
 const InsertAdmonition = () => {
   const insertDirective = usePublisher(insertDirective$);
   const iconComponentFor = useCellValue(iconComponentFor$);
-  const items = React__default.useMemo(
-    () => ADMONITION_TYPES.map((type) => ({ value: type, label: type.replace(/^./, (l) => l.toUpperCase()) })),
-    []
-  );
+  const t = useTranslation();
+  const items = React__default.useMemo(() => {
+    const labels = admonitionLabelsMap(t);
+    return ADMONITION_TYPES.map((type) => ({ value: type, label: labels[type] }));
+  }, [t]);
   return /* @__PURE__ */ React__default.createElement(
     ButtonOrDropdownButton,
     {
-      title: "Insert admonition",
+      title: t("toolbar.admonition", "Insert Admonition"),
       onChoose: (admonitionName) => {
         insertDirective({
           type: "containerDirective",

package/dist/plugins/toolbar/components/InsertCodeBlock.js

@@ -2,14 +2,15 @@ import React__default from "react";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
 import { insertCodeBlock$ } from "../../codeblock/index.js";
 import { usePublisher, useCellValue } from "@mdxeditor/gurx";
-import { iconComponentFor$ } from "../../core/index.js";
+import { iconComponentFor$, useTranslation } from "../../core/index.js";
 const InsertCodeBlock = () => {
   const insertCodeBlock = usePublisher(insertCodeBlock$);
   const iconComponentFor = useCellValue(iconComponentFor$);
+  const t = useTranslation();
   return /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
     {
-      title: "Insert code block",
+      title: t("toolbar.codeBlock", "Insert Code Block"),
       onClick: () => {
         insertCodeBlock({});
       }

package/dist/plugins/toolbar/components/InsertFrontmatter.js

@@ -4,14 +4,15 @@ import { insertFrontmatter$, hasFrontmatter$ } from "../../frontmatter/index.js"
 import styles from "../../../styles/ui.module.css.js";
 import classNames from "classnames";
 import { usePublisher, useCellValues } from "@mdxeditor/gurx";
-import { iconComponentFor$ } from "../../core/index.js";
+import { iconComponentFor$, useTranslation } from "../../core/index.js";
 const InsertFrontmatter = () => {
   const insertFrontmatter = usePublisher(insertFrontmatter$);
   const [hasFrontmatter, iconComponentFor] = useCellValues(hasFrontmatter$, iconComponentFor$);
+  const t = useTranslation();
   return /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
     {
-      title: hasFrontmatter ? "Edit frontmatter" : "Insert frontmatter",
+      title: hasFrontmatter ? t("toolbar.editFrontmatter", "Edit frontmatter") : t("toolbar.insertFrontmatter", "Insert frontmatter"),
       className: classNames({
         [styles.activeToolbarButton]: hasFrontmatter
       }),

package/dist/plugins/toolbar/components/InsertImage.js

@@ -2,13 +2,14 @@ import React__default from "react";
 import { openNewImageDialog$ } from "../../image/index.js";
 import * as RadixToolbar from "@radix-ui/react-toolbar";
 import styles from "../../../styles/ui.module.css.js";
-import { readOnly$, iconComponentFor$ } from "../../core/index.js";
+import { readOnly$, iconComponentFor$, useTranslation } from "../../core/index.js";
 import { TooltipWrap } from "../primitives/TooltipWrap.js";
 import { usePublisher, useCellValues } from "@mdxeditor/gurx";
 const InsertImage = React__default.forwardRef((_, forwardedRef) => {
   const openNewImageDialog = usePublisher(openNewImageDialog$);
   const [readOnly, iconComponentFor] = useCellValues(readOnly$, iconComponentFor$);
-  return /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly, onClick: () => openNewImageDialog() }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: "Insert image" }, iconComponentFor("add_photo")));
+  const t = useTranslation();
+  return /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly, onClick: () => openNewImageDialog() }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: t("toolbar.image", "Insert image") }, iconComponentFor("add_photo")));
 });
 export {
   InsertImage

package/dist/plugins/toolbar/components/InsertSandpack.js

@@ -2,12 +2,13 @@ import React__default from "react";
 import { ButtonOrDropdownButton } from "../primitives/toolbar.js";
 import { sandpackConfig$, insertSandpack$ } from "../../sandpack/index.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
-import { iconComponentFor$ } from "../../core/index.js";
+import { iconComponentFor$, useTranslation } from "../../core/index.js";
 const InsertSandpack = () => {
   const [sandpackConfig, iconComponentFor] = useCellValues(sandpackConfig$, iconComponentFor$);
   const insertSandpack = usePublisher(insertSandpack$);
   const items = React__default.useMemo(() => sandpackConfig.presets.map((preset) => ({ value: preset.name, label: preset.label })), [sandpackConfig]);
-  return /* @__PURE__ */ React__default.createElement(ButtonOrDropdownButton, { title: "Insert Sandpack", onChoose: insertSandpack, items }, iconComponentFor("sandpack"));
+  const t = useTranslation();
+  return /* @__PURE__ */ React__default.createElement(ButtonOrDropdownButton, { title: t("toolbar.insertSandpack", "Insert Sandpack"), onChoose: insertSandpack, items }, iconComponentFor("sandpack"));
 };
 export {
   InsertSandpack

package/dist/plugins/toolbar/components/InsertTable.js

@@ -2,14 +2,15 @@ import { ButtonWithTooltip } from "../primitives/toolbar.js";
 import React__default from "react";
 import { insertTable$ } from "../../table/index.js";
 import { useCellValue, usePublisher } from "@mdxeditor/gurx";
-import { iconComponentFor$ } from "../../core/index.js";
+import { iconComponentFor$, useTranslation } from "../../core/index.js";
 const InsertTable = () => {
   const iconComponentFor = useCellValue(iconComponentFor$);
   const insertTable = usePublisher(insertTable$);
+  const t = useTranslation();
   return /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
     {
-      title: "Insert table",
+      title: t("toolbar.table", "Insert Table"),
       onClick: () => {
         insertTable({ rows: 3, columns: 3 });
       }

package/dist/plugins/toolbar/components/InsertThematicBreak.js

@@ -2,11 +2,12 @@ import React__default from "react";
 import { insertThematicBreak$ } from "../../thematic-break/index.js";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
 import { usePublisher, useCellValue } from "@mdxeditor/gurx";
-import { iconComponentFor$ } from "../../core/index.js";
+import { iconComponentFor$, useTranslation } from "../../core/index.js";
 const InsertThematicBreak = () => {
   const insertThematicBreak = usePublisher(insertThematicBreak$);
   const iconComponentFor = useCellValue(iconComponentFor$);
-  return /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: "Insert thematic break", onClick: () => insertThematicBreak() }, iconComponentFor("horizontal_rule"));
+  const t = useTranslation();
+  return /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: t("toolbar.thematicBreak", "Insert thematic break"), onClick: () => insertThematicBreak() }, iconComponentFor("horizontal_rule"));
 };
 export {
   InsertThematicBreak

package/dist/plugins/toolbar/components/ListsToggle.js

@@ -2,12 +2,7 @@ import React__default from "react";
 import { currentListType$, applyListType$ } from "../../lists/index.js";
 import { SingleChoiceToggleGroup } from "../primitives/toolbar.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
-import { iconComponentFor$ } from "../../core/index.js";
-const LIST_TITLE_MAP = {
-  bullet: "Bulleted list",
-  number: "Numbered list",
-  check: "Check list"
-};
+import { iconComponentFor$, useTranslation } from "../../core/index.js";
 const ICON_NAME_MAP = {
   bullet: "format_list_bulleted",
   number: "format_list_numbered",
@@ -16,6 +11,12 @@ const ICON_NAME_MAP = {
 const ListsToggle = ({ options = ["bullet", "number", "check"] }) => {
   const [currentListType, iconComponentFor] = useCellValues(currentListType$, iconComponentFor$);
   const applyListType = usePublisher(applyListType$);
+  const t = useTranslation();
+  const LIST_TITLE_MAP = {
+    bullet: t("toolbar.bulletedList", "Bulleted list"),
+    number: t("toolbar.numberedList", "Numbered list"),
+    check: t("toolbar.checkList", "Check list")
+  };
   const items = options.map((type) => ({
     value: type,
     title: LIST_TITLE_MAP[type],

package/dist/plugins/toolbar/components/ShowSandpackInfo.js

@@ -1,6 +1,6 @@
 import React__default from "react";
 import styles from "../../../styles/ui.module.css.js";
-import { editorInFocus$, activeEditor$, iconComponentFor$ } from "../../core/index.js";
+import { editorInFocus$, activeEditor$, iconComponentFor$, useTranslation } from "../../core/index.js";
 import { sandpackConfig$ } from "../../sandpack/index.js";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
 import { useCellValues } from "@mdxeditor/gurx";
@@ -12,11 +12,12 @@ const ShowSandpackInfo = () => {
     sandpackConfig$
   );
   const sandpackNode = editorInFocus.rootNode;
+  const t = useTranslation();
   const preset = sandpackConfig.presets.find((preset2) => preset2.meta === sandpackNode.getMeta());
   return /* @__PURE__ */ React__default.createElement("div", { className: styles.selectWithLabel }, /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
     {
-      title: "Delete this code block",
+      title: t("toolbar.deleteSandpack", "Delete this code block"),
       onClick: () => {
         theEditor == null ? void 0 : theEditor.update(() => {
           if (sandpackNode.getNextSibling()) {

package/dist/plugins/toolbar/components/UndoRedo.js

@@ -3,12 +3,13 @@ import { useCellValues } from "@mdxeditor/gurx";
 import { CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND } from "lexical";
 import React__default from "react";
 import { IS_APPLE } from "../../../utils/detectMac.js";
-import { iconComponentFor$, activeEditor$ } from "../../core/index.js";
+import { iconComponentFor$, activeEditor$, useTranslation } from "../../core/index.js";
 import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
 const UndoRedo = () => {
   const [iconComponentFor, activeEditor] = useCellValues(iconComponentFor$, activeEditor$);
   const [canUndo, setCanUndo] = React__default.useState(false);
   const [canRedo, setCanRedo] = React__default.useState(false);
+  const t = useTranslation();
   React__default.useEffect(() => {
     if (activeEditor) {
       return mergeRegister(
@@ -36,14 +37,14 @@ const UndoRedo = () => {
     {
       items: [
         {
-          title: IS_APPLE ? "Undo (⌘Z)" : "Undo (Ctrl+Z)",
+          title: t("toolbar.undo", "Undo {{shortcut}}", { shortcut: IS_APPLE ? "⌘Z" : "Ctrl+Z" }),
           disabled: !canUndo,
           contents: iconComponentFor("undo"),
           active: false,
           onChange: () => activeEditor == null ? void 0 : activeEditor.dispatchCommand(UNDO_COMMAND, void 0)
         },
         {
-          title: IS_APPLE ? "Redo (⌘Y)" : "Redo (Ctrl+Y)",
+          title: t("toolbar.redo", "Redo {{shortcut}}", { shortcut: IS_APPLE ? "⌘Y" : "Ctrl+Y" }),
           disabled: !canRedo,
           contents: iconComponentFor("redo"),
           active: false,

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -126,6 +126,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "express": "^4.18.2",
+    "i18next": "^23.10.0",
     "jsdom": "^23.0.1",
     "mermaid": "^10.6.1",
     "micromark-util-types": "^2.0.0",