@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.
Files changed (32) hide show
  1. package/README.md +2 -2
  2. package/dist/exports/jsx.d.ts +0 -4
  3. package/dist/exports/jsx.js +26 -9
  4. package/dist/exports/jsx.js.map +1 -1
  5. package/dist/features/DynamicValue/feature.server.d.ts +16 -16
  6. package/dist/features/DynamicValue/types.d.ts +23 -23
  7. package/dist/icons/dynamicValue/bold.d.ts +2 -0
  8. package/dist/icons/dynamicValue/bold.js +6 -0
  9. package/dist/icons/dynamicValue/bold.js.map +1 -0
  10. package/dist/icons/dynamicValue/index.d.ts +3 -0
  11. package/dist/icons/dynamicValue/index.js +14 -0
  12. package/dist/icons/dynamicValue/index.js.map +1 -0
  13. package/dist/icons/dynamicValue/italic.d.ts +2 -0
  14. package/dist/icons/dynamicValue/italic.js +6 -0
  15. package/dist/icons/dynamicValue/italic.js.map +1 -0
  16. package/dist/icons/dynamicValue/link.d.ts +2 -0
  17. package/dist/icons/dynamicValue/link.js +6 -0
  18. package/dist/icons/dynamicValue/link.js.map +1 -0
  19. package/dist/icons/dynamicValue/strikethrough.d.ts +2 -0
  20. package/dist/icons/dynamicValue/strikethrough.js +6 -0
  21. package/dist/icons/dynamicValue/strikethrough.js.map +1 -0
  22. package/dist/icons/dynamicValue/types.d.ts +5 -0
  23. package/dist/icons/dynamicValue/types.js +3 -0
  24. package/dist/icons/dynamicValue/types.js.map +1 -0
  25. package/dist/icons/dynamicValue/underline.d.ts +2 -0
  26. package/dist/icons/dynamicValue/underline.js +6 -0
  27. package/dist/icons/dynamicValue/underline.js.map +1 -0
  28. package/dist/index.d.ts +6 -6
  29. package/dist/nodes/DynamicValueNode/index.d.ts +16 -28
  30. package/dist/nodes/DynamicValueNode/index.js +151 -76
  31. package/dist/nodes/DynamicValueNode/index.js.map +1 -1
  32. 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
- ;<DynamicValueRichText data={page.content} payloadData={page} />
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
- ;<RichText data={page.content} converters={DynamicValueJSXConverters} />
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:
@@ -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: {
@@ -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
- return /*#__PURE__*/ _jsx("span", {
38
- "data-payload-dynamic-field": dynamicNode.field,
39
- "data-payload-dynamic-value": "true",
40
- children: String(resolvedValue)
41
- }, dynamicNode.field);
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, {
@@ -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\n/**\r\n * JSX converters for dynamic value nodes. Includes both the current node type and\r\n * the legacy type to keep older content working.\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 return (\r\n <span\r\n data-payload-dynamic-field={dynamicNode.field}\r\n data-payload-dynamic-value=\"true\"\r\n key={dynamicNode.field}\r\n >\r\n {String(resolvedValue)}\r\n </span>\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","renderDynamicValueLabel","node","span","data-payload-dynamic-field","field","data-payload-dynamic-value","label","dynamicValueJSXConverter","dynamicNode","DynamicValueJSXConverters","withDynamicValueJSXConverters","converters","createDynamicValueJSXConverters","options","data","fallback","converter","resolvedValue","split","reduce","current","key","undefined","String","Fragment"],"mappings":";AAEA,OAAOA,WAAW,QAAO;AAIzB,SACEC,uBAAuB,EACvBC,8BAA8B,QACzB,qCAAoC;AAE3C,MAAMC,0BAA0B,CAACC;IAC/B,qBACE,KAACC;QACCC,8BAA4BF,KAAKG,KAAK;QACtCC,8BAA2B;kBAG1BJ,KAAKK,KAAK;OAFNL,KAAKG,KAAK;AAKrB;AAEA,MAAMG,2BAA2B,CAAC,EAAEN,IAAI,EAAqB;IAC3D,MAAMO,cAAcP;IACpB,OAAOD,wBAAwBQ;AACjC;AAEA;;;CAGC,GACD,OAAO,MAAMC,4BAA2C;IACtD,CAACX,wBAAwB,EAAES;IAC3B,CAACR,+BAA+B,EAAEQ;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,EAAEf,IAAI,EAAqB;QAC5C,MAAMO,cAAcP;QACpB,MAAMgB,gBAAgBT,YAAYJ,KAAK,CAACc,KAAK,CAAC,KAAKC,MAAM,CAAU,CAACC,SAASC;YAC3E,IAAID,WAAW,OAAOA,YAAY,YAAYC,OAAQD,SAAqC;gBACzF,OAAO,AAACA,OAAmC,CAACC,IAAI;YAClD;YAEA,OAAOC;QACT,GAAGR;QAEH,IAAIG,kBAAkBK,aAAaL,kBAAkB,QAAQA,kBAAkB,IAAI;YACjF,qBACE,KAACf;gBACCC,8BAA4BK,YAAYJ,KAAK;gBAC7CC,8BAA2B;0BAG1BkB,OAAON;eAFHT,YAAYJ,KAAK;QAK5B;QAEA,IAAIW,UAAU;YACZ,qBAAO,KAAClB,MAAM2B,QAAQ;0BAA0BT,SAASP;eAA7BA,YAAYJ,KAAK;QAC/C;QAEA,OAAOJ,wBAAwBQ;IACjC;IAEA,OAAO;QACL,CAACV,wBAAwB,EAAEkB;QAC3B,CAACjB,+BAA+B,EAAEiB;IACpC;AACF"}
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,2 @@
1
+ import type { IconDefinition } from './types.js';
2
+ export declare const boldIcon: IconDefinition;
@@ -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,3 @@
1
+ import type { DynamicValueIconType, IconDefinition } from './types.js';
2
+ export type { DynamicValueIconType, IconDefinition } from './types.js';
3
+ export declare const dynamicValueIcons: Record<DynamicValueIconType, IconDefinition>;
@@ -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,2 @@
1
+ import type { IconDefinition } from './types.js';
2
+ export declare const italicIcon: IconDefinition;
@@ -0,0 +1,6 @@
1
+ export const italicIcon = {
2
+ mode: 'fill',
3
+ 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'
4
+ };
5
+
6
+ //# sourceMappingURL=italic.js.map
@@ -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,2 @@
1
+ import type { IconDefinition } from './types.js';
2
+ export declare const linkIcon: IconDefinition;
@@ -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,2 @@
1
+ import type { IconDefinition } from './types.js';
2
+ export declare const strikethroughIcon: IconDefinition;
@@ -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,5 @@
1
+ export type DynamicValueIconType = 'bold' | 'italic' | 'link' | 'strikethrough' | 'underline';
2
+ export type IconDefinition = {
3
+ mode: 'fill' | 'stroke';
4
+ path: string;
5
+ };
@@ -0,0 +1,3 @@
1
+ export { };
2
+
3
+ //# sourceMappingURL=types.js.map
@@ -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,2 @@
1
+ import type { IconDefinition } from './types.js';
2
+ export declare const underlineIcon: IconDefinition;
@@ -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 { SerializedLexicalNode } from '@payloadcms/richtext-lexical/lexical';
2
- import { DecoratorNode } from '@payloadcms/richtext-lexical/lexical';
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: string;
9
- } & SerializedLexicalNode;
10
- export declare class DynamicValueNode extends DecoratorNode<React.ReactNode> {
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
- __label: string;
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
- decorate(): React.ReactNode;
27
- exportDOM(): {
28
- element: HTMLSpanElement;
29
- };
18
+ createDOM(config: EditorConfig): HTMLElement;
19
+ exportDOM(): DOMExportOutput;
30
20
  exportJSON(): SerializedDynamicValueNode;
31
21
  getField(): string;
32
- getTextContent(): string;
33
- isInline(): boolean;
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, label?: string): DynamicValueNode;
38
- export declare function $isDynamicValueNode(node: unknown): node is DynamicValueNode;
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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { $applyNodeReplacement, DecoratorNode } from '@payloadcms/richtext-lexical/lexical';
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
- export class DynamicValueNode extends DecoratorNode {
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
- __label;
9
- constructor(field, label, key){
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.__label, node.getKey());
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 (!domNode.hasAttribute('data-payload-dynamic-value')) {
24
- return null;
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
- return $createDynamicValueNode(serializedNode.field, serializedNode.label);
41
- }
42
- createDOM() {
43
- const span = document.createElement('span');
44
- span.style.display = 'inline-block';
45
- span.className = 'payload-dynamic-value-node';
46
- return span;
47
- }
48
- decorate() {
49
- return /*#__PURE__*/ _jsxs("span", {
50
- contentEditable: false,
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.__label;
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.__label,
163
+ label: this.getTextContent(),
96
164
  version: 1
97
165
  };
98
166
  }
99
167
  getField() {
100
168
  return this.__field;
101
169
  }
102
- getTextContent() {
103
- return this.__label;
104
- }
105
- isInline() {
106
- return true;
107
- }
108
- isToken() {
170
+ isTextEntity() {
109
171
  return true;
110
172
  }
111
- updateDOM() {
112
- return false;
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
- export function $createDynamicValueNode(field, label) {
116
- return $applyNodeReplacement(new DynamicValueNode(field, label));
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 typeof node === 'object' && node !== null && 'getType' in node && typeof node.getType === 'function' && node.getType() === DYNAMIC_VALUE_NODE_TYPE;
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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@od-labs/payloadcms-dynamic-value-richtext",
3
- "version": "1.0.3",
3
+ "version": "1.1.0",
4
4
  "description": "Dynamic Value Rich Text Plugin for PayloadCMS",
5
5
  "license": "MIT",
6
6
  "author": "OD LABS",