@frontify/guideline-blocks-settings 0.28.0 → 0.28.1

package/dist/components/BlockInjectButton/BlockInjectButton.es.js

@@ -0,0 +1,150 @@
+import { j as t } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { LoadingCircle as y, IconExclamationMarkTriangle as z, Flyout as O, ActionMenu as R, MenuItemContentSize as j, IconArrowCircleUp20 as X, IconImageStack20 as A } from "@frontify/fondue";
+import { r as w } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
+import { joinClassNames as F } from "../../utilities/react/joinClassNames.es.js";
+import { FileExtensionSets as T } from "@frontify/app-bridge";
+const q = ({
+  onDrop: n,
+  label: u,
+  icon: h,
+  secondaryLabel: f,
+  isLoading: l,
+  fillParentContainer: k,
+  onAssetChooseClick: g,
+  onUploadClick: p,
+  withMenu: I = !0,
+  onClick: m,
+  validFileType: v,
+  verticalLayout: N
+}) => {
+  const [d, x] = w.useState(!1), [i, c] = w.useState(), b = w.useRef(null), [a, o] = w.useState(void 0), S = (e) => {
+    if (e.preventDefault(), x(!1), !E(e.dataTransfer.files)) {
+      o("Invalid"), setTimeout(() => {
+        o(void 0);
+      }, 1e3);
+      return;
+    }
+    n == null || n(e.dataTransfer.files);
+  }, E = (e) => {
+    if (!v)
+      return !0;
+    for (let r = 0; r < e.length; r++) {
+      const s = e[r].name.split(".").pop() ?? "";
+      if (!T[v].includes(s))
+        return !1;
+    }
+    return !0;
+  }, M = (e) => {
+    if (!b.current || l)
+      return;
+    const { left: r, top: s } = b.current.getBoundingClientRect(), B = e.clientX - r, C = e.clientY - s;
+    c([B, C]);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    "button",
+    {
+      ref: b,
+      "data-test-id": "block-inject-button",
+      className: F([
+        "tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br",
+        N ? "[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl" : "[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr",
+        k ? "tw-h-full" : "tw-h-[72px]",
+        d && !l ? "tw-border-dashed" : "tw-border-solid",
+        i && "tw-bg-blank-state-pressed-inverse",
+        d && "tw-bg-blank-state-weak-inverse",
+        a ? "!tw-border-red-50 !tw-cursor-not-allowed" : " tw-border-blank-state-line",
+        l || i || d || a ? "" : "tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover",
+        (d || i) && !a ? "[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover" : "tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded"
+      ]),
+      onDragEnter: n ? (e) => {
+        var r;
+        if (x(!0), v === "Images")
+          for (const s of Array.from(e.dataTransfer.items))
+            (r = s == null ? void 0 : s.type) != null && r.startsWith("image/") ? o(void 0) : o("Invalid");
+      } : void 0,
+      onDragLeave: n ? () => {
+        x(!1), o(void 0);
+      } : void 0,
+      onDrop: n ? S : void 0,
+      onClick: (e) => {
+        I && M(e), m == null || m();
+      },
+      children: [
+        l ? /* @__PURE__ */ t.jsx(y, {}) : (
+          // eslint-disable-next-line unicorn/no-nested-ternary
+          a ? /* @__PURE__ */ t.jsxs("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
+            /* @__PURE__ */ t.jsx(z, {}),
+            a
+          ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            h && /* @__PURE__ */ t.jsx("div", { children: h }),
+            (u || f) && /* @__PURE__ */ t.jsxs("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
+              u && /* @__PURE__ */ t.jsx("div", { className: "tw-font-medium", children: u }),
+              f && /* @__PURE__ */ t.jsx("div", { className: "tw-font-normal", children: f })
+            ] })
+          ] })
+        ),
+        i && /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            className: "tw-absolute tw-left-0 tw-top-full tw-z-20",
+            style: {
+              left: i[0],
+              top: i[1]
+            },
+            children: /* @__PURE__ */ t.jsx(
+              O,
+              {
+                onOpenChange: (e) => !e && c(void 0),
+                isOpen: !0,
+                fitContent: !0,
+                hug: !1,
+                legacyFooter: !1,
+                trigger: /* @__PURE__ */ t.jsx("div", {}),
+                children: /* @__PURE__ */ t.jsx(
+                  R,
+                  {
+                    menuBlocks: [
+                      {
+                        id: "menu",
+                        menuItems: [
+                          ...p ? [
+                            {
+                              id: "upload",
+                              size: j.XSmall,
+                              title: "Upload asset",
+                              onClick: () => {
+                                p(), c(void 0);
+                              },
+                              initialValue: !0,
+                              decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(X, {}) })
+                            }
+                          ] : [],
+                          ...g ? [
+                            {
+                              id: "asset",
+                              size: j.XSmall,
+                              title: "Browse asset",
+                              onClick: () => {
+                                g(), c(void 0);
+                              },
+                              initialValue: !0,
+                              decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(A, {}) })
+                            }
+                          ] : []
+                        ]
+                      }
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  q as BlockInjectButton
+};
+//# sourceMappingURL=BlockInjectButton.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ActionMenu,\n    Flyout,\n    IconArrowCircleUp20,\n    IconExclamationMarkTriangle,\n    IconImageStack20,\n    LoadingCircle,\n    MenuItemContentSize,\n} from '@frontify/fondue';\nimport { DragEventHandler, MouseEventHandler, useRef, useState } from 'react';\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\nimport { BlockInjectButtonProps } from './types';\nimport { FileExtension, FileExtensionSets } from '@frontify/app-bridge';\n\nexport const BlockInjectButton = ({\n    onDrop,\n    label,\n    icon,\n    secondaryLabel,\n    isLoading,\n    fillParentContainer,\n    onAssetChooseClick,\n    onUploadClick,\n    withMenu = true,\n    onClick,\n    validFileType,\n    verticalLayout,\n}: BlockInjectButtonProps) => {\n    const [isDraggingOver, setIsDraggingOver] = useState(false);\n    const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);\n\n    const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n        event.preventDefault();\n        setIsDraggingOver(false);\n        if (!isValidAsset(event.dataTransfer.files)) {\n            setErrorMsg('Invalid');\n            setTimeout(() => {\n                setErrorMsg(undefined);\n            }, 1000);\n            return;\n        }\n        onDrop?.(event.dataTransfer.files);\n    };\n\n    const isValidAsset = (files: FileList) => {\n        if (!validFileType) {\n            return true;\n        }\n        for (let i = 0; i < files.length; i++) {\n            const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n            if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (!buttonRef.current || isLoading) {\n            return;\n        }\n        const { left, top } = buttonRef.current.getBoundingClientRect();\n        const XInsideComponent = event.clientX - left;\n        const YInsideComponent = event.clientY - top;\n        setMenuPosition([XInsideComponent, YInsideComponent]);\n    };\n\n    return (\n        <button\n            ref={buttonRef}\n            data-test-id=\"block-inject-button\"\n            className={joinClassNames([\n                'tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n                verticalLayout\n                    ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n                    : '[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr',\n                fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n                isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n                menuPosition && 'tw-bg-blank-state-pressed-inverse',\n                isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n                errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n                isLoading || menuPosition || isDraggingOver || errorMsg\n                    ? ''\n                    : 'tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n                (isDraggingOver || !!menuPosition) && !errorMsg\n                    ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'\n                    : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n            ])}\n            onDragEnter={\n                onDrop\n                    ? (event) => {\n                          setIsDraggingOver(true);\n                          // is now only used for images, can be adapted if needed\n                          if (validFileType === 'Images') {\n                              for (const item of Array.from(event.dataTransfer.items)) {\n                                  if (!item?.type?.startsWith('image/')) {\n                                      setErrorMsg('Invalid');\n                                  } else {\n                                      setErrorMsg(undefined);\n                                  }\n                              }\n                          }\n                      }\n                    : undefined\n            }\n            onDragLeave={\n                onDrop\n                    ? () => {\n                          setIsDraggingOver(false);\n                          setErrorMsg(undefined);\n                      }\n                    : undefined\n            }\n            onDrop={onDrop ? handleDrop : undefined}\n            onClick={(event) => {\n                withMenu && openMenu(event);\n                onClick?.();\n            }}\n        >\n            {isLoading ? (\n                <LoadingCircle />\n            ) : // eslint-disable-next-line unicorn/no-nested-ternary\n            errorMsg ? (\n                <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n                    <IconExclamationMarkTriangle />\n                    {errorMsg}\n                </div>\n            ) : (\n                <>\n                    {icon && <div>{icon}</div>}\n                    {(label || secondaryLabel) && (\n                        <div className=\"tw-flex tw-flex-col tw-items-start\">\n                            {label && <div className=\"tw-font-medium\">{label}</div>}\n                            {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n                        </div>\n                    )}\n                </>\n            )}\n            {menuPosition && (\n                <div\n                    className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n                    style={{\n                        left: menuPosition[0],\n                        top: menuPosition[1],\n                    }}\n                >\n                    <Flyout\n                        onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}\n                        isOpen={true}\n                        fitContent\n                        hug={false}\n                        legacyFooter={false}\n                        trigger={<div />}\n                    >\n                        <ActionMenu\n                            menuBlocks={[\n                                {\n                                    id: 'menu',\n                                    menuItems: [\n                                        ...(onUploadClick\n                                            ? [\n                                                  {\n                                                      id: 'upload',\n                                                      size: MenuItemContentSize.XSmall,\n                                                      title: 'Upload asset',\n                                                      onClick: () => {\n                                                          onUploadClick();\n                                                          setMenuPosition(undefined);\n                                                      },\n\n                                                      initialValue: true,\n                                                      decorator: (\n                                                          <div className=\"tw-mr-2\">\n                                                              <IconArrowCircleUp20 />\n                                                          </div>\n                                                      ),\n                                                  },\n                                              ]\n                                            : []),\n                                        ...(onAssetChooseClick\n                                            ? [\n                                                  {\n                                                      id: 'asset',\n                                                      size: MenuItemContentSize.XSmall,\n                                                      title: 'Browse asset',\n                                                      onClick: () => {\n                                                          onAssetChooseClick();\n                                                          setMenuPosition(undefined);\n                                                      },\n                                                      initialValue: true,\n                                                      decorator: (\n                                                          <div className=\"tw-mr-2\">\n                                                              <IconImageStack20 />\n                                                          </div>\n                                                      ),\n                                                  },\n                                              ]\n                                            : []),\n                                    ],\n                                },\n                            ]}\n                        />\n                    </Flyout>\n                </div>\n            )}\n        </button>\n    );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","left","top","XInsideComponent","YInsideComponent","jsxs","joinClassNames","item","_a","LoadingCircle","jsx","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20"],"mappings":"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"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.es.js","sources":["../../../src/components/BlockItemWrapper/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ActionMenu,\n    Flyout,\n    IconDotsHorizontal16,\n    MenuItemContentSize,\n    Tooltip,\n    TooltipPosition,\n} from '@frontify/fondue';\nimport { ToolbarProps } from './types';\nimport { joinClassNames } from '../../utilities';\nimport { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from './constants';\n\nexport const Toolbar = ({\n    items,\n    flyoutItems,\n    isFlyoutOpen,\n    setIsFlyoutOpen,\n    isDragging,\n    isFlyoutDisabled,\n}: ToolbarProps) => {\n    return (\n        <div data-test-id=\"block-item-wrapper-toolbar\" className=\"tw-flex tw-justify-end\">\n            <div className=\"tw-bg-white tw-text-box-selected-inverse tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-[2px] tw-px-[1px] tw-spacing tw-items-center tw-h-7 tw-self-start tw-border tw-border-box-selected-inverse tw-rounded\">\n                {items.map((item, i) =>\n                    'draggableProps' in item ? (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            hoverDelay={0}\n                            enterDelay={300}\n                            open={isDragging}\n                            position={TooltipPosition.Top}\n                            content={\n                                <div>\n                                    {isDragging ? DEFAULT_DRAGGING_TOOLTIP : item.tooltip ?? DEFAULT_DRAG_TOOLTIP}\n                                </div>\n                            }\n                            triggerElement={\n                                <button\n                                    ref={item.setActivatorNodeRef}\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    {...item.draggableProps}\n                                    className={joinClassNames([\n                                        'tw-bg-base tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm',\n                                        isDragging\n                                            ? 'tw-cursor-grabbing tw-bg-box-selected-pressed'\n                                            : 'tw-cursor-grab hover:tw-bg-box-selected-hover',\n                                    ])}\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ) : (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            enterDelay={300}\n                            hoverDelay={0}\n                            disabled={isDragging}\n                            position={TooltipPosition.Top}\n                            content={<div>{item.tooltip ?? ''}</div>}\n                            triggerElement={\n                                <button\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    onClick={item.onClick}\n                                    className=\"tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm\"\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    )\n                )}\n                {flyoutItems.length > 0 && (\n                    <div className=\"tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6\">\n                        <Flyout\n                            isOpen={isFlyoutOpen && !isDragging}\n                            isTriggerDisabled={isFlyoutDisabled}\n                            legacyFooter={false}\n                            fitContent\n                            hug={false}\n                            onOpenChange={setIsFlyoutOpen}\n                            trigger={\n                                <Tooltip\n                                    withArrow\n                                    hoverDelay={0}\n                                    enterDelay={300}\n                                    disabled={isDragging}\n                                    position={TooltipPosition.Top}\n                                    content={<div>Options</div>}\n                                    triggerElement={\n                                        <div\n                                            data-test-id=\"block-item-wrapper-toolbar-flyout\"\n                                            className=\"tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex  tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm\"\n                                        >\n                                            <IconDotsHorizontal16 />\n                                        </div>\n                                    }\n                                />\n                            }\n                        >\n                            <ActionMenu\n                                menuBlocks={flyoutItems.map((block, blockIndex) => ({\n                                    id: blockIndex.toString(),\n                                    menuItems: block.map((item, itemIndex) => ({\n                                        id: blockIndex.toString() + itemIndex.toString(),\n                                        size: MenuItemContentSize.XSmall,\n                                        title: item.title,\n                                        style: item.style,\n                                        onClick: () => {\n                                            setIsFlyoutOpen(false);\n                                            item.onClick();\n                                        },\n                                        initialValue: true,\n                                        decorator: <div className=\"tw-mr-2\">{item.icon}</div>,\n                                    })),\n                                }))}\n                            />\n                        </Flyout>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["Toolbar","items","flyoutItems","isFlyoutOpen","setIsFlyoutOpen","isDragging","isFlyoutDisabled","jsx","jsxs","item","i","Tooltip","TooltipPosition","DEFAULT_DRAGGING_TOOLTIP","DEFAULT_DRAG_TOOLTIP","joinClassNames","Flyout","IconDotsHorizontal16","ActionMenu","block","blockIndex","itemIndex","MenuItemContentSize"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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