@frontify/guideline-blocks-settings 3.0.2 → 3.0.3

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

@@ -1,24 +1,20 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useEditorState as l, useEventPlateId as a, isRangeInSameBlock as c, getPluginType as d, someNode as m, getTooltip as p, getHotkeyByPlatform as u } from "@frontify/fondue/rte";
-import { ELEMENT_BUTTON as B } from "../createButtonPlugin.es.js";
-import { ButtonToolbarButton as f } from "./ButtonToolbarButton.es.js";
-const y = ({ editorId: n, id: i }) => {
-  const t = l(a(n)), o = !!c(t, {
-    at: t.selection
-  }), s = d(t, B), r = !!t?.selection && m(t, { match: { type: s } });
-  return /* @__PURE__ */ e("div", { "data-plugin-id": i, children: /* @__PURE__ */ e(
-    f,
-    {
-      pressed: r,
-      disabled: !o,
-      tooltip: p(
-        o ? `Button
-${u("Ctrl+Shift+K")}` : "Buttons can only be set for a single text block."
-      )
-    }
-  ) });
+import { ButtonToolbarButton as e } from "./ButtonToolbarButton.es.js";
+import { ELEMENT_BUTTON as t } from "../createButtonPlugin.es.js";
+import { jsx as n } from "react/jsx-runtime";
+import { getHotkeyByPlatform as r, getPluginType as i, getTooltip as a, isRangeInSameBlock as o, someNode as s, useEditorState as c, useEventPlateId as l } from "@frontify/fondue/rte";
+//#region src/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonButton.tsx
+var u = ({ editorId: u, id: d }) => {
+	let f = c(l(u)), p = !!o(f, { at: f.selection }), m = i(f, t), h = !!f?.selection && s(f, { match: { type: m } });
+	return /* @__PURE__ */ n("div", {
+		"data-plugin-id": d,
+		children: /* @__PURE__ */ n(e, {
+			pressed: h,
+			disabled: !p,
+			tooltip: a(p ? `Button\n${r("Ctrl+Shift+K")}` : "Buttons can only be set for a single text block.")
+		})
+	});
 };
-export {
-  y as ButtonButton
-};
-//# sourceMappingURL=ButtonButton.es.js.map
+//#endregion
+export { u as ButtonButton };
+
+//# sourceMappingURL=ButtonButton.es.js.map

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

@@ -1 +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 {\n    type PluginButtonProps,\n    getHotkeyByPlatform,\n    getPluginType,\n    getTooltip,\n    isRangeInSameBlock,\n    someNode,\n    useEditorState,\n    useEventPlateId,\n} from '@frontify/fondue/rte';\n\nimport { ELEMENT_BUTTON } from '../createButtonPlugin';\n\nimport { ButtonToolbarButton } from './ButtonToolbarButton';\n\nexport const ButtonButton = ({ editorId, id }: PluginButtonProps) => {\n    const editor = useEditorState(useEventPlateId(editorId));\n    const isEnabled = !!isRangeInSameBlock(editor, {\n        at: editor.selection,\n    });\n    const type = getPluginType(editor, ELEMENT_BUTTON);\n    const isLink = !!editor?.selection && someNode(editor, { match: { type } });\n\n    return (\n        <div data-plugin-id={id}>\n            <ButtonToolbarButton\n                pressed={isLink}\n                disabled={!isEnabled} // maybe pressed\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            />\n        </div>\n    );\n};\n"],"names":["ButtonButton","editorId","id","editor","useEditorState","useEventPlateId","isEnabled","isRangeInSameBlock","type","getPluginType","ELEMENT_BUTTON","isLink","someNode","jsx","ButtonToolbarButton","getTooltip","getHotkeyByPlatform"],"mappings":";;;;AAiBO,MAAMA,IAAe,CAAC,EAAE,UAAAC,GAAU,IAAAC,QAA4B;AACjE,QAAMC,IAASC,EAAeC,EAAgBJ,CAAQ,CAAC,GACjDK,IAAY,CAAC,CAACC,EAAmBJ,GAAQ;AAAA,IAC3C,IAAIA,EAAO;AAAA,EAAA,CACd,GACKK,IAAOC,EAAcN,GAAQO,CAAc,GAC3CC,IAAS,CAAC,CAACR,GAAQ,aAAaS,EAAST,GAAQ,EAAE,OAAO,EAAE,MAAAK,EAAA,GAAQ;AAE1E,SACI,gBAAAK,EAAC,OAAA,EAAI,kBAAgBX,GACjB,UAAA,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAASH;AAAA,MACT,UAAU,CAACL;AAAA,MACX,SAASS;AAAA,QACLT,IACM;AAAA,EAAWU,EAAoB,cAAc,CAAC,KAC9C;AAAA,MAAA;AAAA,IACV;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"ButtonButton.es.js","names":[],"sources":["../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    type PluginButtonProps,\n    getHotkeyByPlatform,\n    getPluginType,\n    getTooltip,\n    isRangeInSameBlock,\n    someNode,\n    useEditorState,\n    useEventPlateId,\n} from '@frontify/fondue/rte';\n\nimport { ELEMENT_BUTTON } from '../createButtonPlugin';\n\nimport { ButtonToolbarButton } from './ButtonToolbarButton';\n\nexport const ButtonButton = ({ editorId, id }: PluginButtonProps) => {\n    const editor = useEditorState(useEventPlateId(editorId));\n    const isEnabled = !!isRangeInSameBlock(editor, {\n        at: editor.selection,\n    });\n    const type = getPluginType(editor, ELEMENT_BUTTON);\n    const isLink = !!editor?.selection && someNode(editor, { match: { type } });\n\n    return (\n        <div data-plugin-id={id}>\n            <ButtonToolbarButton\n                pressed={isLink}\n                disabled={!isEnabled} // maybe pressed\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            />\n        </div>\n    );\n};\n"],"mappings":";;;;;AAiBA,IAAa,KAAgB,EAAE,aAAU,YAA4B;CACjE,IAAM,IAAS,EAAe,EAAgB,CAAQ,CAAC,GACjD,IAAY,CAAC,CAAC,EAAmB,GAAQ,EAC3C,IAAI,EAAO,UACf,CAAC,GACK,IAAO,EAAc,GAAQ,CAAc,GAC3C,IAAS,CAAC,CAAC,GAAQ,aAAa,EAAS,GAAQ,EAAE,OAAO,EAAE,QAAK,EAAE,CAAC;CAE1E,OACI,kBAAC,OAAD;EAAK,kBAAgB;EACjB,UAAA,kBAAC,GAAD;GACI,SAAS;GACT,UAAU,CAAC;GACX,SAAS,EACL,IACM,WAAW,EAAoB,cAAc,MAC7C,kDACV;EACH,CAAA;CACA,CAAA;AAEb"}

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

@@ -1,27 +1,25 @@
-import { jsx as t } from "react/jsx-runtime";
-import { IconButton as i } from "@frontify/fondue/icons";
-import { useEditorRef as u, ToolbarButton as c, IconStylingWrapper as f, focusEditor as l } from "@frontify/fondue/rte";
-import { forwardRef as m } from "react";
-import { triggerFloatingButton as p } from "../utils/triggerFloatingButton.es.js";
-const s = m((r, e) => {
-  const o = u();
-  return /* @__PURE__ */ t(
-    c,
-    {
-      ref: e,
-      ...r,
-      onMouseDown: (n) => {
-        n.preventDefault(), l(o, o.selection ?? o.prevSelection ?? void 0);
-      },
-      onClick: () => {
-        p(o, { focused: !0 });
-      },
-      children: /* @__PURE__ */ t(f, { icon: /* @__PURE__ */ t(i, { size: 16 }) })
-    }
-  );
+import { triggerFloatingButton as e } from "../utils/triggerFloatingButton.es.js";
+import { IconButton as t } from "@frontify/fondue/icons";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { IconStylingWrapper as i, ToolbarButton as a, focusEditor as o, useEditorRef as s } from "@frontify/fondue/rte";
+//#region src/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonToolbarButton.tsx
+var c = n((n, c) => {
+	let l = s();
+	return /* @__PURE__ */ r(a, {
+		ref: c,
+		...n,
+		onMouseDown: (e) => {
+			e.preventDefault(), o(l, l.selection ?? l.prevSelection ?? void 0);
+		},
+		onClick: () => {
+			e(l, { focused: !0 });
+		},
+		children: /* @__PURE__ */ r(i, { icon: /* @__PURE__ */ r(t, { size: 16 }) })
+	});
 });
-s.displayName = "ButtonToolbarButton";
-export {
-  s as ButtonToolbarButton
-};
-//# sourceMappingURL=ButtonToolbarButton.es.js.map
+c.displayName = "ButtonToolbarButton";
+//#endregion
+export { c as ButtonToolbarButton };
+
+//# sourceMappingURL=ButtonToolbarButton.es.js.map

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

@@ -1 +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 { IconButton } from '@frontify/fondue/icons';\nimport { IconStylingWrapper, ToolbarButton, focusEditor, useEditorRef } from '@frontify/fondue/rte';\nimport { type ReactNode, forwardRef } from 'react';\n\nimport { triggerFloatingButton } from '../utils';\n\nexport const ButtonToolbarButton = forwardRef<\n    HTMLButtonElement,\n    { disabled: boolean; tooltip: ReactNode; pressed: boolean }\n>((rootProps, ref) => {\n    const editor = useEditorRef();\n\n    return (\n        <ToolbarButton\n            ref={ref}\n            {...rootProps}\n            onMouseDown={(event) => {\n                event.preventDefault();\n                focusEditor(editor, editor.selection ?? editor.prevSelection ?? undefined);\n            }}\n            onClick={() => {\n                triggerFloatingButton(editor, { focused: true });\n            }}\n        >\n            <IconStylingWrapper icon={<IconButton size={16} />} />\n        </ToolbarButton>\n    );\n});\n\nButtonToolbarButton.displayName = 'ButtonToolbarButton';\n"],"names":["ButtonToolbarButton","forwardRef","rootProps","ref","editor","useEditorRef","jsx","ToolbarButton","event","focusEditor","triggerFloatingButton","IconStylingWrapper","IconButton"],"mappings":";;;;;AAQO,MAAMA,IAAsBC,EAGjC,CAACC,GAAWC,MAAQ;AAClB,QAAMC,IAASC,EAAA;AAEf,SACI,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAJ;AAAA,MACC,GAAGD;AAAA,MACJ,aAAa,CAACM,MAAU;AACpB,QAAAA,EAAM,eAAA,GACNC,EAAYL,GAAQA,EAAO,aAAaA,EAAO,iBAAiB,MAAS;AAAA,MAC7E;AAAA,MACA,SAAS,MAAM;AACX,QAAAM,EAAsBN,GAAQ,EAAE,SAAS,GAAA,CAAM;AAAA,MACnD;AAAA,MAEA,4BAACO,GAAA,EAAmB,wBAAOC,GAAA,EAAW,MAAM,IAAI,EAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAGhE,CAAC;AAEDZ,EAAoB,cAAc;"}
+{"version":3,"file":"ButtonToolbarButton.es.js","names":[],"sources":["../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconButton } from '@frontify/fondue/icons';\nimport { IconStylingWrapper, ToolbarButton, focusEditor, useEditorRef } from '@frontify/fondue/rte';\nimport { type ReactNode, forwardRef } from 'react';\n\nimport { triggerFloatingButton } from '../utils';\n\nexport const ButtonToolbarButton = forwardRef<\n    HTMLButtonElement,\n    { disabled: boolean; tooltip: ReactNode; pressed: boolean }\n>((rootProps, ref) => {\n    const editor = useEditorRef();\n\n    return (\n        <ToolbarButton\n            ref={ref}\n            {...rootProps}\n            onMouseDown={(event) => {\n                event.preventDefault();\n                focusEditor(editor, editor.selection ?? editor.prevSelection ?? undefined);\n            }}\n            onClick={() => {\n                triggerFloatingButton(editor, { focused: true });\n            }}\n        >\n            <IconStylingWrapper icon={<IconButton size={16} />} />\n        </ToolbarButton>\n    );\n});\n\nButtonToolbarButton.displayName = 'ButtonToolbarButton';\n"],"mappings":";;;;;;AAQA,IAAa,IAAsB,GAGhC,GAAW,MAAQ;CAClB,IAAM,IAAS,EAAa;CAE5B,OACI,kBAAC,GAAD;EACS;EACL,GAAI;EACJ,cAAc,MAAU;GAEpB,AADA,EAAM,eAAe,GACrB,EAAY,GAAQ,EAAO,aAAa,EAAO,iBAAiB,KAAA,CAAS;EAC7E;EACA,eAAe;GACX,EAAsB,GAAQ,EAAE,SAAS,GAAK,CAAC;EACnD;EAEA,UAAA,kBAAC,GAAD,EAAoB,MAAM,kBAAC,GAAD,EAAY,MAAM,GAAK,CAAA,EAAI,CAAA;CAC1C,CAAA;AAEvB,CAAC;AAED,EAAoB,cAAc"}

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

@@ -1,54 +1,47 @@
-import { jsxs as g, Fragment as b, jsx as t } from "react/jsx-runtime";
-import { useEditorRef as B, TextStyles as d, offset as E, flip as F } from "@frontify/fondue/rte";
-import { createPortal as m } from "react-dom";
-import { BlockStyles as l } from "../../../styles.es.js";
-import { EditModal as x } from "./EditButtonModal/EditModal.es.js";
-import { InsertButtonModal as P } from "./InsertButtonModal/InsertButtonModal.es.js";
-import { useFloatingButtonInsert as h } from "./useFloatingButtonInsert.es.js";
-import { useFloatingButtonEdit as O } from "./useFloatingButtonEdit.es.js";
-import { useFloatingButtonSelectors as R } from "./floatingButtonStore.es.js";
-const a = {
-  placement: "bottom-start",
-  strategy: "absolute",
-  middleware: [
-    E(12),
-    F({
-      padding: 12,
-      fallbackPlacements: ["bottom-end", "top-start", "top-end"]
-    })
-  ]
-}, q = () => {
-  const { ref: p, ...e } = h(a), { ref: c, ...r } = O(a), f = B(), o = R(), n = o.isOpen(f.id), u = o.isEditing(), s = o.mode(), i = /* @__PURE__ */ t(P, {}), y = u ? i : /* @__PURE__ */ t(x, {});
-  return /* @__PURE__ */ g(b, { children: [
-    n && s === "insert" && m(
-      /* @__PURE__ */ t(
-        "div",
-        {
-          "data-is-underlay": !0,
-          ref: p,
-          ...e,
-          style: { ...e.style, ...l[d.p] },
-          children: i
-        }
-      ),
-      document.body
-    ),
-    n && s === "edit" && m(
-      /* @__PURE__ */ t(
-        "div",
-        {
-          "data-is-underlay": !0,
-          ref: c,
-          ...r,
-          style: { ...r.style, ...l[d.p] },
-          children: y
-        }
-      ),
-      document.body
-    )
-  ] });
+import { useFloatingButtonSelectors as e } from "./floatingButtonStore.es.js";
+import { BlockStyles as t } from "../../../styles.es.js";
+import { EditModal as n } from "./EditButtonModal/EditModal.es.js";
+import { InsertButtonModal as r } from "./InsertButtonModal/InsertButtonModal.es.js";
+import { useFloatingButtonEdit as i } from "./useFloatingButtonEdit.es.js";
+import { useFloatingButtonInsert as a } from "./useFloatingButtonInsert.es.js";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { TextStyles as l, flip as u, offset as d, useEditorRef as f } from "@frontify/fondue/rte";
+import { createPortal as p } from "react-dom";
+//#region src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.tsx
+var m = {
+	placement: "bottom-start",
+	strategy: "absolute",
+	middleware: [d(12), u({
+		padding: 12,
+		fallbackPlacements: [
+			"bottom-end",
+			"top-start",
+			"top-end"
+		]
+	})]
+}, h = () => {
+	let { ref: u, ...d } = a(m), { ref: h, ...g } = i(m), _ = f(), v = e(), y = v.isOpen(_.id), b = v.isEditing(), x = v.mode(), S = /* @__PURE__ */ s(r, {}), C = b ? S : /* @__PURE__ */ s(n, {});
+	return /* @__PURE__ */ c(o, { children: [y && x === "insert" && p(/* @__PURE__ */ s("div", {
+		"data-is-underlay": !0,
+		ref: u,
+		...d,
+		style: {
+			...d.style,
+			...t[l.p]
+		},
+		children: S
+	}), document.body), y && x === "edit" && p(/* @__PURE__ */ s("div", {
+		"data-is-underlay": !0,
+		ref: h,
+		...g,
+		style: {
+			...g.style,
+			...t[l.p]
+		},
+		children: C
+	}), document.body)] });
 };
-export {
-  q as CustomFloatingButton
-};
-//# sourceMappingURL=CustomFloatingButton.es.js.map
+//#endregion
+export { h as CustomFloatingButton };
+
+//# sourceMappingURL=CustomFloatingButton.es.js.map

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

@@ -1 +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 { TextStyles, type UseVirtualFloatingOptions, flip, offset, useEditorRef } from '@frontify/fondue/rte';\nimport { createPortal } from 'react-dom';\n\nimport { BlockStyles } from '../../../../../RichTextEditor/plugins/styles';\nimport { useFloatingButtonEdit, useFloatingButtonInsert, useFloatingButtonSelectors } from '../FloatingButton';\n\nimport { EditModal } from './EditButtonModal/EditModal';\nimport { InsertButtonModal } from './InsertButtonModal/InsertButtonModal';\n\nconst floatingOptions: UseVirtualFloatingOptions = {\n    placement: 'bottom-start',\n    strategy: 'absolute',\n    middleware: [\n        offset(12),\n        flip({\n            padding: 12,\n            fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],\n        }),\n    ],\n};\n\nexport const CustomFloatingButton = () => {\n    const { ref: insertRef, ...insertProps } = useFloatingButtonInsert(floatingOptions);\n    const { ref: editRef, ...editProps } = useFloatingButtonEdit(floatingOptions);\n    const editor = useEditorRef();\n    const state = useFloatingButtonSelectors();\n    const isOpen = state.isOpen(editor.id);\n    const isEditing = state.isEditing();\n    const mode = state.mode();\n\n    const input = <InsertButtonModal />;\n    const editContent = isEditing ? input : <EditModal />;\n\n    return (\n        <>\n            {isOpen &&\n                mode === 'insert' &&\n                createPortal(\n                    <div\n                        data-is-underlay\n                        ref={insertRef}\n                        {...insertProps}\n                        style={{ ...insertProps.style, ...BlockStyles[TextStyles.p] }}\n                    >\n                        {input}\n                    </div>,\n                    document.body,\n                )}\n\n            {isOpen &&\n                mode === 'edit' &&\n                createPortal(\n                    <div\n                        data-is-underlay\n                        ref={editRef}\n                        {...editProps}\n                        style={{ ...editProps.style, ...BlockStyles[TextStyles.p] }}\n                    >\n                        {editContent}\n                    </div>,\n                    document.body,\n                )}\n        </>\n    );\n};\n"],"names":["floatingOptions","offset","flip","CustomFloatingButton","insertRef","insertProps","useFloatingButtonInsert","editRef","editProps","useFloatingButtonEdit","editor","useEditorRef","state","useFloatingButtonSelectors","isOpen","isEditing","mode","input","InsertButtonModal","editContent","jsx","EditModal","jsxs","Fragment","createPortal","BlockStyles","TextStyles"],"mappings":";;;;;;;;;AAWA,MAAMA,IAA6C;AAAA,EAC/C,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,IACRC,EAAO,EAAE;AAAA,IACTC,EAAK;AAAA,MACD,SAAS;AAAA,MACT,oBAAoB,CAAC,cAAc,aAAa,SAAS;AAAA,IAAA,CAC5D;AAAA,EAAA;AAET,GAEaC,IAAuB,MAAM;AACtC,QAAM,EAAE,KAAKC,GAAW,GAAGC,EAAA,IAAgBC,EAAwBN,CAAe,GAC5E,EAAE,KAAKO,GAAS,GAAGC,EAAA,IAAcC,EAAsBT,CAAe,GACtEU,IAASC,EAAA,GACTC,IAAQC,EAAA,GACRC,IAASF,EAAM,OAAOF,EAAO,EAAE,GAC/BK,IAAYH,EAAM,UAAA,GAClBI,IAAOJ,EAAM,KAAA,GAEbK,sBAASC,GAAA,EAAkB,GAC3BC,IAAcJ,IAAYE,IAAQ,gBAAAG,EAACC,GAAA,CAAA,CAAU;AAEnD,SACI,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAT,KACGE,MAAS,YACTQ;AAAA,MACI,gBAAAJ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,oBAAgB;AAAA,UAChB,KAAKhB;AAAA,UACJ,GAAGC;AAAA,UACJ,OAAO,EAAE,GAAGA,EAAY,OAAO,GAAGoB,EAAYC,EAAW,CAAC,EAAA;AAAA,UAEzD,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,MAEL,SAAS;AAAA,IAAA;AAAA,IAGhBH,KACGE,MAAS,UACTQ;AAAA,MACI,gBAAAJ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,oBAAgB;AAAA,UAChB,KAAKb;AAAA,UACJ,GAAGC;AAAA,UACJ,OAAO,EAAE,GAAGA,EAAU,OAAO,GAAGiB,EAAYC,EAAW,CAAC,EAAA;AAAA,UAEvD,UAAAP;AAAA,QAAA;AAAA,MAAA;AAAA,MAEL,SAAS;AAAA,IAAA;AAAA,EACb,GACR;AAER;"}
+{"version":3,"file":"CustomFloatingButton.es.js","names":[],"sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextStyles, type UseVirtualFloatingOptions, flip, offset, useEditorRef } from '@frontify/fondue/rte';\nimport { createPortal } from 'react-dom';\n\nimport { BlockStyles } from '../../../../../RichTextEditor/plugins/styles';\nimport { useFloatingButtonEdit, useFloatingButtonInsert, useFloatingButtonSelectors } from '../FloatingButton';\n\nimport { EditModal } from './EditButtonModal/EditModal';\nimport { InsertButtonModal } from './InsertButtonModal/InsertButtonModal';\n\nconst floatingOptions: UseVirtualFloatingOptions = {\n    placement: 'bottom-start',\n    strategy: 'absolute',\n    middleware: [\n        offset(12),\n        flip({\n            padding: 12,\n            fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],\n        }),\n    ],\n};\n\nexport const CustomFloatingButton = () => {\n    const { ref: insertRef, ...insertProps } = useFloatingButtonInsert(floatingOptions);\n    const { ref: editRef, ...editProps } = useFloatingButtonEdit(floatingOptions);\n    const editor = useEditorRef();\n    const state = useFloatingButtonSelectors();\n    const isOpen = state.isOpen(editor.id);\n    const isEditing = state.isEditing();\n    const mode = state.mode();\n\n    const input = <InsertButtonModal />;\n    const editContent = isEditing ? input : <EditModal />;\n\n    return (\n        <>\n            {isOpen &&\n                mode === 'insert' &&\n                createPortal(\n                    <div\n                        data-is-underlay\n                        ref={insertRef}\n                        {...insertProps}\n                        style={{ ...insertProps.style, ...BlockStyles[TextStyles.p] }}\n                    >\n                        {input}\n                    </div>,\n                    document.body,\n                )}\n\n            {isOpen &&\n                mode === 'edit' &&\n                createPortal(\n                    <div\n                        data-is-underlay\n                        ref={editRef}\n                        {...editProps}\n                        style={{ ...editProps.style, ...BlockStyles[TextStyles.p] }}\n                    >\n                        {editContent}\n                    </div>,\n                    document.body,\n                )}\n        </>\n    );\n};\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAA6C;CAC/C,WAAW;CACX,UAAU;CACV,YAAY,CACR,EAAO,EAAE,GACT,EAAK;EACD,SAAS;EACT,oBAAoB;GAAC;GAAc;GAAa;EAAS;CAC7D,CAAC,CACL;AACJ,GAEa,UAA6B;CACtC,IAAM,EAAE,KAAK,GAAW,GAAG,MAAgB,EAAwB,CAAe,GAC5E,EAAE,KAAK,GAAS,GAAG,MAAc,EAAsB,CAAe,GACtE,IAAS,EAAa,GACtB,IAAQ,EAA2B,GACnC,IAAS,EAAM,OAAO,EAAO,EAAE,GAC/B,IAAY,EAAM,UAAU,GAC5B,IAAO,EAAM,KAAK,GAElB,IAAQ,kBAAC,GAAD,CAAoB,CAAA,GAC5B,IAAc,IAAY,IAAQ,kBAAC,GAAD,CAAY,CAAA;CAEpD,OACI,kBAAA,GAAA,EAAA,UAAA,CACK,KACG,MAAS,YACT,EACI,kBAAC,OAAD;EACI,oBAAA;EACA,KAAK;EACL,GAAI;EACJ,OAAO;GAAE,GAAG,EAAY;GAAO,GAAG,EAAY,EAAW;EAAG;EAE3D,UAAA;CACA,CAAA,GACL,SAAS,IACb,GAEH,KACG,MAAS,UACT,EACI,kBAAC,OAAD;EACI,oBAAA;EACA,KAAK;EACL,GAAI;EACJ,OAAO;GAAE,GAAG,EAAU;GAAO,GAAG,EAAY,EAAW;EAAG;EAEzD,UAAA;CACA,CAAA,GACL,SAAS,IACb,CACN,EAAA,CAAA;AAEV"}

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

@@ -1,55 +1,53 @@
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { IconPen as i, IconTrashBin as n } from "@frontify/fondue/icons";
-import { useEditorRef as a, FloatingModalWrapper as d, focusEditor as l } from "@frontify/fondue/rte";
-import { LINK_PLUGIN as s } from "../../../../LinkPlugin/id.es.js";
-import { BlockStyles as m } from "../../../../styles.es.js";
-import { floatingButtonSelectors as r } from "../floatingButtonStore.es.js";
-import { triggerFloatingButtonEdit as u } from "../../../utils/triggerFloatingButtonEdit.es.js";
-import { unwrapButton as c } from "../../../transforms/unwrapButton.es.js";
-const N = () => {
-  const e = a();
-  return /* @__PURE__ */ t(d, { padding: "16px", minWidth: "400px", "data-test-id": "floating-button-edit", children: /* @__PURE__ */ o("span", { "data-test-id": "preview-button-flyout", className: "tw-flex tw-justify-between tw-items-center tw-gap-2", children: [
-    /* @__PURE__ */ t(
-      "a",
-      {
-        "data-test-id": "floating-button-edit-url",
-        href: r.url(),
-        target: "_blank",
-        rel: "noopener noreferrer",
-        style: m[s],
-        className: "tw-break-all",
-        children: r.url()
-      }
-    ),
-    /* @__PURE__ */ o("span", { className: "tw-flex tw-gap-2", children: [
-      /* @__PURE__ */ t(
-        "button",
-        {
-          onClick: () => {
-            u(e);
-          },
-          tabIndex: 0,
-          "data-test-id": "edit-button-button",
-          className: "tw-transition tw-cursor-pointer tw-rounded-medium hover:tw-bg-black-10 tw-p-1",
-          children: /* @__PURE__ */ t(i, { size: 16 })
-        }
-      ),
-      /* @__PURE__ */ t(
-        "button",
-        {
-          onClick: () => {
-            c(e), l(e, e.selection ?? void 0);
-          },
-          tabIndex: 0,
-          "data-test-id": "remove-button-button",
-          className: "tw-transition tw-cursor-pointer tw-rounded-medium hover:tw-bg-black-10 tw-p-1",
-          children: /* @__PURE__ */ t(n, { size: 16 })
-        }
-      )
-    ] })
-  ] }) });
+import { floatingButtonSelectors as e } from "../floatingButtonStore.es.js";
+import { unwrapButton as t } from "../../../transforms/unwrapButton.es.js";
+import { triggerFloatingButtonEdit as n } from "../../../utils/triggerFloatingButtonEdit.es.js";
+import { LINK_PLUGIN as r } from "../../../../LinkPlugin/id.es.js";
+import { BlockStyles as i } from "../../../../styles.es.js";
+import { IconPen as a, IconTrashBin as o } from "@frontify/fondue/icons";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { FloatingModalWrapper as l, focusEditor as u, useEditorRef as d } from "@frontify/fondue/rte";
+//#region src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.tsx
+var f = () => {
+	let f = d();
+	return /* @__PURE__ */ s(l, {
+		padding: "16px",
+		minWidth: "400px",
+		"data-test-id": "floating-button-edit",
+		children: /* @__PURE__ */ c("span", {
+			"data-test-id": "preview-button-flyout",
+			className: "tw-flex tw-justify-between tw-items-center tw-gap-2",
+			children: [/* @__PURE__ */ s("a", {
+				"data-test-id": "floating-button-edit-url",
+				href: e.url(),
+				target: "_blank",
+				rel: "noopener noreferrer",
+				style: i[r],
+				className: "tw-break-all",
+				children: e.url()
+			}), /* @__PURE__ */ c("span", {
+				className: "tw-flex tw-gap-2",
+				children: [/* @__PURE__ */ s("button", {
+					onClick: () => {
+						n(f);
+					},
+					tabIndex: 0,
+					"data-test-id": "edit-button-button",
+					className: "tw-transition tw-cursor-pointer tw-rounded-medium hover:tw-bg-black-10 tw-p-1",
+					children: /* @__PURE__ */ s(a, { size: 16 })
+				}), /* @__PURE__ */ s("button", {
+					onClick: () => {
+						t(f), u(f, f.selection ?? void 0);
+					},
+					tabIndex: 0,
+					"data-test-id": "remove-button-button",
+					className: "tw-transition tw-cursor-pointer tw-rounded-medium hover:tw-bg-black-10 tw-p-1",
+					children: /* @__PURE__ */ s(o, { size: 16 })
+				})]
+			})]
+		})
+	});
 };
-export {
-  N as EditModal
-};
-//# sourceMappingURL=EditModal.es.js.map
+//#endregion
+export { f as EditModal };
+
+//# sourceMappingURL=EditModal.es.js.map

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

@@ -1 +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 { IconPen, IconTrashBin } from '@frontify/fondue/icons';\nimport { FloatingModalWrapper, focusEditor, useEditorRef } from '@frontify/fondue/rte';\n\nimport { LINK_PLUGIN } from '../../../../LinkPlugin/id';\nimport { BlockStyles } from '../../../../styles';\nimport { unwrapButton } from '../../../transforms';\nimport { triggerFloatingButtonEdit } from '../../../utils';\nimport { floatingButtonSelectors } from '../floatingButtonStore';\n\nexport const EditModal = () => {\n    const editor = useEditorRef();\n    return (\n        <FloatingModalWrapper padding=\"16px\" minWidth=\"400px\" data-test-id=\"floating-button-edit\">\n            <span data-test-id=\"preview-button-flyout\" className=\"tw-flex tw-justify-between tw-items-center tw-gap-2\">\n                <a\n                    data-test-id=\"floating-button-edit-url\"\n                    href={floatingButtonSelectors.url()}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    style={BlockStyles[LINK_PLUGIN]}\n                    className=\"tw-break-all\"\n                >\n                    {floatingButtonSelectors.url()}\n                </a>\n                <span className=\"tw-flex tw-gap-2\">\n                    <button\n                        onClick={() => {\n                            triggerFloatingButtonEdit(editor);\n                        }}\n                        tabIndex={0}\n                        data-test-id=\"edit-button-button\"\n                        className=\"tw-transition tw-cursor-pointer tw-rounded-medium hover:tw-bg-black-10 tw-p-1\"\n                    >\n                        <IconPen size={16} />\n                    </button>\n\n                    <button\n                        onClick={() => {\n                            unwrapButton(editor);\n                            focusEditor(editor, editor.selection ?? undefined);\n                        }}\n                        tabIndex={0}\n                        data-test-id=\"remove-button-button\"\n                        className=\"tw-transition tw-cursor-pointer tw-rounded-medium hover:tw-bg-black-10 tw-p-1\"\n                    >\n                        <IconTrashBin size={16} />\n                    </button>\n                </span>\n            </span>\n        </FloatingModalWrapper>\n    );\n};\n"],"names":["EditModal","editor","useEditorRef","jsx","FloatingModalWrapper","jsxs","floatingButtonSelectors","BlockStyles","LINK_PLUGIN","triggerFloatingButtonEdit","IconPen","unwrapButton","focusEditor","IconTrashBin"],"mappings":";;;;;;;;AAWO,MAAMA,IAAY,MAAM;AAC3B,QAAMC,IAASC,EAAA;AACf,SACI,gBAAAC,EAACC,GAAA,EAAqB,SAAQ,QAAO,UAAS,SAAQ,gBAAa,wBAC/D,UAAA,gBAAAC,EAAC,QAAA,EAAK,gBAAa,yBAAwB,WAAU,uDACjD,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,MAAMG,EAAwB,IAAA;AAAA,QAC9B,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,OAAOC,EAAYC,CAAW;AAAA,QAC9B,WAAU;AAAA,QAET,YAAwB,IAAA;AAAA,MAAI;AAAA,IAAA;AAAA,IAEjC,gBAAAH,EAAC,QAAA,EAAK,WAAU,oBACZ,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,SAAS,MAAM;AACX,YAAAM,EAA0BR,CAAM;AAAA,UACpC;AAAA,UACA,UAAU;AAAA,UACV,gBAAa;AAAA,UACb,WAAU;AAAA,UAEV,UAAA,gBAAAE,EAACO,GAAA,EAAQ,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAGvB,gBAAAP;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,SAAS,MAAM;AACX,YAAAQ,EAAaV,CAAM,GACnBW,EAAYX,GAAQA,EAAO,aAAa,MAAS;AAAA,UACrD;AAAA,UACA,UAAU;AAAA,UACV,gBAAa;AAAA,UACb,WAAU;AAAA,UAEV,UAAA,gBAAAE,EAACU,GAAA,EAAa,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAC5B,EAAA,CACJ;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;"}
+{"version":3,"file":"EditModal.es.js","names":[],"sources":["../../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconPen, IconTrashBin } from '@frontify/fondue/icons';\nimport { FloatingModalWrapper, focusEditor, useEditorRef } from '@frontify/fondue/rte';\n\nimport { LINK_PLUGIN } from '../../../../LinkPlugin/id';\nimport { BlockStyles } from '../../../../styles';\nimport { unwrapButton } from '../../../transforms';\nimport { triggerFloatingButtonEdit } from '../../../utils';\nimport { floatingButtonSelectors } from '../floatingButtonStore';\n\nexport const EditModal = () => {\n    const editor = useEditorRef();\n    return (\n        <FloatingModalWrapper padding=\"16px\" minWidth=\"400px\" data-test-id=\"floating-button-edit\">\n            <span data-test-id=\"preview-button-flyout\" className=\"tw-flex tw-justify-between tw-items-center tw-gap-2\">\n                <a\n                    data-test-id=\"floating-button-edit-url\"\n                    href={floatingButtonSelectors.url()}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    style={BlockStyles[LINK_PLUGIN]}\n                    className=\"tw-break-all\"\n                >\n                    {floatingButtonSelectors.url()}\n                </a>\n                <span className=\"tw-flex tw-gap-2\">\n                    <button\n                        onClick={() => {\n                            triggerFloatingButtonEdit(editor);\n                        }}\n                        tabIndex={0}\n                        data-test-id=\"edit-button-button\"\n                        className=\"tw-transition tw-cursor-pointer tw-rounded-medium hover:tw-bg-black-10 tw-p-1\"\n                    >\n                        <IconPen size={16} />\n                    </button>\n\n                    <button\n                        onClick={() => {\n                            unwrapButton(editor);\n                            focusEditor(editor, editor.selection ?? undefined);\n                        }}\n                        tabIndex={0}\n                        data-test-id=\"remove-button-button\"\n                        className=\"tw-transition tw-cursor-pointer tw-rounded-medium hover:tw-bg-black-10 tw-p-1\"\n                    >\n                        <IconTrashBin size={16} />\n                    </button>\n                </span>\n            </span>\n        </FloatingModalWrapper>\n    );\n};\n"],"mappings":";;;;;;;;;AAWA,IAAa,UAAkB;CAC3B,IAAM,IAAS,EAAa;CAC5B,OACI,kBAAC,GAAD;EAAsB,SAAQ;EAAO,UAAS;EAAQ,gBAAa;EAC/D,UAAA,kBAAC,QAAD;GAAM,gBAAa;GAAwB,WAAU;GAArD,UAAA,CACI,kBAAC,KAAD;IACI,gBAAa;IACb,MAAM,EAAwB,IAAI;IAClC,QAAO;IACP,KAAI;IACJ,OAAO,EAAY;IACnB,WAAU;IAET,UAAA,EAAwB,IAAI;GAC9B,CAAA,GACH,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACI,kBAAC,UAAD;KACI,eAAe;MACX,EAA0B,CAAM;KACpC;KACA,UAAU;KACV,gBAAa;KACb,WAAU;KAEV,UAAA,kBAAC,GAAD,EAAS,MAAM,GAAK,CAAA;IAChB,CAAA,GAER,kBAAC,UAAD;KACI,eAAe;MAEX,AADA,EAAa,CAAM,GACnB,EAAY,GAAQ,EAAO,aAAa,KAAA,CAAS;KACrD;KACA,UAAU;KACV,gBAAa;KACb,WAAU;KAEV,UAAA,kBAAC,GAAD,EAAc,MAAM,GAAK,CAAA;IACrB,CAAA,CACN;GACJ,CAAA,CAAA;;CACY,CAAA;AAE9B"}

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

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

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

@@ -1 +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 { type CSSProperties, type ReactElement, type ReactNode, useState } from 'react';\n\nimport { InsertModal } from '../../../../LinkPlugin/FloatingLink/InsertLinkModal/InsertModal';\nimport { BlockStyles } from '../../../../styles';\n\nimport { useInsertModal } from './useInsertModal';\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(), marginTop: 0, marginBottom: 0 }}\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":";;;;;;AAUO,MAAMA,IAAoB,MAAM;AACnC,QAAMC,IAAaC,EAAA,GACb,EAAE,OAAAC,GAAO,qBAAAC,EAAA,IAAwBH;AAEvC,SACI,gBAAAI,EAACC,KAAa,GAAGL,GAAY,QAAO,0BAChC,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,MAGd,UAAA;AAAA,QAAA,gBAAAH;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,QAAA;AAAA,QAGnB,gBAAAC;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,QAAA;AAAA,QAGnB,gBAAAC;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,QAAA;AAAA,MACnB;AAAA,IAAA;AAAA,EAAA,GAER,EAAA,CACJ;AAER,GAUMK,IAAkB,CAAC,EAAE,IAAAE,GAAI,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,GAAS,UAAAC,QAAoC;AAC1F,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAY,MAAOP,KAAUA,EAAO,SAASI,IAAU,EAAE,GAAGJ,GAAQ,GAAGA,EAAO,MAAA,IAAUA;AAE9F,SACI,gBAAAP;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,0BAA0BM,CAAE;AAAA,MAC1C,cAAc,MAAMM,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,SAAAH;AAAA,MACA,OAAO,EAAE,GAAGK,EAAA,GAAa,WAAW,GAAG,cAAc,EAAA;AAAA,MACrD,WACIN,IAAW,8EAA8E;AAAA,MAG5F,UAAAE;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"InsertButtonModal.es.js","names":[],"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 { type CSSProperties, type ReactElement, type ReactNode, useState } from 'react';\n\nimport { InsertModal } from '../../../../LinkPlugin/FloatingLink/InsertLinkModal/InsertModal';\nimport { BlockStyles } from '../../../../styles';\n\nimport { useInsertModal } from './useInsertModal';\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(), marginTop: 0, marginBottom: 0 }}\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"],"mappings":";;;;;;;AAUA,IAAa,UAA0B;CACnC,IAAM,IAAa,EAAe,GAC5B,EAAE,UAAO,2BAAwB;CAEvC,OACI,kBAAC,GAAD;EAAa,GAAI;EAAY,QAAO;EAChC,UAAA,kBAAC,OAAD;GAAK,WAAU;GACX,UAAA,kBAAC,GAAD;IACI,OAAO;KACH,UAAU;KACV,SAAS;KACT,UAAU;IACd;IALJ,UAAA;KAOI,kBAAC,GAAD;MACI,IAAG;MACH,QAAQ,EAAY;MACpB,UAAU,EAAM,gBAAgB;MAChC,eAAe,EAAoB,SAAS;MAE3C,UAAA,EAAM,QAAQ;KACF,CAAA;KAEjB,kBAAC,GAAD;MACI,IAAG;MACH,QAAQ,EAAY;MACpB,UAAU,EAAM,gBAAgB;MAChC,eAAe,EAAoB,WAAW;MAE7C,UAAA,EAAM,QAAQ;KACF,CAAA;KAEjB,kBAAC,GAAD;MACI,IAAG;MACH,QAAQ,EAAY;MACpB,UAAU,EAAM,gBAAgB;MAChC,eAAe,EAAoB,UAAU;MAE5C,UAAA,EAAM,QAAQ;KACF,CAAA;IACR;;EACZ,CAAA;CACI,CAAA;AAErB,GAUM,KAAmB,EAAE,OAAI,WAAQ,aAAU,YAAS,kBAAoC;CAC1F,IAAM,CAAC,GAAS,KAAc,EAAS,EAAK;CAG5C,OACI,kBAAC,UAAD;EACI,gBAAc,0BAA0B;EACxC,oBAAoB,EAAW,EAAI;EACnC,oBAAoB,EAAW,EAAK;EAC3B;EACT,OAAO;GAAE,GARQ,KAAU,EAAO,SAAS,IAAU;IAAE,GAAG;IAAQ,GAAG,EAAO;GAAM,IAAI;GAQ7D,WAAW;GAAG,cAAc;EAAE;EACvD,WACI,IAAW,8EAA8E;EAG5F;CACG,CAAA;AAEhB"}