payload-better-editor 1.0.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,57 @@
+# payload-better-editor
+
+[![npm](https://img.shields.io/npm/v/payload-better-editor?logo=npm&color=ce421b)](https://www.npmjs.com/package/payload-better-editor)
+[![downloads](https://img.shields.io/npm/dt/payload-better-editor?logo=npm&color=ce421b)](https://www.npmjs.com/package/payload-better-editor)
+[![stars](https://img.shields.io/github/stars/scorpio-99/payload-better-editor?logo=github)](https://github.com/scorpio-99/payload-better-editor)
+
+Block editor plugin for [Payload CMS](https://payloadcms.com) that adds a side-by-side live-preview iframe and sidebar to the edit view.
+
+## Skip the giant form - pick a block, edit just that block
+
+Open the editor from any document's edit view. The preview iframe loads your live frontend; clicking a block selects it and opens its real Payload fields in the sidebar - no schema duplication, no custom components.
+
+![Better Editor overview](./assets/overview.gif)
+
+## Floating in-iframe toolbar
+
+Hover any block in the preview to surface its floating action toolbar - move up, move down, duplicate, add-below, delete. All actions go through Payload's form state and are tracked by the plugin's undo/redo history.
+
+![Inline block toolbar](./assets/toolbar.gif)
+
+## Viewports & layout controls
+
+Switch between Desktop, Tablet, Mobile, and Responsive (drag-resizable). The fullscreen button is independent - it puts the whole editor (preview + sidebar) into fullscreen while the iframe keeps the viewport size you picked. The sidebar itself can be drag-resized to any width or collapsed entirely to give the preview the full canvas.
+
+![Viewport switcher and sidebar controls](./assets/viewports.gif)
+
+## Further features
+
+- **Page, Blocks, Settings tabs** auto-derived from your document's tab structure
+- **`BetterEditorSettings` global** so admins can change sidebar position, hover colours, tablet/mobile breakpoints, and hover-toolbar placement live - no re-deploy
+- **Block actions in the sidebar too** - the same move / duplicate / add-below / delete actions are mirrored in the sidebar's Blocks tab, so power users don't have to reach for the iframe toolbar
+- **Undo and Redo** with `Cmd/Ctrl+Z` and `Cmd/Ctrl+Shift+Z` - snapshot-based, covers every block mutation
+- **Interact mode** toggle so clicks pass through to forms, accordions, links inside the preview
+- **Loading skeleton** in the iframe and an error boundary so a single bad block can't take the admin down
+- **Click-to-edit** works at arbitrary nesting depth - clicking a deeply nested block walks up to its innermost wrapper
+- **Real Payload fields** in the sidebar via `RenderFields`, so custom field components, validations, and access control all just work
+
+## Install
+
+```bash
+pnpm add payload-better-editor
+```
+
+See [DEVELOPERS.md](./DEVELOPERS.md) for setup, plugin options, runtime settings, and architecture notes.
+
+## Requirements
+
+- Payload `>=3.81.0`
+- React 19
+
+> **Found a bug?** Early-stage plugin, feedback is appreciated. [Open an issue](https://github.com/scorpio-99/payload-better-editor/issues/new) with steps to reproduce, your Payload version, and a minimal example. PRs welcome.
+
+## Contributors
+
+<a href="https://github.com/scorpio-99/payload-better-editor/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=scorpio-99/payload-better-editor" />
+</a>

package/dist/admin/ErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+type Props = {
+    onClose: () => void;
+    onReset?: () => void;
+    children: React.ReactNode;
+};
+type State = {
+    error: Error | null;
+};
+export declare class OverlayErrorBoundary extends React.Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
+    private reset;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/dist/admin/ErrorBoundary.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+const isDev = process.env.NODE_ENV !== 'production';
+export class OverlayErrorBoundary extends React.Component {
+    state = {
+        error: null
+    };
+    static getDerivedStateFromError(error) {
+        return {
+            error
+        };
+    }
+    componentDidCatch(error, info) {
+        console.error('[better-editor] overlay crashed', error, info);
+    }
+    reset = ()=>{
+        this.props.onReset?.();
+        this.setState({
+            error: null
+        });
+    };
+    render() {
+        const { error } = this.state;
+        if (!error) return this.props.children;
+        return /*#__PURE__*/ _jsx("div", {
+            className: "better-editor better-editor--errored",
+            role: "alert",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "better-editor__error",
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        children: "Better Editor crashed"
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        children: error.message || 'Unknown error.'
+                    }),
+                    isDev && error.stack ? /*#__PURE__*/ _jsx("pre", {
+                        children: error.stack
+                    }) : null,
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "better-editor__error-actions",
+                        children: [
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: this.reset,
+                                children: "Try again"
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: this.props.onClose,
+                                children: "Close editor"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+}
+
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/admin/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/ErrorBoundary.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\ntype Props = {\n  onClose: () => void\n  onReset?: () => void\n  children: React.ReactNode\n}\n\ntype State = {\n  error: Error | null\n}\n\nconst isDev = process.env.NODE_ENV !== 'production'\n\nexport class OverlayErrorBoundary extends React.Component<Props, State> {\n  state: State = { error: null }\n\n  static getDerivedStateFromError(error: Error): State {\n    return { error }\n  }\n\n  componentDidCatch(error: Error, info: React.ErrorInfo) {\n    console.error('[better-editor] overlay crashed', error, info)\n  }\n\n  private reset = () => {\n    this.props.onReset?.()\n    this.setState({ error: null })\n  }\n\n  render() {\n    const { error } = this.state\n    if (!error) return this.props.children\n\n    return (\n      <div className=\"better-editor better-editor--errored\" role=\"alert\">\n        <div className=\"better-editor__error\">\n          <h3>Better Editor crashed</h3>\n          <p>{error.message || 'Unknown error.'}</p>\n          {isDev && error.stack ? <pre>{error.stack}</pre> : null}\n          <div className=\"better-editor__error-actions\">\n            <button type=\"button\" onClick={this.reset}>\n              Try again\n            </button>\n            <button type=\"button\" onClick={this.props.onClose}>\n              Close editor\n            </button>\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"names":["React","isDev","process","env","NODE_ENV","OverlayErrorBoundary","Component","state","error","getDerivedStateFromError","componentDidCatch","info","console","reset","props","onReset","setState","render","children","div","className","role","h3","p","message","stack","pre","button","type","onClick","onClose"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AAYzB,MAAMC,QAAQC,QAAQC,GAAG,CAACC,QAAQ,KAAK;AAEvC,OAAO,MAAMC,6BAA6BL,MAAMM,SAAS;IACvDC,QAAe;QAAEC,OAAO;IAAK,EAAC;IAE9B,OAAOC,yBAAyBD,KAAY,EAAS;QACnD,OAAO;YAAEA;QAAM;IACjB;IAEAE,kBAAkBF,KAAY,EAAEG,IAAqB,EAAE;QACrDC,QAAQJ,KAAK,CAAC,mCAAmCA,OAAOG;IAC1D;IAEQE,QAAQ;QACd,IAAI,CAACC,KAAK,CAACC,OAAO;QAClB,IAAI,CAACC,QAAQ,CAAC;YAAER,OAAO;QAAK;IAC9B,EAAC;IAEDS,SAAS;QACP,MAAM,EAAET,KAAK,EAAE,GAAG,IAAI,CAACD,KAAK;QAC5B,IAAI,CAACC,OAAO,OAAO,IAAI,CAACM,KAAK,CAACI,QAAQ;QAEtC,qBACE,KAACC;YAAIC,WAAU;YAAuCC,MAAK;sBACzD,cAAA,MAACF;gBAAIC,WAAU;;kCACb,KAACE;kCAAG;;kCACJ,KAACC;kCAAGf,MAAMgB,OAAO,IAAI;;oBACpBvB,SAASO,MAAMiB,KAAK,iBAAG,KAACC;kCAAKlB,MAAMiB,KAAK;yBAAU;kCACnD,MAACN;wBAAIC,WAAU;;0CACb,KAACO;gCAAOC,MAAK;gCAASC,SAAS,IAAI,CAAChB,KAAK;0CAAE;;0CAG3C,KAACc;gCAAOC,MAAK;gCAASC,SAAS,IAAI,CAACf,KAAK,CAACgB,OAAO;0CAAE;;;;;;;IAO7D;AACF"}

package/dist/admin/LiveEditorOverlay.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import '../styles/overlay.css';
+import '../styles/preview.css';
+import '../styles/sidebar.css';
+import '../styles/blocks-tab.css';
+export type LiveEditorOverlayProps = {
+    onClose: () => void;
+    blocksField: string;
+    storageNamespace?: string;
+    adminPortalSelector?: string;
+};
+export declare const LiveEditorOverlay: React.FC<LiveEditorOverlayProps>;

package/dist/admin/LiveEditorOverlay.js

@@ -0,0 +1,160 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
+import { useLivePreviewContext } from '@payloadcms/ui';
+import { PreviewFrame } from './PreviewFrame';
+import { PreviewToolbar } from './PreviewToolbar';
+import { Sidebar } from './sidebar/Sidebar';
+import { useBetterEditorSettings } from '../state/useBetterEditorSettings';
+import { useEditorHistory } from '../state/useEditorHistory';
+import { useSidebarResize } from '../hooks/useSidebarResize';
+import { useViewportState } from '../hooks/useViewportState';
+import { useFullscreenOverlay } from '../hooks/useFullscreenOverlay';
+import { useBlockActionMessages } from '../hooks/useBlockActionMessages';
+import { useOverlayKeyboard } from '../hooks/useOverlayKeyboard';
+import { useFocusTrap } from '../hooks/useFocusTrap';
+import { OverlayProviders } from '../providers/OverlayProviders';
+import '../styles/overlay.css';
+import '../styles/preview.css';
+import '../styles/sidebar.css';
+import '../styles/blocks-tab.css';
+const RESIZE_HANDLE_PX = 6;
+const classes = (...parts)=>parts.filter(Boolean).join(' ');
+export const LiveEditorOverlay = ({ onClose, blocksField, storageNamespace, adminPortalSelector })=>{
+    // Selection state lives outside OverlayProviders so the error boundary's
+    // onReset can clear it without remounting providers.
+    const [selectedBlockPath, setSelectedBlockPath] = useState(null);
+    const clearSelection = useCallback(()=>setSelectedBlockPath(null), []);
+    return /*#__PURE__*/ _jsx(OverlayProviders, {
+        onClose: onClose,
+        onReset: clearSelection,
+        storageNamespace: storageNamespace,
+        adminPortalSelector: adminPortalSelector,
+        children: /*#__PURE__*/ _jsx(LiveEditorOverlayInner, {
+            onClose: onClose,
+            blocksField: blocksField,
+            selectedBlockPath: selectedBlockPath,
+            setSelectedBlockPath: setSelectedBlockPath
+        })
+    });
+};
+const LiveEditorOverlayInner = ({ onClose, blocksField, selectedBlockPath, setSelectedBlockPath })=>{
+    const settings = useBetterEditorSettings();
+    const history = useEditorHistory();
+    const { previewURL } = useLivePreviewContext();
+    const { sidebarWidth, isResizing, onResizeStart, onResizeKeyDown } = useSidebarResize(settings.sidebarPosition);
+    const { viewport, setViewport, setResponsiveWidth, viewportWidth } = useViewportState(settings);
+    // Live-observed iframe width; PreviewFrame reports it via the
+    // ResizeObserver, the toolbar's width-chip reads it.
+    const [iframeWidth, setIframeWidth] = useState(null);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const toggleFullscreen = useCallback(()=>setIsFullscreen((v)=>!v), []);
+    const exitFullscreen = useCallback(()=>setIsFullscreen(false), []);
+    const overlayRef = useFullscreenOverlay(isFullscreen, exitFullscreen);
+    useFocusTrap(overlayRef);
+    const clearSelection = useCallback(()=>setSelectedBlockPath(null), [
+        setSelectedBlockPath
+    ]);
+    const { addBelowRequestId } = useBlockActionMessages({
+        selectedBlockPath,
+        setSelectedBlockPath
+    });
+    useOverlayKeyboard({
+        onClose,
+        history
+    });
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const toggleSidebar = useCallback(()=>setSidebarCollapsed((v)=>!v), []);
+    const [interactMode, setInteractMode] = useState(false);
+    const toggleInteractMode = useCallback(()=>setInteractMode((v)=>!v), []);
+    const isLeft = settings.sidebarPosition === 'left';
+    const showSidebar = !sidebarCollapsed;
+    const gridTemplateColumns = !showSidebar ? '1fr' : isLeft ? `${sidebarWidth}px ${RESIZE_HANDLE_PX}px 1fr` : `1fr ${RESIZE_HANDLE_PX}px ${sidebarWidth}px`;
+    return /*#__PURE__*/ _jsx("div", {
+        ref: overlayRef,
+        className: classes('better-editor', isResizing && 'better-editor--resizing', isFullscreen && 'better-editor--fullscreen'),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Better Editor",
+        tabIndex: -1,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "better-editor__body",
+            style: {
+                gridTemplateColumns
+            },
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "better-editor__preview",
+                    style: {
+                        order: isLeft ? 2 : 0
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(PreviewToolbar, {
+                            history: history,
+                            viewport: viewport,
+                            onViewportChange: setViewport,
+                            iframeWidth: iframeWidth,
+                            isFullscreen: isFullscreen,
+                            onFullscreenToggle: toggleFullscreen,
+                            interactMode: interactMode,
+                            onInteractToggle: toggleInteractMode,
+                            sidebarCollapsed: sidebarCollapsed,
+                            onSidebarToggle: toggleSidebar
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "better-editor__preview-stage",
+                            children: /*#__PURE__*/ _jsx(PreviewFrame, {
+                                previewURL: previewURL,
+                                hoverColorTopLevel: settings.hoverColorTopLevel,
+                                hoverColorNested: settings.hoverColorNested,
+                                hoverOutlineWidth: settings.hoverOutlineWidth,
+                                showHoverToolbar: settings.showHoverToolbar,
+                                hoverToolbarPosition: settings.hoverToolbarPosition,
+                                selectedBlockPath: selectedBlockPath,
+                                interactMode: interactMode,
+                                viewport: viewport,
+                                viewportWidth: viewportWidth,
+                                resizable: viewport === 'responsive',
+                                onResize: setResponsiveWidth,
+                                onIframeWidthChange: setIframeWidth
+                            })
+                        })
+                    ]
+                }),
+                showSidebar ? /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "better-editor__resize-handle",
+                            style: {
+                                order: 1
+                            },
+                            role: "separator",
+                            "aria-orientation": "vertical",
+                            "aria-label": "Resize sidebar (use ← / → arrow keys)",
+                            "aria-valuenow": sidebarWidth,
+                            tabIndex: 0,
+                            onMouseDown: onResizeStart,
+                            onKeyDown: onResizeKeyDown
+                        }),
+                        /*#__PURE__*/ _jsx("aside", {
+                            className: "better-editor__sidebar",
+                            style: {
+                                order: isLeft ? 0 : 2
+                            },
+                            children: /*#__PURE__*/ _jsx(Sidebar, {
+                                selectedBlockPath: selectedBlockPath,
+                                onClearSelection: clearSelection,
+                                onSelectPath: setSelectedBlockPath,
+                                forceFullWidthFields: settings.forceFullWidthFields,
+                                blocksField: blocksField,
+                                addBelowRequestId: addBelowRequestId
+                            })
+                        })
+                    ]
+                }) : null
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=LiveEditorOverlay.js.map

package/dist/admin/LiveEditorOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/LiveEditorOverlay.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useState } from 'react'\nimport { useLivePreviewContext } from '@payloadcms/ui'\nimport { PreviewFrame } from './PreviewFrame'\nimport { PreviewToolbar } from './PreviewToolbar'\nimport { Sidebar } from './sidebar/Sidebar'\nimport { useBetterEditorSettings } from '../state/useBetterEditorSettings'\nimport { useEditorHistory } from '../state/useEditorHistory'\nimport { useSidebarResize } from '../hooks/useSidebarResize'\nimport { useViewportState } from '../hooks/useViewportState'\nimport { useFullscreenOverlay } from '../hooks/useFullscreenOverlay'\nimport { useBlockActionMessages } from '../hooks/useBlockActionMessages'\nimport { useOverlayKeyboard } from '../hooks/useOverlayKeyboard'\nimport { useFocusTrap } from '../hooks/useFocusTrap'\nimport { OverlayProviders } from '../providers/OverlayProviders'\nimport '../styles/overlay.css'\nimport '../styles/preview.css'\nimport '../styles/sidebar.css'\nimport '../styles/blocks-tab.css'\n\nexport type LiveEditorOverlayProps = {\n  onClose: () => void\n  blocksField: string\n  storageNamespace?: string\n  adminPortalSelector?: string\n}\n\nconst RESIZE_HANDLE_PX = 6\n\nconst classes = (...parts: Array<string | false | null | undefined>): string =>\n  parts.filter(Boolean).join(' ')\n\nexport const LiveEditorOverlay: React.FC<LiveEditorOverlayProps> = ({\n  onClose,\n  blocksField,\n  storageNamespace,\n  adminPortalSelector,\n}) => {\n  // Selection state lives outside OverlayProviders so the error boundary's\n  // onReset can clear it without remounting providers.\n  const [selectedBlockPath, setSelectedBlockPath] = useState<string | null>(null)\n  const clearSelection = useCallback(() => setSelectedBlockPath(null), [])\n\n  return (\n    <OverlayProviders\n      onClose={onClose}\n      onReset={clearSelection}\n      storageNamespace={storageNamespace}\n      adminPortalSelector={adminPortalSelector}\n    >\n      <LiveEditorOverlayInner\n        onClose={onClose}\n        blocksField={blocksField}\n        selectedBlockPath={selectedBlockPath}\n        setSelectedBlockPath={setSelectedBlockPath}\n      />\n    </OverlayProviders>\n  )\n}\n\ntype InnerProps = LiveEditorOverlayProps & {\n  selectedBlockPath: string | null\n  setSelectedBlockPath: React.Dispatch<React.SetStateAction<string | null>>\n}\n\nconst LiveEditorOverlayInner: React.FC<InnerProps> = ({\n  onClose,\n  blocksField,\n  selectedBlockPath,\n  setSelectedBlockPath,\n}) => {\n  const settings = useBetterEditorSettings()\n  const history = useEditorHistory()\n  const { previewURL } = useLivePreviewContext()\n\n  const { sidebarWidth, isResizing, onResizeStart, onResizeKeyDown } = useSidebarResize(\n    settings.sidebarPosition,\n  )\n  const {\n    viewport,\n    setViewport,\n    setResponsiveWidth,\n    viewportWidth,\n  } = useViewportState(settings)\n  // Live-observed iframe width; PreviewFrame reports it via the\n  // ResizeObserver, the toolbar's width-chip reads it.\n  const [iframeWidth, setIframeWidth] = useState<number | null>(null)\n\n  const [isFullscreen, setIsFullscreen] = useState(false)\n  const toggleFullscreen = useCallback(() => setIsFullscreen((v) => !v), [])\n  const exitFullscreen = useCallback(() => setIsFullscreen(false), [])\n  const overlayRef = useFullscreenOverlay(isFullscreen, exitFullscreen)\n  useFocusTrap(overlayRef)\n\n  const clearSelection = useCallback(\n    () => setSelectedBlockPath(null),\n    [setSelectedBlockPath],\n  )\n\n  const { addBelowRequestId } = useBlockActionMessages({\n    selectedBlockPath,\n    setSelectedBlockPath,\n  })\n\n  useOverlayKeyboard({ onClose, history })\n\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)\n  const toggleSidebar = useCallback(() => setSidebarCollapsed((v) => !v), [])\n\n  const [interactMode, setInteractMode] = useState(false)\n  const toggleInteractMode = useCallback(() => setInteractMode((v) => !v), [])\n\n  const isLeft = settings.sidebarPosition === 'left'\n  const showSidebar = !sidebarCollapsed\n  const gridTemplateColumns = !showSidebar\n    ? '1fr'\n    : isLeft\n      ? `${sidebarWidth}px ${RESIZE_HANDLE_PX}px 1fr`\n      : `1fr ${RESIZE_HANDLE_PX}px ${sidebarWidth}px`\n\n  return (\n    <div\n      ref={overlayRef}\n      className={classes(\n        'better-editor',\n        isResizing && 'better-editor--resizing',\n        isFullscreen && 'better-editor--fullscreen',\n      )}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Better Editor\"\n      tabIndex={-1}\n    >\n      <div className=\"better-editor__body\" style={{ gridTemplateColumns }}>\n        <div className=\"better-editor__preview\" style={{ order: isLeft ? 2 : 0 }}>\n          <PreviewToolbar\n            history={history}\n            viewport={viewport}\n            onViewportChange={setViewport}\n            iframeWidth={iframeWidth}\n            isFullscreen={isFullscreen}\n            onFullscreenToggle={toggleFullscreen}\n            interactMode={interactMode}\n            onInteractToggle={toggleInteractMode}\n            sidebarCollapsed={sidebarCollapsed}\n            onSidebarToggle={toggleSidebar}\n          />\n          <div className=\"better-editor__preview-stage\">\n            <PreviewFrame\n              previewURL={previewURL}\n              hoverColorTopLevel={settings.hoverColorTopLevel}\n              hoverColorNested={settings.hoverColorNested}\n              hoverOutlineWidth={settings.hoverOutlineWidth}\n              showHoverToolbar={settings.showHoverToolbar}\n              hoverToolbarPosition={settings.hoverToolbarPosition}\n              selectedBlockPath={selectedBlockPath}\n              interactMode={interactMode}\n              viewport={viewport}\n              viewportWidth={viewportWidth}\n              resizable={viewport === 'responsive'}\n              onResize={setResponsiveWidth}\n              onIframeWidthChange={setIframeWidth}\n            />\n          </div>\n        </div>\n        {showSidebar ? (\n          <>\n            <div\n              className=\"better-editor__resize-handle\"\n              style={{ order: 1 }}\n              role=\"separator\"\n              aria-orientation=\"vertical\"\n              aria-label=\"Resize sidebar (use ← / → arrow keys)\"\n              aria-valuenow={sidebarWidth}\n              tabIndex={0}\n              onMouseDown={onResizeStart}\n              onKeyDown={onResizeKeyDown}\n            />\n            <aside\n              className=\"better-editor__sidebar\"\n              style={{ order: isLeft ? 0 : 2 }}\n            >\n              <Sidebar\n                selectedBlockPath={selectedBlockPath}\n                onClearSelection={clearSelection}\n                onSelectPath={setSelectedBlockPath}\n                forceFullWidthFields={settings.forceFullWidthFields}\n                blocksField={blocksField}\n                addBelowRequestId={addBelowRequestId}\n              />\n            </aside>\n          </>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\n"],"names":["React","useCallback","useState","useLivePreviewContext","PreviewFrame","PreviewToolbar","Sidebar","useBetterEditorSettings","useEditorHistory","useSidebarResize","useViewportState","useFullscreenOverlay","useBlockActionMessages","useOverlayKeyboard","useFocusTrap","OverlayProviders","RESIZE_HANDLE_PX","classes","parts","filter","Boolean","join","LiveEditorOverlay","onClose","blocksField","storageNamespace","adminPortalSelector","selectedBlockPath","setSelectedBlockPath","clearSelection","onReset","LiveEditorOverlayInner","settings","history","previewURL","sidebarWidth","isResizing","onResizeStart","onResizeKeyDown","sidebarPosition","viewport","setViewport","setResponsiveWidth","viewportWidth","iframeWidth","setIframeWidth","isFullscreen","setIsFullscreen","toggleFullscreen","v","exitFullscreen","overlayRef","addBelowRequestId","sidebarCollapsed","setSidebarCollapsed","toggleSidebar","interactMode","setInteractMode","toggleInteractMode","isLeft","showSidebar","gridTemplateColumns","div","ref","className","role","aria-modal","aria-label","tabIndex","style","order","onViewportChange","onFullscreenToggle","onInteractToggle","onSidebarToggle","hoverColorTopLevel","hoverColorNested","hoverOutlineWidth","showHoverToolbar","hoverToolbarPosition","resizable","onResize","onIframeWidthChange","aria-orientation","aria-valuenow","onMouseDown","onKeyDown","aside","onClearSelection","onSelectPath","forceFullWidthFields"],"mappings":"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"}

package/dist/admin/LiveEditorToggle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type LiveEditorToggleProps = {
+    blocksField: string;
+    adminPortalSelector?: string;
+    storageNamespace?: string;
+};
+export declare const LiveEditorToggle: React.FC<LiveEditorToggleProps>;

package/dist/admin/LiveEditorToggle.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useDocumentInfo, useLivePreviewContext, usePreferences } from '@payloadcms/ui';
+import { LiveEditorOverlay } from './LiveEditorOverlay';
+import { useMainWrapperPortal } from '../hooks/useMainWrapperPortal';
+import { buildStorageKeys } from '../internal/storage-keys';
+import { LayoutIcon } from './icons';
+export const LiveEditorToggle = ({ blocksField, adminPortalSelector, storageNamespace })=>{
+    const [open, setOpen] = useState(false);
+    const { collectionSlug, globalSlug } = useDocumentInfo();
+    const { previewURL } = useLivePreviewContext();
+    const { getPreference, setPreference } = usePreferences();
+    const storageKeys = useMemo(()=>buildStorageKeys(storageNamespace), [
+        storageNamespace
+    ]);
+    const prefKey = storageKeys.togglePreference(collectionSlug, globalSlug);
+    // Tracks the prefKey we've successfully hydrated against so persistence
+    // can't fire with the initial `false` before the read resolves, and so
+    // switching documents reseeds without clobbering the new doc's pref.
+    const hydratedKeyRef = useRef(null);
+    useEffect(()=>{
+        let cancelled = false;
+        hydratedKeyRef.current = null;
+        void getPreference(prefKey).then((pref)=>{
+            if (cancelled) return;
+            hydratedKeyRef.current = prefKey;
+            setOpen(Boolean(pref?.open));
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        prefKey,
+        getPreference
+    ]);
+    useEffect(()=>{
+        if (hydratedKeyRef.current !== prefKey) return;
+        void setPreference(prefKey, {
+            open
+        }, true);
+    }, [
+        open,
+        prefKey,
+        setPreference
+    ]);
+    const handleToggle = useCallback(()=>setOpen((v)=>!v), []);
+    const handleClose = useCallback(()=>setOpen(false), []);
+    const mountNode = useMainWrapperPortal(open, adminPortalSelector);
+    const label = open ? 'Close Better Editor' : 'Open Better Editor';
+    // Mirror Payload's official live-preview behaviour: only surface the
+    // toggle once a previewURL is actually resolvable (collection has
+    // `admin.livePreview.url` configured AND the document has the data
+    // the URL function depends on, e.g. slug). Hiding the button avoids
+    // the misleading "Loading preview URL…" / "not configured" empty
+    // states inside the overlay entirely.
+    if (!previewURL) return null;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                "aria-label": label,
+                "aria-pressed": open,
+                className: "preview-btn",
+                onClick: handleToggle,
+                title: label,
+                type: "button",
+                style: open ? {
+                    borderColor: 'var(--theme-elevation-300)',
+                    backgroundColor: 'var(--theme-elevation-100)'
+                } : undefined,
+                children: /*#__PURE__*/ _jsx(LayoutIcon, {})
+            }),
+            open && mountNode ? /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx(LiveEditorOverlay, {
+                onClose: handleClose,
+                blocksField: blocksField,
+                storageNamespace: storageNamespace,
+                adminPortalSelector: adminPortalSelector
+            }), mountNode) : null
+        ]
+    });
+};
+
+//# sourceMappingURL=LiveEditorToggle.js.map

package/dist/admin/LiveEditorToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/LiveEditorToggle.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { useDocumentInfo, useLivePreviewContext, usePreferences } from '@payloadcms/ui'\nimport { LiveEditorOverlay } from './LiveEditorOverlay'\nimport { useMainWrapperPortal } from '../hooks/useMainWrapperPortal'\nimport { buildStorageKeys } from '../internal/storage-keys'\nimport { LayoutIcon } from './icons'\n\ntype Pref = { open?: boolean }\n\nexport type LiveEditorToggleProps = {\n  blocksField: string\n  adminPortalSelector?: string\n  storageNamespace?: string\n}\n\nexport const LiveEditorToggle: React.FC<LiveEditorToggleProps> = ({\n  blocksField,\n  adminPortalSelector,\n  storageNamespace,\n}) => {\n  const [open, setOpen] = useState(false)\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n  const { previewURL } = useLivePreviewContext()\n  const { getPreference, setPreference } = usePreferences()\n  const storageKeys = useMemo(() => buildStorageKeys(storageNamespace), [storageNamespace])\n  const prefKey = storageKeys.togglePreference(collectionSlug, globalSlug)\n\n  // Tracks the prefKey we've successfully hydrated against so persistence\n  // can't fire with the initial `false` before the read resolves, and so\n  // switching documents reseeds without clobbering the new doc's pref.\n  const hydratedKeyRef = useRef<string | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n    hydratedKeyRef.current = null\n    void getPreference<Pref>(prefKey).then((pref) => {\n      if (cancelled) return\n      hydratedKeyRef.current = prefKey\n      setOpen(Boolean(pref?.open))\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [prefKey, getPreference])\n\n  useEffect(() => {\n    if (hydratedKeyRef.current !== prefKey) return\n    void setPreference<Pref>(prefKey, { open }, true)\n  }, [open, prefKey, setPreference])\n\n  const handleToggle = useCallback(() => setOpen((v) => !v), [])\n  const handleClose = useCallback(() => setOpen(false), [])\n\n  const mountNode = useMainWrapperPortal(open, adminPortalSelector)\n  const label = open ? 'Close Better Editor' : 'Open Better Editor'\n\n  // Mirror Payload's official live-preview behaviour: only surface the\n  // toggle once a previewURL is actually resolvable (collection has\n  // `admin.livePreview.url` configured AND the document has the data\n  // the URL function depends on, e.g. slug). Hiding the button avoids\n  // the misleading \"Loading preview URL…\" / \"not configured\" empty\n  // states inside the overlay entirely.\n  if (!previewURL) return null\n\n  return (\n    <>\n      <button\n        aria-label={label}\n        aria-pressed={open}\n        className=\"preview-btn\"\n        onClick={handleToggle}\n        title={label}\n        type=\"button\"\n        style={\n          open\n            ? {\n                borderColor: 'var(--theme-elevation-300)',\n                backgroundColor: 'var(--theme-elevation-100)',\n              }\n            : undefined\n        }\n      >\n        <LayoutIcon />\n      </button>\n\n      {open && mountNode\n        ? createPortal(\n            <LiveEditorOverlay\n              onClose={handleClose}\n              blocksField={blocksField}\n              storageNamespace={storageNamespace}\n              adminPortalSelector={adminPortalSelector}\n            />,\n            mountNode,\n          )\n        : null}\n    </>\n  )\n}\n"],"names":["React","useCallback","useEffect","useMemo","useRef","useState","createPortal","useDocumentInfo","useLivePreviewContext","usePreferences","LiveEditorOverlay","useMainWrapperPortal","buildStorageKeys","LayoutIcon","LiveEditorToggle","blocksField","adminPortalSelector","storageNamespace","open","setOpen","collectionSlug","globalSlug","previewURL","getPreference","setPreference","storageKeys","prefKey","togglePreference","hydratedKeyRef","cancelled","current","then","pref","Boolean","handleToggle","v","handleClose","mountNode","label","button","aria-label","aria-pressed","className","onClick","title","type","style","borderColor","backgroundColor","undefined","onClose"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAChF,SAASC,YAAY,QAAQ,YAAW;AACxC,SAASC,eAAe,EAAEC,qBAAqB,EAAEC,cAAc,QAAQ,iBAAgB;AACvF,SAASC,iBAAiB,QAAQ,sBAAqB;AACvD,SAASC,oBAAoB,QAAQ,gCAA+B;AACpE,SAASC,gBAAgB,QAAQ,2BAA0B;AAC3D,SAASC,UAAU,QAAQ,UAAS;AAUpC,OAAO,MAAMC,mBAAoD,CAAC,EAChEC,WAAW,EACXC,mBAAmB,EACnBC,gBAAgB,EACjB;IACC,MAAM,CAACC,MAAMC,QAAQ,GAAGd,SAAS;IACjC,MAAM,EAAEe,cAAc,EAAEC,UAAU,EAAE,GAAGd;IACvC,MAAM,EAAEe,UAAU,EAAE,GAAGd;IACvB,MAAM,EAAEe,aAAa,EAAEC,aAAa,EAAE,GAAGf;IACzC,MAAMgB,cAActB,QAAQ,IAAMS,iBAAiBK,mBAAmB;QAACA;KAAiB;IACxF,MAAMS,UAAUD,YAAYE,gBAAgB,CAACP,gBAAgBC;IAE7D,wEAAwE;IACxE,uEAAuE;IACvE,qEAAqE;IACrE,MAAMO,iBAAiBxB,OAAsB;IAE7CF,UAAU;QACR,IAAI2B,YAAY;QAChBD,eAAeE,OAAO,GAAG;QACzB,KAAKP,cAAoBG,SAASK,IAAI,CAAC,CAACC;YACtC,IAAIH,WAAW;YACfD,eAAeE,OAAO,GAAGJ;YACzBP,QAAQc,QAAQD,MAAMd;QACxB;QACA,OAAO;YACLW,YAAY;QACd;IACF,GAAG;QAACH;QAASH;KAAc;IAE3BrB,UAAU;QACR,IAAI0B,eAAeE,OAAO,KAAKJ,SAAS;QACxC,KAAKF,cAAoBE,SAAS;YAAER;QAAK,GAAG;IAC9C,GAAG;QAACA;QAAMQ;QAASF;KAAc;IAEjC,MAAMU,eAAejC,YAAY,IAAMkB,QAAQ,CAACgB,IAAM,CAACA,IAAI,EAAE;IAC7D,MAAMC,cAAcnC,YAAY,IAAMkB,QAAQ,QAAQ,EAAE;IAExD,MAAMkB,YAAY1B,qBAAqBO,MAAMF;IAC7C,MAAMsB,QAAQpB,OAAO,wBAAwB;IAE7C,qEAAqE;IACrE,kEAAkE;IAClE,mEAAmE;IACnE,oEAAoE;IACpE,iEAAiE;IACjE,sCAAsC;IACtC,IAAI,CAACI,YAAY,OAAO;IAExB,qBACE;;0BACE,KAACiB;gBACCC,cAAYF;gBACZG,gBAAcvB;gBACdwB,WAAU;gBACVC,SAAST;gBACTU,OAAON;gBACPO,MAAK;gBACLC,OACE5B,OACI;oBACE6B,aAAa;oBACbC,iBAAiB;gBACnB,IACAC;0BAGN,cAAA,KAACpC;;YAGFK,QAAQmB,0BACL/B,2BACE,KAACI;gBACCwC,SAASd;gBACTrB,aAAaA;gBACbE,kBAAkBA;gBAClBD,qBAAqBA;gBAEvBqB,aAEF;;;AAGV,EAAC"}

package/dist/admin/PreviewFrame.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { HoverToolbarPosition } from '../internal/constants';
+import type { Viewport } from './ViewportToggle';
+export type PreviewFrameProps = {
+    previewURL: string | undefined;
+    hoverColorTopLevel: string;
+    hoverColorNested: string;
+    hoverOutlineWidth: number;
+    showHoverToolbar: boolean;
+    hoverToolbarPosition: HoverToolbarPosition;
+    selectedBlockPath: string | null;
+    /** When true, clicks pass through to the consumer page and the
+     * hover/selection affordances are suppressed so users can interact
+     * with forms, accordions, links inside the preview. */
+    interactMode: boolean;
+    viewport?: Viewport;
+    viewportWidth?: number | null;
+    resizable?: boolean;
+    onResize?: (next: number) => void;
+    onIframeWidthChange?: (width: number) => void;
+};
+export declare const PreviewFrame: React.FC<PreviewFrameProps>;

package/dist/admin/PreviewFrame.js

@@ -0,0 +1,137 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { postToParent } from '../internal/postmessage';
+import { useIframeResizeObserver } from '../hooks/useIframeResizeObserver';
+import { usePreviewHandleDrag } from '../hooks/usePreviewHandleDrag';
+import { useLatestRef } from '../hooks/useLatestRef';
+import { usePreviewBinding } from '../hooks/usePreviewBinding';
+import { usePreviewSettingsSync } from '../hooks/usePreviewSettingsSync';
+import { usePreviewSelectionSync } from '../hooks/usePreviewSelectionSync';
+export const PreviewFrame = ({ previewURL, hoverColorTopLevel, hoverColorNested, hoverOutlineWidth, showHoverToolbar, hoverToolbarPosition, selectedBlockPath, interactMode, viewport, viewportWidth, resizable = false, onResize, onIframeWidthChange })=>{
+    const iframeRef = useRef(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const interactModeRef = useLatestRef(interactMode);
+    const { isResizing, onHandleMouseDown } = usePreviewHandleDrag({
+        resizable,
+        viewportWidth,
+        onResize
+    });
+    useIframeResizeObserver(iframeRef, onIframeWidthChange);
+    useEffect(()=>{
+        setIsLoading(true);
+    }, [
+        previewURL
+    ]);
+    const onFocusBlock = useCallback((id)=>{
+        postToParent({
+            type: 'focus-block',
+            id
+        });
+    }, []);
+    const onBlockAction = useCallback((id, action)=>{
+        postToParent({
+            type: 'block-action',
+            id,
+            action
+        });
+    }, []);
+    const settings = useMemo(()=>({
+            hoverColorTopLevel,
+            hoverColorNested,
+            hoverOutlineWidth,
+            showHoverToolbar,
+            hoverToolbarPosition
+        }), [
+        hoverColorTopLevel,
+        hoverColorNested,
+        hoverOutlineWidth,
+        showHoverToolbar,
+        hoverToolbarPosition
+    ]);
+    const { controllerRef, isBoundRef } = usePreviewBinding({
+        iframeRef,
+        settings,
+        interactModeRef,
+        onFocusBlock,
+        onBlockAction,
+        onLoadingChange: setIsLoading
+    });
+    usePreviewSettingsSync({
+        iframeRef,
+        controllerRef,
+        isBoundRef,
+        settings,
+        onBlockAction
+    });
+    usePreviewSelectionSync({
+        iframeRef,
+        controllerRef,
+        selectedBlockPath,
+        interactMode,
+        previewURL
+    });
+    const constrained = typeof viewportWidth === 'number' && viewportWidth > 0;
+    const viewportClassName = [
+        'better-editor-frame__viewport',
+        constrained && 'better-editor-frame__viewport--constrained',
+        constrained && viewport === 'tablet' && 'better-editor-frame__viewport--tablet',
+        constrained && viewport === 'mobile' && 'better-editor-frame__viewport--mobile',
+        resizable && 'better-editor-frame__viewport--resizable',
+        isResizing && 'better-editor-frame__viewport--resizing'
+    ].filter(Boolean).join(' ');
+    const iframeStyle = constrained ? {
+        width: `${viewportWidth}px`,
+        maxWidth: '100%'
+    } : undefined;
+    // The iframe stays in the same wrapper across viewport modes so React
+    // doesn't remount it — that would reload the page and drop the
+    // ResizeObserver.
+    return /*#__PURE__*/ _jsxs("div", {
+        className: viewportClassName,
+        children: [
+            resizable ? /*#__PURE__*/ _jsx("div", {
+                className: "better-editor-frame__handle better-editor-frame__handle--left",
+                role: "separator",
+                "aria-orientation": "vertical",
+                "aria-label": "Resize preview from left",
+                onMouseDown: onHandleMouseDown('left')
+            }) : null,
+            /*#__PURE__*/ _jsx("iframe", {
+                ref: iframeRef,
+                className: "better-editor-frame",
+                src: previewURL,
+                title: "Better Editor preview",
+                style: iframeStyle
+            }),
+            isLoading ? /*#__PURE__*/ _jsxs("div", {
+                className: "better-editor-frame__skeleton",
+                role: "status",
+                "aria-label": "Loading preview",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "better-editor-frame__skeleton-bar better-editor-frame__skeleton-bar--lg"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "better-editor-frame__skeleton-bar"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "better-editor-frame__skeleton-bar better-editor-frame__skeleton-bar--sm"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "better-editor-frame__skeleton-block"
+                    })
+                ]
+            }) : null,
+            resizable ? /*#__PURE__*/ _jsx("div", {
+                className: "better-editor-frame__handle better-editor-frame__handle--right",
+                role: "separator",
+                "aria-orientation": "vertical",
+                "aria-label": "Resize preview from right",
+                onMouseDown: onHandleMouseDown('right')
+            }) : null
+        ]
+    });
+};
+
+//# sourceMappingURL=PreviewFrame.js.map