@frontify/fondue 12.0.0-beta.395 → 12.0.0-beta.396
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/LegacyOrderableList/LegacyCollectionItem.es.js +15 -17
- package/dist/components/LegacyOrderableList/LegacyCollectionItem.es.js.map +1 -1
- package/dist/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningBottom.es.js +1 -1
- package/dist/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningBottom.es.js.map +1 -1
- package/dist/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningFloating.es.js +9 -9
- package/dist/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningFloating.es.js.map +1 -1
- package/dist/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningTop.es.js +1 -1
- package/dist/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningTop.es.js.map +1 -1
- package/dist/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListElement.es.js +30 -26
- package/dist/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListElement.es.js.map +1 -1
- package/dist/components/RichTextEditor/RichTextEditor.es.js +24 -23
- package/dist/components/RichTextEditor/RichTextEditor.es.js.map +1 -1
- package/dist/index.cjs.js +3 -3
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +3 -3
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,38 +1,36 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { useFocusRing as
|
|
3
|
-
import {
|
|
4
|
-
import { FOCUS_STYLE as u } from "../../utilities/focusStyle.es.js";
|
|
2
|
+
import { useFocusRing as s } from "@react-aria/focus";
|
|
3
|
+
import { FOCUS_STYLE as d } from "../../utilities/focusStyle.es.js";
|
|
5
4
|
import { merge as a } from "../../utilities/merge.es.js";
|
|
6
5
|
import { LegacyItemDragState as i } from "./types.es.js";
|
|
7
|
-
import { useDrag as
|
|
8
|
-
const
|
|
6
|
+
import { useDrag as p } from "react-dnd";
|
|
7
|
+
const u = ({
|
|
9
8
|
item: t,
|
|
10
|
-
renderContent:
|
|
9
|
+
renderContent: n,
|
|
11
10
|
dragDisabled: o,
|
|
12
|
-
listId:
|
|
11
|
+
listId: m
|
|
13
12
|
}) => {
|
|
14
|
-
const { isFocusVisible: e } =
|
|
13
|
+
const { isFocusVisible: e } = s(), [{ componentDragState: c }, g] = p({
|
|
15
14
|
item: { ...t },
|
|
16
|
-
collect: (
|
|
17
|
-
componentDragState:
|
|
15
|
+
collect: (l) => ({
|
|
16
|
+
componentDragState: l.isDragging() ? i.Dragging : i.Idle
|
|
18
17
|
}),
|
|
19
|
-
type:
|
|
18
|
+
type: m,
|
|
20
19
|
canDrag: !o
|
|
21
|
-
})
|
|
20
|
+
});
|
|
22
21
|
return /* @__PURE__ */ r(
|
|
23
22
|
"div",
|
|
24
23
|
{
|
|
25
|
-
ref:
|
|
24
|
+
ref: g,
|
|
26
25
|
className: a(["tw-relative tw-outline-none", e ? "tw-z-30" : "tw-z-0"]),
|
|
27
|
-
"aria-labelledby": s,
|
|
28
26
|
"data-test-id": "draggable-item",
|
|
29
27
|
"aria-disabled": o,
|
|
30
|
-
children: /* @__PURE__ */ r("div", { className: a(["tw-outline-none", e &&
|
|
28
|
+
children: /* @__PURE__ */ r("div", { className: a(["tw-outline-none", e && d]), children: n(t, { componentDragState: c, isFocusVisible: e }) })
|
|
31
29
|
}
|
|
32
30
|
);
|
|
33
31
|
};
|
|
34
|
-
|
|
32
|
+
u.displayName = "FondueLegacyCollectionItem";
|
|
35
33
|
export {
|
|
36
|
-
|
|
34
|
+
u as LegacyCollectionItem
|
|
37
35
|
};
|
|
38
36
|
//# sourceMappingURL=LegacyCollectionItem.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LegacyCollectionItem.es.js","sources":["../../../src/components/LegacyOrderableList/LegacyCollectionItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport {
|
|
1
|
+
{"version":3,"file":"LegacyCollectionItem.es.js","sources":["../../../src/components/LegacyOrderableList/LegacyCollectionItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { LegacyCollectionItemProps, LegacyItemDragState } from './types';\nimport { useDrag } from 'react-dnd';\n\nexport const LegacyCollectionItem = <T extends object>({\n item,\n renderContent,\n dragDisabled,\n listId,\n}: LegacyCollectionItemProps<T>) => {\n const { isFocusVisible } = useFocusRing();\n const [{ componentDragState }, drag] = useDrag({\n item: { ...item },\n collect: (monitor) => ({\n componentDragState: monitor.isDragging() ? LegacyItemDragState.Dragging : LegacyItemDragState.Idle,\n }),\n type: listId,\n canDrag: !dragDisabled,\n });\n\n return (\n <div\n ref={drag}\n className={merge(['tw-relative tw-outline-none', isFocusVisible ? 'tw-z-30' : 'tw-z-0'])}\n data-test-id=\"draggable-item\"\n aria-disabled={dragDisabled}\n >\n <div className={merge(['tw-outline-none', isFocusVisible && FOCUS_STYLE])}>\n {renderContent(item, { componentDragState, isFocusVisible })}\n </div>\n </div>\n );\n};\nLegacyCollectionItem.displayName = 'FondueLegacyCollectionItem';\n"],"names":["LegacyCollectionItem","item","renderContent","dragDisabled","listId","isFocusVisible","useFocusRing","componentDragState","drag","useDrag","monitor","LegacyItemDragState","jsx","merge","FOCUS_STYLE"],"mappings":";;;;;;AAQO,MAAMA,IAAuB,CAAmB;AAAA,EACnD,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AACJ,MAAoC;AAC1B,QAAA,EAAE,gBAAAC,MAAmBC,KACrB,CAAC,EAAE,oBAAAC,EAAA,GAAsBC,CAAI,IAAIC,EAAQ;AAAA,IAC3C,MAAM,EAAE,GAAGR,EAAK;AAAA,IAChB,SAAS,CAACS,OAAa;AAAA,MACnB,oBAAoBA,EAAQ,WAAA,IAAeC,EAAoB,WAAWA,EAAoB;AAAA,IAAA;AAAA,IAElG,MAAMP;AAAA,IACN,SAAS,CAACD;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKJ;AAAA,MACL,WAAWK,EAAM,CAAC,+BAA+BR,IAAiB,YAAY,QAAQ,CAAC;AAAA,MACvF,gBAAa;AAAA,MACb,iBAAeF;AAAA,MAEf,4BAAC,OAAI,EAAA,WAAWU,EAAM,CAAC,mBAAmBR,KAAkBS,CAAW,CAAC,GACnE,YAAcb,GAAM,EAAE,oBAAAM,GAAoB,gBAAAF,EAAgB,CAAA,GAC/D;AAAA,IAAA;AAAA,EAAA;AAGZ;AACAL,EAAqB,cAAc;"}
|
|
@@ -3,7 +3,7 @@ const r = ({ children: t }) => /* @__PURE__ */ e(
|
|
|
3
3
|
"div",
|
|
4
4
|
{
|
|
5
5
|
"data-test-id": "toolbar-bottom",
|
|
6
|
-
className: "tw-relative tw-rounded-b tw-
|
|
6
|
+
className: "tw-relative tw-rounded-b tw-border-t tw-border-line tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap",
|
|
7
7
|
children: t
|
|
8
8
|
}
|
|
9
9
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarWrapperPositioningBottom.es.js","sources":["../../../../../src/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningBottom.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ToolbarWrapperProps } from './types';\n\nexport const ToolbarWrapperPositioningBottom = ({ children }: ToolbarWrapperProps) => {\n return (\n <div\n data-test-id=\"toolbar-bottom\"\n className=\"tw-relative tw-rounded-b tw-
|
|
1
|
+
{"version":3,"file":"ToolbarWrapperPositioningBottom.es.js","sources":["../../../../../src/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningBottom.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ToolbarWrapperProps } from './types';\n\nexport const ToolbarWrapperPositioningBottom = ({ children }: ToolbarWrapperProps) => {\n return (\n <div\n data-test-id=\"toolbar-bottom\"\n className=\"tw-relative tw-rounded-b tw-border-t tw-border-line tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap\"\n >\n {children}\n </div>\n );\n};\n"],"names":["ToolbarWrapperPositioningBottom","children","jsx"],"mappings":";AAIO,MAAMA,IAAkC,CAAC,EAAE,UAAAC,QAE1C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,IAET,UAAAD;AAAA,EAAA;AAAA;"}
|
|
@@ -7,25 +7,25 @@ const W = ({
|
|
|
7
7
|
children: l,
|
|
8
8
|
editorWidth: d,
|
|
9
9
|
toolbarButtonGroups: o = [],
|
|
10
|
-
toolbarWidth:
|
|
10
|
+
toolbarWidth: r
|
|
11
11
|
}) => {
|
|
12
|
-
const [f, a] = w(),
|
|
12
|
+
const [f, a] = w(), i = h();
|
|
13
13
|
c(() => {
|
|
14
|
-
if (
|
|
15
|
-
a(
|
|
14
|
+
if (r)
|
|
15
|
+
a(r);
|
|
16
16
|
else {
|
|
17
17
|
const e = E(o);
|
|
18
18
|
e > 0 && a(e + o.length + F);
|
|
19
19
|
}
|
|
20
|
-
}, [d,
|
|
20
|
+
}, [d, r, o]), c(() => {
|
|
21
21
|
const e = () => {
|
|
22
|
-
const t = window.getSelection(), n = (t == null ? void 0 : t.rangeCount) ?? 0,
|
|
23
|
-
!(!!t &&
|
|
22
|
+
const t = window.getSelection(), n = (t == null ? void 0 : t.rangeCount) ?? 0, u = n > 0 && (t == null ? void 0 : t.getRangeAt(0).startOffset), m = n > 0 && (t == null ? void 0 : t.getRangeAt(0).endOffset);
|
|
23
|
+
!(!!t && u !== m && n > 0) && i.current && i.current();
|
|
24
24
|
};
|
|
25
25
|
return document.addEventListener("selectionchange", e), () => document.removeEventListener("selectionchange", e);
|
|
26
26
|
}, []);
|
|
27
27
|
const g = (e, t, n) => {
|
|
28
|
-
|
|
28
|
+
i.current = S(e, t, n);
|
|
29
29
|
};
|
|
30
30
|
return /* @__PURE__ */ s(
|
|
31
31
|
p,
|
|
@@ -40,7 +40,7 @@ const W = ({
|
|
|
40
40
|
{
|
|
41
41
|
"data-selector": "toolbar-floating",
|
|
42
42
|
"data-test-id": "toolbar-floating",
|
|
43
|
-
className: "tw-rounded tw-
|
|
43
|
+
className: "tw-rounded tw-border tw-border-line tw-shadow-lg tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap",
|
|
44
44
|
children: l
|
|
45
45
|
}
|
|
46
46
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarWrapperPositioningFloating.es.js","sources":["../../../../../src/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningFloating.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useRef, useState } from 'react';\nimport { BalloonToolbar, ReferenceType, autoUpdate, flip, shift } from '@udecode/plate';\nimport { OFFSET_IN_PX, calculateToolbarWidth } from '@components/RichTextEditor/utils';\nimport { ToolbarWrapperProps } from './types';\n\nexport const ToolbarWrapperPositioningFloating = ({\n children,\n editorWidth,\n toolbarButtonGroups = [],\n toolbarWidth,\n}: ToolbarWrapperProps) => {\n const [width, setWidth] = useState<number | undefined>();\n const cleanupFunction = useRef<() => void | undefined>();\n\n useEffect(() => {\n if (toolbarWidth) {\n setWidth(toolbarWidth);\n } else {\n const toolbarWidthSum = calculateToolbarWidth(toolbarButtonGroups);\n if (toolbarWidthSum > 0) {\n setWidth(toolbarWidthSum + toolbarButtonGroups.length + OFFSET_IN_PX);\n }\n }\n }, [editorWidth, toolbarWidth, toolbarButtonGroups]);\n\n useEffect(() => {\n const handleSelectionChange = () => {\n const selection = window.getSelection();\n const rangeCount = selection?.rangeCount ?? 0;\n\n const selectionFrom = rangeCount > 0 && selection?.getRangeAt(0).startOffset;\n const selectionTo = rangeCount > 0 && selection?.getRangeAt(0).endOffset;\n const hasActiveSelection = !!selection && selectionFrom !== selectionTo && rangeCount > 0;\n\n if (!hasActiveSelection && cleanupFunction.current) {\n cleanupFunction.current();\n }\n };\n\n document.addEventListener('selectionchange', handleSelectionChange);\n return () => document.removeEventListener('selectionchange', handleSelectionChange);\n }, []);\n\n const autoUpdateWithCleanup = (reference: ReferenceType, floating: HTMLElement, update: () => void) => {\n cleanupFunction.current = autoUpdate(reference, floating, update);\n };\n\n return (\n <BalloonToolbar\n floatingOptions={{\n middleware: [flip(), shift()],\n whileElementsMounted: autoUpdateWithCleanup,\n }}\n styles={{ root: { border: 'none', background: '#ffffff', width, transitionDuration: '0s' } }}\n >\n <div\n data-selector=\"toolbar-floating\"\n data-test-id=\"toolbar-floating\"\n className=\"tw-rounded tw-
|
|
1
|
+
{"version":3,"file":"ToolbarWrapperPositioningFloating.es.js","sources":["../../../../../src/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningFloating.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useRef, useState } from 'react';\nimport { BalloonToolbar, ReferenceType, autoUpdate, flip, shift } from '@udecode/plate';\nimport { OFFSET_IN_PX, calculateToolbarWidth } from '@components/RichTextEditor/utils';\nimport { ToolbarWrapperProps } from './types';\n\nexport const ToolbarWrapperPositioningFloating = ({\n children,\n editorWidth,\n toolbarButtonGroups = [],\n toolbarWidth,\n}: ToolbarWrapperProps) => {\n const [width, setWidth] = useState<number | undefined>();\n const cleanupFunction = useRef<() => void | undefined>();\n\n useEffect(() => {\n if (toolbarWidth) {\n setWidth(toolbarWidth);\n } else {\n const toolbarWidthSum = calculateToolbarWidth(toolbarButtonGroups);\n if (toolbarWidthSum > 0) {\n setWidth(toolbarWidthSum + toolbarButtonGroups.length + OFFSET_IN_PX);\n }\n }\n }, [editorWidth, toolbarWidth, toolbarButtonGroups]);\n\n useEffect(() => {\n const handleSelectionChange = () => {\n const selection = window.getSelection();\n const rangeCount = selection?.rangeCount ?? 0;\n\n const selectionFrom = rangeCount > 0 && selection?.getRangeAt(0).startOffset;\n const selectionTo = rangeCount > 0 && selection?.getRangeAt(0).endOffset;\n const hasActiveSelection = !!selection && selectionFrom !== selectionTo && rangeCount > 0;\n\n if (!hasActiveSelection && cleanupFunction.current) {\n cleanupFunction.current();\n }\n };\n\n document.addEventListener('selectionchange', handleSelectionChange);\n return () => document.removeEventListener('selectionchange', handleSelectionChange);\n }, []);\n\n const autoUpdateWithCleanup = (reference: ReferenceType, floating: HTMLElement, update: () => void) => {\n cleanupFunction.current = autoUpdate(reference, floating, update);\n };\n\n return (\n <BalloonToolbar\n floatingOptions={{\n middleware: [flip(), shift()],\n whileElementsMounted: autoUpdateWithCleanup,\n }}\n styles={{ root: { border: 'none', background: '#ffffff', width, transitionDuration: '0s' } }}\n >\n <div\n data-selector=\"toolbar-floating\"\n data-test-id=\"toolbar-floating\"\n className=\"tw-rounded tw-border tw-border-line tw-shadow-lg tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap\"\n >\n {children}\n </div>\n </BalloonToolbar>\n );\n};\n"],"names":["ToolbarWrapperPositioningFloating","children","editorWidth","toolbarButtonGroups","toolbarWidth","width","setWidth","useState","cleanupFunction","useRef","useEffect","toolbarWidthSum","calculateToolbarWidth","OFFSET_IN_PX","handleSelectionChange","selection","rangeCount","selectionFrom","selectionTo","autoUpdateWithCleanup","reference","floating","update","autoUpdate","jsx","BalloonToolbar","flip","shift"],"mappings":";;;;;AAOO,MAAMA,IAAoC,CAAC;AAAA,EAC9C,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,qBAAAC,IAAsB,CAAC;AAAA,EACvB,cAAAC;AACJ,MAA2B;AACvB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAA6B,GACjDC,IAAkBC;AAExB,EAAAC,EAAU,MAAM;AACZ,QAAIN;AACA,MAAAE,EAASF,CAAY;AAAA,SAClB;AACG,YAAAO,IAAkBC,EAAsBT,CAAmB;AACjE,MAAIQ,IAAkB,KACTL,EAAAK,IAAkBR,EAAoB,SAASU,CAAY;AAAA,IAE5E;AAAA,EACD,GAAA,CAACX,GAAaE,GAAcD,CAAmB,CAAC,GAEnDO,EAAU,MAAM;AACZ,UAAMI,IAAwB,MAAM;AAC1B,YAAAC,IAAY,OAAO,gBACnBC,KAAaD,KAAA,gBAAAA,EAAW,eAAc,GAEtCE,IAAgBD,IAAa,MAAKD,KAAA,gBAAAA,EAAW,WAAW,GAAG,cAC3DG,IAAcF,IAAa,MAAKD,KAAA,gBAAAA,EAAW,WAAW,GAAG;AAG3D,MAAA,EAFuB,CAAC,CAACA,KAAaE,MAAkBC,KAAeF,IAAa,MAE7DR,EAAgB,WACvCA,EAAgB,QAAQ;AAAA,IAC5B;AAGK,oBAAA,iBAAiB,mBAAmBM,CAAqB,GAC3D,MAAM,SAAS,oBAAoB,mBAAmBA,CAAqB;AAAA,EACtF,GAAG,CAAE,CAAA;AAEL,QAAMK,IAAwB,CAACC,GAA0BC,GAAuBC,MAAuB;AACnG,IAAAd,EAAgB,UAAUe,EAAWH,GAAWC,GAAUC,CAAM;AAAA,EAAA;AAIhE,SAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,iBAAiB;AAAA,QACb,YAAY,CAACC,KAAQC,GAAO;AAAA,QAC5B,sBAAsBR;AAAA,MAC1B;AAAA,MACA,QAAQ,EAAE,MAAM,EAAE,QAAQ,QAAQ,YAAY,WAAW,OAAAd,GAAO,oBAAoB,OAAO;AAAA,MAE3F,UAAA,gBAAAmB;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,iBAAc;AAAA,UACd,gBAAa;AAAA,UACb,WAAU;AAAA,UAET,UAAAvB;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
|
|
@@ -3,7 +3,7 @@ const o = ({ children: t }) => /* @__PURE__ */ e(
|
|
|
3
3
|
"div",
|
|
4
4
|
{
|
|
5
5
|
"data-test-id": "toolbar-top",
|
|
6
|
-
className: "tw-relative tw-
|
|
6
|
+
className: "tw-relative tw-rounded-t tw-border-b tw-border-line tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap",
|
|
7
7
|
children: t
|
|
8
8
|
}
|
|
9
9
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarWrapperPositioningTop.es.js","sources":["../../../../../src/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningTop.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ToolbarWrapperProps } from './types';\n\nexport const ToolbarWrapperPositioningTop = ({ children }: ToolbarWrapperProps) => {\n return (\n <div\n data-test-id=\"toolbar-top\"\n className=\"tw-relative tw-
|
|
1
|
+
{"version":3,"file":"ToolbarWrapperPositioningTop.es.js","sources":["../../../../../src/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/ToolbarWrapperPositioningTop.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ToolbarWrapperProps } from './types';\n\nexport const ToolbarWrapperPositioningTop = ({ children }: ToolbarWrapperProps) => {\n return (\n <div\n data-test-id=\"toolbar-top\"\n className=\"tw-relative tw-rounded-t tw-border-b tw-border-line tw-bg-base tw-divide-y tw-divide-line tw-flex tw-flex-wrap\"\n >\n {children}\n </div>\n );\n};\n"],"names":["ToolbarWrapperPositioningTop","children","jsx"],"mappings":";AAIO,MAAMA,IAA+B,CAAC,EAAE,UAAAC,QAEvC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,IAET,UAAAD;AAAA,EAAA;AAAA;"}
|
|
@@ -1,47 +1,51 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import { jsxs as f, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { useId as x } from "react";
|
|
3
|
+
import { ReactEditor as C } from "slate-react";
|
|
4
|
+
import { getRootProps as u, setNodes as E } from "@udecode/plate";
|
|
5
|
+
import { merge as m } from "../../../../utilities/merge.es.js";
|
|
6
|
+
import { MarkupElement as k } from "../MarkupElement.es.js";
|
|
7
|
+
import { ELEMENT_CHECK_ITEM as b } from "./id.es.js";
|
|
8
|
+
import { justifyClassNames as g } from "../helper.es.js";
|
|
9
|
+
import { useRichTextEditorContext as S } from "../../context/RichTextEditorContext.es.js";
|
|
10
|
+
const N = (t, e) => t[e.children[0].textStyle], y = "tw-flex tw-flex-row tw-pb-2 tw-gap-1.5 tw-items-center", L = "focus:tw-outline-none tw-w-auto tw-min-w-[10px]", _ = (t) => {
|
|
11
|
+
const { attributes: e, children: s, nodeProps: l, element: o, editor: c } = t, a = u(t), r = o.checked, d = o.align ?? "left", { styles: h } = S(), i = x();
|
|
12
|
+
return /* @__PURE__ */ f("div", { ...e, ...a, className: m([y, g[d]]), children: [
|
|
13
|
+
/* @__PURE__ */ n(
|
|
13
14
|
"input",
|
|
14
15
|
{
|
|
15
16
|
"data-test-id": "checkbox-input",
|
|
16
17
|
className: "tw-w-4 tw-h-4 tw-m-0",
|
|
17
18
|
type: "checkbox",
|
|
18
19
|
checked: !!r,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
title: "Checklist item",
|
|
21
|
+
"aria-labelledby": i,
|
|
22
|
+
onChange: (p) => {
|
|
23
|
+
const w = C.findPath(c, o);
|
|
24
|
+
E(c, { checked: p.target.checked }, { at: w });
|
|
22
25
|
},
|
|
23
|
-
...
|
|
26
|
+
...l
|
|
24
27
|
}
|
|
25
|
-
)
|
|
26
|
-
/* @__PURE__ */
|
|
28
|
+
),
|
|
29
|
+
/* @__PURE__ */ n(
|
|
27
30
|
"span",
|
|
28
31
|
{
|
|
29
|
-
style: N(
|
|
30
|
-
|
|
32
|
+
style: N(h, o),
|
|
33
|
+
id: i,
|
|
34
|
+
className: m([L, r && "!tw-line-through"]),
|
|
31
35
|
children: s
|
|
32
36
|
}
|
|
33
37
|
)
|
|
34
38
|
] });
|
|
35
39
|
};
|
|
36
|
-
class
|
|
37
|
-
constructor(e =
|
|
40
|
+
class B extends k {
|
|
41
|
+
constructor(e = b, s = _) {
|
|
38
42
|
super(e, s);
|
|
39
43
|
}
|
|
40
44
|
}
|
|
41
45
|
export {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
+
y as CHECKBOX_DIV_CLASSES,
|
|
47
|
+
L as CHECKBOX_SPAN_CLASSES,
|
|
48
|
+
B as CheckboxListElement,
|
|
49
|
+
_ as CheckboxListElementNode
|
|
46
50
|
};
|
|
47
51
|
//# sourceMappingURL=CheckboxListElement.es.js.map
|
package/dist/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListElement.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxListElement.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CSSProperties } from 'react';\nimport { ReactEditor } from 'slate-react';\nimport { PlateRenderElementProps, TElement, TTodoListItemElement, getRootProps, setNodes } from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport { MarkupElement } from '../MarkupElement';\nimport { ELEMENT_CHECK_ITEM } from './id';\nimport { justifyClassNames } from '../helper';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context';\n\nconst getCheckboxListStyles = (styles: Record<string, CSSProperties>, element: TElement): CSSProperties =>\n styles[element.children[0].textStyle as string];\n\nexport const CHECKBOX_DIV_CLASSES = 'tw-flex tw-flex-row tw-pb-2 tw-gap-1.5 tw-items-center';\nexport const CHECKBOX_SPAN_CLASSES = 'focus:tw-outline-none tw-w-auto tw-min-w-[10px]';\n\nexport const CheckboxListElementNode = (props: PlateRenderElementProps) => {\n const { attributes, children, nodeProps, element, editor } = props;\n const rootProps = getRootProps(props);\n const checked = element.checked as boolean;\n const align = (element.align as string) ?? 'left';\n const { styles } = useRichTextEditorContext();\n\n return (\n <div {...attributes} {...rootProps} className={merge([CHECKBOX_DIV_CLASSES, justifyClassNames[align]])}>\n <
|
|
1
|
+
{"version":3,"file":"CheckboxListElement.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CSSProperties, useId } from 'react';\nimport { ReactEditor } from 'slate-react';\nimport { PlateRenderElementProps, TElement, TTodoListItemElement, getRootProps, setNodes } from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport { MarkupElement } from '../MarkupElement';\nimport { ELEMENT_CHECK_ITEM } from './id';\nimport { justifyClassNames } from '../helper';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context';\n\nconst getCheckboxListStyles = (styles: Record<string, CSSProperties>, element: TElement): CSSProperties =>\n styles[element.children[0].textStyle as string];\n\nexport const CHECKBOX_DIV_CLASSES = 'tw-flex tw-flex-row tw-pb-2 tw-gap-1.5 tw-items-center';\nexport const CHECKBOX_SPAN_CLASSES = 'focus:tw-outline-none tw-w-auto tw-min-w-[10px]';\n\nexport const CheckboxListElementNode = (props: PlateRenderElementProps) => {\n const { attributes, children, nodeProps, element, editor } = props;\n const rootProps = getRootProps(props);\n const checked = element.checked as boolean;\n const align = (element.align as string) ?? 'left';\n const { styles } = useRichTextEditorContext();\n const id = useId();\n\n return (\n <div {...attributes} {...rootProps} className={merge([CHECKBOX_DIV_CLASSES, justifyClassNames[align]])}>\n <input\n data-test-id=\"checkbox-input\"\n className=\"tw-w-4 tw-h-4 tw-m-0\"\n type=\"checkbox\"\n checked={!!checked}\n title=\"Checklist item\"\n aria-labelledby={id}\n onChange={(e) => {\n const path = ReactEditor.findPath(editor as ReactEditor, element);\n setNodes<TTodoListItemElement>(editor, { checked: e.target.checked }, { at: path });\n }}\n {...nodeProps}\n />\n <span\n style={getCheckboxListStyles(styles, element)}\n id={id}\n className={merge([CHECKBOX_SPAN_CLASSES, checked && '!tw-line-through'])}\n >\n {children}\n </span>\n </div>\n );\n};\n\nexport class CheckboxListElement extends MarkupElement {\n constructor(id = ELEMENT_CHECK_ITEM, node = CheckboxListElementNode) {\n super(id, node);\n }\n}\n"],"names":["getCheckboxListStyles","styles","element","CHECKBOX_DIV_CLASSES","CHECKBOX_SPAN_CLASSES","CheckboxListElementNode","props","attributes","children","nodeProps","editor","rootProps","getRootProps","checked","align","useRichTextEditorContext","id","useId","jsxs","merge","justifyClassNames","jsx","e","path","ReactEditor","setNodes","CheckboxListElement","MarkupElement","ELEMENT_CHECK_ITEM","node"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAwB,CAACC,GAAuCC,MAClED,EAAOC,EAAQ,SAAS,CAAC,EAAE,SAAmB,GAErCC,IAAuB,0DACvBC,IAAwB,mDAExBC,IAA0B,CAACC,MAAmC;AACvE,QAAM,EAAE,YAAAC,GAAY,UAAAC,GAAU,WAAAC,GAAW,SAAAP,GAAS,QAAAQ,EAAW,IAAAJ,GACvDK,IAAYC,EAAaN,CAAK,GAC9BO,IAAUX,EAAQ,SAClBY,IAASZ,EAAQ,SAAoB,QACrC,EAAE,QAAAD,MAAWc,KACbC,IAAKC;AAEX,SACK,gBAAAC,EAAA,OAAA,EAAK,GAAGX,GAAa,GAAGI,GAAW,WAAWQ,EAAM,CAAChB,GAAsBiB,EAAkBN,CAAK,CAAC,CAAC,GACjG,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAS,CAAC,CAACR;AAAA,QACX,OAAM;AAAA,QACN,mBAAiBG;AAAA,QACjB,UAAU,CAACM,MAAM;AACb,gBAAMC,IAAOC,EAAY,SAASd,GAAuBR,CAAO;AACjC,UAAAuB,EAAAf,GAAQ,EAAE,SAASY,EAAE,OAAO,WAAW,EAAE,IAAIC,EAAA,CAAM;AAAA,QACtF;AAAA,QACC,GAAGd;AAAA,MAAA;AAAA,IACR;AAAA,IACA,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,OAAOrB,EAAsBC,GAAQC,CAAO;AAAA,QAC5C,IAAAc;AAAA,QACA,WAAWG,EAAM,CAACf,GAAuBS,KAAW,kBAAkB,CAAC;AAAA,QAEtE,UAAAL;AAAA,MAAA;AAAA,IACL;AAAA,EACJ,EAAA,CAAA;AAER;AAEO,MAAMkB,UAA4BC,EAAc;AAAA,EACnD,YAAYX,IAAKY,GAAoBC,IAAOxB,GAAyB;AACjE,UAAMW,GAAIa,CAAI;AAAA,EAClB;AACJ;"}
|
|
@@ -7,58 +7,59 @@ import { defaultPlugins as K } from "./Plugins/index.es.js";
|
|
|
7
7
|
import { PaddingSizes as z } from "./types.es.js";
|
|
8
8
|
import { BlurObserver as D } from "./BlurObserver.es.js";
|
|
9
9
|
import { useEditorState as M } from "./hooks/useEditorState.es.js";
|
|
10
|
-
import { KEY_ELEMENT_BREAK_AFTER_COLUMN as
|
|
10
|
+
import { KEY_ELEMENT_BREAK_AFTER_COLUMN as b, GAP_DEFAULT as j } from "./Plugins/ColumnBreakPlugin/createColumnBreakPlugin.es.js";
|
|
11
11
|
import { Position as f } from "./EditorPositioningWrapper/types.es.js";
|
|
12
|
-
import { forceToFocusNextElement as
|
|
13
|
-
import { parseRawValue as
|
|
14
|
-
const
|
|
12
|
+
import { forceToFocusNextElement as v } from "./helpers/forceToFocusElement.es.js";
|
|
13
|
+
import { parseRawValue as B } from "./utils/parseRawValue.es.js";
|
|
14
|
+
const U = {
|
|
15
15
|
position: "relative",
|
|
16
16
|
height: "0"
|
|
17
|
-
},
|
|
17
|
+
}, Y = ({
|
|
18
18
|
id: u,
|
|
19
|
-
value:
|
|
19
|
+
value: l,
|
|
20
20
|
placeholder: E = "",
|
|
21
21
|
readonly: y = !1,
|
|
22
22
|
onTextChange: T,
|
|
23
|
-
onBlur:
|
|
23
|
+
onBlur: s,
|
|
24
24
|
padding: h = z.None,
|
|
25
25
|
position: m = f.FLOATING,
|
|
26
26
|
plugins: n = K,
|
|
27
27
|
updateValueOnChange: N = !1,
|
|
28
|
-
onValueChanged:
|
|
29
|
-
border:
|
|
30
|
-
toolbarWidth:
|
|
31
|
-
hideExternalFloatingModals:
|
|
28
|
+
onValueChanged: R,
|
|
29
|
+
border: x = !0,
|
|
30
|
+
toolbarWidth: L,
|
|
31
|
+
hideExternalFloatingModals: O
|
|
32
32
|
}) => {
|
|
33
33
|
var c, d;
|
|
34
34
|
const t = I(u), { localValue: F, onChange: P, memoizedValue: S, config: r } = M({
|
|
35
35
|
editorId: t,
|
|
36
|
-
initialValue:
|
|
36
|
+
initialValue: l,
|
|
37
37
|
onTextChange: T,
|
|
38
38
|
plugins: n,
|
|
39
|
-
onValueChanged:
|
|
40
|
-
}), e = n.plugins.find((o) => o.key ===
|
|
39
|
+
onValueChanged: R
|
|
40
|
+
}), e = n.plugins.find((o) => o.key === b), V = ((c = e == null ? void 0 : e.options) == null ? void 0 : c.columns) ?? 1, _ = ((d = e == null ? void 0 : e.options) == null ? void 0 : d.gap) ?? j, a = {
|
|
41
41
|
placeholder: E,
|
|
42
42
|
renderPlaceholder: ({ children: o, attributes: p }) => {
|
|
43
43
|
const g = {
|
|
44
44
|
...p,
|
|
45
45
|
style: {
|
|
46
46
|
...p.style,
|
|
47
|
-
...
|
|
47
|
+
...U
|
|
48
48
|
}
|
|
49
49
|
};
|
|
50
50
|
return /* @__PURE__ */ i("span", { ...g, children: o });
|
|
51
51
|
},
|
|
52
52
|
readOnly: y,
|
|
53
|
-
onBlur: () =>
|
|
53
|
+
onBlur: () => s && s(JSON.stringify(F.current)),
|
|
54
54
|
className: `${h}`,
|
|
55
|
+
"aria-label": "Rich Text Editor",
|
|
55
56
|
style: {
|
|
56
57
|
columns: V,
|
|
57
58
|
columnGap: _,
|
|
58
59
|
outline: "none"
|
|
59
60
|
},
|
|
60
61
|
onKeyDown: (o) => {
|
|
61
|
-
o.code === "Tab" &&
|
|
62
|
+
o.code === "Tab" && v(o, !o.shiftKey);
|
|
62
63
|
},
|
|
63
64
|
scrollSelectionIntoView: () => {
|
|
64
65
|
}
|
|
@@ -69,7 +70,7 @@ const Y = {
|
|
|
69
70
|
value: {
|
|
70
71
|
styles: r.styles(),
|
|
71
72
|
position: m,
|
|
72
|
-
border:
|
|
73
|
+
border: x,
|
|
73
74
|
editorId: t
|
|
74
75
|
},
|
|
75
76
|
children: /* @__PURE__ */ A(
|
|
@@ -81,18 +82,18 @@ const Y = {
|
|
|
81
82
|
plugins: r.create(),
|
|
82
83
|
initialValue: S,
|
|
83
84
|
children: [
|
|
84
|
-
!a.readOnly && r.toolbar(
|
|
85
|
+
!a.readOnly && r.toolbar(L),
|
|
85
86
|
r.inline(),
|
|
86
|
-
N && /* @__PURE__ */ i(C, { value:
|
|
87
|
-
m === f.FLOATING && /* @__PURE__ */ i(D, { hideExternalFloatingModals:
|
|
87
|
+
N && /* @__PURE__ */ i(C, { value: B({ editorId: t, raw: l, plugins: n }) }),
|
|
88
|
+
m === f.FLOATING && /* @__PURE__ */ i(D, { hideExternalFloatingModals: O })
|
|
88
89
|
]
|
|
89
90
|
}
|
|
90
91
|
)
|
|
91
92
|
}
|
|
92
93
|
);
|
|
93
94
|
};
|
|
94
|
-
|
|
95
|
+
Y.displayName = "FondueRichTextEditor";
|
|
95
96
|
export {
|
|
96
|
-
|
|
97
|
+
Y as RichTextEditor
|
|
97
98
|
};
|
|
98
99
|
//# sourceMappingURL=RichTextEditor.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { Plate, TEditableProps } from '@udecode/plate';\nimport { RenderPlaceholderProps } from 'slate-react';\nimport { ContentReplacement } from './ContentReplacement';\nimport { RichTextEditorProvider } from './context/RichTextEditorContext';\nimport { Position } from './EditorPositioningWrapper';\nimport { forceToFocusNextElement } from './helpers';\nimport { useEditorState } from './hooks';\nimport { GAP_DEFAULT, KEY_ELEMENT_BREAK_AFTER_COLUMN, PluginComposer, defaultPlugins } from './Plugins';\nimport { PaddingSizes, TreeOfNodes } from './types';\nimport { parseRawValue } from './utils';\nimport { BlurObserver } from '@components/RichTextEditor/BlurObserver';\n\nconst PLACEHOLDER_STYLES: RenderPlaceholderProps['attributes']['style'] = {\n position: 'relative',\n height: '0',\n};\n\nexport type RichTextEditorProps = {\n id?: string;\n placeholder?: string;\n value?: string;\n onTextChange?: (value: string) => void;\n onBlur?: (value: string) => void;\n readonly?: boolean;\n padding?: PaddingSizes;\n position?: Position;\n plugins?: PluginComposer;\n onValueChanged?: (value: TreeOfNodes | null) => void;\n border?: boolean;\n updateValueOnChange?: boolean; // Only set to true when you are sure that performance isn't an issue\n toolbarWidth?: number;\n hideExternalFloatingModals?: (editorId: string) => void;\n};\n\nexport const RichTextEditor = ({\n id,\n value,\n placeholder = '',\n readonly = false,\n onTextChange,\n onBlur,\n padding = PaddingSizes.None,\n position = Position.FLOATING,\n plugins = defaultPlugins,\n updateValueOnChange = false,\n onValueChanged,\n border = true,\n toolbarWidth,\n hideExternalFloatingModals,\n}: RichTextEditorProps) => {\n const editorId = useMemoizedId(id);\n const { localValue, onChange, memoizedValue, config } = useEditorState({\n editorId,\n initialValue: value,\n onTextChange,\n plugins,\n onValueChanged,\n });\n\n const breakAfterPlugin = plugins.plugins.find((plugin) => plugin.key === KEY_ELEMENT_BREAK_AFTER_COLUMN);\n const columns = breakAfterPlugin?.options?.columns ?? 1;\n const columnGap = breakAfterPlugin?.options?.gap ?? GAP_DEFAULT;\n\n const editableProps: TEditableProps = {\n placeholder,\n renderPlaceholder: ({ children, attributes }) => {\n const mergedAttributes = {\n ...attributes,\n style: {\n ...attributes.style,\n ...PLACEHOLDER_STYLES,\n },\n };\n return <span {...mergedAttributes}>{children}</span>;\n },\n readOnly: readonly,\n onBlur: () => onBlur && onBlur(JSON.stringify(localValue.current)),\n className: `${padding}`,\n style: {\n columns,\n columnGap,\n outline: 'none',\n },\n onKeyDown: (event) => {\n if (event.code === 'Tab') {\n forceToFocusNextElement(event, !event.shiftKey);\n }\n },\n scrollSelectionIntoView: () => {\n // We pass in an empty function here because we don't want the default scroll behaviour\n },\n };\n\n return (\n <RichTextEditorProvider\n value={{\n styles: config.styles(),\n position,\n border,\n editorId,\n }}\n >\n <Plate\n id={editorId}\n onChange={onChange}\n editableProps={editableProps}\n plugins={config.create()}\n initialValue={memoizedValue}\n >\n {!editableProps.readOnly && config.toolbar(toolbarWidth)}\n {config.inline()}\n {updateValueOnChange && <ContentReplacement value={parseRawValue({ editorId, raw: value, plugins })} />}\n {position === Position.FLOATING && (\n <BlurObserver hideExternalFloatingModals={hideExternalFloatingModals} />\n )}\n </Plate>\n </RichTextEditorProvider>\n );\n};\nRichTextEditor.displayName = 'FondueRichTextEditor';\n"],"names":["PLACEHOLDER_STYLES","RichTextEditor","id","value","placeholder","readonly","onTextChange","onBlur","padding","PaddingSizes","position","Position","plugins","defaultPlugins","updateValueOnChange","onValueChanged","border","toolbarWidth","hideExternalFloatingModals","editorId","useMemoizedId","localValue","onChange","memoizedValue","config","useEditorState","breakAfterPlugin","plugin","KEY_ELEMENT_BREAK_AFTER_COLUMN","columns","_a","columnGap","_b","GAP_DEFAULT","editableProps","children","attributes","mergedAttributes","jsx","event","forceToFocusNextElement","RichTextEditorProvider","jsxs","Plate","ContentReplacement","parseRawValue","BlurObserver"],"mappings":";;;;;;;;;;;;;AAeA,MAAMA,IAAoE;AAAA,EACtE,UAAU;AAAA,EACV,QAAQ;AACZ,GAmBaC,IAAiB,CAAC;AAAA,EAC3B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAUC,EAAa;AAAA,EACvB,UAAAC,IAAWC,EAAS;AAAA,EACpB,SAAAC,IAAUC;AAAA,EACV,qBAAAC,IAAsB;AAAA,EACtB,gBAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,cAAAC;AAAA,EACA,4BAAAC;AACJ,MAA2B;;AACjB,QAAAC,IAAWC,EAAclB,CAAE,GAC3B,EAAE,YAAAmB,GAAY,UAAAC,GAAU,eAAAC,GAAe,QAAAC,EAAA,IAAWC,EAAe;AAAA,IACnE,UAAAN;AAAA,IACA,cAAchB;AAAA,IACd,cAAAG;AAAA,IACA,SAAAM;AAAA,IACA,gBAAAG;AAAA,EAAA,CACH,GAEKW,IAAmBd,EAAQ,QAAQ,KAAK,CAACe,MAAWA,EAAO,QAAQC,CAA8B,GACjGC,MAAUC,IAAAJ,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAI,EAA2B,YAAW,GAChDC,MAAYC,IAAAN,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAM,EAA2B,QAAOC,GAE9CC,IAAgC;AAAA,IAClC,aAAA9B;AAAA,IACA,mBAAmB,CAAC,EAAE,UAAA+B,GAAU,YAAAC,QAAiB;AAC7C,YAAMC,IAAmB;AAAA,QACrB,GAAGD;AAAA,QACH,OAAO;AAAA,UACH,GAAGA,EAAW;AAAA,UACd,GAAGpC;AAAA,QACP;AAAA,MAAA;AAEJ,aAAQ,gBAAAsC,EAAA,QAAA,EAAM,GAAGD,GAAmB,UAAAF,EAAS,CAAA;AAAA,IACjD;AAAA,IACA,UAAU9B;AAAA,IACV,QAAQ,MAAME,KAAUA,EAAO,KAAK,UAAUc,EAAW,OAAO,CAAC;AAAA,IACjE,WAAW,GAAGb,CAAO;AAAA,IACrB,OAAO;AAAA,MACH,SAAAqB;AAAA,MACA,WAAAE;AAAA,MACA,SAAS;AAAA,IACb;AAAA,IACA,WAAW,CAACQ,MAAU;AACd,MAAAA,EAAM,SAAS,SACSC,EAAAD,GAAO,CAACA,EAAM,QAAQ;AAAA,IAEtD;AAAA,IACA,yBAAyB,MAAM;AAAA,IAE/B;AAAA,EAAA;AAIA,SAAA,gBAAAD;AAAA,IAACG;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,QAAQjB,EAAO,OAAO;AAAA,QACtB,UAAAd;AAAA,QACA,QAAAM;AAAA,QACA,UAAAG;AAAA,MACJ;AAAA,MAEA,UAAA,gBAAAuB;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,IAAIxB;AAAA,UACJ,UAAAG;AAAA,UACA,eAAAY;AAAA,UACA,SAASV,EAAO,OAAO;AAAA,UACvB,cAAcD;AAAA,UAEb,UAAA;AAAA,YAAA,CAACW,EAAc,YAAYV,EAAO,QAAQP,CAAY;AAAA,YACtDO,EAAO,OAAO;AAAA,YACdV,KAAwB,gBAAAwB,EAAAM,GAAA,EAAmB,OAAOC,EAAc,EAAE,UAAA1B,GAAU,KAAKhB,GAAO,SAAAS,EAAQ,CAAC,EAAG,CAAA;AAAA,YACpGF,MAAaC,EAAS,YACnB,gBAAA2B,EAACQ,KAAa,4BAAA5B,GAAwD;AAAA,UAAA;AAAA,QAAA;AAAA,MAE9E;AAAA,IAAA;AAAA,EAAA;AAGZ;AACAjB,EAAe,cAAc;"}
|
|
1
|
+
{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { Plate, TEditableProps } from '@udecode/plate';\nimport { RenderPlaceholderProps } from 'slate-react';\nimport { ContentReplacement } from './ContentReplacement';\nimport { RichTextEditorProvider } from './context/RichTextEditorContext';\nimport { Position } from './EditorPositioningWrapper';\nimport { forceToFocusNextElement } from './helpers';\nimport { useEditorState } from './hooks';\nimport { GAP_DEFAULT, KEY_ELEMENT_BREAK_AFTER_COLUMN, PluginComposer, defaultPlugins } from './Plugins';\nimport { PaddingSizes, TreeOfNodes } from './types';\nimport { parseRawValue } from './utils';\nimport { BlurObserver } from '@components/RichTextEditor/BlurObserver';\n\nconst PLACEHOLDER_STYLES: RenderPlaceholderProps['attributes']['style'] = {\n position: 'relative',\n height: '0',\n};\n\nexport type RichTextEditorProps = {\n id?: string;\n placeholder?: string;\n value?: string;\n onTextChange?: (value: string) => void;\n onBlur?: (value: string) => void;\n readonly?: boolean;\n padding?: PaddingSizes;\n position?: Position;\n plugins?: PluginComposer;\n onValueChanged?: (value: TreeOfNodes | null) => void;\n border?: boolean;\n updateValueOnChange?: boolean; // Only set to true when you are sure that performance isn't an issue\n toolbarWidth?: number;\n hideExternalFloatingModals?: (editorId: string) => void;\n};\n\nexport const RichTextEditor = ({\n id,\n value,\n placeholder = '',\n readonly = false,\n onTextChange,\n onBlur,\n padding = PaddingSizes.None,\n position = Position.FLOATING,\n plugins = defaultPlugins,\n updateValueOnChange = false,\n onValueChanged,\n border = true,\n toolbarWidth,\n hideExternalFloatingModals,\n}: RichTextEditorProps) => {\n const editorId = useMemoizedId(id);\n const { localValue, onChange, memoizedValue, config } = useEditorState({\n editorId,\n initialValue: value,\n onTextChange,\n plugins,\n onValueChanged,\n });\n\n const breakAfterPlugin = plugins.plugins.find((plugin) => plugin.key === KEY_ELEMENT_BREAK_AFTER_COLUMN);\n const columns = breakAfterPlugin?.options?.columns ?? 1;\n const columnGap = breakAfterPlugin?.options?.gap ?? GAP_DEFAULT;\n\n const editableProps: TEditableProps = {\n placeholder,\n renderPlaceholder: ({ children, attributes }) => {\n const mergedAttributes = {\n ...attributes,\n style: {\n ...attributes.style,\n ...PLACEHOLDER_STYLES,\n },\n };\n return <span {...mergedAttributes}>{children}</span>;\n },\n readOnly: readonly,\n onBlur: () => onBlur && onBlur(JSON.stringify(localValue.current)),\n className: `${padding}`,\n 'aria-label': 'Rich Text Editor',\n style: {\n columns,\n columnGap,\n outline: 'none',\n },\n onKeyDown: (event) => {\n if (event.code === 'Tab') {\n forceToFocusNextElement(event, !event.shiftKey);\n }\n },\n scrollSelectionIntoView: () => {\n // We pass in an empty function here because we don't want the default scroll behaviour\n },\n };\n\n return (\n <RichTextEditorProvider\n value={{\n styles: config.styles(),\n position,\n border,\n editorId,\n }}\n >\n <Plate\n id={editorId}\n onChange={onChange}\n editableProps={editableProps}\n plugins={config.create()}\n initialValue={memoizedValue}\n >\n {!editableProps.readOnly && config.toolbar(toolbarWidth)}\n {config.inline()}\n {updateValueOnChange && <ContentReplacement value={parseRawValue({ editorId, raw: value, plugins })} />}\n {position === Position.FLOATING && (\n <BlurObserver hideExternalFloatingModals={hideExternalFloatingModals} />\n )}\n </Plate>\n </RichTextEditorProvider>\n );\n};\nRichTextEditor.displayName = 'FondueRichTextEditor';\n"],"names":["PLACEHOLDER_STYLES","RichTextEditor","id","value","placeholder","readonly","onTextChange","onBlur","padding","PaddingSizes","position","Position","plugins","defaultPlugins","updateValueOnChange","onValueChanged","border","toolbarWidth","hideExternalFloatingModals","editorId","useMemoizedId","localValue","onChange","memoizedValue","config","useEditorState","breakAfterPlugin","plugin","KEY_ELEMENT_BREAK_AFTER_COLUMN","columns","_a","columnGap","_b","GAP_DEFAULT","editableProps","children","attributes","mergedAttributes","jsx","event","forceToFocusNextElement","RichTextEditorProvider","jsxs","Plate","ContentReplacement","parseRawValue","BlurObserver"],"mappings":";;;;;;;;;;;;;AAeA,MAAMA,IAAoE;AAAA,EACtE,UAAU;AAAA,EACV,QAAQ;AACZ,GAmBaC,IAAiB,CAAC;AAAA,EAC3B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAUC,EAAa;AAAA,EACvB,UAAAC,IAAWC,EAAS;AAAA,EACpB,SAAAC,IAAUC;AAAA,EACV,qBAAAC,IAAsB;AAAA,EACtB,gBAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,cAAAC;AAAA,EACA,4BAAAC;AACJ,MAA2B;;AACjB,QAAAC,IAAWC,EAAclB,CAAE,GAC3B,EAAE,YAAAmB,GAAY,UAAAC,GAAU,eAAAC,GAAe,QAAAC,EAAA,IAAWC,EAAe;AAAA,IACnE,UAAAN;AAAA,IACA,cAAchB;AAAA,IACd,cAAAG;AAAA,IACA,SAAAM;AAAA,IACA,gBAAAG;AAAA,EAAA,CACH,GAEKW,IAAmBd,EAAQ,QAAQ,KAAK,CAACe,MAAWA,EAAO,QAAQC,CAA8B,GACjGC,MAAUC,IAAAJ,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAI,EAA2B,YAAW,GAChDC,MAAYC,IAAAN,KAAA,gBAAAA,EAAkB,YAAlB,gBAAAM,EAA2B,QAAOC,GAE9CC,IAAgC;AAAA,IAClC,aAAA9B;AAAA,IACA,mBAAmB,CAAC,EAAE,UAAA+B,GAAU,YAAAC,QAAiB;AAC7C,YAAMC,IAAmB;AAAA,QACrB,GAAGD;AAAA,QACH,OAAO;AAAA,UACH,GAAGA,EAAW;AAAA,UACd,GAAGpC;AAAA,QACP;AAAA,MAAA;AAEJ,aAAQ,gBAAAsC,EAAA,QAAA,EAAM,GAAGD,GAAmB,UAAAF,EAAS,CAAA;AAAA,IACjD;AAAA,IACA,UAAU9B;AAAA,IACV,QAAQ,MAAME,KAAUA,EAAO,KAAK,UAAUc,EAAW,OAAO,CAAC;AAAA,IACjE,WAAW,GAAGb,CAAO;AAAA,IACrB,cAAc;AAAA,IACd,OAAO;AAAA,MACH,SAAAqB;AAAA,MACA,WAAAE;AAAA,MACA,SAAS;AAAA,IACb;AAAA,IACA,WAAW,CAACQ,MAAU;AACd,MAAAA,EAAM,SAAS,SACSC,EAAAD,GAAO,CAACA,EAAM,QAAQ;AAAA,IAEtD;AAAA,IACA,yBAAyB,MAAM;AAAA,IAE/B;AAAA,EAAA;AAIA,SAAA,gBAAAD;AAAA,IAACG;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,QAAQjB,EAAO,OAAO;AAAA,QACtB,UAAAd;AAAA,QACA,QAAAM;AAAA,QACA,UAAAG;AAAA,MACJ;AAAA,MAEA,UAAA,gBAAAuB;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,IAAIxB;AAAA,UACJ,UAAAG;AAAA,UACA,eAAAY;AAAA,UACA,SAASV,EAAO,OAAO;AAAA,UACvB,cAAcD;AAAA,UAEb,UAAA;AAAA,YAAA,CAACW,EAAc,YAAYV,EAAO,QAAQP,CAAY;AAAA,YACtDO,EAAO,OAAO;AAAA,YACdV,KAAwB,gBAAAwB,EAAAM,GAAA,EAAmB,OAAOC,EAAc,EAAE,UAAA1B,GAAU,KAAKhB,GAAO,SAAAS,EAAQ,CAAC,EAAG,CAAA;AAAA,YACpGF,MAAaC,EAAS,YACnB,gBAAA2B,EAACQ,KAAa,4BAAA5B,GAAwD;AAAA,UAAA;AAAA,QAAA;AAAA,MAE9E;AAAA,IAAA;AAAA,EAAA;AAGZ;AACAjB,EAAe,cAAc;"}
|