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

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

@@ -1,13 +1,17 @@
 '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 { $createTextNode, $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 { useForm } from '@payloadcms/ui';
 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';
+export function $isDynamicValueNode(node) {
+    return node?.getType?.() === 'dynamic-value';
+}
 function useTriggerMatch(trigger) {
     return useCallback((text)=>{
         const triggerIndex = text.lastIndexOf(trigger);
@@ -31,98 +35,109 @@ function useTriggerMatch(trigger) {
         trigger
     ]);
 }
+const SelectIcon = (trigger)=>{
+    const IconToUse = trigger === '@' ? AtSign : trigger === '#' ? Hash : Variable;
+    return ()=>/*#__PURE__*/ _jsx("div", {
+            style: {
+                alignItems: 'center',
+                display: 'flex',
+                justifyContent: 'center',
+                opacity: 0.8
+            },
+            children: /*#__PURE__*/ _jsx(IconToUse, {
+                className: "icon",
+                focusable: "false",
+                size: 14,
+                strokeWidth: 1.5,
+                style: {
+                    color: 'currentColor'
+                }
+            })
+        });
+};
 const DynamicValuePlugin = ({ anchorElem, options: allOptions, trigger })=>{
     const [editor] = useLexicalComposerContext();
+    const { fields } = useForm();
     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)=>({
+        return (allOptions || []).filter((option)=>{
+            const val = fields[option.value]?.value;
+            const hasValue = val !== undefined && val !== null && val !== '';
+            return hasValue && (option.label.toLowerCase().includes(searchString) || option.value.toLowerCase().includes(searchString));
+        }).map((opt)=>({
                 ...opt,
                 key: opt.value
             }));
     }, [
         queryString,
-        allOptions
+        allOptions,
+        fields
     ]);
-    const TypeaheadMenu = LexicalTypeaheadMenuPlugin;
     const IconToUse = trigger === '@' ? AtSign : trigger === '#' ? Hash : Variable;
-    return /*#__PURE__*/ _jsx(TypeaheadMenu, {
-        anchorElem: anchorElem || (typeof document !== 'undefined' ? document.body : undefined),
+    return /*#__PURE__*/ _jsx(LexicalTypeaheadMenuPlugin, {
+        ...{
+            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",
+            return /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ _jsx("div", {
+                className: "slash-menu-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)',
+                    maxHeight: '400px',
                     minWidth: '260px',
-                    overflow: 'hidden',
-                    padding: '4px',
-                    zIndex: 100000
+                    overflowY: 'auto',
+                    padding: '8px'
                 },
-                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)=>{
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "slash-menu-popup__group",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "slash-menu-popup__group-title",
+                            children: "Dynamic Values"
+                        }),
+                        options.map((option, index)=>{
                             const isSelected = selectedIndex === index;
                             return /*#__PURE__*/ _jsxs("button", {
+                                "aria-selected": isSelected,
+                                className: `slash-menu-popup__item ${isSelected ? 'slash-menu-popup__item--selected' : ''}`,
                                 onClick: ()=>selectOptionAndCleanUp(option),
                                 onMouseEnter: ()=>setHighlightedIndex(index),
+                                role: "option",
                                 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%'
+                                    minHeight: '50px'
                                 },
+                                tabIndex: -1,
                                 type: "button",
                                 children: [
                                     /*#__PURE__*/ _jsx(IconToUse, {
-                                        size: 14,
+                                        className: "icon",
+                                        size: 20,
+                                        strokeWidth: 1.5,
                                         style: {
-                                            opacity: isSelected ? 1 : 0.4
+                                            flexShrink: 0
                                         }
                                     }),
-                                    /*#__PURE__*/ _jsxs("div", {
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        className: "slash-menu-popup__item-text",
                                         style: {
+                                            alignItems: 'flex-start',
                                             display: 'flex',
-                                            flexDirection: 'column'
+                                            flex: '1',
+                                            flexDirection: 'column',
+                                            marginLeft: '8px'
                                         },
                                         children: [
                                             /*#__PURE__*/ _jsx("span", {
+                                                className: "text",
                                                 style: {
                                                     fontSize: '13px',
-                                                    fontWeight: 500
+                                                    fontWeight: '500',
+                                                    lineHeight: 1.2
                                                 },
                                                 children: option.label
                                             }),
@@ -130,6 +145,8 @@ const DynamicValuePlugin = ({ anchorElem, options: allOptions, trigger })=>{
                                                 style: {
                                                     fontFamily: 'var(--font-mono)',
                                                     fontSize: '11px',
+                                                    lineHeight: 1.2,
+                                                    marginTop: '2px',
                                                     opacity: 0.5
                                                 },
                                                 children: option.value
@@ -139,8 +156,8 @@ const DynamicValuePlugin = ({ anchorElem, options: allOptions, trigger })=>{
                                 ]
                             }, option.value);
                         })
-                    })
-                ]
+                    ]
+                })
             }), anchor);
         },
         onQueryChange: setQueryString,
@@ -151,7 +168,8 @@ const DynamicValuePlugin = ({ anchorElem, options: allOptions, trigger })=>{
                 }
                 const node = $createDynamicValueNode(option.value, option.label);
                 $insertNodes([
-                    node
+                    node,
+                    $createTextNode(' ')
                 ]);
                 closeMenu();
             });
@@ -160,10 +178,120 @@ const DynamicValuePlugin = ({ anchorElem, options: allOptions, trigger })=>{
         triggerFn: checkForTriggerMatch
     });
 };
-export const DynamicValueFeatureClient = createClientFeature(({ props })=>{
+const DropdownItemComponent = ({ editor, field, item, trigger })=>{
+    const { fields } = useForm();
+    const val = fields[field.value]?.value;
+    const hasValue = val !== undefined && val !== null && val !== '';
+    if (!hasValue) {
+        return null;
+    }
+    const IconToUse = trigger === '@' ? AtSign : trigger === '#' ? Hash : Variable;
+    return /*#__PURE__*/ _jsx("button", {
+        "aria-label": field.label,
+        className: "btn toolbar-popup__dropdown-item btn--icon btn--icon-style-none btn--size-medium btn--icon-position-left btn--style-none",
+        "data-item-key": field.value,
+        onClick: (e)=>{
+            e.preventDefault();
+            item.onSelect({
+                editor,
+                isActive: false
+            });
+        },
+        style: {
+            minHeight: '50px',
+            whiteSpace: 'nowrap'
+        },
+        title: field.label,
+        type: "button",
+        children: /*#__PURE__*/ _jsxs("span", {
+            className: "btn__content",
+            style: {
+                alignItems: 'center',
+                display: 'flex'
+            },
+            children: [
+                /*#__PURE__*/ _jsxs("span", {
+                    className: "btn__label",
+                    style: {
+                        alignItems: 'flex-start',
+                        display: 'flex',
+                        flex: 1,
+                        flexDirection: 'column',
+                        marginLeft: '8px',
+                        marginRight: '8px'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "text",
+                            style: {
+                                fontSize: '13px',
+                                fontWeight: 500,
+                                lineHeight: '1.2'
+                            },
+                            children: field.label
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            style: {
+                                fontFamily: 'var(--font-mono)',
+                                fontSize: '11px',
+                                lineHeight: '1.2',
+                                marginTop: '2px',
+                                opacity: 0.5
+                            },
+                            children: field.value
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("span", {
+                    className: "btn__icon",
+                    style: {
+                        flexShrink: 0
+                    },
+                    children: /*#__PURE__*/ _jsx(IconToUse, {
+                        size: 20,
+                        strokeWidth: 1.5,
+                        style: {
+                            opacity: 0.4
+                        }
+                    })
+                })
+            ]
+        })
+    });
+};
+export const DynamicValueFeatureClient = createClientFeature((args)=>{
+    const props = args?.clientFeatureProps || args?.props || {};
     const options = props?.options || [];
     const trigger = props?.trigger || '@';
-    const IconToUse = trigger === '@' ? AtSign : trigger === '#' ? Hash : Variable;
+    const groupItems = options.map((field)=>({
+            Component: ({ editor, item })=>/*#__PURE__*/ _jsx(DropdownItemComponent, {
+                    editor: editor,
+                    field: field,
+                    item: item,
+                    trigger: trigger
+                }),
+            isActive: ()=>false,
+            isEnabled: ()=>true,
+            key: `dv-item-${field.value}`,
+            label: field.label,
+            onSelect: ({ editor })=>{
+                editor.update(()=>{
+                    const node = $createDynamicValueNode(field.value, field.label);
+                    $insertNodes([
+                        node,
+                        $createTextNode(' ')
+                    ]);
+                });
+            },
+            order: 1
+        }));
+    const toolbarGroup = {
+        type: 'dropdown',
+        ChildComponent: SelectIcon(trigger),
+        items: groupItems,
+        key: 'dynamic-value-toolbar-group',
+        order: 100
+    };
     return {
         nodes: [
             DynamicValueNode
@@ -181,37 +309,7 @@ export const DynamicValueFeatureClient = createClientFeature(({ props })=>{
         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
-                }
+                toolbarGroup
             ]
         }
     };

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

@@ -1 +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":"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"}
+{"version":3,"sources":["../../../src/features/DynamicValue/feature.client.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { createClientFeature } from '@payloadcms/richtext-lexical/client'\r\nimport {\r\n  $createTextNode,\r\n  $insertNodes,\r\n  type LexicalNode,\r\n} 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 { useForm } from '@payloadcms/ui'\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 { $createDynamicValueNode, DynamicValueNode } from '../../nodes/DynamicValueNode/index.js'\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\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 SelectIcon = (trigger: string) => {\r\n  const IconToUse = trigger === '@' ? AtSign : trigger === '#' ? Hash : Variable\r\n  return () => (\r\n    <div style={{ alignItems: 'center', display: 'flex', justifyContent: 'center', opacity: 0.8 }}>\r\n      <IconToUse\r\n        className=\"icon\"\r\n        focusable=\"false\"\r\n        size={14}\r\n        strokeWidth={1.5}\r\n        style={{ color: 'currentColor' }}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\nconst DynamicValuePlugin = ({\r\n  anchorElem,\r\n  options: allOptions,\r\n  trigger,\r\n}: {\r\n  anchorElem?: HTMLElement\r\n  options: any[]\r\n  trigger: string\r\n}) => {\r\n  const [editor] = useLexicalComposerContext()\r\n  const { fields } = useForm()\r\n  const [queryString, setQueryString] = useState<null | string>(null)\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((option) => {\r\n        const val = fields[option.value]?.value\r\n        const hasValue = val !== undefined && val !== null && val !== ''\r\n        return (\r\n          hasValue &&\r\n          (option.label.toLowerCase().includes(searchString) ||\r\n            option.value.toLowerCase().includes(searchString))\r\n        )\r\n      })\r\n      .map((opt) => ({\r\n        ...opt,\r\n        key: opt.value,\r\n      }))\r\n  }, [queryString, allOptions, fields])\r\n\r\n  const IconToUse = trigger === '@' ? AtSign : trigger === '#' ? Hash : Variable\r\n\r\n  return (\r\n    <LexicalTypeaheadMenuPlugin\r\n      {...({\r\n        anchorElem: anchorElem || (typeof document !== 'undefined' ? document.body : undefined),\r\n      } as any)}\r\n      menuRenderFn={(\r\n        anchorElementRef,\r\n        { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },\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=\"slash-menu-popup\"\r\n            style={{\r\n              maxHeight: '400px',\r\n              minWidth: '260px',\r\n              overflowY: 'auto',\r\n              padding: '8px',\r\n            }}\r\n          >\r\n            <div className=\"slash-menu-popup__group\">\r\n              <div className=\"slash-menu-popup__group-title\">Dynamic Values</div>\r\n              {options.map((option, index) => {\r\n                const isSelected = selectedIndex === index\r\n                return (\r\n                  <button\r\n                    aria-selected={isSelected}\r\n                    className={`slash-menu-popup__item ${isSelected ? 'slash-menu-popup__item--selected' : ''}`}\r\n                    key={option.value}\r\n                    onClick={() => selectOptionAndCleanUp(option)}\r\n                    onMouseEnter={() => setHighlightedIndex(index)}\r\n                    role=\"option\"\r\n                    style={{ minHeight: '50px' }}\r\n                    tabIndex={-1}\r\n                    type=\"button\"\r\n                  >\r\n                    <IconToUse\r\n                      className=\"icon\"\r\n                      size={20}\r\n                      strokeWidth={1.5}\r\n                      style={{ flexShrink: 0 }}\r\n                    />\r\n                    <span\r\n                      className=\"slash-menu-popup__item-text\"\r\n                      style={{\r\n                        alignItems: 'flex-start',\r\n                        display: 'flex',\r\n                        flex: '1',\r\n                        flexDirection: 'column',\r\n                        marginLeft: '8px',\r\n                      }}\r\n                    >\r\n                      <span\r\n                        className=\"text\"\r\n                        style={{\r\n                          fontSize: '13px',\r\n                          fontWeight: '500',\r\n                          lineHeight: 1.2,\r\n                        }}\r\n                      >\r\n                        {option.label}\r\n                      </span>\r\n                      <span\r\n                        style={{\r\n                          fontFamily: 'var(--font-mono)',\r\n                          fontSize: '11px',\r\n                          lineHeight: 1.2,\r\n                          marginTop: '2px',\r\n                          opacity: 0.5,\r\n                        }}\r\n                      >\r\n                        {option.value}\r\n                      </span>\r\n                    </span>\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, closeMenu) => {\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, $createTextNode(' ')])\r\n          closeMenu()\r\n        })\r\n      }}\r\n      options={options as any}\r\n      triggerFn={checkForTriggerMatch as any}\r\n    />\r\n  )\r\n}\r\n\r\nconst DropdownItemComponent = ({ editor, field, item, trigger }: any) => {\r\n  const { fields } = useForm()\r\n  const val = fields[field.value]?.value\r\n  const hasValue = val !== undefined && val !== null && val !== ''\r\n\r\n  if (!hasValue) {\r\n    return null\r\n  }\r\n\r\n  const IconToUse = trigger === '@' ? AtSign : trigger === '#' ? Hash : Variable\r\n\r\n  return (\r\n    <button\r\n      aria-label={field.label}\r\n      className=\"btn toolbar-popup__dropdown-item btn--icon btn--icon-style-none btn--size-medium btn--icon-position-left btn--style-none\"\r\n      data-item-key={field.value}\r\n      onClick={(e) => {\r\n        e.preventDefault()\r\n        item.onSelect({ editor, isActive: false })\r\n      }}\r\n      style={{ minHeight: '50px', whiteSpace: 'nowrap' }}\r\n      title={field.label}\r\n      type=\"button\"\r\n    >\r\n      <span className=\"btn__content\" style={{ alignItems: 'center', display: 'flex' }}>\r\n        <span\r\n          className=\"btn__label\"\r\n          style={{\r\n            alignItems: 'flex-start',\r\n            display: 'flex',\r\n            flex: 1,\r\n            flexDirection: 'column',\r\n            marginLeft: '8px',\r\n            marginRight: '8px',\r\n          }}\r\n        >\r\n          <span className=\"text\" style={{ fontSize: '13px', fontWeight: 500, lineHeight: '1.2' }}>\r\n            {field.label}\r\n          </span>\r\n          <span\r\n            style={{\r\n              fontFamily: 'var(--font-mono)',\r\n              fontSize: '11px',\r\n              lineHeight: '1.2',\r\n              marginTop: '2px',\r\n              opacity: 0.5,\r\n            }}\r\n          >\r\n            {field.value}\r\n          </span>\r\n        </span>\r\n        <span className=\"btn__icon\" style={{ flexShrink: 0 }}>\r\n          <IconToUse size={20} strokeWidth={1.5} style={{ opacity: 0.4 }} />\r\n        </span>\r\n      </span>\r\n    </button>\r\n  )\r\n}\r\n\r\nexport const DynamicValueFeatureClient = createClientFeature((args: any) => {\r\n  const props = args?.clientFeatureProps || args?.props || {}\r\n  const options = props?.options || []\r\n  const trigger = props?.trigger || '@'\r\n\r\n  const groupItems = options.map((field: any) => ({\r\n    Component: ({ editor, item }: any) => (\r\n      <DropdownItemComponent editor={editor} field={field} item={item} trigger={trigger} />\r\n    ),\r\n    isActive: () => false,\r\n    isEnabled: () => true,\r\n    key: `dv-item-${field.value}`,\r\n    label: field.label,\r\n    onSelect: ({ editor }: any) => {\r\n      editor.update(() => {\r\n        const node = $createDynamicValueNode(field.value, field.label)\r\n        $insertNodes([node, $createTextNode(' ')])\r\n      })\r\n    },\r\n    order: 1,\r\n  }))\r\n\r\n  const toolbarGroup = {\r\n    type: 'dropdown' as const,\r\n    ChildComponent: SelectIcon(trigger),\r\n    items: groupItems,\r\n    key: 'dynamic-value-toolbar-group', // Unique key to avoid Link feature collision\r\n    order: 100,\r\n  }\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: [toolbarGroup],\r\n    },\r\n  }\r\n})\r\n"],"names":["createClientFeature","$createTextNode","$insertNodes","useLexicalComposerContext","LexicalTypeaheadMenuPlugin","useForm","AtSign","Hash","Variable","React","useCallback","useMemo","useState","ReactDOM","$createDynamicValueNode","DynamicValueNode","$isDynamicValueNode","node","getType","useTriggerMatch","trigger","text","triggerIndex","lastIndexOf","charBeforeTrigger","test","matchingString","slice","leadOffset","replaceableString","SelectIcon","IconToUse","div","style","alignItems","display","justifyContent","opacity","className","focusable","size","strokeWidth","color","DynamicValuePlugin","anchorElem","options","allOptions","editor","fields","queryString","setQueryString","checkForTriggerMatch","searchString","toLowerCase","filter","option","val","value","hasValue","undefined","label","includes","map","opt","key","document","body","menuRenderFn","anchorElementRef","selectedIndex","selectOptionAndCleanUp","setHighlightedIndex","anchor","current","length","createPortal","maxHeight","minWidth","overflowY","padding","index","isSelected","button","aria-selected","onClick","onMouseEnter","role","minHeight","tabIndex","type","flexShrink","span","flex","flexDirection","marginLeft","fontSize","fontWeight","lineHeight","fontFamily","marginTop","onQueryChange","onSelectOption","textNodeToReplace","closeMenu","update","remove","triggerFn","DropdownItemComponent","field","item","aria-label","data-item-key","e","preventDefault","onSelect","isActive","whiteSpace","title","marginRight","DynamicValueFeatureClient","args","props","clientFeatureProps","groupItems","Component","isEnabled","order","toolbarGroup","ChildComponent","items","nodes","plugins","pluginProps","position","sanitizedClientFeatureProps","toolbarFixed","groups"],"mappings":"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"}

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

@@ -1,5 +1,16 @@
-import type { DynamicValueConfig, DynamicValueOption } from './types.js';
-export declare const DynamicValueFeature: import("@payloadcms/richtext-lexical").FeatureProviderProviderServer<DynamicValueConfig, object, {
-    options: DynamicValueOption[];
-    trigger: string;
-}>;
+import type { Field } from 'payload';
+export type DynamicValueFeatureProps = {
+    collections?: string[];
+    fields?: Field[];
+    globals?: string[];
+    trigger?: string;
+};
+type DynamicValueOption = {
+    label: string;
+    value: string;
+};
+export declare const DynamicValueFeature: import("@payloadcms/richtext-lexical").FeatureProviderProviderServer<DynamicValueFeatureProps, DynamicValueFeatureProps, {
+    options: DynamicValueOption[];
+    trigger: string;
+}>;
+export {};

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

@@ -1,62 +1,101 @@
 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);
-                    });
-                }
+import { DYNAMIC_VALUE_NODE_TYPE, DynamicValueNode, LEGACY_DYNAMIC_VALUE_NODE_TYPE } from '../../nodes/DynamicValueNode/index.js';
+const blockedFieldTypes = new Set([
+    'array',
+    'blocks',
+    'richText',
+    'ui',
+    'upload'
+]);
+const flattenFields = (fields, options, prefix = '')=>{
+    for (const field of fields){
+        const fieldName = 'name' in field ? field.name : undefined;
+        const hasFieldName = typeof fieldName === 'string' && fieldName.length > 0;
+        const nextPrefix = hasFieldName ? prefix ? `${prefix}.${fieldName}` : fieldName : prefix;
+        if (hasFieldName && typeof field.type === 'string' && !blockedFieldTypes.has(field.type) && nextPrefix) {
+            const fieldLabel = 'label' in field && typeof field.label === 'string' ? field.label : fieldName;
+            options.push({
+                label: fieldLabel,
+                value: nextPrefix
             });
+        }
+        if ('fields' in field && Array.isArray(field.fields)) {
+            flattenFields(field.fields, options, nextPrefix);
+        }
+        if (field.type === 'tabs' && Array.isArray(field.tabs)) {
+            for (const tab of field.tabs){
+                if (tab.fields) {
+                    flattenFields(tab.fields, options, prefix);
+                }
+            }
+        }
+    }
+};
+const mapToEnabledSlugs = (value)=>{
+    if (Array.isArray(value)) {
+        return value;
+    }
+    if (!value || typeof value !== 'object') {
+        return [];
+    }
+    return Object.entries(value).filter(([, enabled])=>Boolean(enabled)).map(([slug])=>slug);
+};
+export const DynamicValueFeature = createServerFeature({
+    feature: ({ config: payloadConfig, props: featureProps })=>{
+        const pluginOptions = payloadConfig.custom?.dynamicValue || {};
+        const props = {
+            ...pluginOptions,
+            ...featureProps || {}
         };
-        // 1. Process directly provided fields
-        if (props?.fields) {
-            flattenFields(props.fields);
+        const options = [];
+        const trigger = props.trigger || '@';
+        if (props.fields) {
+            flattenFields(props.fields, options);
         }
-        // 2. Process collections
-        if (props?.collections && payloadConfig.collections) {
-            props.collections.forEach((slug)=>{
-                const collection = payloadConfig.collections?.find((c)=>c.slug === slug);
+        if (props.collections && payloadConfig.collections) {
+            const collectionSlugs = mapToEnabledSlugs(props.collections);
+            for (const slug of collectionSlugs){
+                const collection = payloadConfig.collections.find((item)=>item.slug === slug);
                 if (collection) {
-                    flattenFields(collection.fields, slug);
+                    flattenFields(collection.fields, options, slug);
                 }
-            });
+            }
         }
-        // 3. Process globals
-        if (props?.globals && payloadConfig.globals) {
-            props.globals.forEach((slug)=>{
-                const global = payloadConfig.globals?.find((g)=>g.slug === slug);
+        if (props.globals && payloadConfig.globals) {
+            const globalSlugs = mapToEnabledSlugs(props.globals);
+            for (const slug of globalSlugs){
+                const global = payloadConfig.globals.find((item)=>item.slug === slug);
                 if (global) {
-                    flattenFields(global.fields, slug);
+                    flattenFields(global.fields, options, slug);
                 }
-            });
+            }
         }
         return {
             ClientFeature: '@od-labs/payloadcms-dynamic-value-richtext/client#DynamicValueFeatureClient',
-            clientProps: {
+            clientFeatureProps: {
                 options,
                 trigger
             },
             key: 'dynamicValue',
             nodes: [
                 createNode({
+                    converters: {
+                        html: {
+                            converter: ({ node })=>{
+                                const field = node.field || node.value || '';
+                                const label = node.label || field;
+                                return `<span data-payload-dynamic-value="true" data-payload-dynamic-field="${field}">${label}</span>`;
+                            },
+                            nodeTypes: [
+                                DYNAMIC_VALUE_NODE_TYPE,
+                                LEGACY_DYNAMIC_VALUE_NODE_TYPE
+                            ]
+                        }
+                    },
                     node: DynamicValueNode
                 })
-            ]
+            ],
+            sanitizedServerFeatureProps: props
         };
     },
     key: 'dynamicValue'