@frontify/fondue 12.0.0-beta.168 → 12.0.0-beta.169
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/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListElement.es.js +20 -20
- package/dist/components/RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListElement.es.js.map +1 -1
- package/dist/components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement.es.js +27 -27
- package/dist/components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement.es.js.map +1 -1
- package/dist/index.cjs.js +10 -10
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +10 -10
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import t from "react";
|
|
2
|
-
import { ReactEditor as
|
|
3
|
-
import { getRootProps as
|
|
4
|
-
import { merge as
|
|
5
|
-
import { MarkupElement as
|
|
6
|
-
import { ELEMENT_CHECK_ITEM as
|
|
7
|
-
import { useRichTextEditorContext as
|
|
8
|
-
import { getTextStyle as
|
|
9
|
-
import { justifyClassNames as
|
|
2
|
+
import { ReactEditor as f } from "slate-react";
|
|
3
|
+
import { getRootProps as E, setNodes as u } from "@udecode/plate";
|
|
4
|
+
import { merge as m } from "../../../../utilities/merge.es.js";
|
|
5
|
+
import { MarkupElement as k } from "../MarkupElement.es.js";
|
|
6
|
+
import { ELEMENT_CHECK_ITEM as x } from "./id.es.js";
|
|
7
|
+
import { useRichTextEditorContext as g } from "../../context/RichTextEditorContext.es.js";
|
|
8
|
+
import { getTextStyle as N } from "../ListPlugin/ListItemContentMarkupElement.es.js";
|
|
9
|
+
import { justifyClassNames as b } from "../TextStylePlugin/TextStyles/alignment.es.js";
|
|
10
10
|
const C = (o) => {
|
|
11
|
-
const { attributes: c, children: n, nodeProps: a, element: e, editor:
|
|
11
|
+
const { attributes: c, children: n, nodeProps: a, element: e, editor: r } = o, i = E(o), s = e.checked, { designTokens: l } = g(), d = l[N(e.children[0])], p = e.align ?? "left";
|
|
12
12
|
return /* @__PURE__ */ t.createElement(
|
|
13
13
|
"div",
|
|
14
14
|
{
|
|
15
15
|
...c,
|
|
16
|
-
...
|
|
17
|
-
className:
|
|
16
|
+
...i,
|
|
17
|
+
className: m(["tw-flex tw-flex-row tw-pb-2 tw-gap-1.5 tw-items-center", b[p]])
|
|
18
18
|
},
|
|
19
19
|
/* @__PURE__ */ t.createElement("div", { contentEditable: !1, className: "tw-select-none" }, /* @__PURE__ */ t.createElement(
|
|
20
20
|
"input",
|
|
@@ -22,10 +22,10 @@ const C = (o) => {
|
|
|
22
22
|
"data-test-id": "checkbox-input",
|
|
23
23
|
className: "tw-w-4 tw-h-4 tw-m-0",
|
|
24
24
|
type: "checkbox",
|
|
25
|
-
checked: !!
|
|
26
|
-
onChange: (
|
|
27
|
-
const
|
|
28
|
-
u(
|
|
25
|
+
checked: !!s,
|
|
26
|
+
onChange: (h) => {
|
|
27
|
+
const w = f.findPath(r, e);
|
|
28
|
+
u(r, { checked: h.target.checked }, { at: w });
|
|
29
29
|
},
|
|
30
30
|
...a
|
|
31
31
|
}
|
|
@@ -33,20 +33,20 @@ const C = (o) => {
|
|
|
33
33
|
/* @__PURE__ */ t.createElement(
|
|
34
34
|
"span",
|
|
35
35
|
{
|
|
36
|
-
style:
|
|
37
|
-
className:
|
|
36
|
+
style: d,
|
|
37
|
+
className: m(["focus:tw-outline-none tw-w-auto tw-min-w-[10px]", s && "tw-line-through"])
|
|
38
38
|
},
|
|
39
39
|
n
|
|
40
40
|
)
|
|
41
41
|
);
|
|
42
42
|
};
|
|
43
|
-
class
|
|
44
|
-
constructor(c =
|
|
43
|
+
class j extends k {
|
|
44
|
+
constructor(c = x, n = C) {
|
|
45
45
|
super(c, n);
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
export {
|
|
49
|
-
|
|
49
|
+
j as CheckboxListElement,
|
|
50
50
|
C as CheckboxListElementNode
|
|
51
51
|
};
|
|
52
52
|
//# 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 React from 'react';\nimport { ReactEditor } from 'slate-react';\nimport { PlateRenderElementProps, TTodoListItemElement, getRootProps, setNodes } from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport { MarkupElement } from '../MarkupElement';\nimport { ELEMENT_CHECK_ITEM } from './id';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\nimport { getTextStyle } from '../ListPlugin/ListItemContentMarkupElement';\nimport { justifyClassNames } from '../TextStylePlugin/TextStyles/alignment';\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 { designTokens } = useRichTextEditorContext();\n const tokenStyles = designTokens[getTextStyle(element.children[0])];\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 React from 'react';\nimport { ReactEditor } from 'slate-react';\nimport { PlateRenderElementProps, TTodoListItemElement, getRootProps, setNodes } from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport { MarkupElement } from '../MarkupElement';\nimport { ELEMENT_CHECK_ITEM } from './id';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\nimport { getTextStyle } from '../ListPlugin/ListItemContentMarkupElement';\nimport { justifyClassNames } from '../TextStylePlugin/TextStyles/alignment';\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 { designTokens } = useRichTextEditorContext();\n const tokenStyles = designTokens[getTextStyle(element.children[0])];\n const align = (element.align as string) ?? 'left';\n\n return (\n <div\n {...attributes}\n {...rootProps}\n className={merge(['tw-flex tw-flex-row tw-pb-2 tw-gap-1.5 tw-items-center', justifyClassNames[align]])}\n >\n <div contentEditable={false} className=\"tw-select-none\">\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 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 </div>\n <span\n style={tokenStyles}\n className={merge(['focus:tw-outline-none tw-w-auto tw-min-w-[10px]', 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":["CheckboxListElementNode","props","attributes","children","nodeProps","element","editor","rootProps","getRootProps","checked","designTokens","useRichTextEditorContext","tokenStyles","getTextStyle","align","React","merge","justifyClassNames","e","path","ReactEditor","setNodes","CheckboxListElement","MarkupElement","id","ELEMENT_CHECK_ITEM","node"],"mappings":";;;;;;;;;AAYa,MAAAA,IAA0B,CAACC,MAAmC;AACvE,QAAM,EAAE,YAAAC,GAAY,UAAAC,GAAU,WAAAC,GAAW,SAAAC,GAAS,QAAAC,EAAW,IAAAL,GACvDM,IAAYC,EAAaP,CAAK,GAC9BQ,IAAUJ,EAAQ,SAClB,EAAE,cAAAK,MAAiBC,KACnBC,IAAcF,EAAaG,EAAaR,EAAQ,SAAS,CAAC,CAAC,CAAC,GAC5DS,IAAST,EAAQ,SAAoB;AAGvC,SAAA,gBAAAU,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGb;AAAA,MACH,GAAGK;AAAA,MACJ,WAAWS,EAAM,CAAC,0DAA0DC,EAAkBH,CAAK,CAAC,CAAC;AAAA,IAAA;AAAA,IAEpG,gBAAAC,EAAA,cAAA,OAAA,EAAI,iBAAiB,IAAO,WAAU,oBACnC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAS,CAAC,CAACN;AAAA,QACX,UAAU,CAACS,MAAM;AACb,gBAAMC,IAAOC,EAAY,SAASd,GAAuBD,CAAO;AACjC,UAAAgB,EAAAf,GAAQ,EAAE,SAASY,EAAE,OAAO,WAAW,EAAE,IAAIC,EAAA,CAAM;AAAA,QACtF;AAAA,QACC,GAAGf;AAAA,MAAA;AAAA,IAAA,CAEZ;AAAA,IACA,gBAAAW,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,OAAOH;AAAA,QACP,WAAWI,EAAM,CAAC,mDAAmDP,KAAW,iBAAiB,CAAC;AAAA,MAAA;AAAA,MAEjGN;AAAA,IACL;AAAA,EAAA;AAGZ;AAEO,MAAMmB,UAA4BC,EAAc;AAAA,EACnD,YAAYC,IAAKC,GAAoBC,IAAO1B,GAAyB;AACjE,UAAMwB,GAAIE,CAAI;AAAA,EAClB;AACJ;"}
|
package/dist/components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement.es.js
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
import { useRichTextEditorContext as
|
|
2
|
-
import { TextStylesToDesignTokenMap as
|
|
3
|
-
import { ELEMENT_LIC as
|
|
4
|
-
import { merge as
|
|
1
|
+
import { useRichTextEditorContext as i } from "../../context/RichTextEditorContext.es.js";
|
|
2
|
+
import { TextStylesToDesignTokenMap as a } from "../../types.es.js";
|
|
3
|
+
import { ELEMENT_LIC as c } from "@udecode/plate";
|
|
4
|
+
import { merge as s } from "../../../../utilities/merge.es.js";
|
|
5
5
|
import o from "react";
|
|
6
|
-
import { getColumnBreakClasses as
|
|
7
|
-
import { MarkupElement as
|
|
8
|
-
import { justifyClassNames as
|
|
9
|
-
import { MARK_TEXT_STYLE as
|
|
10
|
-
import { TextStyles as
|
|
11
|
-
const
|
|
12
|
-
const r = Object.values(
|
|
13
|
-
return
|
|
14
|
-
},
|
|
6
|
+
import { getColumnBreakClasses as p } from "../ColumnBreakPlugin/utils/getColumnBreakClasses.es.js";
|
|
7
|
+
import { MarkupElement as l } from "../MarkupElement.es.js";
|
|
8
|
+
import { justifyClassNames as u } from "../TextStylePlugin/TextStyles/alignment.es.js";
|
|
9
|
+
import { MARK_TEXT_STYLE as E } from "./ListPlugin.es.js";
|
|
10
|
+
import { TextStyles as n } from "../TextStylePlugin/TextStyles/textStyles.es.js";
|
|
11
|
+
const f = (t) => {
|
|
12
|
+
const r = Object.values(n).find((e) => (t == null ? void 0 : t[E]) === e) ?? n.ELEMENT_PARAGRAPH;
|
|
13
|
+
return a[r];
|
|
14
|
+
}, T = (t, r) => {
|
|
15
15
|
var e;
|
|
16
|
-
return ((e = t[
|
|
17
|
-
},
|
|
18
|
-
|
|
19
|
-
t.align ?
|
|
16
|
+
return ((e = t[f(r.children[0])]) == null ? void 0 : e.textDecoration) === "underline" ? "tw-underline" : "";
|
|
17
|
+
}, g = (t) => s([
|
|
18
|
+
p(t),
|
|
19
|
+
t.align ? u[t.align] : "tw-justify-start",
|
|
20
20
|
"tw-grid tw-grid-cols-[min-content_repeat(3,_auto)]"
|
|
21
|
-
]),
|
|
22
|
-
const { designTokens: m } =
|
|
23
|
-
return /* @__PURE__ */ o.createElement("p", { className:
|
|
21
|
+
]), x = ({ attributes: t, children: r, element: e }) => {
|
|
22
|
+
const { designTokens: m } = i();
|
|
23
|
+
return /* @__PURE__ */ o.createElement("p", { className: g(e), ...t }, /* @__PURE__ */ o.createElement("span", { className: s(["tw-w-auto tw-min-w-[10px]", T(m, e)]) }, r));
|
|
24
24
|
};
|
|
25
|
-
class
|
|
26
|
-
constructor(r =
|
|
25
|
+
class d extends l {
|
|
26
|
+
constructor(r = c, e = x) {
|
|
27
27
|
super(r, e);
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
export {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
d as ListItemContentMarkupElement,
|
|
32
|
+
x as ListItemContentMarkupElementNode,
|
|
33
|
+
g as getLicElementClassNames,
|
|
34
|
+
f as getTextStyle,
|
|
35
|
+
T as getUnderlineClassNames
|
|
36
36
|
};
|
|
37
37
|
//# sourceMappingURL=ListItemContentMarkupElement.es.js.map
|
package/dist/components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemContentMarkupElement.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\nimport { DesignTokens, TextStylesToDesignTokenMap } from '@components/RichTextEditor/types';\nimport { ELEMENT_LIC, PlateRenderElementProps, TElement, TNode } from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport React from 'react';\nimport { getColumnBreakClasses } from '../ColumnBreakPlugin/utils/getColumnBreakClasses';\nimport { MarkupElement } from '../MarkupElement';\nimport { TextStyles } from '../TextStylePlugin';\nimport { justifyClassNames } from '../TextStylePlugin/TextStyles/alignment';\nimport { MARK_TEXT_STYLE } from './ListPlugin';\n\nexport const getTextStyle = (styledNode: TNode) => {\n const textStyles =\n Object.values(TextStyles).find((textStyle) => styledNode?.[MARK_TEXT_STYLE] === textStyle) ??\n TextStyles.ELEMENT_PARAGRAPH;\n\n return TextStylesToDesignTokenMap[textStyles];\n};\n\nexport const getUnderlineClassNames = (designTokens: DesignTokens, element: TElement) =>\n designTokens[getTextStyle(element.children[0])]?.textDecoration === 'underline' ? 'tw-underline' : '';\n\nexport const getLicElementClassNames = (element: TElement) =>\n merge([\n getColumnBreakClasses(element),\n element.align ? justifyClassNames[element.align as string] : 'tw-justify-start',\n 'tw-grid tw-grid-cols-[min-content_repeat(3,_auto)]',\n ]);\n\nexport const ListItemContentMarkupElementNode = ({ attributes, children, element }: PlateRenderElementProps) => {\n const { designTokens } = useRichTextEditorContext();\n
|
|
1
|
+
{"version":3,"file":"ListItemContentMarkupElement.es.js","sources":["../../../../../src/components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\nimport { DesignTokens, TextStylesToDesignTokenMap } from '@components/RichTextEditor/types';\nimport { ELEMENT_LIC, PlateRenderElementProps, TElement, TNode } from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport React from 'react';\nimport { getColumnBreakClasses } from '../ColumnBreakPlugin/utils/getColumnBreakClasses';\nimport { MarkupElement } from '../MarkupElement';\nimport { TextStyles } from '../TextStylePlugin';\nimport { justifyClassNames } from '../TextStylePlugin/TextStyles/alignment';\nimport { MARK_TEXT_STYLE } from './ListPlugin';\n\nexport const getTextStyle = (styledNode: TNode) => {\n const textStyles =\n Object.values(TextStyles).find((textStyle) => styledNode?.[MARK_TEXT_STYLE] === textStyle) ??\n TextStyles.ELEMENT_PARAGRAPH;\n\n return TextStylesToDesignTokenMap[textStyles];\n};\n\nexport const getUnderlineClassNames = (designTokens: DesignTokens, element: TElement) =>\n designTokens[getTextStyle(element.children[0])]?.textDecoration === 'underline' ? 'tw-underline' : '';\n\nexport const getLicElementClassNames = (element: TElement) =>\n merge([\n getColumnBreakClasses(element),\n element.align ? justifyClassNames[element.align as string] : 'tw-justify-start',\n 'tw-grid tw-grid-cols-[min-content_repeat(3,_auto)]',\n ]);\n\nexport const ListItemContentMarkupElementNode = ({ attributes, children, element }: PlateRenderElementProps) => {\n const { designTokens } = useRichTextEditorContext();\n\n return (\n <p className={getLicElementClassNames(element)} {...attributes}>\n <span className={merge(['tw-w-auto tw-min-w-[10px]', getUnderlineClassNames(designTokens, element)])}>\n {children}\n </span>\n </p>\n );\n};\n\nexport class ListItemContentMarkupElement extends MarkupElement {\n constructor(id = ELEMENT_LIC, node = ListItemContentMarkupElementNode) {\n super(id, node);\n }\n}\n"],"names":["getTextStyle","styledNode","textStyles","TextStyles","textStyle","MARK_TEXT_STYLE","TextStylesToDesignTokenMap","getUnderlineClassNames","designTokens","element","_a","getLicElementClassNames","merge","getColumnBreakClasses","justifyClassNames","ListItemContentMarkupElementNode","attributes","children","useRichTextEditorContext","React","ListItemContentMarkupElement","MarkupElement","id","ELEMENT_LIC","node"],"mappings":";;;;;;;;;;AAaa,MAAAA,IAAe,CAACC,MAAsB;AAC/C,QAAMC,IACF,OAAO,OAAOC,CAAU,EAAE,KAAK,CAACC,OAAcH,KAAA,gBAAAA,EAAaI,QAAqBD,CAAS,KACzFD,EAAW;AAEf,SAAOG,EAA2BJ,CAAU;AAChD,GAEaK,IAAyB,CAACC,GAA4BC,MAAA;;AAC/D,WAAAC,IAAAF,EAAaR,EAAaS,EAAQ,SAAS,CAAC,CAAC,CAAC,MAA9C,gBAAAC,EAAiD,oBAAmB,cAAc,iBAAiB;AAAA,GAE1FC,IAA0B,CAACF,MACpCG,EAAM;AAAA,EACFC,EAAsBJ,CAAO;AAAA,EAC7BA,EAAQ,QAAQK,EAAkBL,EAAQ,KAAe,IAAI;AAAA,EAC7D;AACJ,CAAC,GAEQM,IAAmC,CAAC,EAAE,YAAAC,GAAY,UAAAC,GAAU,SAAAR,QAAuC;AACtG,QAAA,EAAE,cAAAD,MAAiBU;AAGrB,SAAA,gBAAAC,EAAA,cAAC,OAAE,WAAWR,EAAwBF,CAAO,GAAI,GAAGO,KAC/C,gBAAAG,EAAA,cAAA,QAAA,EAAK,WAAWP,EAAM,CAAC,6BAA6BL,EAAuBC,GAAcC,CAAO,CAAC,CAAC,KAC9FQ,CACL,CACJ;AAER;AAEO,MAAMG,UAAqCC,EAAc;AAAA,EAC5D,YAAYC,IAAKC,GAAaC,IAAOT,GAAkC;AACnE,UAAMO,GAAIE,CAAI;AAAA,EAClB;AACJ;"}
|