@frontify/guideline-blocks-settings 0.28.0 → 0.28.2

package/dist/components/BlockItemWrapper/BlockItemWrapper.es.js

@@ -0,0 +1,73 @@
+import { j as l } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { useState as a, useRef as j, useEffect as g } from "react";
+import { Toolbar as F } from "./Toolbar.es.js";
+import { joinClassNames as p } from "../../utilities/react/joinClassNames.es.js";
+const R = ({
+  children: r,
+  toolbarFlyoutItems: c,
+  toolbarItems: e,
+  shouldHideWrapper: w,
+  shouldHideComponent: n = !1,
+  isDragging: u,
+  shouldFillContainer: f,
+  outlineOffset: o = 2,
+  shouldBeShown: s = !1
+}) => {
+  const [t, m] = a(s), [y, i] = a(!1), x = j(null);
+  if (g(() => {
+    t || i(!0);
+  }, [t]), w)
+    return r;
+  const v = e == null ? void 0 : e.filter((d) => d !== void 0);
+  return /* @__PURE__ */ l.jsxs(
+    "div",
+    {
+      ref: x,
+      onFocus: () => i(!1),
+      onPointerEnter: () => i(!1),
+      "data-test-id": "block-item-wrapper",
+      style: {
+        outlineOffset: o
+      },
+      className: p([
+        "tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse",
+        f && "tw-flex-1 tw-h-full tw-w-full",
+        "hover:tw-outline focus-within:tw-outline",
+        (t || s) && "tw-outline",
+        n && "tw-opacity-0"
+      ]),
+      children: [
+        /* @__PURE__ */ l.jsx(
+          "div",
+          {
+            style: {
+              right: -1 - o,
+              bottom: `calc(100% - ${2 + o}px)`
+            },
+            className: p([
+              "tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-10",
+              "group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100",
+              (t || s) && "tw-opacity-100"
+            ]),
+            children: /* @__PURE__ */ l.jsx(
+              F,
+              {
+                isFlyoutOpen: t,
+                isFlyoutDisabled: y,
+                setIsFlyoutOpen: m,
+                flyoutItems: c,
+                items: v,
+                isDragging: u
+              }
+            )
+          }
+        ),
+        r
+      ]
+    }
+  );
+};
+export {
+  R as BlockItemWrapper
+};
+//# sourceMappingURL=BlockItemWrapper.es.js.map

package/dist/components/BlockItemWrapper/BlockItemWrapper.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { joinClassNames } from '../../utilities';\nimport { Toolbar } from './Toolbar';\nimport { BlockItemWrapperProps, ToolbarItem } from './types';\n\nexport const BlockItemWrapper = ({\n    children,\n    toolbarFlyoutItems,\n    toolbarItems,\n    shouldHideWrapper,\n    shouldHideComponent = false,\n    isDragging,\n    shouldFillContainer,\n    outlineOffset = 2,\n    shouldBeShown = false,\n}: PropsWithChildren<BlockItemWrapperProps>) => {\n    const [isFlyoutOpen, setIsFlyoutOpen] = useState(shouldBeShown);\n    const [isFlyoutDisabled, setIsFlyoutDisabled] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (!isFlyoutOpen) {\n            // This prevents automatic refocusing of the trigger element\n            setIsFlyoutDisabled(true);\n        }\n    }, [isFlyoutOpen]);\n\n    if (shouldHideWrapper) {\n        return children;\n    }\n\n    const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n    return (\n        <div\n            ref={wrapperRef}\n            onFocus={() => setIsFlyoutDisabled(false)}\n            onPointerEnter={() => setIsFlyoutDisabled(false)}\n            data-test-id=\"block-item-wrapper\"\n            style={{\n                outlineOffset,\n            }}\n            className={joinClassNames([\n                'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',\n                shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',\n                'hover:tw-outline focus-within:tw-outline',\n                (isFlyoutOpen || shouldBeShown) && 'tw-outline',\n                shouldHideComponent && 'tw-opacity-0',\n            ])}\n        >\n            <div\n                style={{\n                    right: -1 - outlineOffset,\n                    bottom: `calc(100% - ${2 + outlineOffset}px)`,\n                }}\n                className={joinClassNames([\n                    'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-10',\n                    'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n                    (isFlyoutOpen || shouldBeShown) && 'tw-opacity-100',\n                ])}\n            >\n                <Toolbar\n                    isFlyoutOpen={isFlyoutOpen}\n                    isFlyoutDisabled={isFlyoutDisabled}\n                    setIsFlyoutOpen={setIsFlyoutOpen}\n                    flyoutItems={toolbarFlyoutItems}\n                    items={items}\n                    isDragging={isDragging}\n                />\n            </div>\n            {children}\n        </div>\n    );\n};\n"],"names":["BlockItemWrapper","children","toolbarFlyoutItems","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","isFlyoutOpen","setIsFlyoutOpen","useState","isFlyoutDisabled","setIsFlyoutDisabled","wrapperRef","useRef","useEffect","items","item","jsxs","joinClassNames","jsx","Toolbar"],"mappings":";;;;AAOO,MAAMA,IAAmB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,YAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AACpB,MAAgD;AAC5C,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASH,CAAa,GACxD,CAACI,GAAkBC,CAAmB,IAAIF,EAAS,EAAK,GACxDG,IAAaC,EAAuB,IAAI;AAS9C,MAPAC,EAAU,MAAM;AACZ,IAAKP,KAEDI,EAAoB,EAAI;AAAA,EAC5B,GACD,CAACJ,CAAY,CAAC,GAEbN;AACO,WAAAH;AAGX,QAAMiB,IAAQf,KAAA,gBAAAA,EAAc,OAAO,CAACgB,MAA8BA,MAAS;AAGvE,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKL;AAAA,MACL,SAAS,MAAMD,EAAoB,EAAK;AAAA,MACxC,gBAAgB,MAAMA,EAAoB,EAAK;AAAA,MAC/C,gBAAa;AAAA,MACb,OAAO;AAAA,QACH,eAAAN;AAAA,MACJ;AAAA,MACA,WAAWa,EAAe;AAAA,QACtB;AAAA,QACAd,KAAuB;AAAA,QACvB;AAAA,SACCG,KAAgBD,MAAkB;AAAA,QACnCJ,KAAuB;AAAA,MAAA,CAC1B;AAAA,MAED,UAAA;AAAA,QAAAiB,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,cACH,OAAO,KAAKd;AAAA,cACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,YAC5C;AAAA,YACA,WAAWa,EAAe;AAAA,cACtB;AAAA,cACA;AAAA,eACCX,KAAgBD,MAAkB;AAAA,YAAA,CACtC;AAAA,YAED,UAAAa,gBAAAA,EAAA;AAAA,cAACC;AAAA,cAAA;AAAA,gBACG,cAAAb;AAAA,gBACA,kBAAAG;AAAA,gBACA,iBAAAF;AAAA,gBACA,aAAaT;AAAA,gBACb,OAAAgB;AAAA,gBACA,YAAAZ;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,QACCL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/components/BlockItemWrapper/Toolbar.es.js

@@ -0,0 +1,113 @@
+import { j as e } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { Tooltip as i, TooltipPosition as n, Flyout as p, IconDotsHorizontal16 as x, ActionMenu as h, MenuItemContentSize as m } from "@frontify/fondue";
+import { DEFAULT_DRAGGING_TOOLTIP as u, DEFAULT_DRAG_TOOLTIP as f } from "./constants.es.js";
+import { joinClassNames as j } from "../../utilities/react/joinClassNames.es.js";
+const k = ({
+  items: w,
+  flyoutItems: l,
+  isFlyoutOpen: c,
+  setIsFlyoutOpen: a,
+  isDragging: r,
+  isFlyoutDisabled: d
+}) => /* @__PURE__ */ e.jsx("div", { "data-test-id": "block-item-wrapper-toolbar", className: "tw-flex tw-justify-end", children: /* @__PURE__ */ e.jsxs("div", { className: "tw-bg-white tw-text-box-selected-inverse tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-[2px] tw-px-[1px] tw-spacing tw-items-center tw-h-7 tw-self-start tw-border tw-border-box-selected-inverse tw-rounded", children: [
+  w.map(
+    (t, o) => "draggableProps" in t ? /* @__PURE__ */ e.jsx(
+      i,
+      {
+        withArrow: !0,
+        hoverDelay: 0,
+        enterDelay: 300,
+        open: r,
+        position: n.Top,
+        content: /* @__PURE__ */ e.jsx("div", { children: r ? u : t.tooltip ?? f }),
+        triggerElement: /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            ref: t.setActivatorNodeRef,
+            "data-test-id": "block-item-wrapper-toolbar-btn",
+            ...t.draggableProps,
+            className: j([
+              "tw-bg-base tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm",
+              r ? "tw-cursor-grabbing tw-bg-box-selected-pressed" : "tw-cursor-grab hover:tw-bg-box-selected-hover"
+            ]),
+            children: t.icon
+          }
+        )
+      },
+      o
+    ) : /* @__PURE__ */ e.jsx(
+      i,
+      {
+        withArrow: !0,
+        enterDelay: 300,
+        hoverDelay: 0,
+        disabled: r,
+        position: n.Top,
+        content: /* @__PURE__ */ e.jsx("div", { children: t.tooltip ?? "" }),
+        triggerElement: /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            "data-test-id": "block-item-wrapper-toolbar-btn",
+            onClick: t.onClick,
+            className: "tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm",
+            children: t.icon
+          }
+        )
+      },
+      o
+    )
+  ),
+  l.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6", children: /* @__PURE__ */ e.jsx(
+    p,
+    {
+      isOpen: c && !r,
+      isTriggerDisabled: d,
+      legacyFooter: !1,
+      fitContent: !0,
+      hug: !1,
+      onOpenChange: a,
+      trigger: /* @__PURE__ */ e.jsx(
+        i,
+        {
+          withArrow: !0,
+          hoverDelay: 0,
+          enterDelay: 300,
+          disabled: r,
+          position: n.Top,
+          content: /* @__PURE__ */ e.jsx("div", { children: "Options" }),
+          triggerElement: /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              "data-test-id": "block-item-wrapper-toolbar-flyout",
+              className: "tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex  tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm",
+              children: /* @__PURE__ */ e.jsx(x, {})
+            }
+          )
+        }
+      ),
+      children: /* @__PURE__ */ e.jsx(
+        h,
+        {
+          menuBlocks: l.map((t, o) => ({
+            id: o.toString(),
+            menuItems: t.map((s, b) => ({
+              id: o.toString() + b.toString(),
+              size: m.XSmall,
+              title: s.title,
+              style: s.style,
+              onClick: () => {
+                a(!1), s.onClick();
+              },
+              initialValue: !0,
+              decorator: /* @__PURE__ */ e.jsx("div", { className: "tw-mr-2", children: s.icon })
+            }))
+          }))
+        }
+      )
+    }
+  ) })
+] }) });
+export {
+  k as Toolbar
+};
+//# sourceMappingURL=Toolbar.es.js.map

package/dist/components/BlockItemWrapper/Toolbar.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.es.js","sources":["../../../src/components/BlockItemWrapper/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ActionMenu,\n    Flyout,\n    IconDotsHorizontal16,\n    MenuItemContentSize,\n    Tooltip,\n    TooltipPosition,\n} from '@frontify/fondue';\nimport { ToolbarProps } from './types';\nimport { joinClassNames } from '../../utilities';\nimport { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from './constants';\n\nexport const Toolbar = ({\n    items,\n    flyoutItems,\n    isFlyoutOpen,\n    setIsFlyoutOpen,\n    isDragging,\n    isFlyoutDisabled,\n}: ToolbarProps) => {\n    return (\n        <div data-test-id=\"block-item-wrapper-toolbar\" className=\"tw-flex tw-justify-end\">\n            <div className=\"tw-bg-white tw-text-box-selected-inverse tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-[2px] tw-px-[1px] tw-spacing tw-items-center tw-h-7 tw-self-start tw-border tw-border-box-selected-inverse tw-rounded\">\n                {items.map((item, i) =>\n                    'draggableProps' in item ? (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            hoverDelay={0}\n                            enterDelay={300}\n                            open={isDragging}\n                            position={TooltipPosition.Top}\n                            content={\n                                <div>\n                                    {isDragging ? DEFAULT_DRAGGING_TOOLTIP : item.tooltip ?? DEFAULT_DRAG_TOOLTIP}\n                                </div>\n                            }\n                            triggerElement={\n                                <button\n                                    ref={item.setActivatorNodeRef}\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    {...item.draggableProps}\n                                    className={joinClassNames([\n                                        'tw-bg-base tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm',\n                                        isDragging\n                                            ? 'tw-cursor-grabbing tw-bg-box-selected-pressed'\n                                            : 'tw-cursor-grab hover:tw-bg-box-selected-hover',\n                                    ])}\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ) : (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            enterDelay={300}\n                            hoverDelay={0}\n                            disabled={isDragging}\n                            position={TooltipPosition.Top}\n                            content={<div>{item.tooltip ?? ''}</div>}\n                            triggerElement={\n                                <button\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    onClick={item.onClick}\n                                    className=\"tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm\"\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ),\n                )}\n                {flyoutItems.length > 0 && (\n                    <div className=\"tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6\">\n                        <Flyout\n                            isOpen={isFlyoutOpen && !isDragging}\n                            isTriggerDisabled={isFlyoutDisabled}\n                            legacyFooter={false}\n                            fitContent\n                            hug={false}\n                            onOpenChange={setIsFlyoutOpen}\n                            trigger={\n                                <Tooltip\n                                    withArrow\n                                    hoverDelay={0}\n                                    enterDelay={300}\n                                    disabled={isDragging}\n                                    position={TooltipPosition.Top}\n                                    content={<div>Options</div>}\n                                    triggerElement={\n                                        <div\n                                            data-test-id=\"block-item-wrapper-toolbar-flyout\"\n                                            className=\"tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex  tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm\"\n                                        >\n                                            <IconDotsHorizontal16 />\n                                        </div>\n                                    }\n                                />\n                            }\n                        >\n                            <ActionMenu\n                                menuBlocks={flyoutItems.map((block, blockIndex) => ({\n                                    id: blockIndex.toString(),\n                                    menuItems: block.map((item, itemIndex) => ({\n                                        id: blockIndex.toString() + itemIndex.toString(),\n                                        size: MenuItemContentSize.XSmall,\n                                        title: item.title,\n                                        style: item.style,\n                                        onClick: () => {\n                                            setIsFlyoutOpen(false);\n                                            item.onClick();\n                                        },\n                                        initialValue: true,\n                                        decorator: <div className=\"tw-mr-2\">{item.icon}</div>,\n                                    })),\n                                }))}\n                            />\n                        </Flyout>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["Toolbar","items","flyoutItems","isFlyoutOpen","setIsFlyoutOpen","isDragging","isFlyoutDisabled","jsx","jsxs","item","i","Tooltip","TooltipPosition","DEFAULT_DRAGGING_TOOLTIP","DEFAULT_DRAG_TOOLTIP","joinClassNames","Flyout","IconDotsHorizontal16","ActionMenu","block","blockIndex","itemIndex","MenuItemContentSize"],"mappings":";;;;AAcO,MAAMA,IAAU,CAAC;AAAA,EACpB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AACJ,MAEQC,gBAAAA,EAAA,IAAC,SAAI,gBAAa,8BAA6B,WAAU,0BACrD,UAAAC,gBAAAA,EAAA,KAAC,OAAI,EAAA,WAAU,yNACV,UAAA;AAAA,EAAMP,EAAA;AAAA,IAAI,CAACQ,GAAMC,MACd,oBAAoBD,IAChBF,gBAAAA,EAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QAEG,WAAS;AAAA,QACT,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,MAAMN;AAAA,QACN,UAAUO,EAAgB;AAAA,QAC1B,SACKL,gBAAAA,EAAAA,IAAA,OAAA,EACI,cAAaM,IAA2BJ,EAAK,WAAWK,GAC7D;AAAA,QAEJ,gBACIP,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAKE,EAAK;AAAA,YACV,gBAAa;AAAA,YACZ,GAAGA,EAAK;AAAA,YACT,WAAWM,EAAe;AAAA,cACtB;AAAA,cACAV,IACM,kDACA;AAAA,YAAA,CACT;AAAA,YAEA,UAAKI,EAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,MAxBCC;AAAA,IAAA,IA4BTH,gBAAAA,EAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QAEG,WAAS;AAAA,QACT,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,UAAUN;AAAA,QACV,UAAUO,EAAgB;AAAA,QAC1B,SAASL,gBAAAA,EAAA,IAAC,OAAK,EAAA,UAAAE,EAAK,WAAW,IAAG;AAAA,QAClC,gBACIF,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,gBAAa;AAAA,YACb,SAASE,EAAK;AAAA,YACd,WAAU;AAAA,YAET,UAAKA,EAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,MAdCC;AAAA,IAgBT;AAAA,EAER;AAAA,EACCR,EAAY,SAAS,KACjBK,gBAAAA,EAAA,IAAA,OAAA,EAAI,WAAU,6CACX,UAAAA,gBAAAA,EAAA;AAAA,IAACS;AAAA,IAAA;AAAA,MACG,QAAQb,KAAgB,CAACE;AAAA,MACzB,mBAAmBC;AAAA,MACnB,cAAc;AAAA,MACd,YAAU;AAAA,MACV,KAAK;AAAA,MACL,cAAcF;AAAA,MACd,SACIG,gBAAAA,EAAA;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,WAAS;AAAA,UACT,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,UAAUN;AAAA,UACV,UAAUO,EAAgB;AAAA,UAC1B,SAAUL,gBAAAA,EAAAA,IAAA,OAAA,EAAI,UAAO,UAAA,CAAA;AAAA,UACrB,gBACIA,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,WAAU;AAAA,cAEV,gCAACU,GAAqB,EAAA;AAAA,YAAA;AAAA,UAC1B;AAAA,QAAA;AAAA,MAER;AAAA,MAGJ,UAAAV,gBAAAA,EAAA;AAAA,QAACW;AAAA,QAAA;AAAA,UACG,YAAYhB,EAAY,IAAI,CAACiB,GAAOC,OAAgB;AAAA,YAChD,IAAIA,EAAW,SAAS;AAAA,YACxB,WAAWD,EAAM,IAAI,CAACV,GAAMY,OAAe;AAAA,cACvC,IAAID,EAAW,aAAaC,EAAU,SAAS;AAAA,cAC/C,MAAMC,EAAoB;AAAA,cAC1B,OAAOb,EAAK;AAAA,cACZ,OAAOA,EAAK;AAAA,cACZ,SAAS,MAAM;AACX,gBAAAL,EAAgB,EAAK,GACrBK,EAAK,QAAQ;AAAA,cACjB;AAAA,cACA,cAAc;AAAA,cACd,WAAYF,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,WAAW,YAAK,MAAK;AAAA,YAAA,EACjD;AAAA,UAAA,EACJ;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA,GAER;AAAA,EAER,CAAA,EACJ,CAAA;"}

package/dist/components/BlockItemWrapper/constants.es.js

@@ -0,0 +1,6 @@
+const o = "Drag or press ↵ to move", t = "Move with ↑↓←→ and confirm with ↵";
+export {
+  t as DEFAULT_DRAGGING_TOOLTIP,
+  o as DEFAULT_DRAG_TOOLTIP
+};
+//# sourceMappingURL=constants.es.js.map

package/dist/components/BlockItemWrapper/constants.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.es.js","sources":["../../../src/components/BlockItemWrapper/constants.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const DEFAULT_DRAG_TOOLTIP = 'Drag or press ↵ to move';\nexport const DEFAULT_DRAGGING_TOOLTIP = 'Move with ↑↓←→ and confirm with ↵';\n"],"names":["DEFAULT_DRAG_TOOLTIP","DEFAULT_DRAGGING_TOOLTIP"],"mappings":"AAEO,MAAMA,IAAuB,2BACvBC,IAA2B;"}

package/dist/components/DownloadButton/DownloadButton.es.js

@@ -0,0 +1,39 @@
+import { j as t } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { useFocusRing as s } from "@react-aria/focus";
+import { Tooltip as i, TooltipPosition as l, FOCUS_STYLE as a, IconArrowCircleDown16 as w } from "@frontify/fondue";
+import { joinClassNames as u } from "../../utilities/react/joinClassNames.es.js";
+const m = ({ onDownload: o }) => {
+  const { isFocused: e, focusProps: n } = s();
+  return /* @__PURE__ */ t.jsx(
+    i,
+    {
+      withArrow: !0,
+      position: l.Top,
+      content: "Download",
+      enterDelay: 500,
+      triggerElement: /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          tabIndex: 0,
+          "aria-label": "Download",
+          ...n,
+          className: u(["tw-outline-none tw-rounded", e && a]),
+          onClick: o,
+          onPointerDown: (r) => r.preventDefault(),
+          children: /* @__PURE__ */ t.jsx(
+            "span",
+            {
+              "data-test-id": "download-button",
+              className: "tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line",
+              children: /* @__PURE__ */ t.jsx(w, {})
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  m as DownloadButton
+};
+//# sourceMappingURL=DownloadButton.es.js.map

package/dist/components/DownloadButton/DownloadButton.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadButton.es.js","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { DownloadButtonProps } from './types';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE, IconArrowCircleDown16, Tooltip, TooltipPosition } from '@frontify/fondue';\nimport { joinClassNames } from '../../utilities';\n\nexport const DownloadButton = ({ onDownload }: DownloadButtonProps) => {\n    const { isFocused, focusProps } = useFocusRing();\n\n    return (\n        <Tooltip\n            withArrow\n            position={TooltipPosition.Top}\n            content=\"Download\"\n            enterDelay={500}\n            triggerElement={\n                <button\n                    tabIndex={0}\n                    aria-label=\"Download\"\n                    {...focusProps}\n                    className={joinClassNames(['tw-outline-none tw-rounded', isFocused && FOCUS_STYLE])}\n                    onClick={onDownload}\n                    onPointerDown={(e) => e.preventDefault()}\n                >\n                    <span\n                        data-test-id=\"download-button\"\n                        className=\"tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line\"\n                    >\n                        <IconArrowCircleDown16 />\n                    </span>\n                </button>\n            }\n        />\n    );\n};\n"],"names":["DownloadButton","onDownload","isFocused","focusProps","useFocusRing","jsx","Tooltip","TooltipPosition","joinClassNames","FOCUS_STYLE","e","IconArrowCircleDown16"],"mappings":";;;;AAOO,MAAMA,IAAiB,CAAC,EAAE,YAAAC,QAAsC;AACnE,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAa;AAG3C,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAS;AAAA,MACT,UAAUC,EAAgB;AAAA,MAC1B,SAAQ;AAAA,MACR,YAAY;AAAA,MACZ,gBACIF,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,UAAU;AAAA,UACV,cAAW;AAAA,UACV,GAAGF;AAAA,UACJ,WAAWK,EAAe,CAAC,8BAA8BN,KAAaO,CAAW,CAAC;AAAA,UAClF,SAASR;AAAA,UACT,eAAe,CAACS,MAAMA,EAAE,eAAe;AAAA,UAEvC,UAAAL,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,WAAU;AAAA,cAEV,gCAACM,GAAsB,EAAA;AAAA,YAAA;AAAA,UAC3B;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAIhB;"}

package/dist/components/RichTextEditor/RichTextEditor.es.js

@@ -0,0 +1,42 @@
+import { j as a } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { useState as h, useEffect as p } from "react";
+import { RichTextEditor as E } from "@frontify/fondue";
+import { SerializedText as g } from "./SerializedText.es.js";
+import { floatingButtonSelectors as v, floatingButtonActions as T } from "./plugins/ButtonPlugin/components/FloatingButton/floatingButtonStore.es.js";
+const S = ({
+  id: d = "rte",
+  isEditing: f,
+  value: t,
+  columns: l,
+  gap: u,
+  placeholder: c,
+  plugins: r,
+  onTextChange: o,
+  showSerializedText: m
+}) => {
+  const [n, s] = h(!1), x = (e) => {
+    o && e !== t && o(e), s(!1);
+  };
+  return p(() => {
+    const e = (i) => (i.preventDefault(), i.returnValue = "Unprocessed changes");
+    return n && window.addEventListener("beforeunload", e), () => window.removeEventListener("beforeunload", e);
+  }, [n]), f ? /* @__PURE__ */ a.jsx(
+    E,
+    {
+      id: d,
+      value: t,
+      border: !1,
+      placeholder: c,
+      plugins: r,
+      onValueChanged: () => s(!0),
+      onTextChange: x,
+      hideExternalFloatingModals: (e) => {
+        v.isOpen(e) && T.reset();
+      }
+    }
+  ) : /* @__PURE__ */ a.jsx(g, { value: t, columns: l, gap: u, show: m, plugins: r });
+};
+export {
+  S as RichTextEditor
+};
+//# sourceMappingURL=RichTextEditor.es.js.map

package/dist/components/RichTextEditor/RichTextEditor.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\n\nimport { RichTextEditor as FondueRichTextEditor } from '@frontify/fondue';\nimport { RichTextEditorProps } from './types';\nimport { SerializedText } from './SerializedText';\nimport { floatingButtonActions, floatingButtonSelectors } from './plugins/ButtonPlugin/components';\n\nexport const RichTextEditor = ({\n    id = 'rte',\n    isEditing,\n    value,\n    columns,\n    gap,\n    placeholder,\n    plugins,\n    onTextChange,\n    showSerializedText,\n}: RichTextEditorProps) => {\n    const [shouldPreventPageLeave, setShouldPreventPageLeave] = useState(false);\n\n    const saveText = (newContent: string) => {\n        if (onTextChange && newContent !== value) {\n            onTextChange(newContent);\n        }\n        setShouldPreventPageLeave(false);\n    };\n\n    useEffect(() => {\n        const unloadHandler = (event: BeforeUnloadEvent) => {\n            event.preventDefault();\n            return (event.returnValue = 'Unprocessed changes');\n        };\n\n        if (shouldPreventPageLeave) {\n            window.addEventListener('beforeunload', unloadHandler);\n        }\n\n        return () => window.removeEventListener('beforeunload', unloadHandler);\n    }, [shouldPreventPageLeave]);\n\n    if (isEditing) {\n        return (\n            <FondueRichTextEditor\n                id={id}\n                value={value}\n                border={false}\n                placeholder={placeholder}\n                plugins={plugins}\n                onValueChanged={() => setShouldPreventPageLeave(true)}\n                onTextChange={saveText}\n                hideExternalFloatingModals={(editorId: string) => {\n                    if (floatingButtonSelectors.isOpen(editorId)) {\n                        floatingButtonActions.reset();\n                    }\n                }}\n            />\n        );\n    }\n    return <SerializedText value={value} columns={columns} gap={gap} show={showSerializedText} plugins={plugins} />;\n};\n"],"names":["RichTextEditor","id","isEditing","value","columns","gap","placeholder","plugins","onTextChange","showSerializedText","shouldPreventPageLeave","setShouldPreventPageLeave","useState","saveText","newContent","useEffect","unloadHandler","event","jsx","FondueRichTextEditor","editorId","floatingButtonSelectors","floatingButtonActions","SerializedText"],"mappings":";;;;;AASO,MAAMA,IAAiB,CAAC;AAAA,EAC3B,IAAAC,IAAK;AAAA,EACL,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,oBAAAC;AACJ,MAA2B;AACvB,QAAM,CAACC,GAAwBC,CAAyB,IAAIC,EAAS,EAAK,GAEpEC,IAAW,CAACC,MAAuB;AACjC,IAAAN,KAAgBM,MAAeX,KAC/BK,EAAaM,CAAU,GAE3BH,EAA0B,EAAK;AAAA,EAAA;AAgBnC,SAbAI,EAAU,MAAM;AACN,UAAAC,IAAgB,CAACC,OACnBA,EAAM,eAAe,GACbA,EAAM,cAAc;AAGhC,WAAIP,KACO,OAAA,iBAAiB,gBAAgBM,CAAa,GAGlD,MAAM,OAAO,oBAAoB,gBAAgBA,CAAa;AAAA,EAAA,GACtE,CAACN,CAAsB,CAAC,GAEvBR,IAEIgB,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACG,IAAAlB;AAAA,MACA,OAAAE;AAAA,MACA,QAAQ;AAAA,MACR,aAAAG;AAAA,MACA,SAAAC;AAAA,MACA,gBAAgB,MAAMI,EAA0B,EAAI;AAAA,MACpD,cAAcE;AAAA,MACd,4BAA4B,CAACO,MAAqB;AAC1C,QAAAC,EAAwB,OAAOD,CAAQ,KACvCE,EAAsB,MAAM;AAAA,MAEpC;AAAA,IAAA;AAAA,EAAA,0BAIJC,GAAe,EAAA,OAAApB,GAAc,SAAAC,GAAkB,KAAAC,GAAU,MAAMI,GAAoB,SAAAF,EAAkB,CAAA;AACjH;"}

package/dist/components/RichTextEditor/SerializedText.es.js

@@ -0,0 +1,13 @@
+import { j as a } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { useState as i, useEffect as o } from "react";
+import { serializeRawToHtmlAsync as u } from "./serializer/serializeToHtml.es.js";
+const c = ({ value: e = "", gap: l, columns: r, show: m = !0, plugins: s }) => {
+  const [t, n] = i(null);
+  return o(() => {
+    (async () => n(await u(e, r, l, s)))();
+  }, [e, r, l, s]), !m || t === "<br />" ? null : t !== null ? /* @__PURE__ */ a.jsx("div", { className: "tw-w-full", "data-test-id": "rte-content-html", dangerouslySetInnerHTML: { __html: t } }) : /* @__PURE__ */ a.jsx("div", { className: "tw-rounded-sm tw-bg-base-alt tw-animate-pulse tw-h-full tw-min-h-[10px] tw-w-full" });
+};
+export {
+  c as SerializedText
+};
+//# sourceMappingURL=SerializedText.es.js.map

package/dist/components/RichTextEditor/SerializedText.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SerializedText.es.js","sources":["../../../src/components/RichTextEditor/SerializedText.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport { SerializedTextProps } from './types';\nimport { serializeRawToHtmlAsync } from './serializer';\n\nexport const SerializedText = ({ value = '', gap, columns, show = true, plugins }: SerializedTextProps) => {\n    const [html, setHtml] = useState<string | null>(null);\n\n    useEffect(() => {\n        (async () => {\n            setHtml(await serializeRawToHtmlAsync(value, columns, gap, plugins));\n        })();\n    }, [value, columns, gap, plugins]);\n\n    if (!show || html === '<br />') {\n        return null;\n    }\n\n    return html !== null ? (\n        <div className=\"tw-w-full\" data-test-id=\"rte-content-html\" dangerouslySetInnerHTML={{ __html: html }} />\n    ) : (\n        <div className=\"tw-rounded-sm tw-bg-base-alt tw-animate-pulse tw-h-full tw-min-h-[10px] tw-w-full\" />\n    );\n};\n"],"names":["SerializedText","value","gap","columns","show","plugins","html","setHtml","useState","useEffect","serializeRawToHtmlAsync","jsx"],"mappings":";;;AAMa,MAAAA,IAAiB,CAAC,EAAE,OAAAC,IAAQ,IAAI,KAAAC,GAAK,SAAAC,GAAS,MAAAC,IAAO,IAAM,SAAAC,QAAmC;AACvG,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAwB,IAAI;AAQhD,SANJC,EAAU,MAAM;AACZ,KAAC,YACGF,EAAQ,MAAMG,EAAwBT,GAAOE,GAASD,GAAKG,CAAO,CAAC;AAAA,KAExE,CAACJ,GAAOE,GAASD,GAAKG,CAAO,CAAC,GAE7B,CAACD,KAAQE,MAAS,WACX,OAGJA,MAAS,OACZK,gBAAAA,MAAC,OAAI,EAAA,WAAU,aAAY,gBAAa,oBAAmB,yBAAyB,EAAE,QAAQL,EAAK,EAAA,CAAG,IAErGK,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,oFAAoF,CAAA;AAE3G;"}

package/dist/components/RichTextEditor/constants.es.js

@@ -0,0 +1,5 @@
+const t = "--f-theme-settings-";
+export {
+  t as THEME_PREFIX
+};
+//# sourceMappingURL=constants.es.js.map

package/dist/components/RichTextEditor/constants.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.es.js","sources":["../../../src/components/RichTextEditor/constants.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const THEME_PREFIX = '--f-theme-settings-';\n"],"names":["THEME_PREFIX"],"mappings":"AAEO,MAAMA,IAAe;"}

package/dist/components/RichTextEditor/pluginPresets/defaultPluginsWithLinkChooser.es.js

@@ -0,0 +1,34 @@
+import { PluginComposer as i, SoftBreakPlugin as t, TextStylePlugin as l, BoldPlugin as g, ItalicPlugin as u, UnderlinePlugin as o, StrikethroughPlugin as r, CodePlugin as P, AlignLeftPlugin as s, AlignCenterPlugin as w, AlignRightPlugin as m, AlignJustifyPlugin as d, UnorderedListPlugin as a, CheckboxListPlugin as y, OrderedListPlugin as f, ResetFormattingPlugin as h } from "@frontify/fondue";
+import { TextStylePluginsWithoutImage as p, TextStylesWithoutImage as e } from "../plugins/TextStylePlugins/helpers.es.js";
+import { LinkPlugin as T } from "../plugins/LinkPlugin/index.es.js";
+import { ButtonPlugin as x } from "../plugins/ButtonPlugin/createButtonPlugin.es.js";
+const v = (n) => new i().setPlugin(
+  new t(),
+  new l({
+    textStyles: p
+  })
+).setPlugin(
+  [
+    new g(),
+    new u(),
+    new o(),
+    new r(),
+    new T({ appBridge: n }),
+    new x({ appBridge: n }),
+    new P()
+  ],
+  [
+    new s({ validTypes: e }),
+    new w({ validTypes: e }),
+    new m({ validTypes: e }),
+    new d({ validTypes: e }),
+    new a(),
+    new y(),
+    new f(),
+    new h()
+  ]
+);
+export {
+  v as getDefaultPluginsWithLinkChooser
+};
+//# sourceMappingURL=defaultPluginsWithLinkChooser.es.js.map

package/dist/components/RichTextEditor/pluginPresets/defaultPluginsWithLinkChooser.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultPluginsWithLinkChooser.es.js","sources":["../../../../src/components/RichTextEditor/pluginPresets/defaultPluginsWithLinkChooser.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AppBridgeBlock } from '@frontify/app-bridge';\nimport {\n    AlignCenterPlugin,\n    AlignJustifyPlugin,\n    AlignLeftPlugin,\n    AlignRightPlugin,\n    BoldPlugin,\n    CheckboxListPlugin,\n    CodePlugin,\n    ItalicPlugin,\n    OrderedListPlugin,\n    PluginComposer,\n    ResetFormattingPlugin,\n    SoftBreakPlugin,\n    StrikethroughPlugin,\n    TextStylePlugin,\n    UnderlinePlugin,\n    UnorderedListPlugin,\n} from '@frontify/fondue';\nimport { ButtonPlugin, LinkPlugin, TextStylePluginsWithoutImage, TextStylesWithoutImage } from '../plugins';\n\nexport const getDefaultPluginsWithLinkChooser = (appBridge: AppBridgeBlock) => {\n    return new PluginComposer()\n        .setPlugin(\n            new SoftBreakPlugin(),\n            new TextStylePlugin({\n                textStyles: TextStylePluginsWithoutImage,\n            }),\n        )\n        .setPlugin(\n            [\n                new BoldPlugin(),\n                new ItalicPlugin(),\n                new UnderlinePlugin(),\n                new StrikethroughPlugin(),\n                new LinkPlugin({ appBridge }),\n                new ButtonPlugin({ appBridge }),\n                new CodePlugin(),\n            ],\n            [\n                new AlignLeftPlugin({ validTypes: TextStylesWithoutImage }),\n                new AlignCenterPlugin({ validTypes: TextStylesWithoutImage }),\n                new AlignRightPlugin({ validTypes: TextStylesWithoutImage }),\n                new AlignJustifyPlugin({ validTypes: TextStylesWithoutImage }),\n                new UnorderedListPlugin(),\n                new CheckboxListPlugin(),\n                new OrderedListPlugin(),\n                new ResetFormattingPlugin(),\n            ],\n        );\n};\n"],"names":["getDefaultPluginsWithLinkChooser","appBridge","PluginComposer","SoftBreakPlugin","TextStylePlugin","TextStylePluginsWithoutImage","BoldPlugin","ItalicPlugin","UnderlinePlugin","StrikethroughPlugin","LinkPlugin","ButtonPlugin","CodePlugin","AlignLeftPlugin","TextStylesWithoutImage","AlignCenterPlugin","AlignRightPlugin","AlignJustifyPlugin","UnorderedListPlugin","CheckboxListPlugin","OrderedListPlugin","ResetFormattingPlugin"],"mappings":";;;;AAuBa,MAAAA,IAAmC,CAACC,MACtC,IAAIC,IACN;AAAA,EACG,IAAIC,EAAgB;AAAA,EACpB,IAAIC,EAAgB;AAAA,IAChB,YAAYC;AAAA,EAAA,CACf;AAAA,EAEJ;AAAA,EACG;AAAA,IACI,IAAIC,EAAW;AAAA,IACf,IAAIC,EAAa;AAAA,IACjB,IAAIC,EAAgB;AAAA,IACpB,IAAIC,EAAoB;AAAA,IACxB,IAAIC,EAAW,EAAE,WAAAT,GAAW;AAAA,IAC5B,IAAIU,EAAa,EAAE,WAAAV,GAAW;AAAA,IAC9B,IAAIW,EAAW;AAAA,EACnB;AAAA,EACA;AAAA,IACI,IAAIC,EAAgB,EAAE,YAAYC,GAAwB;AAAA,IAC1D,IAAIC,EAAkB,EAAE,YAAYD,GAAwB;AAAA,IAC5D,IAAIE,EAAiB,EAAE,YAAYF,GAAwB;AAAA,IAC3D,IAAIG,EAAmB,EAAE,YAAYH,GAAwB;AAAA,IAC7D,IAAII,EAAoB;AAAA,IACxB,IAAIC,EAAmB;AAAA,IACvB,IAAIC,EAAkB;AAAA,IACtB,IAAIC,EAAsB;AAAA,EAC9B;AAAA;"}

package/dist/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.es.js

@@ -0,0 +1,54 @@
+import { j as a } from "../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { useElementProps as p } from "@udecode/plate";
+import { useState as l } from "react";
+import { BlockButtonStyles as i } from "../utils/styles.es.js";
+const c = (e) => ({
+  ...p({
+    ...e,
+    elementToAttributes: (t) => ({
+      url: t.href,
+      buttonStyle: t.buttonStyle || "primary",
+      target: t.target || "_blank"
+    })
+  }),
+  // quick fix: hovering <a> with href loses the editor focus
+  onMouseOver: (t) => {
+    t.stopPropagation();
+  }
+}), x = (e) => {
+  const { href: o, target: t, buttonStyle: r } = c(e), { attributes: n, children: s } = e;
+  return /* @__PURE__ */ a.jsx(
+    m,
+    {
+      attributes: n,
+      href: o,
+      target: t,
+      styles: i[`button${r.charAt(0).toUpperCase() + r.slice(1)}`],
+      children: s
+    }
+  );
+}, m = ({
+  attributes: e,
+  styles: o = { hover: {} },
+  children: t,
+  href: r = "#",
+  target: n
+}) => {
+  const [s, u] = l(!1);
+  return /* @__PURE__ */ a.jsx(
+    "a",
+    {
+      ...e,
+      onMouseEnter: () => u(!0),
+      onMouseLeave: () => u(!1),
+      href: r,
+      target: n,
+      style: s ? { ...o, ...o.hover } : o,
+      children: t
+    }
+  );
+};
+export {
+  x as ButtonMarkupElementNode
+};
+//# sourceMappingURL=ButtonMarkupElementNode.es.js.map

package/dist/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonMarkupElementNode.es.js","sources":["../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { HTMLPropsAs, PlateRenderElementProps, Value, useElementProps } from '@udecode/plate';\nimport { CSSProperties, HTMLAttributeAnchorTarget, ReactElement, ReactNode, useState } from 'react';\nimport { RichTextButtonStyle, TButtonElement } from '../types';\nimport { BlockButtonStyles } from '../utils';\n\nexport type ButtonRootProps = PlateRenderElementProps<Value, TButtonElement> & HTMLPropsAs<'a'>;\n\nconst useButton = (props: ButtonRootProps): HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle } => {\n    const _props = useElementProps<TButtonElement, 'a'>({\n        ...props,\n        elementToAttributes: (element) => ({\n            url: element.href,\n            buttonStyle: element.buttonStyle || 'primary',\n            target: element.target || '_blank',\n        }),\n    });\n\n    return {\n        ...(_props as HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle }),\n        // quick fix: hovering <a> with href loses the editor focus\n        onMouseOver: (e) => {\n            e.stopPropagation();\n        },\n    };\n};\n\nexport const ButtonMarkupElementNode = (props: ButtonRootProps) => {\n    const { href, target, buttonStyle } = useButton(props);\n    const { attributes, children } = props;\n\n    return (\n        <HoverableButtonLink\n            attributes={attributes}\n            href={href}\n            target={target}\n            styles={BlockButtonStyles[`button${buttonStyle.charAt(0).toUpperCase() + buttonStyle.slice(1)}`]}\n        >\n            {children}\n        </HoverableButtonLink>\n    );\n};\n\ntype Props = {\n    attributes: ButtonRootProps['attributes'];\n    children: ReactNode;\n    styles?: CSSProperties & { hover?: CSSProperties };\n    href?: string;\n    target?: HTMLAttributeAnchorTarget;\n};\n\nconst HoverableButtonLink = ({\n    attributes,\n    styles = { hover: {} },\n    children,\n    href = '#',\n    target,\n}: Props): ReactElement => {\n    const [hovered, setHovered] = useState(false);\n\n    return (\n        <a\n            {...attributes}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n            href={href}\n            target={target}\n            style={hovered ? { ...styles, ...styles.hover } : styles}\n        >\n            {children}\n        </a>\n    );\n};\n"],"names":["useButton","props","useElementProps","element","e","ButtonMarkupElementNode","href","target","buttonStyle","attributes","children","jsx","HoverableButtonLink","BlockButtonStyles","styles","hovered","setHovered","useState"],"mappings":";;;;AASA,MAAMA,IAAY,CAACC,OAUR;AAAA,EACH,GAVWC,EAAqC;AAAA,IAChD,GAAGD;AAAA,IACH,qBAAqB,CAACE,OAAa;AAAA,MAC/B,KAAKA,EAAQ;AAAA,MACb,aAAaA,EAAQ,eAAe;AAAA,MACpC,QAAQA,EAAQ,UAAU;AAAA,IAAA;AAAA,EAC9B,CACH;AAAA;AAAA,EAKG,aAAa,CAACC,MAAM;AAChB,IAAAA,EAAE,gBAAgB;AAAA,EACtB;AAAA,IAIKC,IAA0B,CAACJ,MAA2B;AAC/D,QAAM,EAAE,MAAAK,GAAM,QAAAC,GAAQ,aAAAC,EAAY,IAAIR,EAAUC,CAAK,GAC/C,EAAE,YAAAQ,GAAY,UAAAC,EAAa,IAAAT;AAG7B,SAAAU,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,YAAAH;AAAA,MACA,MAAAH;AAAA,MACA,QAAAC;AAAA,MACA,QAAQM,EAAkB,SAASL,EAAY,OAAO,CAAC,EAAE,YAAgB,IAAAA,EAAY,MAAM,CAAC,CAAC,EAAE;AAAA,MAE9F,UAAAE;AAAA,IAAA;AAAA,EAAA;AAGb,GAUME,IAAsB,CAAC;AAAA,EACzB,YAAAH;AAAA,EACA,QAAAK,IAAS,EAAE,OAAO,GAAG;AAAA,EACrB,UAAAJ;AAAA,EACA,MAAAJ,IAAO;AAAA,EACP,QAAAC;AACJ,MAA2B;AACvB,QAAM,CAACQ,GAASC,CAAU,IAAIC,EAAS,EAAK;AAGxC,SAAAN,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,cAAc,MAAMO,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,MAAAV;AAAA,MACA,QAAAC;AAAA,MACA,OAAOQ,IAAU,EAAE,GAAGD,GAAQ,GAAGA,EAAO,UAAUA;AAAA,MAEjD,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/index.es.js

@@ -0,0 +1,12 @@
+import { MarkupElement as o } from "@frontify/fondue";
+import { ELEMENT_BUTTON as e } from "../createButtonPlugin.es.js";
+import { ButtonMarkupElementNode as m } from "./ButtonMarkupElementNode.es.js";
+class s extends o {
+  constructor(t = e, r = m) {
+    super(t, r);
+  }
+}
+export {
+  s as ButtonMarkupElement
+};
+//# sourceMappingURL=index.es.js.map

package/dist/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/index.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MarkupElement } from '@frontify/fondue';\nimport { ELEMENT_BUTTON } from '../createButtonPlugin';\nimport { ButtonMarkupElementNode } from './ButtonMarkupElementNode';\n\nexport class ButtonMarkupElement extends MarkupElement {\n    constructor(id = ELEMENT_BUTTON, node = ButtonMarkupElementNode) {\n        super(id, node);\n    }\n}\n"],"names":["ButtonMarkupElement","MarkupElement","id","ELEMENT_BUTTON","node","ButtonMarkupElementNode"],"mappings":";;;AAMO,MAAMA,UAA4BC,EAAc;AAAA,EACnD,YAAYC,IAAKC,GAAgBC,IAAOC,GAAyB;AAC7D,UAAMH,GAAIE,CAAI;AAAA,EAClB;AACJ;"}

package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonButton.es.js

@@ -0,0 +1,17 @@
+import { j as t } from "../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { IconButton16 as r, buttonStyles as e } from "@frontify/fondue";
+import { getPluginType as s } from "@udecode/plate";
+import { ELEMENT_BUTTON as i } from "../createButtonPlugin.es.js";
+import { ButtonToolbarButton as m } from "./ButtonToolbarButton.es.js";
+const a = ({ editor: o, id: n }) => /* @__PURE__ */ t.jsx("div", { "data-plugin-id": n, children: /* @__PURE__ */ t.jsx(
+  m,
+  {
+    type: s(o, i),
+    icon: /* @__PURE__ */ t.jsx("span", { className: "tw-p-2 tw-h-8 tw-justify-center tw-items-center tw-flex", children: /* @__PURE__ */ t.jsx(r, {}) }),
+    styles: e
+  }
+) });
+export {
+  a as ButtonButton
+};
+//# sourceMappingURL=ButtonButton.es.js.map

package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonButton.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonButton.es.js","sources":["../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconButton16, PluginButtonProps, buttonStyles } from '@frontify/fondue';\nimport { getPluginType } from '@udecode/plate';\nimport { ELEMENT_BUTTON } from '../createButtonPlugin';\nimport { ButtonToolbarButton } from './ButtonToolbarButton';\n\nexport const ButtonButton = ({ editor, id }: PluginButtonProps) => (\n    <div data-plugin-id={id}>\n        <ButtonToolbarButton\n            type={getPluginType(editor, ELEMENT_BUTTON)}\n            icon={\n                <span className=\"tw-p-2 tw-h-8 tw-justify-center tw-items-center tw-flex\">\n                    <IconButton16 />\n                </span>\n            }\n            styles={buttonStyles}\n        />\n    </div>\n);\n"],"names":["ButtonButton","editor","id","jsx","ButtonToolbarButton","getPluginType","ELEMENT_BUTTON","IconButton16","buttonStyles"],"mappings":";;;;;AAOa,MAAAA,IAAe,CAAC,EAAE,QAAAC,GAAQ,IAAAC,QACnCC,gBAAAA,EAAAA,IAAC,OAAI,EAAA,kBAAgBD,GACjB,UAAAC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,MAAMC,EAAcJ,GAAQK,CAAc;AAAA,IAC1C,MACKH,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAU,2DACZ,UAAAA,gBAAAA,MAACI,IAAa,CAAA,GAClB;AAAA,IAEJ,QAAQC;AAAA,EAAA;AACZ,EACJ,CAAA;"}

package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonToolbarButton.es.js

@@ -0,0 +1,30 @@
+import { j as i } from "../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { getTooltip as a, getHotkeyByPlatform as l, getButtonClassNames as c } from "@frontify/fondue";
+import { useEditorRef as u, isRangeInSameBlock as m, someNode as f, ToolbarButton as p, focusEditor as g } from "@udecode/plate";
+import { triggerFloatingButton as B } from "../utils/triggerFloatingButton.es.js";
+const y = ({ type: s, ...n }) => {
+  const t = u(), o = !!m(t, {
+    at: t.selection
+  }), r = !!(t != null && t.selection) && f(t, { match: { type: s } });
+  return /* @__PURE__ */ i.jsx(
+    p,
+    {
+      tooltip: a(
+        o ? `Button
+${l("Ctrl+Shift+K")}` : "Buttons can only be set for a single text block."
+      ),
+      classNames: c(o),
+      active: r,
+      onMouseDown: async (e) => {
+        t && (e.preventDefault(), e.stopPropagation(), g(t, t.selection ?? t.prevSelection ?? void 0), setTimeout(() => {
+          B(t, { focused: !0 });
+        }, 0));
+      },
+      ...n
+    }
+  );
+};
+export {
+  y as ButtonToolbarButton
+};
+//# sourceMappingURL=ButtonToolbarButton.es.js.map

package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonToolbarButton.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonToolbarButton.es.js","sources":["../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getButtonClassNames, getHotkeyByPlatform, getTooltip } from '@frontify/fondue';\nimport {\n    BlockToolbarButtonProps,\n    ToolbarButton,\n    focusEditor,\n    isRangeInSameBlock,\n    someNode,\n    useEditorRef,\n} from '@udecode/plate';\n\nimport { triggerFloatingButton } from '../utils';\n\nexport interface LinkToolbarButtonProps extends BlockToolbarButtonProps {\n    /**\n     * Default onMouseDown is getting the link url by calling this promise before inserting the image.\n     */\n    getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;\n}\n\nexport const ButtonToolbarButton = ({ type, ...props }: LinkToolbarButtonProps) => {\n    const editor = useEditorRef();\n    const isEnabled = !!isRangeInSameBlock(editor, {\n        at: editor.selection,\n    });\n\n    const isLink = !!editor?.selection && someNode(editor, { match: { type } });\n\n    return (\n        <ToolbarButton\n            tooltip={getTooltip(\n                isEnabled\n                    ? `Button\\n${getHotkeyByPlatform('Ctrl+Shift+K')}`\n                    : 'Buttons can only be set for a single text block.',\n            )}\n            classNames={getButtonClassNames(isEnabled)}\n            active={isLink}\n            onMouseDown={async (event) => {\n                if (!editor) {\n                    return;\n                }\n\n                event.preventDefault();\n                event.stopPropagation();\n\n                focusEditor(editor, editor.selection ?? editor.prevSelection ?? undefined);\n\n                setTimeout(() => {\n                    triggerFloatingButton(editor, { focused: true });\n                }, 0);\n            }}\n            {...props}\n        />\n    );\n};\n"],"names":["ButtonToolbarButton","type","props","editor","useEditorRef","isEnabled","isRangeInSameBlock","isLink","someNode","jsx","ToolbarButton","getTooltip","getHotkeyByPlatform","getButtonClassNames","event","focusEditor","triggerFloatingButton"],"mappings":";;;;AAqBO,MAAMA,IAAsB,CAAC,EAAE,MAAAC,GAAM,GAAGC,QAAoC;AAC/E,QAAMC,IAASC,KACTC,IAAY,CAAC,CAACC,EAAmBH,GAAQ;AAAA,IAC3C,IAAIA,EAAO;AAAA,EAAA,CACd,GAEKI,IAAS,CAAC,EAACJ,KAAA,QAAAA,EAAQ,cAAaK,EAASL,GAAQ,EAAE,OAAO,EAAE,MAAAF,EAAK,EAAG,CAAA;AAGtE,SAAAQ,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAASC;AAAA,QACLN,IACM;AAAA,EAAWO,EAAoB,cAAc,CAAC,KAC9C;AAAA,MACV;AAAA,MACA,YAAYC,EAAoBR,CAAS;AAAA,MACzC,QAAQE;AAAA,MACR,aAAa,OAAOO,MAAU;AAC1B,QAAKX,MAILW,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GAEtBC,EAAYZ,GAAQA,EAAO,aAAaA,EAAO,iBAAiB,MAAS,GAEzE,WAAW,MAAM;AACb,UAAAa,EAAsBb,GAAQ,EAAE,SAAS,GAAM,CAAA;AAAA,WAChD,CAAC;AAAA,MACR;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGhB;"}

package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.es.js

@@ -0,0 +1,16 @@
+import { j as t } from "../../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { EditModal as s } from "./EditButtonModal/EditModal.es.js";
+import { FloatingButton as n } from "./FloatingButton.es.js";
+import { useFloatingButtonSelectors as e } from "./floatingButtonStore.es.js";
+import { InsertButtonModal as m } from "./InsertButtonModal/InsertButtonModal.es.js";
+const x = () => {
+  const i = e().isEditing(), o = /* @__PURE__ */ t.jsx(m, {}), r = i ? o : /* @__PURE__ */ t.jsx(s, {});
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(n.InsertRoot, { children: o }),
+    /* @__PURE__ */ t.jsx(n.EditRoot, { children: r })
+  ] });
+};
+export {
+  x as CustomFloatingButton
+};
+//# sourceMappingURL=CustomFloatingButton.es.js.map

package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFloatingButton.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { EditModal } from './EditButtonModal/EditModal';\nimport { FloatingButton } from './FloatingButton';\nimport { useFloatingButtonSelectors } from './floatingButtonStore';\nimport { InsertButtonModal } from './InsertButtonModal/InsertButtonModal';\n\nexport const CustomFloatingButton = () => {\n    const isEditing = useFloatingButtonSelectors().isEditing();\n\n    const input = <InsertButtonModal />;\n    const editContent = isEditing ? input : <EditModal />;\n    return (\n        <>\n            <FloatingButton.InsertRoot>{input}</FloatingButton.InsertRoot>\n            <FloatingButton.EditRoot>{editContent}</FloatingButton.EditRoot>\n        </>\n    );\n};\n"],"names":["CustomFloatingButton","isEditing","useFloatingButtonSelectors","input","InsertButtonModal","editContent","jsx","EditModal","jsxs","Fragment","FloatingButton"],"mappings":";;;;;AAOO,MAAMA,IAAuB,MAAM;AAChC,QAAAC,IAAYC,IAA6B,aAEzCC,0BAASC,GAAkB,CAAA,CAAA,GAC3BC,IAAcJ,IAAYE,IAAQG,gBAAAA,EAAAA,IAACC,GAAU,CAAA,CAAA;AACnD,SAEQC,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,IAACH,gBAAAA,EAAAA,IAAAI,EAAe,YAAf,EAA2B,UAAMP,EAAA,CAAA;AAAA,IACjCG,gBAAAA,EAAAA,IAAAI,EAAe,UAAf,EAAyB,UAAYL,EAAA,CAAA;AAAA,EAC1C,EAAA,CAAA;AAER;"}

package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.es.js

@@ -0,0 +1,37 @@
+import { j as t } from "../../../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { IconPen16 as o, IconTrashBin16 as s } from "@frontify/fondue";
+import { useFloatingButtonUrlInput as r } from "../FloatingButtonUrlInput.es.js";
+import { BlockStyles as a } from "../../../../styles.es.js";
+import { FloatingButton as n } from "../FloatingButton.es.js";
+const p = () => {
+  const e = r({});
+  return /* @__PURE__ */ t.jsx("div", { "data-test-id": "floating-button-edit", className: "tw-bg-white tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]", children: /* @__PURE__ */ t.jsxs("span", { "data-test-id": "preview-button-flyout", className: "tw-flex tw-justify-between", children: [
+    /* @__PURE__ */ t.jsx("span", { className: "tw-pointer-events-none", style: a.p, children: e.defaultValue }),
+    /* @__PURE__ */ t.jsxs("span", { className: "tw-flex tw-gap-2", children: [
+      /* @__PURE__ */ t.jsx(
+        "span",
+        {
+          role: "button",
+          tabIndex: 0,
+          "data-test-id": "edit-button-button",
+          className: "tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1",
+          children: /* @__PURE__ */ t.jsx(n.EditButton, { children: /* @__PURE__ */ t.jsx(o, {}) })
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        "span",
+        {
+          role: "button",
+          tabIndex: 0,
+          "data-test-id": "remove-button-button",
+          className: "tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1",
+          children: /* @__PURE__ */ t.jsx(n.UnlinkButton, { children: /* @__PURE__ */ t.jsx(s, {}) })
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  p as EditModal
+};
+//# sourceMappingURL=EditModal.es.js.map