@payloadcms/richtext-lexical 3.77.0 → 3.78.0-internal-debug.f663370

package/dist/field/ViewSelector.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { ChevronIcon, Popup, PopupList } from '@payloadcms/ui';
+import React from 'react';
+import { useRichTextView } from './RichTextViewProvider.js';
+import './ViewSelector.scss';
+export function ViewSelector() {
+    const { currentView, setCurrentView, views } = useRichTextView();
+    // Don't show if no views or only default exists
+    if (!views || Object.keys(views).length === 0) {
+        return null;
+    }
+    const viewKeys = Object.keys(views);
+    const hasNonDefaultViews = viewKeys.some((key)=>key !== 'default');
+    // If only 'default' exists, no need to show selector
+    if (!hasNonDefaultViews) {
+        return null;
+    }
+    // Build list of available views
+    const allViews = [
+        'default',
+        ...viewKeys.filter((key)=>key !== 'default')
+    ];
+    const currentViewLabel = currentView.charAt(0).toUpperCase() + currentView.slice(1);
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: "lexical-view-selector",
+        children: /*#__PURE__*/ _jsxDEV(Popup, {
+            button: /*#__PURE__*/ _jsxDEV("button", {
+                className: "lexical-view-selector__button",
+                type: "button",
+                children: [
+                    /*#__PURE__*/ _jsxDEV("span", {
+                        className: "lexical-view-selector__label",
+                        children: currentViewLabel
+                    }, void 0, false, {
+                        fileName: "src/field/ViewSelector.tsx",
+                        lineNumber: 34,
+                        columnNumber: 13
+                    }, void 0),
+                    /*#__PURE__*/ _jsxDEV(ChevronIcon, {
+                        className: "lexical-view-selector__icon"
+                    }, void 0, false, {
+                        fileName: "src/field/ViewSelector.tsx",
+                        lineNumber: 35,
+                        columnNumber: 13
+                    }, void 0)
+                ]
+            }, void 0, true, {
+                fileName: "src/field/ViewSelector.tsx",
+                lineNumber: 33,
+                columnNumber: 11
+            }, void 0),
+            buttonType: "custom",
+            horizontalAlign: "left",
+            render: ({ close })=>/*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
+                    children: allViews.map((viewName)=>{
+                        const viewLabel = viewName.charAt(0).toUpperCase() + viewName.slice(1);
+                        return /*#__PURE__*/ _jsxDEV(PopupList.Button, {
+                            active: viewName === currentView,
+                            disabled: viewName === currentView,
+                            onClick: ()=>{
+                                setCurrentView?.(viewName);
+                                close();
+                            },
+                            children: viewLabel
+                        }, viewName, false, {
+                            fileName: "src/field/ViewSelector.tsx",
+                            lineNumber: 46,
+                            columnNumber: 17
+                        }, void 0);
+                    })
+                }, void 0, false, {
+                    fileName: "src/field/ViewSelector.tsx",
+                    lineNumber: 41,
+                    columnNumber: 11
+                }, void 0),
+            size: "large"
+        }, void 0, false, {
+            fileName: "src/field/ViewSelector.tsx",
+            lineNumber: 31,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/field/ViewSelector.tsx",
+        lineNumber: 30,
+        columnNumber: 5
+    }, this);
+}
+
+//# sourceMappingURL=ViewSelector.js.map

package/dist/field/ViewSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"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"],"names":["ChevronIcon","Popup","PopupList","React","useRichTextView","ViewSelector","currentView","setCurrentView","views","Object","keys","length","viewKeys","hasNonDefaultViews","some","key","allViews","filter","currentViewLabel","charAt","toUpperCase","slice","div","className","button","type","span","buttonType","horizontalAlign","render","close","ButtonGroup","map","viewName","viewLabel","Button","active","disabled","onClick","size"],"mappings":"AAAA;;AACA,SAASA,WAAW,EAAEC,KAAK,EAAEC,SAAS,QAAQ,iBAAgB;AAC9D,OAAOC,WAAW,QAAO;AAEzB,SAASC,eAAe,QAAQ,4BAA2B;AAC3D,OAAO,sBAAqB;AAE5B,OAAO,SAASC;IACd,MAAM,EAAEC,WAAW,EAAEC,cAAc,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,gDAAgD;IAChD,IAAI,CAACI,SAASC,OAAOC,IAAI,CAACF,OAAOG,MAAM,KAAK,GAAG;QAC7C,OAAO;IACT;IAEA,MAAMC,WAAWH,OAAOC,IAAI,CAACF;IAC7B,MAAMK,qBAAqBD,SAASE,IAAI,CAAC,CAACC,MAAQA,QAAQ;IAE1D,qDAAqD;IACrD,IAAI,CAACF,oBAAoB;QACvB,OAAO;IACT;IAEA,gCAAgC;IAChC,MAAMG,WAAW;QAAC;WAAcJ,SAASK,MAAM,CAAC,CAACF,MAAQA,QAAQ;KAAW;IAE5E,MAAMG,mBAAmBZ,YAAYa,MAAM,CAAC,GAAGC,WAAW,KAAKd,YAAYe,KAAK,CAAC;IAEjF,qBACE,QAACC;QAAIC,WAAU;kBACb,cAAA,QAACtB;YACCuB,sBACE,QAACA;gBAAOD,WAAU;gBAAgCE,MAAK;;kCACrD,QAACC;wBAAKH,WAAU;kCAAgCL;;;;;;kCAChD,QAAClB;wBAAYuB,WAAU;;;;;;;;;;;;YAG3BI,YAAW;YACXC,iBAAgB;YAChBC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,QAAC5B,UAAU6B,WAAW;8BACnBf,SAASgB,GAAG,CAAC,CAACC;wBACb,MAAMC,YAAYD,SAASd,MAAM,CAAC,GAAGC,WAAW,KAAKa,SAASZ,KAAK,CAAC;wBAEpE,qBACE,QAACnB,UAAUiC,MAAM;4BACfC,QAAQH,aAAa3B;4BACrB+B,UAAUJ,aAAa3B;4BAEvBgC,SAAS;gCACP/B,iBAAiB0B;gCACjBH;4BACF;sCAECI;2BANID;;;;;oBASX;;;;;;YAGJM,MAAK;;;;;;;;;;;AAIb"}

package/dist/field/ViewSelector.scss

@@ -0,0 +1,34 @@
+@import '~@payloadcms/ui/scss';
+
+.lexical-view-selector {
+  display: inline-flex;
+  margin-left: var(--spacing-xs);
+  vertical-align: middle;
+
+  &__button {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 6px;
+    background: transparent;
+    border-radius: var(--border-radius-s);
+    cursor: pointer;
+    color: var(--theme-elevation-600);
+    box-sizing: border-box;
+
+    &:hover {
+      background: var(--theme-elevation-100);
+      color: var(--theme-elevation-800);
+    }
+  }
+
+  &__label {
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+}