@puckeditor/core 0.22.1 → 0.23.0-canary.4bf6887d

package/dist/{chunk-DATOBXTJ.mjs → chunk-EQADD6J2.mjs}

@@ -1,7 +1,8 @@
 import {
   List,
-  ListOrdered
-} from "./chunk-54LFCIWQ.mjs";
+  ListOrdered,
+  useMessage
+} from "./chunk-2KHLVDRT.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";
@@ -9,11 +10,17 @@ import {
 // components/RichTextMenu/controls/ListSelect/use-options.ts
 init_react_import();
 import { useMemo } from "react";
-var optionNodes = {
-  ul: { label: "Bullet list", icon: List },
-  ol: { label: "Numbered list", icon: ListOrdered }
+var optionIcons = {
+  ul: List,
+  ol: ListOrdered
 };
 var useListOptions = (fieldOptions) => {
+  const ulString = useMessage("field-richtext-listselect-bullet");
+  const olString = useMessage("field-richtext-listselect-ordered");
+  const optionLabels = {
+    ul: ulString,
+    ol: olString
+  };
   let blockOptions = [];
   if ((fieldOptions == null ? void 0 : fieldOptions.listItem) !== false) {
     blockOptions = ["ul", "ol"];
@@ -21,10 +28,10 @@ var useListOptions = (fieldOptions) => {
   return useMemo(
     () => blockOptions.map((item) => ({
       value: item,
-      label: optionNodes[item].label,
-      icon: optionNodes[item].icon
+      label: optionLabels[item],
+      icon: optionIcons[item]
     })),
-    [blockOptions]
+    [blockOptions, optionLabels]
   );
 };
 

package/dist/{chunk-2AATV7NG.mjs → chunk-G3YMTKUD.mjs}

@@ -2,8 +2,9 @@ import {
   AlignCenter,
   AlignJustify,
   AlignLeft,
-  AlignRight
-} from "./chunk-54LFCIWQ.mjs";
+  AlignRight,
+  useMessage
+} from "./chunk-2KHLVDRT.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";
@@ -11,14 +12,24 @@ import {
 // components/RichTextMenu/controls/AlignSelect/use-options.ts
 init_react_import();
 import { useMemo } from "react";
-var optionNodes = {
-  left: { label: "Left", icon: AlignLeft },
-  center: { label: "Center", icon: AlignCenter },
-  right: { label: "Right", icon: AlignRight },
-  justify: { label: "Justify", icon: AlignJustify }
+var optionIcons = {
+  left: AlignLeft,
+  center: AlignCenter,
+  right: AlignRight,
+  justify: AlignJustify
 };
 var useAlignOptions = (fieldOptions) => {
   var _a;
+  const leftString = useMessage("field-richtext-alignselect-left");
+  const centerString = useMessage("field-richtext-alignselect-center");
+  const rightString = useMessage("field-richtext-alignselect-right");
+  const justifyString = useMessage("field-richtext-alignselect-justify");
+  const optionLabels = {
+    left: leftString,
+    center: centerString,
+    right: rightString,
+    justify: justifyString
+  };
   let blockOptions = [];
   if ((fieldOptions == null ? void 0 : fieldOptions.textAlign) !== false) {
     if (!((_a = fieldOptions == null ? void 0 : fieldOptions.textAlign) == null ? void 0 : _a.alignments)) {
@@ -41,10 +52,10 @@ var useAlignOptions = (fieldOptions) => {
   return useMemo(
     () => blockOptions.map((item) => ({
       value: item,
-      label: optionNodes[item].label,
-      icon: optionNodes[item].icon
+      label: optionLabels[item],
+      icon: optionIcons[item]
     })),
-    [blockOptions]
+    [blockOptions, optionLabels]
   );
 };
 

package/dist/{chunk-73XKHVBN.mjs → chunk-OI2LQGRV.mjs}

@@ -1,12 +1,12 @@
 import {
   useAlignOptions
-} from "./chunk-2AATV7NG.mjs";
+} from "./chunk-G3YMTKUD.mjs";
 import {
   useHeadingOptions
-} from "./chunk-BVKXFA4V.mjs";
+} from "./chunk-X4NMPUXH.mjs";
 import {
   useListOptions
-} from "./chunk-DATOBXTJ.mjs";
+} from "./chunk-EQADD6J2.mjs";
 import {
   Action,
   AlignCenter,
@@ -27,8 +27,9 @@ import {
   SquareCode,
   Strikethrough,
   Underline,
-  useControlContext
-} from "./chunk-54LFCIWQ.mjs";
+  useControlContext,
+  useMessage
+} from "./chunk-2KHLVDRT.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-Y2EFNT5P.mjs";
@@ -98,6 +99,7 @@ function Control({
 import { jsx as jsx2 } from "react/jsx-runtime";
 function AlignLeft2() {
   const { editor, editorState } = useControlContext();
+  const alignLeftLabel = useMessage("field-richtext-align-left");
   return /* @__PURE__ */ jsx2(
     Control,
     {
@@ -108,7 +110,7 @@ function AlignLeft2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canAlignLeft),
       active: editorState == null ? void 0 : editorState.isAlignLeft,
-      title: "Align left"
+      title: alignLeftLabel
     }
   );
 }
@@ -118,6 +120,7 @@ init_react_import();
 import { jsx as jsx3 } from "react/jsx-runtime";
 function AlignCenter2() {
   const { editor, editorState } = useControlContext();
+  const alignCenterLabel = useMessage("field-richtext-align-center");
   return /* @__PURE__ */ jsx3(
     Control,
     {
@@ -128,7 +131,7 @@ function AlignCenter2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canAlignCenter),
       active: editorState == null ? void 0 : editorState.isAlignCenter,
-      title: "Align center"
+      title: alignCenterLabel
     }
   );
 }
@@ -138,6 +141,7 @@ init_react_import();
 import { jsx as jsx4 } from "react/jsx-runtime";
 function AlignRight2() {
   const { editor, editorState } = useControlContext();
+  const alignRightLabel = useMessage("field-richtext-align-right");
   return /* @__PURE__ */ jsx4(
     Control,
     {
@@ -148,7 +152,7 @@ function AlignRight2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canAlignRight),
       active: editorState == null ? void 0 : editorState.isAlignRight,
-      title: "Align right"
+      title: alignRightLabel
     }
   );
 }
@@ -158,6 +162,7 @@ init_react_import();
 import { jsx as jsx5 } from "react/jsx-runtime";
 function AlignJustify2() {
   const { editor, editorState } = useControlContext();
+  const alignJustifyLabel = useMessage("field-richtext-align-justify");
   return /* @__PURE__ */ jsx5(
     Control,
     {
@@ -168,7 +173,7 @@ function AlignJustify2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canAlignJustify),
       active: editorState == null ? void 0 : editorState.isAlignJustify,
-      title: "Justify"
+      title: alignJustifyLabel
     }
   );
 }
@@ -199,7 +204,7 @@ function AlignSelectFallback() {
 // components/RichTextMenu/controls/AlignSelect/index.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
 var AlignSelectLoaded = lazy(
-  () => import("./loaded-EFZRGV2Y.mjs").then((m) => ({
+  () => import("./loaded-A7IXFU7M.mjs").then((m) => ({
     default: m.AlignSelectLoaded
   }))
 );
@@ -210,6 +215,7 @@ init_react_import();
 import { jsx as jsx8 } from "react/jsx-runtime";
 function Bold2() {
   const { editor, editorState } = useControlContext();
+  const boldLabel = useMessage("field-richtext-bold");
   return /* @__PURE__ */ jsx8(
     Control,
     {
@@ -220,7 +226,7 @@ function Bold2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canBold),
       active: editorState == null ? void 0 : editorState.isBold,
-      title: "Bold"
+      title: boldLabel
     }
   );
 }
@@ -230,6 +236,7 @@ init_react_import();
 import { jsx as jsx9 } from "react/jsx-runtime";
 function Italic2() {
   const { editor, editorState } = useControlContext();
+  const italicLabel = useMessage("field-richtext-italic");
   return /* @__PURE__ */ jsx9(
     Control,
     {
@@ -240,7 +247,7 @@ function Italic2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canItalic),
       active: editorState == null ? void 0 : editorState.isItalic,
-      title: "Italic"
+      title: italicLabel
     }
   );
 }
@@ -250,6 +257,7 @@ init_react_import();
 import { jsx as jsx10 } from "react/jsx-runtime";
 function Underline2() {
   const { editor, editorState } = useControlContext();
+  const underlineLabel = useMessage("field-richtext-underline");
   return /* @__PURE__ */ jsx10(
     Control,
     {
@@ -260,7 +268,7 @@ function Underline2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canUnderline),
       active: editorState == null ? void 0 : editorState.isUnderline,
-      title: "Underline"
+      title: underlineLabel
     }
   );
 }
@@ -270,6 +278,7 @@ init_react_import();
 import { jsx as jsx11 } from "react/jsx-runtime";
 function Strikethrough2() {
   const { editor, editorState } = useControlContext();
+  const strikethroughLabel = useMessage("field-richtext-strikethrough");
   return /* @__PURE__ */ jsx11(
     Control,
     {
@@ -280,7 +289,7 @@ function Strikethrough2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canStrike),
       active: editorState == null ? void 0 : editorState.isStrike,
-      title: "Strikethrough"
+      title: strikethroughLabel
     }
   );
 }
@@ -290,6 +299,7 @@ init_react_import();
 import { jsx as jsx12 } from "react/jsx-runtime";
 function InlineCode() {
   const { editor, editorState } = useControlContext();
+  const inlineCodeLabel = useMessage("field-richtext-code-inline");
   return /* @__PURE__ */ jsx12(
     Control,
     {
@@ -300,7 +310,7 @@ function InlineCode() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canInlineCode),
       active: editorState == null ? void 0 : editorState.isInlineCode,
-      title: "Inline code"
+      title: inlineCodeLabel
     }
   );
 }
@@ -310,6 +320,7 @@ init_react_import();
 import { jsx as jsx13 } from "react/jsx-runtime";
 function BulletList() {
   const { editor, editorState } = useControlContext();
+  const bulletListLabel = useMessage("field-richtext-list-bullet");
   return /* @__PURE__ */ jsx13(
     Control,
     {
@@ -320,7 +331,7 @@ function BulletList() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canBulletList),
       active: editorState == null ? void 0 : editorState.isBulletList,
-      title: "Bullet list"
+      title: bulletListLabel
     }
   );
 }
@@ -330,6 +341,7 @@ init_react_import();
 import { jsx as jsx14 } from "react/jsx-runtime";
 function OrderedList() {
   const { editor, editorState } = useControlContext();
+  const orderedListLabel = useMessage("field-richtext-list-ordered");
   return /* @__PURE__ */ jsx14(
     Control,
     {
@@ -340,7 +352,7 @@ function OrderedList() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canOrderedList),
       active: editorState == null ? void 0 : editorState.isOrderedList,
-      title: "Ordered list"
+      title: orderedListLabel
     }
   );
 }
@@ -350,6 +362,7 @@ init_react_import();
 import { jsx as jsx15 } from "react/jsx-runtime";
 function CodeBlock() {
   const { editor, editorState } = useControlContext();
+  const codeBlockLabel = useMessage("field-richtext-code-block");
   return /* @__PURE__ */ jsx15(
     Control,
     {
@@ -360,7 +373,7 @@ function CodeBlock() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canCodeBlock),
       active: editorState == null ? void 0 : editorState.isCodeBlock,
-      title: "Code block"
+      title: codeBlockLabel
     }
   );
 }
@@ -370,6 +383,7 @@ init_react_import();
 import { jsx as jsx16 } from "react/jsx-runtime";
 function Blockquote() {
   const { editor, editorState } = useControlContext();
+  const blockquoteLabel = useMessage("field-richtext-blockquote");
   return /* @__PURE__ */ jsx16(
     Control,
     {
@@ -380,7 +394,7 @@ function Blockquote() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canBlockquote),
       active: editorState == null ? void 0 : editorState.isBlockquote,
-      title: "Blockquote"
+      title: blockquoteLabel
     }
   );
 }
@@ -390,6 +404,7 @@ init_react_import();
 import { jsx as jsx17 } from "react/jsx-runtime";
 function HorizontalRule() {
   const { editor, editorState } = useControlContext();
+  const horizontalRuleLabel = useMessage("field-richtext-horizontalrule");
   return /* @__PURE__ */ jsx17(
     Control,
     {
@@ -399,7 +414,7 @@ function HorizontalRule() {
         editor == null ? void 0 : editor.chain().focus().setHorizontalRule().run();
       },
       disabled: !(editorState == null ? void 0 : editorState.canHorizontalRule),
-      title: "Horizontal rule"
+      title: horizontalRuleLabel
     }
   );
 }
@@ -430,7 +445,7 @@ function HeadingSelectFallback() {
 // components/RichTextMenu/controls/HeadingSelect/index.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
 var HeadingSelectLoaded = lazy2(
-  () => import("./loaded-B7563MDT.mjs").then((m) => ({
+  () => import("./loaded-7EVGM4NA.mjs").then((m) => ({
     default: m.HeadingSelectLoaded
   }))
 );
@@ -462,7 +477,7 @@ function ListSelectFallback() {
 // components/RichTextMenu/controls/ListSelect/index.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
 var ListSelectLoaded = lazy3(
-  () => import("./loaded-HECCGJKO.mjs").then((m) => ({
+  () => import("./loaded-QAIOZVXW.mjs").then((m) => ({
     default: m.ListSelectLoaded
   }))
 );

package/dist/{chunk-VOB4L2BJ.mjs → chunk-WABMBXFK.mjs}

@@ -3,11 +3,11 @@ import {
 } from "./chunk-H635BA2V.mjs";
 import {
   LoadedRichTextMenuInner
-} from "./chunk-73XKHVBN.mjs";
+} from "./chunk-OI2LQGRV.mjs";
 import {
   useAppStore,
   useAppStoreApi
-} from "./chunk-54LFCIWQ.mjs";
+} from "./chunk-2KHLVDRT.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-Y2EFNT5P.mjs";
@@ -100,7 +100,7 @@ init_react_import();
 import { lazy, Suspense } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var LoadedRichTextMenuFull = lazy(
-  () => import("./full-7JVAMOPS.mjs").then((m) => ({
+  () => import("./full-GSJGH3OO.mjs").then((m) => ({
     default: m.LoadedRichTextMenuFull
   }))
 );

package/dist/{chunk-BVKXFA4V.mjs → chunk-X4NMPUXH.mjs}

@@ -4,8 +4,9 @@ import {
   Heading3,
   Heading4,
   Heading5,
-  Heading6
-} from "./chunk-54LFCIWQ.mjs";
+  Heading6,
+  useMessage
+} from "./chunk-2KHLVDRT.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";
@@ -13,16 +14,30 @@ import {
 // components/RichTextMenu/controls/HeadingSelect/use-options.ts
 init_react_import();
 import { useMemo } from "react";
-var optionNodes = {
-  h1: { label: "Heading 1", icon: Heading1 },
-  h2: { label: "Heading 2", icon: Heading2 },
-  h3: { label: "Heading 3", icon: Heading3 },
-  h4: { label: "Heading 4", icon: Heading4 },
-  h5: { label: "Heading 5", icon: Heading5 },
-  h6: { label: "Heading 6", icon: Heading6 }
+var optionIcons = {
+  h1: Heading1,
+  h2: Heading2,
+  h3: Heading3,
+  h4: Heading4,
+  h5: Heading5,
+  h6: Heading6
 };
 var useHeadingOptions = (fieldOptions) => {
   var _a;
+  const h1String = useMessage("field-richtext-headingselect-1");
+  const h2String = useMessage("field-richtext-headingselect-2");
+  const h3String = useMessage("field-richtext-headingselect-3");
+  const h4String = useMessage("field-richtext-headingselect-4");
+  const h5String = useMessage("field-richtext-headingselect-5");
+  const h6String = useMessage("field-richtext-headingselect-6");
+  const optionLabels = {
+    h1: h1String,
+    h2: h2String,
+    h3: h3String,
+    h4: h4String,
+    h5: h5String,
+    h6: h6String
+  };
   let blockOptions = [];
   if ((fieldOptions == null ? void 0 : fieldOptions.heading) !== false) {
     if (!((_a = fieldOptions == null ? void 0 : fieldOptions.heading) == null ? void 0 : _a.levels)) {
@@ -51,10 +66,10 @@ var useHeadingOptions = (fieldOptions) => {
   return useMemo(
     () => blockOptions.map((item) => ({
       value: item,
-      label: optionNodes[item].label,
-      icon: optionNodes[item].icon
+      label: optionLabels[item],
+      icon: optionIcons[item]
     })),
-    [blockOptions]
+    [blockOptions, optionLabels]
   );
 };
 

package/dist/{full-7JVAMOPS.mjs → full-GSJGH3OO.mjs}

@@ -1,10 +1,10 @@
 import {
   LoadedRichTextMenuInner
-} from "./chunk-73XKHVBN.mjs";
-import "./chunk-2AATV7NG.mjs";
-import "./chunk-BVKXFA4V.mjs";
-import "./chunk-DATOBXTJ.mjs";
-import "./chunk-54LFCIWQ.mjs";
+} from "./chunk-OI2LQGRV.mjs";
+import "./chunk-G3YMTKUD.mjs";
+import "./chunk-X4NMPUXH.mjs";
+import "./chunk-EQADD6J2.mjs";
+import "./chunk-2KHLVDRT.mjs";
 import "./chunk-HRNJ42TO.mjs";
 import "./chunk-GR7NLT4T.mjs";
 import "./chunk-Y2EFNT5P.mjs";

package/dist/{index-ClzBCbx_.d.mts → index-De5Tn61v.d.mts}

@@ -60,6 +60,89 @@ type FieldsSlice = {
     id: string | undefined;
 };
 
+/**
+ * Default messages for every hard-coded string shown in the Puck editor UI.
+ *
+ * Tokens follow a `{area}-{name}-{variant}` structure, where hyphens only
+ * separate segments (compound words within a segment are concatenated, e.g.
+ * `field-arrayitem-summary`).
+ */
+declare const defaultDictionary: {
+    readonly "header-publish": "Publish";
+    readonly "header-undo": "undo";
+    readonly "header-redo": "redo";
+    readonly "header-toggle-leftsidebar": "Toggle left sidebar";
+    readonly "header-toggle-rightsidebar": "Toggle right sidebar";
+    readonly "header-toggle-menubar": "Toggle menu bar";
+    readonly "action-selectparent": "Select parent";
+    readonly "action-duplicate": "Duplicate";
+    readonly "action-delete": "Delete";
+    readonly "label-page": "Page";
+    readonly "label-component": "Component";
+    readonly "outline-empty": "No items";
+    readonly "outline-collapse": "Collapse";
+    readonly "outline-expand": "Expand";
+    readonly "drawer-category-collapse": "Collapse {title}";
+    readonly "drawer-category-expand": "Expand {title}";
+    readonly "drawer-category-other": "Other";
+    readonly "canvas-noconfig": "No configuration for {type}";
+    readonly "field-readonly": "Read-only";
+    readonly "field-arrayitem-summary": "Item #{index}";
+    readonly "field-arrayitem-duplicate": "Duplicate";
+    readonly "field-arrayitem-delete": "Delete";
+    readonly "field-external-selectdata": "Select data";
+    readonly "field-external-search": "Search";
+    readonly "field-external-togglefilters": "Toggle filters";
+    readonly "field-external-item": "External item";
+    readonly "field-external-result-singular": "{count} result";
+    readonly "field-external-result-plural": "{count} results";
+    readonly "field-richtext-bold": "Bold";
+    readonly "field-richtext-italic": "Italic";
+    readonly "field-richtext-underline": "Underline";
+    readonly "field-richtext-strikethrough": "Strikethrough";
+    readonly "field-richtext-blockquote": "Blockquote";
+    readonly "field-richtext-code-inline": "Inline code";
+    readonly "field-richtext-code-block": "Code block";
+    readonly "field-richtext-list-bullet": "Bullet list";
+    readonly "field-richtext-list-ordered": "Ordered list";
+    readonly "field-richtext-horizontalrule": "Horizontal rule";
+    readonly "field-richtext-align-left": "Align left";
+    readonly "field-richtext-align-center": "Align center";
+    readonly "field-richtext-align-right": "Align right";
+    readonly "field-richtext-align-justify": "Justify";
+    readonly "field-richtext-select": "Select";
+    readonly "field-richtext-headingselect-1": "Heading 1";
+    readonly "field-richtext-headingselect-2": "Heading 2";
+    readonly "field-richtext-headingselect-3": "Heading 3";
+    readonly "field-richtext-headingselect-4": "Heading 4";
+    readonly "field-richtext-headingselect-5": "Heading 5";
+    readonly "field-richtext-headingselect-6": "Heading 6";
+    readonly "field-richtext-alignselect-left": "Left";
+    readonly "field-richtext-alignselect-center": "Center";
+    readonly "field-richtext-alignselect-right": "Right";
+    readonly "field-richtext-alignselect-justify": "Justify";
+    readonly "field-richtext-listselect-bullet": "Bullet list";
+    readonly "field-richtext-listselect-ordered": "Ordered list";
+    readonly "viewport-zoom-in": "Zoom viewport in";
+    readonly "viewport-zoom-out": "Zoom viewport out";
+    readonly "viewport-zoom-auto": "{zoom}% (Auto)";
+    readonly "viewport-toggle-menu": "Toggle viewport menu";
+    readonly "viewport-switch": "Switch to {label} viewport";
+    readonly "viewport-switch-default": "Switch viewport";
+    readonly "plugin-blocks": "Blocks";
+    readonly "plugin-outline": "Outline";
+    readonly "plugin-fields": "Fields";
+    readonly "plugin-components": "Components";
+    readonly "layout-maximize": "maximize";
+    readonly "layout-minimize": "minimize";
+    readonly "loader-loading": "loading";
+};
+type DictionaryKey = keyof typeof defaultDictionary;
+/**
+ * Override any of Puck's built-in UI strings, or provide your own custom strings.
+ */
+type Dictionary = Partial<Record<DictionaryKey, string> & Record<string, string>>;
+
 type Status = "LOADING" | "MOUNTED" | "READY";
 type ZoomConfig = {
     autoZoom: number;
@@ -100,6 +183,7 @@ type AppStore<UserConfig extends Config = Config, G extends UserGenerics<UserCon
     getComponentConfig: (type?: string) => ComponentConfig | null | undefined;
     onAction?: (action: PuckAction, newState: AppState, state: AppState) => void;
     metadata: Metadata;
+    dictionary: Dictionary;
     fields: FieldsSlice;
     history: HistorySlice;
     nodes: NodesSlice;
@@ -114,4 +198,4 @@ type AppStore<UserConfig extends Config = Config, G extends UserGenerics<UserCon
     } | null;
 };
 
-export type { AppStore as A, GetPermissions as G, HistorySlice as H, RefreshPermissions as R };
+export type { AppStore as A, Dictionary as D, GetPermissions as G, HistorySlice as H, RefreshPermissions as R };