payloadcms-dynamic-value-richtext 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 OD LABS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,96 @@
+# Payload Dynamic Value Rich Text Plugin
+
+A powerful [Payload CMS](https://payloadcms.com) plugin for the Lexical editor that allows you to designate field values as dynamic variables. These variables can be reused throughout your rich text content and are visually represented as interactive badges.
+
+## Features
+
+- **Inline Autocomplete**: Trigger a searchable list of available dynamic fields using `@` (default) or a custom character (like `#`).
+- **Visual Badges**: Variables appear in the editor as clean, non-editable badges with a "VAR" prefix, making them distinct from regular text.
+- **Automatic Field Resolution**: Pull fields automatically from specified Collections and Globals, or provide manually defined fields.
+- **Unit Tokenization**: Variables are treated as single units—selecting or deleting them happens in a single action.
+- **Clipboard Support**: Copy and paste dynamic values between editors or documents while maintaining their data integrity.
+- **Light & Dark Mode**: Seamlessly integrates with Payload's admin UI theme.
+
+## Installation
+
+```bash
+pnpm add payloadcms-dynamic-value-richtext
+# or
+npm install payloadcms-dynamic-value-richtext
+```
+
+## Basic Setup
+
+Add the plugin to your `payload.config.ts`:
+
+```typescript
+import { buildConfig } from 'payload'
+import { dynamicValuePlugin } from 'payloadcms-dynamic-value-richtext'
+
+export default buildConfig({
+  plugins: [
+    dynamicValuePlugin({
+      collections: ['company-settings', 'sites'],
+      globals: ['contact-info'],
+      trigger: '@',
+    }),
+  ],
+  // ... rest of config
+})
+```
+
+## Configuration
+
+In your Lexical editor configuration, add the `DynamicValueFeature` to your list of features:
+
+```typescript
+import { DynamicValueFeature } from 'payloadcms-dynamic-value-richtext'
+
+// In your collection/global field definition:
+{
+  name: 'content',
+  type: 'richText',
+  editor: lexicalEditor({
+    features: ({ defaultFeatures }) => [
+      ...defaultFeatures,
+      DynamicValueFeature(),
+    ],
+  }),
+}
+```
+
+### Plugin Options
+
+| Option        | Type               | Description                                                             |
+| :------------ | :----------------- | :---------------------------------------------------------------------- |
+| `collections` | `CollectionSlug[]` | Automatically extract all text-based fields from these collections.     |
+| `globals`     | `GlobalSlug[]`     | Automatically extract all text-based fields from these globals.         |
+| `fields`      | `Field[]`          | Manually provide a list of Payload fields to be used as dynamic values. |
+| `trigger`     | `string`           | The character that triggers the autocomplete popup. Defaults to `@`.    |
+
+## How it Works
+
+1. **Resolution**: The plugin recursively flattens the fields of your chosen collections and globals. For example, if you have a Global `contact-info` with a field `email`, it becomes available as `contact-info.email`.
+2. **Injection**: When you type the trigger character in the editor, a popup appears showing all available fields.
+3. **Storage**: The variable is stored as a custom `DecoratorNode` in Lexical, which holds a reference to the field path (`value`) and the display label.
+
+## Development
+
+To run the development environment:
+
+1. Clone the repository
+2. Install dependencies: `pnpm install`
+3. Create a `.env` in the `dev` folder (see `.env.example`)
+4. Run development: `pnpm dev`
+
+## Ownership
+
+Created & Owned by **OD LABS**. This plugin is open and free for use to all under the MIT License.
+
+## Contributions
+
+Contributions are welcome! If you have ideas for improvements or find any issues, feel free to open a Pull Request or create an Issue.
+
+## License
+
+MIT

package/dist/client.d.ts

@@ -0,0 +1,2 @@
+export { DynamicValueFeatureClient } from "./features/DynamicValue/feature.client.js";
+//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "file": "client.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "../src/client.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC"
+}

package/dist/client.js

@@ -0,0 +1,2 @@
+export { DynamicValueFeatureClient } from "./features/DynamicValue/feature.client.js";
+//# sourceMappingURL=client.js.mapF

package/dist/client.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "file": "client.js",
+  "sourceRoot": "",
+  "sources": [
+    "../src/client.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC"
+}

package/dist/exports/client.d.ts

@@ -0,0 +1 @@
+export { DynamicValueFeatureClient } from '../features/DynamicValue/feature.client.js';

package/dist/exports/client.js

@@ -0,0 +1,3 @@
+export { DynamicValueFeatureClient } from '../features/DynamicValue/feature.client.js';
+
+//# sourceMappingURL=client.js.map

package/dist/exports/client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/exports/client.ts"],"sourcesContent":["export { DynamicValueFeatureClient } from '../features/DynamicValue/feature.client.js'\n"],"names":["DynamicValueFeatureClient"],"mappings":"AAAA,SAASA,yBAAyB,QAAQ,6CAA4C"}

package/dist/exports/server.d.ts

@@ -0,0 +1,2 @@
+export { DynamicValueFeature } from '../features/DynamicValue/feature.server.js';
+export { dynamicValuePlugin } from '../index.js';

package/dist/exports/server.js

@@ -0,0 +1,4 @@
+export { DynamicValueFeature } from '../features/DynamicValue/feature.server.js';
+export { dynamicValuePlugin } from '../index.js';
+
+//# sourceMappingURL=server.js.map

package/dist/exports/server.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/exports/server.ts"],"sourcesContent":["export { DynamicValueFeature } from '../features/DynamicValue/feature.server.js'\r\nexport { dynamicValuePlugin } from '../index.js'\r\n"],"names":["DynamicValueFeature","dynamicValuePlugin"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,6CAA4C;AAChF,SAASC,kBAAkB,QAAQ,cAAa"}

package/dist/features/DynamicValue/feature.client.d.ts

@@ -0,0 +1,8 @@
+import type { DynamicValueOption } from './types.js';
+export declare const DynamicValueFeatureClient: import("@payloadcms/richtext-lexical").FeatureProviderProviderClient<{
+    options: DynamicValueOption[];
+    trigger: string;
+}, {
+    options: DynamicValueOption[];
+    trigger: string;
+}>;

package/dist/features/DynamicValue/feature.client.d.ts.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "file": "feature.client.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "../../../src/features/DynamicValue/feature.client.tsx"
+  ],
+  "names": [],
+  "mappings": "AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAgJrD,eAAO,MAAM,yBAAyB;aAEzB,kBAAkB,EAAE;EAyC/B,CAAC"
+}

package/dist/features/DynamicValue/feature.client.js

@@ -0,0 +1,220 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createClientFeature } from '@payloadcms/richtext-lexical/client';
+import { $insertNodes } from '@payloadcms/richtext-lexical/lexical';
+import { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';
+import { LexicalTypeaheadMenuPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalTypeaheadMenuPlugin';
+import { AtSign, Hash, Variable } from 'lucide-react';
+import React, { useCallback, useMemo, useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import { $createDynamicValueNode, DynamicValueNode } from '../../nodes/DynamicValueNode/index.js';
+function useTriggerMatch(trigger) {
+    return useCallback((text)=>{
+        const triggerIndex = text.lastIndexOf(trigger);
+        if (triggerIndex === -1) {
+            return null;
+        }
+        const charBeforeTrigger = triggerIndex > 0 ? text[triggerIndex - 1] : null;
+        if (charBeforeTrigger && !/[\s(]/.test(charBeforeTrigger)) {
+            return null;
+        }
+        const matchingString = text.slice(triggerIndex + 1);
+        if (/\s/.test(matchingString)) {
+            return null;
+        }
+        return {
+            leadOffset: triggerIndex,
+            matchingString,
+            replaceableString: trigger + matchingString
+        };
+    }, [
+        trigger
+    ]);
+}
+const DynamicValuePlugin = ({ anchorElem, options: allOptions, trigger })=>{
+    const [editor] = useLexicalComposerContext();
+    const [queryString, setQueryString] = useState(null);
+    const checkForTriggerMatch = useTriggerMatch(trigger);
+    const options = useMemo(()=>{
+        const searchString = queryString?.toLowerCase() || '';
+        return (allOptions || []).filter((option)=>option.label.toLowerCase().includes(searchString) || option.value.toLowerCase().includes(searchString)).map((opt)=>({
+                ...opt,
+                key: opt.value
+            }));
+    }, [
+        queryString,
+        allOptions
+    ]);
+    const TypeaheadMenu = LexicalTypeaheadMenuPlugin;
+    const IconToUse = trigger === '@' ? AtSign : trigger === '#' ? Hash : Variable;
+    return /*#__PURE__*/ _jsx(TypeaheadMenu, {
+        anchorElem: anchorElem || (typeof document !== 'undefined' ? document.body : undefined),
+        menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex })=>{
+            const anchor = anchorElementRef?.current || anchorElem || (typeof document !== 'undefined' ? document.body : null);
+            if (!anchor || !options.length) {
+                return null;
+            }
+            return /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ _jsxs("div", {
+                className: "dynamic-value-popup",
+                style: {
+                    background: 'var(--theme-elevation-100)',
+                    border: '1px solid var(--theme-elevation-250)',
+                    borderRadius: '8px',
+                    boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
+                    minWidth: '260px',
+                    overflow: 'hidden',
+                    padding: '4px',
+                    zIndex: 100000
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            borderBottom: '1px solid var(--theme-elevation-150)',
+                            color: 'var(--theme-text)',
+                            fontSize: '10px',
+                            fontWeight: 700,
+                            letterSpacing: '0.05em',
+                            marginBottom: '4px',
+                            opacity: 0.6,
+                            padding: '10px 14px 6px',
+                            textTransform: 'uppercase'
+                        },
+                        children: "Merge Fields"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            maxHeight: '300px',
+                            overflowY: 'auto'
+                        },
+                        children: options.map((option, index)=>{
+                            const isSelected = selectedIndex === index;
+                            return /*#__PURE__*/ _jsxs("button", {
+                                onClick: ()=>selectOptionAndCleanUp(option),
+                                onMouseEnter: ()=>setHighlightedIndex(index),
+                                style: {
+                                    alignItems: 'center',
+                                    background: isSelected ? 'var(--theme-primary)' : 'transparent',
+                                    border: 'none',
+                                    borderRadius: '6px',
+                                    color: isSelected ? 'white' : 'var(--theme-text)',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    gap: '10px',
+                                    padding: '8px 12px',
+                                    textAlign: 'left',
+                                    transition: 'all 0.15s ease',
+                                    width: '100%'
+                                },
+                                type: "button",
+                                children: [
+                                    /*#__PURE__*/ _jsx(IconToUse, {
+                                        size: 14,
+                                        style: {
+                                            opacity: isSelected ? 1 : 0.4
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        style: {
+                                            display: 'flex',
+                                            flexDirection: 'column'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                style: {
+                                                    fontSize: '13px',
+                                                    fontWeight: 500
+                                                },
+                                                children: option.label
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                style: {
+                                                    fontFamily: 'var(--font-mono)',
+                                                    fontSize: '11px',
+                                                    opacity: 0.5
+                                                },
+                                                children: option.value
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, option.value);
+                        })
+                    })
+                ]
+            }), anchor);
+        },
+        onQueryChange: setQueryString,
+        onSelectOption: (option, textNodeToReplace, closeMenu)=>{
+            editor.update(()=>{
+                if (textNodeToReplace) {
+                    textNodeToReplace.remove();
+                }
+                const node = $createDynamicValueNode(option.value, option.label);
+                $insertNodes([
+                    node
+                ]);
+                closeMenu();
+            });
+        },
+        options: options,
+        triggerFn: checkForTriggerMatch
+    });
+};
+export const DynamicValueFeatureClient = createClientFeature(({ props })=>{
+    const options = props?.options || [];
+    const trigger = props?.trigger || '@';
+    const IconToUse = trigger === '@' ? AtSign : trigger === '#' ? Hash : Variable;
+    return {
+        nodes: [
+            DynamicValueNode
+        ],
+        plugins: [
+            {
+                Component: (pluginProps)=>/*#__PURE__*/ _jsx(DynamicValuePlugin, {
+                        ...pluginProps,
+                        options: options,
+                        trigger: trigger
+                    }),
+                position: 'floatingAnchorElem'
+            }
+        ],
+        sanitizedClientFeatureProps: props,
+        toolbarFixed: {
+            groups: [
+                {
+                    type: 'dropdown',
+                    ChildComponent: ()=>/*#__PURE__*/ _jsx("div", {
+                            style: {
+                                alignItems: 'center',
+                                display: 'flex',
+                                gap: '4px'
+                            },
+                            children: /*#__PURE__*/ _jsx(IconToUse, {
+                                size: 14,
+                                style: {
+                                    color: 'var(--theme-text)',
+                                    opacity: 0.7
+                                }
+                            })
+                        }),
+                    items: options.map((field)=>({
+                            key: field.value,
+                            label: field.label,
+                            onSelect: ({ editor })=>{
+                                editor.update(()=>{
+                                    const node = $createDynamicValueNode(field.value, field.label);
+                                    $insertNodes([
+                                        node
+                                    ]);
+                                });
+                            }
+                        })),
+                    key: 'dynamicValue',
+                    order: 99
+                }
+            ]
+        }
+    };
+});
+
+//# sourceMappingURL=feature.client.js.map

package/dist/features/DynamicValue/feature.client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/DynamicValue/feature.client.tsx"],"sourcesContent":["'use client'\r\nimport { createClientFeature } from '@payloadcms/richtext-lexical/client'\r\nimport { $insertNodes } from '@payloadcms/richtext-lexical/lexical'\r\nimport { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext'\r\nimport { LexicalTypeaheadMenuPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalTypeaheadMenuPlugin'\r\nimport { AtSign, Hash, Variable } from 'lucide-react'\r\nimport React, { useCallback, useMemo, useState } from 'react'\r\nimport * as ReactDOM from 'react-dom'\r\n\r\nimport type { DynamicValueOption } from './types.js'\r\n\r\nimport { $createDynamicValueNode, DynamicValueNode } from '../../nodes/DynamicValueNode/index.js'\r\n\r\nfunction useTriggerMatch(trigger: string) {\r\n  return useCallback(\r\n    (text: string) => {\r\n      const triggerIndex = text.lastIndexOf(trigger)\r\n      if (triggerIndex === -1) {\r\n        return null\r\n      }\r\n\r\n      const charBeforeTrigger = triggerIndex > 0 ? text[triggerIndex - 1] : null\r\n      if (charBeforeTrigger && !/[\\s(]/.test(charBeforeTrigger)) {\r\n        return null\r\n      }\r\n\r\n      const matchingString = text.slice(triggerIndex + 1)\r\n      if (/\\s/.test(matchingString)) {\r\n        return null\r\n      }\r\n\r\n      return {\r\n        leadOffset: triggerIndex,\r\n        matchingString,\r\n        replaceableString: trigger + matchingString,\r\n      }\r\n    },\r\n    [trigger],\r\n  )\r\n}\r\n\r\nconst DynamicValuePlugin: React.FC<{\r\n  anchorElem?: HTMLElement\r\n  options: DynamicValueOption[]\r\n  trigger: string\r\n}> = ({ anchorElem, options: allOptions, trigger }) => {\r\n  const [editor] = useLexicalComposerContext()\r\n  const [queryString, setQueryString] = useState<null | string>(null)\r\n\r\n  const checkForTriggerMatch = useTriggerMatch(trigger)\r\n\r\n  const options = useMemo(() => {\r\n    const searchString = queryString?.toLowerCase() || ''\r\n    return (allOptions || [])\r\n      .filter(\r\n        (option: DynamicValueOption) =>\r\n          option.label.toLowerCase().includes(searchString) ||\r\n          option.value.toLowerCase().includes(searchString),\r\n      )\r\n      .map((opt: DynamicValueOption) => ({\r\n        ...opt,\r\n        key: opt.value,\r\n      }))\r\n  }, [queryString, allOptions])\r\n\r\n  const TypeaheadMenu = LexicalTypeaheadMenuPlugin as any\r\n\r\n  const IconToUse = trigger === '@' ? AtSign : trigger === '#' ? Hash : Variable\r\n\r\n  return (\r\n    <TypeaheadMenu\r\n      anchorElem={anchorElem || (typeof document !== 'undefined' ? document.body : undefined)}\r\n      menuRenderFn={(\r\n        anchorElementRef: any,\r\n        { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }: any,\r\n      ) => {\r\n        const anchor =\r\n          anchorElementRef?.current ||\r\n          anchorElem ||\r\n          (typeof document !== 'undefined' ? document.body : null)\r\n        if (!anchor || !options.length) {\r\n          return null\r\n        }\r\n\r\n        return ReactDOM.createPortal(\r\n          <div\r\n            className=\"dynamic-value-popup\"\r\n            style={{\r\n              background: 'var(--theme-elevation-100)',\r\n              border: '1px solid var(--theme-elevation-250)',\r\n              borderRadius: '8px',\r\n              boxShadow: '0 8px 32px rgba(0,0,0,0.2)',\r\n              minWidth: '260px',\r\n              overflow: 'hidden',\r\n              padding: '4px',\r\n              zIndex: 100000,\r\n            }}\r\n          >\r\n            <div\r\n              style={{\r\n                borderBottom: '1px solid var(--theme-elevation-150)',\r\n                color: 'var(--theme-text)',\r\n                fontSize: '10px',\r\n                fontWeight: 700,\r\n                letterSpacing: '0.05em',\r\n                marginBottom: '4px',\r\n                opacity: 0.6,\r\n                padding: '10px 14px 6px',\r\n                textTransform: 'uppercase',\r\n              }}\r\n            >\r\n              Merge Fields\r\n            </div>\r\n            <div style={{ maxHeight: '300px', overflowY: 'auto' }}>\r\n              {options.map((option, index) => {\r\n                const isSelected = selectedIndex === index\r\n                return (\r\n                  <button\r\n                    key={option.value}\r\n                    onClick={() => selectOptionAndCleanUp(option)}\r\n                    onMouseEnter={() => setHighlightedIndex(index)}\r\n                    style={{\r\n                      alignItems: 'center',\r\n                      background: isSelected ? 'var(--theme-primary)' : 'transparent',\r\n                      border: 'none',\r\n                      borderRadius: '6px',\r\n                      color: isSelected ? 'white' : 'var(--theme-text)',\r\n                      cursor: 'pointer',\r\n                      display: 'flex',\r\n                      gap: '10px',\r\n                      padding: '8px 12px',\r\n                      textAlign: 'left',\r\n                      transition: 'all 0.15s ease',\r\n                      width: '100%',\r\n                    }}\r\n                    type=\"button\"\r\n                  >\r\n                    <IconToUse size={14} style={{ opacity: isSelected ? 1 : 0.4 }} />\r\n                    <div style={{ display: 'flex', flexDirection: 'column' }}>\r\n                      <span style={{ fontSize: '13px', fontWeight: 500 }}>{option.label}</span>\r\n                      <span\r\n                        style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', opacity: 0.5 }}\r\n                      >\r\n                        {option.value}\r\n                      </span>\r\n                    </div>\r\n                  </button>\r\n                )\r\n              })}\r\n            </div>\r\n          </div>,\r\n          anchor,\r\n        )\r\n      }}\r\n      onQueryChange={setQueryString}\r\n      onSelectOption={(option: any, textNodeToReplace: any, closeMenu: any) => {\r\n        editor.update(() => {\r\n          if (textNodeToReplace) {\r\n            textNodeToReplace.remove()\r\n          }\r\n          const node = $createDynamicValueNode(option.value, option.label)\r\n          $insertNodes([node])\r\n          closeMenu()\r\n        })\r\n      }}\r\n      options={options}\r\n      triggerFn={checkForTriggerMatch}\r\n    />\r\n  )\r\n}\r\n\r\nexport const DynamicValueFeatureClient = createClientFeature<\r\n  { options: DynamicValueOption[]; trigger: string },\r\n  { options: DynamicValueOption[]; trigger: string }\r\n>(({ props }) => {\r\n  const options = props?.options || []\r\n  const trigger = props?.trigger || '@'\r\n  const IconToUse = trigger === '@' ? AtSign : trigger === '#' ? Hash : Variable\r\n\r\n  return {\r\n    nodes: [DynamicValueNode],\r\n    plugins: [\r\n      {\r\n        Component: (pluginProps) => (\r\n          <DynamicValuePlugin {...pluginProps} options={options} trigger={trigger} />\r\n        ),\r\n        position: 'floatingAnchorElem',\r\n      },\r\n    ],\r\n    sanitizedClientFeatureProps: props,\r\n    toolbarFixed: {\r\n      groups: [\r\n        {\r\n          type: 'dropdown',\r\n          ChildComponent: () => (\r\n            <div style={{ alignItems: 'center', display: 'flex', gap: '4px' }}>\r\n              <IconToUse size={14} style={{ color: 'var(--theme-text)', opacity: 0.7 }} />\r\n            </div>\r\n          ),\r\n          items: options.map((field: DynamicValueOption) => ({\r\n            key: field.value,\r\n            label: field.label,\r\n            onSelect: ({ editor }: { editor: any }) => {\r\n              editor.update(() => {\r\n                const node = $createDynamicValueNode(field.value, field.label)\r\n                $insertNodes([node])\r\n              })\r\n            },\r\n          })),\r\n          key: 'dynamicValue',\r\n          order: 99,\r\n        },\r\n      ],\r\n    },\r\n  }\r\n})\r\n"],"names":["createClientFeature","$insertNodes","useLexicalComposerContext","LexicalTypeaheadMenuPlugin","AtSign","Hash","Variable","React","useCallback","useMemo","useState","ReactDOM","$createDynamicValueNode","DynamicValueNode","useTriggerMatch","trigger","text","triggerIndex","lastIndexOf","charBeforeTrigger","test","matchingString","slice","leadOffset","replaceableString","DynamicValuePlugin","anchorElem","options","allOptions","editor","queryString","setQueryString","checkForTriggerMatch","searchString","toLowerCase","filter","option","label","includes","value","map","opt","key","TypeaheadMenu","IconToUse","document","body","undefined","menuRenderFn","anchorElementRef","selectedIndex","selectOptionAndCleanUp","setHighlightedIndex","anchor","current","length","createPortal","div","className","style","background","border","borderRadius","boxShadow","minWidth","overflow","padding","zIndex","borderBottom","color","fontSize","fontWeight","letterSpacing","marginBottom","opacity","textTransform","maxHeight","overflowY","index","isSelected","button","onClick","onMouseEnter","alignItems","cursor","display","gap","textAlign","transition","width","type","size","flexDirection","span","fontFamily","onQueryChange","onSelectOption","textNodeToReplace","closeMenu","update","remove","node","triggerFn","DynamicValueFeatureClient","props","nodes","plugins","Component","pluginProps","position","sanitizedClientFeatureProps","toolbarFixed","groups","ChildComponent","items","field","onSelect","order"],"mappings":"AAAA;;AACA,SAASA,mBAAmB,QAAQ,sCAAqC;AACzE,SAASC,YAAY,QAAQ,uCAAsC;AACnE,SAASC,yBAAyB,QAAQ,oEAAmE;AAC7G,SAASC,0BAA0B,QAAQ,wEAAuE;AAClH,SAASC,MAAM,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,eAAc;AACrD,OAAOC,SAASC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAC7D,YAAYC,cAAc,YAAW;AAIrC,SAASC,uBAAuB,EAAEC,gBAAgB,QAAQ,wCAAuC;AAEjG,SAASC,gBAAgBC,OAAe;IACtC,OAAOP,YACL,CAACQ;QACC,MAAMC,eAAeD,KAAKE,WAAW,CAACH;QACtC,IAAIE,iBAAiB,CAAC,GAAG;YACvB,OAAO;QACT;QAEA,MAAME,oBAAoBF,eAAe,IAAID,IAAI,CAACC,eAAe,EAAE,GAAG;QACtE,IAAIE,qBAAqB,CAAC,QAAQC,IAAI,CAACD,oBAAoB;YACzD,OAAO;QACT;QAEA,MAAME,iBAAiBL,KAAKM,KAAK,CAACL,eAAe;QACjD,IAAI,KAAKG,IAAI,CAACC,iBAAiB;YAC7B,OAAO;QACT;QAEA,OAAO;YACLE,YAAYN;YACZI;YACAG,mBAAmBT,UAAUM;QAC/B;IACF,GACA;QAACN;KAAQ;AAEb;AAEA,MAAMU,qBAID,CAAC,EAAEC,UAAU,EAAEC,SAASC,UAAU,EAAEb,OAAO,EAAE;IAChD,MAAM,CAACc,OAAO,GAAG3B;IACjB,MAAM,CAAC4B,aAAaC,eAAe,GAAGrB,SAAwB;IAE9D,MAAMsB,uBAAuBlB,gBAAgBC;IAE7C,MAAMY,UAAUlB,QAAQ;QACtB,MAAMwB,eAAeH,aAAaI,iBAAiB;QACnD,OAAO,AAACN,CAAAA,cAAc,EAAE,AAAD,EACpBO,MAAM,CACL,CAACC,SACCA,OAAOC,KAAK,CAACH,WAAW,GAAGI,QAAQ,CAACL,iBACpCG,OAAOG,KAAK,CAACL,WAAW,GAAGI,QAAQ,CAACL,eAEvCO,GAAG,CAAC,CAACC,MAA6B,CAAA;gBACjC,GAAGA,GAAG;gBACNC,KAAKD,IAAIF,KAAK;YAChB,CAAA;IACJ,GAAG;QAACT;QAAaF;KAAW;IAE5B,MAAMe,gBAAgBxC;IAEtB,MAAMyC,YAAY7B,YAAY,MAAMX,SAASW,YAAY,MAAMV,OAAOC;IAEtE,qBACE,KAACqC;QACCjB,YAAYA,cAAe,CAAA,OAAOmB,aAAa,cAAcA,SAASC,IAAI,GAAGC,SAAQ;QACrFC,cAAc,CACZC,kBACA,EAAEC,aAAa,EAAEC,sBAAsB,EAAEC,mBAAmB,EAAO;YAEnE,MAAMC,SACJJ,kBAAkBK,WAClB5B,cACC,CAAA,OAAOmB,aAAa,cAAcA,SAASC,IAAI,GAAG,IAAG;YACxD,IAAI,CAACO,UAAU,CAAC1B,QAAQ4B,MAAM,EAAE;gBAC9B,OAAO;YACT;YAEA,qBAAO5C,SAAS6C,YAAY,eAC1B,MAACC;gBACCC,WAAU;gBACVC,OAAO;oBACLC,YAAY;oBACZC,QAAQ;oBACRC,cAAc;oBACdC,WAAW;oBACXC,UAAU;oBACVC,UAAU;oBACVC,SAAS;oBACTC,QAAQ;gBACV;;kCAEA,KAACV;wBACCE,OAAO;4BACLS,cAAc;4BACdC,OAAO;4BACPC,UAAU;4BACVC,YAAY;4BACZC,eAAe;4BACfC,cAAc;4BACdC,SAAS;4BACTR,SAAS;4BACTS,eAAe;wBACjB;kCACD;;kCAGD,KAAClB;wBAAIE,OAAO;4BAAEiB,WAAW;4BAASC,WAAW;wBAAO;kCACjDlD,QAAQa,GAAG,CAAC,CAACJ,QAAQ0C;4BACpB,MAAMC,aAAa7B,kBAAkB4B;4BACrC,qBACE,MAACE;gCAECC,SAAS,IAAM9B,uBAAuBf;gCACtC8C,cAAc,IAAM9B,oBAAoB0B;gCACxCnB,OAAO;oCACLwB,YAAY;oCACZvB,YAAYmB,aAAa,yBAAyB;oCAClDlB,QAAQ;oCACRC,cAAc;oCACdO,OAAOU,aAAa,UAAU;oCAC9BK,QAAQ;oCACRC,SAAS;oCACTC,KAAK;oCACLpB,SAAS;oCACTqB,WAAW;oCACXC,YAAY;oCACZC,OAAO;gCACT;gCACAC,MAAK;;kDAEL,KAAC9C;wCAAU+C,MAAM;wCAAIhC,OAAO;4CAAEe,SAASK,aAAa,IAAI;wCAAI;;kDAC5D,MAACtB;wCAAIE,OAAO;4CAAE0B,SAAS;4CAAQO,eAAe;wCAAS;;0DACrD,KAACC;gDAAKlC,OAAO;oDAAEW,UAAU;oDAAQC,YAAY;gDAAI;0DAAInC,OAAOC,KAAK;;0DACjE,KAACwD;gDACClC,OAAO;oDAAEmC,YAAY;oDAAoBxB,UAAU;oDAAQI,SAAS;gDAAI;0DAEvEtC,OAAOG,KAAK;;;;;+BAzBZH,OAAOG,KAAK;wBA8BvB;;;gBAGJc;QAEJ;QACA0C,eAAehE;QACfiE,gBAAgB,CAAC5D,QAAa6D,mBAAwBC;YACpDrE,OAAOsE,MAAM,CAAC;gBACZ,IAAIF,mBAAmB;oBACrBA,kBAAkBG,MAAM;gBAC1B;gBACA,MAAMC,OAAOzF,wBAAwBwB,OAAOG,KAAK,EAAEH,OAAOC,KAAK;gBAC/DpC,aAAa;oBAACoG;iBAAK;gBACnBH;YACF;QACF;QACAvE,SAASA;QACT2E,WAAWtE;;AAGjB;AAEA,OAAO,MAAMuE,4BAA4BvG,oBAGvC,CAAC,EAAEwG,KAAK,EAAE;IACV,MAAM7E,UAAU6E,OAAO7E,WAAW,EAAE;IACpC,MAAMZ,UAAUyF,OAAOzF,WAAW;IAClC,MAAM6B,YAAY7B,YAAY,MAAMX,SAASW,YAAY,MAAMV,OAAOC;IAEtE,OAAO;QACLmG,OAAO;YAAC5F;SAAiB;QACzB6F,SAAS;YACP;gBACEC,WAAW,CAACC,4BACV,KAACnF;wBAAoB,GAAGmF,WAAW;wBAAEjF,SAASA;wBAASZ,SAASA;;gBAElE8F,UAAU;YACZ;SACD;QACDC,6BAA6BN;QAC7BO,cAAc;YACZC,QAAQ;gBACN;oBACEtB,MAAM;oBACNuB,gBAAgB,kBACd,KAACxD;4BAAIE,OAAO;gCAAEwB,YAAY;gCAAUE,SAAS;gCAAQC,KAAK;4BAAM;sCAC9D,cAAA,KAAC1C;gCAAU+C,MAAM;gCAAIhC,OAAO;oCAAEU,OAAO;oCAAqBK,SAAS;gCAAI;;;oBAG3EwC,OAAOvF,QAAQa,GAAG,CAAC,CAAC2E,QAA+B,CAAA;4BACjDzE,KAAKyE,MAAM5E,KAAK;4BAChBF,OAAO8E,MAAM9E,KAAK;4BAClB+E,UAAU,CAAC,EAAEvF,MAAM,EAAmB;gCACpCA,OAAOsE,MAAM,CAAC;oCACZ,MAAME,OAAOzF,wBAAwBuG,MAAM5E,KAAK,EAAE4E,MAAM9E,KAAK;oCAC7DpC,aAAa;wCAACoG;qCAAK;gCACrB;4BACF;wBACF,CAAA;oBACA3D,KAAK;oBACL2E,OAAO;gBACT;aACD;QACH;IACF;AACF,GAAE"}

package/dist/features/DynamicValue/feature.server.d.ts

@@ -0,0 +1,5 @@
+import type { DynamicValueConfig, DynamicValueOption } from './types.js';
+export declare const DynamicValueFeature: import("@payloadcms/richtext-lexical").FeatureProviderProviderServer<DynamicValueConfig, object, {
+    options: DynamicValueOption[];
+    trigger: string;
+}>;

package/dist/features/DynamicValue/feature.server.d.ts.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "file": "feature.server.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "../../../src/features/DynamicValue/feature.server.ts"
+  ],
+  "names": [],
+  "mappings": "AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEzE,eAAO,MAAM,mBAAmB;aAGnB,kBAAkB,EAAE;EAiD/B,CAAC"
+}

package/dist/features/DynamicValue/feature.server.js

@@ -0,0 +1,65 @@
+import { createNode, createServerFeature } from '@payloadcms/richtext-lexical';
+import { DynamicValueNode } from '../../nodes/DynamicValueNode/index.js';
+export const DynamicValueFeature = createServerFeature({
+    feature: ({ config: payloadConfig, props })=>{
+        const options = [];
+        const trigger = props?.trigger || '@';
+        const flattenFields = (fields, prefix = '')=>{
+            fields.forEach((field)=>{
+                if ('name' in field && field.name && field.type !== 'array' && field.type !== 'blocks') {
+                    const name = prefix ? `${prefix}.${field.name}` : field.name;
+                    options.push({
+                        label: field.label || field.name,
+                        value: name
+                    });
+                }
+                if ('fields' in field && field.fields && Array.isArray(field.fields)) {
+                    flattenFields(field.fields, 'name' in field && field.name ? prefix ? `${prefix}.${field.name}` : field.name : prefix);
+                }
+                if (field.type === 'tabs' && field.tabs) {
+                    field.tabs.forEach((tab)=>{
+                        flattenFields(tab.fields, prefix);
+                    });
+                }
+            });
+        };
+        // 1. Process directly provided fields
+        if (props?.fields) {
+            flattenFields(props.fields);
+        }
+        // 2. Process collections
+        if (props?.collections && payloadConfig.collections) {
+            props.collections.forEach((slug)=>{
+                const collection = payloadConfig.collections?.find((c)=>c.slug === slug);
+                if (collection) {
+                    flattenFields(collection.fields, slug);
+                }
+            });
+        }
+        // 3. Process globals
+        if (props?.globals && payloadConfig.globals) {
+            props.globals.forEach((slug)=>{
+                const global = payloadConfig.globals?.find((g)=>g.slug === slug);
+                if (global) {
+                    flattenFields(global.fields, slug);
+                }
+            });
+        }
+        return {
+            ClientFeature: 'payloadcms-dynamic-value-richtext/client#DynamicValueFeatureClient',
+            clientProps: {
+                options,
+                trigger
+            },
+            key: 'dynamicValue',
+            nodes: [
+                createNode({
+                    node: DynamicValueNode
+                })
+            ]
+        };
+    },
+    key: 'dynamicValue'
+});
+
+//# sourceMappingURL=feature.server.js.map

package/dist/features/DynamicValue/feature.server.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/DynamicValue/feature.server.ts"],"sourcesContent":["import type { CollectionSlug, Field, GlobalSlug } from 'payload'\r\n\r\nimport { createNode, createServerFeature } from '@payloadcms/richtext-lexical'\r\n\r\nimport type { DynamicValueConfig, DynamicValueOption } from './types.js'\r\n\r\nimport { DynamicValueNode } from '../../nodes/DynamicValueNode/index.js'\r\n\r\nexport const DynamicValueFeature = createServerFeature<\r\n  DynamicValueConfig,\r\n  object,\r\n  { options: DynamicValueOption[]; trigger: string }\r\n>({\r\n  feature: ({ config: payloadConfig, props }) => {\r\n    const options: DynamicValueOption[] = []\r\n    const trigger = props?.trigger || '@'\r\n\r\n    const flattenFields = (fields: Field[], prefix = '') => {\r\n      fields.forEach((field) => {\r\n        if ('name' in field && field.name && field.type !== 'array' && field.type !== 'blocks') {\r\n          const name = prefix ? `${prefix}.${field.name}` : field.name\r\n          options.push({\r\n            label: (field.label as string) || field.name,\r\n            value: name,\r\n          })\r\n        }\r\n\r\n        if ('fields' in field && field.fields && Array.isArray(field.fields)) {\r\n          flattenFields(\r\n            field.fields,\r\n            'name' in field && field.name\r\n              ? prefix\r\n                ? `${prefix}.${field.name}`\r\n                : field.name\r\n              : prefix,\r\n          )\r\n        }\r\n\r\n        if (field.type === 'tabs' && field.tabs) {\r\n          field.tabs.forEach((tab) => {\r\n            flattenFields(tab.fields, prefix)\r\n          })\r\n        }\r\n      })\r\n    }\r\n\r\n    // 1. Process directly provided fields\r\n    if (props?.fields) {\r\n      flattenFields(props.fields)\r\n    }\r\n\r\n    // 2. Process collections\r\n    if (props?.collections && payloadConfig.collections) {\r\n      props.collections.forEach((slug: CollectionSlug) => {\r\n        const collection = payloadConfig.collections?.find((c) => c.slug === slug)\r\n        if (collection) {\r\n          flattenFields(collection.fields, slug)\r\n        }\r\n      })\r\n    }\r\n\r\n    // 3. Process globals\r\n    if (props?.globals && payloadConfig.globals) {\r\n      props.globals.forEach((slug: GlobalSlug) => {\r\n        const global = payloadConfig.globals?.find((g) => g.slug === slug)\r\n        if (global) {\r\n          flattenFields(global.fields, slug)\r\n        }\r\n      })\r\n    }\r\n\r\n    return {\r\n      ClientFeature: 'payloadcms-dynamic-value-richtext/client#DynamicValueFeatureClient',\r\n      clientProps: {\r\n        options,\r\n        trigger,\r\n      },\r\n      key: 'dynamicValue',\r\n      nodes: [\r\n        createNode({\r\n          node: DynamicValueNode,\r\n        }),\r\n      ],\r\n    }\r\n  },\r\n  key: 'dynamicValue',\r\n})\r\n"],"names":["createNode","createServerFeature","DynamicValueNode","DynamicValueFeature","feature","config","payloadConfig","props","options","trigger","flattenFields","fields","prefix","forEach","field","name","type","push","label","value","Array","isArray","tabs","tab","collections","slug","collection","find","c","globals","global","g","ClientFeature","clientProps","key","nodes","node"],"mappings":"AAEA,SAASA,UAAU,EAAEC,mBAAmB,QAAQ,+BAA8B;AAI9E,SAASC,gBAAgB,QAAQ,wCAAuC;AAExE,OAAO,MAAMC,sBAAsBF,oBAIjC;IACAG,SAAS,CAAC,EAAEC,QAAQC,aAAa,EAAEC,KAAK,EAAE;QACxC,MAAMC,UAAgC,EAAE;QACxC,MAAMC,UAAUF,OAAOE,WAAW;QAElC,MAAMC,gBAAgB,CAACC,QAAiBC,SAAS,EAAE;YACjDD,OAAOE,OAAO,CAAC,CAACC;gBACd,IAAI,UAAUA,SAASA,MAAMC,IAAI,IAAID,MAAME,IAAI,KAAK,WAAWF,MAAME,IAAI,KAAK,UAAU;oBACtF,MAAMD,OAAOH,SAAS,GAAGA,OAAO,CAAC,EAAEE,MAAMC,IAAI,EAAE,GAAGD,MAAMC,IAAI;oBAC5DP,QAAQS,IAAI,CAAC;wBACXC,OAAO,AAACJ,MAAMI,KAAK,IAAeJ,MAAMC,IAAI;wBAC5CI,OAAOJ;oBACT;gBACF;gBAEA,IAAI,YAAYD,SAASA,MAAMH,MAAM,IAAIS,MAAMC,OAAO,CAACP,MAAMH,MAAM,GAAG;oBACpED,cACEI,MAAMH,MAAM,EACZ,UAAUG,SAASA,MAAMC,IAAI,GACzBH,SACE,GAAGA,OAAO,CAAC,EAAEE,MAAMC,IAAI,EAAE,GACzBD,MAAMC,IAAI,GACZH;gBAER;gBAEA,IAAIE,MAAME,IAAI,KAAK,UAAUF,MAAMQ,IAAI,EAAE;oBACvCR,MAAMQ,IAAI,CAACT,OAAO,CAAC,CAACU;wBAClBb,cAAca,IAAIZ,MAAM,EAAEC;oBAC5B;gBACF;YACF;QACF;QAEA,sCAAsC;QACtC,IAAIL,OAAOI,QAAQ;YACjBD,cAAcH,MAAMI,MAAM;QAC5B;QAEA,yBAAyB;QACzB,IAAIJ,OAAOiB,eAAelB,cAAckB,WAAW,EAAE;YACnDjB,MAAMiB,WAAW,CAACX,OAAO,CAAC,CAACY;gBACzB,MAAMC,aAAapB,cAAckB,WAAW,EAAEG,KAAK,CAACC,IAAMA,EAAEH,IAAI,KAAKA;gBACrE,IAAIC,YAAY;oBACdhB,cAAcgB,WAAWf,MAAM,EAAEc;gBACnC;YACF;QACF;QAEA,qBAAqB;QACrB,IAAIlB,OAAOsB,WAAWvB,cAAcuB,OAAO,EAAE;YAC3CtB,MAAMsB,OAAO,CAAChB,OAAO,CAAC,CAACY;gBACrB,MAAMK,SAASxB,cAAcuB,OAAO,EAAEF,KAAK,CAACI,IAAMA,EAAEN,IAAI,KAAKA;gBAC7D,IAAIK,QAAQ;oBACVpB,cAAcoB,OAAOnB,MAAM,EAAEc;gBAC/B;YACF;QACF;QAEA,OAAO;YACLO,eAAe;YACfC,aAAa;gBACXzB;gBACAC;YACF;YACAyB,KAAK;YACLC,OAAO;gBACLnC,WAAW;oBACToC,MAAMlC;gBACR;aACD;QACH;IACF;IACAgC,KAAK;AACP,GAAE"}

package/dist/features/DynamicValue/index.d.ts

@@ -0,0 +1,3 @@
+export { DynamicValueFeature } from "./feature.server.js";
+export type { DynamicValueConfig, DynamicValueOption } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/features/DynamicValue/index.d.ts.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "file": "index.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "../../../src/features/DynamicValue/index.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"
+}

package/dist/features/DynamicValue/index.js

@@ -0,0 +1,2 @@
+export { DynamicValueFeature } from "./feature.server.js";
+//# sourceMappingURL=index.js.map

package/dist/features/DynamicValue/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "file": "index.js",
+  "sourceRoot": "",
+  "sources": [
+    "../../../src/features/DynamicValue/index.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC"
+}

package/dist/features/DynamicValue/types.d.ts

@@ -0,0 +1,23 @@
+import type { CollectionSlug, Field, GlobalSlug } from 'payload';
+export type DynamicValueOption = {
+    label: string;
+    value: string;
+};
+export type DynamicValueConfig = {
+    /**
+     * Directly provided fields for dynamic values
+     */
+    fields?: Field[];
+    /**
+     * Collections to pull fields from
+     */
+    collections?: CollectionSlug[];
+    /**
+     * Globals to pull fields from
+     */
+    globals?: GlobalSlug[];
+    /**
+     * The trigger character to use in the editor. Defaults to '@'
+     */
+    trigger?: string;
+};

package/dist/features/DynamicValue/types.d.ts.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "file": "types.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "../../../src/features/DynamicValue/types.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC"
+}

package/dist/features/DynamicValue/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/features/DynamicValue/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/DynamicValue/types.ts"],"sourcesContent":["import type { CollectionSlug, Field, GlobalSlug } from 'payload'\r\n\r\nexport type DynamicValueOption = {\r\n  label: string\r\n  value: string\r\n}\r\n\r\nexport type DynamicValueConfig = {\r\n  /**\r\n   * Directly provided fields for dynamic values\r\n   */\r\n  fields?: Field[]\r\n  /**\r\n   * Collections to pull fields from\r\n   */\r\n  collections?: CollectionSlug[]\r\n  /**\r\n   * Globals to pull fields from\r\n   */\r\n  globals?: GlobalSlug[]\r\n  /**\r\n   * The trigger character to use in the editor. Defaults to '@'\r\n   */\r\n  trigger?: string\r\n}\r\n"],"names":[],"mappings":"AAOA,WAiBC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import type { Config } from 'payload';
+import type { DynamicValueConfig } from './features/DynamicValue/types.js';
+export type { DynamicValueConfig, DynamicValueOption } from './features/DynamicValue/types.js';
+export declare const dynamicValuePlugin: (pluginOptions: DynamicValueConfig) => (config: Config) => Config;

package/dist/index.d.ts.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "file": "index.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "../src/index.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,YAAY,EACV,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,kCAAkC,CAAC"
+}

package/dist/index.js

@@ -0,0 +1,6 @@
+export const dynamicValuePlugin = (pluginOptions)=>(config)=>{
+        // Standard plugin wrapper
+        return config;
+    };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { Config } from 'payload'\nimport type { DynamicValueConfig } from './features/DynamicValue/types.js'\n\nexport type { DynamicValueConfig, DynamicValueOption } from './features/DynamicValue/types.js'\n\nexport const dynamicValuePlugin =\n  (pluginOptions: DynamicValueConfig) =>\n  (config: Config): Config => {\n    // Standard plugin wrapper\n    return config\n  }\n"],"names":["dynamicValuePlugin","pluginOptions","config"],"mappings":"AAKA,OAAO,MAAMA,qBACX,CAACC,gBACD,CAACC;QACC,0BAA0B;QAC1B,OAAOA;IACT,EAAC"}

package/dist/nodes/DynamicValueNode/index.d.ts

@@ -0,0 +1,26 @@
+import { DecoratorNode, type DOMConversionMap, type DOMExportOutput, type LexicalNode, type NodeKey, type SerializedLexicalNode, type Spread } from '@payloadcms/richtext-lexical/lexical';
+import React from 'react';
+export type SerializedDynamicValueNode = Spread<{
+    field: string;
+    label?: string;
+}, SerializedLexicalNode>;
+export declare class DynamicValueNode extends DecoratorNode<React.ReactNode> {
+    __field: string;
+    __label: string;
+    constructor(field: string, label?: string, key?: NodeKey);
+    static clone(node: DynamicValueNode): DynamicValueNode;
+    static getType(): string;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedDynamicValueNode): DynamicValueNode;
+    createDOM(): HTMLElement;
+    decorate(): React.ReactNode;
+    exportDOM(): DOMExportOutput;
+    exportJSON(): SerializedDynamicValueNode;
+    getField(): string;
+    getTextContent(): string;
+    isInline(): boolean;
+    isToken(): boolean;
+    updateDOM(): boolean;
+}
+export declare function $createDynamicValueNode(field: string, label?: string): DynamicValueNode;
+export declare function $isDynamicValueNode(node: LexicalNode | null | undefined): node is DynamicValueNode;

package/dist/nodes/DynamicValueNode/index.d.ts.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "file": "index.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "../../../src/nodes/DynamicValueNode/index.tsx"
+  ],
+  "names": [],
+  "mappings": "AAAA,OAAO,EACL,aAAa,EACb,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,MAAM,EACP,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,0BAA0B,GAAG,MAAM,CAC7C;IACE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,EACD,qBAAqB,CACtB,CAAC;AAEF,qBAAa,gBAAiB,SAAQ,aAAa,CAAC,KAAK,CAAC,SAAS,CAAC;IAClE,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAEhB,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,gBAAgB,GAAG,gBAAgB;gBAI1C,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO;IAMxD,MAAM,CAAC,UAAU,CACf,cAAc,EAAE,0BAA0B,GACzC,gBAAgB;IAInB,UAAU,IAAI,0BAA0B;IASxC,SAAS,IAAI,WAAW;IAMxB,SAAS,IAAI,OAAO;IAIpB,QAAQ,IAAI,KAAK,CAAC,SAAS;IA4B3B,QAAQ,IAAI,MAAM;CAGnB;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,MAAM,EACb,KAAK,CAAC,EAAE,MAAM,GACb,gBAAgB,CAElB;AAED,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,gBAAgB,CAE1B"
+}

package/dist/nodes/DynamicValueNode/index.js

@@ -0,0 +1,125 @@
+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 {
+    __field;
+    __label;
+    constructor(field, label, key){
+        super(key);
+        this.__field = field;
+        this.__label = label ?? field;
+    }
+    static clone(node) {
+        return new DynamicValueNode(node.__field, node.__label, node.getKey());
+    }
+    static getType() {
+        return 'dynamic-value';
+    }
+    static importDOM() {
+        return {
+            span: (domNode)=>{
+                if (!domNode.hasAttribute('data-payload-dynamic-value')) {
+                    return null;
+                }
+                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
+                };
+            }
+        };
+    }
+    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
+            ]
+        });
+    }
+    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;
+        return {
+            element
+        };
+    }
+    exportJSON() {
+        return {
+            type: 'dynamic-value',
+            field: this.__field,
+            label: this.__label,
+            version: 1
+        };
+    }
+    getField() {
+        return this.__field;
+    }
+    getTextContent() {
+        return this.__label;
+    }
+    isInline() {
+        return true;
+    }
+    isToken() {
+        return true;
+    }
+    updateDOM() {
+        return false;
+    }
+}
+export function $createDynamicValueNode(field, label) {
+    return new DynamicValueNode(field, label);
+}
+export function $isDynamicValueNode(node) {
+    return node?.getType() === 'dynamic-value';
+}
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,112 @@
+{
+  "name": "payloadcms-dynamic-value-richtext",
+  "version": "1.0.0",
+  "description": "Dynamic Value Rich Text Plugin for PayloadCMS",
+  "license": "MIT",
+  "author": "OD LABS",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./client": {
+      "import": "./src/exports/client.ts",
+      "types": "./src/exports/client.ts",
+      "default": "./src/exports/client.ts"
+    }
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm copyfiles && pnpm build:types && pnpm build:swc",
+    "build:swc": "swc ./src -d ./dist --config-file .swcrc --strip-leading-paths",
+    "build:types": "tsc --outDir dist --rootDir ./src",
+    "clean": "rimraf {dist,*.tsbuildinfo}",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
+    "dev": "next dev dev --turbo",
+    "dev:generate-importmap": "pnpm dev:payload generate:importmap",
+    "dev:generate-types": "pnpm dev:payload generate:types",
+    "dev:payload": "cross-env PAYLOAD_CONFIG_PATH=./dev/payload.config.ts payload",
+    "generate:importmap": "pnpm dev:generate-importmap",
+    "generate:types": "pnpm dev:generate-types",
+    "lint": "eslint",
+    "lint:fix": "eslint ./src --fix",
+    "test": "pnpm test:int && pnpm test:e2e",
+    "test:e2e": "playwright test",
+    "test:int": "vitest"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.2.0",
+    "@payloadcms/db-mongodb": "3.37.0",
+    "@payloadcms/db-postgres": "3.37.0",
+    "@payloadcms/db-sqlite": "3.37.0",
+    "@payloadcms/eslint-config": "3.9.0",
+    "@payloadcms/next": "3.37.0",
+    "@payloadcms/richtext-lexical": "3.37.0",
+    "@payloadcms/ui": "3.37.0",
+    "@playwright/test": "1.58.2",
+    "@swc-node/register": "1.10.9",
+    "@swc/cli": "0.6.0",
+    "@types/node": "22.19.9",
+    "@types/react": "19.2.9",
+    "@types/react-dom": "19.2.3",
+    "copyfiles": "2.4.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.23.0",
+    "eslint-config-next": "15.4.11",
+    "graphql": "^16.8.1",
+    "mongodb-memory-server": "10.1.4",
+    "next": "15.4.11",
+    "open": "^10.1.0",
+    "payload": "3.37.0",
+    "prettier": "^3.4.2",
+    "qs-esm": "7.0.2",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "rimraf": "3.0.2",
+    "sharp": "0.34.2",
+    "sort-package-json": "^2.10.0",
+    "typescript": "5.7.3",
+    "vite-tsconfig-paths": "6.0.5",
+    "vitest": "4.0.18"
+  },
+  "peerDependencies": {
+    "payload": "^3.37.0"
+  },
+  "engines": {
+    "node": "^18.20.2 || >=20.9.0",
+    "pnpm": "^9 || ^10"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "./client": {
+        "import": "./dist/exports/client.js",
+        "types": "./dist/exports/client.d.ts",
+        "default": "./dist/exports/client.js"
+      }
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "sharp",
+      "esbuild",
+      "unrs-resolver"
+    ]
+  },
+  "registry": "https://registry.npmjs.org/",
+  "dependencies": {
+    "lucide-react": "^0.575.0"
+  }
+}