@frontify/guideline-blocks-settings 0.34.3 → 0.34.5

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

@@ -1,45 +1,59 @@
-import { jsx as d } from "react/jsx-runtime";
-import { useState as E, useCallback as o, useEffect as b } from "react";
+import { jsx as l } from "react/jsx-runtime";
+import { memo as x, useState as h, useCallback as a, useEffect as p, useRef as R } from "react";
 import { RichTextEditor as v } from "@frontify/fondue";
-import { SerializedText as w } from "./SerializedText.es.js";
-import { floatingButtonSelectors as L, floatingButtonActions as P } from "./plugins/ButtonPlugin/components/FloatingButton/floatingButtonStore.es.js";
-const C = ({
-  id: l = "rte",
-  isEditing: f,
-  value: t,
-  columns: u,
-  gap: c,
-  placeholder: h,
-  plugins: n,
-  onTextChange: r,
-  showSerializedText: m
-}) => {
-  const [a, i] = E(!1), g = o(
-    (e) => {
-      r && e !== t && r(e), i(!1);
-    },
-    [r, t]
-  ), p = o(() => i(!0), []), x = o((e) => {
-    L.isOpen(e) && P.reset();
+import { SerializedText as P } from "./SerializedText.es.js";
+import { useIsInViewport as I } from "../../hooks/useIsInViewport.es.js";
+import { floatingButtonSelectors as L, floatingButtonActions as S } from "./plugins/ButtonPlugin/components/FloatingButton/floatingButtonStore.es.js";
+const E = x(
+  ({
+    id: d = "rte",
+    isEnabled: o,
+    value: t,
+    columns: n,
+    gap: i,
+    placeholder: f,
+    plugins: s,
+    onTextChange: r,
+    showSerializedText: w
+  }) => {
+    const [c, u] = h(!1), b = a(
+      (e) => {
+        e !== t && (r == null || r(e), u(!1));
+      },
+      [r, t]
+    ), g = a(() => u(!0), []), V = a((e) => {
+      L.isOpen(e) && S.reset();
+    }, []);
+    return p(() => {
+      const e = (m) => {
+        m.preventDefault(), m.returnValue = "Unprocessed changes";
+      };
+      return c && window.addEventListener("beforeunload", e), () => window.removeEventListener("beforeunload", e);
+    }, [c]), o ? /* @__PURE__ */ l(
+      v,
+      {
+        id: d,
+        value: t,
+        border: !1,
+        placeholder: f,
+        plugins: s,
+        onValueChanged: g,
+        onTextChange: b,
+        hideExternalFloatingModals: V
+      }
+    ) : /* @__PURE__ */ l(P, { value: t, columns: n, gap: i, show: w, plugins: s });
+  }
+);
+E.displayName = "InternalRichTextEditor";
+const M = (d) => {
+  const o = R(null), [t, n] = h(!1), { isEditing: i, ...f } = d, s = a((r) => {
+    r && n(!0);
   }, []);
-  return b(() => {
-    const e = (s) => (s.preventDefault(), s.returnValue = "Unprocessed changes");
-    return a && window.addEventListener("beforeunload", e), () => window.removeEventListener("beforeunload", e);
-  }, [a]), f ? /* @__PURE__ */ d(
-    v,
-    {
-      id: l,
-      value: t,
-      border: !1,
-      placeholder: h,
-      plugins: n,
-      onValueChanged: p,
-      onTextChange: g,
-      hideExternalFloatingModals: x
-    }
-  ) : /* @__PURE__ */ d(w, { value: t, columns: u, gap: c, show: m, plugins: n });
+  return I({ ref: o, disabled: !i, onChange: s }), p(() => {
+    n(!1);
+  }, []), /* @__PURE__ */ l("div", { className: "tw-block tw-w-full", ref: o, children: /* @__PURE__ */ l(E, { ...f, isEnabled: i && t }) });
 };
 export {
-  C as RichTextEditor
+  M as RichTextEditor
 };
 //# sourceMappingURL=RichTextEditor.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, 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 handleTextChange = useCallback(\n        (newContent: string) => {\n            if (onTextChange && newContent !== value) {\n                onTextChange(newContent);\n            }\n            setShouldPreventPageLeave(false);\n        },\n        [onTextChange, value],\n    );\n\n    const handleValueChange = useCallback(() => setShouldPreventPageLeave(true), []);\n\n    const handleHideExternalFloatingModals = useCallback((editorId: string) => {\n        if (floatingButtonSelectors.isOpen(editorId)) {\n            floatingButtonActions.reset();\n        }\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={handleValueChange}\n                onTextChange={handleTextChange}\n                hideExternalFloatingModals={handleHideExternalFloatingModals}\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","handleTextChange","useCallback","newContent","handleValueChange","handleHideExternalFloatingModals","editorId","floatingButtonSelectors","floatingButtonActions","useEffect","unloadHandler","event","jsx","FondueRichTextEditor","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,IAAmBC;AAAA,IACrB,CAACC,MAAuB;AAChB,MAAAP,KAAgBO,MAAeZ,KAC/BK,EAAaO,CAAU,GAE3BJ,EAA0B,EAAK;AAAA,IACnC;AAAA,IACA,CAACH,GAAcL,CAAK;AAAA,EAAA,GAGlBa,IAAoBF,EAAY,MAAMH,EAA0B,EAAI,GAAG,CAAA,CAAE,GAEzEM,IAAmCH,EAAY,CAACI,MAAqB;AACnE,IAAAC,EAAwB,OAAOD,CAAQ,KACvCE,EAAsB,MAAM;AAAA,EAEpC,GAAG,CAAE,CAAA;AAeL,SAbAC,EAAU,MAAM;AACN,UAAAC,IAAgB,CAACC,OACnBA,EAAM,eAAe,GACbA,EAAM,cAAc;AAGhC,WAAIb,KACO,OAAA,iBAAiB,gBAAgBY,CAAa,GAGlD,MAAM,OAAO,oBAAoB,gBAAgBA,CAAa;AAAA,EAAA,GACtE,CAACZ,CAAsB,CAAC,GAEvBR,IAEI,gBAAAsB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACG,IAAAxB;AAAA,MACA,OAAAE;AAAA,MACA,QAAQ;AAAA,MACR,aAAAG;AAAA,MACA,SAAAC;AAAA,MACA,gBAAgBS;AAAA,MAChB,cAAcH;AAAA,MACd,4BAA4BI;AAAA,IAAA;AAAA,EAAA,sBAIhCS,GAAe,EAAA,OAAAvB,GAAc,SAAAC,GAAkB,KAAAC,GAAU,MAAMI,GAAoB,SAAAF,EAAkB,CAAA;AACjH;"}
+{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { memo, useCallback, useEffect, useRef, 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';\nimport { useIsInViewport } from '../../hooks/useIsInViewport';\n\nconst InternalRichTextEditor = memo(\n    ({\n        id = 'rte',\n        isEnabled,\n        value,\n        columns,\n        gap,\n        placeholder,\n        plugins,\n        onTextChange,\n        showSerializedText,\n    }: Omit<RichTextEditorProps, 'isEditing'> & { isEnabled: boolean }) => {\n        const [shouldPreventPageLeave, setShouldPreventPageLeave] = useState(false);\n\n        const handleTextChange = useCallback(\n            (newContent: string) => {\n                if (newContent !== value) {\n                    onTextChange?.(newContent);\n                    setShouldPreventPageLeave(false);\n                }\n            },\n            [onTextChange, value],\n        );\n\n        const handleValueChange = useCallback(() => setShouldPreventPageLeave(true), []);\n\n        const handleHideExternalFloatingModals = useCallback((editorId: string) => {\n            if (floatingButtonSelectors.isOpen(editorId)) {\n                floatingButtonActions.reset();\n            }\n        }, []);\n\n        useEffect(() => {\n            const unloadHandler = (event: BeforeUnloadEvent) => {\n                event.preventDefault();\n                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 (isEnabled) {\n            return (\n                <FondueRichTextEditor\n                    id={id}\n                    value={value}\n                    border={false}\n                    placeholder={placeholder}\n                    plugins={plugins}\n                    onValueChanged={handleValueChange}\n                    onTextChange={handleTextChange}\n                    hideExternalFloatingModals={handleHideExternalFloatingModals}\n                />\n            );\n        }\n        return <SerializedText value={value} columns={columns} gap={gap} show={showSerializedText} plugins={plugins} />;\n    },\n);\nInternalRichTextEditor.displayName = 'InternalRichTextEditor';\n\nexport const RichTextEditor = (props: RichTextEditorProps) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const [hasEnteredViewport, setHasEnteredViewport] = useState(false);\n\n    const { isEditing, ...internalRteProps } = props;\n\n    const onViewportVisibilityChange = useCallback((isInViewport: boolean) => {\n        if (isInViewport) {\n            setHasEnteredViewport(true);\n        }\n    }, []);\n\n    useIsInViewport({ ref, disabled: !isEditing, onChange: onViewportVisibilityChange });\n\n    useEffect(() => {\n        setHasEnteredViewport(false);\n    }, []);\n\n    return (\n        <div className=\"tw-block tw-w-full\" ref={ref}>\n            <InternalRichTextEditor {...internalRteProps} isEnabled={isEditing && hasEnteredViewport} />\n        </div>\n    );\n};\n"],"names":["InternalRichTextEditor","memo","id","isEnabled","value","columns","gap","placeholder","plugins","onTextChange","showSerializedText","shouldPreventPageLeave","setShouldPreventPageLeave","useState","handleTextChange","useCallback","newContent","handleValueChange","handleHideExternalFloatingModals","editorId","floatingButtonSelectors","floatingButtonActions","useEffect","unloadHandler","event","jsx","FondueRichTextEditor","SerializedText","RichTextEditor","props","ref","useRef","hasEnteredViewport","setHasEnteredViewport","isEditing","internalRteProps","onViewportVisibilityChange","isInViewport","useIsInViewport"],"mappings":";;;;;;AAUA,MAAMA,IAAyBC;AAAA,EAC3B,CAAC;AAAA,IACG,IAAAC,IAAK;AAAA,IACL,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,KAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,oBAAAC;AAAA,EAAA,MACmE;AACnE,UAAM,CAACC,GAAwBC,CAAyB,IAAIC,EAAS,EAAK,GAEpEC,IAAmBC;AAAA,MACrB,CAACC,MAAuB;AACpB,QAAIA,MAAeZ,MACfK,KAAA,QAAAA,EAAeO,IACfJ,EAA0B,EAAK;AAAA,MAEvC;AAAA,MACA,CAACH,GAAcL,CAAK;AAAA,IAAA,GAGlBa,IAAoBF,EAAY,MAAMH,EAA0B,EAAI,GAAG,CAAA,CAAE,GAEzEM,IAAmCH,EAAY,CAACI,MAAqB;AACnE,MAAAC,EAAwB,OAAOD,CAAQ,KACvCE,EAAsB,MAAM;AAAA,IAEpC,GAAG,CAAE,CAAA;AAeL,WAbAC,EAAU,MAAM;AACN,YAAAC,IAAgB,CAACC,MAA6B;AAChD,QAAAA,EAAM,eAAe,GACrBA,EAAM,cAAc;AAAA,MAAA;AAGxB,aAAIb,KACO,OAAA,iBAAiB,gBAAgBY,CAAa,GAGlD,MAAM,OAAO,oBAAoB,gBAAgBA,CAAa;AAAA,IAAA,GACtE,CAACZ,CAAsB,CAAC,GAEvBR,IAEI,gBAAAsB;AAAA,MAACC;AAAAA,MAAA;AAAA,QACG,IAAAxB;AAAA,QACA,OAAAE;AAAA,QACA,QAAQ;AAAA,QACR,aAAAG;AAAA,QACA,SAAAC;AAAA,QACA,gBAAgBS;AAAA,QAChB,cAAcH;AAAA,QACd,4BAA4BI;AAAA,MAAA;AAAA,IAAA,sBAIhCS,GAAe,EAAA,OAAAvB,GAAc,SAAAC,GAAkB,KAAAC,GAAU,MAAMI,GAAoB,SAAAF,EAAkB,CAAA;AAAA,EACjH;AACJ;AACAR,EAAuB,cAAc;AAExB,MAAA4B,IAAiB,CAACC,MAA+B;AACpD,QAAAC,IAAMC,EAAuB,IAAI,GACjC,CAACC,GAAoBC,CAAqB,IAAIpB,EAAS,EAAK,GAE5D,EAAE,WAAAqB,GAAW,GAAGC,EAAA,IAAqBN,GAErCO,IAA6BrB,EAAY,CAACsB,MAA0B;AACtE,IAAIA,KACAJ,EAAsB,EAAI;AAAA,EAElC,GAAG,CAAE,CAAA;AAEL,SAAAK,EAAgB,EAAE,KAAAR,GAAK,UAAU,CAACI,GAAW,UAAUE,GAA4B,GAEnFd,EAAU,MAAM;AACZ,IAAAW,EAAsB,EAAK;AAAA,EAC/B,GAAG,CAAE,CAAA,GAGA,gBAAAR,EAAA,OAAA,EAAI,WAAU,sBAAqB,KAAAK,GAChC,UAAA,gBAAAL,EAACzB,GAAwB,EAAA,GAAGmC,GAAkB,WAAWD,KAAaF,EAAA,CAAoB,EAC9F,CAAA;AAER;"}

package/dist/hooks/useIsInViewport.es.js

@@ -0,0 +1,22 @@
+import { useEffect as c } from "react";
+const I = ({
+  ref: e,
+  disabled: r,
+  onChange: s
+}) => {
+  c(() => {
+    if (r || !e.current)
+      return;
+    let n = !1;
+    const i = new IntersectionObserver(([t]) => {
+      t.isIntersecting !== n && (n = t.isIntersecting, s(t.isIntersecting));
+    });
+    return i.observe(e.current), () => {
+      i.disconnect();
+    };
+  }, [e, r, s]);
+};
+export {
+  I as useIsInViewport
+};
+//# sourceMappingURL=useIsInViewport.es.js.map

package/dist/hooks/useIsInViewport.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsInViewport.es.js","sources":["../../src/hooks/useIsInViewport.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { RefObject, useEffect } from 'react';\n\nexport const useIsInViewport = <T extends Element>({\n    ref,\n    disabled,\n    onChange,\n}: {\n    ref: RefObject<T>;\n    disabled: boolean;\n    onChange: (isInViewport: boolean) => void;\n}) => {\n    useEffect(() => {\n        if (disabled || !ref.current) {\n            return;\n        }\n\n        let isInViewport = false;\n\n        const intersectionObserver = new IntersectionObserver(([entry]) => {\n            if (entry.isIntersecting !== isInViewport) {\n                isInViewport = entry.isIntersecting;\n                onChange(entry.isIntersecting);\n            }\n        });\n\n        intersectionObserver.observe(ref.current);\n\n        return () => {\n            intersectionObserver.disconnect();\n        };\n    }, [ref, disabled, onChange]);\n};\n"],"names":["useIsInViewport","ref","disabled","onChange","useEffect","isInViewport","intersectionObserver","entry"],"mappings":";AAIO,MAAMA,IAAkB,CAAoB;AAAA,EAC/C,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACJ,MAIM;AACF,EAAAC,EAAU,MAAM;AACR,QAAAF,KAAY,CAACD,EAAI;AACjB;AAGJ,QAAII,IAAe;AAEnB,UAAMC,IAAuB,IAAI,qBAAqB,CAAC,CAACC,CAAK,MAAM;AAC3D,MAAAA,EAAM,mBAAmBF,MACzBA,IAAeE,EAAM,gBACrBJ,EAASI,EAAM,cAAc;AAAA,IACjC,CACH;AAEoB,WAAAD,EAAA,QAAQL,EAAI,OAAO,GAEjC,MAAM;AACT,MAAAK,EAAqB,WAAW;AAAA,IAAA;AAAA,EAErC,GAAA,CAACL,GAAKC,GAAUC,CAAQ,CAAC;AAChC;"}