@frontify/guideline-blocks-settings 0.28.0 → 0.28.1

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 { r as l } from "../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
+import { BlockButtonStyles as c } from "../utils/styles.es.js";
+const i = (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 } = i(e), { attributes: s, children: n } = e;
+  return /* @__PURE__ */ a.jsx(
+    m,
+    {
+      attributes: s,
+      href: o,
+      target: t,
+      styles: c[`button${r.charAt(0).toUpperCase() + r.slice(1)}`],
+      children: n
+    }
+  );
+}, m = ({
+  attributes: e,
+  styles: o = { hover: {} },
+  children: t,
+  href: r = "#",
+  target: s
+}) => {
+  const [n, u] = l.useState(!1);
+  return /* @__PURE__ */ a.jsx(
+    "a",
+    {
+      ...e,
+      onMouseEnter: () => u(!0),
+      onMouseLeave: () => u(!1),
+      href: r,
+      target: s,
+      style: n ? { ...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,GAAG;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,WAAS,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,MAC7C;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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconPen16, IconTrashBin16 } from '@frontify/fondue';\nimport { FloatingButton, useFloatingButtonUrlInput } from '..';\nimport { BlockStyles } from '../../../..';\n\nexport const EditModal = () => {\n    const urlHtmlProps = useFloatingButtonUrlInput({});\n\n    return (\n        <div data-test-id=\"floating-button-edit\" className=\"tw-bg-white tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]\">\n            <span data-test-id=\"preview-button-flyout\" className=\"tw-flex tw-justify-between\">\n                <span className=\"tw-pointer-events-none\" style={BlockStyles.p}>\n                    {urlHtmlProps.defaultValue}\n                </span>\n                <span className=\"tw-flex tw-gap-2\">\n                    <span\n                        role=\"button\"\n                        tabIndex={0}\n                        data-test-id=\"edit-button-button\"\n                        className=\"tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1\"\n                    >\n                        <FloatingButton.EditButton>\n                            <IconPen16 />\n                        </FloatingButton.EditButton>\n                    </span>\n\n                    <span\n                        role=\"button\"\n                        tabIndex={0}\n                        data-test-id=\"remove-button-button\"\n                        className=\"tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1\"\n                    >\n                        <FloatingButton.UnlinkButton>\n                            <IconTrashBin16 />\n                        </FloatingButton.UnlinkButton>\n                    </span>\n                </span>\n            </span>\n        </div>\n    );\n};\n"],"names":["EditModal","urlHtmlProps","useFloatingButtonUrlInput","jsx","jsxs","BlockStyles","FloatingButton","IconPen16","IconTrashBin16"],"mappings":";;;;;AAMO,MAAMA,IAAY,MAAM;AACrB,QAAAC,IAAeC,EAA0B,CAAA,CAAE;AAG7C,SAAAC,gBAAAA,EAAAA,IAAC,OAAI,EAAA,gBAAa,wBAAuB,WAAU,4DAC/C,UAAAC,gBAAAA,EAAAA,KAAC,QAAK,EAAA,gBAAa,yBAAwB,WAAU,8BACjD,UAAA;AAAA,IAAAD,gBAAAA,EAAAA,IAAC,UAAK,WAAU,0BAAyB,OAAOE,EAAY,GACvD,YAAa,aAClB,CAAA;AAAA,IACAD,gBAAAA,EAAAA,KAAC,QAAK,EAAA,WAAU,oBACZ,UAAA;AAAA,MAAAD,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,UAAU;AAAA,UACV,gBAAa;AAAA,UACb,WAAU;AAAA,UAEV,gCAACG,EAAe,YAAf,EACG,UAAAH,gBAAAA,MAACI,IAAU,CAAA,GACf;AAAA,QAAA;AAAA,MACJ;AAAA,MAEAJ,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,UAAU;AAAA,UACV,gBAAa;AAAA,UACb,WAAU;AAAA,UAEV,gCAACG,EAAe,cAAf,EACG,UAAAH,gBAAAA,MAACK,IAAe,CAAA,GACpB;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA,GACJ;AAAA,EAAA,EACJ,CAAA,EACJ,CAAA;AAER;"}

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

@@ -0,0 +1,25 @@
+import { createComponentAs as r, createElementAs as i } from "@udecode/plate";
+import { useFloatingButtonEdit as e } from "./useFloatingButtonEdit.es.js";
+import { useFloatingButtonInsert as l } from "./useFloatingButtonInsert.es.js";
+import { FloatingButtonEditButton as s } from "./FloatingButtonEditButton.es.js";
+import { UnlinkButton as u } from "./UnlinkButton.es.js";
+const m = r((n) => {
+  var o;
+  const t = e(n);
+  return ((o = t.style) == null ? void 0 : o.display) === "none" ? null : i("div", t);
+}), p = r((n) => {
+  var o;
+  const t = l(n);
+  return ((o = t.style) == null ? void 0 : o.display) === "none" ? null : i("div", t);
+}), g = {
+  EditRoot: m,
+  InsertRoot: p,
+  EditButton: s,
+  UnlinkButton: u
+};
+export {
+  g as FloatingButton,
+  m as FloatingButtonEditRoot,
+  p as FloatingButtonInsertRoot
+};
+//# sourceMappingURL=FloatingButton.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingButton.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { HTMLPropsAs, UseVirtualFloatingOptions, createComponentAs, createElementAs } from '@udecode/plate';\nimport { useFloatingButtonEdit } from './useFloatingButtonEdit';\nimport { useFloatingButtonInsert } from './useFloatingButtonInsert';\nimport { FloatingButtonEditButton } from './FloatingButtonEditButton';\nimport { UnlinkButton } from './UnlinkButton';\n\nexport type FloatingButtonProps = HTMLPropsAs<'div'> & {\n    floatingOptions?: UseVirtualFloatingOptions;\n};\n\nexport const FloatingButtonEditRoot = createComponentAs<FloatingButtonProps>((props) => {\n    const htmlProps = useFloatingButtonEdit(props);\n\n    if (htmlProps.style?.display === 'none') {\n        return null;\n    }\n\n    return createElementAs('div', htmlProps);\n});\n\nexport const FloatingButtonInsertRoot = createComponentAs<FloatingButtonProps>((props) => {\n    const htmlProps = useFloatingButtonInsert(props);\n\n    if (htmlProps.style?.display === 'none') {\n        return null;\n    }\n    return createElementAs('div', htmlProps);\n});\n\nexport const FloatingButton = {\n    EditRoot: FloatingButtonEditRoot,\n    InsertRoot: FloatingButtonInsertRoot,\n    EditButton: FloatingButtonEditButton,\n    UnlinkButton,\n};\n"],"names":["FloatingButtonEditRoot","createComponentAs","props","htmlProps","useFloatingButtonEdit","_a","createElementAs","FloatingButtonInsertRoot","useFloatingButtonInsert","FloatingButton","FloatingButtonEditButton","UnlinkButton"],"mappings":";;;;;AAYa,MAAAA,IAAyBC,EAAuC,CAACC,MAAU;;AAC9E,QAAAC,IAAYC,EAAsBF,CAAK;AAEzC,WAAAG,IAAAF,EAAU,UAAV,gBAAAE,EAAiB,aAAY,SACtB,OAGJC,EAAgB,OAAOH,CAAS;AAC3C,CAAC,GAEYI,IAA2BN,EAAuC,CAACC,MAAU;;AAChF,QAAAC,IAAYK,EAAwBN,CAAK;AAE3C,WAAAG,IAAAF,EAAU,UAAV,gBAAAE,EAAiB,aAAY,SACtB,OAEJC,EAAgB,OAAOH,CAAS;AAC3C,CAAC,GAEYM,IAAiB;AAAA,EAC1B,UAAUT;AAAA,EACV,YAAYO;AAAA,EACZ,YAAYG;AAAA,EACZ,cAAAC;AACJ;"}

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

@@ -0,0 +1,20 @@
+import { r } from "../../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
+import { createComponentAs as n, createElementAs as e, useEditorRef as i } from "@udecode/plate";
+import { triggerFloatingButtonEdit as s } from "../../utils/triggerFloatingButtonEdit.es.js";
+const u = (o) => {
+  const t = i();
+  return {
+    onClick: r.useCallback(() => {
+      s(t);
+    }, [t]),
+    ...o
+  };
+}, l = n((o) => {
+  const t = u(o);
+  return e("button", t);
+});
+export {
+  l as FloatingButtonEditButton,
+  u as useFloatingButtonEditButton
+};
+//# sourceMappingURL=FloatingButtonEditButton.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingButtonEditButton.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButtonEditButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback } from 'react';\nimport { AsProps, HTMLPropsAs, createComponentAs, createElementAs, useEditorRef } from '@udecode/plate';\nimport { triggerFloatingButtonEdit } from '../../utils/triggerFloatingButtonEdit';\n\nexport const useFloatingButtonEditButton = (props: HTMLPropsAs<'button'>): HTMLPropsAs<'button'> => {\n    const editor = useEditorRef();\n\n    return {\n        onClick: useCallback(() => {\n            triggerFloatingButtonEdit(editor);\n        }, [editor]),\n        ...props,\n    };\n};\n\nexport const FloatingButtonEditButton = createComponentAs<AsProps<'button'>>((props) => {\n    const htmlProps = useFloatingButtonEditButton(props);\n\n    return createElementAs('button', htmlProps);\n});\n"],"names":["useFloatingButtonEditButton","props","editor","useEditorRef","useCallback","triggerFloatingButtonEdit","FloatingButtonEditButton","createComponentAs","htmlProps","createElementAs"],"mappings":";;;AAMa,MAAAA,IAA8B,CAACC,MAAwD;AAChG,QAAMC,IAASC;AAER,SAAA;AAAA,IACH,SAASC,cAAY,MAAM;AACvB,MAAAC,EAA0BH,CAAM;AAAA,IAAA,GACjC,CAACA,CAAM,CAAC;AAAA,IACX,GAAGD;AAAA,EAAA;AAEX,GAEaK,IAA2BC,EAAqC,CAACN,MAAU;AAC9E,QAAAO,IAAYR,EAA4BC,CAAK;AAE5C,SAAAQ,EAAgB,UAAUD,CAAS;AAC9C,CAAC;"}

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

@@ -0,0 +1,26 @@
+import { r as o } from "../../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
+import { mergeProps as s, useComposedRef as l } from "@udecode/plate";
+import { useFloatingButtonSelectors as a, floatingButtonActions as f, floatingButtonSelectors as c } from "./floatingButtonStore.es.js";
+const g = (r) => {
+  const u = a().updated(), e = o.useRef(null);
+  o.useEffect(() => {
+    e.current && u && setTimeout(() => {
+      var t;
+      (t = e.current) == null || t.focus();
+    }, 0);
+  }, [u]);
+  const n = o.useCallback((t) => {
+    f.url(t.target.value);
+  }, []);
+  return s(
+    {
+      onChange: n,
+      defaultValue: c.url()
+    },
+    { ...r, ref: l(r.ref, e) }
+  );
+};
+export {
+  g as useFloatingButtonUrlInput
+};
+//# sourceMappingURL=FloatingButtonUrlInput.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingButtonUrlInput.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButtonUrlInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ChangeEventHandler, useCallback, useEffect, useRef } from 'react';\nimport { HTMLPropsAs, mergeProps, useComposedRef } from '@udecode/plate';\nimport { floatingButtonActions, floatingButtonSelectors, useFloatingButtonSelectors } from './floatingButtonStore';\n\nexport const useFloatingButtonUrlInput = (props: HTMLPropsAs<'input'>): HTMLPropsAs<'input'> => {\n    const updated = useFloatingButtonSelectors().updated();\n    const ref = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (ref.current && updated) {\n            setTimeout(() => {\n                ref.current?.focus();\n            }, 0);\n        }\n    }, [updated]);\n\n    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {\n        floatingButtonActions.url(e.target.value);\n    }, []);\n\n    return mergeProps(\n        {\n            onChange,\n            defaultValue: floatingButtonSelectors.url(),\n        },\n        { ...props, ref: useComposedRef<HTMLInputElement>(props.ref, ref) }\n    );\n};\n"],"names":["useFloatingButtonUrlInput","props","updated","useFloatingButtonSelectors","ref","useRef","useEffect","_a","onChange","useCallback","e","floatingButtonActions","mergeProps","floatingButtonSelectors","useComposedRef"],"mappings":";;;AAMa,MAAAA,IAA4B,CAACC,MAAsD;AACtF,QAAAC,IAAUC,IAA6B,WACvCC,IAAMC,SAAyB,IAAI;AAEzCC,EAAAA,EAAAA,UAAU,MAAM;AACR,IAAAF,EAAI,WAAWF,KACf,WAAW,MAAM;;AACb,OAAAK,IAAAH,EAAI,YAAJ,QAAAG,EAAa;AAAA,OACd,CAAC;AAAA,EACR,GACD,CAACL,CAAO,CAAC;AAEN,QAAAM,IAAiDC,cAAY,CAACC,MAAM;AAChD,IAAAC,EAAA,IAAID,EAAE,OAAO,KAAK;AAAA,EAC5C,GAAG,CAAE,CAAA;AAEE,SAAAE;AAAA,IACH;AAAA,MACI,UAAAJ;AAAA,MACA,cAAcK,EAAwB,IAAI;AAAA,IAC9C;AAAA,IACA,EAAE,GAAGZ,GAAO,KAAKa,EAAiCb,EAAM,KAAKG,CAAG,EAAE;AAAA,EAAA;AAE1E;"}

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

@@ -0,0 +1,69 @@
+import { j as e } from "../../../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { FormControl as d } from "@frontify/fondue";
+import { r as m } from "../../../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
+import { InsertModal as y } from "../../../../LinkPlugin/FloatingLink/InsertLinkModal/InsertModal.es.js";
+import { useInsertModal as f } from "./useInsertModal.es.js";
+import { BlockStyles as n } from "../../../../styles.es.js";
+const j = () => {
+  const r = f(), { state: t, onButtonStyleChange: o } = r;
+  return /* @__PURE__ */ e.jsx(y, { ...r, testId: "floating-button-insert", children: /* @__PURE__ */ e.jsx("div", { className: "tw-pt-5", children: /* @__PURE__ */ e.jsxs(
+    d,
+    {
+      label: {
+        children: "Button Style",
+        htmlFor: "buttonStyle",
+        required: !0
+      },
+      children: [
+        /* @__PURE__ */ e.jsx(
+          i,
+          {
+            id: "primary",
+            styles: n.buttonPrimary,
+            isActive: t.buttonStyle === "primary",
+            onClick: () => o("primary"),
+            children: t.text || "Primary Button"
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          i,
+          {
+            id: "secondary",
+            styles: n.buttonSecondary,
+            isActive: t.buttonStyle === "secondary",
+            onClick: () => o("secondary"),
+            children: t.text || "Secondary Button"
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          i,
+          {
+            id: "tertiary",
+            styles: n.buttonTertiary,
+            isActive: t.buttonStyle === "tertiary",
+            onClick: () => o("tertiary"),
+            children: t.text || "Tertiary Button"
+          }
+        )
+      ]
+    }
+  ) }) });
+}, i = ({ id: r, styles: t, isActive: o, onClick: l, children: a }) => {
+  const [u, s] = m.useState(!1), c = () => t && t.hover && u ? { ...t, ...t.hover } : t;
+  return /* @__PURE__ */ e.jsx(
+    "button",
+    {
+      "data-test-id": `floating-button-insert-${r}`,
+      onMouseEnter: () => s(!0),
+      onMouseLeave: () => s(!1),
+      onClick: l,
+      style: c(),
+      className: o ? "tw-outline tw-outline-1 tw-outline-violet-60 tw-outline-offset-2 tw-w-fit" : "tw-w-fit",
+      children: a
+    }
+  );
+};
+export {
+  j as InsertButtonModal
+};
+//# sourceMappingURL=InsertButtonModal.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InsertButtonModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FormControl } from '@frontify/fondue';\nimport { CSSProperties, ReactElement, ReactNode, useState } from 'react';\nimport { InsertModal } from '../../../../LinkPlugin/FloatingLink/InsertLinkModal/InsertModal';\nimport { useInsertModal } from './useInsertModal';\nimport { BlockStyles } from '../../../../styles';\n\nexport const InsertButtonModal = () => {\n    const modalProps = useInsertModal();\n    const { state, onButtonStyleChange } = modalProps;\n\n    return (\n        <InsertModal {...modalProps} testId=\"floating-button-insert\">\n            <div className=\"tw-pt-5\">\n                <FormControl\n                    label={{\n                        children: 'Button Style',\n                        htmlFor: 'buttonStyle',\n                        required: true,\n                    }}\n                >\n                    <HoverableButton\n                        id=\"primary\"\n                        styles={BlockStyles.buttonPrimary}\n                        isActive={state.buttonStyle === 'primary'}\n                        onClick={() => onButtonStyleChange('primary')}\n                    >\n                        {state.text || 'Primary Button'}\n                    </HoverableButton>\n\n                    <HoverableButton\n                        id=\"secondary\"\n                        styles={BlockStyles.buttonSecondary}\n                        isActive={state.buttonStyle === 'secondary'}\n                        onClick={() => onButtonStyleChange('secondary')}\n                    >\n                        {state.text || 'Secondary Button'}\n                    </HoverableButton>\n\n                    <HoverableButton\n                        id=\"tertiary\"\n                        styles={BlockStyles.buttonTertiary}\n                        isActive={state.buttonStyle === 'tertiary'}\n                        onClick={() => onButtonStyleChange('tertiary')}\n                    >\n                        {state.text || 'Tertiary Button'}\n                    </HoverableButton>\n                </FormControl>\n            </div>\n        </InsertModal>\n    );\n};\n\ntype Props = {\n    id: string;\n    styles?: CSSProperties & { hover?: CSSProperties };\n    isActive: boolean;\n    onClick: () => void;\n    children: ReactNode;\n};\n\nconst HoverableButton = ({ id, styles, isActive, onClick, children }: Props): ReactElement => {\n    const [hovered, setHovered] = useState(false);\n    const getStyles = () => (styles && styles.hover && hovered ? { ...styles, ...styles.hover } : styles);\n\n    return (\n        <button\n            data-test-id={`floating-button-insert-${id}`}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n            onClick={onClick}\n            style={getStyles()}\n            className={\n                isActive ? 'tw-outline tw-outline-1 tw-outline-violet-60 tw-outline-offset-2 tw-w-fit' : 'tw-w-fit'\n            }\n        >\n            {children}\n        </button>\n    );\n};\n"],"names":["InsertButtonModal","modalProps","useInsertModal","state","onButtonStyleChange","jsx","InsertModal","jsxs","FormControl","HoverableButton","BlockStyles","id","styles","isActive","onClick","children","hovered","setHovered","useState","getStyles"],"mappings":";;;;;;AAQO,MAAMA,IAAoB,MAAM;AACnC,QAAMC,IAAaC,KACb,EAAE,OAAAC,GAAO,qBAAAC,EAAwB,IAAAH;AAGnC,SAAAI,gBAAAA,EAAA,IAACC,KAAa,GAAGL,GAAY,QAAO,0BAChC,UAAAI,gBAAAA,EAAAA,IAAC,OAAI,EAAA,WAAU,WACX,UAAAE,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MACd;AAAA,MAEA,UAAA;AAAA,QAAAH,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,QAAQC,EAAY;AAAA,YACpB,UAAUP,EAAM,gBAAgB;AAAA,YAChC,SAAS,MAAMC,EAAoB,SAAS;AAAA,YAE3C,YAAM,QAAQ;AAAA,UAAA;AAAA,QACnB;AAAA,QAEAC,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,QAAQC,EAAY;AAAA,YACpB,UAAUP,EAAM,gBAAgB;AAAA,YAChC,SAAS,MAAMC,EAAoB,WAAW;AAAA,YAE7C,YAAM,QAAQ;AAAA,UAAA;AAAA,QACnB;AAAA,QAEAC,gBAAAA,EAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,QAAQC,EAAY;AAAA,YACpB,UAAUP,EAAM,gBAAgB;AAAA,YAChC,SAAS,MAAMC,EAAoB,UAAU;AAAA,YAE5C,YAAM,QAAQ;AAAA,UAAA;AAAA,QACnB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAER,CAAA,EACJ,CAAA;AAER,GAUMK,IAAkB,CAAC,EAAE,IAAAE,GAAI,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,GAAS,UAAAC,QAAoC;AAC1F,QAAM,CAACC,GAASC,CAAU,IAAIC,WAAS,EAAK,GACtCC,IAAY,MAAOP,KAAUA,EAAO,SAASI,IAAU,EAAE,GAAGJ,GAAQ,GAAGA,EAAO,MAAA,IAAUA;AAG1F,SAAAP,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,0BAA0BM;AAAA,MACxC,cAAc,MAAMM,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,SAAAH;AAAA,MACA,OAAOK,EAAU;AAAA,MACjB,WACIN,IAAW,8EAA8E;AAAA,MAG5F,UAAAE;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/useInsertModal.es.js

@@ -0,0 +1,105 @@
+import { r as d } from "../../../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
+import { useEditorRef as b, getPluginOptions as h, useHotkeys as E } from "@udecode/plate";
+import { floatingButtonSelectors as u, floatingButtonActions as a } from "../floatingButtonStore.es.js";
+import { ELEMENT_BUTTON as g } from "../../../createButtonPlugin.es.js";
+import { submitFloatingButton as B } from "../../../transforms/submitFloatingButton.es.js";
+import { getButtonStyle as x } from "../../../utils/getButtonStyle.es.js";
+import { CheckboxState as r } from "@frontify/fondue";
+import { isValidUrlOrEmpty as i } from "../../../../LinkPlugin/utils/url.es.js";
+import { addHttps as U } from "../../../../../../../helpers/addHttps.es.js";
+const N = {
+  url: "",
+  text: "",
+  buttonStyle: "primary",
+  newTab: r.Unchecked
+}, k = () => {
+  const [n, o] = d.useReducer((e, s) => {
+    const { type: c, payload: l } = s;
+    switch (c) {
+      case "NEW_TAB":
+        return {
+          ...e,
+          newTab: r.Checked
+        };
+      case "SAME_TAB":
+        return {
+          ...e,
+          newTab: r.Unchecked
+        };
+      case "URL":
+      case "TEXT":
+      case "BUTTON_STYLE":
+      case "INIT":
+        return {
+          ...e,
+          ...l
+        };
+      default:
+        return e;
+    }
+  }, N);
+  return [n, o];
+}, F = () => {
+  const n = b(), [o, e] = k();
+  d.useEffect(() => {
+    const t = x(n);
+    e({
+      type: "INIT",
+      payload: {
+        text: u.text(),
+        buttonStyle: t,
+        newTab: u.newTab() ? r.Checked : r.Unchecked,
+        url: u.url()
+      }
+    });
+  }, [e, n]);
+  const s = (t) => {
+    e({
+      type: "TEXT",
+      payload: { text: t }
+    });
+  }, c = (t) => {
+    e({
+      type: "BUTTON_STYLE",
+      payload: { buttonStyle: t }
+    });
+  }, l = (t) => {
+    e({
+      type: "URL",
+      payload: { url: t }
+    });
+  }, m = (t) => {
+    e(t ? { type: "NEW_TAB" } : { type: "SAME_TAB" });
+  }, y = () => {
+    a.hide();
+  }, p = (t) => {
+    if (!i(o.url) || !T)
+      return;
+    const S = U(o.url);
+    a.text(o.text), a.url(S), a.buttonStyle(o.buttonStyle), a.newTab(o.newTab === r.Checked), B(n) && (t == null || t.preventDefault());
+  }, T = o.url !== "" && o.text !== "", { appBridge: f } = h(n, g);
+  return E(
+    "enter",
+    p,
+    {
+      enableOnFormTags: ["INPUT"]
+    },
+    []
+  ), {
+    state: o,
+    onTextChange: s,
+    onButtonStyleChange: c,
+    onUrlChange: l,
+    onToggleTab: m,
+    onCancel: y,
+    onSave: p,
+    hasValues: T,
+    isValidUrlOrEmpty: i,
+    appBridge: f
+  };
+};
+export {
+  k as InsertModalState,
+  F as useInsertModal
+};
+//# sourceMappingURL=useInsertModal.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useInsertModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/useInsertModal.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Dispatch, Reducer, useEffect, useReducer } from 'react';\nimport { getPluginOptions, useEditorRef, useHotkeys } from '@udecode/plate';\nimport { InsertModalDispatchType, InsertModalStateProps } from './types';\nimport { floatingButtonActions, floatingButtonSelectors } from '../floatingButtonStore';\nimport { ELEMENT_BUTTON } from '../../../createButtonPlugin';\nimport { submitFloatingButton } from '../../../transforms/submitFloatingButton';\nimport { RichTextButtonStyle } from '../../../types';\nimport { getButtonStyle } from '../../../utils/getButtonStyle';\nimport { AppBridgeBlock } from '@frontify/app-bridge';\nimport { CheckboxState } from '@frontify/fondue';\nimport { addHttps } from '../../../../../../../helpers';\nimport { isValidUrlOrEmpty } from '../../../../LinkPlugin/utils/url';\n\nconst initialState: InsertModalStateProps = {\n    url: '',\n    text: '',\n    buttonStyle: 'primary',\n    newTab: CheckboxState.Unchecked,\n};\n\nexport const InsertModalState = (): [InsertModalStateProps, Dispatch<InsertModalDispatchType>] => {\n    const [state, dispatch] = useReducer<Reducer<InsertModalStateProps, InsertModalDispatchType>>((state, action) => {\n        const { type, payload } = action;\n\n        switch (type) {\n            case 'NEW_TAB':\n                return {\n                    ...state,\n                    newTab: CheckboxState.Checked,\n                };\n            case 'SAME_TAB':\n                return {\n                    ...state,\n                    newTab: CheckboxState.Unchecked,\n                };\n            case 'URL':\n            case 'TEXT':\n            case 'BUTTON_STYLE':\n            case 'INIT':\n                return {\n                    ...state,\n                    ...payload,\n                };\n            default:\n                return state;\n        }\n    }, initialState);\n\n    return [state, dispatch];\n};\n\nexport const useInsertModal = () => {\n    const editor = useEditorRef();\n    const [state, dispatch] = InsertModalState();\n\n    useEffect(() => {\n        const buttonStyle = getButtonStyle(editor);\n\n        dispatch({\n            type: 'INIT',\n            payload: {\n                text: floatingButtonSelectors.text(),\n                buttonStyle,\n                newTab: floatingButtonSelectors.newTab() ? CheckboxState.Checked : CheckboxState.Unchecked,\n                url: floatingButtonSelectors.url(),\n            },\n        });\n    }, [dispatch, editor]);\n\n    const onTextChange = (value: string) => {\n        dispatch({\n            type: 'TEXT',\n            payload: { text: value },\n        });\n    };\n\n    const onButtonStyleChange = (value: RichTextButtonStyle) => {\n        dispatch({\n            type: 'BUTTON_STYLE',\n            payload: { buttonStyle: value },\n        });\n    };\n\n    const onUrlChange = (value: string) => {\n        dispatch({\n            type: 'URL',\n            payload: { url: value },\n        });\n    };\n\n    const onToggleTab = (checked: boolean) => {\n        checked ? dispatch({ type: 'NEW_TAB' }) : dispatch({ type: 'SAME_TAB' });\n    };\n\n    const onCancel = () => {\n        floatingButtonActions.hide();\n    };\n\n    const onSave = (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent | undefined) => {\n        if (!isValidUrlOrEmpty(state.url) || !hasValues) {\n            return;\n        }\n\n        const urlToSave = addHttps(state.url);\n\n        floatingButtonActions.text(state.text);\n        floatingButtonActions.url(urlToSave);\n        floatingButtonActions.buttonStyle(state.buttonStyle);\n        floatingButtonActions.newTab(state.newTab === CheckboxState.Checked);\n\n        if (submitFloatingButton(editor)) {\n            event?.preventDefault();\n        }\n    };\n\n    const hasValues = state.url !== '' && state.text !== '';\n\n    const { appBridge } = getPluginOptions<{ appBridge: AppBridgeBlock }>(editor, ELEMENT_BUTTON);\n\n    useHotkeys(\n        'enter',\n        onSave,\n        {\n            enableOnFormTags: ['INPUT'],\n        },\n        []\n    );\n\n    return {\n        state,\n        onTextChange,\n        onButtonStyleChange,\n        onUrlChange,\n        onToggleTab,\n        onCancel,\n        onSave,\n        hasValues,\n        isValidUrlOrEmpty,\n        appBridge,\n    };\n};\n"],"names":["initialState","CheckboxState","InsertModalState","state","dispatch","useReducer","action","type","payload","useInsertModal","editor","useEditorRef","useEffect","buttonStyle","getButtonStyle","floatingButtonSelectors","onTextChange","value","onButtonStyleChange","onUrlChange","onToggleTab","checked","onCancel","floatingButtonActions","onSave","event","isValidUrlOrEmpty","hasValues","urlToSave","addHttps","submitFloatingButton","appBridge","getPluginOptions","ELEMENT_BUTTON","useHotkeys"],"mappings":";;;;;;;;;AAeA,MAAMA,IAAsC;AAAA,EACxC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,aAAa;AAAA,EACb,QAAQC,EAAc;AAC1B,GAEaC,IAAmB,MAAkE;AAC9F,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAAA,WAAoE,CAACF,GAAOG,MAAW;AACvG,UAAA,EAAE,MAAAC,GAAM,SAAAC,EAAY,IAAAF;AAE1B,YAAQC,GAAM;AAAA,MACV,KAAK;AACM,eAAA;AAAA,UACH,GAAGJ;AAAAA,UACH,QAAQF,EAAc;AAAA,QAAA;AAAA,MAE9B,KAAK;AACM,eAAA;AAAA,UACH,GAAGE;AAAAA,UACH,QAAQF,EAAc;AAAA,QAAA;AAAA,MAE9B,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACM,eAAA;AAAA,UACH,GAAGE;AAAAA,UACH,GAAGK;AAAA,QAAA;AAAA,MAEX;AACWL,eAAAA;AAAAA,IACf;AAAA,KACDH,CAAY;AAER,SAAA,CAACG,GAAOC,CAAQ;AAC3B,GAEaK,IAAiB,MAAM;AAChC,QAAMC,IAASC,KACT,CAACR,GAAOC,CAAQ,IAAIF,EAAiB;AAE3CU,EAAAA,EAAAA,UAAU,MAAM;AACN,UAAAC,IAAcC,EAAeJ,CAAM;AAEhC,IAAAN,EAAA;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,QACL,MAAMW,EAAwB,KAAK;AAAA,QACnC,aAAAF;AAAA,QACA,QAAQE,EAAwB,OAAA,IAAWd,EAAc,UAAUA,EAAc;AAAA,QACjF,KAAKc,EAAwB,IAAI;AAAA,MACrC;AAAA,IAAA,CACH;AAAA,EAAA,GACF,CAACX,GAAUM,CAAM,CAAC;AAEf,QAAAM,IAAe,CAACC,MAAkB;AAC3B,IAAAb,EAAA;AAAA,MACL,MAAM;AAAA,MACN,SAAS,EAAE,MAAMa,EAAM;AAAA,IAAA,CAC1B;AAAA,EAAA,GAGCC,IAAsB,CAACD,MAA+B;AAC/C,IAAAb,EAAA;AAAA,MACL,MAAM;AAAA,MACN,SAAS,EAAE,aAAaa,EAAM;AAAA,IAAA,CACjC;AAAA,EAAA,GAGCE,IAAc,CAACF,MAAkB;AAC1B,IAAAb,EAAA;AAAA,MACL,MAAM;AAAA,MACN,SAAS,EAAE,KAAKa,EAAM;AAAA,IAAA,CACzB;AAAA,EAAA,GAGCG,IAAc,CAACC,MAAqB;AAC5B,IAAAjB,EAAAiB,IAAS,EAAE,MAAM,UAAU,IAAc,EAAE,MAAM,WAAA,CAArB;AAAA,EAAiC,GAGrEC,IAAW,MAAM;AACnB,IAAAC,EAAsB,KAAK;AAAA,EAAA,GAGzBC,IAAS,CAACC,MAAuF;AACnG,QAAI,CAACC,EAAkBvB,EAAM,GAAG,KAAK,CAACwB;AAClC;AAGE,UAAAC,IAAYC,EAAS1B,EAAM,GAAG;AAEd,IAAAoB,EAAA,KAAKpB,EAAM,IAAI,GACrCoB,EAAsB,IAAIK,CAAS,GACbL,EAAA,YAAYpB,EAAM,WAAW,GACnDoB,EAAsB,OAAOpB,EAAM,WAAWF,EAAc,OAAO,GAE/D6B,EAAqBpB,CAAM,MAC3Be,KAAA,QAAAA,EAAO;AAAA,EACX,GAGEE,IAAYxB,EAAM,QAAQ,MAAMA,EAAM,SAAS,IAE/C,EAAE,WAAA4B,EAAc,IAAAC,EAAgDtB,GAAQuB,CAAc;AAE5F,SAAAC;AAAA,IACI;AAAA,IACAV;AAAA,IACA;AAAA,MACI,kBAAkB,CAAC,OAAO;AAAA,IAC9B;AAAA,IACA,CAAC;AAAA,EAAA,GAGE;AAAA,IACH,OAAArB;AAAA,IACA,cAAAa;AAAA,IACA,qBAAAE;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAE;AAAA,IACA,QAAAE;AAAA,IACA,WAAAG;AAAA,IACA,mBAAAD;AAAA,IACA,WAAAK;AAAA,EAAA;AAER;"}

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

@@ -0,0 +1,20 @@
+import { r } from "../../../../../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
+import { createComponentAs as n, createElementAs as e, Button as s, useEditorRef as c, focusEditor as i } from "@udecode/plate";
+import { unwrapButton as u } from "../../transforms/unwrapButton.es.js";
+const m = (o) => {
+  const t = c();
+  return {
+    onClick: r.useCallback(() => {
+      u(t), i(t, t.selection ?? void 0);
+    }, [t]),
+    ...o
+  };
+}, f = n((o) => {
+  const t = m(o);
+  return e(s, t);
+});
+export {
+  f as UnlinkButton,
+  m as useUnlinkButton
+};
+//# sourceMappingURL=UnlinkButton.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnlinkButton.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/UnlinkButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback } from 'react';\nimport {\n    AsProps,\n    Button,\n    HTMLPropsAs,\n    createComponentAs,\n    createElementAs,\n    focusEditor,\n    useEditorRef,\n} from '@udecode/plate';\nimport { unwrapButton } from '../../transforms/index';\n\nexport const useUnlinkButton = (props: HTMLPropsAs<'button'>): HTMLPropsAs<'button'> => {\n    const editor = useEditorRef();\n\n    return {\n        onClick: useCallback(() => {\n            unwrapButton(editor);\n            focusEditor(editor, editor.selection ?? undefined);\n        }, [editor]),\n        ...props,\n    };\n};\n\nexport const UnlinkButton = createComponentAs<AsProps<'button'>>((props) => {\n    const htmlProps = useUnlinkButton(props);\n\n    return createElementAs(Button, htmlProps);\n});\n"],"names":["useUnlinkButton","props","editor","useEditorRef","useCallback","unwrapButton","focusEditor","UnlinkButton","createComponentAs","htmlProps","createElementAs","Button"],"mappings":";;;AAca,MAAAA,IAAkB,CAACC,MAAwD;AACpF,QAAMC,IAASC;AAER,SAAA;AAAA,IACH,SAASC,cAAY,MAAM;AACvB,MAAAC,EAAaH,CAAM,GACPI,EAAAJ,GAAQA,EAAO,aAAa,MAAS;AAAA,IAAA,GAClD,CAACA,CAAM,CAAC;AAAA,IACX,GAAGD;AAAA,EAAA;AAEX,GAEaM,IAAeC,EAAqC,CAACP,MAAU;AAClE,QAAAQ,IAAYT,EAAgBC,CAAK;AAEhC,SAAAS,EAAgBC,GAAQF,CAAS;AAC5C,CAAC;"}

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

@@ -0,0 +1,32 @@
+import { createStore as i } from "@udecode/plate";
+const e = i("floatingButton")({
+  openEditorId: null,
+  mouseDown: !1,
+  updated: !1,
+  url: "",
+  text: "",
+  buttonStyle: "primary",
+  newTab: !1,
+  mode: "",
+  isEditing: !1
+}).extendActions((t) => ({
+  reset: () => {
+    t.url(""), t.text(""), t.buttonStyle("primary"), t.newTab(!1), t.mode(""), t.isEditing(!1);
+  }
+})).extendActions((t) => ({
+  show: (o, n) => {
+    t.mode(o), t.isEditing(!1), t.openEditorId(n);
+  },
+  hide: () => {
+    t.reset(), t.openEditorId(null);
+  }
+})).extendSelectors((t) => ({
+  isOpen: (o) => t.openEditorId === o
+})), r = e.set, d = e.get, s = () => e.use;
+export {
+  r as floatingButtonActions,
+  d as floatingButtonSelectors,
+  e as floatingButtonStore,
+  s as useFloatingButtonSelectors
+};
+//# sourceMappingURL=floatingButtonStore.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"floatingButtonStore.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/floatingButtonStore.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { createStore } from '@udecode/plate';\nimport { RichTextButtonStyle } from '../../types';\n\nexport type FloatingButtonMode = '' | 'insert' | 'edit';\n\nexport const floatingButtonStore: any = createStore('floatingButton')({\n    openEditorId: null as null | string,\n    mouseDown: false,\n    updated: false,\n    url: '',\n    text: '',\n    buttonStyle: 'primary' as RichTextButtonStyle,\n    newTab: false,\n    mode: '' as FloatingButtonMode,\n    isEditing: false,\n})\n    .extendActions((set) => ({\n        reset: () => {\n            set.url('');\n            set.text('');\n            set.buttonStyle('primary');\n            set.newTab(false);\n            set.mode('');\n            set.isEditing(false);\n        },\n    }))\n    .extendActions((set) => ({\n        show: (mode: FloatingButtonMode, editorId: string) => {\n            set.mode(mode);\n            set.isEditing(false);\n            set.openEditorId(editorId);\n        },\n        hide: () => {\n            set.reset();\n            set.openEditorId(null);\n        },\n    }))\n    .extendSelectors((state) => ({\n        isOpen: (editorId: string) => state.openEditorId === editorId,\n    }));\n\nexport const floatingButtonActions = floatingButtonStore.set;\nexport const floatingButtonSelectors = floatingButtonStore.get;\nexport const useFloatingButtonSelectors = () => floatingButtonStore.use;\n"],"names":["floatingButtonStore","createStore","set","mode","editorId","state","floatingButtonActions","floatingButtonSelectors","useFloatingButtonSelectors"],"mappings":";AAOa,MAAAA,IAA2BC,EAAY,gBAAgB,EAAE;AAAA,EAClE,cAAc;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,KAAK;AAAA,EACL,MAAM;AAAA,EACN,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WAAW;AACf,CAAC,EACI,cAAc,CAACC,OAAS;AAAA,EACrB,OAAO,MAAM;AACT,IAAAA,EAAI,IAAI,EAAE,GACVA,EAAI,KAAK,EAAE,GACXA,EAAI,YAAY,SAAS,GACzBA,EAAI,OAAO,EAAK,GAChBA,EAAI,KAAK,EAAE,GACXA,EAAI,UAAU,EAAK;AAAA,EACvB;AACJ,EAAE,EACD,cAAc,CAACA,OAAS;AAAA,EACrB,MAAM,CAACC,GAA0BC,MAAqB;AAClD,IAAAF,EAAI,KAAKC,CAAI,GACbD,EAAI,UAAU,EAAK,GACnBA,EAAI,aAAaE,CAAQ;AAAA,EAC7B;AAAA,EACA,MAAM,MAAM;AACR,IAAAF,EAAI,MAAM,GACVA,EAAI,aAAa,IAAI;AAAA,EACzB;AACJ,EAAE,EACD,gBAAgB,CAACG,OAAW;AAAA,EACzB,QAAQ,CAACD,MAAqBC,EAAM,iBAAiBD;AACzD,EAAE,GAEOE,IAAwBN,EAAoB,KAC5CO,IAA0BP,EAAoB,KAC9CQ,IAA6B,MAAMR,EAAoB;"}