@puckeditor/core 0.22.0-canary.faffb521 → 0.22.0

package/dist/{chunk-4V66DSMA.mjs → chunk-GKUX6MNS.mjs}

@@ -1,13 +1,13 @@
 import {
   styles_module_default
-} from "./chunk-AOEDIUVK.mjs";
+} from "./chunk-H635BA2V.mjs";
 import {
   LoadedRichTextMenuInner
-} from "./chunk-6PUO3QRB.mjs";
+} from "./chunk-4US666EQ.mjs";
 import {
   useAppStore,
   useAppStoreApi
-} from "./chunk-OVPTKQ2P.mjs";
+} from "./chunk-XQHCQEAF.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-YKFH7JSW.mjs").then((m) => ({
+  () => import("./full-6ZILLKCS.mjs").then((m) => ({
     default: m.LoadedRichTextMenuFull
   }))
 );

package/dist/{chunk-AOEDIUVK.mjs → chunk-H635BA2V.mjs}

@@ -4,7 +4,7 @@ import {
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/RichTextEditor/styles.module.css#css-module
 init_react_import();
-var styles_module_default = { "RichTextEditor": "_RichTextEditor_z25h4_1", "RichTextEditor--editor": "_RichTextEditor--editor_z25h4_50", "RichTextEditor--disabled": "_RichTextEditor--disabled_z25h4_107", "RichTextEditor--isActive": "_RichTextEditor--isActive_z25h4_111", "RichTextEditor-menu": "_RichTextEditor-menu_z25h4_117" };
+var styles_module_default = { "RichTextEditor": "_RichTextEditor_5wzos_1", "RichTextEditor--editor": "_RichTextEditor--editor_5wzos_50", "RichTextEditor--disabled": "_RichTextEditor--disabled_5wzos_123", "RichTextEditor--isActive": "_RichTextEditor--isActive_5wzos_159", "RichTextEditor-menu": "_RichTextEditor-menu_5wzos_165" };
 
 export {
   styles_module_default

package/dist/{chunk-4X2SLJRQ.mjs → chunk-M5GPDW62.mjs}

@@ -3,7 +3,7 @@ import {
   AlignJustify,
   AlignLeft,
   AlignRight
-} from "./chunk-OVPTKQ2P.mjs";
+} from "./chunk-XQHCQEAF.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";

package/dist/{chunk-CO6PRTVM.mjs → chunk-SSXLOL3N.mjs}

@@ -1,6 +1,6 @@
 import {
   styles_module_default
-} from "./chunk-AOEDIUVK.mjs";
+} from "./chunk-H635BA2V.mjs";
 import {
   defaultAppState,
   resolveComponentData
@@ -377,6 +377,11 @@ var mapDeep = (source, path, render) => {
 
 // components/RichTextEditor/lib/use-richtext-props.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
+var RichTextRender = lazy(
+  () => import("./Render-DQXAYUBI.mjs").then((m) => ({
+    default: m.RichTextRender
+  }))
+);
 function useRichtextProps(fields, props) {
   const findAllRichtextKeys = (fields2, path = []) => {
     if (!fields2) return [];
@@ -401,11 +406,6 @@ function useRichtextProps(fields, props) {
   const richtextKeys = useMemo2(() => findAllRichtextKeys(fields), [fields]);
   const richtextProps = useMemo2(() => {
     if (!(richtextKeys == null ? void 0 : richtextKeys.length)) return {};
-    const RichTextRender = lazy(
-      () => import("./Render-MJ563JES.mjs").then((m) => ({
-        default: m.RichTextRender
-      }))
-    );
     let result = __spreadValues({}, props);
     for (const { path, field } of richtextKeys) {
       result = mapDeep(result, path, (content) => /* @__PURE__ */ jsx2(

package/dist/{chunk-MQKADUDK.mjs → chunk-XIGSFEU7.mjs}

@@ -1,7 +1,7 @@
 import {
   List,
   ListOrdered
-} from "./chunk-OVPTKQ2P.mjs";
+} from "./chunk-XQHCQEAF.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";

package/dist/{chunk-OVPTKQ2P.mjs → chunk-XQHCQEAF.mjs}

@@ -24,12 +24,66 @@ import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";
 
+// components/ActionBar/index.tsx
+init_react_import();
+import { forwardRef } from "react";
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css#css-module
+init_react_import();
+var styles_module_default = { "ActionBar": "_ActionBar_5vdfr_1", "ActionBar-label": "_ActionBar-label_5vdfr_17", "ActionBarAction": "_ActionBarAction_5vdfr_30", "ActionBar-group": "_ActionBar-group_5vdfr_38", "ActionBarAction--disabled": "_ActionBarAction--disabled_5vdfr_74", "ActionBarAction--active": "_ActionBarAction--active_5vdfr_104", "ActionBar-separator": "_ActionBar-separator_5vdfr_117" };
+
+// components/ActionBar/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var getClassName = get_class_name_factory_default("ActionBar", styles_module_default);
+var getActionClassName = get_class_name_factory_default("ActionBarAction", styles_module_default);
+var ActionBar = ({
+  label,
+  children
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: getClassName(),
+    onClick: (e) => {
+      e.stopPropagation();
+    },
+    children: [
+      label && /* @__PURE__ */ jsx(ActionBar.Group, { children: /* @__PURE__ */ jsx("div", { className: getClassName("label"), children: label }) }),
+      children
+    ]
+  }
+);
+var Action = forwardRef((_a, ref) => {
+  var _b = _a, { children, label, onClick, active = false, disabled } = _b, rest = __objRest(_b, ["children", "label", "onClick", "active", "disabled"]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button"
+    }, rest), {
+      ref,
+      className: getActionClassName({ active, disabled }),
+      onClick,
+      title: label,
+      tabIndex: 0,
+      disabled,
+      children
+    })
+  );
+});
+Action.displayName = "Action";
+var Group = ({ children }) => /* @__PURE__ */ jsx("div", { className: getClassName("group"), children });
+var Label = ({ label }) => /* @__PURE__ */ jsx("div", { className: getClassName("label"), children: label });
+var Separator = () => /* @__PURE__ */ jsx("div", { className: getClassName("separator") });
+ActionBar.Action = Action;
+ActionBar.Label = Label;
+ActionBar.Group = Group;
+ActionBar.Separator = Separator;
+
 // ../../node_modules/lucide-react/dist/esm/icons/align-left.js
 init_react_import();
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 init_react_import();
-import { forwardRef as forwardRef2, createElement as createElement2 } from "react";
+import { forwardRef as forwardRef3, createElement as createElement2 } from "react";
 
 // ../../node_modules/lucide-react/dist/esm/shared/src/utils.js
 init_react_import();
@@ -40,7 +94,7 @@ var mergeClasses = (...classes) => classes.filter((className, index, array) => {
 
 // ../../node_modules/lucide-react/dist/esm/Icon.js
 init_react_import();
-import { forwardRef, createElement } from "react";
+import { forwardRef as forwardRef2, createElement } from "react";
 
 // ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
 init_react_import();
@@ -57,7 +111,7 @@ var defaultAttributes = {
 };
 
 // ../../node_modules/lucide-react/dist/esm/Icon.js
-var Icon = forwardRef(
+var Icon = forwardRef2(
   (_a, ref) => {
     var _b = _a, {
       color = "currentColor",
@@ -97,7 +151,7 @@ var Icon = forwardRef(
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
-  const Component = forwardRef2(
+  const Component = forwardRef3(
     (_a, ref) => {
       var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
       return createElement2(Icon, __spreadValues({
@@ -1357,33 +1411,16 @@ function useAppStoreApi() {
   return useContext(appStoreContext);
 }
 
-// components/RichTextMenu/lib/use-control-context.ts
+// components/IconButton/IconButton.tsx
 init_react_import();
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var ControlContext = createContext2({});
-var useControlContext = () => {
-  return useContext2(ControlContext);
-};
+import { forwardRef as forwardRef4, useState } from "react";
 
-// components/RichTextMenu/components/SelectControl/index.tsx
-init_react_import();
-import { useMemo } from "react";
-
-// components/Select/index.tsx
+// css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css#css-module
 init_react_import();
+var IconButton_module_default = { "IconButton": "_IconButton_yuha3_1", "IconButton--active": "_IconButton--active_yuha3_15", "IconButton--disabled": "_IconButton--disabled_yuha3_28" };
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/Select/styles.module.css#css-module
+// components/Loader/index.tsx
 init_react_import();
-var styles_module_default = { "Select": "_Select_xjbef_1", "Select-button": "_Select-button_xjbef_6", "Select--hasOptions": "_Select--hasOptions_xjbef_19", "Select--disabled": "_Select--disabled_xjbef_23", "Select-buttonIcon": "_Select-buttonIcon_xjbef_27", "Select--standalone": "_Select--standalone_xjbef_33", "Select--actionBar": "_Select--actionBar_xjbef_38", "Select--hasValue": "_Select--hasValue_xjbef_44", "Select-items": "_Select-items_xjbef_61", "SelectItem": "_SelectItem_xjbef_72", "SelectItem--isSelected": "_SelectItem--isSelected_xjbef_87", "SelectItem-icon": "_SelectItem-icon_xjbef_93" };
-
-// components/Select/index.tsx
-import { useState } from "react";
-import {
-  Popover,
-  PopoverContent,
-  PopoverPortal,
-  PopoverTrigger
-} from "@radix-ui/react-popover";
 
 // lib/index.ts
 init_react_import();
@@ -1579,16 +1616,146 @@ var useResetAutoZoom = (frameRef) => {
   return resetAutoZoom;
 };
 
+// css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css#css-module
+init_react_import();
+var styles_module_default2 = { "Loader": "_Loader_1w5zn_13", "loader-animation": "_loader-animation_1w5zn_1" };
+
+// components/Loader/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var getClassName2 = get_class_name_factory_default("Loader", styles_module_default2);
+var Loader = (_a) => {
+  var _b = _a, {
+    color,
+    size = 16
+  } = _b, props = __objRest(_b, [
+    "color",
+    "size"
+  ]);
+  return /* @__PURE__ */ jsx2(
+    "span",
+    __spreadValues({
+      className: getClassName2(),
+      style: {
+        width: size,
+        height: size,
+        color
+      },
+      "aria-label": "loading"
+    }, props)
+  );
+};
+
+// components/IconButton/IconButton.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var getClassName3 = get_class_name_factory_default("IconButton", IconButton_module_default);
+var IconButton = forwardRef4(
+  (_a, ref) => {
+    var _b = _a, {
+      active = false,
+      children,
+      href,
+      onClick,
+      type,
+      disabled,
+      tabIndex,
+      newTab,
+      fullWidth,
+      title,
+      suppressHydrationWarning
+    } = _b, rest = __objRest(_b, [
+      "active",
+      "children",
+      "href",
+      "onClick",
+      "type",
+      "disabled",
+      "tabIndex",
+      "newTab",
+      "fullWidth",
+      "title",
+      "suppressHydrationWarning"
+    ]);
+    const [loading, setLoading] = useState(false);
+    const ElementType = href ? "a" : "button";
+    return /* @__PURE__ */ jsxs2(
+      ElementType,
+      __spreadProps(__spreadValues({}, rest), {
+        ref,
+        className: getClassName3({
+          active,
+          disabled,
+          fullWidth
+        }),
+        onClick: (e) => {
+          if (!onClick) return;
+          setLoading(true);
+          Promise.resolve(onClick(e)).then(() => {
+            setLoading(false);
+          });
+        },
+        type,
+        disabled: disabled || loading,
+        tabIndex,
+        target: newTab ? "_blank" : void 0,
+        rel: newTab ? "noreferrer" : void 0,
+        href,
+        title,
+        "aria-label": title,
+        suppressHydrationWarning,
+        children: [
+          children,
+          loading && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            "\xA0\xA0",
+            /* @__PURE__ */ jsx3(Loader, { size: 14 })
+          ] })
+        ]
+      })
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+// components/RichTextMenu/lib/use-control-context.ts
+init_react_import();
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var ControlContext = createContext2({});
+var useControlContext = () => {
+  return useContext2(ControlContext);
+};
+
+// components/RichTextMenu/components/SelectControl/index.tsx
+init_react_import();
+import { useMemo } from "react";
+
 // components/Select/index.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var getClassName = get_class_name_factory_default("Select", styles_module_default);
-var getItemClassName = get_class_name_factory_default("SelectItem", styles_module_default);
+init_react_import();
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/Select/styles.module.css#css-module
+init_react_import();
+var styles_module_default3 = { "Select": "_Select_1n4iv_1", "Select-buttonInner": "_Select-buttonInner_1n4iv_6", "Select-buttonIcon": "_Select-buttonIcon_1n4iv_11", "Select--standalone": "_Select--standalone_1n4iv_17", "Select--actionBar": "_Select--actionBar_1n4iv_22", "Select-items": "_Select-items_1n4iv_27", "SelectItem": "_SelectItem_1n4iv_38", "SelectItem--isSelected": "_SelectItem--isSelected_1n4iv_53", "SelectItem-icon": "_SelectItem-icon_1n4iv_59" };
+
+// components/Select/index.tsx
+import { useState as useState2 } from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverPortal,
+  PopoverTrigger
+} from "@radix-ui/react-popover";
+
+// components/IconButton/index.ts
+init_react_import();
+
+// components/Select/index.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var getClassName4 = get_class_name_factory_default("Select", styles_module_default3);
+var getItemClassName = get_class_name_factory_default("SelectItem", styles_module_default3);
 var Item = ({
   children,
   isSelected,
   onClick
 }) => {
-  return /* @__PURE__ */ jsx("button", { className: getItemClassName({ isSelected }), onClick, children });
+  return /* @__PURE__ */ jsx4("button", { className: getItemClassName({ isSelected }), onClick, children });
 };
 var Select = ({
   children,
@@ -1599,30 +1766,34 @@ var Select = ({
   mode,
   disabled = false
 }) => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState2(false);
   const hasOptions = options.length > 0;
   const isDisabled = disabled || !hasOptions;
-  return /* @__PURE__ */ jsx(
+  const buttonInner = /* @__PURE__ */ jsxs3("div", { className: getClassName4("buttonInner"), children: [
+    /* @__PURE__ */ jsx4("span", { className: getClassName4("buttonIcon"), children }),
+    /* @__PURE__ */ jsx4(ChevronDown, { size: 12 })
+  ] });
+  const trigger = mode === "actionBar" ? /* @__PURE__ */ jsx4(Action, { active: value !== defaultValue, disabled: isDisabled, children: buttonInner }) : /* @__PURE__ */ jsx4(
+    IconButton,
+    {
+      title: "Select",
+      active: value !== defaultValue,
+      disabled: isDisabled,
+      children: buttonInner
+    }
+  );
+  return /* @__PURE__ */ jsx4(
     "div",
     {
-      className: getClassName({
-        hasValue: value !== defaultValue,
-        hasOptions,
+      className: getClassName4({
         actionBar: mode === "actionBar",
-        standalone: mode === "standalone",
-        disabled: isDisabled
+        standalone: mode === "standalone"
       }),
-      children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-        hasOptions ? /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: getClassName("button"), children: [
-          /* @__PURE__ */ jsx("span", { className: getClassName("buttonIcon"), children }),
-          /* @__PURE__ */ jsx(ChevronDown, { size: 12 })
-        ] }) }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: getClassName("button"), children: [
-          /* @__PURE__ */ jsx("span", { className: getClassName("buttonIcon"), children }),
-          /* @__PURE__ */ jsx(ChevronDown, { size: 12 })
-        ] }) }),
-        options.length > 0 && /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverContent, { align: "start", children: /* @__PURE__ */ jsx("ul", { className: getClassName("items"), "data-puck-rte-menu": true, children: options.map((option) => {
+      children: /* @__PURE__ */ jsxs3(Popover, { open, onOpenChange: setOpen, children: [
+        hasOptions ? /* @__PURE__ */ jsx4(PopoverTrigger, { asChild: true, children: trigger }) : trigger,
+        options.length > 0 && /* @__PURE__ */ jsx4(PopoverPortal, { children: /* @__PURE__ */ jsx4(PopoverContent, { align: "start", children: /* @__PURE__ */ jsx4("ul", { className: getClassName4("items"), "data-puck-rte-menu": true, children: options.map((option) => {
           const Icon2 = option.icon;
-          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          return /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsxs3(
             Item,
             {
               isSelected: value === option.value,
@@ -1631,7 +1802,7 @@ var Select = ({
                 setOpen(false);
               },
               children: [
-                Icon2 && /* @__PURE__ */ jsx("div", { className: getItemClassName("icon"), children: /* @__PURE__ */ jsx(Icon2, { size: 16 }) }),
+                Icon2 && /* @__PURE__ */ jsx4("div", { className: getItemClassName("icon"), children: /* @__PURE__ */ jsx4(Icon2, { size: 16 }) }),
                 option.label
               ]
             }
@@ -1643,7 +1814,7 @@ var Select = ({
 };
 
 // components/RichTextMenu/components/SelectControl/index.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function SelectControl({
   renderDefaultIcon,
   onChange,
@@ -1661,7 +1832,7 @@ function SelectControl({
     [options]
   );
   const Node = (_b = value && ((_a = optionsByValue[value]) == null ? void 0 : _a.icon)) != null ? _b : renderDefaultIcon;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx5(
     Select,
     {
       options,
@@ -1670,12 +1841,17 @@ function SelectControl({
       defaultValue,
       mode: inline ? "actionBar" : "standalone",
       disabled: readOnly,
-      children: /* @__PURE__ */ jsx2(Node, {})
+      children: /* @__PURE__ */ jsx5(Node, {})
     }
   );
 }
 
 export {
+  ActionBar,
+  Action,
+  Group,
+  Label,
+  Separator,
   AlignCenter,
   AlignJustify,
   AlignLeft,
@@ -1746,6 +1922,8 @@ export {
   useAppStoreApi,
   getBox,
   useResetAutoZoom,
+  Loader,
+  IconButton,
   ControlContext,
   useControlContext,
   SelectControl

package/dist/{full-YKFH7JSW.mjs → full-6ZILLKCS.mjs}

@@ -1,10 +1,10 @@
 import {
   LoadedRichTextMenuInner
-} from "./chunk-6PUO3QRB.mjs";
-import "./chunk-4X2SLJRQ.mjs";
-import "./chunk-GFIZBMKN.mjs";
-import "./chunk-MQKADUDK.mjs";
-import "./chunk-OVPTKQ2P.mjs";
+} from "./chunk-4US666EQ.mjs";
+import "./chunk-M5GPDW62.mjs";
+import "./chunk-3RQGAM3Z.mjs";
+import "./chunk-XIGSFEU7.mjs";
+import "./chunk-XQHCQEAF.mjs";
 import "./chunk-DVZWVU66.mjs";
 import "./chunk-6MO3E35Y.mjs";
 import "./chunk-Y2EFNT5P.mjs";
@@ -24,7 +24,7 @@ init_react_import();
 var defaultEditorState = (ctx, readOnly) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B;
   const editor = ctx.editor;
-  if (!editor) return {};
+  if (!editor || editor.isDestroyed) return {};
   const canChain = () => editor.can().chain();
   return {
     isAlignLeft: editor.isActive({ textAlign: "left" }),