payload-better-editor 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/preview/hover-css.d.ts +1 -0
- package/dist/preview/hover-css.js +18 -22
- package/dist/preview/hover-css.js.map +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/dist/version.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export declare const HOVER_STYLE_ID = "better-editor-hover-style";
|
|
2
|
+
export declare const HOVER_VARS_STYLE_ID = "better-editor-hover-vars";
|
|
2
3
|
export declare const TOOLBAR_ID = "better-editor-block-toolbar";
|
|
3
4
|
export declare const INTERACT_BODY_ATTR = "data-bee-interact";
|
|
4
5
|
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";
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { ACTIVE_CLASS, BLOCK_ID_ATTR } from '../internal/dom';
|
|
2
2
|
export const HOVER_STYLE_ID = 'better-editor-hover-style';
|
|
3
|
+
export const HOVER_VARS_STYLE_ID = 'better-editor-hover-vars';
|
|
3
4
|
export const TOOLBAR_ID = 'better-editor-block-toolbar';
|
|
4
|
-
// Set on doc.body to disable hover affordances + click-to-focus while
|
|
5
|
-
// the user wants to interact with the consumer page (forms, accordions,
|
|
6
|
-
// links). All hover/active rules below are gated on its absence.
|
|
7
5
|
export const INTERACT_BODY_ATTR = 'data-bee-interact';
|
|
8
6
|
const VAR_TOP = '--bee-top';
|
|
9
7
|
const VAR_NESTED = '--bee-nested';
|
|
@@ -66,29 +64,27 @@ const warnInvalid = (kind, value)=>{
|
|
|
66
64
|
console.warn(`[better-editor] ignoring invalid ${kind}:`, value);
|
|
67
65
|
}
|
|
68
66
|
};
|
|
67
|
+
const buildVarsRule = (vars)=>{
|
|
68
|
+
const decls = [];
|
|
69
|
+
if (isValidColor(vars.topColor)) decls.push(`${VAR_TOP}: ${vars.topColor.trim()};`);
|
|
70
|
+
else warnInvalid('topColor', vars.topColor);
|
|
71
|
+
if (isValidColor(vars.nestedColor)) decls.push(`${VAR_NESTED}: ${vars.nestedColor.trim()};`);
|
|
72
|
+
else warnInvalid('nestedColor', vars.nestedColor);
|
|
73
|
+
if (isValidOutline(vars.outlineWidth)) decls.push(`${VAR_OUTLINE_WIDTH}: ${vars.outlineWidth}px;`);
|
|
74
|
+
else warnInvalid('outlineWidth', vars.outlineWidth);
|
|
75
|
+
return `:root { ${decls.join(' ')} }`;
|
|
76
|
+
};
|
|
69
77
|
export const setHoverVars = (doc, vars)=>{
|
|
70
|
-
|
|
71
|
-
if (
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
76
|
-
if (isValidColor(vars.nestedColor)) {
|
|
77
|
-
root.style.setProperty(VAR_NESTED, vars.nestedColor);
|
|
78
|
-
} else {
|
|
79
|
-
warnInvalid('nestedColor', vars.nestedColor);
|
|
80
|
-
}
|
|
81
|
-
if (isValidOutline(vars.outlineWidth)) {
|
|
82
|
-
root.style.setProperty(VAR_OUTLINE_WIDTH, `${vars.outlineWidth}px`);
|
|
83
|
-
} else {
|
|
84
|
-
warnInvalid('outlineWidth', vars.outlineWidth);
|
|
78
|
+
let el = doc.getElementById(HOVER_VARS_STYLE_ID);
|
|
79
|
+
if (!el) {
|
|
80
|
+
el = doc.createElement('style');
|
|
81
|
+
el.id = HOVER_VARS_STYLE_ID;
|
|
82
|
+
doc.head.appendChild(el);
|
|
85
83
|
}
|
|
84
|
+
el.textContent = buildVarsRule(vars);
|
|
86
85
|
};
|
|
87
86
|
export const clearHoverVars = (doc)=>{
|
|
88
|
-
|
|
89
|
-
root.style.removeProperty(VAR_TOP);
|
|
90
|
-
root.style.removeProperty(VAR_NESTED);
|
|
91
|
-
root.style.removeProperty(VAR_OUTLINE_WIDTH);
|
|
87
|
+
doc.getElementById(HOVER_VARS_STYLE_ID)?.remove();
|
|
92
88
|
};
|
|
93
89
|
|
|
94
90
|
//# sourceMappingURL=hover-css.js.map
|
|
@@ -1 +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
|
|
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 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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VERSION = "1.2.
|
|
1
|
+
export declare const VERSION = "1.2.2";
|
package/dist/version.js
CHANGED
package/dist/version.js.map
CHANGED
|
@@ -1 +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.
|
|
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.2'\n"],"names":["VERSION"],"mappings":"AAAA,+EAA+E;AAC/E,mDAAmD;AACnD,OAAO,MAAMA,UAAU,QAAO"}
|
package/package.json
CHANGED