payload-better-editor 1.0.0

package/dist/admin/sidebar/DocumentSettingsTab.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { DocumentFieldsTab } from './DocumentFieldsTab';
+const isNotSidebar = (f)=>!('admin' in f) || f.admin?.position !== 'sidebar';
+// The blocks tab owns layout-block editing; stripping `blocks` fields here
+// avoids rendering them twice and keeps this tab focused on document meta.
+const stripBlocks = (fields)=>{
+    const result = [];
+    for (const field of fields){
+        const type = field.type;
+        if (type === 'blocks') continue;
+        if (type === 'tabs') {
+            const newTabs = [];
+            for (const tab of field.tabs){
+                const inner = stripBlocks(tab.fields ?? []);
+                if (inner.length > 0) newTabs.push({
+                    ...tab,
+                    fields: inner
+                });
+            }
+            if (newTabs.length === 0) continue;
+            result.push({
+                ...field,
+                tabs: newTabs
+            });
+            continue;
+        }
+        if (type === 'collapsible' || type === 'row' || type === 'group') {
+            const inner = stripBlocks(field.fields);
+            if (inner.length === 0) continue;
+            result.push({
+                ...field,
+                fields: inner
+            });
+            continue;
+        }
+        result.push(field);
+    }
+    return result;
+};
+export const DocumentSettingsTab = ()=>/*#__PURE__*/ _jsx(DocumentFieldsTab, {
+        filter: isNotSidebar,
+        transform: stripBlocks,
+        emptyText: "No document-level fields found."
+    });
+
+//# sourceMappingURL=DocumentSettingsTab.js.map

package/dist/admin/sidebar/DocumentSettingsTab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/sidebar/DocumentSettingsTab.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport type { ClientField, ClientTab } from 'payload'\nimport { DocumentFieldsTab } from './DocumentFieldsTab'\n\nconst isNotSidebar = (f: ClientField): boolean =>\n  !('admin' in f) || f.admin?.position !== 'sidebar'\n\n// The blocks tab owns layout-block editing; stripping `blocks` fields here\n// avoids rendering them twice and keeps this tab focused on document meta.\nconst stripBlocks = (fields: ClientField[]): ClientField[] => {\n  const result: ClientField[] = []\n  for (const field of fields) {\n    const type = field.type\n\n    if (type === 'blocks') continue\n\n    if (type === 'tabs') {\n      const newTabs: ClientTab[] = []\n      for (const tab of field.tabs) {\n        const inner = stripBlocks(tab.fields ?? [])\n        if (inner.length > 0) newTabs.push({ ...tab, fields: inner })\n      }\n      if (newTabs.length === 0) continue\n      result.push({ ...field, tabs: newTabs })\n      continue\n    }\n\n    if (type === 'collapsible' || type === 'row' || type === 'group') {\n      const inner = stripBlocks(field.fields)\n      if (inner.length === 0) continue\n      result.push({ ...field, fields: inner })\n      continue\n    }\n\n    result.push(field)\n  }\n  return result\n}\n\nexport const DocumentSettingsTab: React.FC = () => (\n  <DocumentFieldsTab\n    filter={isNotSidebar}\n    transform={stripBlocks}\n    emptyText=\"No document-level fields found.\"\n  />\n)\n"],"names":["React","DocumentFieldsTab","isNotSidebar","f","admin","position","stripBlocks","fields","result","field","type","newTabs","tab","tabs","inner","length","push","DocumentSettingsTab","filter","transform","emptyText"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,iBAAiB,QAAQ,sBAAqB;AAEvD,MAAMC,eAAe,CAACC,IACpB,CAAE,CAAA,WAAWA,CAAAA,KAAMA,EAAEC,KAAK,EAAEC,aAAa;AAE3C,2EAA2E;AAC3E,2EAA2E;AAC3E,MAAMC,cAAc,CAACC;IACnB,MAAMC,SAAwB,EAAE;IAChC,KAAK,MAAMC,SAASF,OAAQ;QAC1B,MAAMG,OAAOD,MAAMC,IAAI;QAEvB,IAAIA,SAAS,UAAU;QAEvB,IAAIA,SAAS,QAAQ;YACnB,MAAMC,UAAuB,EAAE;YAC/B,KAAK,MAAMC,OAAOH,MAAMI,IAAI,CAAE;gBAC5B,MAAMC,QAAQR,YAAYM,IAAIL,MAAM,IAAI,EAAE;gBAC1C,IAAIO,MAAMC,MAAM,GAAG,GAAGJ,QAAQK,IAAI,CAAC;oBAAE,GAAGJ,GAAG;oBAAEL,QAAQO;gBAAM;YAC7D;YACA,IAAIH,QAAQI,MAAM,KAAK,GAAG;YAC1BP,OAAOQ,IAAI,CAAC;gBAAE,GAAGP,KAAK;gBAAEI,MAAMF;YAAQ;YACtC;QACF;QAEA,IAAID,SAAS,iBAAiBA,SAAS,SAASA,SAAS,SAAS;YAChE,MAAMI,QAAQR,YAAYG,MAAMF,MAAM;YACtC,IAAIO,MAAMC,MAAM,KAAK,GAAG;YACxBP,OAAOQ,IAAI,CAAC;gBAAE,GAAGP,KAAK;gBAAEF,QAAQO;YAAM;YACtC;QACF;QAEAN,OAAOQ,IAAI,CAACP;IACd;IACA,OAAOD;AACT;AAEA,OAAO,MAAMS,sBAAgC,kBAC3C,KAAChB;QACCiB,QAAQhB;QACRiB,WAAWb;QACXc,WAAU;OAEb"}

package/dist/admin/sidebar/Sidebar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type SidebarProps = {
+    selectedBlockPath: string | null;
+    onClearSelection: () => void;
+    onSelectPath: (path: string | null) => void;
+    forceFullWidthFields: boolean;
+    blocksField: string;
+    addBelowRequestId?: number;
+};
+export declare const Sidebar: React.FC<SidebarProps>;

package/dist/admin/sidebar/Sidebar.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { DocumentSettingsTab } from './DocumentSettingsTab';
+import { DocumentMetaTab } from './DocumentMetaTab';
+import { BlockSettingsTab } from './BlockSettingsTab';
+const TABS = [
+    {
+        key: 'page',
+        label: 'Page'
+    },
+    {
+        key: 'block',
+        label: 'Blocks'
+    },
+    {
+        key: 'settings',
+        label: 'Settings'
+    }
+];
+const ROOT_CLASS = 'better-editor-sidebar';
+const TAB_CLASS = `${ROOT_CLASS}__tab`;
+const tabId = (key)=>`better-editor-tab-${key}`;
+const panelId = (key)=>`better-editor-panel-${key}`;
+const SidebarTab = ({ tabKey, label, active, onSelect })=>/*#__PURE__*/ _jsx("button", {
+        type: "button",
+        role: "tab",
+        id: tabId(tabKey),
+        "aria-selected": active,
+        "aria-controls": panelId(tabKey),
+        tabIndex: active ? 0 : -1,
+        className: active ? `${TAB_CLASS} ${TAB_CLASS}--active` : TAB_CLASS,
+        onClick: ()=>onSelect(tabKey),
+        children: label
+    });
+export const Sidebar = ({ selectedBlockPath, onClearSelection, onSelectPath, forceFullWidthFields, blocksField, addBelowRequestId = 0 })=>{
+    const [tab, setTab] = useState('page');
+    // Auto-jump to the block tab when the iframe selects a new block.
+    useEffect(()=>{
+        if (selectedBlockPath) setTab('block');
+    }, [
+        selectedBlockPath
+    ]);
+    const className = forceFullWidthFields ? `${ROOT_CLASS} ${ROOT_CLASS}--force-full-width` : ROOT_CLASS;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: className,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                role: "tablist",
+                className: `${ROOT_CLASS}__tabs`,
+                children: TABS.map((t)=>/*#__PURE__*/ _jsx(SidebarTab, {
+                        tabKey: t.key,
+                        label: t.label,
+                        active: tab === t.key,
+                        onSelect: setTab
+                    }, t.key))
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${ROOT_CLASS}__content`,
+                role: "tabpanel",
+                id: panelId(tab),
+                "aria-labelledby": tabId(tab),
+                tabIndex: 0,
+                children: [
+                    tab === 'page' && /*#__PURE__*/ _jsx(DocumentSettingsTab, {}),
+                    tab === 'block' && /*#__PURE__*/ _jsx(BlockSettingsTab, {
+                        selectedBlockPath: selectedBlockPath,
+                        onClearSelection: onClearSelection,
+                        onSelectPath: onSelectPath,
+                        blocksField: blocksField,
+                        addBelowRequestId: addBelowRequestId
+                    }),
+                    tab === 'settings' && /*#__PURE__*/ _jsx(DocumentMetaTab, {})
+                ]
+            }),
+            /*#__PURE__*/ _jsx(SelectionAnnouncer, {
+                selectedBlockPath: selectedBlockPath
+            })
+        ]
+    });
+};
+// Off-screen live region announces block-selection changes to screen
+// readers; visible UI updates handle sighted users via the tab switch.
+const SelectionAnnouncer = ({ selectedBlockPath })=>/*#__PURE__*/ _jsx("div", {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: "better-editor-sr-only",
+        children: selectedBlockPath ? `Block selected: ${selectedBlockPath}` : 'No block selected'
+    });
+
+//# sourceMappingURL=Sidebar.js.map

package/dist/admin/sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/sidebar/Sidebar.tsx"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useState } from 'react'\nimport { DocumentSettingsTab } from './DocumentSettingsTab'\nimport { DocumentMetaTab } from './DocumentMetaTab'\nimport { BlockSettingsTab } from './BlockSettingsTab'\n\nexport type SidebarProps = {\n  selectedBlockPath: string | null\n  onClearSelection: () => void\n  onSelectPath: (path: string | null) => void\n  forceFullWidthFields: boolean\n  blocksField: string\n  addBelowRequestId?: number\n}\n\ntype TabKey = 'page' | 'block' | 'settings'\n\nconst TABS: ReadonlyArray<{ key: TabKey; label: string }> = [\n  { key: 'page', label: 'Page' },\n  { key: 'block', label: 'Blocks' },\n  { key: 'settings', label: 'Settings' },\n]\n\nconst ROOT_CLASS = 'better-editor-sidebar'\nconst TAB_CLASS = `${ROOT_CLASS}__tab`\n\nconst tabId = (key: TabKey) => `better-editor-tab-${key}`\nconst panelId = (key: TabKey) => `better-editor-panel-${key}`\n\ntype SidebarTabProps = {\n  tabKey: TabKey\n  label: string\n  active: boolean\n  onSelect: (key: TabKey) => void\n}\n\nconst SidebarTab: React.FC<SidebarTabProps> = ({ tabKey, label, active, onSelect }) => (\n  <button\n    type=\"button\"\n    role=\"tab\"\n    id={tabId(tabKey)}\n    aria-selected={active}\n    aria-controls={panelId(tabKey)}\n    tabIndex={active ? 0 : -1}\n    className={active ? `${TAB_CLASS} ${TAB_CLASS}--active` : TAB_CLASS}\n    onClick={() => onSelect(tabKey)}\n  >\n    {label}\n  </button>\n)\n\nexport const Sidebar: React.FC<SidebarProps> = ({\n  selectedBlockPath,\n  onClearSelection,\n  onSelectPath,\n  forceFullWidthFields,\n  blocksField,\n  addBelowRequestId = 0,\n}) => {\n  const [tab, setTab] = useState<TabKey>('page')\n\n  // Auto-jump to the block tab when the iframe selects a new block.\n  useEffect(() => {\n    if (selectedBlockPath) setTab('block')\n  }, [selectedBlockPath])\n\n  const className = forceFullWidthFields\n    ? `${ROOT_CLASS} ${ROOT_CLASS}--force-full-width`\n    : ROOT_CLASS\n\n  return (\n    <div className={className}>\n      <div role=\"tablist\" className={`${ROOT_CLASS}__tabs`}>\n        {TABS.map((t) => (\n          <SidebarTab\n            key={t.key}\n            tabKey={t.key}\n            label={t.label}\n            active={tab === t.key}\n            onSelect={setTab}\n          />\n        ))}\n      </div>\n\n      <div\n        className={`${ROOT_CLASS}__content`}\n        role=\"tabpanel\"\n        id={panelId(tab)}\n        aria-labelledby={tabId(tab)}\n        tabIndex={0}\n      >\n        {tab === 'page' && <DocumentSettingsTab />}\n        {tab === 'block' && (\n          <BlockSettingsTab\n            selectedBlockPath={selectedBlockPath}\n            onClearSelection={onClearSelection}\n            onSelectPath={onSelectPath}\n            blocksField={blocksField}\n            addBelowRequestId={addBelowRequestId}\n          />\n        )}\n        {tab === 'settings' && <DocumentMetaTab />}\n      </div>\n\n      <SelectionAnnouncer selectedBlockPath={selectedBlockPath} />\n    </div>\n  )\n}\n\n// Off-screen live region announces block-selection changes to screen\n// readers; visible UI updates handle sighted users via the tab switch.\nconst SelectionAnnouncer: React.FC<{ selectedBlockPath: string | null }> = ({\n  selectedBlockPath,\n}) => (\n  <div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" className=\"better-editor-sr-only\">\n    {selectedBlockPath ? `Block selected: ${selectedBlockPath}` : 'No block selected'}\n  </div>\n)\n"],"names":["React","useEffect","useState","DocumentSettingsTab","DocumentMetaTab","BlockSettingsTab","TABS","key","label","ROOT_CLASS","TAB_CLASS","tabId","panelId","SidebarTab","tabKey","active","onSelect","button","type","role","id","aria-selected","aria-controls","tabIndex","className","onClick","Sidebar","selectedBlockPath","onClearSelection","onSelectPath","forceFullWidthFields","blocksField","addBelowRequestId","tab","setTab","div","map","t","aria-labelledby","SelectionAnnouncer","aria-live","aria-atomic"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAClD,SAASC,mBAAmB,QAAQ,wBAAuB;AAC3D,SAASC,eAAe,QAAQ,oBAAmB;AACnD,SAASC,gBAAgB,QAAQ,qBAAoB;AAarD,MAAMC,OAAsD;IAC1D;QAAEC,KAAK;QAAQC,OAAO;IAAO;IAC7B;QAAED,KAAK;QAASC,OAAO;IAAS;IAChC;QAAED,KAAK;QAAYC,OAAO;IAAW;CACtC;AAED,MAAMC,aAAa;AACnB,MAAMC,YAAY,GAAGD,WAAW,KAAK,CAAC;AAEtC,MAAME,QAAQ,CAACJ,MAAgB,CAAC,kBAAkB,EAAEA,KAAK;AACzD,MAAMK,UAAU,CAACL,MAAgB,CAAC,oBAAoB,EAAEA,KAAK;AAS7D,MAAMM,aAAwC,CAAC,EAAEC,MAAM,EAAEN,KAAK,EAAEO,MAAM,EAAEC,QAAQ,EAAE,iBAChF,KAACC;QACCC,MAAK;QACLC,MAAK;QACLC,IAAIT,MAAMG;QACVO,iBAAeN;QACfO,iBAAeV,QAAQE;QACvBS,UAAUR,SAAS,IAAI,CAAC;QACxBS,WAAWT,SAAS,GAAGL,UAAU,CAAC,EAAEA,UAAU,QAAQ,CAAC,GAAGA;QAC1De,SAAS,IAAMT,SAASF;kBAEvBN;;AAIL,OAAO,MAAMkB,UAAkC,CAAC,EAC9CC,iBAAiB,EACjBC,gBAAgB,EAChBC,YAAY,EACZC,oBAAoB,EACpBC,WAAW,EACXC,oBAAoB,CAAC,EACtB;IACC,MAAM,CAACC,KAAKC,OAAO,GAAGhC,SAAiB;IAEvC,kEAAkE;IAClED,UAAU;QACR,IAAI0B,mBAAmBO,OAAO;IAChC,GAAG;QAACP;KAAkB;IAEtB,MAAMH,YAAYM,uBACd,GAAGrB,WAAW,CAAC,EAAEA,WAAW,kBAAkB,CAAC,GAC/CA;IAEJ,qBACE,MAAC0B;QAAIX,WAAWA;;0BACd,KAACW;gBAAIhB,MAAK;gBAAUK,WAAW,GAAGf,WAAW,MAAM,CAAC;0BACjDH,KAAK8B,GAAG,CAAC,CAACC,kBACT,KAACxB;wBAECC,QAAQuB,EAAE9B,GAAG;wBACbC,OAAO6B,EAAE7B,KAAK;wBACdO,QAAQkB,QAAQI,EAAE9B,GAAG;wBACrBS,UAAUkB;uBAJLG,EAAE9B,GAAG;;0BAShB,MAAC4B;gBACCX,WAAW,GAAGf,WAAW,SAAS,CAAC;gBACnCU,MAAK;gBACLC,IAAIR,QAAQqB;gBACZK,mBAAiB3B,MAAMsB;gBACvBV,UAAU;;oBAETU,QAAQ,wBAAU,KAAC9B;oBACnB8B,QAAQ,yBACP,KAAC5B;wBACCsB,mBAAmBA;wBACnBC,kBAAkBA;wBAClBC,cAAcA;wBACdE,aAAaA;wBACbC,mBAAmBA;;oBAGtBC,QAAQ,4BAAc,KAAC7B;;;0BAG1B,KAACmC;gBAAmBZ,mBAAmBA;;;;AAG7C,EAAC;AAED,qEAAqE;AACrE,uEAAuE;AACvE,MAAMY,qBAAqE,CAAC,EAC1EZ,iBAAiB,EAClB,iBACC,KAACQ;QAAIhB,MAAK;QAASqB,aAAU;QAASC,eAAY;QAAOjB,WAAU;kBAChEG,oBAAoB,CAAC,gBAAgB,EAAEA,mBAAmB,GAAG"}

package/dist/client.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The button rendered in `beforeDocumentControls` that toggles the
+ * Better Editor overlay. Auto-injected by the plugin factory; consumers
+ * usually don't render it directly.
+ */
+export { LiveEditorToggle } from './admin/LiveEditorToggle';
+export type { LiveEditorToggleProps } from './admin/LiveEditorToggle';
+/**
+ * The full editor overlay (preview iframe + 3-tab sidebar). Mounted into
+ * the Payload admin shell when the toggle opens it. Exported so consumers
+ * can build a custom toggle / wrapper if they need to bypass the
+ * auto-injected button.
+ */
+export { LiveEditorOverlay } from './admin/LiveEditorOverlay';
+export type { LiveEditorOverlayProps } from './admin/LiveEditorOverlay';
+/**
+ * Banner shown at the top of the `BetterEditorSettings` global. Wired up
+ * automatically; hide it via `betterEditor({ showSettingsBanner: false })`.
+ */
+export { SettingsBanner } from './admin/SettingsBanner';
+/**
+ * Spread these props on every block wrapper in your frontend so the
+ * Better Editor can target it. The plugin uses the resulting
+ * `data-better-editor-id` attribute for hover outlines, click-to-focus,
+ * the in-iframe action toolbar, and selection sync.
+ *
+ * @example
+ *   import { getBlockProps } from 'payload-better-editor/client'
+ *
+ *   <section {...getBlockProps(block)}>...</section>
+ */
+export declare const getBlockProps: (block: {
+    id?: string | null;
+}) => Record<string, string>;

package/dist/client.js

@@ -0,0 +1,30 @@
+/**
+ * The button rendered in `beforeDocumentControls` that toggles the
+ * Better Editor overlay. Auto-injected by the plugin factory; consumers
+ * usually don't render it directly.
+ */ export { LiveEditorToggle } from './admin/LiveEditorToggle';
+/**
+ * The full editor overlay (preview iframe + 3-tab sidebar). Mounted into
+ * the Payload admin shell when the toggle opens it. Exported so consumers
+ * can build a custom toggle / wrapper if they need to bypass the
+ * auto-injected button.
+ */ export { LiveEditorOverlay } from './admin/LiveEditorOverlay';
+/**
+ * Banner shown at the top of the `BetterEditorSettings` global. Wired up
+ * automatically; hide it via `betterEditor({ showSettingsBanner: false })`.
+ */ export { SettingsBanner } from './admin/SettingsBanner';
+/**
+ * Spread these props on every block wrapper in your frontend so the
+ * Better Editor can target it. The plugin uses the resulting
+ * `data-better-editor-id` attribute for hover outlines, click-to-focus,
+ * the in-iframe action toolbar, and selection sync.
+ *
+ * @example
+ *   import { getBlockProps } from 'payload-better-editor/client'
+ *
+ *   <section {...getBlockProps(block)}>...</section>
+ */ export const getBlockProps = (block)=>block.id ? {
+        'data-better-editor-id': block.id
+    } : {};
+
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/client.ts"],"sourcesContent":["/**\n * The button rendered in `beforeDocumentControls` that toggles the\n * Better Editor overlay. Auto-injected by the plugin factory; consumers\n * usually don't render it directly.\n */\nexport { LiveEditorToggle } from './admin/LiveEditorToggle'\nexport type { LiveEditorToggleProps } from './admin/LiveEditorToggle'\n\n/**\n * The full editor overlay (preview iframe + 3-tab sidebar). Mounted into\n * the Payload admin shell when the toggle opens it. Exported so consumers\n * can build a custom toggle / wrapper if they need to bypass the\n * auto-injected button.\n */\nexport { LiveEditorOverlay } from './admin/LiveEditorOverlay'\nexport type { LiveEditorOverlayProps } from './admin/LiveEditorOverlay'\n\n/**\n * Banner shown at the top of the `BetterEditorSettings` global. Wired up\n * automatically; hide it via `betterEditor({ showSettingsBanner: false })`.\n */\nexport { SettingsBanner } from './admin/SettingsBanner'\n\n/**\n * Spread these props on every block wrapper in your frontend so the\n * Better Editor can target it. The plugin uses the resulting\n * `data-better-editor-id` attribute for hover outlines, click-to-focus,\n * the in-iframe action toolbar, and selection sync.\n *\n * @example\n *   import { getBlockProps } from 'payload-better-editor/client'\n *\n *   <section {...getBlockProps(block)}>...</section>\n */\nexport const getBlockProps = (\n  block: { id?: string | null },\n): Record<string, string> =>\n  block.id ? { 'data-better-editor-id': block.id } : {}\n"],"names":["LiveEditorToggle","LiveEditorOverlay","SettingsBanner","getBlockProps","block","id"],"mappings":"AAAA;;;;CAIC,GACD,SAASA,gBAAgB,QAAQ,2BAA0B;AAG3D;;;;;CAKC,GACD,SAASC,iBAAiB,QAAQ,4BAA2B;AAG7D;;;CAGC,GACD,SAASC,cAAc,QAAQ,yBAAwB;AAEvD;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,gBAAgB,CAC3BC,QAEAA,MAAMC,EAAE,GAAG;QAAE,yBAAyBD,MAAMC,EAAE;IAAC,IAAI,CAAC,EAAC"}

package/dist/global.d.ts

@@ -0,0 +1,4 @@
+import type { GlobalConfig } from 'payload';
+export declare const BETTER_EDITOR_SETTINGS_SLUG = "better-editor-settings";
+export declare const BETTER_EDITOR_SETTINGS_BANNER_FIELD = "betterEditorSettingsBanner";
+export declare const betterEditorSettingsGlobal: GlobalConfig;

package/dist/global.js

@@ -0,0 +1,200 @@
+import { DEFAULT_BETTER_EDITOR_SETTINGS as D } from './internal/constants';
+import { HOVER_OUTLINE_MAX, HOVER_OUTLINE_MIN, MOBILE_WIDTH_MAX, MOBILE_WIDTH_MIN, TABLET_WIDTH_MAX, TABLET_WIDTH_MIN } from './internal/limits';
+export const BETTER_EDITOR_SETTINGS_SLUG = 'better-editor-settings';
+export const BETTER_EDITOR_SETTINGS_BANNER_FIELD = 'betterEditorSettingsBanner';
+// Mirrors the runtime regex in `preview/hover-css.ts` so the admin UI rejects
+// values that would silently be skipped at render time.
+const HOVER_COLOR_RE = /^(?:#[0-9a-fA-F]{3,8}|rgba?\([^()\n\r]*\))$/i;
+const validateHoverColor = (value)=>{
+    if (typeof value !== 'string' || value.length === 0) return 'Color is required';
+    if (!HOVER_COLOR_RE.test(value.trim())) {
+        return 'Must be a hex color (e.g. #3b82f6) or rgb()/rgba()';
+    }
+    return true;
+};
+const validateHoverOutline = (value)=>{
+    if (typeof value !== 'number' || !Number.isFinite(value)) return 'Must be a number';
+    if (value < HOVER_OUTLINE_MIN || value > HOVER_OUTLINE_MAX) {
+        return `Must be between ${HOVER_OUTLINE_MIN} and ${HOVER_OUTLINE_MAX}`;
+    }
+    return true;
+};
+export const betterEditorSettingsGlobal = {
+    slug: BETTER_EDITOR_SETTINGS_SLUG,
+    label: 'Settings',
+    access: {
+        read: ()=>true
+    },
+    admin: {
+        group: 'Better Editor',
+        description: 'Editor-wide preferences for the Better Editor overlay.'
+    },
+    fields: [
+        {
+            name: 'betterEditorSettingsBanner',
+            type: 'ui',
+            admin: {
+                components: {
+                    Field: 'payload-better-editor/client#SettingsBanner'
+                }
+            }
+        },
+        {
+            type: 'tabs',
+            tabs: [
+                {
+                    label: 'Sidebar',
+                    description: 'Where the sidebar sits and how its fields are stacked.',
+                    fields: [
+                        {
+                            name: 'sidebarPosition',
+                            type: 'select',
+                            label: 'Position',
+                            defaultValue: D.sidebarPosition,
+                            options: [
+                                {
+                                    label: 'Right',
+                                    value: 'right'
+                                },
+                                {
+                                    label: 'Left',
+                                    value: 'left'
+                                }
+                            ]
+                        },
+                        {
+                            name: 'forceFullWidthFields',
+                            type: 'checkbox',
+                            label: 'Stack fields full-width',
+                            defaultValue: D.forceFullWidthFields,
+                            admin: {
+                                description: 'Override admin.width on sidebar fields so they always span the full row.'
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Viewport',
+                    description: 'Pixel widths for the Tablet and Mobile preview modes.',
+                    fields: [
+                        {
+                            type: 'row',
+                            fields: [
+                                {
+                                    name: 'tabletWidth',
+                                    type: 'number',
+                                    label: 'Tablet (px)',
+                                    defaultValue: D.tabletWidth,
+                                    min: TABLET_WIDTH_MIN,
+                                    max: TABLET_WIDTH_MAX,
+                                    admin: {
+                                        width: '50%',
+                                        placeholder: String(D.tabletWidth)
+                                    }
+                                },
+                                {
+                                    name: 'mobileWidth',
+                                    type: 'number',
+                                    label: 'Mobile (px)',
+                                    defaultValue: D.mobileWidth,
+                                    min: MOBILE_WIDTH_MIN,
+                                    max: MOBILE_WIDTH_MAX,
+                                    admin: {
+                                        width: '50%',
+                                        placeholder: String(D.mobileWidth)
+                                    }
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Outline',
+                    description: 'Outline + tint shown on the hovered or selected block.',
+                    fields: [
+                        {
+                            type: 'row',
+                            fields: [
+                                {
+                                    name: 'hoverColorTopLevel',
+                                    type: 'text',
+                                    label: 'Top-level color',
+                                    defaultValue: D.hoverColorTopLevel,
+                                    validate: validateHoverColor,
+                                    admin: {
+                                        width: '50%',
+                                        placeholder: D.hoverColorTopLevel,
+                                        description: 'Hex color (e.g. `#3b82f6`).'
+                                    }
+                                },
+                                {
+                                    name: 'hoverColorNested',
+                                    type: 'text',
+                                    label: 'Nested color',
+                                    defaultValue: D.hoverColorNested,
+                                    validate: validateHoverColor,
+                                    admin: {
+                                        width: '50%',
+                                        placeholder: D.hoverColorNested,
+                                        description: 'Hex color for blocks nested inside another block.'
+                                    }
+                                }
+                            ]
+                        },
+                        {
+                            name: 'hoverOutlineWidth',
+                            type: 'number',
+                            label: 'Outline width (px)',
+                            defaultValue: D.hoverOutlineWidth,
+                            min: HOVER_OUTLINE_MIN,
+                            max: HOVER_OUTLINE_MAX,
+                            validate: validateHoverOutline,
+                            admin: {
+                                placeholder: String(D.hoverOutlineWidth),
+                                description: `Outline thickness in pixels (${HOVER_OUTLINE_MIN}–${HOVER_OUTLINE_MAX}).`
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Toolbar',
+                    description: 'Floating Move / Duplicate / Delete toolbar that appears on the selected block.',
+                    fields: [
+                        {
+                            name: 'showHoverToolbar',
+                            type: 'checkbox',
+                            label: 'Enabled',
+                            defaultValue: D.showHoverToolbar
+                        },
+                        {
+                            name: 'hoverToolbarPosition',
+                            type: 'select',
+                            label: 'Anchor corner',
+                            defaultValue: D.hoverToolbarPosition,
+                            options: [
+                                {
+                                    label: 'Top right',
+                                    value: 'top-right'
+                                },
+                                {
+                                    label: 'Top left',
+                                    value: 'top-left'
+                                },
+                                {
+                                    label: 'Bottom right',
+                                    value: 'bottom-right'
+                                },
+                                {
+                                    label: 'Bottom left',
+                                    value: 'bottom-left'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+};
+
+//# sourceMappingURL=global.js.map

package/dist/global.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/global.ts"],"sourcesContent":["import type { GlobalConfig } from 'payload'\nimport { DEFAULT_BETTER_EDITOR_SETTINGS as D } from './internal/constants'\nimport {\n  HOVER_OUTLINE_MAX,\n  HOVER_OUTLINE_MIN,\n  MOBILE_WIDTH_MAX,\n  MOBILE_WIDTH_MIN,\n  TABLET_WIDTH_MAX,\n  TABLET_WIDTH_MIN,\n} from './internal/limits'\n\nexport const BETTER_EDITOR_SETTINGS_SLUG = 'better-editor-settings'\n\nexport const BETTER_EDITOR_SETTINGS_BANNER_FIELD = 'betterEditorSettingsBanner'\n\n// Mirrors the runtime regex in `preview/hover-css.ts` so the admin UI rejects\n// values that would silently be skipped at render time.\nconst HOVER_COLOR_RE = /^(?:#[0-9a-fA-F]{3,8}|rgba?\\([^()\\n\\r]*\\))$/i\n\nconst validateHoverColor = (value: unknown): string | true => {\n  if (typeof value !== 'string' || value.length === 0) return 'Color is required'\n  if (!HOVER_COLOR_RE.test(value.trim())) {\n    return 'Must be a hex color (e.g. #3b82f6) or rgb()/rgba()'\n  }\n  return true\n}\n\nconst validateHoverOutline = (value: unknown): string | true => {\n  if (typeof value !== 'number' || !Number.isFinite(value)) return 'Must be a number'\n  if (value < HOVER_OUTLINE_MIN || value > HOVER_OUTLINE_MAX) {\n    return `Must be between ${HOVER_OUTLINE_MIN} and ${HOVER_OUTLINE_MAX}`\n  }\n  return true\n}\n\nexport const betterEditorSettingsGlobal: GlobalConfig = {\n  slug: BETTER_EDITOR_SETTINGS_SLUG,\n  label: 'Settings',\n  access: {\n    read: () => true,\n  },\n  admin: {\n    group: 'Better Editor',\n    description: 'Editor-wide preferences for the Better Editor overlay.',\n  },\n\n  fields: [\n    {\n      name: 'betterEditorSettingsBanner',\n      type: 'ui',\n      admin: {\n        components: {\n          Field: 'payload-better-editor/client#SettingsBanner',\n        },\n      },\n    },\n    {\n      type: 'tabs',\n      tabs: [\n        {\n          label: 'Sidebar',\n          description: 'Where the sidebar sits and how its fields are stacked.',\n          fields: [\n            {\n              name: 'sidebarPosition',\n              type: 'select',\n              label: 'Position',\n              defaultValue: D.sidebarPosition,\n              options: [\n                { label: 'Right', value: 'right' },\n                { label: 'Left', value: 'left' },\n              ],\n            },\n            {\n              name: 'forceFullWidthFields',\n              type: 'checkbox',\n              label: 'Stack fields full-width',\n              defaultValue: D.forceFullWidthFields,\n              admin: {\n                description:\n                  'Override admin.width on sidebar fields so they always span the full row.',\n              },\n            },\n          ],\n        },\n        {\n          label: 'Viewport',\n          description: 'Pixel widths for the Tablet and Mobile preview modes.',\n          fields: [\n            {\n              type: 'row',\n              fields: [\n                {\n                  name: 'tabletWidth',\n                  type: 'number',\n                  label: 'Tablet (px)',\n                  defaultValue: D.tabletWidth,\n                  min: TABLET_WIDTH_MIN,\n                  max: TABLET_WIDTH_MAX,\n                  admin: { width: '50%', placeholder: String(D.tabletWidth) },\n                },\n                {\n                  name: 'mobileWidth',\n                  type: 'number',\n                  label: 'Mobile (px)',\n                  defaultValue: D.mobileWidth,\n                  min: MOBILE_WIDTH_MIN,\n                  max: MOBILE_WIDTH_MAX,\n                  admin: { width: '50%', placeholder: String(D.mobileWidth) },\n                },\n              ],\n            },\n          ],\n        },\n        {\n          label: 'Outline',\n          description: 'Outline + tint shown on the hovered or selected block.',\n          fields: [\n            {\n              type: 'row',\n              fields: [\n                {\n                  name: 'hoverColorTopLevel',\n                  type: 'text',\n                  label: 'Top-level color',\n                  defaultValue: D.hoverColorTopLevel,\n                  validate: validateHoverColor,\n                  admin: {\n                    width: '50%',\n                    placeholder: D.hoverColorTopLevel,\n                    description: 'Hex color (e.g. `#3b82f6`).',\n                  },\n                },\n                {\n                  name: 'hoverColorNested',\n                  type: 'text',\n                  label: 'Nested color',\n                  defaultValue: D.hoverColorNested,\n                  validate: validateHoverColor,\n                  admin: {\n                    width: '50%',\n                    placeholder: D.hoverColorNested,\n                    description: 'Hex color for blocks nested inside another block.',\n                  },\n                },\n              ],\n            },\n            {\n              name: 'hoverOutlineWidth',\n              type: 'number',\n              label: 'Outline width (px)',\n              defaultValue: D.hoverOutlineWidth,\n              min: HOVER_OUTLINE_MIN,\n              max: HOVER_OUTLINE_MAX,\n              validate: validateHoverOutline,\n              admin: {\n                placeholder: String(D.hoverOutlineWidth),\n                description: `Outline thickness in pixels (${HOVER_OUTLINE_MIN}–${HOVER_OUTLINE_MAX}).`,\n              },\n            },\n          ],\n        },\n        {\n          label: 'Toolbar',\n          description:\n            'Floating Move / Duplicate / Delete toolbar that appears on the selected block.',\n          fields: [\n            {\n              name: 'showHoverToolbar',\n              type: 'checkbox',\n              label: 'Enabled',\n              defaultValue: D.showHoverToolbar,\n            },\n            {\n              name: 'hoverToolbarPosition',\n              type: 'select',\n              label: 'Anchor corner',\n              defaultValue: D.hoverToolbarPosition,\n              options: [\n                { label: 'Top right', value: 'top-right' },\n                { label: 'Top left', value: 'top-left' },\n                { label: 'Bottom right', value: 'bottom-right' },\n                { label: 'Bottom left', value: 'bottom-left' },\n              ],\n            },\n          ],\n        },\n      ],\n    },\n  ],\n}\n"],"names":["DEFAULT_BETTER_EDITOR_SETTINGS","D","HOVER_OUTLINE_MAX","HOVER_OUTLINE_MIN","MOBILE_WIDTH_MAX","MOBILE_WIDTH_MIN","TABLET_WIDTH_MAX","TABLET_WIDTH_MIN","BETTER_EDITOR_SETTINGS_SLUG","BETTER_EDITOR_SETTINGS_BANNER_FIELD","HOVER_COLOR_RE","validateHoverColor","value","length","test","trim","validateHoverOutline","Number","isFinite","betterEditorSettingsGlobal","slug","label","access","read","admin","group","description","fields","name","type","components","Field","tabs","defaultValue","sidebarPosition","options","forceFullWidthFields","tabletWidth","min","max","width","placeholder","String","mobileWidth","hoverColorTopLevel","validate","hoverColorNested","hoverOutlineWidth","showHoverToolbar","hoverToolbarPosition"],"mappings":"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"}

package/dist/hooks/useAddBlockDrawer.d.ts

@@ -0,0 +1,14 @@
+export type UseAddBlockDrawerArgs = {
+    drawerSlug: string;
+    /** Bumped externally to request the drawer to open. */
+    requestId: number;
+    /** Drawer should only open when a block is currently selected. */
+    selectedBlockPath: string | null;
+};
+/**
+ * Defers `toggleModal(drawerSlug)` to the next paint so the drawer is
+ * mounted before we open it (the sidebar may have just auto-switched to
+ * the Blocks tab). De-duplicates by `requestId` so a stale id can't
+ * re-trigger after the drawer has been closed.
+ */
+export declare const useAddBlockDrawer: ({ drawerSlug, requestId, selectedBlockPath, }: UseAddBlockDrawerArgs) => void;

package/dist/hooks/useAddBlockDrawer.js

@@ -0,0 +1,26 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import { useModal } from '@payloadcms/ui';
+/**
+ * Defers `toggleModal(drawerSlug)` to the next paint so the drawer is
+ * mounted before we open it (the sidebar may have just auto-switched to
+ * the Blocks tab). De-duplicates by `requestId` so a stale id can't
+ * re-trigger after the drawer has been closed.
+ */ export const useAddBlockDrawer = ({ drawerSlug, requestId, selectedBlockPath })=>{
+    const { toggleModal } = useModal();
+    const lastHandledRef = useRef(0);
+    useEffect(()=>{
+        if (!requestId || requestId === lastHandledRef.current) return;
+        if (!selectedBlockPath) return;
+        lastHandledRef.current = requestId;
+        const raf = requestAnimationFrame(()=>toggleModal(drawerSlug));
+        return ()=>cancelAnimationFrame(raf);
+    }, [
+        requestId,
+        selectedBlockPath,
+        toggleModal,
+        drawerSlug
+    ]);
+};
+
+//# sourceMappingURL=useAddBlockDrawer.js.map

package/dist/hooks/useAddBlockDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useAddBlockDrawer.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef } from 'react'\nimport { useModal } from '@payloadcms/ui'\n\nexport type UseAddBlockDrawerArgs = {\n  drawerSlug: string\n  /** Bumped externally to request the drawer to open. */\n  requestId: number\n  /** Drawer should only open when a block is currently selected. */\n  selectedBlockPath: string | null\n}\n\n/**\n * Defers `toggleModal(drawerSlug)` to the next paint so the drawer is\n * mounted before we open it (the sidebar may have just auto-switched to\n * the Blocks tab). De-duplicates by `requestId` so a stale id can't\n * re-trigger after the drawer has been closed.\n */\nexport const useAddBlockDrawer = ({\n  drawerSlug,\n  requestId,\n  selectedBlockPath,\n}: UseAddBlockDrawerArgs): void => {\n  const { toggleModal } = useModal()\n  const lastHandledRef = useRef(0)\n\n  useEffect(() => {\n    if (!requestId || requestId === lastHandledRef.current) return\n    if (!selectedBlockPath) return\n    lastHandledRef.current = requestId\n    const raf = requestAnimationFrame(() => toggleModal(drawerSlug))\n    return () => cancelAnimationFrame(raf)\n  }, [requestId, selectedBlockPath, toggleModal, drawerSlug])\n}\n"],"names":["useEffect","useRef","useModal","useAddBlockDrawer","drawerSlug","requestId","selectedBlockPath","toggleModal","lastHandledRef","current","raf","requestAnimationFrame","cancelAnimationFrame"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,QAAO;AACzC,SAASC,QAAQ,QAAQ,iBAAgB;AAUzC;;;;;CAKC,GACD,OAAO,MAAMC,oBAAoB,CAAC,EAChCC,UAAU,EACVC,SAAS,EACTC,iBAAiB,EACK;IACtB,MAAM,EAAEC,WAAW,EAAE,GAAGL;IACxB,MAAMM,iBAAiBP,OAAO;IAE9BD,UAAU;QACR,IAAI,CAACK,aAAaA,cAAcG,eAAeC,OAAO,EAAE;QACxD,IAAI,CAACH,mBAAmB;QACxBE,eAAeC,OAAO,GAAGJ;QACzB,MAAMK,MAAMC,sBAAsB,IAAMJ,YAAYH;QACpD,OAAO,IAAMQ,qBAAqBF;IACpC,GAAG;QAACL;QAAWC;QAAmBC;QAAaH;KAAW;AAC5D,EAAC"}

package/dist/hooks/useBlockActionMessages.d.ts

@@ -0,0 +1,8 @@
+export type UseBlockActionMessagesArgs = {
+    selectedBlockPath: string | null;
+    setSelectedBlockPath: (path: string | null) => void;
+};
+export type UseBlockActionMessagesReturn = {
+    addBelowRequestId: number;
+};
+export declare const useBlockActionMessages: ({ setSelectedBlockPath, }: UseBlockActionMessagesArgs) => UseBlockActionMessagesReturn;

package/dist/hooks/useBlockActionMessages.js

@@ -0,0 +1,107 @@
+'use client';
+import { useEffect, useMemo, useState } from 'react';
+import { useAllFormFields, useForm } from '@payloadcms/ui';
+import { listenForParentInbound } from '../internal/postmessage';
+import { splitFieldPath } from '../internal/path';
+import { useEditorHistory } from '../state/useEditorHistory';
+import { useLatestRef } from './useLatestRef';
+const ID_SUFFIX = '.id';
+const buildIdIndex = (fields)=>{
+    const map = new Map();
+    for (const key of Object.keys(fields)){
+        if (!key.endsWith(ID_SUFFIX)) continue;
+        const value = fields[key]?.value;
+        if (typeof value === 'string' && value.length > 0) {
+            map.set(value, key.slice(0, -ID_SUFFIX.length));
+        }
+    }
+    return map;
+};
+export const useBlockActionMessages = ({ setSelectedBlockPath })=>{
+    const [addBelowRequestId, setAddBelowRequestId] = useState(0);
+    const [allFields] = useAllFormFields();
+    const idIndex = useMemo(()=>buildIdIndex(allFields), [
+        allFields
+    ]);
+    const { dispatchFields } = useForm();
+    const history = useEditorHistory();
+    // Refs let the postMessage listener stay bound across renders without
+    // missing the latest form state, dispatcher, or history commit.
+    const allFieldsRef = useLatestRef(allFields);
+    const idIndexRef = useLatestRef(idIndex);
+    const dispatchFieldsRef = useLatestRef(dispatchFields);
+    const historyRef = useLatestRef(history);
+    const setSelectedBlockPathRef = useLatestRef(setSelectedBlockPath);
+    // Bind the postMessage listener exactly once. All four state inputs flow
+    // through stable refs (above), so a re-bind is never needed.
+    useEffect(()=>listenForParentInbound((data)=>{
+            const fields = allFieldsRef.current;
+            const path = idIndexRef.current.get(data.id) ?? null;
+            if (!path) return;
+            const select = setSelectedBlockPathRef.current;
+            const dispatch = dispatchFieldsRef.current;
+            const { commit } = historyRef.current;
+            if (data.type === 'focus-block') {
+                select(path);
+                return;
+            }
+            if (data.action === 'add') {
+                // Monotonic counter — BlockSettingsTab compares the latest id against
+                // its lastHandledRequestRef. Date.now() risked collisions on
+                // double-clicks landing in the same millisecond.
+                select(path);
+                setAddBelowRequestId((id)=>id + 1);
+                return;
+            }
+            const split = splitFieldPath(path);
+            if (!split) return;
+            const { parent: parentPath, index: rowIndex } = split;
+            const rows = fields[parentPath]?.rows;
+            const rowCount = Array.isArray(rows) ? rows.length : 0;
+            if (rowIndex < 0 || rowIndex >= rowCount) return;
+            switch(data.action){
+                case 'move-up':
+                    if (rowIndex === 0) return;
+                    commit(()=>dispatch({
+                            type: 'MOVE_ROW',
+                            path: parentPath,
+                            moveFromIndex: rowIndex,
+                            moveToIndex: rowIndex - 1
+                        }));
+                    select(`${parentPath}.${rowIndex - 1}`);
+                    break;
+                case 'move-down':
+                    if (rowIndex >= rowCount - 1) return;
+                    commit(()=>dispatch({
+                            type: 'MOVE_ROW',
+                            path: parentPath,
+                            moveFromIndex: rowIndex,
+                            moveToIndex: rowIndex + 1
+                        }));
+                    select(`${parentPath}.${rowIndex + 1}`);
+                    break;
+                case 'duplicate':
+                    commit(()=>dispatch({
+                            type: 'DUPLICATE_ROW',
+                            path: parentPath,
+                            rowIndex
+                        }));
+                    select(`${parentPath}.${rowIndex + 1}`);
+                    break;
+                case 'delete':
+                    commit(()=>dispatch({
+                            type: 'REMOVE_ROW',
+                            path: parentPath,
+                            rowIndex
+                        }));
+                    select(null);
+                    break;
+            }
+        }), // eslint-disable-next-line react-hooks/exhaustive-deps -- refs are stable
+    []);
+    return {
+        addBelowRequestId
+    };
+};
+
+//# sourceMappingURL=useBlockActionMessages.js.map