@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,41 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { BlockButtonStyles as m } from "../utils/styles.es.js";
+const b = (e) => {
+  var n, u;
+  const { attributes: t, children: r } = e, l = e.element.url || ((u = (n = e.element.chosenLink) == null ? void 0 : n.searchResult) == null ? void 0 : u.link) || "", s = e.element.target || "_self", o = String(e.element.buttonStyle) || "primary";
+  return /* @__PURE__ */ a(
+    i,
+    {
+      attributes: t,
+      href: l,
+      target: s,
+      styles: m[`button${o.charAt(0).toUpperCase() + o.slice(1)}`],
+      children: r
+    }
+  );
+}, i = ({
+  attributes: e,
+  styles: t = { hover: {} },
+  children: r,
+  href: l = "#",
+  target: s
+}) => {
+  const [o, n] = c(!1);
+  return /* @__PURE__ */ a(
+    "a",
+    {
+      ...e,
+      onMouseEnter: () => n(!0),
+      onMouseLeave: () => n(!1),
+      href: l,
+      target: s,
+      style: o ? { ...t, ...t.hover } : t,
+      children: r
+    }
+  );
+};
+export {
+  b 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 { type PlateRenderElementProps, Value } from '@frontify/fondue';\nimport { CSSProperties, HTMLAttributeAnchorTarget, ReactElement, ReactNode, useState } from 'react';\nimport { TButtonElement } from '../types';\nimport { BlockButtonStyles } from '../utils';\n\nexport type ButtonRootProps = PlateRenderElementProps<Value, TButtonElement>;\n\nexport const ButtonMarkupElementNode = (props: ButtonRootProps) => {\n    const { attributes, children } = props;\n    const href = props.element.url || props.element.chosenLink?.searchResult?.link || '';\n    const target = props.element.target || '_self';\n    const buttonStyle = String(props.element.buttonStyle) || 'primary';\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":["ButtonMarkupElementNode","props","attributes","children","href","_b","_a","target","buttonStyle","jsx","HoverableButtonLink","BlockButtonStyles","styles","hovered","setHovered","useState"],"mappings":";;;AASa,MAAAA,IAA0B,CAACC,MAA2B;;AACzD,QAAA,EAAE,YAAAC,GAAY,UAAAC,EAAa,IAAAF,GAC3BG,IAAOH,EAAM,QAAQ,SAAOI,KAAAC,IAAAL,EAAM,QAAQ,eAAd,gBAAAK,EAA0B,iBAA1B,gBAAAD,EAAwC,SAAQ,IAC5EE,IAASN,EAAM,QAAQ,UAAU,SACjCO,IAAc,OAAOP,EAAM,QAAQ,WAAW,KAAK;AAErD,SAAA,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,YAAAR;AAAA,MACA,MAAAE;AAAA,MACA,QAAAG;AAAA,MACA,QAAQI,EAAkB,SAASH,EAAY,OAAO,CAAC,EAAE,YAAgB,IAAAA,EAAY,MAAM,CAAC,CAAC,EAAE;AAAA,MAE9F,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGb,GAUMO,IAAsB,CAAC;AAAA,EACzB,YAAAR;AAAA,EACA,QAAAU,IAAS,EAAE,OAAO,GAAG;AAAA,EACrB,UAAAT;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAG;AACJ,MAA2B;AACvB,QAAM,CAACM,GAASC,CAAU,IAAIC,EAAS,EAAK;AAGxC,SAAA,gBAAAN;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGP;AAAA,MACJ,cAAc,MAAMY,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,MAAAV;AAAA,MACA,QAAAG;AAAA,MACA,OAAOM,IAAU,EAAE,GAAGD,GAAQ,GAAGA,EAAO,UAAUA;AAAA,MAEjD,UAAAT;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,24 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useEditorState as r, useEventPlateId as a, isRangeInSameBlock as c, getPluginType as m, someNode as p, getTooltip as u, getHotkeyByPlatform as d } from "@frontify/fondue";
+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 = r(a(n)), o = !!c(t, {
+    at: t.selection
+  }), s = m(t, B), l = !!(t != null && t.selection) && p(t, { match: { type: s } });
+  return /* @__PURE__ */ e("div", { "data-plugin-id": i, children: /* @__PURE__ */ e(
+    f,
+    {
+      pressed: l,
+      disabled: !o,
+      tooltip: u(
+        o ? `Button
+${d("Ctrl+Shift+K")}` : "Buttons can only be set for a single text block."
+      )
+    }
+  ) });
+};
+export {
+  y 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 {\n    PluginButtonProps,\n    getHotkeyByPlatform,\n    getPluginType,\n    getTooltip,\n    isRangeInSameBlock,\n    someNode,\n    useEditorState,\n    useEventPlateId,\n} from '@frontify/fondue';\nimport { ELEMENT_BUTTON } from '../createButtonPlugin';\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":";;;;AAeO,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,EAACR,KAAA,QAAAA,EAAQ,cAAaS,EAAST,GAAQ,EAAE,OAAO,EAAE,MAAAK,EAAK,EAAG,CAAA;AAGtE,SAAA,gBAAAK,EAAC,OAAI,EAAA,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,MACV;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAER;"}

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

@@ -0,0 +1,26 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useEditorRef as e, ToolbarButton as i, focusEditor as u, IconStylingWrapper as c, IconButton16 as l } from "@frontify/fondue";
+import { forwardRef as f } from "react";
+import { triggerFloatingButton as m } from "../utils/triggerFloatingButton.es.js";
+const p = f((r, n) => {
+  const o = e();
+  return /* @__PURE__ */ t(
+    i,
+    {
+      ref: n,
+      ...r,
+      onMouseDown: () => {
+        u(o, o.selection ?? o.prevSelection ?? void 0);
+      },
+      onClick: () => {
+        m(o, { focused: !0 });
+      },
+      children: /* @__PURE__ */ t(c, { icon: /* @__PURE__ */ t(l, {}) })
+    }
+  );
+});
+p.displayName = "ButtonToolbarButton";
+export {
+  p 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 { IconButton16, IconStylingWrapper, ToolbarButton, focusEditor, useEditorRef } from '@frontify/fondue';\n\nimport { triggerFloatingButton } from '../utils';\n\nimport { ReactNode, forwardRef } from 'react';\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={() => {\n                focusEditor(editor, editor.selection ?? editor.prevSelection ?? undefined);\n            }}\n            onClick={() => {\n                triggerFloatingButton(editor, { focused: true });\n            }}\n        >\n            <IconStylingWrapper icon={<IconButton16 />} />\n        </ToolbarButton>\n    );\n});\n\nButtonToolbarButton.displayName = 'ButtonToolbarButton';\n"],"names":["ButtonToolbarButton","forwardRef","rootProps","ref","editor","useEditorRef","jsx","ToolbarButton","focusEditor","triggerFloatingButton","IconStylingWrapper","IconButton16"],"mappings":";;;;AAQO,MAAMA,IAAsBC,EAGjC,CAACC,GAAWC,MAAQ;AAClB,QAAMC,IAASC;AAGX,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAJ;AAAA,MACC,GAAGD;AAAA,MACJ,aAAa,MAAM;AACf,QAAAM,EAAYJ,GAAQA,EAAO,aAAaA,EAAO,iBAAiB,MAAS;AAAA,MAC7E;AAAA,MACA,SAAS,MAAM;AACX,QAAAK,EAAsBL,GAAQ,EAAE,SAAS,GAAM,CAAA;AAAA,MACnD;AAAA,MAEA,UAAC,gBAAAE,EAAAI,GAAA,EAAmB,MAAM,gBAAAJ,EAACK,IAAa,CAAA,GAAI;AAAA,IAAA;AAAA,EAAA;AAGxD,CAAC;AAEDX,EAAoB,cAAc;"}

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

@@ -0,0 +1,28 @@
+import { jsxs as l, Fragment as u, jsx as t } from "react/jsx-runtime";
+import { EditModal as g } from "./EditButtonModal/EditModal.es.js";
+import { InsertButtonModal as B } from "./InsertButtonModal/InsertButtonModal.es.js";
+import { offset as E, flip as F, useEditorRef as b } from "@frontify/fondue";
+import { useFloatingButtonInsert as h } from "./useFloatingButtonInsert.es.js";
+import { useFloatingButtonEdit as x } from "./useFloatingButtonEdit.es.js";
+import { useFloatingButtonSelectors as O } from "./floatingButtonStore.es.js";
+const r = {
+  placement: "bottom-start",
+  strategy: "absolute",
+  middleware: [
+    E(12),
+    F({
+      padding: 12,
+      fallbackPlacements: ["bottom-end", "top-start", "top-end"]
+    })
+  ]
+}, k = () => {
+  const { ref: s, ...d } = h(r), { ref: m, ...a } = x(r), f = b(), o = O(), e = o.isOpen(f.id), p = o.isEditing(), n = o.mode(), i = /* @__PURE__ */ t(B, {}), c = p ? i : /* @__PURE__ */ t(g, {});
+  return /* @__PURE__ */ l(u, { children: [
+    e && n === "insert" && /* @__PURE__ */ t("div", { ref: s, ...d, children: i }),
+    e && n === "edit" && /* @__PURE__ */ t("div", { ref: m, ...a, children: c })
+  ] });
+};
+export {
+  k 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 { InsertButtonModal } from './InsertButtonModal/InsertButtonModal';\nimport { UseVirtualFloatingOptions, flip, offset, useEditorRef } from '@frontify/fondue';\nimport { useFloatingButtonEdit, useFloatingButtonInsert, useFloatingButtonSelectors } from '../FloatingButton';\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 && mode === 'insert' && (\n                <div ref={insertRef} {...insertProps}>\n                    {input}\n                </div>\n            )}\n\n            {isOpen && mode === 'edit' && (\n                <div ref={editRef} {...editProps}>\n                    {editContent}\n                </div>\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"],"mappings":";;;;;;;AAOA,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,EACL;AACJ,GAEaC,IAAuB,MAAM;AACtC,QAAM,EAAE,KAAKC,GAAW,GAAGC,EAAY,IAAIC,EAAwBN,CAAe,GAC5E,EAAE,KAAKO,GAAS,GAAGC,EAAU,IAAIC,EAAsBT,CAAe,GACtEU,IAASC,KACTC,IAAQC,KACRC,IAASF,EAAM,OAAOF,EAAO,EAAE,GAC/BK,IAAYH,EAAM,aAClBI,IAAOJ,EAAM,QAEbK,sBAASC,GAAkB,CAAA,CAAA,GAC3BC,IAAcJ,IAAYE,IAAQ,gBAAAG,EAACC,GAAU,CAAA,CAAA;AAEnD,SAES,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAUT,KAAAE,MAAS,YACf,gBAAAI,EAAA,OAAA,EAAI,KAAKhB,GAAY,GAAGC,GACpB,UACLY,EAAA,CAAA;AAAA,IAGHH,KAAUE,MAAS,UAChB,gBAAAI,EAAC,SAAI,KAAKb,GAAU,GAAGC,GAClB,UACLW,EAAA,CAAA;AAAA,EAER,EAAA,CAAA;AAER;"}

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

@@ -0,0 +1,48 @@
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { useEditorRef as n, IconPen16 as r, focusEditor as i, IconTrashBin16 as a } from "@frontify/fondue";
+import { floatingButtonSelectors as s } from "../floatingButtonStore.es.js";
+import { triggerFloatingButtonEdit as d } from "../../../utils/triggerFloatingButtonEdit.es.js";
+import { unwrapButton as w } from "../../../transforms/unwrapButton.es.js";
+const b = () => {
+  const e = n();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-test-id": "floating-button-edit",
+      className: "tw-bg-white tw-text-text tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]",
+      children: /* @__PURE__ */ o("span", { "data-test-id": "preview-button-flyout", className: "tw-flex tw-justify-between tw-items-center", children: [
+        /* @__PURE__ */ t("span", { className: "tw-pointer-events-none", children: s.url() }),
+        /* @__PURE__ */ o("span", { className: "tw-flex tw-gap-2", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => {
+                d(e);
+              },
+              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(r, {})
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => {
+                w(e), i(e, e.selection ?? void 0);
+              },
+              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(a, {})
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  b 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, focusEditor, useEditorRef } from '@frontify/fondue';\n\nimport { floatingButtonSelectors } from '../floatingButtonStore';\nimport { unwrapButton } from '../../../transforms';\nimport { triggerFloatingButtonEdit } from '../../../utils';\n\nexport const EditModal = () => {\n    const editor = useEditorRef();\n    return (\n        <div\n            data-test-id=\"floating-button-edit\"\n            className=\"tw-bg-white tw-text-text tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]\"\n        >\n            <span data-test-id=\"preview-button-flyout\" className=\"tw-flex tw-justify-between tw-items-center\">\n                <span className=\"tw-pointer-events-none\">{floatingButtonSelectors.url()}</span>\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 hover:tw-bg-black-10 tw-p-1\"\n                    >\n                        <IconPen16 />\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 hover:tw-bg-black-10 tw-p-1\"\n                    >\n                        <IconTrashBin16 />\n                    </button>\n                </span>\n            </span>\n        </div>\n    );\n};\n"],"names":["EditModal","editor","useEditorRef","jsx","jsxs","floatingButtonSelectors","triggerFloatingButtonEdit","IconPen16","unwrapButton","focusEditor","IconTrashBin16"],"mappings":";;;;;AAQO,MAAMA,IAAY,MAAM;AAC3B,QAAMC,IAASC;AAEX,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAU;AAAA,MAEV,UAAC,gBAAAC,EAAA,QAAA,EAAK,gBAAa,yBAAwB,WAAU,8CACjD,UAAA;AAAA,QAAA,gBAAAD,EAAC,QAAK,EAAA,WAAU,0BAA0B,UAAAE,EAAwB,OAAM;AAAA,QACxE,gBAAAD,EAAC,QAAK,EAAA,WAAU,oBACZ,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,SAAS,MAAM;AACX,gBAAAG,EAA0BL,CAAM;AAAA,cACpC;AAAA,cACA,UAAU;AAAA,cACV,gBAAa;AAAA,cACb,WAAU;AAAA,cAEV,4BAACM,GAAU,EAAA;AAAA,YAAA;AAAA,UACf;AAAA,UAEA,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,SAAS,MAAM;AACX,gBAAAK,EAAaP,CAAM,GACPQ,EAAAR,GAAQA,EAAO,aAAa,MAAS;AAAA,cACrD;AAAA,cACA,UAAU;AAAA,cACV,gBAAa;AAAA,cACb,WAAU;AAAA,cAEV,4BAACS,GAAe,EAAA;AAAA,YAAA;AAAA,UACpB;AAAA,QAAA,GACJ;AAAA,MAAA,GACJ;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -0,0 +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 { useInsertModal as p } from "./useInsertModal.es.js";
+import { BlockStyles as n } from "../../../../styles.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
+    }
+  );
+};
+export {
+  g 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(), 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":";;;;;;AAQO,MAAMA,IAAoB,MAAM;AACnC,QAAMC,IAAaC,KACb,EAAE,OAAAC,GAAO,qBAAAC,EAAwB,IAAAH;AAGnC,SAAA,gBAAAI,EAACC,KAAa,GAAGL,GAAY,QAAO,0BAChC,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,WACX,UAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MACd;AAAA,MAEA,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,QACnB;AAAA,QAEA,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,QACnB;AAAA,QAEA,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,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,EAAS,EAAK,GACtCC,IAAY,MAAOP,KAAUA,EAAO,SAASI,IAAU,EAAE,GAAGJ,GAAQ,GAAGA,EAAO,MAAA,IAAUA;AAG1F,SAAA,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,KAAa,WAAW,GAAG,cAAc,EAAE;AAAA,MACvD,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,104 @@
+import { useEffect as S, useReducer as b } from "react";
+import { CheckboxState as r, useEditorRef as h, getPluginOptions as E, useHotkeys as g } from "@frontify/fondue";
+import { floatingButtonSelectors as u, floatingButtonActions as a } from "../floatingButtonStore.es.js";
+import { ELEMENT_BUTTON as B } from "../../../createButtonPlugin.es.js";
+import { submitFloatingButton as U } from "../../../transforms/submitFloatingButton.es.js";
+import { getButtonStyle as x } from "../../../utils/getButtonStyle.es.js";
+import { isValidUrlOrEmpty as i } from "../../../../../../Link/utils/url.es.js";
+import { addHttps as N } from "../../../../../../../helpers/addHttps.es.js";
+const k = {
+  url: "",
+  text: "",
+  buttonStyle: "primary",
+  newTab: r.Unchecked
+}, w = () => {
+  const [n, o] = b((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;
+    }
+  }, k);
+  return [n, o];
+}, F = () => {
+  const n = h(), [o, e] = w();
+  S(() => {
+    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 }
+    });
+  }, d = (t) => {
+    e(t ? { type: "NEW_TAB" } : { type: "SAME_TAB" });
+  }, y = () => {
+    a.reset();
+  }, T = (t) => {
+    if (!i(o.url) || !p)
+      return;
+    const f = N(o.url);
+    a.text(o.text), a.url(f), a.buttonStyle(o.buttonStyle), a.newTab(o.newTab === r.Checked), U(n) && (t == null || t.preventDefault());
+  }, p = o.url !== "" && o.text !== "", { appBridge: m } = E(n, B);
+  return g(
+    "enter",
+    T,
+    {
+      enableOnFormTags: ["INPUT"]
+    },
+    []
+  ), {
+    state: o,
+    onTextChange: s,
+    onButtonStyleChange: c,
+    onUrlChange: l,
+    onToggleTab: d,
+    onCancel: y,
+    onSave: T,
+    hasValues: p,
+    isValidUrlOrEmpty: i,
+    appBridge: m
+  };
+};
+export {
+  w 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 { CheckboxState, getPluginOptions, useEditorRef, useHotkeys } from '@frontify/fondue';\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 { addHttps } from '../../../../../../../helpers';\nimport { isValidUrlOrEmpty } from '../../../../../../Link/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.reset();\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":";;;;;;;;AAcA,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,EAAoE,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;AAE3C,EAAAU,EAAU,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,MAAM;AAAA,EAAA,GAG1BC,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/floatingButtonStore.es.js

@@ -0,0 +1,32 @@
+import { createStore as i } from "@frontify/fondue";
+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 '@frontify/fondue';\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;"}

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

@@ -0,0 +1,57 @@
+import { useEditorRef as y, useEditorVersion as F, getPluginOptions as C, getAboveNode as R, getPluginType as s, getRangeBoundingClientRect as h, getStartPoint as O, getEndPoint as b, getDefaultBoundingClientRect as N, someNode as P, useHotkeys as T, useComposedRef as k } from "@frontify/fondue";
+import { useCallback as v, useEffect as S } from "react";
+import { ELEMENT_BUTTON as o } from "../../createButtonPlugin.es.js";
+import { triggerFloatingButtonEdit as x } from "../../utils/triggerFloatingButtonEdit.es.js";
+import { useVirtualFloatingButton as A } from "./useVirtualFloatingButton.es.js";
+import { getUrlFromEditor as D } from "../../utils/getUrl.es.js";
+import { useFloatingButtonSelectors as u, floatingButtonActions as n, floatingButtonSelectors as l } from "./floatingButtonStore.es.js";
+import { useFloatingButtonEnter as H } from "./useFloatingButtonEnter.es.js";
+import { useFloatingButtonEscape as U } from "./useFloatingButtonEscape.es.js";
+const G = (g) => {
+  const t = y(), m = u().mode(), c = u().isOpen(t.id), d = F(), { triggerFloatingButtonHotkeys: a } = C(t, o), f = v(() => {
+    const e = R(t, {
+      match: { type: s(t, o) }
+    });
+    if (e) {
+      const [, r] = e;
+      return h(t, {
+        anchor: O(t, r),
+        focus: b(t, r)
+      });
+    }
+    return N();
+  }, [t]), p = c && m === "edit", { update: i, style: B, floating: E } = A({
+    open: p,
+    getBoundingClientRect: f,
+    ...g
+  });
+  return S(() => {
+    const e = D(t);
+    if (e && n.url(e), t.selection && P(t, {
+      match: { type: s(t, o) }
+    })) {
+      n.show("edit", t.id), i();
+      return;
+    }
+    l.mode() === "edit" && n.reset();
+  }, [t, d, i]), T(
+    a,
+    (e) => {
+      e.preventDefault(), l.mode() === "edit" && x(t);
+    },
+    {
+      enableOnContentEditable: !0
+    },
+    []
+  ), H(), U(), {
+    style: {
+      ...B,
+      zIndex: 1e3
+    },
+    ref: k(E)
+  };
+};
+export {
+  G as useFloatingButtonEdit
+};
+//# sourceMappingURL=useFloatingButtonEdit.es.js.map