@frontify/guideline-blocks-settings 0.28.6 → 0.29.1
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/CHANGELOG.md +26 -0
- package/dist/components/BlockItemWrapper/BlockItemWrapper.es.js.map +1 -1
- package/dist/components/RichTextEditor/SerializedText.es.js +2 -2
- package/dist/components/RichTextEditor/SerializedText.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEdit.es.js +5 -5
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/utils/triggerFloatingButton.es.js +6 -6
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/custom1Plugin.es.js +15 -14
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/custom1Plugin.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/custom2Plugin.es.js +15 -14
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/custom2Plugin.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/custom3Plugin.es.js +15 -14
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/custom3Plugin.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/heading1Plugin.es.js +10 -9
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/heading1Plugin.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/heading2Plugin.es.js +15 -7
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/heading2Plugin.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/heading3Plugin.es.js +15 -7
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/heading3Plugin.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/heading4Plugin.es.js +15 -7
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/heading4Plugin.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/imageCaptionPlugin.es.js +15 -14
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/imageCaptionPlugin.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/imageTitlePlugin.es.js +18 -17
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/imageTitlePlugin.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/quotePlugin.es.js +13 -12
- package/dist/components/RichTextEditor/plugins/TextStylePlugins/quotePlugin.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/styles.es.js +0 -1
- package/dist/components/RichTextEditor/plugins/styles.es.js.map +1 -1
- package/dist/index.cjs.js +3 -20
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.umd.js +3 -20
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/utilities/color/getReadableColor.es.js +8 -8
- package/dist/utilities/color/getReadableColor.es.js.map +1 -1
- package/dist/utilities/color/isDark.es.js +2 -2
- package/dist/utilities/color/isDark.es.js.map +1 -1
- package/dist/utilities/color/setAlpha.es.js +2 -2
- package/dist/utilities/color/setAlpha.es.js.map +1 -1
- package/dist/utilities/color/toColorObject.es.js +5 -5
- package/dist/utilities/color/toColorObject.es.js.map +1 -1
- package/dist/utilities/color/toHex8String.es.js +3 -3
- package/dist/utilities/color/toHex8String.es.js.map +1 -1
- package/dist/utilities/color/toHexString.es.js +3 -3
- package/dist/utilities/color/toHexString.es.js.map +1 -1
- package/dist/utilities/color/toRgbaString.es.js +3 -3
- package/dist/utilities/color/toRgbaString.es.js.map +1 -1
- package/package.json +24 -26
- package/src/components/Attachments/Attachments.spec.ct.tsx +1 -1
- package/src/components/BlockItemWrapper/BlockItemWrapper.tsx +2 -2
- package/src/components/BlockItemWrapper/types.ts +2 -0
- package/src/components/Link/LinkSelector/LinkSelector.spec.ct.tsx +1 -1
- package/src/components/RichTextEditor/RichTextEditor.spec.ct.tsx +1 -1
- package/src/components/RichTextEditor/SerializedText.tsx +2 -2
- package/src/components/RichTextEditor/plugins/TextStylePlugins/custom1Plugin.tsx +3 -2
- package/src/components/RichTextEditor/plugins/TextStylePlugins/custom2Plugin.tsx +3 -2
- package/src/components/RichTextEditor/plugins/TextStylePlugins/custom3Plugin.tsx +3 -2
- package/src/components/RichTextEditor/plugins/TextStylePlugins/heading1Plugin.tsx +3 -2
- package/src/components/RichTextEditor/plugins/TextStylePlugins/heading2Plugin.tsx +6 -2
- package/src/components/RichTextEditor/plugins/TextStylePlugins/heading3Plugin.tsx +6 -2
- package/src/components/RichTextEditor/plugins/TextStylePlugins/heading4Plugin.tsx +6 -2
- package/src/components/RichTextEditor/plugins/TextStylePlugins/imageCaptionPlugin.tsx +3 -2
- package/src/components/RichTextEditor/plugins/TextStylePlugins/imageTitlePlugin.tsx +3 -2
- package/src/components/RichTextEditor/plugins/TextStylePlugins/quotePlugin.tsx +3 -2
- package/src/components/RichTextEditor/plugins/styles.ts +1 -2
- package/src/utilities/color/getReadableColor.ts +3 -3
- package/src/utilities/color/isDark.ts +2 -2
- package/src/utilities/color/setAlpha.ts +2 -2
- package/src/utilities/color/toColorObject.ts +2 -2
- package/src/utilities/color/toHex8String.ts +2 -2
- package/src/utilities/color/toHexString.ts +2 -2
- package/src/utilities/color/toRgbaString.ts +2 -2
- package/tsconfig.json +1 -1
- package/dist/components/RichTextEditor/serializer/nodes/button.es.js +0 -17
- package/dist/components/RichTextEditor/serializer/nodes/button.es.js.map +0 -1
- package/dist/components/RichTextEditor/serializer/nodes/checkItemNode.es.js +0 -19
- package/dist/components/RichTextEditor/serializer/nodes/checkItemNode.es.js.map +0 -1
- package/dist/components/RichTextEditor/serializer/nodes/default.es.js +0 -32
- package/dist/components/RichTextEditor/serializer/nodes/default.es.js.map +0 -1
- package/dist/components/RichTextEditor/serializer/nodes/link.es.js +0 -15
- package/dist/components/RichTextEditor/serializer/nodes/link.es.js.map +0 -1
- package/dist/components/RichTextEditor/serializer/nodes/mentionHtmlNode.es.js +0 -12
- package/dist/components/RichTextEditor/serializer/nodes/mentionHtmlNode.es.js.map +0 -1
- package/dist/components/RichTextEditor/serializer/serializeNodesToHtmlRecursive.es.js +0 -61
- package/dist/components/RichTextEditor/serializer/serializeNodesToHtmlRecursive.es.js.map +0 -1
- package/dist/components/RichTextEditor/serializer/serializeToHtml.es.js +0 -25
- package/dist/components/RichTextEditor/serializer/serializeToHtml.es.js.map +0 -1
- package/dist/components/RichTextEditor/serializer/utlis/reactCssPropsToCss.es.js +0 -8
- package/dist/components/RichTextEditor/serializer/utlis/reactCssPropsToCss.es.js.map +0 -1
- package/dist/components/RichTextEditor/serializer/utlis/serializeLeafToHtml.es.js +0 -13
- package/dist/components/RichTextEditor/serializer/utlis/serializeLeafToHtml.es.js.map +0 -1
- package/src/components/RichTextEditor/serializer/index.ts +0 -3
- package/src/components/RichTextEditor/serializer/nodes/button.ts +0 -27
- package/src/components/RichTextEditor/serializer/nodes/checkItemNode.ts +0 -30
- package/src/components/RichTextEditor/serializer/nodes/default.ts +0 -68
- package/src/components/RichTextEditor/serializer/nodes/link.ts +0 -26
- package/src/components/RichTextEditor/serializer/nodes/mentionHtmlNode.ts +0 -17
- package/src/components/RichTextEditor/serializer/serializeNodesToHtmlRecursive.ts +0 -134
- package/src/components/RichTextEditor/serializer/serializeToHtml.ts +0 -49
- package/src/components/RichTextEditor/serializer/utlis/reactCssPropsToCss.ts +0 -21
- package/src/components/RichTextEditor/serializer/utlis/serializeLeafToHtml.ts +0 -32
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
2
|
|
|
3
3
|
import { Color } from '@frontify/fondue';
|
|
4
|
-
import
|
|
4
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Maps color strings to color objects.
|
|
@@ -11,6 +11,6 @@ import tinycolor from '@ctrl/tinycolor';
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
export const toColorObject = (colorString: string): Color => {
|
|
14
|
-
const { r, g, b, a } =
|
|
14
|
+
const { r, g, b, a } = new TinyColor(colorString);
|
|
15
15
|
return { red: r, green: g, blue: b, alpha: a };
|
|
16
16
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
2
|
|
|
3
3
|
import { Color } from '@frontify/fondue';
|
|
4
|
-
import
|
|
4
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
|
5
5
|
import { toShortRgba } from './toShortRgba';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -11,4 +11,4 @@ import { toShortRgba } from './toShortRgba';
|
|
|
11
11
|
* @returns {String} To be used as css value.
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
|
-
export const toHex8String = (color: Color): string =>
|
|
14
|
+
export const toHex8String = (color: Color): string => new TinyColor(toShortRgba(color)).toHex8String();
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
2
|
|
|
3
3
|
import { Color } from '@frontify/fondue';
|
|
4
|
-
import
|
|
4
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
|
5
5
|
import { toShortRgba } from './toShortRgba';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Maps color object of rgba values to hex alpha string.
|
|
9
9
|
*/
|
|
10
|
-
export const toHexString = (color: Color): string =>
|
|
10
|
+
export const toHexString = (color: Color): string => new TinyColor(toShortRgba(color)).toHexString();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
2
|
|
|
3
3
|
import { Color } from '@frontify/fondue';
|
|
4
|
-
import
|
|
4
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
|
5
5
|
import { toShortRgba } from './toShortRgba';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -11,4 +11,4 @@ import { toShortRgba } from './toShortRgba';
|
|
|
11
11
|
* @returns {String} To be used as css value.
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
|
-
export const toRgbaString = (color: Color): string =>
|
|
14
|
+
export const toRgbaString = (color: Color): string => new TinyColor(toShortRgba(color)).toRgbString();
|
package/tsconfig.json
CHANGED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { reactCssPropsToCss as s } from "../utlis/reactCssPropsToCss.es.js";
|
|
2
|
-
import { BUTTON_PLUGIN as i } from "../../plugins/ButtonPlugin/createButtonPlugin.es.js";
|
|
3
|
-
const b = (e, n, a, u) => {
|
|
4
|
-
const l = u[i], o = e.buttonStyle ?? "primary", c = `button${o.charAt(0).toUpperCase()}${o.slice(1)}`, t = l[c], r = s(t);
|
|
5
|
-
return `<a href="${e.url}"
|
|
6
|
-
target="${e.target ?? "_blank"}"
|
|
7
|
-
dir="auto"
|
|
8
|
-
style="${r}"
|
|
9
|
-
class="${a}"
|
|
10
|
-
onmouseenter="this.setAttribute('style', '${r} ${s(t == null ? void 0 : t.hover)}');"
|
|
11
|
-
onmouseleave="this.setAttribute('style', '${s(t)}');"
|
|
12
|
-
>${n}</a>`;
|
|
13
|
-
};
|
|
14
|
-
export {
|
|
15
|
-
b as buttonNode
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=button.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/nodes/button.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { CSSProperties } from 'react';\nimport { TElement } from '@udecode/plate';\n\nimport { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';\nimport { BUTTON_PLUGIN } from '../../plugins';\n\nexport type ButtonStylesType = Record<string, Record<string, CSSProperties & { hover?: CSSProperties }>>;\n\nexport const buttonNode = (node: TElement, children: string, defaultClassNames: string, styles: ButtonStylesType) => {\n const buttonStyles = styles[BUTTON_PLUGIN];\n const buttonTypeString = (node.buttonStyle as string) ?? 'primary';\n const buttonType = `button${buttonTypeString.charAt(0).toUpperCase()}${buttonTypeString.slice(1)}`;\n const buttonStyle = buttonStyles[buttonType];\n\n const defaultStyles = reactCssPropsToCss(buttonStyle);\n\n return `<a href=\"${node.url}\"\n target=\"${node.target ?? '_blank'}\"\n dir=\"auto\"\n style=\"${defaultStyles}\"\n class=\"${defaultClassNames}\"\n onmouseenter=\"this.setAttribute('style', '${defaultStyles} ${reactCssPropsToCss(buttonStyle?.hover)}');\"\n onmouseleave=\"this.setAttribute('style', '${reactCssPropsToCss(buttonStyle)}');\"\n >${children}</a>`;\n};\n"],"names":["buttonNode","node","children","defaultClassNames","styles","buttonStyles","BUTTON_PLUGIN","buttonTypeString","buttonType","buttonStyle","defaultStyles","reactCssPropsToCss"],"mappings":";;AAUO,MAAMA,IAAa,CAACC,GAAgBC,GAAkBC,GAA2BC,MAA6B;AAC3G,QAAAC,IAAeD,EAAOE,CAAa,GACnCC,IAAoBN,EAAK,eAA0B,WACnDO,IAAa,SAASD,EAAiB,OAAO,CAAC,EAAE,YAAY,CAAC,GAAGA,EAAiB,MAAM,CAAC,CAAC,IAC1FE,IAAcJ,EAAaG,CAAU,GAErCE,IAAgBC,EAAmBF,CAAW;AAE7C,SAAA,YAAYR,EAAK,GAAG;AAAA,0BACLA,EAAK,UAAU,QAAQ;AAAA;AAAA,yBAExBS,CAAa;AAAA,yBACbP,CAAiB;AAAA,4DACkBO,CAAa,IAAIC,EAAmBF,KAAA,gBAAAA,EAAa,KAAK,CAAC;AAAA,4DACvDE,EAAmBF,CAAW,CAAC;AAAA,mBACxEP,CAAQ;AAC3B;"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { merge as r } from "@frontify/fondue";
|
|
2
|
-
import { reactCssPropsToCss as i } from "../utlis/reactCssPropsToCss.es.js";
|
|
3
|
-
const w = (t, e, s, c) => `<div dir="auto" disabled class="tw-flex tw-flex-row tw-pb-2 first-of-type:tw-ml-0 ${s}" style="margin-left:${(t.indent ?? 0) * 24}px;">
|
|
4
|
-
<div dir="auto" class="tw-flex tw-items-center tw-justify-center tw-select-none tw-mr-1.5">
|
|
5
|
-
<input
|
|
6
|
-
class="tw-w-4 tw-h-4 tw-m-0"
|
|
7
|
-
type="checkbox"
|
|
8
|
-
${t.checked ? "checked" : ""}
|
|
9
|
-
onclick="return false;" />
|
|
10
|
-
</div>
|
|
11
|
-
<span dir="auto" class="${r([
|
|
12
|
-
"tw-flex-1 tw-focus:outline-none",
|
|
13
|
-
t.checked ? "!tw-line-through" : ""
|
|
14
|
-
])}" style="${i(c[t.children[0].textStyle])}">${e}</span>
|
|
15
|
-
</div>`;
|
|
16
|
-
export {
|
|
17
|
-
w as checkItemNode
|
|
18
|
-
};
|
|
19
|
-
//# sourceMappingURL=checkItemNode.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"checkItemNode.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/nodes/checkItemNode.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { CSSProperties } from 'react';\nimport { merge } from '@frontify/fondue';\nimport { TElement } from '@udecode/plate';\n\nimport { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';\n\nexport const checkItemNode = (\n node: TElement,\n children: string,\n defaultClassNames: string,\n styles: Record<string, CSSProperties & { hover?: CSSProperties }>,\n) => {\n return `<div dir=\"auto\" disabled class=\"tw-flex tw-flex-row tw-pb-2 first-of-type:tw-ml-0 ${defaultClassNames}\" style=\"margin-left:${\n ((node.indent as number) ?? 0) * 24\n }px;\">\n <div dir=\"auto\" class=\"tw-flex tw-items-center tw-justify-center tw-select-none tw-mr-1.5\">\n <input\n class=\"tw-w-4 tw-h-4 tw-m-0\"\n type=\"checkbox\"\n ${node.checked ? 'checked' : ''}\n onclick=\"return false;\" />\n </div>\n <span dir=\"auto\" class=\"${merge([\n 'tw-flex-1 tw-focus:outline-none',\n node.checked ? '!tw-line-through' : '',\n ])}\" style=\"${reactCssPropsToCss(styles[node.children[0].textStyle as string])}\">${children}</span>\n</div>`;\n};\n"],"names":["checkItemNode","node","children","defaultClassNames","styles","merge","reactCssPropsToCss"],"mappings":";;AAQO,MAAMA,IAAgB,CACzBC,GACAC,GACAC,GACAC,MAEO,qFAAqFD,CAAiB,yBACvGF,EAAK,UAAqB,KAAK,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,cAKUA,EAAK,UAAU,YAAY,EAAE;AAAA;AAAA;AAAA,8BAGbI,EAAM;AAAA,EAC5B;AAAA,EACAJ,EAAK,UAAU,qBAAqB;AACvC,CAAA,CAAC,YAAYK,EAAmBF,EAAOH,EAAK,SAAS,CAAC,EAAE,SAAmB,CAAC,CAAC,KAAKC,CAAQ;AAAA;"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { merge as u } from "@frontify/fondue";
|
|
2
|
-
import { reactCssPropsToCss as y } from "../utlis/reactCssPropsToCss.es.js";
|
|
3
|
-
import { TextStyles as $ } from "../../plugins/styles.es.js";
|
|
4
|
-
const e = (r, t, a, p) => {
|
|
5
|
-
const i = y(a);
|
|
6
|
-
return r.type === $.heading1 ? `<h1 dir="auto" class="${u([p, "a-h1"])}">${o(
|
|
7
|
-
t,
|
|
8
|
-
i
|
|
9
|
-
)}</h1>` : r.type === $.heading2 ? `<h2 dir="auto" class="${p}">${o(t, i)}</h2>` : r.type === $.heading3 ? `<h3 dir="auto" class="${p}">${o(t, i)}</h3>` : r.type === $.heading4 ? `<h4 dir="auto" class="${p}">${o(t, i)}</h4>` : r.type === $.custom1 ? `<p dir="auto" class="${u([p, "a-custom1"])}">${o(
|
|
10
|
-
t,
|
|
11
|
-
i
|
|
12
|
-
)}</p>` : r.type === $.custom2 ? `<p dir="auto" class="${u([p, "a-custom2"])}">${o(
|
|
13
|
-
t,
|
|
14
|
-
i
|
|
15
|
-
)}</p>` : r.type === $.custom3 ? `<p dir="auto" class="${u([p, "a-custom3"])}">${o(
|
|
16
|
-
t,
|
|
17
|
-
i
|
|
18
|
-
)}</p>` : r.type === $.quote ? `<p dir="auto" class="${u([p, "a-quote"])}">${o(
|
|
19
|
-
t,
|
|
20
|
-
i
|
|
21
|
-
)}</p>` : r.type === $.imageTitle ? `<p dir="auto" class="${u([p, "a-image-title"])}">${o(
|
|
22
|
-
t,
|
|
23
|
-
i
|
|
24
|
-
)}</p>` : r.type === $.imageCaption ? `<p dir="auto" class="${u([p, "a-image-caption"])}">${o(
|
|
25
|
-
t,
|
|
26
|
-
i
|
|
27
|
-
)}</p>` : `<p dir="auto" class="${p}">${o(t, i)}</p>`;
|
|
28
|
-
}, o = (r, t) => `<span dir="auto" style="${t}">${r}</span>`;
|
|
29
|
-
export {
|
|
30
|
-
e as defaultNode
|
|
31
|
-
};
|
|
32
|
-
//# sourceMappingURL=default.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"default.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/nodes/default.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { CSSProperties } from 'react';\nimport { merge } from '@frontify/fondue';\nimport { TElement } from '@udecode/plate';\n\nimport { TextStyles } from '../../plugins';\nimport { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';\n\nexport const defaultNode = (node: TElement, children: string, styles: CSSProperties, defaultClassNames: string) => {\n const defaultStyles = reactCssPropsToCss(styles);\n\n if (node.type === TextStyles.heading1) {\n return `<h1 dir=\"auto\" class=\"${merge([defaultClassNames, 'a-h1'])}\">${getStyledChild(\n children,\n defaultStyles,\n )}</h1>`;\n }\n if (node.type === TextStyles.heading2) {\n return `<h2 dir=\"auto\" class=\"${defaultClassNames}\">${getStyledChild(children, defaultStyles)}</h2>`;\n }\n if (node.type === TextStyles.heading3) {\n return `<h3 dir=\"auto\" class=\"${defaultClassNames}\">${getStyledChild(children, defaultStyles)}</h3>`;\n }\n if (node.type === TextStyles.heading4) {\n return `<h4 dir=\"auto\" class=\"${defaultClassNames}\">${getStyledChild(children, defaultStyles)}</h4>`;\n }\n if (node.type === TextStyles.custom1) {\n return `<p dir=\"auto\" class=\"${merge([defaultClassNames, 'a-custom1'])}\">${getStyledChild(\n children,\n defaultStyles,\n )}</p>`;\n }\n if (node.type === TextStyles.custom2) {\n return `<p dir=\"auto\" class=\"${merge([defaultClassNames, 'a-custom2'])}\">${getStyledChild(\n children,\n defaultStyles,\n )}</p>`;\n }\n if (node.type === TextStyles.custom3) {\n return `<p dir=\"auto\" class=\"${merge([defaultClassNames, 'a-custom3'])}\">${getStyledChild(\n children,\n defaultStyles,\n )}</p>`;\n }\n if (node.type === TextStyles.quote) {\n return `<p dir=\"auto\" class=\"${merge([defaultClassNames, 'a-quote'])}\">${getStyledChild(\n children,\n defaultStyles,\n )}</p>`;\n }\n if (node.type === TextStyles.imageTitle) {\n return `<p dir=\"auto\" class=\"${merge([defaultClassNames, 'a-image-title'])}\">${getStyledChild(\n children,\n defaultStyles,\n )}</p>`;\n }\n if (node.type === TextStyles.imageCaption) {\n return `<p dir=\"auto\" class=\"${merge([defaultClassNames, 'a-image-caption'])}\">${getStyledChild(\n children,\n defaultStyles,\n )}</p>`;\n }\n\n return `<p dir=\"auto\" class=\"${defaultClassNames}\">${getStyledChild(children, defaultStyles)}</p>`;\n};\n\nconst getStyledChild = (children: string, styles: string) => `<span dir=\"auto\" style=\"${styles}\">${children}</span>`;\n"],"names":["defaultNode","node","children","styles","defaultClassNames","defaultStyles","reactCssPropsToCss","TextStyles","merge","getStyledChild"],"mappings":";;;AASO,MAAMA,IAAc,CAACC,GAAgBC,GAAkBC,GAAuBC,MAA8B;AACzG,QAAAC,IAAgBC,EAAmBH,CAAM;AAE3C,SAAAF,EAAK,SAASM,EAAW,WAClB,yBAAyBC,EAAM,CAACJ,GAAmB,MAAM,CAAC,CAAC,KAAKK;AAAA,IACnEP;AAAA,IACAG;AAAA,EACH,CAAA,UAEDJ,EAAK,SAASM,EAAW,WAClB,yBAAyBH,CAAiB,KAAKK,EAAeP,GAAUG,CAAa,CAAC,UAE7FJ,EAAK,SAASM,EAAW,WAClB,yBAAyBH,CAAiB,KAAKK,EAAeP,GAAUG,CAAa,CAAC,UAE7FJ,EAAK,SAASM,EAAW,WAClB,yBAAyBH,CAAiB,KAAKK,EAAeP,GAAUG,CAAa,CAAC,UAE7FJ,EAAK,SAASM,EAAW,UAClB,wBAAwBC,EAAM,CAACJ,GAAmB,WAAW,CAAC,CAAC,KAAKK;AAAA,IACvEP;AAAA,IACAG;AAAA,EACH,CAAA,SAEDJ,EAAK,SAASM,EAAW,UAClB,wBAAwBC,EAAM,CAACJ,GAAmB,WAAW,CAAC,CAAC,KAAKK;AAAA,IACvEP;AAAA,IACAG;AAAA,EACH,CAAA,SAEDJ,EAAK,SAASM,EAAW,UAClB,wBAAwBC,EAAM,CAACJ,GAAmB,WAAW,CAAC,CAAC,KAAKK;AAAA,IACvEP;AAAA,IACAG;AAAA,EACH,CAAA,SAEDJ,EAAK,SAASM,EAAW,QAClB,wBAAwBC,EAAM,CAACJ,GAAmB,SAAS,CAAC,CAAC,KAAKK;AAAA,IACrEP;AAAA,IACAG;AAAA,EACH,CAAA,SAEDJ,EAAK,SAASM,EAAW,aAClB,wBAAwBC,EAAM,CAACJ,GAAmB,eAAe,CAAC,CAAC,KAAKK;AAAA,IAC3EP;AAAA,IACAG;AAAA,EACH,CAAA,SAEDJ,EAAK,SAASM,EAAW,eAClB,wBAAwBC,EAAM,CAACJ,GAAmB,iBAAiB,CAAC,CAAC,KAAKK;AAAA,IAC7EP;AAAA,IACAG;AAAA,EACH,CAAA,SAGE,wBAAwBD,CAAiB,KAAKK,EAAeP,GAAUG,CAAa,CAAC;AAChG,GAEMI,IAAiB,CAACP,GAAkBC,MAAmB,2BAA2BA,CAAM,KAAKD,CAAQ;"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import p from "escape-html";
|
|
2
|
-
import { LINK_PLUGIN as e } from "../../plugins/LinkPlugin/id.es.js";
|
|
3
|
-
import { reactCssPropsToCss as f } from "../utlis/reactCssPropsToCss.es.js";
|
|
4
|
-
const u = (r, a, s, $) => {
|
|
5
|
-
var l;
|
|
6
|
-
if (r.chosenLink) {
|
|
7
|
-
const { chosenLink: t } = r;
|
|
8
|
-
return `<a dir="auto" class="${s}" style="${f($[e])}" target=${t != null && t.openInNewTab ? "_blank" : "_self"} href="${p((l = t == null ? void 0 : t.searchResult) == null ? void 0 : l.link)}">${a}</a>`;
|
|
9
|
-
}
|
|
10
|
-
return `<a dir="auto" class="${s}" style="${f($[e])}" target="${(r == null ? void 0 : r.target) ?? "_blank"}" href="${p(r.url)}">${a}</a>`;
|
|
11
|
-
};
|
|
12
|
-
export {
|
|
13
|
-
u as linkNode
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=link.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"link.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/nodes/link.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { CSSProperties } from 'react';\nimport escapeHtml from 'escape-html';\nimport { TElement } from '@udecode/plate';\n\nimport { LINK_PLUGIN } from '../../plugins/LinkPlugin/id';\nimport { TLinkElement } from '../../plugins/LinkPlugin/types';\nimport { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';\n\nexport const linkNode = (\n node: TElement,\n children: string,\n defaultClassNames: string,\n styles: Record<string, CSSProperties & { hover?: CSSProperties }>,\n) => {\n if (node.chosenLink) {\n const { chosenLink } = node as TLinkElement;\n return `<a dir=\"auto\" class=\"${defaultClassNames}\" style=\"${reactCssPropsToCss(styles[LINK_PLUGIN])}\" target=${\n chosenLink?.openInNewTab ? '_blank' : '_self'\n } href=\"${escapeHtml(chosenLink?.searchResult?.link)}\">${children}</a>`;\n }\n return `<a dir=\"auto\" class=\"${defaultClassNames}\" style=\"${reactCssPropsToCss(styles[LINK_PLUGIN])}\" target=\"${\n node?.target ?? '_blank'\n }\" href=\"${escapeHtml(node.url as string)}\">${children}</a>`;\n};\n"],"names":["linkNode","node","children","defaultClassNames","styles","chosenLink","reactCssPropsToCss","LINK_PLUGIN","escapeHtml","_a"],"mappings":";;;AAUO,MAAMA,IAAW,CACpBC,GACAC,GACAC,GACAC,MACC;;AACD,MAAIH,EAAK,YAAY;AACX,UAAA,EAAE,YAAAI,EAAe,IAAAJ;AAChB,WAAA,wBAAwBE,CAAiB,YAAYG,EAAmBF,EAAOG,CAAW,CAAC,CAAC,YAC/FF,KAAA,QAAAA,EAAY,eAAe,WAAW,OAC1C,UAAUG,GAAWC,IAAAJ,KAAA,gBAAAA,EAAY,iBAAZ,gBAAAI,EAA0B,IAAI,CAAC,KAAKP,CAAQ;AAAA,EACrE;AACA,SAAO,wBAAwBC,CAAiB,YAAYG,EAAmBF,EAAOG,CAAW,CAAC,CAAC,cAC/FN,KAAA,gBAAAA,EAAM,WAAU,QACpB,WAAWO,EAAWP,EAAK,GAAa,CAAC,KAAKC,CAAQ;AAC1D;"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import n from "react-dom";
|
|
2
|
-
import { MentionMarkupElementNode as o } from "@frontify/fondue";
|
|
3
|
-
const d = (r, { mentionable: e } = {}) => {
|
|
4
|
-
if (!e)
|
|
5
|
-
return "";
|
|
6
|
-
const t = document.createElement("div");
|
|
7
|
-
return n.render(o(e)({ element: r }), t), t.innerHTML;
|
|
8
|
-
};
|
|
9
|
-
export {
|
|
10
|
-
d as mentionHtmlNode
|
|
11
|
-
};
|
|
12
|
-
//# sourceMappingURL=mentionHtmlNode.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"mentionHtmlNode.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/nodes/mentionHtmlNode.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport ReactDOM from 'react-dom';\nimport { TElement, TMentionElement } from '@udecode/plate';\nimport { MappedMentionableItems, MentionMarkupElementNode } from '@frontify/fondue';\n\ntype MentionHtmlNodeProps = { mentionable?: MappedMentionableItems };\n\nexport const mentionHtmlNode = (node: TElement, { mentionable }: MentionHtmlNodeProps = {}) => {\n if (!mentionable) {\n return '';\n }\n\n const div = document.createElement('div');\n ReactDOM.render(MentionMarkupElementNode(mentionable)({ element: node as TMentionElement }), div);\n return div.innerHTML;\n};\n"],"names":["mentionHtmlNode","node","mentionable","div","ReactDOM","MentionMarkupElementNode"],"mappings":";;AAQO,MAAMA,IAAkB,CAACC,GAAgB,EAAE,aAAAC,EAAY,IAA0B,CAAA,MAAO;AAC3F,MAAI,CAACA;AACM,WAAA;AAGL,QAAAC,IAAM,SAAS,cAAc,KAAK;AAC/B,SAAAC,EAAA,OAAOC,EAAyBH,CAAW,EAAE,EAAE,SAASD,EAAA,CAAyB,GAAGE,CAAG,GACzFA,EAAI;AACf;"}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { UL_CLASSES as u, getOrderedListClasses as N, LI_CLASSNAMES as p, getLiStyles as f, getLicElementClassNames as L, ELEMENT_CHECK_ITEM as T, alignmentClassnames as C, merge as $, OL_STYLES as M } from "@frontify/fondue";
|
|
2
|
-
import { isText as _, ELEMENT_UL as d, ELEMENT_OL as n, ELEMENT_LI as g, ELEMENT_LIC as k, ELEMENT_LINK as y, ELEMENT_MENTION as S } from "@udecode/plate";
|
|
3
|
-
import { serializeLeafToHtml as h } from "./utlis/serializeLeafToHtml.es.js";
|
|
4
|
-
import { reactCssPropsToCss as E } from "./utlis/reactCssPropsToCss.es.js";
|
|
5
|
-
import { buttonNode as b } from "./nodes/button.es.js";
|
|
6
|
-
import { linkNode as I } from "./nodes/link.es.js";
|
|
7
|
-
import { defaultNode as O } from "./nodes/default.es.js";
|
|
8
|
-
import { checkItemNode as A } from "./nodes/checkItemNode.es.js";
|
|
9
|
-
import { mentionHtmlNode as H } from "./nodes/mentionHtmlNode.es.js";
|
|
10
|
-
import { ELEMENT_BUTTON as v } from "../plugins/ButtonPlugin/createButtonPlugin.es.js";
|
|
11
|
-
const i = (t, e) => t.reduce((r, s) => (s.type === e && r++, s.children ? r + i(s.children, e) : r), 0), w = (t, e, { mappedMentionable: r, nestingCount: s = {} }) => {
|
|
12
|
-
if (_(t))
|
|
13
|
-
return h(t);
|
|
14
|
-
const o = s[t.type] || i([t], t.type);
|
|
15
|
-
let l = "";
|
|
16
|
-
for (const m of t.children)
|
|
17
|
-
l += w(m, e, {
|
|
18
|
-
nestingCount: {
|
|
19
|
-
...s,
|
|
20
|
-
[m.type]: o
|
|
21
|
-
},
|
|
22
|
-
mappedMentionable: r
|
|
23
|
-
});
|
|
24
|
-
const a = x[t.type];
|
|
25
|
-
return typeof a < "u" ? a({
|
|
26
|
-
classNames: c(t.breakAfterColumn, t.align),
|
|
27
|
-
children: l,
|
|
28
|
-
rootNestingCount: o,
|
|
29
|
-
node: t,
|
|
30
|
-
mappedMentionable: r,
|
|
31
|
-
styles: e
|
|
32
|
-
}) : O(
|
|
33
|
-
t,
|
|
34
|
-
l,
|
|
35
|
-
e[t.type],
|
|
36
|
-
c(t.breakAfterColumn, t.align)
|
|
37
|
-
);
|
|
38
|
-
}, x = {
|
|
39
|
-
[d]: (t) => `<ul dir="auto" class="${u} ${t.classNames}">${t.children}</ul>`,
|
|
40
|
-
[n]: ({ classNames: t, children: e, node: r, rootNestingCount: s }) => {
|
|
41
|
-
const o = Math.max(s - i([r], n), 0);
|
|
42
|
-
return `<ol dir="auto" class="${N(o)} ${t}" style="${E(
|
|
43
|
-
M
|
|
44
|
-
)}">${e}</ol>`;
|
|
45
|
-
},
|
|
46
|
-
[g]: ({ classNames: t, children: e, node: r, styles: s }) => `<li dir="auto" class="${t} ${p}" style="${E(
|
|
47
|
-
f(r, s)
|
|
48
|
-
)}">${e}</li>`,
|
|
49
|
-
[k]: ({ classNames: t, children: e, node: r }) => `<p dir="auto" class="${t} ${L(r)}"><span>${e}</span></p>`,
|
|
50
|
-
[y]: ({ node: t, children: e, classNames: r, styles: s }) => I(t, e, r, s),
|
|
51
|
-
[v]: ({ node: t, children: e, classNames: r, styles: s }) => b(t, e, r, s),
|
|
52
|
-
[T]: ({ node: t, children: e, classNames: r, styles: s }) => A(t, e, r, s),
|
|
53
|
-
[S]: ({ node: t, mappedMentionable: e }) => H(t, { mentionable: e })
|
|
54
|
-
}, c = (t, e) => {
|
|
55
|
-
const r = "tw-break-words", s = t === "active" ? "tw-break-after-column tw-break-inside-avoid-column" : "", o = e ? C[e] : "";
|
|
56
|
-
return $([o, r, s]);
|
|
57
|
-
};
|
|
58
|
-
export {
|
|
59
|
-
w as serializeNodeToHtmlRecursive
|
|
60
|
-
};
|
|
61
|
-
//# sourceMappingURL=serializeNodesToHtmlRecursive.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"serializeNodesToHtmlRecursive.es.js","sources":["../../../../src/components/RichTextEditor/serializer/serializeNodesToHtmlRecursive.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n ELEMENT_CHECK_ITEM,\n LI_CLASSNAMES,\n MappedMentionableItems,\n OL_STYLES,\n UL_CLASSES,\n alignmentClassnames,\n getLiStyles,\n getLicElementClassNames,\n getOrderedListClasses,\n merge,\n} from '@frontify/fondue';\nimport {\n ELEMENT_LI,\n ELEMENT_LIC,\n ELEMENT_LINK,\n ELEMENT_MENTION,\n ELEMENT_OL,\n ELEMENT_UL,\n TDescendant,\n TElement,\n isText,\n} from '@udecode/plate';\nimport { serializeLeafToHtml } from './utlis/serializeLeafToHtml';\nimport { reactCssPropsToCss } from './utlis/reactCssPropsToCss';\nimport type { CSSProperties } from 'react';\nimport { ButtonStylesType, buttonNode } from './nodes/button';\nimport { linkNode } from './nodes/link';\nimport { defaultNode } from './nodes/default';\nimport { checkItemNode } from './nodes/checkItemNode';\nimport { mentionHtmlNode } from './nodes/mentionHtmlNode';\nimport { ELEMENT_BUTTON } from '../plugins';\n\nconst countNodesOfType = (nodes: TDescendant[], type: string): number => {\n return nodes.reduce((acc, node) => {\n if (node.type === type) {\n acc++;\n }\n if (node.children) {\n return acc + countNodesOfType(node.children as TDescendant[], type);\n }\n return acc;\n }, 0);\n};\n\ntype NestingCount = {\n [type: string]: number;\n};\n\ntype SerializeNodeToHtmlRecursiveOptions = {\n mappedMentionable?: MappedMentionableItems;\n nestingCount?: NestingCount;\n};\n\nexport const serializeNodeToHtmlRecursive = (\n node: TDescendant,\n styles: Record<string, CSSProperties & { hover?: CSSProperties }> | ButtonStylesType,\n { mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions,\n): string => {\n if (isText(node)) {\n return serializeLeafToHtml(node);\n }\n\n const rootNestingCount = nestingCount[node.type] || countNodesOfType([node], node.type);\n let children = '';\n for (const element of node.children) {\n children += serializeNodeToHtmlRecursive(element, styles, {\n nestingCount: {\n ...nestingCount,\n [element.type as string]: rootNestingCount,\n },\n mappedMentionable,\n });\n }\n\n const htmlMapper = MapNodeTypesToHtml[node.type];\n if (typeof htmlMapper !== 'undefined') {\n return htmlMapper({\n classNames: getClassNames(node.breakAfterColumn as string | undefined, node.align as string | undefined),\n children,\n rootNestingCount,\n node,\n mappedMentionable,\n styles,\n });\n } else {\n return defaultNode(\n node,\n children,\n styles[node.type],\n getClassNames(node.breakAfterColumn as string | undefined, node.align as string | undefined),\n );\n }\n};\n\ntype Arguments = {\n classNames: string;\n children: string;\n rootNestingCount: number;\n node: TElement;\n mappedMentionable?: MappedMentionableItems;\n styles: Record<string, CSSProperties & { hover?: CSSProperties }> | ButtonStylesType;\n};\n\nconst MapNodeTypesToHtml: { [key: string]: ({ ...args }: Arguments) => string } = {\n [ELEMENT_UL]: (args) => `<ul dir=\"auto\" class=\"${UL_CLASSES} ${args.classNames}\">${args.children}</ul>`,\n [ELEMENT_OL]: ({ classNames, children, node, rootNestingCount }) => {\n const nestingLevel = Math.max(rootNestingCount - countNodesOfType([node], ELEMENT_OL), 0);\n return `<ol dir=\"auto\" class=\"${getOrderedListClasses(nestingLevel)} ${classNames}\" style=\"${reactCssPropsToCss(\n OL_STYLES,\n )}\">${children}</ol>`;\n },\n [ELEMENT_LI]: ({ classNames, children, node, styles }) =>\n `<li dir=\"auto\" class=\"${classNames} ${LI_CLASSNAMES}\" style=\"${reactCssPropsToCss(\n getLiStyles(node, styles),\n )}\">${children}</li>`,\n [ELEMENT_LIC]: ({ classNames, children, node }) =>\n `<p dir=\"auto\" class=\"${classNames} ${getLicElementClassNames(node)}\"><span>${children}</span></p>`,\n [ELEMENT_LINK]: ({ node, children, classNames, styles }) => linkNode(node, children, classNames, styles),\n [ELEMENT_BUTTON]: ({ node, children, classNames, styles }) =>\n buttonNode(node, children, classNames, styles as ButtonStylesType),\n [ELEMENT_CHECK_ITEM]: ({ node, children, classNames, styles }) => checkItemNode(node, children, classNames, styles),\n [ELEMENT_MENTION]: ({ node, mappedMentionable }) => mentionHtmlNode(node, { mentionable: mappedMentionable }),\n};\n\nconst getClassNames = (breakAfterColumn?: string, align?: string) => {\n const breakWordsClass = 'tw-break-words';\n const columnBreakClasses =\n breakAfterColumn === 'active' ? 'tw-break-after-column tw-break-inside-avoid-column' : '';\n const alignClass = align ? alignmentClassnames[align] : '';\n return merge([alignClass, breakWordsClass, columnBreakClasses]);\n};\n"],"names":["countNodesOfType","nodes","type","acc","node","serializeNodeToHtmlRecursive","styles","mappedMentionable","nestingCount","isText","serializeLeafToHtml","rootNestingCount","children","element","htmlMapper","MapNodeTypesToHtml","getClassNames","defaultNode","ELEMENT_UL","args","UL_CLASSES","ELEMENT_OL","classNames","nestingLevel","getOrderedListClasses","reactCssPropsToCss","OL_STYLES","ELEMENT_LI","LI_CLASSNAMES","getLiStyles","ELEMENT_LIC","getLicElementClassNames","ELEMENT_LINK","linkNode","ELEMENT_BUTTON","buttonNode","ELEMENT_CHECK_ITEM","checkItemNode","ELEMENT_MENTION","mentionHtmlNode","breakAfterColumn","align","breakWordsClass","columnBreakClasses","alignClass","alignmentClassnames","merge"],"mappings":";;;;;;;;;;AAmCA,MAAMA,IAAmB,CAACC,GAAsBC,MACrCD,EAAM,OAAO,CAACE,GAAKC,OAClBA,EAAK,SAASF,KACdC,KAEAC,EAAK,WACED,IAAMH,EAAiBI,EAAK,UAA2BF,CAAI,IAE/DC,IACR,CAAC,GAYKE,IAA+B,CACxCD,GACAE,GACA,EAAE,mBAAAC,GAAmB,cAAAC,IAAe,CAAA,QAC3B;AACL,MAAAC,EAAOL,CAAI;AACX,WAAOM,EAAoBN,CAAI;AAG7B,QAAAO,IAAmBH,EAAaJ,EAAK,IAAI,KAAKJ,EAAiB,CAACI,CAAI,GAAGA,EAAK,IAAI;AACtF,MAAIQ,IAAW;AACJ,aAAAC,KAAWT,EAAK;AACX,IAAAQ,KAAAP,EAA6BQ,GAASP,GAAQ;AAAA,MACtD,cAAc;AAAA,QACV,GAAGE;AAAA,QACH,CAACK,EAAQ,IAAc,GAAGF;AAAA,MAC9B;AAAA,MACA,mBAAAJ;AAAA,IAAA,CACH;AAGC,QAAAO,IAAaC,EAAmBX,EAAK,IAAI;AAC3C,SAAA,OAAOU,IAAe,MACfA,EAAW;AAAA,IACd,YAAYE,EAAcZ,EAAK,kBAAwCA,EAAK,KAA2B;AAAA,IACvG,UAAAQ;AAAA,IACA,kBAAAD;AAAA,IACA,MAAAP;AAAA,IACA,mBAAAG;AAAA,IACA,QAAAD;AAAA,EAAA,CACH,IAEMW;AAAA,IACHb;AAAA,IACAQ;AAAA,IACAN,EAAOF,EAAK,IAAI;AAAA,IAChBY,EAAcZ,EAAK,kBAAwCA,EAAK,KAA2B;AAAA,EAAA;AAGvG,GAWMW,IAA4E;AAAA,EAC9E,CAACG,CAAU,GAAG,CAACC,MAAS,yBAAyBC,CAAU,IAAID,EAAK,UAAU,KAAKA,EAAK,QAAQ;AAAA,EAChG,CAACE,CAAU,GAAG,CAAC,EAAE,YAAAC,GAAY,UAAAV,GAAU,MAAAR,GAAM,kBAAAO,QAAuB;AAC1D,UAAAY,IAAe,KAAK,IAAIZ,IAAmBX,EAAiB,CAACI,CAAI,GAAGiB,CAAU,GAAG,CAAC;AACxF,WAAO,yBAAyBG,EAAsBD,CAAY,CAAC,IAAID,CAAU,YAAYG;AAAA,MACzFC;AAAA,IAAA,CACH,KAAKd,CAAQ;AAAA,EAClB;AAAA,EACA,CAACe,CAAU,GAAG,CAAC,EAAE,YAAAL,GAAY,UAAAV,GAAU,MAAAR,GAAM,QAAAE,QACzC,yBAAyBgB,CAAU,IAAIM,CAAa,YAAYH;AAAA,IAC5DI,EAAYzB,GAAME,CAAM;AAAA,EAAA,CAC3B,KAAKM,CAAQ;AAAA,EAClB,CAACkB,CAAW,GAAG,CAAC,EAAE,YAAAR,GAAY,UAAAV,GAAU,MAAAR,EACpC,MAAA,wBAAwBkB,CAAU,IAAIS,EAAwB3B,CAAI,CAAC,WAAWQ,CAAQ;AAAA,EAC1F,CAACoB,CAAY,GAAG,CAAC,EAAE,MAAA5B,GAAM,UAAAQ,GAAU,YAAAU,GAAY,QAAAhB,EAAa,MAAA2B,EAAS7B,GAAMQ,GAAUU,GAAYhB,CAAM;AAAA,EACvG,CAAC4B,CAAc,GAAG,CAAC,EAAE,MAAA9B,GAAM,UAAAQ,GAAU,YAAAU,GAAY,QAAAhB,EAC7C,MAAA6B,EAAW/B,GAAMQ,GAAUU,GAAYhB,CAA0B;AAAA,EACrE,CAAC8B,CAAkB,GAAG,CAAC,EAAE,MAAAhC,GAAM,UAAAQ,GAAU,YAAAU,GAAY,QAAAhB,EAAa,MAAA+B,EAAcjC,GAAMQ,GAAUU,GAAYhB,CAAM;AAAA,EAClH,CAACgC,CAAe,GAAG,CAAC,EAAE,MAAAlC,GAAM,mBAAAG,EAAkB,MAAMgC,EAAgBnC,GAAM,EAAE,aAAaG,GAAmB;AAChH,GAEMS,IAAgB,CAACwB,GAA2BC,MAAmB;AACjE,QAAMC,IAAkB,kBAClBC,IACFH,MAAqB,WAAW,uDAAuD,IACrFI,IAAaH,IAAQI,EAAoBJ,CAAK,IAAI;AACxD,SAAOK,EAAM,CAACF,GAAYF,GAAiBC,CAAkB,CAAC;AAClE;"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { parseRawValue as c, PluginComposer as p, mapMentionable as y } from "@frontify/fondue";
|
|
2
|
-
import { serializeNodeToHtmlRecursive as f } from "./serializeNodesToHtmlRecursive.es.js";
|
|
3
|
-
import { BlockStyles as u } from "../plugins/styles.es.js";
|
|
4
|
-
const A = async (e, r = 1, t = "normal", l = new p()) => {
|
|
5
|
-
const i = c({ raw: e, plugins: l }), o = l.getStyles;
|
|
6
|
-
return Promise.resolve(v(i, { columns: r, columnGap: t, styles: o }));
|
|
7
|
-
}, v = (e, { mentionable: r, columns: t = 1, columnGap: l = "normal", styles: i = u } = {}) => {
|
|
8
|
-
const o = r ? y(r) : /* @__PURE__ */ new Map();
|
|
9
|
-
let s = "";
|
|
10
|
-
for (let a = 0, n = e.length; a < n; a++) {
|
|
11
|
-
const m = e[a];
|
|
12
|
-
h(m) ? s += "<br />" : s += f(m, i, {
|
|
13
|
-
mappedMentionable: o
|
|
14
|
-
});
|
|
15
|
-
}
|
|
16
|
-
return t > 1 ? `<div style="columns:${t}; column-gap:${l};">${s}</div>` : s;
|
|
17
|
-
}, h = (e) => {
|
|
18
|
-
var r;
|
|
19
|
-
return Array.isArray(e == null ? void 0 : e.children) ? (r = e == null ? void 0 : e.children) == null ? void 0 : r.every((t) => t.text === "") : !1;
|
|
20
|
-
};
|
|
21
|
-
export {
|
|
22
|
-
v as serializeNodesToHtml,
|
|
23
|
-
A as serializeRawToHtmlAsync
|
|
24
|
-
};
|
|
25
|
-
//# sourceMappingURL=serializeToHtml.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"serializeToHtml.es.js","sources":["../../../../src/components/RichTextEditor/serializer/serializeToHtml.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TDescendant } from '@udecode/plate';\nimport { PluginComposer, SerializeNodesToHtmlOptions, mapMentionable, parseRawValue } from '@frontify/fondue';\nimport { BlockStyles } from '../plugins';\nimport { serializeNodeToHtmlRecursive } from './serializeNodesToHtmlRecursive';\n\nexport const serializeRawToHtmlAsync = async (\n raw: string,\n columns: SerializeNodesToHtmlOptions['columns'] = 1,\n columnGap: SerializeNodesToHtmlOptions['columnGap'] = 'normal',\n plugins: PluginComposer = new PluginComposer(),\n): Promise<string> => {\n const nodes = parseRawValue({ raw, plugins });\n const styles = plugins.getStyles;\n return Promise.resolve(serializeNodesToHtml(nodes, { columns, columnGap, styles }));\n};\n\nexport const serializeNodesToHtml = (\n nodes: TDescendant[],\n { mentionable, columns = 1, columnGap = 'normal', styles = BlockStyles }: SerializeNodesToHtmlOptions = {},\n): string => {\n const mappedMentionable = mentionable ? mapMentionable(mentionable) : new Map();\n\n let html = '';\n for (let i = 0, len = nodes.length; i < len; i++) {\n const node = nodes[i];\n if (isEmptyNode(node)) {\n html += '<br />';\n } else {\n html += serializeNodeToHtmlRecursive(node, styles, {\n mappedMentionable,\n });\n }\n }\n\n if (columns > 1) {\n return `<div style=\"columns:${columns}; column-gap:${columnGap};\">${html}</div>`;\n }\n\n return html;\n};\n\nconst isEmptyNode = (node: TDescendant): boolean => {\n if (!Array.isArray(node?.children)) {\n return false;\n }\n return node?.children?.every((child) => child.text === '');\n};\n"],"names":["serializeRawToHtmlAsync","raw","columns","columnGap","plugins","PluginComposer","nodes","parseRawValue","styles","serializeNodesToHtml","mentionable","BlockStyles","mappedMentionable","mapMentionable","html","i","len","node","isEmptyNode","serializeNodeToHtmlRecursive","_a","child"],"mappings":";;;AAOa,MAAAA,IAA0B,OACnCC,GACAC,IAAkD,GAClDC,IAAsD,UACtDC,IAA0B,IAAIC,QACZ;AAClB,QAAMC,IAAQC,EAAc,EAAE,KAAAN,GAAK,SAAAG,EAAS,CAAA,GACtCI,IAASJ,EAAQ;AAChB,SAAA,QAAQ,QAAQK,EAAqBH,GAAO,EAAE,SAAAJ,GAAS,WAAAC,GAAW,QAAAK,EAAQ,CAAA,CAAC;AACtF,GAEaC,IAAuB,CAChCH,GACA,EAAE,aAAAI,GAAa,SAAAR,IAAU,GAAG,WAAAC,IAAY,UAAU,QAAAK,IAASG,EAAY,IAAiC,CAAA,MAC/F;AACT,QAAMC,IAAoBF,IAAcG,EAAeH,CAAW,wBAAQ;AAE1E,MAAII,IAAO;AACX,WAASC,IAAI,GAAGC,IAAMV,EAAM,QAAQS,IAAIC,GAAKD,KAAK;AACxC,UAAAE,IAAOX,EAAMS,CAAC;AAChB,IAAAG,EAAYD,CAAI,IACRH,KAAA,WAEAA,KAAAK,EAA6BF,GAAMT,GAAQ;AAAA,MAC/C,mBAAAI;AAAA,IAAA,CACH;AAAA,EAET;AAEA,SAAIV,IAAU,IACH,uBAAuBA,CAAO,gBAAgBC,CAAS,MAAMW,CAAI,WAGrEA;AACX,GAEMI,IAAc,CAACD,MAA+B;;AAChD,SAAK,MAAM,QAAQA,KAAA,gBAAAA,EAAM,QAAQ,KAG1BG,IAAAH,KAAA,gBAAAA,EAAM,aAAN,gBAAAG,EAAgB,MAAM,CAACC,MAAUA,EAAM,SAAS,MAF5C;AAGf;"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
const l = (e) => e ? Object.keys(e).reduce((r, t) => {
|
|
2
|
-
const s = e[t];
|
|
3
|
-
return s ? `${r}${a(t)}: ${s}; ` : r;
|
|
4
|
-
}, "").trim().replaceAll('"', "'") : "", a = (e) => e.replaceAll(/([A-Z])/g, "-$1").toLowerCase();
|
|
5
|
-
export {
|
|
6
|
-
l as reactCssPropsToCss
|
|
7
|
-
};
|
|
8
|
-
//# sourceMappingURL=reactCssPropsToCss.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"reactCssPropsToCss.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utlis/reactCssPropsToCss.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { CSSProperties } from 'react';\n\nexport const reactCssPropsToCss = (props?: CSSProperties): string => {\n if (!props) {\n return '';\n }\n\n return Object.keys(props)\n .reduce<string>((acc, key) => {\n const value = props[key as keyof CSSProperties];\n return value ? `${acc}${convertCamelCaseToKebabCase(key)}: ${value}; ` : acc;\n }, '')\n .trim()\n .replaceAll('\"', \"'\");\n};\n\nconst convertCamelCaseToKebabCase = (str: string): string => {\n return str.replaceAll(/([A-Z])/g, '-$1').toLowerCase();\n};\n"],"names":["reactCssPropsToCss","props","acc","key","value","convertCamelCaseToKebabCase","str"],"mappings":"AAIa,MAAAA,IAAqB,CAACC,MAC1BA,IAIE,OAAO,KAAKA,CAAK,EACnB,OAAe,CAACC,GAAKC,MAAQ;AACpB,QAAAC,IAAQH,EAAME,CAA0B;AACvC,SAAAC,IAAQ,GAAGF,CAAG,GAAGG,EAA4BF,CAAG,CAAC,KAAKC,CAAK,OAAOF;AAAA,GAC1E,EAAE,EACJ,OACA,WAAW,KAAK,GAAG,IATb,IAYTG,IAA8B,CAACC,MAC1BA,EAAI,WAAW,YAAY,KAAK,EAAE,YAAY;"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { BOLD_CLASSES as S, ITALIC_CLASSES as c, UNDERLINE_CLASSES as $, STRIKETHROUGH_CLASSES as f, CODE_CLASSES as o } from "@frontify/fondue";
|
|
2
|
-
import u from "escape-html";
|
|
3
|
-
const A = (a) => {
|
|
4
|
-
let s = u(a.text);
|
|
5
|
-
s = s.replaceAll(`
|
|
6
|
-
`, "<br />");
|
|
7
|
-
const { bold: p, italic: i, underline: e, strikethrough: r, code: t, subscript: l, superscript: n } = a;
|
|
8
|
-
return p && (s = `<span class="${S}">${s}</span>`), i && (s = `<span class="${c}">${s}</span>`), e && (s = `<span class="${$}">${s}</span>`), r && (s = `<span class="${f}">${s}</span>`), t && (s = `<span class="${o}">${s}</span>`), l ? s = `<sub>${s}</sub>` : n && (s = `<sup>${s}</sup>`), s;
|
|
9
|
-
};
|
|
10
|
-
export {
|
|
11
|
-
A as serializeLeafToHtml
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=serializeLeafToHtml.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"serializeLeafToHtml.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utlis/serializeLeafToHtml.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { BOLD_CLASSES, CODE_CLASSES, ITALIC_CLASSES, STRIKETHROUGH_CLASSES, UNDERLINE_CLASSES } from '@frontify/fondue';\nimport { TText } from '@udecode/plate';\nimport escapeHtml from 'escape-html';\n\nexport const serializeLeafToHtml = (node: TText): string => {\n let string = escapeHtml(node.text);\n string = string.replaceAll('\\n', '<br />');\n const { bold, italic, underline, strikethrough, code, subscript, superscript } = node;\n if (bold) {\n string = `<span class=\"${BOLD_CLASSES}\">${string}</span>`;\n }\n if (italic) {\n string = `<span class=\"${ITALIC_CLASSES}\">${string}</span>`;\n }\n if (underline) {\n string = `<span class=\"${UNDERLINE_CLASSES}\">${string}</span>`;\n }\n if (strikethrough) {\n string = `<span class=\"${STRIKETHROUGH_CLASSES}\">${string}</span>`;\n }\n if (code) {\n string = `<span class=\"${CODE_CLASSES}\">${string}</span>`;\n }\n if (subscript) {\n string = `<sub>${string}</sub>`;\n } else if (superscript) {\n string = `<sup>${string}</sup>`;\n }\n return string;\n};\n"],"names":["serializeLeafToHtml","node","string","escapeHtml","bold","italic","underline","strikethrough","code","subscript","superscript","BOLD_CLASSES","ITALIC_CLASSES","UNDERLINE_CLASSES","STRIKETHROUGH_CLASSES","CODE_CLASSES"],"mappings":";;AAMa,MAAAA,IAAsB,CAACC,MAAwB;AACpD,MAAAC,IAASC,EAAWF,EAAK,IAAI;AACxB,EAAAC,IAAAA,EAAO,WAAW;AAAA,GAAM,QAAQ;AACnC,QAAA,EAAE,MAAAE,GAAM,QAAAC,GAAQ,WAAAC,GAAW,eAAAC,GAAe,MAAAC,GAAM,WAAAC,GAAW,aAAAC,EAAgB,IAAAT;AACjF,SAAIG,MACSF,IAAA,gBAAgBS,CAAY,KAAKT,CAAM,YAEhDG,MACSH,IAAA,gBAAgBU,CAAc,KAAKV,CAAM,YAElDI,MACSJ,IAAA,gBAAgBW,CAAiB,KAAKX,CAAM,YAErDK,MACSL,IAAA,gBAAgBY,CAAqB,KAAKZ,CAAM,YAEzDM,MACSN,IAAA,gBAAgBa,CAAY,KAAKb,CAAM,YAEhDO,IACAP,IAAS,QAAQA,CAAM,WAChBQ,MACPR,IAAS,QAAQA,CAAM,WAEpBA;AACX;"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
|
-
|
|
3
|
-
import type { CSSProperties } from 'react';
|
|
4
|
-
import { TElement } from '@udecode/plate';
|
|
5
|
-
|
|
6
|
-
import { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';
|
|
7
|
-
import { BUTTON_PLUGIN } from '../../plugins';
|
|
8
|
-
|
|
9
|
-
export type ButtonStylesType = Record<string, Record<string, CSSProperties & { hover?: CSSProperties }>>;
|
|
10
|
-
|
|
11
|
-
export const buttonNode = (node: TElement, children: string, defaultClassNames: string, styles: ButtonStylesType) => {
|
|
12
|
-
const buttonStyles = styles[BUTTON_PLUGIN];
|
|
13
|
-
const buttonTypeString = (node.buttonStyle as string) ?? 'primary';
|
|
14
|
-
const buttonType = `button${buttonTypeString.charAt(0).toUpperCase()}${buttonTypeString.slice(1)}`;
|
|
15
|
-
const buttonStyle = buttonStyles[buttonType];
|
|
16
|
-
|
|
17
|
-
const defaultStyles = reactCssPropsToCss(buttonStyle);
|
|
18
|
-
|
|
19
|
-
return `<a href="${node.url}"
|
|
20
|
-
target="${node.target ?? '_blank'}"
|
|
21
|
-
dir="auto"
|
|
22
|
-
style="${defaultStyles}"
|
|
23
|
-
class="${defaultClassNames}"
|
|
24
|
-
onmouseenter="this.setAttribute('style', '${defaultStyles} ${reactCssPropsToCss(buttonStyle?.hover)}');"
|
|
25
|
-
onmouseleave="this.setAttribute('style', '${reactCssPropsToCss(buttonStyle)}');"
|
|
26
|
-
>${children}</a>`;
|
|
27
|
-
};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
|
-
|
|
3
|
-
import type { CSSProperties } from 'react';
|
|
4
|
-
import { merge } from '@frontify/fondue';
|
|
5
|
-
import { TElement } from '@udecode/plate';
|
|
6
|
-
|
|
7
|
-
import { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';
|
|
8
|
-
|
|
9
|
-
export const checkItemNode = (
|
|
10
|
-
node: TElement,
|
|
11
|
-
children: string,
|
|
12
|
-
defaultClassNames: string,
|
|
13
|
-
styles: Record<string, CSSProperties & { hover?: CSSProperties }>,
|
|
14
|
-
) => {
|
|
15
|
-
return `<div dir="auto" disabled class="tw-flex tw-flex-row tw-pb-2 first-of-type:tw-ml-0 ${defaultClassNames}" style="margin-left:${
|
|
16
|
-
((node.indent as number) ?? 0) * 24
|
|
17
|
-
}px;">
|
|
18
|
-
<div dir="auto" class="tw-flex tw-items-center tw-justify-center tw-select-none tw-mr-1.5">
|
|
19
|
-
<input
|
|
20
|
-
class="tw-w-4 tw-h-4 tw-m-0"
|
|
21
|
-
type="checkbox"
|
|
22
|
-
${node.checked ? 'checked' : ''}
|
|
23
|
-
onclick="return false;" />
|
|
24
|
-
</div>
|
|
25
|
-
<span dir="auto" class="${merge([
|
|
26
|
-
'tw-flex-1 tw-focus:outline-none',
|
|
27
|
-
node.checked ? '!tw-line-through' : '',
|
|
28
|
-
])}" style="${reactCssPropsToCss(styles[node.children[0].textStyle as string])}">${children}</span>
|
|
29
|
-
</div>`;
|
|
30
|
-
};
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
|
-
|
|
3
|
-
import type { CSSProperties } from 'react';
|
|
4
|
-
import { merge } from '@frontify/fondue';
|
|
5
|
-
import { TElement } from '@udecode/plate';
|
|
6
|
-
|
|
7
|
-
import { TextStyles } from '../../plugins';
|
|
8
|
-
import { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';
|
|
9
|
-
|
|
10
|
-
export const defaultNode = (node: TElement, children: string, styles: CSSProperties, defaultClassNames: string) => {
|
|
11
|
-
const defaultStyles = reactCssPropsToCss(styles);
|
|
12
|
-
|
|
13
|
-
if (node.type === TextStyles.heading1) {
|
|
14
|
-
return `<h1 dir="auto" class="${merge([defaultClassNames, 'a-h1'])}">${getStyledChild(
|
|
15
|
-
children,
|
|
16
|
-
defaultStyles,
|
|
17
|
-
)}</h1>`;
|
|
18
|
-
}
|
|
19
|
-
if (node.type === TextStyles.heading2) {
|
|
20
|
-
return `<h2 dir="auto" class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</h2>`;
|
|
21
|
-
}
|
|
22
|
-
if (node.type === TextStyles.heading3) {
|
|
23
|
-
return `<h3 dir="auto" class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</h3>`;
|
|
24
|
-
}
|
|
25
|
-
if (node.type === TextStyles.heading4) {
|
|
26
|
-
return `<h4 dir="auto" class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</h4>`;
|
|
27
|
-
}
|
|
28
|
-
if (node.type === TextStyles.custom1) {
|
|
29
|
-
return `<p dir="auto" class="${merge([defaultClassNames, 'a-custom1'])}">${getStyledChild(
|
|
30
|
-
children,
|
|
31
|
-
defaultStyles,
|
|
32
|
-
)}</p>`;
|
|
33
|
-
}
|
|
34
|
-
if (node.type === TextStyles.custom2) {
|
|
35
|
-
return `<p dir="auto" class="${merge([defaultClassNames, 'a-custom2'])}">${getStyledChild(
|
|
36
|
-
children,
|
|
37
|
-
defaultStyles,
|
|
38
|
-
)}</p>`;
|
|
39
|
-
}
|
|
40
|
-
if (node.type === TextStyles.custom3) {
|
|
41
|
-
return `<p dir="auto" class="${merge([defaultClassNames, 'a-custom3'])}">${getStyledChild(
|
|
42
|
-
children,
|
|
43
|
-
defaultStyles,
|
|
44
|
-
)}</p>`;
|
|
45
|
-
}
|
|
46
|
-
if (node.type === TextStyles.quote) {
|
|
47
|
-
return `<p dir="auto" class="${merge([defaultClassNames, 'a-quote'])}">${getStyledChild(
|
|
48
|
-
children,
|
|
49
|
-
defaultStyles,
|
|
50
|
-
)}</p>`;
|
|
51
|
-
}
|
|
52
|
-
if (node.type === TextStyles.imageTitle) {
|
|
53
|
-
return `<p dir="auto" class="${merge([defaultClassNames, 'a-image-title'])}">${getStyledChild(
|
|
54
|
-
children,
|
|
55
|
-
defaultStyles,
|
|
56
|
-
)}</p>`;
|
|
57
|
-
}
|
|
58
|
-
if (node.type === TextStyles.imageCaption) {
|
|
59
|
-
return `<p dir="auto" class="${merge([defaultClassNames, 'a-image-caption'])}">${getStyledChild(
|
|
60
|
-
children,
|
|
61
|
-
defaultStyles,
|
|
62
|
-
)}</p>`;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
return `<p dir="auto" class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</p>`;
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
const getStyledChild = (children: string, styles: string) => `<span dir="auto" style="${styles}">${children}</span>`;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
|
-
|
|
3
|
-
import type { CSSProperties } from 'react';
|
|
4
|
-
import escapeHtml from 'escape-html';
|
|
5
|
-
import { TElement } from '@udecode/plate';
|
|
6
|
-
|
|
7
|
-
import { LINK_PLUGIN } from '../../plugins/LinkPlugin/id';
|
|
8
|
-
import { TLinkElement } from '../../plugins/LinkPlugin/types';
|
|
9
|
-
import { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';
|
|
10
|
-
|
|
11
|
-
export const linkNode = (
|
|
12
|
-
node: TElement,
|
|
13
|
-
children: string,
|
|
14
|
-
defaultClassNames: string,
|
|
15
|
-
styles: Record<string, CSSProperties & { hover?: CSSProperties }>,
|
|
16
|
-
) => {
|
|
17
|
-
if (node.chosenLink) {
|
|
18
|
-
const { chosenLink } = node as TLinkElement;
|
|
19
|
-
return `<a dir="auto" class="${defaultClassNames}" style="${reactCssPropsToCss(styles[LINK_PLUGIN])}" target=${
|
|
20
|
-
chosenLink?.openInNewTab ? '_blank' : '_self'
|
|
21
|
-
} href="${escapeHtml(chosenLink?.searchResult?.link)}">${children}</a>`;
|
|
22
|
-
}
|
|
23
|
-
return `<a dir="auto" class="${defaultClassNames}" style="${reactCssPropsToCss(styles[LINK_PLUGIN])}" target="${
|
|
24
|
-
node?.target ?? '_blank'
|
|
25
|
-
}" href="${escapeHtml(node.url as string)}">${children}</a>`;
|
|
26
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
|
-
|
|
3
|
-
import ReactDOM from 'react-dom';
|
|
4
|
-
import { TElement, TMentionElement } from '@udecode/plate';
|
|
5
|
-
import { MappedMentionableItems, MentionMarkupElementNode } from '@frontify/fondue';
|
|
6
|
-
|
|
7
|
-
type MentionHtmlNodeProps = { mentionable?: MappedMentionableItems };
|
|
8
|
-
|
|
9
|
-
export const mentionHtmlNode = (node: TElement, { mentionable }: MentionHtmlNodeProps = {}) => {
|
|
10
|
-
if (!mentionable) {
|
|
11
|
-
return '';
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
const div = document.createElement('div');
|
|
15
|
-
ReactDOM.render(MentionMarkupElementNode(mentionable)({ element: node as TMentionElement }), div);
|
|
16
|
-
return div.innerHTML;
|
|
17
|
-
};
|