@od-labs/payloadcms-dynamic-value-richtext 1.0.2 → 1.1.0

package/dist/nodes/DynamicValueNode/index.js

@@ -1,125 +1,197 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DecoratorNode } from '@payloadcms/richtext-lexical/lexical';
-import React from 'react';
-export class DynamicValueNode extends DecoratorNode {
+import { $applyNodeReplacement, TextNode } from '@payloadcms/richtext-lexical/lexical';
+import { dynamicValueIcons } from '../../icons/dynamicValue/index.js';
+export const DYNAMIC_VALUE_NODE_TYPE = 'dynamic-value';
+export const LEGACY_DYNAMIC_VALUE_NODE_TYPE = 'dynamicValue';
+const getAppliedIconTypes = (node)=>{
+    const iconTypes = [];
+    const parent = node.getParent();
+    if (parent?.getType() === 'link') {
+        iconTypes.push('link');
+    }
+    if (node.hasFormat('bold')) {
+        iconTypes.push('bold');
+    }
+    if (node.hasFormat('italic')) {
+        iconTypes.push('italic');
+    }
+    if (node.hasFormat('underline')) {
+        iconTypes.push('underline');
+    }
+    if (node.hasFormat('strikethrough')) {
+        iconTypes.push('strikethrough');
+    }
+    return iconTypes;
+};
+const buildIconsDataURI = (iconTypes)=>{
+    if (!iconTypes.length) {
+        return null;
+    }
+    const fillColor = '#b7c4ff';
+    const strokeColor = '#b7c4ff';
+    const iconGap = 2;
+    const iconSize = 14;
+    const totalWidth = iconTypes.length * iconSize + (iconTypes.length - 1) * iconGap;
+    const paths = iconTypes.map((iconType, index)=>{
+        const icon = dynamicValueIcons[iconType];
+        const x = index * (iconSize + iconGap);
+        if (icon.mode === 'stroke') {
+            return `<g transform='translate(${x} 0)'><path d='${icon.path}' fill='none' stroke='${strokeColor}' stroke-linecap='square'/></g>`;
+        }
+        return `<g transform='translate(${x} 0)'><path d='${icon.path}' fill='${fillColor}'/></g>`;
+    }).join('');
+    const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${totalWidth}' height='14' viewBox='0 0 ${totalWidth} 20'>${paths}</svg>`;
+    return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+};
+const selectElementText = (dom)=>{
+    const selection = window.getSelection();
+    if (!selection) {
+        return;
+    }
+    const range = document.createRange();
+    range.selectNodeContents(dom);
+    selection.removeAllRanges();
+    selection.addRange(range);
+};
+let hasRegisteredSelectionStyle = false;
+const ensureInvisibleSelectionStyle = ()=>{
+    if (hasRegisteredSelectionStyle || typeof document === 'undefined') {
+        return;
+    }
+    const styleElement = document.createElement('style');
+    styleElement.textContent = `
+    .payload-dynamic-value-node::selection {
+      background: transparent;
+      color: inherit;
+      -webkit-text-fill-color: inherit;
+    }
+
+    .payload-dynamic-value-node::-moz-selection {
+      background: transparent;
+      color: inherit;
+      -webkit-text-fill-color: inherit;
+    }
+  `;
+    document.head.append(styleElement);
+    hasRegisteredSelectionStyle = true;
+};
+const applyDynamicValueStyles = (node, dom)=>{
+    ensureInvisibleSelectionStyle();
+    const iconTypes = getAppliedIconTypes(node);
+    const iconDataURI = buildIconsDataURI(iconTypes);
+    const iconBlockWidth = iconTypes.length ? iconTypes.length * 16 : 0;
+    dom.classList.add('payload-dynamic-value-node');
+    dom.setAttribute('data-payload-dynamic-value', 'true');
+    dom.setAttribute('data-payload-dynamic-field', node.__field);
+    dom.setAttribute('data-payload-dynamic-icons', iconTypes.join(','));
+    dom.style.alignItems = 'center';
+    dom.style.backgroundColor = 'var(--theme-elevation-150)';
+    dom.style.backgroundImage = iconDataURI || 'none';
+    dom.style.backgroundPosition = '6px center';
+    dom.style.backgroundRepeat = 'no-repeat';
+    dom.style.backgroundSize = iconTypes.length ? `${iconBlockWidth - 2}px 14px` : '0 0';
+    dom.style.border = '1px solid var(--theme-elevation-300)';
+    dom.style.borderRadius = '4px';
+    dom.style.boxShadow = '0 1px 2px rgba(0,0,0,0.05)';
+    dom.style.color = 'var(--theme-text)';
+    dom.style.cursor = 'pointer';
+    dom.style.display = 'inline-flex';
+    dom.style.fontFamily = 'var(--font-mono, monospace)';
+    dom.style.fontSize = '0.85em';
+    dom.style.margin = '0 2px';
+    dom.style.minHeight = '1.6em';
+    dom.style.padding = iconTypes.length ? `1px 6px 1px ${iconBlockWidth + 12}px` : '1px 6px';
+    dom.style.userSelect = 'all';
+    dom.style.verticalAlign = 'middle';
+    dom.style.webkitTextFillColor = 'var(--theme-text)';
+    dom.onmousedown = (event)=>{
+        event.preventDefault();
+        selectElementText(dom);
+    };
+};
+export class DynamicValueNode extends TextNode {
     __field;
-    __label;
-    constructor(field, label, key){
-        super(key);
+    constructor(field, text, key){
+        super(text, key);
         this.__field = field;
-        this.__label = label ?? field;
     }
     static clone(node) {
-        return new DynamicValueNode(node.__field, node.__label, node.getKey());
+        return new DynamicValueNode(node.__field, node.__text, node.__key);
     }
     static getType() {
-        return 'dynamic-value';
+        return DYNAMIC_VALUE_NODE_TYPE;
     }
     static importDOM() {
         return {
             span: (domNode)=>{
-                if (!domNode.hasAttribute('data-payload-dynamic-value')) {
-                    return null;
+                if (domNode instanceof HTMLSpanElement && domNode.hasAttribute('data-payload-dynamic-value')) {
+                    return {
+                        conversion: convertDynamicValueElement,
+                        priority: 2
+                    };
                 }
-                return {
-                    conversion: (domNode)=>{
-                        const field = domNode.getAttribute('data-payload-dynamic-field');
-                        const label = domNode.textContent || undefined;
-                        if (field) {
-                            return {
-                                node: $createDynamicValueNode(field, label)
-                            };
-                        }
-                        return {
-                            node: null
-                        };
-                    },
-                    priority: 1
-                };
+                return null;
             }
         };
     }
     static importJSON(serializedNode) {
-        return $createDynamicValueNode(serializedNode.field, serializedNode.label);
-    }
-    createDOM() {
-        const span = document.createElement('span');
-        span.style.display = 'inline-block';
-        span.className = 'payload-dynamic-value-node';
-        return span;
-    }
-    decorate() {
-        return /*#__PURE__*/ _jsxs("span", {
-            contentEditable: false,
-            style: {
-                alignItems: 'center',
-                backgroundColor: 'var(--theme-elevation-150)',
-                border: '1px solid var(--theme-elevation-300)',
-                borderRadius: '4px',
-                boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
-                color: 'var(--theme-text)',
-                cursor: 'default',
-                display: 'inline-flex',
-                fontFamily: 'var(--font-mono, monospace)',
-                fontSize: '0.85em',
-                fontWeight: 600,
-                margin: '0 2px',
-                padding: '1px 6px',
-                userSelect: 'none',
-                verticalAlign: 'middle'
-            },
-            children: [
-                /*#__PURE__*/ _jsx("span", {
-                    style: {
-                        color: 'var(--theme-primary)',
-                        fontSize: '0.8em',
-                        marginRight: '4px',
-                        opacity: 0.4
-                    },
-                    children: "VAR"
-                }),
-                this.__label
-            ]
-        });
+        const node = $createDynamicValueNode(serializedNode.field, serializedNode.label || serializedNode.text);
+        node.setFormat(serializedNode.format);
+        node.setStyle(serializedNode.style);
+        node.setMode(serializedNode.mode);
+        node.setDetail(serializedNode.detail);
+        return node;
+    }
+    createDOM(config) {
+        const dom = super.createDOM(config);
+        applyDynamicValueStyles(this, dom);
+        return dom;
     }
     exportDOM() {
         const element = document.createElement('span');
         element.setAttribute('data-payload-dynamic-value', 'true');
         element.setAttribute('data-payload-dynamic-field', this.__field);
-        element.textContent = this.__label;
+        element.textContent = this.getTextContent();
         return {
             element
         };
     }
     exportJSON() {
         return {
-            type: 'dynamic-value',
+            ...super.exportJSON(),
+            type: DYNAMIC_VALUE_NODE_TYPE,
             field: this.__field,
-            label: this.__label,
+            label: this.getTextContent(),
             version: 1
         };
     }
     getField() {
         return this.__field;
     }
-    getTextContent() {
-        return this.__label;
-    }
-    isInline() {
-        return true;
-    }
-    isToken() {
+    isTextEntity() {
         return true;
     }
-    updateDOM() {
-        return false;
+    updateDOM(prevNode, dom, config) {
+        const didUpdate = super.updateDOM(prevNode, dom, config);
+        if (prevNode.__field !== this.__field || prevNode.getFormat() !== this.getFormat()) {
+            applyDynamicValueStyles(this, dom);
+        }
+        return didUpdate;
     }
 }
-export function $createDynamicValueNode(field, label) {
-    return new DynamicValueNode(field, label);
+function convertDynamicValueElement(domNode) {
+    const span = domNode;
+    const field = span.getAttribute('data-payload-dynamic-field') || span.textContent || '';
+    return {
+        node: $createDynamicValueNode(field, span.textContent || field)
+    };
+}
+export function $createDynamicValueNode(field, text) {
+    const node = new DynamicValueNode(field, text || field);
+    node.setMode('token');
+    return $applyNodeReplacement(node);
 }
 export function $isDynamicValueNode(node) {
-    return node?.getType() === 'dynamic-value';
+    return node?.getType() === DYNAMIC_VALUE_NODE_TYPE;
 }
 
 //# sourceMappingURL=index.js.map

package/dist/nodes/DynamicValueNode/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/nodes/DynamicValueNode/index.tsx"],"sourcesContent":["import {\r\n  DecoratorNode,\r\n  type DOMConversionMap,\r\n  type DOMConversionOutput,\r\n  type DOMExportOutput,\r\n  type LexicalNode,\r\n  type NodeKey,\r\n  type SerializedLexicalNode,\r\n  type Spread,\r\n} from '@payloadcms/richtext-lexical/lexical'\r\nimport React from 'react'\r\n\r\nexport type SerializedDynamicValueNode = Spread<\r\n  {\r\n    field: string\r\n    label?: string\r\n  },\r\n  SerializedLexicalNode\r\n>\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?: NodeKey) {\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'\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      span: (domNode: HTMLElement) => {\r\n        if (!domNode.hasAttribute('data-payload-dynamic-value')) {\r\n          return null\r\n        }\r\n        return {\r\n          conversion: (domNode: HTMLElement): DOMConversionOutput => {\r\n            const field = domNode.getAttribute('data-payload-dynamic-field')\r\n            const label = domNode.textContent || undefined\r\n            if (field) {\r\n              return { node: $createDynamicValueNode(field, label) }\r\n            }\r\n            return { node: null }\r\n          },\r\n          priority: 1,\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(): 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.__label\r\n    return { element }\r\n  }\r\n\r\n  exportJSON(): SerializedDynamicValueNode {\r\n    return {\r\n      type: 'dynamic-value',\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 new DynamicValueNode(field, label)\r\n}\r\n\r\nexport function $isDynamicValueNode(\r\n  node: LexicalNode | null | undefined,\r\n): node is DynamicValueNode {\r\n  return node?.getType() === 'dynamic-value'\r\n}\r\n"],"names":["DecoratorNode","React","DynamicValueNode","__field","__label","field","label","key","clone","node","getKey","getType","importDOM","span","domNode","hasAttribute","conversion","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":";AAAA,SACEA,aAAa,QAQR,uCAAsC;AAC7C,OAAOC,WAAW,QAAO;AAUzB,OAAO,MAAMC,yBAAyBF;IACpCG,QAAe;IACfC,QAAe;IAEf,YAAYC,KAAa,EAAEC,KAAc,EAAEC,GAAa,CAAE;QACxD,KAAK,CAACA;QACN,IAAI,CAACJ,OAAO,GAAGE;QACf,IAAI,CAACD,OAAO,GAAGE,SAASD;IAC1B;IAEA,OAAOG,MAAMC,IAAsB,EAAoB;QACrD,OAAO,IAAIP,iBAAiBO,KAAKN,OAAO,EAAEM,KAAKL,OAAO,EAAEK,KAAKC,MAAM;IACrE;IAEA,OAAOC,UAAkB;QACvB,OAAO;IACT;IAEA,OAAOC,YAAqC;QAC1C,OAAO;YACLC,MAAM,CAACC;gBACL,IAAI,CAACA,QAAQC,YAAY,CAAC,+BAA+B;oBACvD,OAAO;gBACT;gBACA,OAAO;oBACLC,YAAY,CAACF;wBACX,MAAMT,QAAQS,QAAQG,YAAY,CAAC;wBACnC,MAAMX,QAAQQ,QAAQI,WAAW,IAAIC;wBACrC,IAAId,OAAO;4BACT,OAAO;gCAAEI,MAAMW,wBAAwBf,OAAOC;4BAAO;wBACvD;wBACA,OAAO;4BAAEG,MAAM;wBAAK;oBACtB;oBACAY,UAAU;gBACZ;YACF;QACF;IACF;IAEA,OAAOC,WAAWC,cAA0C,EAAoB;QAC9E,OAAOH,wBAAwBG,eAAelB,KAAK,EAAEkB,eAAejB,KAAK;IAC3E;IAEAkB,YAAyB;QACvB,MAAMX,OAAOY,SAASC,aAAa,CAAC;QACpCb,KAAKc,KAAK,CAACC,OAAO,GAAG;QACrBf,KAAKgB,SAAS,GAAG;QACjB,OAAOhB;IACT;IAEAiB,WAA4B;QAC1B,qBACE,MAACjB;YACCkB,iBAAiB;YACjBJ,OAAO;gBACLK,YAAY;gBACZC,iBAAiB;gBACjBC,QAAQ;gBACRC,cAAc;gBACdC,WAAW;gBACXC,OAAO;gBACPC,QAAQ;gBACRV,SAAS;gBACTW,YAAY;gBACZC,UAAU;gBACVC,YAAY;gBACZC,QAAQ;gBACRC,SAAS;gBACTC,YAAY;gBACZC,eAAe;YACjB;;8BAEA,KAAChC;oBACCc,OAAO;wBACLU,OAAO;wBACPG,UAAU;wBACVM,aAAa;wBACbC,SAAS;oBACX;8BACD;;gBAGA,IAAI,CAAC3C,OAAO;;;IAGnB;IAEA4C,YAA6B;QAC3B,MAAMC,UAAUxB,SAASC,aAAa,CAAC;QACvCuB,QAAQC,YAAY,CAAC,8BAA8B;QACnDD,QAAQC,YAAY,CAAC,8BAA8B,IAAI,CAAC/C,OAAO;QAC/D8C,QAAQ/B,WAAW,GAAG,IAAI,CAACd,OAAO;QAClC,OAAO;YAAE6C;QAAQ;IACnB;IAEAE,aAAyC;QACvC,OAAO;YACLC,MAAM;YACN/C,OAAO,IAAI,CAACF,OAAO;YACnBG,OAAO,IAAI,CAACF,OAAO;YACnBiD,SAAS;QACX;IACF;IAEAC,WAAmB;QACjB,OAAO,IAAI,CAACnD,OAAO;IACrB;IAEAoD,iBAAyB;QACvB,OAAO,IAAI,CAACnD,OAAO;IACrB;IAEAoD,WAAoB;QAClB,OAAO;IACT;IAEAC,UAAmB;QACjB,OAAO;IACT;IAEAC,YAAqB;QACnB,OAAO;IACT;AACF;AAEA,OAAO,SAAStC,wBAAwBf,KAAa,EAAEC,KAAc;IACnE,OAAO,IAAIJ,iBAAiBG,OAAOC;AACrC;AAEA,OAAO,SAASqD,oBACdlD,IAAoC;IAEpC,OAAOA,MAAME,cAAc;AAC7B"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@od-labs/payloadcms-dynamic-value-richtext",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Dynamic Value Rich Text Plugin for PayloadCMS",
   "license": "MIT",
   "author": "OD LABS",
@@ -15,6 +15,26 @@
       "import": "./dist/exports/client.js",
       "types": "./dist/exports/client.d.ts",
       "default": "./dist/exports/client.js"
+    },
+    "./server": {
+      "import": "./dist/exports/server.js",
+      "types": "./dist/exports/server.d.ts",
+      "default": "./dist/exports/server.js"
+    },
+    "./jsx": {
+      "import": "./dist/exports/jsx.js",
+      "types": "./dist/exports/jsx.d.ts",
+      "default": "./dist/exports/jsx.js"
+    },
+    "./rsc": {
+      "import": "./dist/exports/rsc.js",
+      "types": "./dist/exports/rsc.d.ts",
+      "default": "./dist/exports/rsc.js"
+    },
+    "./react": {
+      "import": "./dist/exports/react.js",
+      "types": "./dist/exports/react.d.ts",
+      "default": "./dist/exports/react.js"
     }
   },
   "main": "./dist/index.js",
@@ -93,6 +113,26 @@
         "import": "./dist/exports/client.js",
         "types": "./dist/exports/client.d.ts",
         "default": "./dist/exports/client.js"
+      },
+      "./server": {
+        "import": "./dist/exports/server.js",
+        "types": "./dist/exports/server.d.ts",
+        "default": "./dist/exports/server.js"
+      },
+      "./jsx": {
+        "import": "./dist/exports/jsx.js",
+        "types": "./dist/exports/jsx.d.ts",
+        "default": "./dist/exports/jsx.js"
+      },
+      "./rsc": {
+        "import": "./dist/exports/rsc.js",
+        "types": "./dist/exports/rsc.d.ts",
+        "default": "./dist/exports/rsc.js"
+      },
+      "./react": {
+        "import": "./dist/exports/react.js",
+        "types": "./dist/exports/react.d.ts",
+        "default": "./dist/exports/react.js"
       }
     },
     "main": "./dist/index.js",