@od-labs/payloadcms-dynamic-value-richtext 1.0.3 → 1.1.0
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/README.md +2 -2
- package/dist/exports/jsx.d.ts +0 -4
- package/dist/exports/jsx.js +26 -9
- package/dist/exports/jsx.js.map +1 -1
- package/dist/features/DynamicValue/feature.server.d.ts +16 -16
- package/dist/features/DynamicValue/types.d.ts +23 -23
- package/dist/icons/dynamicValue/bold.d.ts +2 -0
- package/dist/icons/dynamicValue/bold.js +6 -0
- package/dist/icons/dynamicValue/bold.js.map +1 -0
- package/dist/icons/dynamicValue/index.d.ts +3 -0
- package/dist/icons/dynamicValue/index.js +14 -0
- package/dist/icons/dynamicValue/index.js.map +1 -0
- package/dist/icons/dynamicValue/italic.d.ts +2 -0
- package/dist/icons/dynamicValue/italic.js +6 -0
- package/dist/icons/dynamicValue/italic.js.map +1 -0
- package/dist/icons/dynamicValue/link.d.ts +2 -0
- package/dist/icons/dynamicValue/link.js +6 -0
- package/dist/icons/dynamicValue/link.js.map +1 -0
- package/dist/icons/dynamicValue/strikethrough.d.ts +2 -0
- package/dist/icons/dynamicValue/strikethrough.js +6 -0
- package/dist/icons/dynamicValue/strikethrough.js.map +1 -0
- package/dist/icons/dynamicValue/types.d.ts +5 -0
- package/dist/icons/dynamicValue/types.js +3 -0
- package/dist/icons/dynamicValue/types.js.map +1 -0
- package/dist/icons/dynamicValue/underline.d.ts +2 -0
- package/dist/icons/dynamicValue/underline.js +6 -0
- package/dist/icons/dynamicValue/underline.js.map +1 -0
- package/dist/index.d.ts +6 -6
- package/dist/nodes/DynamicValueNode/index.d.ts +16 -28
- package/dist/nodes/DynamicValueNode/index.js +151 -76
- package/dist/nodes/DynamicValueNode/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -86,7 +86,7 @@ Use the plugin-provided wrapper component that injects converters for you:
|
|
|
86
86
|
```tsx
|
|
87
87
|
import { DynamicValueRichText } from '@od-labs/payloadcms-dynamic-value-richtext/react'
|
|
88
88
|
|
|
89
|
-
|
|
89
|
+
<DynamicValueRichText data={page.content} payloadData={page} />
|
|
90
90
|
```
|
|
91
91
|
|
|
92
92
|
### Option B: manual converters
|
|
@@ -95,7 +95,7 @@ import { DynamicValueRichText } from '@od-labs/payloadcms-dynamic-value-richtext
|
|
|
95
95
|
import { RichText } from '@payloadcms/richtext-lexical/react'
|
|
96
96
|
import { DynamicValueJSXConverters } from '@od-labs/payloadcms-dynamic-value-richtext/jsx'
|
|
97
97
|
|
|
98
|
-
|
|
98
|
+
<RichText data={page.content} converters={DynamicValueJSXConverters} />
|
|
99
99
|
```
|
|
100
100
|
|
|
101
101
|
If you want to resolve the dynamic value from real document data at render time:
|
package/dist/exports/jsx.d.ts
CHANGED
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
import type { JSXConverters } from '@payloadcms/richtext-lexical/react';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import type { SerializedDynamicValueNode } from '../nodes/DynamicValueNode/index.js';
|
|
4
|
-
/**
|
|
5
|
-
* JSX converters for dynamic value nodes. Includes both the current node type and
|
|
6
|
-
* the legacy type to keep older content working.
|
|
7
|
-
*/
|
|
8
4
|
export declare const DynamicValueJSXConverters: JSXConverters;
|
|
9
5
|
export declare const withDynamicValueJSXConverters: (converters?: JSXConverters) => JSXConverters;
|
|
10
6
|
export declare function createDynamicValueJSXConverters(options: {
|
package/dist/exports/jsx.js
CHANGED
|
@@ -1,10 +1,30 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { DYNAMIC_VALUE_NODE_TYPE, LEGACY_DYNAMIC_VALUE_NODE_TYPE } from '../nodes/DynamicValueNode/index.js';
|
|
4
|
+
const TEXT_FORMAT = {
|
|
5
|
+
bold: 1,
|
|
6
|
+
italic: 2,
|
|
7
|
+
strikethrough: 4,
|
|
8
|
+
underline: 8
|
|
9
|
+
};
|
|
10
|
+
const tokenTextStyle = (node)=>{
|
|
11
|
+
const format = typeof node.format === 'number' ? node.format : 0;
|
|
12
|
+
const textDecoration = [
|
|
13
|
+
format & TEXT_FORMAT.underline ? 'underline' : '',
|
|
14
|
+
format & TEXT_FORMAT.strikethrough ? 'line-through' : ''
|
|
15
|
+
].filter(Boolean).join(' ');
|
|
16
|
+
return {
|
|
17
|
+
fontStyle: format & TEXT_FORMAT.italic ? 'italic' : undefined,
|
|
18
|
+
fontWeight: format & TEXT_FORMAT.bold ? 700 : undefined,
|
|
19
|
+
textDecoration: textDecoration || undefined
|
|
20
|
+
};
|
|
21
|
+
};
|
|
4
22
|
const renderDynamicValueLabel = (node)=>{
|
|
5
23
|
return /*#__PURE__*/ _jsx("span", {
|
|
24
|
+
className: "text-black dark:text-white",
|
|
6
25
|
"data-payload-dynamic-field": node.field,
|
|
7
26
|
"data-payload-dynamic-value": "true",
|
|
27
|
+
style: tokenTextStyle(node),
|
|
8
28
|
children: node.label
|
|
9
29
|
}, node.field);
|
|
10
30
|
};
|
|
@@ -12,10 +32,7 @@ const dynamicValueJSXConverter = ({ node })=>{
|
|
|
12
32
|
const dynamicNode = node;
|
|
13
33
|
return renderDynamicValueLabel(dynamicNode);
|
|
14
34
|
};
|
|
15
|
-
|
|
16
|
-
* JSX converters for dynamic value nodes. Includes both the current node type and
|
|
17
|
-
* the legacy type to keep older content working.
|
|
18
|
-
*/ export const DynamicValueJSXConverters = {
|
|
35
|
+
export const DynamicValueJSXConverters = {
|
|
19
36
|
[DYNAMIC_VALUE_NODE_TYPE]: dynamicValueJSXConverter,
|
|
20
37
|
[LEGACY_DYNAMIC_VALUE_NODE_TYPE]: dynamicValueJSXConverter
|
|
21
38
|
};
|
|
@@ -34,11 +51,11 @@ export function createDynamicValueJSXConverters(options) {
|
|
|
34
51
|
return undefined;
|
|
35
52
|
}, data);
|
|
36
53
|
if (resolvedValue !== undefined && resolvedValue !== null && resolvedValue !== '') {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
54
|
+
const label = typeof resolvedValue === 'string' ? resolvedValue : typeof resolvedValue === 'number' || typeof resolvedValue === 'boolean' ? String(resolvedValue) : JSON.stringify(resolvedValue);
|
|
55
|
+
return renderDynamicValueLabel({
|
|
56
|
+
...dynamicNode,
|
|
57
|
+
label: label || dynamicNode.label
|
|
58
|
+
});
|
|
42
59
|
}
|
|
43
60
|
if (fallback) {
|
|
44
61
|
return /*#__PURE__*/ _jsx(React.Fragment, {
|
package/dist/exports/jsx.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/exports/jsx.tsx"],"sourcesContent":["import type { JSXConverters } from '@payloadcms/richtext-lexical/react'\r\n\r\nimport React from 'react'\r\n\r\nimport type { SerializedDynamicValueNode } from '../nodes/DynamicValueNode/index.js'\r\n\r\nimport {\r\n DYNAMIC_VALUE_NODE_TYPE,\r\n LEGACY_DYNAMIC_VALUE_NODE_TYPE,\r\n} from '../nodes/DynamicValueNode/index.js'\r\n\r\nconst renderDynamicValueLabel = (node: SerializedDynamicValueNode) => {\r\n return (\r\n <span\r\n data-payload-dynamic-field={node.field}\r\n data-payload-dynamic-value=\"true\"\r\n key={node.field}\r\n >\r\n {node.label}\r\n </span>\r\n )\r\n}\r\n\r\nconst dynamicValueJSXConverter = ({ node }: { node: unknown }) => {\r\n const dynamicNode = node as SerializedDynamicValueNode\r\n return renderDynamicValueLabel(dynamicNode)\r\n}\r\n\r\
|
|
1
|
+
{"version":3,"sources":["../../src/exports/jsx.tsx"],"sourcesContent":["import type { JSXConverters } from '@payloadcms/richtext-lexical/react'\r\n\r\nimport React from 'react'\r\n\r\nimport type { SerializedDynamicValueNode } from '../nodes/DynamicValueNode/index.js'\r\n\r\nimport {\r\n DYNAMIC_VALUE_NODE_TYPE,\r\n LEGACY_DYNAMIC_VALUE_NODE_TYPE,\r\n} from '../nodes/DynamicValueNode/index.js'\r\n\r\nconst TEXT_FORMAT = {\r\n bold: 1,\r\n italic: 2,\r\n strikethrough: 4,\r\n underline: 8,\r\n} as const\r\n\r\nconst tokenTextStyle = (node: SerializedDynamicValueNode): React.CSSProperties => {\r\n const format = typeof node.format === 'number' ? node.format : 0\r\n\r\n const textDecoration = [\r\n format & TEXT_FORMAT.underline ? 'underline' : '',\r\n format & TEXT_FORMAT.strikethrough ? 'line-through' : '',\r\n ]\r\n .filter(Boolean)\r\n .join(' ')\r\n\r\n return {\r\n fontStyle: format & TEXT_FORMAT.italic ? 'italic' : undefined,\r\n fontWeight: format & TEXT_FORMAT.bold ? 700 : undefined,\r\n textDecoration: textDecoration || undefined,\r\n }\r\n}\r\n\r\nconst renderDynamicValueLabel = (node: SerializedDynamicValueNode) => {\r\n return (\r\n <span\r\n className=\"text-black dark:text-white\"\r\n data-payload-dynamic-field={node.field}\r\n data-payload-dynamic-value=\"true\"\r\n key={node.field}\r\n style={tokenTextStyle(node)}\r\n >\r\n {node.label}\r\n </span>\r\n )\r\n}\r\n\r\nconst dynamicValueJSXConverter = ({ node }: { node: unknown }) => {\r\n const dynamicNode = node as SerializedDynamicValueNode\r\n return renderDynamicValueLabel(dynamicNode)\r\n}\r\n\r\nexport const DynamicValueJSXConverters: JSXConverters = {\r\n [DYNAMIC_VALUE_NODE_TYPE]: dynamicValueJSXConverter,\r\n [LEGACY_DYNAMIC_VALUE_NODE_TYPE]: dynamicValueJSXConverter,\r\n}\r\n\r\nexport const withDynamicValueJSXConverters = (converters?: JSXConverters): JSXConverters => ({\r\n ...(converters || {}),\r\n ...DynamicValueJSXConverters,\r\n})\r\n\r\nexport function createDynamicValueJSXConverters(options: {\r\n data?: Record<string, unknown>\r\n fallback?: (node: SerializedDynamicValueNode) => React.ReactNode\r\n}): JSXConverters {\r\n const { data = {}, fallback } = options\r\n\r\n const converter = ({ node }: { node: unknown }) => {\r\n const dynamicNode = node as SerializedDynamicValueNode\r\n const resolvedValue = dynamicNode.field.split('.').reduce<unknown>((current, key) => {\r\n if (current && typeof current === 'object' && key in (current as Record<string, unknown>)) {\r\n return (current as Record<string, unknown>)[key]\r\n }\r\n\r\n return undefined\r\n }, data)\r\n\r\n if (resolvedValue !== undefined && resolvedValue !== null && resolvedValue !== '') {\r\n const label =\r\n typeof resolvedValue === 'string'\r\n ? resolvedValue\r\n : typeof resolvedValue === 'number' || typeof resolvedValue === 'boolean'\r\n ? String(resolvedValue)\r\n : JSON.stringify(resolvedValue)\r\n\r\n return renderDynamicValueLabel({\r\n ...dynamicNode,\r\n label: label || dynamicNode.label,\r\n })\r\n }\r\n\r\n if (fallback) {\r\n return <React.Fragment key={dynamicNode.field}>{fallback(dynamicNode)}</React.Fragment>\r\n }\r\n\r\n return renderDynamicValueLabel(dynamicNode)\r\n }\r\n\r\n return {\r\n [DYNAMIC_VALUE_NODE_TYPE]: converter,\r\n [LEGACY_DYNAMIC_VALUE_NODE_TYPE]: converter,\r\n }\r\n}\r\n"],"names":["React","DYNAMIC_VALUE_NODE_TYPE","LEGACY_DYNAMIC_VALUE_NODE_TYPE","TEXT_FORMAT","bold","italic","strikethrough","underline","tokenTextStyle","node","format","textDecoration","filter","Boolean","join","fontStyle","undefined","fontWeight","renderDynamicValueLabel","span","className","data-payload-dynamic-field","field","data-payload-dynamic-value","style","label","dynamicValueJSXConverter","dynamicNode","DynamicValueJSXConverters","withDynamicValueJSXConverters","converters","createDynamicValueJSXConverters","options","data","fallback","converter","resolvedValue","split","reduce","current","key","String","JSON","stringify","Fragment"],"mappings":";AAEA,OAAOA,WAAW,QAAO;AAIzB,SACEC,uBAAuB,EACvBC,8BAA8B,QACzB,qCAAoC;AAE3C,MAAMC,cAAc;IAClBC,MAAM;IACNC,QAAQ;IACRC,eAAe;IACfC,WAAW;AACb;AAEA,MAAMC,iBAAiB,CAACC;IACtB,MAAMC,SAAS,OAAOD,KAAKC,MAAM,KAAK,WAAWD,KAAKC,MAAM,GAAG;IAE/D,MAAMC,iBAAiB;QACrBD,SAASP,YAAYI,SAAS,GAAG,cAAc;QAC/CG,SAASP,YAAYG,aAAa,GAAG,iBAAiB;KACvD,CACEM,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,OAAO;QACLC,WAAWL,SAASP,YAAYE,MAAM,GAAG,WAAWW;QACpDC,YAAYP,SAASP,YAAYC,IAAI,GAAG,MAAMY;QAC9CL,gBAAgBA,kBAAkBK;IACpC;AACF;AAEA,MAAME,0BAA0B,CAACT;IAC/B,qBACE,KAACU;QACCC,WAAU;QACVC,8BAA4BZ,KAAKa,KAAK;QACtCC,8BAA2B;QAE3BC,OAAOhB,eAAeC;kBAErBA,KAAKgB,KAAK;OAHNhB,KAAKa,KAAK;AAMrB;AAEA,MAAMI,2BAA2B,CAAC,EAAEjB,IAAI,EAAqB;IAC3D,MAAMkB,cAAclB;IACpB,OAAOS,wBAAwBS;AACjC;AAEA,OAAO,MAAMC,4BAA2C;IACtD,CAAC3B,wBAAwB,EAAEyB;IAC3B,CAACxB,+BAA+B,EAAEwB;AACpC,EAAC;AAED,OAAO,MAAMG,gCAAgC,CAACC,aAA+C,CAAA;QAC3F,GAAIA,cAAc,CAAC,CAAC;QACpB,GAAGF,yBAAyB;IAC9B,CAAA,EAAE;AAEF,OAAO,SAASG,gCAAgCC,OAG/C;IACC,MAAM,EAAEC,OAAO,CAAC,CAAC,EAAEC,QAAQ,EAAE,GAAGF;IAEhC,MAAMG,YAAY,CAAC,EAAE1B,IAAI,EAAqB;QAC5C,MAAMkB,cAAclB;QACpB,MAAM2B,gBAAgBT,YAAYL,KAAK,CAACe,KAAK,CAAC,KAAKC,MAAM,CAAU,CAACC,SAASC;YAC3E,IAAID,WAAW,OAAOA,YAAY,YAAYC,OAAQD,SAAqC;gBACzF,OAAO,AAACA,OAAmC,CAACC,IAAI;YAClD;YAEA,OAAOxB;QACT,GAAGiB;QAEH,IAAIG,kBAAkBpB,aAAaoB,kBAAkB,QAAQA,kBAAkB,IAAI;YACjF,MAAMX,QACJ,OAAOW,kBAAkB,WACrBA,gBACA,OAAOA,kBAAkB,YAAY,OAAOA,kBAAkB,YAC5DK,OAAOL,iBACPM,KAAKC,SAAS,CAACP;YAEvB,OAAOlB,wBAAwB;gBAC7B,GAAGS,WAAW;gBACdF,OAAOA,SAASE,YAAYF,KAAK;YACnC;QACF;QAEA,IAAIS,UAAU;YACZ,qBAAO,KAAClC,MAAM4C,QAAQ;0BAA0BV,SAASP;eAA7BA,YAAYL,KAAK;QAC/C;QAEA,OAAOJ,wBAAwBS;IACjC;IAEA,OAAO;QACL,CAAC1B,wBAAwB,EAAEkC;QAC3B,CAACjC,+BAA+B,EAAEiC;IACpC;AACF"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import type { Field } from 'payload';
|
|
2
|
-
export type DynamicValueFeatureProps = {
|
|
3
|
-
collections?: string[];
|
|
4
|
-
fields?: Field[];
|
|
5
|
-
globals?: string[];
|
|
6
|
-
trigger?: string;
|
|
7
|
-
};
|
|
8
|
-
type DynamicValueOption = {
|
|
9
|
-
label: string;
|
|
10
|
-
value: string;
|
|
11
|
-
};
|
|
12
|
-
export declare const DynamicValueFeature: import("@payloadcms/richtext-lexical").FeatureProviderProviderServer<DynamicValueFeatureProps, DynamicValueFeatureProps, {
|
|
13
|
-
options: DynamicValueOption[];
|
|
14
|
-
trigger: string;
|
|
15
|
-
}>;
|
|
16
|
-
export {};
|
|
1
|
+
import type { Field } from 'payload';
|
|
2
|
+
export type DynamicValueFeatureProps = {
|
|
3
|
+
collections?: string[];
|
|
4
|
+
fields?: Field[];
|
|
5
|
+
globals?: string[];
|
|
6
|
+
trigger?: string;
|
|
7
|
+
};
|
|
8
|
+
type DynamicValueOption = {
|
|
9
|
+
label: string;
|
|
10
|
+
value: string;
|
|
11
|
+
};
|
|
12
|
+
export declare const DynamicValueFeature: import("@payloadcms/richtext-lexical").FeatureProviderProviderServer<DynamicValueFeatureProps, DynamicValueFeatureProps, {
|
|
13
|
+
options: DynamicValueOption[];
|
|
14
|
+
trigger: string;
|
|
15
|
+
}>;
|
|
16
|
+
export {};
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import type { CollectionSlug, Field, GlobalSlug } from 'payload';
|
|
2
|
-
export type DynamicValueOption = {
|
|
3
|
-
label: string;
|
|
4
|
-
value: string;
|
|
5
|
-
};
|
|
6
|
-
export type DynamicValueConfig = {
|
|
7
|
-
/**
|
|
8
|
-
* Collections to pull fields from
|
|
9
|
-
*/
|
|
10
|
-
collections?: CollectionSlug[];
|
|
11
|
-
/**
|
|
12
|
-
* Directly provided fields for dynamic values
|
|
13
|
-
*/
|
|
14
|
-
fields?: Field[];
|
|
15
|
-
/**
|
|
16
|
-
* Globals to pull fields from
|
|
17
|
-
*/
|
|
18
|
-
globals?: GlobalSlug[];
|
|
19
|
-
/**
|
|
20
|
-
* The trigger character to use in the editor. Defaults to '@'
|
|
21
|
-
*/
|
|
22
|
-
trigger?: string;
|
|
23
|
-
};
|
|
1
|
+
import type { CollectionSlug, Field, GlobalSlug } from 'payload';
|
|
2
|
+
export type DynamicValueOption = {
|
|
3
|
+
label: string;
|
|
4
|
+
value: string;
|
|
5
|
+
};
|
|
6
|
+
export type DynamicValueConfig = {
|
|
7
|
+
/**
|
|
8
|
+
* Collections to pull fields from
|
|
9
|
+
*/
|
|
10
|
+
collections?: CollectionSlug[];
|
|
11
|
+
/**
|
|
12
|
+
* Directly provided fields for dynamic values
|
|
13
|
+
*/
|
|
14
|
+
fields?: Field[];
|
|
15
|
+
/**
|
|
16
|
+
* Globals to pull fields from
|
|
17
|
+
*/
|
|
18
|
+
globals?: GlobalSlug[];
|
|
19
|
+
/**
|
|
20
|
+
* The trigger character to use in the editor. Defaults to '@'
|
|
21
|
+
*/
|
|
22
|
+
trigger?: string;
|
|
23
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export const boldIcon = {
|
|
2
|
+
mode: 'fill',
|
|
3
|
+
path: 'M10.6772 15H6.27017V5.718H10.4172C12.6792 5.718 13.8492 6.602 13.8492 8.292C13.8492 9.098 13.1992 9.982 12.4712 10.216C13.3812 10.476 14.1742 11.256 14.1742 12.322C14.1742 14.09 12.9002 15 10.6772 15ZM8.46717 9.501H10.3262C11.3012 9.501 11.7042 9.046 11.7042 8.409C11.7042 7.72 11.2362 7.317 10.3392 7.317H8.46717V9.501ZM8.46717 11.061V13.401H10.4822C11.4702 13.401 11.9642 12.959 11.9642 12.218C11.9642 11.49 11.4702 11.061 10.4822 11.061H8.46717Z'
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
//# sourceMappingURL=bold.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/icons/dynamicValue/bold.ts"],"sourcesContent":["import type { IconDefinition } from './types.js'\r\n\r\nexport const boldIcon: IconDefinition = {\r\n mode: 'fill',\r\n path: 'M10.6772 15H6.27017V5.718H10.4172C12.6792 5.718 13.8492 6.602 13.8492 8.292C13.8492 9.098 13.1992 9.982 12.4712 10.216C13.3812 10.476 14.1742 11.256 14.1742 12.322C14.1742 14.09 12.9002 15 10.6772 15ZM8.46717 9.501H10.3262C11.3012 9.501 11.7042 9.046 11.7042 8.409C11.7042 7.72 11.2362 7.317 10.3392 7.317H8.46717V9.501ZM8.46717 11.061V13.401H10.4822C11.4702 13.401 11.9642 12.959 11.9642 12.218C11.9642 11.49 11.4702 11.061 10.4822 11.061H8.46717Z',\r\n}\r\n"],"names":["boldIcon","mode","path"],"mappings":"AAEA,OAAO,MAAMA,WAA2B;IACtCC,MAAM;IACNC,MAAM;AACR,EAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { boldIcon } from './bold.js';
|
|
2
|
+
import { italicIcon } from './italic.js';
|
|
3
|
+
import { linkIcon } from './link.js';
|
|
4
|
+
import { strikethroughIcon } from './strikethrough.js';
|
|
5
|
+
import { underlineIcon } from './underline.js';
|
|
6
|
+
export const dynamicValueIcons = {
|
|
7
|
+
bold: boldIcon,
|
|
8
|
+
italic: italicIcon,
|
|
9
|
+
link: linkIcon,
|
|
10
|
+
strikethrough: strikethroughIcon,
|
|
11
|
+
underline: underlineIcon
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/icons/dynamicValue/index.ts"],"sourcesContent":["import type { DynamicValueIconType, IconDefinition } from './types.js'\r\n\r\nimport { boldIcon } from './bold.js'\r\nimport { italicIcon } from './italic.js'\r\nimport { linkIcon } from './link.js'\r\nimport { strikethroughIcon } from './strikethrough.js'\r\nimport { underlineIcon } from './underline.js'\r\n\r\nexport type { DynamicValueIconType, IconDefinition } from './types.js'\r\n\r\nexport const dynamicValueIcons: Record<DynamicValueIconType, IconDefinition> = {\r\n bold: boldIcon,\r\n italic: italicIcon,\r\n link: linkIcon,\r\n strikethrough: strikethroughIcon,\r\n underline: underlineIcon,\r\n}\r\n"],"names":["boldIcon","italicIcon","linkIcon","strikethroughIcon","underlineIcon","dynamicValueIcons","bold","italic","link","strikethrough","underline"],"mappings":"AAEA,SAASA,QAAQ,QAAQ,YAAW;AACpC,SAASC,UAAU,QAAQ,cAAa;AACxC,SAASC,QAAQ,QAAQ,YAAW;AACpC,SAASC,iBAAiB,QAAQ,qBAAoB;AACtD,SAASC,aAAa,QAAQ,iBAAgB;AAI9C,OAAO,MAAMC,oBAAkE;IAC7EC,MAAMN;IACNO,QAAQN;IACRO,MAAMN;IACNO,eAAeN;IACfO,WAAWN;AACb,EAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/icons/dynamicValue/italic.ts"],"sourcesContent":["import type { IconDefinition } from './types.js'\r\n\r\nexport const italicIcon: IconDefinition = {\r\n mode: 'fill',\r\n path: 'M11.2353 5.718L8.8563 15H6.7113L9.0903 5.718H11.2353ZM12.4963 7.421H8.3233L8.7393 5.718H12.9123L12.4963 7.421ZM9.2203 15H5.0473L5.4633 13.297H9.6363L9.2203 15Z',\r\n}\r\n"],"names":["italicIcon","mode","path"],"mappings":"AAEA,OAAO,MAAMA,aAA6B;IACxCC,MAAM;IACNC,MAAM;AACR,EAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export const linkIcon = {
|
|
2
|
+
mode: 'stroke',
|
|
3
|
+
path: 'M7.99999 13.3333H6.66666C5.78261 13.3333 4.93476 12.9821 4.30964 12.357C3.68452 11.7319 3.33333 10.884 3.33333 9.99999C3.33333 9.11593 3.68452 8.26809 4.30964 7.64297C4.93476 7.01785 5.78261 6.66666 6.66666 6.66666H7.99999M12 6.66666H13.3333C14.2174 6.66666 15.0652 7.01785 15.6904 7.64297C16.3155 8.26809 16.6667 9.11593 16.6667 9.99999C16.6667 10.884 16.3155 11.7319 15.6904 12.357C15.0652 12.9821 14.2174 13.3333 13.3333 13.3333H12M7.33333 9.99999H12.6667'
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
//# sourceMappingURL=link.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/icons/dynamicValue/link.ts"],"sourcesContent":["import type { IconDefinition } from './types.js'\r\n\r\nexport const linkIcon: IconDefinition = {\r\n mode: 'stroke',\r\n path: 'M7.99999 13.3333H6.66666C5.78261 13.3333 4.93476 12.9821 4.30964 12.357C3.68452 11.7319 3.33333 10.884 3.33333 9.99999C3.33333 9.11593 3.68452 8.26809 4.30964 7.64297C4.93476 7.01785 5.78261 6.66666 6.66666 6.66666H7.99999M12 6.66666H13.3333C14.2174 6.66666 15.0652 7.01785 15.6904 7.64297C16.3155 8.26809 16.6667 9.11593 16.6667 9.99999C16.6667 10.884 16.3155 11.7319 15.6904 12.357C15.0652 12.9821 14.2174 13.3333 13.3333 13.3333H12M7.33333 9.99999H12.6667',\r\n}\r\n"],"names":["linkIcon","mode","path"],"mappings":"AAEA,OAAO,MAAMA,WAA2B;IACtCC,MAAM;IACNC,MAAM;AACR,EAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export const strikethroughIcon = {
|
|
2
|
+
mode: 'fill',
|
|
3
|
+
path: 'M10.0247 12.049C8.38672 11.516 7.75072 11.165 7.75072 10.476C7.75072 9.91799 8.20572 9.48899 9.28472 9.48899C10.3377 9.48899 11.0697 9.89199 11.9277 10.398L13.1887 8.99499C12.4607 8.47499 11.5507 7.99399 10.4287 7.83799L10.7407 6.62999H9.15472L8.82572 7.88999C7.22672 8.17599 5.89172 9.17699 5.89172 10.788C5.89172 12.452 7.25672 13.128 8.64072 13.557C10.2727 14.062 10.9857 14.347 10.9857 15.113C10.9857 15.763 10.4547 16.127 9.41472 16.127C8.35472 16.127 7.50272 15.737 6.61872 15.074L5.33272 16.503C6.08272 17.127 7.16172 17.647 8.40672 17.828L8.06772 19.14H9.65072L9.98672 17.854C11.5987 17.568 12.8707 16.581 12.8707 14.931C12.8707 13.206 11.4017 12.504 10.0247 12.049ZM5.19531 11.698H13.5543V13.076H5.19531V11.698Z'
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
//# sourceMappingURL=strikethrough.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/icons/dynamicValue/strikethrough.ts"],"sourcesContent":["import type { IconDefinition } from './types.js'\r\n\r\nexport const strikethroughIcon: IconDefinition = {\r\n mode: 'fill',\r\n path: 'M10.0247 12.049C8.38672 11.516 7.75072 11.165 7.75072 10.476C7.75072 9.91799 8.20572 9.48899 9.28472 9.48899C10.3377 9.48899 11.0697 9.89199 11.9277 10.398L13.1887 8.99499C12.4607 8.47499 11.5507 7.99399 10.4287 7.83799L10.7407 6.62999H9.15472L8.82572 7.88999C7.22672 8.17599 5.89172 9.17699 5.89172 10.788C5.89172 12.452 7.25672 13.128 8.64072 13.557C10.2727 14.062 10.9857 14.347 10.9857 15.113C10.9857 15.763 10.4547 16.127 9.41472 16.127C8.35472 16.127 7.50272 15.737 6.61872 15.074L5.33272 16.503C6.08272 17.127 7.16172 17.647 8.40672 17.828L8.06772 19.14H9.65072L9.98672 17.854C11.5987 17.568 12.8707 16.581 12.8707 14.931C12.8707 13.206 11.4017 12.504 10.0247 12.049ZM5.19531 11.698H13.5543V13.076H5.19531V11.698Z',\r\n}\r\n"],"names":["strikethroughIcon","mode","path"],"mappings":"AAEA,OAAO,MAAMA,oBAAoC;IAC/CC,MAAM;IACNC,MAAM;AACR,EAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/icons/dynamicValue/types.ts"],"sourcesContent":["export type DynamicValueIconType = 'bold' | 'italic' | 'link' | 'strikethrough' | 'underline'\r\n\r\nexport type IconDefinition = {\r\n mode: 'fill' | 'stroke'\r\n path: string\r\n}\r\n"],"names":[],"mappings":"AAEA,WAGC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export const underlineIcon = {
|
|
2
|
+
mode: 'fill',
|
|
3
|
+
path: 'M13.1577 5.718V11.945C13.1577 14.168 11.7277 15.182 9.89466 15.182C8.02266 15.182 6.59266 14.168 6.59266 11.945V5.718H8.78966V11.711C8.78966 12.751 9.21866 13.245 9.88166 13.245C10.5317 13.245 10.9607 12.751 10.9607 11.711V5.718H13.1577ZM6.26758 16.157H13.4956V17.704H6.26758V16.157Z'
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
//# sourceMappingURL=underline.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/icons/dynamicValue/underline.ts"],"sourcesContent":["import type { IconDefinition } from './types.js'\r\n\r\nexport const underlineIcon: IconDefinition = {\r\n mode: 'fill',\r\n path: 'M13.1577 5.718V11.945C13.1577 14.168 11.7277 15.182 9.89466 15.182C8.02266 15.182 6.59266 14.168 6.59266 11.945V5.718H8.78966V11.711C8.78966 12.751 9.21866 13.245 9.88166 13.245C10.5317 13.245 10.9607 12.751 10.9607 11.711V5.718H13.1577ZM6.26758 16.157H13.4956V17.704H6.26758V16.157Z',\r\n}\r\n"],"names":["underlineIcon","mode","path"],"mappings":"AAEA,OAAO,MAAMA,gBAAgC;IAC3CC,MAAM;IACNC,MAAM;AACR,EAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { DynamicValueFeature } from './features/DynamicValue/feature.server.js';
|
|
2
|
-
export { DynamicValueRichText } from './exports/react.js';
|
|
3
|
-
export { DynamicValueFeature } from './features/DynamicValue/feature.server.js';
|
|
4
|
-
export { DynamicValueNode } from './nodes/DynamicValueNode/index.js';
|
|
5
|
-
type PluginOptions = Parameters<typeof DynamicValueFeature>[0];
|
|
6
|
-
export declare const dynamicValuePlugin: (pluginOptions: PluginOptions) => (config: any) => any;
|
|
1
|
+
import { DynamicValueFeature } from './features/DynamicValue/feature.server.js';
|
|
2
|
+
export { DynamicValueRichText } from './exports/react.js';
|
|
3
|
+
export { DynamicValueFeature } from './features/DynamicValue/feature.server.js';
|
|
4
|
+
export { DynamicValueNode } from './nodes/DynamicValueNode/index.js';
|
|
5
|
+
type PluginOptions = Parameters<typeof DynamicValueFeature>[0];
|
|
6
|
+
export declare const dynamicValuePlugin: (pluginOptions: PluginOptions) => (config: any) => any;
|
|
@@ -1,38 +1,26 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import {
|
|
3
|
-
import React from 'react';
|
|
1
|
+
import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread } from '@payloadcms/richtext-lexical/lexical';
|
|
2
|
+
import { TextNode } from '@payloadcms/richtext-lexical/lexical';
|
|
4
3
|
export declare const DYNAMIC_VALUE_NODE_TYPE = "dynamic-value";
|
|
5
4
|
export declare const LEGACY_DYNAMIC_VALUE_NODE_TYPE = "dynamicValue";
|
|
6
|
-
export type SerializedDynamicValueNode = {
|
|
5
|
+
export type SerializedDynamicValueNode = Spread<{
|
|
7
6
|
field: string;
|
|
8
|
-
label
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
label?: string;
|
|
8
|
+
type: typeof DYNAMIC_VALUE_NODE_TYPE;
|
|
9
|
+
version: 1;
|
|
10
|
+
}, SerializedTextNode>;
|
|
11
|
+
export declare class DynamicValueNode extends TextNode {
|
|
11
12
|
__field: string;
|
|
12
|
-
|
|
13
|
-
constructor(field: string, label?: string, key?: string);
|
|
13
|
+
constructor(field: string, text: string, key?: NodeKey);
|
|
14
14
|
static clone(node: DynamicValueNode): DynamicValueNode;
|
|
15
15
|
static getType(): string;
|
|
16
|
-
static importDOM():
|
|
17
|
-
span: (domNode: HTMLSpanElement) => {
|
|
18
|
-
conversion: (el: HTMLSpanElement) => {
|
|
19
|
-
node: DynamicValueNode | null;
|
|
20
|
-
};
|
|
21
|
-
priority: 1;
|
|
22
|
-
} | null;
|
|
23
|
-
};
|
|
16
|
+
static importDOM(): DOMConversionMap | null;
|
|
24
17
|
static importJSON(serializedNode: SerializedDynamicValueNode): DynamicValueNode;
|
|
25
|
-
createDOM(): HTMLElement;
|
|
26
|
-
|
|
27
|
-
exportDOM(): {
|
|
28
|
-
element: HTMLSpanElement;
|
|
29
|
-
};
|
|
18
|
+
createDOM(config: EditorConfig): HTMLElement;
|
|
19
|
+
exportDOM(): DOMExportOutput;
|
|
30
20
|
exportJSON(): SerializedDynamicValueNode;
|
|
31
21
|
getField(): string;
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
isToken(): boolean;
|
|
35
|
-
updateDOM(): boolean;
|
|
22
|
+
isTextEntity(): true;
|
|
23
|
+
updateDOM(prevNode: DynamicValueNode, dom: HTMLElement, config: EditorConfig): boolean;
|
|
36
24
|
}
|
|
37
|
-
export declare function $createDynamicValueNode(field: string,
|
|
38
|
-
export declare function $isDynamicValueNode(node:
|
|
25
|
+
export declare function $createDynamicValueNode(field: string, text?: string): DynamicValueNode;
|
|
26
|
+
export declare function $isDynamicValueNode(node: LexicalNode | null | undefined): node is DynamicValueNode;
|
|
@@ -1,18 +1,121 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import React from 'react';
|
|
1
|
+
import { $applyNodeReplacement, TextNode } from '@payloadcms/richtext-lexical/lexical';
|
|
2
|
+
import { dynamicValueIcons } from '../../icons/dynamicValue/index.js';
|
|
4
3
|
export const DYNAMIC_VALUE_NODE_TYPE = 'dynamic-value';
|
|
5
4
|
export const LEGACY_DYNAMIC_VALUE_NODE_TYPE = 'dynamicValue';
|
|
6
|
-
|
|
5
|
+
const getAppliedIconTypes = (node)=>{
|
|
6
|
+
const iconTypes = [];
|
|
7
|
+
const parent = node.getParent();
|
|
8
|
+
if (parent?.getType() === 'link') {
|
|
9
|
+
iconTypes.push('link');
|
|
10
|
+
}
|
|
11
|
+
if (node.hasFormat('bold')) {
|
|
12
|
+
iconTypes.push('bold');
|
|
13
|
+
}
|
|
14
|
+
if (node.hasFormat('italic')) {
|
|
15
|
+
iconTypes.push('italic');
|
|
16
|
+
}
|
|
17
|
+
if (node.hasFormat('underline')) {
|
|
18
|
+
iconTypes.push('underline');
|
|
19
|
+
}
|
|
20
|
+
if (node.hasFormat('strikethrough')) {
|
|
21
|
+
iconTypes.push('strikethrough');
|
|
22
|
+
}
|
|
23
|
+
return iconTypes;
|
|
24
|
+
};
|
|
25
|
+
const buildIconsDataURI = (iconTypes)=>{
|
|
26
|
+
if (!iconTypes.length) {
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
const fillColor = '#b7c4ff';
|
|
30
|
+
const strokeColor = '#b7c4ff';
|
|
31
|
+
const iconGap = 2;
|
|
32
|
+
const iconSize = 14;
|
|
33
|
+
const totalWidth = iconTypes.length * iconSize + (iconTypes.length - 1) * iconGap;
|
|
34
|
+
const paths = iconTypes.map((iconType, index)=>{
|
|
35
|
+
const icon = dynamicValueIcons[iconType];
|
|
36
|
+
const x = index * (iconSize + iconGap);
|
|
37
|
+
if (icon.mode === 'stroke') {
|
|
38
|
+
return `<g transform='translate(${x} 0)'><path d='${icon.path}' fill='none' stroke='${strokeColor}' stroke-linecap='square'/></g>`;
|
|
39
|
+
}
|
|
40
|
+
return `<g transform='translate(${x} 0)'><path d='${icon.path}' fill='${fillColor}'/></g>`;
|
|
41
|
+
}).join('');
|
|
42
|
+
const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${totalWidth}' height='14' viewBox='0 0 ${totalWidth} 20'>${paths}</svg>`;
|
|
43
|
+
return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
|
|
44
|
+
};
|
|
45
|
+
const selectElementText = (dom)=>{
|
|
46
|
+
const selection = window.getSelection();
|
|
47
|
+
if (!selection) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
const range = document.createRange();
|
|
51
|
+
range.selectNodeContents(dom);
|
|
52
|
+
selection.removeAllRanges();
|
|
53
|
+
selection.addRange(range);
|
|
54
|
+
};
|
|
55
|
+
let hasRegisteredSelectionStyle = false;
|
|
56
|
+
const ensureInvisibleSelectionStyle = ()=>{
|
|
57
|
+
if (hasRegisteredSelectionStyle || typeof document === 'undefined') {
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
const styleElement = document.createElement('style');
|
|
61
|
+
styleElement.textContent = `
|
|
62
|
+
.payload-dynamic-value-node::selection {
|
|
63
|
+
background: transparent;
|
|
64
|
+
color: inherit;
|
|
65
|
+
-webkit-text-fill-color: inherit;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.payload-dynamic-value-node::-moz-selection {
|
|
69
|
+
background: transparent;
|
|
70
|
+
color: inherit;
|
|
71
|
+
-webkit-text-fill-color: inherit;
|
|
72
|
+
}
|
|
73
|
+
`;
|
|
74
|
+
document.head.append(styleElement);
|
|
75
|
+
hasRegisteredSelectionStyle = true;
|
|
76
|
+
};
|
|
77
|
+
const applyDynamicValueStyles = (node, dom)=>{
|
|
78
|
+
ensureInvisibleSelectionStyle();
|
|
79
|
+
const iconTypes = getAppliedIconTypes(node);
|
|
80
|
+
const iconDataURI = buildIconsDataURI(iconTypes);
|
|
81
|
+
const iconBlockWidth = iconTypes.length ? iconTypes.length * 16 : 0;
|
|
82
|
+
dom.classList.add('payload-dynamic-value-node');
|
|
83
|
+
dom.setAttribute('data-payload-dynamic-value', 'true');
|
|
84
|
+
dom.setAttribute('data-payload-dynamic-field', node.__field);
|
|
85
|
+
dom.setAttribute('data-payload-dynamic-icons', iconTypes.join(','));
|
|
86
|
+
dom.style.alignItems = 'center';
|
|
87
|
+
dom.style.backgroundColor = 'var(--theme-elevation-150)';
|
|
88
|
+
dom.style.backgroundImage = iconDataURI || 'none';
|
|
89
|
+
dom.style.backgroundPosition = '6px center';
|
|
90
|
+
dom.style.backgroundRepeat = 'no-repeat';
|
|
91
|
+
dom.style.backgroundSize = iconTypes.length ? `${iconBlockWidth - 2}px 14px` : '0 0';
|
|
92
|
+
dom.style.border = '1px solid var(--theme-elevation-300)';
|
|
93
|
+
dom.style.borderRadius = '4px';
|
|
94
|
+
dom.style.boxShadow = '0 1px 2px rgba(0,0,0,0.05)';
|
|
95
|
+
dom.style.color = 'var(--theme-text)';
|
|
96
|
+
dom.style.cursor = 'pointer';
|
|
97
|
+
dom.style.display = 'inline-flex';
|
|
98
|
+
dom.style.fontFamily = 'var(--font-mono, monospace)';
|
|
99
|
+
dom.style.fontSize = '0.85em';
|
|
100
|
+
dom.style.margin = '0 2px';
|
|
101
|
+
dom.style.minHeight = '1.6em';
|
|
102
|
+
dom.style.padding = iconTypes.length ? `1px 6px 1px ${iconBlockWidth + 12}px` : '1px 6px';
|
|
103
|
+
dom.style.userSelect = 'all';
|
|
104
|
+
dom.style.verticalAlign = 'middle';
|
|
105
|
+
dom.style.webkitTextFillColor = 'var(--theme-text)';
|
|
106
|
+
dom.onmousedown = (event)=>{
|
|
107
|
+
event.preventDefault();
|
|
108
|
+
selectElementText(dom);
|
|
109
|
+
};
|
|
110
|
+
};
|
|
111
|
+
export class DynamicValueNode extends TextNode {
|
|
7
112
|
__field;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
super(key);
|
|
113
|
+
constructor(field, text, key){
|
|
114
|
+
super(text, key);
|
|
11
115
|
this.__field = field;
|
|
12
|
-
this.__label = label ?? field;
|
|
13
116
|
}
|
|
14
117
|
static clone(node) {
|
|
15
|
-
return new DynamicValueNode(node.__field, node.
|
|
118
|
+
return new DynamicValueNode(node.__field, node.__text, node.__key);
|
|
16
119
|
}
|
|
17
120
|
static getType() {
|
|
18
121
|
return DYNAMIC_VALUE_NODE_TYPE;
|
|
@@ -20,103 +123,75 @@ export class DynamicValueNode extends DecoratorNode {
|
|
|
20
123
|
static importDOM() {
|
|
21
124
|
return {
|
|
22
125
|
span: (domNode)=>{
|
|
23
|
-
if (
|
|
24
|
-
return
|
|
126
|
+
if (domNode instanceof HTMLSpanElement && domNode.hasAttribute('data-payload-dynamic-value')) {
|
|
127
|
+
return {
|
|
128
|
+
conversion: convertDynamicValueElement,
|
|
129
|
+
priority: 2
|
|
130
|
+
};
|
|
25
131
|
}
|
|
26
|
-
return
|
|
27
|
-
conversion: (el)=>{
|
|
28
|
-
const field = el.getAttribute('data-payload-dynamic-field');
|
|
29
|
-
const label = el.textContent || undefined;
|
|
30
|
-
return {
|
|
31
|
-
node: field ? $createDynamicValueNode(field, label) : null
|
|
32
|
-
};
|
|
33
|
-
},
|
|
34
|
-
priority: 1
|
|
35
|
-
};
|
|
132
|
+
return null;
|
|
36
133
|
}
|
|
37
134
|
};
|
|
38
135
|
}
|
|
39
136
|
static importJSON(serializedNode) {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
style: {
|
|
52
|
-
alignItems: 'center',
|
|
53
|
-
backgroundColor: 'var(--theme-elevation-150)',
|
|
54
|
-
border: '1px solid var(--theme-elevation-300)',
|
|
55
|
-
borderRadius: '4px',
|
|
56
|
-
boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
|
|
57
|
-
color: 'var(--theme-text)',
|
|
58
|
-
cursor: 'default',
|
|
59
|
-
display: 'inline-flex',
|
|
60
|
-
fontFamily: 'var(--font-mono, monospace)',
|
|
61
|
-
fontSize: '0.85em',
|
|
62
|
-
fontWeight: 600,
|
|
63
|
-
margin: '0 2px',
|
|
64
|
-
padding: '1px 6px',
|
|
65
|
-
userSelect: 'none',
|
|
66
|
-
verticalAlign: 'middle'
|
|
67
|
-
},
|
|
68
|
-
children: [
|
|
69
|
-
/*#__PURE__*/ _jsx("span", {
|
|
70
|
-
style: {
|
|
71
|
-
color: 'var(--theme-primary)',
|
|
72
|
-
fontSize: '0.8em',
|
|
73
|
-
marginRight: '4px',
|
|
74
|
-
opacity: 0.4
|
|
75
|
-
},
|
|
76
|
-
children: "VAR"
|
|
77
|
-
}),
|
|
78
|
-
this.__label
|
|
79
|
-
]
|
|
80
|
-
});
|
|
137
|
+
const node = $createDynamicValueNode(serializedNode.field, serializedNode.label || serializedNode.text);
|
|
138
|
+
node.setFormat(serializedNode.format);
|
|
139
|
+
node.setStyle(serializedNode.style);
|
|
140
|
+
node.setMode(serializedNode.mode);
|
|
141
|
+
node.setDetail(serializedNode.detail);
|
|
142
|
+
return node;
|
|
143
|
+
}
|
|
144
|
+
createDOM(config) {
|
|
145
|
+
const dom = super.createDOM(config);
|
|
146
|
+
applyDynamicValueStyles(this, dom);
|
|
147
|
+
return dom;
|
|
81
148
|
}
|
|
82
149
|
exportDOM() {
|
|
83
150
|
const element = document.createElement('span');
|
|
84
151
|
element.setAttribute('data-payload-dynamic-value', 'true');
|
|
85
152
|
element.setAttribute('data-payload-dynamic-field', this.__field);
|
|
86
|
-
element.textContent = this.
|
|
153
|
+
element.textContent = this.getTextContent();
|
|
87
154
|
return {
|
|
88
155
|
element
|
|
89
156
|
};
|
|
90
157
|
}
|
|
91
158
|
exportJSON() {
|
|
92
159
|
return {
|
|
160
|
+
...super.exportJSON(),
|
|
93
161
|
type: DYNAMIC_VALUE_NODE_TYPE,
|
|
94
162
|
field: this.__field,
|
|
95
|
-
label: this.
|
|
163
|
+
label: this.getTextContent(),
|
|
96
164
|
version: 1
|
|
97
165
|
};
|
|
98
166
|
}
|
|
99
167
|
getField() {
|
|
100
168
|
return this.__field;
|
|
101
169
|
}
|
|
102
|
-
|
|
103
|
-
return this.__label;
|
|
104
|
-
}
|
|
105
|
-
isInline() {
|
|
106
|
-
return true;
|
|
107
|
-
}
|
|
108
|
-
isToken() {
|
|
170
|
+
isTextEntity() {
|
|
109
171
|
return true;
|
|
110
172
|
}
|
|
111
|
-
updateDOM() {
|
|
112
|
-
|
|
173
|
+
updateDOM(prevNode, dom, config) {
|
|
174
|
+
const didUpdate = super.updateDOM(prevNode, dom, config);
|
|
175
|
+
if (prevNode.__field !== this.__field || prevNode.getFormat() !== this.getFormat()) {
|
|
176
|
+
applyDynamicValueStyles(this, dom);
|
|
177
|
+
}
|
|
178
|
+
return didUpdate;
|
|
113
179
|
}
|
|
114
180
|
}
|
|
115
|
-
|
|
116
|
-
|
|
181
|
+
function convertDynamicValueElement(domNode) {
|
|
182
|
+
const span = domNode;
|
|
183
|
+
const field = span.getAttribute('data-payload-dynamic-field') || span.textContent || '';
|
|
184
|
+
return {
|
|
185
|
+
node: $createDynamicValueNode(field, span.textContent || field)
|
|
186
|
+
};
|
|
187
|
+
}
|
|
188
|
+
export function $createDynamicValueNode(field, text) {
|
|
189
|
+
const node = new DynamicValueNode(field, text || field);
|
|
190
|
+
node.setMode('token');
|
|
191
|
+
return $applyNodeReplacement(node);
|
|
117
192
|
}
|
|
118
193
|
export function $isDynamicValueNode(node) {
|
|
119
|
-
return
|
|
194
|
+
return node?.getType() === DYNAMIC_VALUE_NODE_TYPE;
|
|
120
195
|
}
|
|
121
196
|
|
|
122
197
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/nodes/DynamicValueNode/index.tsx"],"sourcesContent":["import type { SerializedLexicalNode } from '@payloadcms/richtext-lexical/lexical'\r\n\r\nimport { $applyNodeReplacement, DecoratorNode } from '@payloadcms/richtext-lexical/lexical'\r\nimport React from 'react'\r\n\r\nexport const DYNAMIC_VALUE_NODE_TYPE = 'dynamic-value'\r\nexport const LEGACY_DYNAMIC_VALUE_NODE_TYPE = 'dynamicValue'\r\n\r\nexport type SerializedDynamicValueNode = {\r\n field: string\r\n label: string\r\n} & SerializedLexicalNode\r\n\r\nexport class DynamicValueNode extends DecoratorNode<React.ReactNode> {\r\n __field: string\r\n __label: string\r\n\r\n constructor(field: string, label?: string, key?: string) {\r\n super(key)\r\n this.__field = field\r\n this.__label = label ?? field\r\n }\r\n\r\n static clone(node: DynamicValueNode): DynamicValueNode {\r\n return new DynamicValueNode(node.__field, node.__label, node.getKey())\r\n }\r\n\r\n static getType(): string {\r\n return DYNAMIC_VALUE_NODE_TYPE\r\n }\r\n\r\n static importDOM() {\r\n return {\r\n span: (domNode: HTMLSpanElement) => {\r\n if (!domNode.hasAttribute('data-payload-dynamic-value')) {\r\n return null\r\n }\r\n\r\n return {\r\n conversion: (el: HTMLSpanElement) => {\r\n const field = el.getAttribute('data-payload-dynamic-field')\r\n const label = el.textContent || undefined\r\n\r\n return {\r\n node: field ? $createDynamicValueNode(field, label) : null,\r\n }\r\n },\r\n priority: 1 as const,\r\n }\r\n },\r\n }\r\n }\r\n\r\n static importJSON(serializedNode: SerializedDynamicValueNode): DynamicValueNode {\r\n return $createDynamicValueNode(serializedNode.field, serializedNode.label)\r\n }\r\n\r\n createDOM(): HTMLElement {\r\n const span = document.createElement('span')\r\n span.style.display = 'inline-block'\r\n span.className = 'payload-dynamic-value-node'\r\n return span\r\n }\r\n\r\n decorate(): React.ReactNode {\r\n return (\r\n <span\r\n contentEditable={false}\r\n style={{\r\n alignItems: 'center',\r\n backgroundColor: 'var(--theme-elevation-150)',\r\n border: '1px solid var(--theme-elevation-300)',\r\n borderRadius: '4px',\r\n boxShadow: '0 1px 2px rgba(0,0,0,0.05)',\r\n color: 'var(--theme-text)',\r\n cursor: 'default',\r\n display: 'inline-flex',\r\n fontFamily: 'var(--font-mono, monospace)',\r\n fontSize: '0.85em',\r\n fontWeight: 600,\r\n margin: '0 2px',\r\n padding: '1px 6px',\r\n userSelect: 'none',\r\n verticalAlign: 'middle',\r\n }}\r\n >\r\n <span\r\n style={{\r\n color: 'var(--theme-primary)',\r\n fontSize: '0.8em',\r\n marginRight: '4px',\r\n opacity: 0.4,\r\n }}\r\n >\r\n VAR\r\n </span>\r\n {this.__label}\r\n </span>\r\n )\r\n }\r\n\r\n exportDOM() {\r\n const element = document.createElement('span')\r\n element.setAttribute('data-payload-dynamic-value', 'true')\r\n element.setAttribute('data-payload-dynamic-field', this.__field)\r\n element.textContent = this.__label\r\n\r\n return {\r\n element,\r\n }\r\n }\r\n\r\n exportJSON(): SerializedDynamicValueNode {\r\n return {\r\n type: DYNAMIC_VALUE_NODE_TYPE,\r\n field: this.__field,\r\n label: this.__label,\r\n version: 1,\r\n }\r\n }\r\n\r\n getField(): string {\r\n return this.__field\r\n }\r\n\r\n getTextContent(): string {\r\n return this.__label\r\n }\r\n\r\n isInline(): boolean {\r\n return true\r\n }\r\n\r\n isToken(): boolean {\r\n return true\r\n }\r\n\r\n updateDOM(): boolean {\r\n return false\r\n }\r\n}\r\n\r\nexport function $createDynamicValueNode(field: string, label?: string): DynamicValueNode {\r\n return $applyNodeReplacement(new DynamicValueNode(field, label))\r\n}\r\n\r\nexport function $isDynamicValueNode(node: unknown): node is DynamicValueNode {\r\n return (\r\n typeof node === 'object' &&\r\n node !== null &&\r\n 'getType' in node &&\r\n typeof (node as { getType: () => string }).getType === 'function' &&\r\n (node as { getType: () => string }).getType() === DYNAMIC_VALUE_NODE_TYPE\r\n )\r\n}\r\n"],"names":["$applyNodeReplacement","DecoratorNode","React","DYNAMIC_VALUE_NODE_TYPE","LEGACY_DYNAMIC_VALUE_NODE_TYPE","DynamicValueNode","__field","__label","field","label","key","clone","node","getKey","getType","importDOM","span","domNode","hasAttribute","conversion","el","getAttribute","textContent","undefined","$createDynamicValueNode","priority","importJSON","serializedNode","createDOM","document","createElement","style","display","className","decorate","contentEditable","alignItems","backgroundColor","border","borderRadius","boxShadow","color","cursor","fontFamily","fontSize","fontWeight","margin","padding","userSelect","verticalAlign","marginRight","opacity","exportDOM","element","setAttribute","exportJSON","type","version","getField","getTextContent","isInline","isToken","updateDOM","$isDynamicValueNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/nodes/DynamicValueNode/index.tsx"],"sourcesContent":["import type {\r\n DOMConversionMap,\r\n DOMConversionOutput,\r\n DOMExportOutput,\r\n EditorConfig,\r\n LexicalNode,\r\n NodeKey,\r\n SerializedTextNode,\r\n Spread,\r\n} from '@payloadcms/richtext-lexical/lexical'\r\n\r\nimport { $applyNodeReplacement, TextNode } from '@payloadcms/richtext-lexical/lexical'\r\n\r\nimport { dynamicValueIcons, type DynamicValueIconType } from '../../icons/dynamicValue/index.js'\r\n\r\nexport const DYNAMIC_VALUE_NODE_TYPE = 'dynamic-value'\r\nexport const LEGACY_DYNAMIC_VALUE_NODE_TYPE = 'dynamicValue'\r\n\r\nexport type SerializedDynamicValueNode = Spread<\r\n {\r\n field: string\r\n label?: string\r\n type: typeof DYNAMIC_VALUE_NODE_TYPE\r\n version: 1\r\n },\r\n SerializedTextNode\r\n>\r\n\r\nconst getAppliedIconTypes = (node: DynamicValueNode): DynamicValueIconType[] => {\r\n const iconTypes: DynamicValueIconType[] = []\r\n const parent = node.getParent()\r\n\r\n if (parent?.getType() === 'link') {\r\n iconTypes.push('link')\r\n }\r\n\r\n if (node.hasFormat('bold')) {\r\n iconTypes.push('bold')\r\n }\r\n\r\n if (node.hasFormat('italic')) {\r\n iconTypes.push('italic')\r\n }\r\n\r\n if (node.hasFormat('underline')) {\r\n iconTypes.push('underline')\r\n }\r\n\r\n if (node.hasFormat('strikethrough')) {\r\n iconTypes.push('strikethrough')\r\n }\r\n\r\n return iconTypes\r\n}\r\n\r\nconst buildIconsDataURI = (iconTypes: DynamicValueIconType[]): null | string => {\r\n if (!iconTypes.length) {\r\n return null\r\n }\r\n\r\n const fillColor = '#b7c4ff'\r\n const strokeColor = '#b7c4ff'\r\n const iconGap = 2\r\n const iconSize = 14\r\n const totalWidth = iconTypes.length * iconSize + (iconTypes.length - 1) * iconGap\r\n\r\n const paths = iconTypes\r\n .map((iconType, index) => {\r\n const icon = dynamicValueIcons[iconType]\r\n const x = index * (iconSize + iconGap)\r\n\r\n if (icon.mode === 'stroke') {\r\n return `<g transform='translate(${x} 0)'><path d='${icon.path}' fill='none' stroke='${strokeColor}' stroke-linecap='square'/></g>`\r\n }\r\n\r\n return `<g transform='translate(${x} 0)'><path d='${icon.path}' fill='${fillColor}'/></g>`\r\n })\r\n .join('')\r\n\r\n const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${totalWidth}' height='14' viewBox='0 0 ${totalWidth} 20'>${paths}</svg>`\r\n\r\n return `url(\"data:image/svg+xml,${encodeURIComponent(svg)}\")`\r\n}\r\n\r\nconst selectElementText = (dom: HTMLElement): void => {\r\n const selection = window.getSelection()\r\n if (!selection) {\r\n return\r\n }\r\n\r\n const range = document.createRange()\r\n range.selectNodeContents(dom)\r\n selection.removeAllRanges()\r\n selection.addRange(range)\r\n}\r\n\r\n\r\nlet hasRegisteredSelectionStyle = false\r\n\r\nconst ensureInvisibleSelectionStyle = (): void => {\r\n if (hasRegisteredSelectionStyle || typeof document === 'undefined') {\r\n return\r\n }\r\n\r\n const styleElement = document.createElement('style')\r\n styleElement.textContent = `\r\n .payload-dynamic-value-node::selection {\r\n background: transparent;\r\n color: inherit;\r\n -webkit-text-fill-color: inherit;\r\n }\r\n\r\n .payload-dynamic-value-node::-moz-selection {\r\n background: transparent;\r\n color: inherit;\r\n -webkit-text-fill-color: inherit;\r\n }\r\n `\r\n\r\n document.head.append(styleElement)\r\n hasRegisteredSelectionStyle = true\r\n}\r\n\r\nconst applyDynamicValueStyles = (node: DynamicValueNode, dom: HTMLElement): void => {\r\n ensureInvisibleSelectionStyle()\r\n const iconTypes = getAppliedIconTypes(node)\r\n const iconDataURI = buildIconsDataURI(iconTypes)\r\n const iconBlockWidth = iconTypes.length ? iconTypes.length * 16 : 0\r\n\r\n dom.classList.add('payload-dynamic-value-node')\r\n dom.setAttribute('data-payload-dynamic-value', 'true')\r\n dom.setAttribute('data-payload-dynamic-field', node.__field)\r\n dom.setAttribute('data-payload-dynamic-icons', iconTypes.join(','))\r\n\r\n dom.style.alignItems = 'center'\r\n dom.style.backgroundColor = 'var(--theme-elevation-150)'\r\n dom.style.backgroundImage = iconDataURI || 'none'\r\n dom.style.backgroundPosition = '6px center'\r\n dom.style.backgroundRepeat = 'no-repeat'\r\n dom.style.backgroundSize = iconTypes.length ? `${iconBlockWidth - 2}px 14px` : '0 0'\r\n dom.style.border = '1px solid var(--theme-elevation-300)'\r\n dom.style.borderRadius = '4px'\r\n dom.style.boxShadow = '0 1px 2px rgba(0,0,0,0.05)'\r\n dom.style.color = 'var(--theme-text)'\r\n dom.style.cursor = 'pointer'\r\n dom.style.display = 'inline-flex'\r\n dom.style.fontFamily = 'var(--font-mono, monospace)'\r\n dom.style.fontSize = '0.85em'\r\n dom.style.margin = '0 2px'\r\n dom.style.minHeight = '1.6em'\r\n dom.style.padding = iconTypes.length ? `1px 6px 1px ${iconBlockWidth + 12}px` : '1px 6px'\r\n dom.style.userSelect = 'all'\r\n dom.style.verticalAlign = 'middle'\r\n dom.style.webkitTextFillColor = 'var(--theme-text)'\r\n\r\n dom.onmousedown = (event) => {\r\n event.preventDefault()\r\n selectElementText(dom)\r\n }\r\n}\r\n\r\nexport class DynamicValueNode extends TextNode {\r\n __field: string\r\n\r\n constructor(field: string, text: string, key?: NodeKey) {\r\n super(text, key)\r\n this.__field = field\r\n }\r\n\r\n static clone(node: DynamicValueNode): DynamicValueNode {\r\n return new DynamicValueNode(node.__field, node.__text, node.__key)\r\n }\r\n\r\n static getType(): string {\r\n return DYNAMIC_VALUE_NODE_TYPE\r\n }\r\n\r\n static importDOM(): DOMConversionMap | null {\r\n return {\r\n span: (domNode: Node) => {\r\n if (\r\n domNode instanceof HTMLSpanElement &&\r\n domNode.hasAttribute('data-payload-dynamic-value')\r\n ) {\r\n return {\r\n conversion: convertDynamicValueElement,\r\n priority: 2,\r\n }\r\n }\r\n\r\n return null\r\n },\r\n }\r\n }\r\n\r\n static importJSON(serializedNode: SerializedDynamicValueNode): DynamicValueNode {\r\n const node = $createDynamicValueNode(\r\n serializedNode.field,\r\n serializedNode.label || serializedNode.text,\r\n )\r\n\r\n node.setFormat(serializedNode.format)\r\n node.setStyle(serializedNode.style)\r\n node.setMode(serializedNode.mode)\r\n node.setDetail(serializedNode.detail)\r\n\r\n return node\r\n }\r\n\r\n createDOM(config: EditorConfig): HTMLElement {\r\n const dom = super.createDOM(config)\r\n applyDynamicValueStyles(this, dom)\r\n return dom\r\n }\r\n\r\n exportDOM(): DOMExportOutput {\r\n const element = document.createElement('span')\r\n element.setAttribute('data-payload-dynamic-value', 'true')\r\n element.setAttribute('data-payload-dynamic-field', this.__field)\r\n element.textContent = this.getTextContent()\r\n\r\n return {\r\n element,\r\n }\r\n }\r\n\r\n exportJSON(): SerializedDynamicValueNode {\r\n return {\r\n ...super.exportJSON(),\r\n type: DYNAMIC_VALUE_NODE_TYPE,\r\n field: this.__field,\r\n label: this.getTextContent(),\r\n version: 1,\r\n }\r\n }\r\n\r\n getField(): string {\r\n return this.__field\r\n }\r\n\r\n isTextEntity(): true {\r\n return true\r\n }\r\n\r\n updateDOM(prevNode: DynamicValueNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n const didUpdate = (super.updateDOM as (\r\n node: DynamicValueNode,\r\n element: HTMLElement,\r\n editorConfig: EditorConfig,\r\n ) => boolean)(prevNode, dom, config)\r\n\r\n if (prevNode.__field !== this.__field || prevNode.getFormat() !== this.getFormat()) {\r\n applyDynamicValueStyles(this, dom)\r\n }\r\n\r\n return didUpdate\r\n }\r\n}\r\n\r\nfunction convertDynamicValueElement(domNode: Node): DOMConversionOutput {\r\n const span = domNode as HTMLSpanElement\r\n const field = span.getAttribute('data-payload-dynamic-field') || span.textContent || ''\r\n\r\n return {\r\n node: $createDynamicValueNode(field, span.textContent || field),\r\n }\r\n}\r\n\r\nexport function $createDynamicValueNode(field: string, text?: string): DynamicValueNode {\r\n const node = new DynamicValueNode(field, text || field)\r\n node.setMode('token')\r\n return $applyNodeReplacement(node)\r\n}\r\n\r\nexport function $isDynamicValueNode(node: LexicalNode | null | undefined): node is DynamicValueNode {\r\n return node?.getType() === DYNAMIC_VALUE_NODE_TYPE\r\n}\r\n"],"names":["$applyNodeReplacement","TextNode","dynamicValueIcons","DYNAMIC_VALUE_NODE_TYPE","LEGACY_DYNAMIC_VALUE_NODE_TYPE","getAppliedIconTypes","node","iconTypes","parent","getParent","getType","push","hasFormat","buildIconsDataURI","length","fillColor","strokeColor","iconGap","iconSize","totalWidth","paths","map","iconType","index","icon","x","mode","path","join","svg","encodeURIComponent","selectElementText","dom","selection","window","getSelection","range","document","createRange","selectNodeContents","removeAllRanges","addRange","hasRegisteredSelectionStyle","ensureInvisibleSelectionStyle","styleElement","createElement","textContent","head","append","applyDynamicValueStyles","iconDataURI","iconBlockWidth","classList","add","setAttribute","__field","style","alignItems","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","backgroundSize","border","borderRadius","boxShadow","color","cursor","display","fontFamily","fontSize","margin","minHeight","padding","userSelect","verticalAlign","webkitTextFillColor","onmousedown","event","preventDefault","DynamicValueNode","field","text","key","clone","__text","__key","importDOM","span","domNode","HTMLSpanElement","hasAttribute","conversion","convertDynamicValueElement","priority","importJSON","serializedNode","$createDynamicValueNode","label","setFormat","format","setStyle","setMode","setDetail","detail","createDOM","config","exportDOM","element","getTextContent","exportJSON","type","version","getField","isTextEntity","updateDOM","prevNode","didUpdate","getFormat","getAttribute","$isDynamicValueNode"],"mappings":"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"}
|