payload-better-editor 1.2.0 → 1.2.2

package/dist/admin/LiveEditorOverlay.js

@@ -31,14 +31,13 @@ export const LiveEditorOverlay = ({ onClose, blocksField, storageNamespace, admi
         storageNamespace: storageNamespace,
         adminPortalSelector: adminPortalSelector,
         children: /*#__PURE__*/ _jsx(LiveEditorOverlayInner, {
-            onClose: onClose,
             blocksField: blocksField,
             selectedBlockPath: selectedBlockPath,
             setSelectedBlockPath: setSelectedBlockPath
         })
     });
 };
-const LiveEditorOverlayInner = ({ onClose, blocksField, selectedBlockPath, setSelectedBlockPath })=>{
+const LiveEditorOverlayInner = ({ blocksField, selectedBlockPath, setSelectedBlockPath })=>{
     const settings = useBetterEditorSettings();
     const history = useEditorHistory();
     const { previewURL } = useLivePreviewContext();
@@ -59,7 +58,6 @@ const LiveEditorOverlayInner = ({ onClose, blocksField, selectedBlockPath, setSe
         setSelectedBlockPath
     });
     useOverlayKeyboard({
-        onClose,
         history
     });
     const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

package/dist/admin/LiveEditorOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/admin/LiveEditorOverlay.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef, 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  // Shared with the toolbar's width chip, which measures the iframe directly.\n  const iframeRef = useRef<HTMLIFrameElement | 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            iframeRef={iframeRef}\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              iframeRef={iframeRef}\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            />\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","useRef","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","iframeRef","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","aria-orientation","aria-valuenow","onMouseDown","onKeyDown","aside","onClearSelection","onSelectPath","forceFullWidthFields"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAC5D,SAASC,qBAAqB,QAAQ,iBAAgB;AACtD,SAASC,YAAY,QAAQ,iBAAgB;AAC7C,SAASC,cAAc,QAAQ,mBAAkB;AACjD,SAASC,OAAO,QAAQ,oBAAmB;AAC3C,SAASC,uBAAuB,QAAQ,mCAAkC;AAC1E,SAASC,gBAAgB,QAAQ,4BAA2B;AAC5D,SAASC,gBAAgB,QAAQ,4BAA2B;AAC5D,SAASC,gBAAgB,QAAQ,4BAA2B;AAC5D,SAASC,oBAAoB,QAAQ,gCAA+B;AACpE,SAASC,sBAAsB,QAAQ,kCAAiC;AACxE,SAASC,kBAAkB,QAAQ,8BAA6B;AAChE,SAASC,YAAY,QAAQ,wBAAuB;AACpD,SAASC,gBAAgB,QAAQ,gCAA+B;AAChE,OAAO,wBAAuB;AAC9B,OAAO,wBAAuB;AAC9B,OAAO,wBAAuB;AAC9B,OAAO,2BAA0B;AASjC,MAAMC,mBAAmB;AAEzB,MAAMC,UAAU,CAAC,GAAGC,QAClBA,MAAMC,MAAM,CAACC,SAASC,IAAI,CAAC;AAE7B,OAAO,MAAMC,oBAAsD,CAAC,EAClEC,OAAO,EACPC,WAAW,EACXC,gBAAgB,EAChBC,mBAAmB,EACpB;IACC,yEAAyE;IACzE,qDAAqD;IACrD,MAAM,CAACC,mBAAmBC,qBAAqB,GAAG1B,SAAwB;IAC1E,MAAM2B,iBAAiB7B,YAAY,IAAM4B,qBAAqB,OAAO,EAAE;IAEvE,qBACE,KAACb;QACCQ,SAASA;QACTO,SAASD;QACTJ,kBAAkBA;QAClBC,qBAAqBA;kBAErB,cAAA,KAACK;YACCR,SAASA;YACTC,aAAaA;YACbG,mBAAmBA;YACnBC,sBAAsBA;;;AAI9B,EAAC;AAOD,MAAMG,yBAA+C,CAAC,EACpDR,OAAO,EACPC,WAAW,EACXG,iBAAiB,EACjBC,oBAAoB,EACrB;IACC,MAAMI,WAAWzB;IACjB,MAAM0B,UAAUzB;IAChB,MAAM,EAAE0B,UAAU,EAAE,GAAG/B;IAEvB,MAAM,EAAEgC,YAAY,EAAEC,UAAU,EAAEC,aAAa,EAAEC,eAAe,EAAE,GAAG7B,iBACnEuB,SAASO,eAAe;IAE1B,MAAM,EACJC,QAAQ,EACRC,WAAW,EACXC,kBAAkB,EAClBC,aAAa,EACd,GAAGjC,iBAAiBsB;IACrB,4EAA4E;IAC5E,MAAMY,YAAY3C,OAAiC;IAEnD,MAAM,CAAC4C,cAAcC,gBAAgB,GAAG5C,SAAS;IACjD,MAAM6C,mBAAmB/C,YAAY,IAAM8C,gBAAgB,CAACE,IAAM,CAACA,IAAI,EAAE;IACzE,MAAMC,iBAAiBjD,YAAY,IAAM8C,gBAAgB,QAAQ,EAAE;IACnE,MAAMI,aAAavC,qBAAqBkC,cAAcI;IACtDnC,aAAaoC;IAEb,MAAMrB,iBAAiB7B,YACrB,IAAM4B,qBAAqB,OAC3B;QAACA;KAAqB;IAGxB,MAAM,EAAEuB,iBAAiB,EAAE,GAAGvC,uBAAuB;QACnDe;QACAC;IACF;IAEAf,mBAAmB;QAAEU;QAASU;IAAQ;IAEtC,MAAM,CAACmB,kBAAkBC,oBAAoB,GAAGnD,SAAS;IACzD,MAAMoD,gBAAgBtD,YAAY,IAAMqD,oBAAoB,CAACL,IAAM,CAACA,IAAI,EAAE;IAE1E,MAAM,CAACO,cAAcC,gBAAgB,GAAGtD,SAAS;IACjD,MAAMuD,qBAAqBzD,YAAY,IAAMwD,gBAAgB,CAACR,IAAM,CAACA,IAAI,EAAE;IAE3E,MAAMU,SAAS1B,SAASO,eAAe,KAAK;IAC5C,MAAMoB,cAAc,CAACP;IACrB,MAAMQ,sBAAsB,CAACD,cACzB,QACAD,SACE,GAAGvB,aAAa,GAAG,EAAEnB,iBAAiB,MAAM,CAAC,GAC7C,CAAC,IAAI,EAAEA,iBAAiB,GAAG,EAAEmB,aAAa,EAAE,CAAC;IAEnD,qBACE,KAAC0B;QACCC,KAAKZ;QACLa,WAAW9C,QACT,iBACAmB,cAAc,2BACdS,gBAAgB;QAElBmB,MAAK;QACLC,cAAW;QACXC,cAAW;QACXC,UAAU,CAAC;kBAEX,cAAA,MAACN;YAAIE,WAAU;YAAsBK,OAAO;gBAAER;YAAoB;;8BAChE,MAACC;oBAAIE,WAAU;oBAAyBK,OAAO;wBAAEC,OAAOX,SAAS,IAAI;oBAAE;;sCACrE,KAACrD;4BACC4B,SAASA;4BACTO,UAAUA;4BACV8B,kBAAkB7B;4BAClBG,WAAWA;4BACXC,cAAcA;4BACd0B,oBAAoBxB;4BACpBQ,cAAcA;4BACdiB,kBAAkBf;4BAClBL,kBAAkBA;4BAClBqB,iBAAiBnB;;sCAEnB,KAACO;4BAAIE,WAAU;sCACb,cAAA,KAAC3D;gCACCwC,WAAWA;gCACXV,YAAYA;gCACZwC,oBAAoB1C,SAAS0C,kBAAkB;gCAC/CC,kBAAkB3C,SAAS2C,gBAAgB;gCAC3CC,mBAAmB5C,SAAS4C,iBAAiB;gCAC7CC,kBAAkB7C,SAAS6C,gBAAgB;gCAC3CC,sBAAsB9C,SAAS8C,oBAAoB;gCACnDnD,mBAAmBA;gCACnB4B,cAAcA;gCACdf,UAAUA;gCACVG,eAAeA;gCACfoC,WAAWvC,aAAa;gCACxBwC,UAAUtC;;;;;gBAIfiB,4BACC;;sCACE,KAACE;4BACCE,WAAU;4BACVK,OAAO;gCAAEC,OAAO;4BAAE;4BAClBL,MAAK;4BACLiB,oBAAiB;4BACjBf,cAAW;4BACXgB,iBAAe/C;4BACfgC,UAAU;4BACVgB,aAAa9C;4BACb+C,WAAW9C;;sCAEb,KAAC+C;4BACCtB,WAAU;4BACVK,OAAO;gCAAEC,OAAOX,SAAS,IAAI;4BAAE;sCAE/B,cAAA,KAACpD;gCACCqB,mBAAmBA;gCACnB2D,kBAAkBzD;gCAClB0D,cAAc3D;gCACd4D,sBAAsBxD,SAASwD,oBAAoB;gCACnDhE,aAAaA;gCACb2B,mBAAmBA;;;;qBAIvB;;;;AAIZ"}
+{"version":3,"sources":["../../src/admin/LiveEditorOverlay.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef, 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        blocksField={blocksField}\n        selectedBlockPath={selectedBlockPath}\n        setSelectedBlockPath={setSelectedBlockPath}\n      />\n    </OverlayProviders>\n  )\n}\n\ntype InnerProps = Omit<LiveEditorOverlayProps, 'onClose'> & {\n  selectedBlockPath: string | null\n  setSelectedBlockPath: React.Dispatch<React.SetStateAction<string | null>>\n}\n\nconst LiveEditorOverlayInner: React.FC<InnerProps> = ({\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  // Shared with the toolbar's width chip, which measures the iframe directly.\n  const iframeRef = useRef<HTMLIFrameElement | 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({ 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            iframeRef={iframeRef}\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              iframeRef={iframeRef}\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            />\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","useRef","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","iframeRef","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","aria-orientation","aria-valuenow","onMouseDown","onKeyDown","aside","onClearSelection","onSelectPath","forceFullWidthFields"],"mappings":"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"}

package/dist/hooks/useOverlayKeyboard.d.ts

@@ -1,6 +1,5 @@
 import { useEditorHistory } from '../state/useEditorHistory';
 export type UseOverlayKeyboardArgs = {
-    onClose: () => void;
     history: ReturnType<typeof useEditorHistory>;
 };
-export declare const useOverlayKeyboard: ({ onClose, history }: UseOverlayKeyboardArgs) => void;
+export declare const useOverlayKeyboard: ({ history }: UseOverlayKeyboardArgs) => void;

package/dist/hooks/useOverlayKeyboard.js

@@ -1,26 +1,12 @@
 'use client';
 import { useEffect } from 'react';
 import { useLatestRef } from './useLatestRef';
-const EDITABLE_TAGS = new Set([
-    'INPUT',
-    'TEXTAREA',
-    'SELECT'
-]);
-// Don't hijack Escape away from text inputs / native dropdowns / rich text
-// editors — users expect it to clear/blur the field first.
-const isEditableTarget = (el)=>!!el && (EDITABLE_TAGS.has(el.tagName) || el.isContentEditable === true);
-export const useOverlayKeyboard = ({ onClose, history })=>{
+export const useOverlayKeyboard = ({ history })=>{
     const handlersRef = useLatestRef({
-        onClose,
         history
     });
     useEffect(()=>{
         const onKey = (e)=>{
-            if (e.key === 'Escape') {
-                if (isEditableTarget(document.activeElement)) return;
-                handlersRef.current.onClose();
-                return;
-            }
             if (!(e.metaKey || e.ctrlKey)) return;
             const k = e.key.toLowerCase();
             if (k === 'z') {

package/dist/hooks/useOverlayKeyboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useOverlayKeyboard.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\nimport { useEditorHistory } from '../state/useEditorHistory'\nimport { useLatestRef } from './useLatestRef'\n\nexport type UseOverlayKeyboardArgs = {\n  onClose: () => void\n  history: ReturnType<typeof useEditorHistory>\n}\n\nconst EDITABLE_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT'])\n\n// Don't hijack Escape away from text inputs / native dropdowns / rich text\n// editors — users expect it to clear/blur the field first.\nconst isEditableTarget = (el: Element | null): boolean =>\n  !!el && (EDITABLE_TAGS.has(el.tagName) || (el as HTMLElement).isContentEditable === true)\n\nexport const useOverlayKeyboard = ({ onClose, history }: UseOverlayKeyboardArgs): void => {\n  const handlersRef = useLatestRef({ onClose, history })\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        if (isEditableTarget(document.activeElement)) return\n        handlersRef.current.onClose()\n        return\n      }\n      if (!(e.metaKey || e.ctrlKey)) return\n      const k = e.key.toLowerCase()\n      if (k === 'z') {\n        e.preventDefault()\n        const { history: h } = handlersRef.current\n        if (e.shiftKey) h.redo()\n        else h.undo()\n      } else if (k === 'y') {\n        e.preventDefault()\n        handlersRef.current.history.redo()\n      }\n    }\n    window.addEventListener('keydown', onKey)\n    return () => window.removeEventListener('keydown', onKey)\n  }, [handlersRef])\n}\n"],"names":["useEffect","useLatestRef","EDITABLE_TAGS","Set","isEditableTarget","el","has","tagName","isContentEditable","useOverlayKeyboard","onClose","history","handlersRef","onKey","e","key","document","activeElement","current","metaKey","ctrlKey","k","toLowerCase","preventDefault","h","shiftKey","redo","undo","window","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAO;AAEjC,SAASC,YAAY,QAAQ,iBAAgB;AAO7C,MAAMC,gBAAgB,IAAIC,IAAI;IAAC;IAAS;IAAY;CAAS;AAE7D,2EAA2E;AAC3E,2DAA2D;AAC3D,MAAMC,mBAAmB,CAACC,KACxB,CAAC,CAACA,MAAOH,CAAAA,cAAcI,GAAG,CAACD,GAAGE,OAAO,KAAK,AAACF,GAAmBG,iBAAiB,KAAK,IAAG;AAEzF,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,OAAO,EAAEC,OAAO,EAA0B;IAC7E,MAAMC,cAAcX,aAAa;QAAES;QAASC;IAAQ;IAEpDX,UAAU;QACR,MAAMa,QAAQ,CAACC;YACb,IAAIA,EAAEC,GAAG,KAAK,UAAU;gBACtB,IAAIX,iBAAiBY,SAASC,aAAa,GAAG;gBAC9CL,YAAYM,OAAO,CAACR,OAAO;gBAC3B;YACF;YACA,IAAI,CAAEI,CAAAA,EAAEK,OAAO,IAAIL,EAAEM,OAAO,AAAD,GAAI;YAC/B,MAAMC,IAAIP,EAAEC,GAAG,CAACO,WAAW;YAC3B,IAAID,MAAM,KAAK;gBACbP,EAAES,cAAc;gBAChB,MAAM,EAAEZ,SAASa,CAAC,EAAE,GAAGZ,YAAYM,OAAO;gBAC1C,IAAIJ,EAAEW,QAAQ,EAAED,EAAEE,IAAI;qBACjBF,EAAEG,IAAI;YACb,OAAO,IAAIN,MAAM,KAAK;gBACpBP,EAAES,cAAc;gBAChBX,YAAYM,OAAO,CAACP,OAAO,CAACe,IAAI;YAClC;QACF;QACAE,OAAOC,gBAAgB,CAAC,WAAWhB;QACnC,OAAO,IAAMe,OAAOE,mBAAmB,CAAC,WAAWjB;IACrD,GAAG;QAACD;KAAY;AAClB,EAAC"}
+{"version":3,"sources":["../../src/hooks/useOverlayKeyboard.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\nimport { useEditorHistory } from '../state/useEditorHistory'\nimport { useLatestRef } from './useLatestRef'\n\nexport type UseOverlayKeyboardArgs = {\n  history: ReturnType<typeof useEditorHistory>\n}\n\nexport const useOverlayKeyboard = ({ history }: UseOverlayKeyboardArgs): void => {\n  const handlersRef = useLatestRef({ history })\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (!(e.metaKey || e.ctrlKey)) return\n      const k = e.key.toLowerCase()\n      if (k === 'z') {\n        e.preventDefault()\n        const { history: h } = handlersRef.current\n        if (e.shiftKey) h.redo()\n        else h.undo()\n      } else if (k === 'y') {\n        e.preventDefault()\n        handlersRef.current.history.redo()\n      }\n    }\n    window.addEventListener('keydown', onKey)\n    return () => window.removeEventListener('keydown', onKey)\n  }, [handlersRef])\n}\n"],"names":["useEffect","useLatestRef","useOverlayKeyboard","history","handlersRef","onKey","e","metaKey","ctrlKey","k","key","toLowerCase","preventDefault","h","current","shiftKey","redo","undo","window","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAO;AAEjC,SAASC,YAAY,QAAQ,iBAAgB;AAM7C,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,OAAO,EAA0B;IACpE,MAAMC,cAAcH,aAAa;QAAEE;IAAQ;IAE3CH,UAAU;QACR,MAAMK,QAAQ,CAACC;YACb,IAAI,CAAEA,CAAAA,EAAEC,OAAO,IAAID,EAAEE,OAAO,AAAD,GAAI;YAC/B,MAAMC,IAAIH,EAAEI,GAAG,CAACC,WAAW;YAC3B,IAAIF,MAAM,KAAK;gBACbH,EAAEM,cAAc;gBAChB,MAAM,EAAET,SAASU,CAAC,EAAE,GAAGT,YAAYU,OAAO;gBAC1C,IAAIR,EAAES,QAAQ,EAAEF,EAAEG,IAAI;qBACjBH,EAAEI,IAAI;YACb,OAAO,IAAIR,MAAM,KAAK;gBACpBH,EAAEM,cAAc;gBAChBR,YAAYU,OAAO,CAACX,OAAO,CAACa,IAAI;YAClC;QACF;QACAE,OAAOC,gBAAgB,CAAC,WAAWd;QACnC,OAAO,IAAMa,OAAOE,mBAAmB,CAAC,WAAWf;IACrD,GAAG;QAACD;KAAY;AAClB,EAAC"}

package/dist/preview/hover-css.d.ts

@@ -1,4 +1,5 @@
 export declare const HOVER_STYLE_ID = "better-editor-hover-style";
+export declare const HOVER_VARS_STYLE_ID = "better-editor-hover-vars";
 export declare const TOOLBAR_ID = "better-editor-block-toolbar";
 export declare const INTERACT_BODY_ATTR = "data-bee-interact";
 export declare const HOVER_CSS = "\n  body:not([data-bee-interact]) [data-better-editor-id] { cursor: pointer; }\n  body:not([data-bee-interact]) [data-better-editor-id]:hover,\n  body:not([data-bee-interact]) [data-better-editor-id].better-editor-active {\n    outline: var(--bee-outline-width) solid var(--bee-top);\n    outline-offset: calc(-1 * var(--bee-outline-width) - 1px);\n    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--bee-top) 10%, transparent);\n  }\n  body:not([data-bee-interact]) [data-better-editor-id] [data-better-editor-id]:hover,\n  body:not([data-bee-interact]) [data-better-editor-id] [data-better-editor-id].better-editor-active {\n    outline-color: var(--bee-nested);\n    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--bee-nested) 10%, transparent);\n  }\n  body[data-bee-interact] #better-editor-block-toolbar { display: none; }\n\n  #better-editor-block-toolbar {\n    position: absolute;\n    z-index: var(--better-editor-z-toolbar, 2147483647);\n    display: none;\n    gap: 2px;\n    padding: 3px;\n    border-radius: 4px;\n    background: var(--bee-top);\n    color: #fff;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);\n    font-family: system-ui, sans-serif;\n  }\n  #better-editor-block-toolbar[data-nested=\"1\"] { background: var(--bee-nested); }\n  #better-editor-block-toolbar.is-visible { display: inline-flex; }\n  #better-editor-block-toolbar button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 26px;\n    height: 26px;\n    padding: 0;\n    border: 0;\n    border-radius: 3px;\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n  }\n  #better-editor-block-toolbar button:hover { background: rgba(255, 255, 255, 0.18); }\n  #better-editor-block-toolbar button[data-action=\"delete\"]:hover { background: rgba(0, 0, 0, 0.25); }\n";

package/dist/preview/hover-css.js

@@ -1,9 +1,7 @@
 import { ACTIVE_CLASS, BLOCK_ID_ATTR } from '../internal/dom';
 export const HOVER_STYLE_ID = 'better-editor-hover-style';
+export const HOVER_VARS_STYLE_ID = 'better-editor-hover-vars';
 export const TOOLBAR_ID = 'better-editor-block-toolbar';
-// Set on doc.body to disable hover affordances + click-to-focus while
-// the user wants to interact with the consumer page (forms, accordions,
-// links). All hover/active rules below are gated on its absence.
 export const INTERACT_BODY_ATTR = 'data-bee-interact';
 const VAR_TOP = '--bee-top';
 const VAR_NESTED = '--bee-nested';
@@ -66,29 +64,27 @@ const warnInvalid = (kind, value)=>{
         console.warn(`[better-editor] ignoring invalid ${kind}:`, value);
     }
 };
+const buildVarsRule = (vars)=>{
+    const decls = [];
+    if (isValidColor(vars.topColor)) decls.push(`${VAR_TOP}: ${vars.topColor.trim()};`);
+    else warnInvalid('topColor', vars.topColor);
+    if (isValidColor(vars.nestedColor)) decls.push(`${VAR_NESTED}: ${vars.nestedColor.trim()};`);
+    else warnInvalid('nestedColor', vars.nestedColor);
+    if (isValidOutline(vars.outlineWidth)) decls.push(`${VAR_OUTLINE_WIDTH}: ${vars.outlineWidth}px;`);
+    else warnInvalid('outlineWidth', vars.outlineWidth);
+    return `:root { ${decls.join(' ')} }`;
+};
 export const setHoverVars = (doc, vars)=>{
-    const root = doc.documentElement;
-    if (isValidColor(vars.topColor)) {
-        root.style.setProperty(VAR_TOP, vars.topColor);
-    } else {
-        warnInvalid('topColor', vars.topColor);
-    }
-    if (isValidColor(vars.nestedColor)) {
-        root.style.setProperty(VAR_NESTED, vars.nestedColor);
-    } else {
-        warnInvalid('nestedColor', vars.nestedColor);
-    }
-    if (isValidOutline(vars.outlineWidth)) {
-        root.style.setProperty(VAR_OUTLINE_WIDTH, `${vars.outlineWidth}px`);
-    } else {
-        warnInvalid('outlineWidth', vars.outlineWidth);
+    let el = doc.getElementById(HOVER_VARS_STYLE_ID);
+    if (!el) {
+        el = doc.createElement('style');
+        el.id = HOVER_VARS_STYLE_ID;
+        doc.head.appendChild(el);
     }
+    el.textContent = buildVarsRule(vars);
 };
 export const clearHoverVars = (doc)=>{
-    const root = doc.documentElement;
-    root.style.removeProperty(VAR_TOP);
-    root.style.removeProperty(VAR_NESTED);
-    root.style.removeProperty(VAR_OUTLINE_WIDTH);
+    doc.getElementById(HOVER_VARS_STYLE_ID)?.remove();
 };
 
 //# sourceMappingURL=hover-css.js.map

package/dist/preview/hover-css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/preview/hover-css.ts"],"sourcesContent":["import { ACTIVE_CLASS, BLOCK_ID_ATTR } from '../internal/dom'\n\nexport const HOVER_STYLE_ID = 'better-editor-hover-style'\nexport const TOOLBAR_ID = 'better-editor-block-toolbar'\n// Set on doc.body to disable hover affordances + click-to-focus while\n// the user wants to interact with the consumer page (forms, accordions,\n// links). All hover/active rules below are gated on its absence.\nexport const INTERACT_BODY_ATTR = 'data-bee-interact'\n\nconst VAR_TOP = '--bee-top'\nconst VAR_NESTED = '--bee-nested'\nconst VAR_OUTLINE_WIDTH = '--bee-outline-width'\n\nexport const HOVER_CSS = `\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}] { cursor: pointer; }\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}]:hover,\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}].${ACTIVE_CLASS} {\n    outline: var(${VAR_OUTLINE_WIDTH}) solid var(${VAR_TOP});\n    outline-offset: calc(-1 * var(${VAR_OUTLINE_WIDTH}) - 1px);\n    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(${VAR_TOP}) 10%, transparent);\n  }\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}] [${BLOCK_ID_ATTR}]:hover,\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}] [${BLOCK_ID_ATTR}].${ACTIVE_CLASS} {\n    outline-color: var(${VAR_NESTED});\n    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(${VAR_NESTED}) 10%, transparent);\n  }\n  body[${INTERACT_BODY_ATTR}] #${TOOLBAR_ID} { display: none; }\n\n  #${TOOLBAR_ID} {\n    position: absolute;\n    z-index: var(--better-editor-z-toolbar, 2147483647);\n    display: none;\n    gap: 2px;\n    padding: 3px;\n    border-radius: 4px;\n    background: var(${VAR_TOP});\n    color: #fff;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);\n    font-family: system-ui, sans-serif;\n  }\n  #${TOOLBAR_ID}[data-nested=\"1\"] { background: var(${VAR_NESTED}); }\n  #${TOOLBAR_ID}.is-visible { display: inline-flex; }\n  #${TOOLBAR_ID} button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 26px;\n    height: 26px;\n    padding: 0;\n    border: 0;\n    border-radius: 3px;\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n  }\n  #${TOOLBAR_ID} button:hover { background: rgba(255, 255, 255, 0.18); }\n  #${TOOLBAR_ID} button[data-action=\"delete\"]:hover { background: rgba(0, 0, 0, 0.25); }\n`\n\nexport type HoverVars = {\n  topColor: string\n  nestedColor: string\n  outlineWidth: number\n}\n\n// Restrictive on purpose: these values are written verbatim into a CSS\n// custom property on the preview iframe, so anything that survives the\n// regex still lands inside `outline:` / `background-color:`. The regex\n// rejects newlines and unmatched parens so an injected value can't escape\n// into a separate declaration.\nconst COLOR_RE = /^(?:#[0-9a-fA-F]{3,8}|rgba?\\([^()\\n\\r]*\\))$/i\n\nconst isValidColor = (v: unknown): v is string =>\n  typeof v === 'string' && COLOR_RE.test(v.trim())\n\nconst isValidOutline = (v: unknown): v is number =>\n  typeof v === 'number' && Number.isFinite(v) && v >= 0 && v <= 50\n\nconst warnInvalid = (kind: string, value: unknown): void => {\n  if (process.env.NODE_ENV !== 'production') {\n    console.warn(`[better-editor] ignoring invalid ${kind}:`, value)\n  }\n}\n\nexport const setHoverVars = (doc: Document, vars: HoverVars): void => {\n  const root = doc.documentElement\n  if (isValidColor(vars.topColor)) {\n    root.style.setProperty(VAR_TOP, vars.topColor)\n  } else {\n    warnInvalid('topColor', vars.topColor)\n  }\n  if (isValidColor(vars.nestedColor)) {\n    root.style.setProperty(VAR_NESTED, vars.nestedColor)\n  } else {\n    warnInvalid('nestedColor', vars.nestedColor)\n  }\n  if (isValidOutline(vars.outlineWidth)) {\n    root.style.setProperty(VAR_OUTLINE_WIDTH, `${vars.outlineWidth}px`)\n  } else {\n    warnInvalid('outlineWidth', vars.outlineWidth)\n  }\n}\n\nexport const clearHoverVars = (doc: Document): void => {\n  const root = doc.documentElement\n  root.style.removeProperty(VAR_TOP)\n  root.style.removeProperty(VAR_NESTED)\n  root.style.removeProperty(VAR_OUTLINE_WIDTH)\n}\n"],"names":["ACTIVE_CLASS","BLOCK_ID_ATTR","HOVER_STYLE_ID","TOOLBAR_ID","INTERACT_BODY_ATTR","VAR_TOP","VAR_NESTED","VAR_OUTLINE_WIDTH","HOVER_CSS","COLOR_RE","isValidColor","v","test","trim","isValidOutline","Number","isFinite","warnInvalid","kind","value","process","env","NODE_ENV","console","warn","setHoverVars","doc","vars","root","documentElement","topColor","style","setProperty","nestedColor","outlineWidth","clearHoverVars","removeProperty"],"mappings":"AAAA,SAASA,YAAY,EAAEC,aAAa,QAAQ,kBAAiB;AAE7D,OAAO,MAAMC,iBAAiB,4BAA2B;AACzD,OAAO,MAAMC,aAAa,8BAA6B;AACvD,sEAAsE;AACtE,wEAAwE;AACxE,iEAAiE;AACjE,OAAO,MAAMC,qBAAqB,oBAAmB;AAErD,MAAMC,UAAU;AAChB,MAAMC,aAAa;AACnB,MAAMC,oBAAoB;AAE1B,OAAO,MAAMC,YAAY,CAAC;YACd,EAAEJ,mBAAmB,IAAI,EAAEH,cAAc;YACzC,EAAEG,mBAAmB,IAAI,EAAEH,cAAc;YACzC,EAAEG,mBAAmB,IAAI,EAAEH,cAAc,EAAE,EAAED,aAAa;iBACrD,EAAEO,kBAAkB,YAAY,EAAEF,QAAQ;kCACzB,EAAEE,kBAAkB;2DACK,EAAEF,QAAQ;;YAEzD,EAAED,mBAAmB,IAAI,EAAEH,cAAc,GAAG,EAAEA,cAAc;YAC5D,EAAEG,mBAAmB,IAAI,EAAEH,cAAc,GAAG,EAAEA,cAAc,EAAE,EAAED,aAAa;uBAClE,EAAEM,WAAW;2DACuB,EAAEA,WAAW;;OAEjE,EAAEF,mBAAmB,GAAG,EAAED,WAAW;;GAEzC,EAAEA,WAAW;;;;;;;oBAOI,EAAEE,QAAQ;;;;;GAK3B,EAAEF,WAAW,oCAAoC,EAAEG,WAAW;GAC9D,EAAEH,WAAW;GACb,EAAEA,WAAW;;;;;;;;;;;;;GAab,EAAEA,WAAW;GACb,EAAEA,WAAW;AAChB,CAAC,CAAA;AAQD,uEAAuE;AACvE,uEAAuE;AACvE,uEAAuE;AACvE,0EAA0E;AAC1E,+BAA+B;AAC/B,MAAMM,WAAW;AAEjB,MAAMC,eAAe,CAACC,IACpB,OAAOA,MAAM,YAAYF,SAASG,IAAI,CAACD,EAAEE,IAAI;AAE/C,MAAMC,iBAAiB,CAACH,IACtB,OAAOA,MAAM,YAAYI,OAAOC,QAAQ,CAACL,MAAMA,KAAK,KAAKA,KAAK;AAEhE,MAAMM,cAAc,CAACC,MAAcC;IACjC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzCC,QAAQC,IAAI,CAAC,CAAC,iCAAiC,EAAEN,KAAK,CAAC,CAAC,EAAEC;IAC5D;AACF;AAEA,OAAO,MAAMM,eAAe,CAACC,KAAeC;IAC1C,MAAMC,OAAOF,IAAIG,eAAe;IAChC,IAAInB,aAAaiB,KAAKG,QAAQ,GAAG;QAC/BF,KAAKG,KAAK,CAACC,WAAW,CAAC3B,SAASsB,KAAKG,QAAQ;IAC/C,OAAO;QACLb,YAAY,YAAYU,KAAKG,QAAQ;IACvC;IACA,IAAIpB,aAAaiB,KAAKM,WAAW,GAAG;QAClCL,KAAKG,KAAK,CAACC,WAAW,CAAC1B,YAAYqB,KAAKM,WAAW;IACrD,OAAO;QACLhB,YAAY,eAAeU,KAAKM,WAAW;IAC7C;IACA,IAAInB,eAAea,KAAKO,YAAY,GAAG;QACrCN,KAAKG,KAAK,CAACC,WAAW,CAACzB,mBAAmB,GAAGoB,KAAKO,YAAY,CAAC,EAAE,CAAC;IACpE,OAAO;QACLjB,YAAY,gBAAgBU,KAAKO,YAAY;IAC/C;AACF,EAAC;AAED,OAAO,MAAMC,iBAAiB,CAACT;IAC7B,MAAME,OAAOF,IAAIG,eAAe;IAChCD,KAAKG,KAAK,CAACK,cAAc,CAAC/B;IAC1BuB,KAAKG,KAAK,CAACK,cAAc,CAAC9B;IAC1BsB,KAAKG,KAAK,CAACK,cAAc,CAAC7B;AAC5B,EAAC"}
+{"version":3,"sources":["../../src/preview/hover-css.ts"],"sourcesContent":["import { ACTIVE_CLASS, BLOCK_ID_ATTR } from '../internal/dom'\n\nexport const HOVER_STYLE_ID = 'better-editor-hover-style'\nexport const HOVER_VARS_STYLE_ID = 'better-editor-hover-vars'\nexport const TOOLBAR_ID = 'better-editor-block-toolbar'\nexport const INTERACT_BODY_ATTR = 'data-bee-interact'\n\nconst VAR_TOP = '--bee-top'\nconst VAR_NESTED = '--bee-nested'\nconst VAR_OUTLINE_WIDTH = '--bee-outline-width'\n\nexport const HOVER_CSS = `\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}] { cursor: pointer; }\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}]:hover,\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}].${ACTIVE_CLASS} {\n    outline: var(${VAR_OUTLINE_WIDTH}) solid var(${VAR_TOP});\n    outline-offset: calc(-1 * var(${VAR_OUTLINE_WIDTH}) - 1px);\n    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(${VAR_TOP}) 10%, transparent);\n  }\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}] [${BLOCK_ID_ATTR}]:hover,\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}] [${BLOCK_ID_ATTR}].${ACTIVE_CLASS} {\n    outline-color: var(${VAR_NESTED});\n    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(${VAR_NESTED}) 10%, transparent);\n  }\n  body[${INTERACT_BODY_ATTR}] #${TOOLBAR_ID} { display: none; }\n\n  #${TOOLBAR_ID} {\n    position: absolute;\n    z-index: var(--better-editor-z-toolbar, 2147483647);\n    display: none;\n    gap: 2px;\n    padding: 3px;\n    border-radius: 4px;\n    background: var(${VAR_TOP});\n    color: #fff;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);\n    font-family: system-ui, sans-serif;\n  }\n  #${TOOLBAR_ID}[data-nested=\"1\"] { background: var(${VAR_NESTED}); }\n  #${TOOLBAR_ID}.is-visible { display: inline-flex; }\n  #${TOOLBAR_ID} button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 26px;\n    height: 26px;\n    padding: 0;\n    border: 0;\n    border-radius: 3px;\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n  }\n  #${TOOLBAR_ID} button:hover { background: rgba(255, 255, 255, 0.18); }\n  #${TOOLBAR_ID} button[data-action=\"delete\"]:hover { background: rgba(0, 0, 0, 0.25); }\n`\n\nexport type HoverVars = {\n  topColor: string\n  nestedColor: string\n  outlineWidth: number\n}\n\n// Restrictive on purpose: these values are written verbatim into a CSS\n// custom property on the preview iframe, so anything that survives the\n// regex still lands inside `outline:` / `background-color:`. The regex\n// rejects newlines and unmatched parens so an injected value can't escape\n// into a separate declaration.\nconst COLOR_RE = /^(?:#[0-9a-fA-F]{3,8}|rgba?\\([^()\\n\\r]*\\))$/i\n\nconst isValidColor = (v: unknown): v is string =>\n  typeof v === 'string' && COLOR_RE.test(v.trim())\n\nconst isValidOutline = (v: unknown): v is number =>\n  typeof v === 'number' && Number.isFinite(v) && v >= 0 && v <= 50\n\nconst warnInvalid = (kind: string, value: unknown): void => {\n  if (process.env.NODE_ENV !== 'production') {\n    console.warn(`[better-editor] ignoring invalid ${kind}:`, value)\n  }\n}\n\nconst buildVarsRule = (vars: HoverVars): string => {\n  const decls: string[] = []\n  if (isValidColor(vars.topColor)) decls.push(`${VAR_TOP}: ${vars.topColor.trim()};`)\n  else warnInvalid('topColor', vars.topColor)\n  if (isValidColor(vars.nestedColor)) decls.push(`${VAR_NESTED}: ${vars.nestedColor.trim()};`)\n  else warnInvalid('nestedColor', vars.nestedColor)\n  if (isValidOutline(vars.outlineWidth)) decls.push(`${VAR_OUTLINE_WIDTH}: ${vars.outlineWidth}px;`)\n  else warnInvalid('outlineWidth', vars.outlineWidth)\n  return `:root { ${decls.join(' ')} }`\n}\n\nexport const setHoverVars = (doc: Document, vars: HoverVars): void => {\n  let el = doc.getElementById(HOVER_VARS_STYLE_ID) as HTMLStyleElement | null\n  if (!el) {\n    el = doc.createElement('style')\n    el.id = HOVER_VARS_STYLE_ID\n    doc.head.appendChild(el)\n  }\n  el.textContent = buildVarsRule(vars)\n}\n\nexport const clearHoverVars = (doc: Document): void => {\n  doc.getElementById(HOVER_VARS_STYLE_ID)?.remove()\n}\n"],"names":["ACTIVE_CLASS","BLOCK_ID_ATTR","HOVER_STYLE_ID","HOVER_VARS_STYLE_ID","TOOLBAR_ID","INTERACT_BODY_ATTR","VAR_TOP","VAR_NESTED","VAR_OUTLINE_WIDTH","HOVER_CSS","COLOR_RE","isValidColor","v","test","trim","isValidOutline","Number","isFinite","warnInvalid","kind","value","process","env","NODE_ENV","console","warn","buildVarsRule","vars","decls","topColor","push","nestedColor","outlineWidth","join","setHoverVars","doc","el","getElementById","createElement","id","head","appendChild","textContent","clearHoverVars","remove"],"mappings":"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"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.0";
+export declare const VERSION = "1.2.2";

package/dist/version.js

@@ -1,5 +1,5 @@
 // Package version, re-exported as VERSION; read by the settings banner without
 // pulling the server entry into the client bundle.
-export const VERSION = '1.2.0';
+export const VERSION = '1.2.2';
 
 //# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/version.ts"],"sourcesContent":["// Package version, re-exported as VERSION; read by the settings banner without\n// pulling the server entry into the client bundle.\nexport const VERSION = '1.2.0'\n"],"names":["VERSION"],"mappings":"AAAA,+EAA+E;AAC/E,mDAAmD;AACnD,OAAO,MAAMA,UAAU,QAAO"}
+{"version":3,"sources":["../src/version.ts"],"sourcesContent":["// Package version, re-exported as VERSION; read by the settings banner without\n// pulling the server entry into the client bundle.\nexport const VERSION = '1.2.2'\n"],"names":["VERSION"],"mappings":"AAAA,+EAA+E;AAC/E,mDAAmD;AACnD,OAAO,MAAMA,UAAU,QAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-better-editor",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Block editor plugin for Payload CMS that adds a side-by-side live-preview iframe and sidebar to the edit view.",
   "license": "MIT",
   "author": "scorpio-99",