@payloadcms/richtext-lexical 3.77.0-canary.3 → 3.77.0-internal.0b6b4e4

package/dist/field/RichTextViewProvider.js

@@ -0,0 +1,91 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useControllableState } from '@payloadcms/ui';
+import React, { createContext, use, useMemo } from 'react';
+const RichTextViewContext = /*#__PURE__*/createContext({
+  currentView: 'default',
+  inheritable: false,
+  setCurrentView: () => {}
+});
+/**
+ * Provider for managing richtext editor view state and its inheritance.
+ *
+ * Handles two key scenarios:
+ * 1. **Explicit view setting**: Wrap with `currentView` and `inheritable={true}` to force nested editors to a specific view
+ * 2. **View map inheritance**: Nested editors inherit `views` from parents, allowing view switching across the hierarchy
+ *
+ * When a nested editor inherits from a parent, its ViewSelector is hidden because the view is controlled by an ancestor.
+ *
+ * @example
+ * Force all nested richtext editors to use "frontend" view:
+ * ```tsx
+ * <RichTextViewProvider currentView="frontend" inheritable={true}>
+ *   <MyForm /> {/* All richtext fields inside will use "frontend" view }
+ * </RichTextViewProvider>
+ * ```
+ */
+export const RichTextViewProvider = args => {
+  const parentContext = useRichTextView();
+  // Track if this provider explicitly sets currentView (not just using the default)
+  const hasOwnExplicitView = args.currentView !== undefined;
+  const hasInheritedViews = parentContext.inheritable && Boolean(parentContext.hasExplicitCurrentView);
+  // This provider has explicit currentView if it sets one OR inherits one from parent
+  const hasExplicitCurrentView = hasOwnExplicitView || parentContext.inheritable && Boolean(parentContext.hasExplicitCurrentView);
+  const {
+    children,
+    currentView: currentViewFromProps,
+    inheritable,
+    views
+  } = {
+    children: args.children,
+    // Only inherit currentView if parent has an explicit one
+    currentView: parentContext.inheritable && parentContext.hasExplicitCurrentView ? parentContext.currentView : args.currentView,
+    // Propagate inheritable flag through the hierarchy
+    inheritable: parentContext.inheritable || args.inheritable,
+    // Only inherit views if parent has a views map
+    views: parentContext.inheritable && parentContext.views ? parentContext.views : args.views
+  };
+  const [currentView, setCurrentView] = useControllableState(currentViewFromProps, 'default');
+  const value = useMemo(() => {
+    const currentViewMap = views ? views[currentView] || views.default : undefined;
+    return {
+      currentView,
+      currentViewMap,
+      hasExplicitCurrentView,
+      hasInheritedViews,
+      inheritable,
+      setCurrentView,
+      views
+    };
+  }, [currentView, inheritable, hasExplicitCurrentView, hasInheritedViews, setCurrentView, views]);
+  return /*#__PURE__*/_jsx(RichTextViewContext, {
+    value: value,
+    children: children
+  });
+};
+/**
+ * Access the current richtext editor view context.
+ *
+ * Returns the active view name, node overrides, inheritance state, and a function to switch views.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { currentView, currentViewMap, hasInheritedViews, setCurrentView } = useRichTextView()
+ *
+ *   return (
+ *     <div>
+ *       <p>Active view: {currentView}</p>
+ *       {hasInheritedViews && <p>View inherited from parent</p>}
+ *       {currentViewMap?.heading && <p>Custom heading renderer active</p>}
+ *       <button onClick={() => setCurrentView('frontend')}>Switch to frontend</button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export function useRichTextView() {
+  return use(RichTextViewContext);
+}
+//# sourceMappingURL=RichTextViewProvider.js.map

package/dist/field/RichTextViewProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextViewProvider.js","names":["useControllableState","React","createContext","use","useMemo","RichTextViewContext","currentView","inheritable","setCurrentView","RichTextViewProvider","args","parentContext","useRichTextView","hasOwnExplicitView","undefined","hasInheritedViews","Boolean","hasExplicitCurrentView","children","currentViewFromProps","views","value","currentViewMap","default","_jsx"],"sources":["../../src/field/RichTextViewProvider.tsx"],"sourcesContent":["'use client'\nimport { useControllableState } from '@payloadcms/ui'\nimport React, { createContext, use, useMemo } from 'react'\n\nimport type { LexicalEditorNodeMap, LexicalEditorViewMap } from '../types.js'\n\n/**\n * Context for managing richtext editor view state and inheritance.\n */\ntype RichTextViewContextType = {\n  /**\n   * The currently active view name (e.g., 'default', 'frontend', 'debug').\n   */\n  currentView: string\n  /**\n   * The resolved node map for the current view, containing rendering overrides for each node type.\n   */\n  currentViewMap?: LexicalEditorNodeMap\n  /**\n   * True if the current view was explicitly set (via prop) by this provider or an ancestor.\n   * Used to distinguish intentional view settings from automatic defaults.\n   */\n  hasExplicitCurrentView?: boolean\n  /**\n   * True if this provider inherited its view from a parent provider.\n   * When true, the ViewSelector is hidden because the view is controlled by an ancestor.\n   */\n  hasInheritedViews?: boolean\n  /**\n   * If true, nested richtext editors will inherit this provider's currentView and views.\n   */\n  inheritable?: boolean\n  /**\n   * Function to programmatically change the current view.\n   */\n  setCurrentView: (view: string) => void\n  /**\n   * Map of all available views for this editor. Each key is a view name, each value contains\n   * admin config, node overrides, and lexical config for that view.\n   */\n  views?: LexicalEditorViewMap\n}\n\nconst RichTextViewContext = createContext<RichTextViewContextType>({\n  currentView: 'default',\n  inheritable: false,\n  setCurrentView: () => {},\n})\n\n/**\n * Provider for managing richtext editor view state and its inheritance.\n *\n * Handles two key scenarios:\n * 1. **Explicit view setting**: Wrap with `currentView` and `inheritable={true}` to force nested editors to a specific view\n * 2. **View map inheritance**: Nested editors inherit `views` from parents, allowing view switching across the hierarchy\n *\n * When a nested editor inherits from a parent, its ViewSelector is hidden because the view is controlled by an ancestor.\n *\n * @example\n * Force all nested richtext editors to use \"frontend\" view:\n * ```tsx\n * <RichTextViewProvider currentView=\"frontend\" inheritable={true}>\n *   <MyForm /> {/* All richtext fields inside will use \"frontend\" view }\n * </RichTextViewProvider>\n * ```\n */\nexport const RichTextViewProvider: React.FC<{\n  children: React.ReactNode\n  currentView?: string\n  inheritable?: boolean\n  views?: LexicalEditorViewMap\n}> = (args) => {\n  const parentContext = useRichTextView()\n\n  // Track if this provider explicitly sets currentView (not just using the default)\n  const hasOwnExplicitView = args.currentView !== undefined\n\n  const hasInheritedViews =\n    parentContext.inheritable && Boolean(parentContext.hasExplicitCurrentView)\n\n  // This provider has explicit currentView if it sets one OR inherits one from parent\n  const hasExplicitCurrentView =\n    hasOwnExplicitView ||\n    (parentContext.inheritable && Boolean(parentContext.hasExplicitCurrentView))\n\n  const {\n    children,\n    currentView: currentViewFromProps,\n    inheritable,\n    views,\n  } = {\n    children: args.children,\n    // Only inherit currentView if parent has an explicit one\n    currentView:\n      parentContext.inheritable && parentContext.hasExplicitCurrentView\n        ? parentContext.currentView\n        : args.currentView,\n    // Propagate inheritable flag through the hierarchy\n    inheritable: parentContext.inheritable || args.inheritable,\n    // Only inherit views if parent has a views map\n    views: parentContext.inheritable && parentContext.views ? parentContext.views : args.views,\n  }\n\n  const [currentView, setCurrentView] = useControllableState(currentViewFromProps, 'default')\n\n  const value = useMemo(() => {\n    const currentViewMap = views ? views[currentView] || views.default : undefined\n    return {\n      currentView,\n      currentViewMap,\n      hasExplicitCurrentView,\n      hasInheritedViews,\n      inheritable,\n      setCurrentView,\n      views,\n    }\n  }, [currentView, inheritable, hasExplicitCurrentView, hasInheritedViews, setCurrentView, views])\n\n  return <RichTextViewContext value={value}>{children}</RichTextViewContext>\n}\n\n/**\n * Access the current richtext editor view context.\n *\n * Returns the active view name, node overrides, inheritance state, and a function to switch views.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { currentView, currentViewMap, hasInheritedViews, setCurrentView } = useRichTextView()\n *\n *   return (\n *     <div>\n *       <p>Active view: {currentView}</p>\n *       {hasInheritedViews && <p>View inherited from parent</p>}\n *       {currentViewMap?.heading && <p>Custom heading renderer active</p>}\n *       <button onClick={() => setCurrentView('frontend')}>Switch to frontend</button>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useRichTextView(): RichTextViewContextType {\n  return use(RichTextViewContext)\n}\n"],"mappings":"AAAA;;;AACA,SAASA,oBAAoB,QAAQ;AACrC,OAAOC,KAAA,IAASC,aAAa,EAAEC,GAAG,EAAEC,OAAO,QAAQ;AAyCnD,MAAMC,mBAAA,gBAAsBH,aAAA,CAAuC;EACjEI,WAAA,EAAa;EACbC,WAAA,EAAa;EACbC,cAAA,EAAgBA,CAAA,MAAO;AACzB;AAEA;;;;;;;;;;;;;;;;;AAiBA,OAAO,MAAMC,oBAAA,GAKPC,IAAA;EACJ,MAAMC,aAAA,GAAgBC,eAAA;EAEtB;EACA,MAAMC,kBAAA,GAAqBH,IAAA,CAAKJ,WAAW,KAAKQ,SAAA;EAEhD,MAAMC,iBAAA,GACJJ,aAAA,CAAcJ,WAAW,IAAIS,OAAA,CAAQL,aAAA,CAAcM,sBAAsB;EAE3E;EACA,MAAMA,sBAAA,GACJJ,kBAAA,IACCF,aAAA,CAAcJ,WAAW,IAAIS,OAAA,CAAQL,aAAA,CAAcM,sBAAsB;EAE5E,MAAM;IACJC,QAAQ;IACRZ,WAAA,EAAaa,oBAAoB;IACjCZ,WAAW;IACXa;EAAK,CACN,GAAG;IACFF,QAAA,EAAUR,IAAA,CAAKQ,QAAQ;IACvB;IACAZ,WAAA,EACEK,aAAA,CAAcJ,WAAW,IAAII,aAAA,CAAcM,sBAAsB,GAC7DN,aAAA,CAAcL,WAAW,GACzBI,IAAA,CAAKJ,WAAW;IACtB;IACAC,WAAA,EAAaI,aAAA,CAAcJ,WAAW,IAAIG,IAAA,CAAKH,WAAW;IAC1D;IACAa,KAAA,EAAOT,aAAA,CAAcJ,WAAW,IAAII,aAAA,CAAcS,KAAK,GAAGT,aAAA,CAAcS,KAAK,GAAGV,IAAA,CAAKU;EACvF;EAEA,MAAM,CAACd,WAAA,EAAaE,cAAA,CAAe,GAAGR,oBAAA,CAAqBmB,oBAAA,EAAsB;EAEjF,MAAME,KAAA,GAAQjB,OAAA,CAAQ;IACpB,MAAMkB,cAAA,GAAiBF,KAAA,GAAQA,KAAK,CAACd,WAAA,CAAY,IAAIc,KAAA,CAAMG,OAAO,GAAGT,SAAA;IACrE,OAAO;MACLR,WAAA;MACAgB,cAAA;MACAL,sBAAA;MACAF,iBAAA;MACAR,WAAA;MACAC,cAAA;MACAY;IACF;EACF,GAAG,CAACd,WAAA,EAAaC,WAAA,EAAaU,sBAAA,EAAwBF,iBAAA,EAAmBP,cAAA,EAAgBY,KAAA,CAAM;EAE/F,oBAAOI,IAAA,CAACnB,mBAAA;IAAoBgB,KAAA,EAAOA,KAAA;cAAQH;;AAC7C;AAEA;;;;;;;;;;;;;;;;;;;;;AAqBA,OAAO,SAASN,gBAAA;EACd,OAAOT,GAAA,CAAIE,mBAAA;AACb","ignoreList":[]}

package/dist/field/ViewSelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './ViewSelector.scss';
+export declare function ViewSelector(): null | React.ReactElement;
+//# sourceMappingURL=ViewSelector.d.ts.map

package/dist/field/ViewSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSelector.d.ts","sourceRoot":"","sources":["../../src/field/ViewSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,qBAAqB,CAAA;AAE5B,wBAAgB,YAAY,IAAI,IAAI,GAAG,KAAK,CAAC,YAAY,CAyDxD"}

package/dist/field/ViewSelector.js

@@ -0,0 +1,89 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronIcon, Popup, PopupList } from '@payloadcms/ui';
+import React from 'react';
+import { useRichTextView } from './RichTextViewProvider.js';
+export function ViewSelector() {
+  const $ = _c(5);
+  const {
+    currentView,
+    setCurrentView,
+    views
+  } = useRichTextView();
+  if (!views || Object.keys(views).length === 0) {
+    return null;
+  }
+  let t0;
+  let t1;
+  if ($[0] !== currentView || $[1] !== setCurrentView || $[2] !== views) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const viewKeys = Object.keys(views);
+      const hasNonDefaultViews = viewKeys.some(_temp);
+      if (!hasNonDefaultViews) {
+        t1 = null;
+        break bb0;
+      }
+      const allViews = ["default", ...viewKeys.filter(_temp2)];
+      const currentViewLabel = currentView.charAt(0).toUpperCase() + currentView.slice(1);
+      t0 = _jsx("div", {
+        className: "lexical-view-selector",
+        children: _jsx(Popup, {
+          button: _jsxs("button", {
+            className: "lexical-view-selector__button",
+            type: "button",
+            children: [_jsx("span", {
+              className: "lexical-view-selector__label",
+              children: currentViewLabel
+            }), _jsx(ChevronIcon, {
+              className: "lexical-view-selector__icon"
+            })]
+          }),
+          buttonType: "custom",
+          horizontalAlign: "left",
+          render: t2 => {
+            const {
+              close
+            } = t2;
+            return _jsx(PopupList.ButtonGroup, {
+              children: allViews.map(viewName => {
+                const viewLabel = viewName.charAt(0).toUpperCase() + viewName.slice(1);
+                return _jsx(PopupList.Button, {
+                  active: viewName === currentView,
+                  disabled: viewName === currentView,
+                  onClick: () => {
+                    setCurrentView?.(viewName);
+                    close();
+                  },
+                  children: viewLabel
+                }, viewName);
+              })
+            });
+          },
+          size: "large"
+        })
+      });
+    }
+    $[0] = currentView;
+    $[1] = setCurrentView;
+    $[2] = views;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t0 = $[3];
+    t1 = $[4];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  return t0;
+}
+function _temp2(key_0) {
+  return key_0 !== "default";
+}
+function _temp(key) {
+  return key !== "default";
+}
+//# sourceMappingURL=ViewSelector.js.map

package/dist/field/ViewSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSelector.js","names":["c","_c","ChevronIcon","Popup","PopupList","React","useRichTextView","ViewSelector","$","currentView","setCurrentView","views","Object","keys","length","t0","t1","Symbol","for","bb0","viewKeys","hasNonDefaultViews","some","_temp","allViews","filter","_temp2","currentViewLabel","charAt","toUpperCase","slice","_jsx","className","children","button","_jsxs","type","horizontalAlign","render","t2","close","ButtonGroup","map","viewName","viewLabel","Button","active","disabled","onClick","key_0","key"],"sources":["../../src/field/ViewSelector.tsx"],"sourcesContent":["'use client'\nimport { ChevronIcon, Popup, PopupList } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { useRichTextView } from './RichTextViewProvider.js'\nimport './ViewSelector.scss'\n\nexport function ViewSelector(): null | React.ReactElement {\n  const { currentView, setCurrentView, views } = useRichTextView()\n\n  // Don't show if no views or only default exists\n  if (!views || Object.keys(views).length === 0) {\n    return null\n  }\n\n  const viewKeys = Object.keys(views)\n  const hasNonDefaultViews = viewKeys.some((key) => key !== 'default')\n\n  // If only 'default' exists, no need to show selector\n  if (!hasNonDefaultViews) {\n    return null\n  }\n\n  // Build list of available views\n  const allViews = ['default', ...viewKeys.filter((key) => key !== 'default')]\n\n  const currentViewLabel = currentView.charAt(0).toUpperCase() + currentView.slice(1)\n\n  return (\n    <div className=\"lexical-view-selector\">\n      <Popup\n        button={\n          <button className=\"lexical-view-selector__button\" type=\"button\">\n            <span className=\"lexical-view-selector__label\">{currentViewLabel}</span>\n            <ChevronIcon className=\"lexical-view-selector__icon\" />\n          </button>\n        }\n        buttonType=\"custom\"\n        horizontalAlign=\"left\"\n        render={({ close }) => (\n          <PopupList.ButtonGroup>\n            {allViews.map((viewName) => {\n              const viewLabel = viewName.charAt(0).toUpperCase() + viewName.slice(1)\n\n              return (\n                <PopupList.Button\n                  active={viewName === currentView}\n                  disabled={viewName === currentView}\n                  key={viewName}\n                  onClick={() => {\n                    setCurrentView?.(viewName)\n                    close()\n                  }}\n                >\n                  {viewLabel}\n                </PopupList.Button>\n              )\n            })}\n          </PopupList.ButtonGroup>\n        )}\n        size=\"large\"\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,WAAW,EAAEC,KAAK,EAAEC,SAAS,QAAQ;AAC9C,OAAOC,KAAA,MAAW;AAElB,SAASC,eAAe,QAAQ;AAGhC,OAAO,SAAAC,aAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACL;IAAAQ,WAAA;IAAAC,cAAA;IAAAC;EAAA,IAA+CL,eAAA;EAAA,IAG3C,CAACK,KAAA,IAASC,MAAA,CAAAC,IAAA,CAAYF,KAAA,EAAAG,MAAA,MAAkB;IAAA;EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAR,CAAA,QAAAC,WAAA,IAAAD,CAAA,QAAAE,cAAA,IAAAF,CAAA,QAAAG,KAAA;IASnCK,EAAA,GAAAC,MAAA,CAAAC,GAAA;IAAAC,GAAA;MALT,MAAAC,QAAA,GAAiBR,MAAA,CAAAC,IAAA,CAAYF,KAAA;MAC7B,MAAAU,kBAAA,GAA2BD,QAAA,CAAAE,IAAA,CAAAC,KAA+B;MAAA,KAGrDF,kBAAA;QACIL,EAAA;QAAA,MAAAG,GAAA;MAAA;MAIT,MAAAK,QAAA,IAAkB,cAAcJ,QAAA,CAAAK,MAAA,CAAAC,MAAiC;MAEjE,MAAAC,gBAAA,GAAyBlB,WAAA,CAAAmB,MAAA,EAAmB,EAAAC,WAAA,CAAc,IAAKpB,WAAA,CAAAqB,KAAA,EAAkB;MAG/Ef,EAAA,GAAAgB,IAAA,CAAC;QAAAC,SAAA,EAAc;QAAAC,QAAA,EACbF,IAAA,CAAA5B,KAAA;UAAA+B,MAAA,EAEIC,KAAA,CAAC;YAAAH,SAAA,EAAiB;YAAAI,IAAA,EAAqC;YAAAH,QAAA,GACrDF,IAAA,CAAC;cAAAC,SAAA,EAAe;cAAAC,QAAA,EAAgCN;YAAA,C,GAChDI,IAAA,CAAA7B,WAAA;cAAA8B,SAAA,EAAuB;YAAA,C;;sBAGhB;UAAAK,eAAA,EACK;UAAAC,MAAA,EAAAC,EAAA;YACP;cAAAC;YAAA,IAAAD,EAAS;YAAA,OAChBR,IAAA,CAAA3B,SAAA,CAAAqC,WAAA;cAAAR,QAAA,EACGT,QAAA,CAAAkB,GAAA,CAAAC,QAAA;gBACC,MAAAC,SAAA,GAAkBD,QAAA,CAAAf,MAAA,EAAgB,EAAAC,WAAA,CAAc,IAAKc,QAAA,CAAAb,KAAA,EAAe;gBAAA,OAGlEC,IAAA,CAAA3B,SAAA,CAAAyC,MAAA;kBAAAC,MAAA,EACUH,QAAA,KAAalC,WAAA;kBAAAsC,QAAA,EACXJ,QAAA,KAAalC,WAAA;kBAAAuC,OAAA,EAAAA,CAAA;oBAGrBtC,cAAA,GAAiBiC,QAAA;oBACjBH,KAAA;kBAAA;kBAAAP,QAAA,EAGDW;gBAAA,GANID,QAAA;cAAA,CASX;YAAA,C;;gBAGC;QAAA,C;;;;;;;;;;;;;;;SA/BT5B,E;;AAtBG,SAAAW,OAAAuB,KAAA;EAAA,OAiBoDC,KAAA,KAAQ;AAAA;AAjB5D,SAAA3B,MAAA2B,GAAA;EAAA,OAS6CA,GAAA,KAAQ;AAAA","ignoreList":[]}