payload-better-editor 1.0.4 → 1.2.0

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    background-color: 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    background-color: 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;6CACT,EAAEF,QAAQ;;YAE3C,EAAED,mBAAmB,IAAI,EAAEH,cAAc,GAAG,EAAEA,cAAc;YAC5D,EAAEG,mBAAmB,IAAI,EAAEH,cAAc,GAAG,EAAEA,cAAc,EAAE,EAAED,aAAa;uBAClE,EAAEM,WAAW;6CACS,EAAEA,WAAW;;OAEnD,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 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"}

package/dist/styles/sidebar.css

@@ -73,6 +73,59 @@
   border-bottom-color: var(--theme-text);
 }
 
+/* Validation summary — surfaces invalid fields across all blocks. */
+.better-editor-sidebar__errors {
+  margin: 12px 16px 0;
+  padding: 10px 12px;
+  border: 1px solid var(--theme-error-250, #f1b0ad);
+  background: var(--theme-error-50, #fdeceb);
+  border-radius: 4px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.better-editor-sidebar__errors-title {
+  margin: 0 0 6px;
+  font-weight: 600;
+  color: var(--theme-error-600, #b22a22);
+}
+
+.better-editor-sidebar__errors-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.better-editor-sidebar__errors-item {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: baseline;
+}
+
+.better-editor-sidebar__errors-jump {
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-weight: 600;
+  color: var(--theme-error-600, #b22a22);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.better-editor-sidebar__errors-label {
+  font-weight: 600;
+  color: var(--theme-error-600, #b22a22);
+}
+
+.better-editor-sidebar__errors-message {
+  color: var(--theme-elevation-600, #555);
+}
+
 /* Visually hidden but available to assistive technology — used by the
    selection live region. Standard SR-only recipe. */
 .better-editor-sr-only {

package/dist/types.d.ts

@@ -1,22 +1,30 @@
+import type { CollectionSlug, GlobalSlug } from 'payload';
+/** Per-entity overrides for a collection/global. */
+export type BetterEditorEntityOptions = {
+    /** Blocks-field name for this entity; falls back to the top-level `blocksField`. */
+    blocksField?: string;
+};
 export type BetterEditorConfig = {
     /** Skip plugin installation entirely (e.g. behind a feature flag). */
     disabled?: boolean;
     /**
-     * Collection slugs that should get the "Open Better Editor" toggle in
-     * their `beforeDocumentControls`. Each collection must have an
-     * `admin.livePreview.url` configured for the preview to render.
+     * Collections that get the "Open Better Editor" toggle. Either a list of
+     * slugs, or a slug → options record for per-collection settings (e.g. a
+     * different `blocksField`). Each collection needs `admin.preview` configured
+     * for the preview to render and the toggle to appear.
      */
-    collections?: string[];
+    collections?: string[] | Partial<Record<CollectionSlug, BetterEditorEntityOptions>>;
     /**
-     * Global slugs that should get the "Open Better Editor" toggle in
-     * their `beforeDocumentControls`. Each global must have an
-     * `admin.livePreview.url` configured for the preview to render.
+     * Globals that get the "Open Better Editor" toggle — a list of slugs or a
+     * slug → options record. Each global needs `admin.preview` configured for the
+     * toggle to appear.
      */
-    globals?: string[];
+    globals?: string[] | Partial<Record<GlobalSlug, BetterEditorEntityOptions>>;
     /**
-     * Name of the `blocks` field inside the configured collections/globals
-     * that the sidebar should target. Top-level only for now; nested paths
-     * (e.g. `content.layout`) are not supported. Defaults to `'layout'`.
+     * Default name of the `blocks` field the sidebar targets. Top-level only;
+     * nested paths (e.g. `content.layout`) are not supported. Per-collection
+     * overrides via the `collections`/`globals` record take precedence.
+     * Defaults to `'layout'`.
      */
     blocksField?: string;
     /**

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["export type BetterEditorConfig = {\n  /** Skip plugin installation entirely (e.g. behind a feature flag). */\n  disabled?: boolean\n  /**\n   * Collection slugs that should get the \"Open Better Editor\" toggle in\n   * their `beforeDocumentControls`. Each collection must have an\n   * `admin.livePreview.url` configured for the preview to render.\n   */\n  collections?: string[]\n  /**\n   * Global slugs that should get the \"Open Better Editor\" toggle in\n   * their `beforeDocumentControls`. Each global must have an\n   * `admin.livePreview.url` configured for the preview to render.\n   */\n  globals?: string[]\n  /**\n   * Name of the `blocks` field inside the configured collections/globals\n   * that the sidebar should target. Top-level only for now; nested paths\n   * (e.g. `content.layout`) are not supported. Defaults to `'layout'`.\n   */\n  blocksField?: string\n  /**\n   * CSS selector for the Payload admin element the overlay portals into.\n   * Override only if the default selector breaks against a future Payload\n   * version. The plugin falls back to `<main>` and finally `<body>`.\n   */\n  adminPortalSelector?: string\n  /**\n   * Prefix for all `localStorage` keys the editor writes (sidebar width,\n   * responsive viewport width, …). Set this if multiple Better Editor\n   * instances share the same origin and would otherwise collide.\n   * Defaults to `'better-editor'`.\n   */\n  storageNamespace?: string\n  /**\n   * Show the plugin info banner (version, GitHub links, \"Report a bug\")\n   * at the top of the `BetterEditorSettings` global. Set to `false` to\n   * hide it for end users. Defaults to `true`.\n   */\n  showSettingsBanner?: boolean\n}\n"],"names":[],"mappings":"AAAA,WAwCC"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { CollectionSlug, GlobalSlug } from 'payload'\n\n/** Per-entity overrides for a collection/global. */\nexport type BetterEditorEntityOptions = {\n  /** Blocks-field name for this entity; falls back to the top-level `blocksField`. */\n  blocksField?: string\n}\n\nexport type BetterEditorConfig = {\n  /** Skip plugin installation entirely (e.g. behind a feature flag). */\n  disabled?: boolean\n  /**\n   * Collections that get the \"Open Better Editor\" toggle. Either a list of\n   * slugs, or a slug → options record for per-collection settings (e.g. a\n   * different `blocksField`). Each collection needs `admin.preview` configured\n   * for the preview to render and the toggle to appear.\n   */\n  collections?: string[] | Partial<Record<CollectionSlug, BetterEditorEntityOptions>>\n  /**\n   * Globals that get the \"Open Better Editor\" toggle — a list of slugs or a\n   * slug → options record. Each global needs `admin.preview` configured for the\n   * toggle to appear.\n   */\n  globals?: string[] | Partial<Record<GlobalSlug, BetterEditorEntityOptions>>\n  /**\n   * Default name of the `blocks` field the sidebar targets. Top-level only;\n   * nested paths (e.g. `content.layout`) are not supported. Per-collection\n   * overrides via the `collections`/`globals` record take precedence.\n   * Defaults to `'layout'`.\n   */\n  blocksField?: string\n  /**\n   * CSS selector for the Payload admin element the overlay portals into.\n   * Override only if the default selector breaks against a future Payload\n   * version. The plugin falls back to `<main>` and finally `<body>`.\n   */\n  adminPortalSelector?: string\n  /**\n   * Prefix for all `localStorage` keys the editor writes (sidebar width,\n   * responsive viewport width, …). Set this if multiple Better Editor\n   * instances share the same origin and would otherwise collide.\n   * Defaults to `'better-editor'`.\n   */\n  storageNamespace?: string\n  /**\n   * Show the plugin info banner (version, GitHub links, \"Report a bug\")\n   * at the top of the `BetterEditorSettings` global. Set to `false` to\n   * hide it for end users. Defaults to `true`.\n   */\n  showSettingsBanner?: boolean\n}\n"],"names":[],"mappings":"AAQA,WA0CC"}

package/dist/version.d.ts

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

package/dist/version.js

@@ -1,6 +1,5 @@
-// Single source of truth — re-exported from index.ts as `VERSION` and used
-// by client components (e.g. the settings footer) without dragging the
-// whole server entry into the client bundle.
-export const VERSION = '1.0.4';
+// 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';
 
 //# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/version.ts"],"sourcesContent":["// Single source of truth — re-exported from index.ts as `VERSION` and used\n// by client components (e.g. the settings footer) without dragging the\n// whole server entry into the client bundle.\nexport const VERSION = '1.0.4'\n"],"names":["VERSION"],"mappings":"AAAA,2EAA2E;AAC3E,uEAAuE;AACvE,6CAA6C;AAC7C,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.0'\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.0.4",
+  "version": "1.2.0",
   "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",
@@ -65,7 +65,6 @@
     "prepublishOnly": "pnpm clean && pnpm build"
   },
   "peerDependencies": {
-    "lucide-react": ">=0.577.0",
     "payload": ">=3.81.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -75,13 +74,15 @@
     "@payloadcms/ui": "3.81.0",
     "@swc/cli": "0.6.0",
     "@swc/core": "1.10.7",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.0",
     "@types/node": "22.5.4",
     "@types/react": "19.2.1",
     "@types/react-dom": "19.2.1",
     "copyfiles": "2.4.1",
     "eslint": "^9.16.0",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "lucide-react": "^0.577.0",
+    "jsdom": "^26.1.0",
     "payload": "3.81.0",
     "react": "19.2.1",
     "react-dom": "19.2.1",

package/dist/hooks/useIframeResizeObserver.d.ts

@@ -1,2 +0,0 @@
-import { type RefObject } from 'react';
-export declare const useIframeResizeObserver: (iframeRef: RefObject<HTMLIFrameElement | null>, onIframeWidthChange?: (width: number) => void) => void;

package/dist/hooks/useIframeResizeObserver.js

@@ -1,20 +0,0 @@
-'use client';
-import { useEffect } from 'react';
-export const useIframeResizeObserver = (iframeRef, onIframeWidthChange)=>{
-    useEffect(()=>{
-        const iframe = iframeRef.current;
-        if (!iframe || !onIframeWidthChange || typeof ResizeObserver === 'undefined') return;
-        onIframeWidthChange(iframe.clientWidth);
-        const ro = new ResizeObserver((entries)=>{
-            const w = entries[0]?.contentRect?.width;
-            if (typeof w === 'number') onIframeWidthChange(Math.round(w));
-        });
-        ro.observe(iframe);
-        return ()=>ro.disconnect();
-    }, [
-        iframeRef,
-        onIframeWidthChange
-    ]);
-};
-
-//# sourceMappingURL=useIframeResizeObserver.js.map

package/dist/hooks/useIframeResizeObserver.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/hooks/useIframeResizeObserver.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, type RefObject } from 'react'\n\nexport const useIframeResizeObserver = (\n  iframeRef: RefObject<HTMLIFrameElement | null>,\n  onIframeWidthChange?: (width: number) => void,\n): void => {\n  useEffect(() => {\n    const iframe = iframeRef.current\n    if (!iframe || !onIframeWidthChange || typeof ResizeObserver === 'undefined') return\n    onIframeWidthChange(iframe.clientWidth)\n    const ro = new ResizeObserver((entries) => {\n      const w = entries[0]?.contentRect?.width\n      if (typeof w === 'number') onIframeWidthChange(Math.round(w))\n    })\n    ro.observe(iframe)\n    return () => ro.disconnect()\n  }, [iframeRef, onIframeWidthChange])\n}\n"],"names":["useEffect","useIframeResizeObserver","iframeRef","onIframeWidthChange","iframe","current","ResizeObserver","clientWidth","ro","entries","w","contentRect","width","Math","round","observe","disconnect"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAwB,QAAO;AAEjD,OAAO,MAAMC,0BAA0B,CACrCC,WACAC;IAEAH,UAAU;QACR,MAAMI,SAASF,UAAUG,OAAO;QAChC,IAAI,CAACD,UAAU,CAACD,uBAAuB,OAAOG,mBAAmB,aAAa;QAC9EH,oBAAoBC,OAAOG,WAAW;QACtC,MAAMC,KAAK,IAAIF,eAAe,CAACG;YAC7B,MAAMC,IAAID,OAAO,CAAC,EAAE,EAAEE,aAAaC;YACnC,IAAI,OAAOF,MAAM,UAAUP,oBAAoBU,KAAKC,KAAK,CAACJ;QAC5D;QACAF,GAAGO,OAAO,CAACX;QACX,OAAO,IAAMI,GAAGQ,UAAU;IAC5B,GAAG;QAACd;QAAWC;KAAoB;AACrC,EAAC"}