@contentstack/live-preview-utils 3.0.2 → 3.1.1
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/README.md +1 -1
- package/dist/legacy/index.cjs +5 -5
- package/dist/legacy/index.cjs.map +1 -1
- package/dist/legacy/index.js +2 -2
- package/dist/legacy/index.js.map +1 -1
- package/dist/legacy/livePreview/editButton/editButton.cjs +3 -0
- package/dist/legacy/livePreview/editButton/editButton.cjs.map +1 -1
- package/dist/legacy/livePreview/editButton/editButton.js +3 -0
- package/dist/legacy/livePreview/editButton/editButton.js.map +1 -1
- package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.cjs +1 -1
- package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.js +1 -1
- package/dist/legacy/preview/contentstack-live-preview-HOC.cjs +23 -4
- package/dist/legacy/preview/contentstack-live-preview-HOC.cjs.map +1 -1
- package/dist/legacy/preview/contentstack-live-preview-HOC.d.cts +2 -1
- package/dist/legacy/preview/contentstack-live-preview-HOC.d.ts +2 -1
- package/dist/legacy/preview/contentstack-live-preview-HOC.js +23 -4
- package/dist/legacy/preview/contentstack-live-preview-HOC.js.map +1 -1
- package/dist/legacy/types/types.cjs.map +1 -1
- package/dist/legacy/types/types.d.cts +2 -1
- package/dist/legacy/types/types.d.ts +2 -1
- package/dist/legacy/types/types.js.map +1 -1
- package/dist/legacy/utils/addLivePreviewQueryTags.cjs +49 -0
- package/dist/legacy/utils/addLivePreviewQueryTags.cjs.map +1 -0
- package/dist/legacy/utils/addLivePreviewQueryTags.d.cts +3 -0
- package/dist/legacy/utils/addLivePreviewQueryTags.d.ts +3 -0
- package/dist/legacy/utils/addLivePreviewQueryTags.js +26 -0
- package/dist/legacy/utils/addLivePreviewQueryTags.js.map +1 -0
- package/dist/legacy/utils/index.cjs +3 -21
- package/dist/legacy/utils/index.cjs.map +1 -1
- package/dist/legacy/utils/index.d.cts +4 -2
- package/dist/legacy/utils/index.d.ts +4 -2
- package/dist/legacy/utils/index.js +1 -19
- package/dist/legacy/utils/index.js.map +1 -1
- package/dist/legacy/visualBuilder/components/FieldRevert/FieldRevertComponent.cjs +60 -13
- package/dist/legacy/visualBuilder/components/FieldRevert/FieldRevertComponent.cjs.map +1 -1
- package/dist/legacy/visualBuilder/components/FieldRevert/FieldRevertComponent.d.cts +2 -1
- package/dist/legacy/visualBuilder/components/FieldRevert/FieldRevertComponent.d.ts +2 -1
- package/dist/legacy/visualBuilder/components/FieldRevert/FieldRevertComponent.js +61 -15
- package/dist/legacy/visualBuilder/components/FieldRevert/FieldRevertComponent.js.map +1 -1
- package/dist/legacy/visualBuilder/components/FieldRevert/useHandleOutsideClick.cjs +41 -0
- package/dist/legacy/visualBuilder/components/FieldRevert/useHandleOutsideClick.cjs.map +1 -0
- package/dist/legacy/visualBuilder/components/FieldRevert/useHandleOutsideClick.d.cts +3 -0
- package/dist/legacy/visualBuilder/components/FieldRevert/useHandleOutsideClick.d.ts +3 -0
- package/dist/legacy/visualBuilder/components/FieldRevert/useHandleOutsideClick.js +22 -0
- package/dist/legacy/visualBuilder/components/FieldRevert/useHandleOutsideClick.js.map +1 -0
- package/dist/legacy/visualBuilder/components/FieldToolbar.cjs +118 -119
- package/dist/legacy/visualBuilder/components/FieldToolbar.cjs.map +1 -1
- package/dist/legacy/visualBuilder/components/FieldToolbar.js +120 -121
- package/dist/legacy/visualBuilder/components/FieldToolbar.js.map +1 -1
- package/dist/legacy/visualBuilder/components/emptyBlock.cjs +1 -0
- package/dist/legacy/visualBuilder/components/emptyBlock.cjs.map +1 -1
- package/dist/legacy/visualBuilder/components/emptyBlock.js +1 -0
- package/dist/legacy/visualBuilder/components/emptyBlock.js.map +1 -1
- package/dist/legacy/visualBuilder/components/icons/variant.cjs +1 -1
- package/dist/legacy/visualBuilder/components/icons/variant.cjs.map +1 -1
- package/dist/legacy/visualBuilder/components/icons/variant.js +1 -1
- package/dist/legacy/visualBuilder/components/icons/variant.js.map +1 -1
- package/dist/legacy/visualBuilder/index.cjs +2 -1
- package/dist/legacy/visualBuilder/index.cjs.map +1 -1
- package/dist/legacy/visualBuilder/index.js +2 -1
- package/dist/legacy/visualBuilder/index.js.map +1 -1
- package/dist/legacy/visualBuilder/listeners/mouseClick.cjs +2 -1
- package/dist/legacy/visualBuilder/listeners/mouseClick.cjs.map +1 -1
- package/dist/legacy/visualBuilder/listeners/mouseClick.js +2 -1
- package/dist/legacy/visualBuilder/listeners/mouseClick.js.map +1 -1
- package/dist/legacy/visualBuilder/listeners/mouseHover.cjs +2 -1
- package/dist/legacy/visualBuilder/listeners/mouseHover.cjs.map +1 -1
- package/dist/legacy/visualBuilder/listeners/mouseHover.js +2 -1
- package/dist/legacy/visualBuilder/listeners/mouseHover.js.map +1 -1
- package/dist/legacy/visualBuilder/utils/getCsDataOfElement.cjs +17 -2
- package/dist/legacy/visualBuilder/utils/getCsDataOfElement.cjs.map +1 -1
- package/dist/legacy/visualBuilder/utils/getCsDataOfElement.js +17 -2
- package/dist/legacy/visualBuilder/utils/getCsDataOfElement.js.map +1 -1
- package/dist/legacy/visualBuilder/visualBuilder.style.cjs +3 -0
- package/dist/legacy/visualBuilder/visualBuilder.style.cjs.map +1 -1
- package/dist/legacy/visualBuilder/visualBuilder.style.js +3 -0
- package/dist/legacy/visualBuilder/visualBuilder.style.js.map +1 -1
- package/dist/modern/index.cjs +5 -5
- package/dist/modern/index.cjs.map +1 -1
- package/dist/modern/index.js +2 -2
- package/dist/modern/index.js.map +1 -1
- package/dist/modern/livePreview/editButton/editButton.cjs +3 -0
- package/dist/modern/livePreview/editButton/editButton.cjs.map +1 -1
- package/dist/modern/livePreview/editButton/editButton.js +3 -0
- package/dist/modern/livePreview/editButton/editButton.js.map +1 -1
- package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.cjs +1 -1
- package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.js +1 -1
- package/dist/modern/preview/contentstack-live-preview-HOC.cjs +23 -4
- package/dist/modern/preview/contentstack-live-preview-HOC.cjs.map +1 -1
- package/dist/modern/preview/contentstack-live-preview-HOC.d.cts +2 -1
- package/dist/modern/preview/contentstack-live-preview-HOC.d.ts +2 -1
- package/dist/modern/preview/contentstack-live-preview-HOC.js +23 -4
- package/dist/modern/preview/contentstack-live-preview-HOC.js.map +1 -1
- package/dist/modern/types/types.cjs.map +1 -1
- package/dist/modern/types/types.d.cts +2 -1
- package/dist/modern/types/types.d.ts +2 -1
- package/dist/modern/types/types.js.map +1 -1
- package/dist/modern/utils/addLivePreviewQueryTags.cjs +49 -0
- package/dist/modern/utils/addLivePreviewQueryTags.cjs.map +1 -0
- package/dist/modern/utils/addLivePreviewQueryTags.d.cts +3 -0
- package/dist/modern/utils/addLivePreviewQueryTags.d.ts +3 -0
- package/dist/modern/utils/addLivePreviewQueryTags.js +26 -0
- package/dist/modern/utils/addLivePreviewQueryTags.js.map +1 -0
- package/dist/modern/utils/index.cjs +3 -21
- package/dist/modern/utils/index.cjs.map +1 -1
- package/dist/modern/utils/index.d.cts +4 -2
- package/dist/modern/utils/index.d.ts +4 -2
- package/dist/modern/utils/index.js +1 -19
- package/dist/modern/utils/index.js.map +1 -1
- package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.cjs +60 -13
- package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.cjs.map +1 -1
- package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.d.cts +2 -1
- package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.d.ts +2 -1
- package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.js +61 -15
- package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.js.map +1 -1
- package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.cjs +41 -0
- package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.cjs.map +1 -0
- package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.d.cts +3 -0
- package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.d.ts +3 -0
- package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.js +22 -0
- package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.js.map +1 -0
- package/dist/modern/visualBuilder/components/FieldToolbar.cjs +118 -119
- package/dist/modern/visualBuilder/components/FieldToolbar.cjs.map +1 -1
- package/dist/modern/visualBuilder/components/FieldToolbar.js +120 -121
- package/dist/modern/visualBuilder/components/FieldToolbar.js.map +1 -1
- package/dist/modern/visualBuilder/components/emptyBlock.cjs +1 -0
- package/dist/modern/visualBuilder/components/emptyBlock.cjs.map +1 -1
- package/dist/modern/visualBuilder/components/emptyBlock.js +1 -0
- package/dist/modern/visualBuilder/components/emptyBlock.js.map +1 -1
- package/dist/modern/visualBuilder/components/icons/variant.cjs +1 -1
- package/dist/modern/visualBuilder/components/icons/variant.cjs.map +1 -1
- package/dist/modern/visualBuilder/components/icons/variant.js +1 -1
- package/dist/modern/visualBuilder/components/icons/variant.js.map +1 -1
- package/dist/modern/visualBuilder/index.cjs +2 -1
- package/dist/modern/visualBuilder/index.cjs.map +1 -1
- package/dist/modern/visualBuilder/index.js +2 -1
- package/dist/modern/visualBuilder/index.js.map +1 -1
- package/dist/modern/visualBuilder/listeners/mouseClick.cjs +2 -1
- package/dist/modern/visualBuilder/listeners/mouseClick.cjs.map +1 -1
- package/dist/modern/visualBuilder/listeners/mouseClick.js +2 -1
- package/dist/modern/visualBuilder/listeners/mouseClick.js.map +1 -1
- package/dist/modern/visualBuilder/listeners/mouseHover.cjs +2 -1
- package/dist/modern/visualBuilder/listeners/mouseHover.cjs.map +1 -1
- package/dist/modern/visualBuilder/listeners/mouseHover.js +2 -1
- package/dist/modern/visualBuilder/listeners/mouseHover.js.map +1 -1
- package/dist/modern/visualBuilder/utils/getCsDataOfElement.cjs +17 -2
- package/dist/modern/visualBuilder/utils/getCsDataOfElement.cjs.map +1 -1
- package/dist/modern/visualBuilder/utils/getCsDataOfElement.js +17 -2
- package/dist/modern/visualBuilder/utils/getCsDataOfElement.js.map +1 -1
- package/dist/modern/visualBuilder/visualBuilder.style.cjs +3 -0
- package/dist/modern/visualBuilder/visualBuilder.style.cjs.map +1 -1
- package/dist/modern/visualBuilder/visualBuilder.style.js +3 -0
- package/dist/modern/visualBuilder/visualBuilder.style.js.map +1 -1
- package/package.json +21 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/visualBuilder/utils/getCsDataOfElement.ts"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"./constants\";\n\n/**\n * Returns the CSLP data of the closest ancestor element with a `data-cslp` attribute\n * to the target element of a mouse event.\n * @param event - The mouse event.\n * @returns The CSLP data of the closest ancestor element with a `data-cslp` attribute,\n * along with metadata and schema information for the corresponding field.\n */\nexport function getCsDataOfElement(\n event: MouseEvent\n): VisualBuilderCslpEventDetails | undefined {\n const targetElement = event.target as HTMLElement;\n if (!targetElement) {\n return;\n }\n const editableElement = targetElement.closest(\"[data-cslp]\");\n\n if (!editableElement) {\n return;\n }\n const cslpData = editableElement.getAttribute(\"data-cslp\");\n if (!cslpData) {\n return;\n }\n const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n return {\n editableElement: editableElement,\n cslpData,\n fieldMetadata,\n };\n}\n\nexport function getDOMEditStack(ele: Element): CslpData[] {\n const cslpSet: string[] = [];\n let curr: any = ele.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n while (curr) {\n const cslp = curr.getAttribute(DATA_CSLP_ATTR_SELECTOR)!;\n const entryPrefix = cslp
|
|
1
|
+
{"version":3,"sources":["../../../../src/visualBuilder/utils/getCsDataOfElement.ts"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"./constants\";\n\n/**\n * Returns the CSLP data of the closest ancestor element with a `data-cslp` attribute\n * to the target element of a mouse event.\n * @param event - The mouse event.\n * @returns The CSLP data of the closest ancestor element with a `data-cslp` attribute,\n * along with metadata and schema information for the corresponding field.\n */\nexport function getCsDataOfElement(\n event: MouseEvent\n): VisualBuilderCslpEventDetails | undefined {\n const targetElement = event.target as HTMLElement;\n if (!targetElement) {\n return;\n }\n const editableElement = targetElement.closest(\"[data-cslp]\");\n\n if (!editableElement) {\n return;\n }\n const cslpData = editableElement.getAttribute(\"data-cslp\");\n if (!cslpData) {\n return;\n }\n const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n return {\n editableElement: editableElement,\n cslpData,\n fieldMetadata,\n };\n}\n\nfunction getPrefix(cslp: string): string {\n let prefix;\n if (cslp.startsWith(\"v2:\")) {\n // v2: prefix is added to cslp in variant cases\n const variantPrefix = cslp.split(\":\")[1];\n const content_type_uid = variantPrefix.split(\".\")[0];\n const euid = variantPrefix.split(\".\")[1].split(\"_\")[0]; //page.blt7a1e5b297a97bd12_cs8171e34d92207334.en-us\n const locale = variantPrefix.split(\".\")[2];\n prefix = `${content_type_uid}.${euid}.${locale}`;\n } else {\n prefix = cslp;\n }\n return prefix.split(\".\").slice(0, 3).join(\".\");\n}\n\nexport function getDOMEditStack(ele: Element): CslpData[] {\n const cslpSet: string[] = [];\n let curr: any = ele.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n while (curr) {\n const cslp = curr.getAttribute(DATA_CSLP_ATTR_SELECTOR)!;\n const entryPrefix = getPrefix(cslp);\n const hasSamePrevPrefix = getPrefix(cslpSet.at(0) || \"\").startsWith(\n entryPrefix\n );\n if (!hasSamePrevPrefix) {\n cslpSet.unshift(cslp);\n }\n curr = curr.parentElement?.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n }\n return cslpSet.map((cslp) => extractDetailsFromCslp(cslp));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAuC;AACvC,uBAAwC;AASjC,SAAS,mBACZ,OACyC;AACzC,QAAM,gBAAgB,MAAM;AAC5B,MAAI,CAAC,eAAe;AAChB;AAAA,EACJ;AACA,QAAM,kBAAkB,cAAc,QAAQ,aAAa;AAE3D,MAAI,CAAC,iBAAiB;AAClB;AAAA,EACJ;AACA,QAAM,WAAW,gBAAgB,aAAa,WAAW;AACzD,MAAI,CAAC,UAAU;AACX;AAAA,EACJ;AACA,QAAM,oBAAgB,wCAAuB,QAAQ;AAErD,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;AAEA,SAAS,UAAU,MAAsB;AACrC,MAAI;AACJ,MAAI,KAAK,WAAW,KAAK,GAAG;AAExB,UAAM,gBAAgB,KAAK,MAAM,GAAG,EAAE,CAAC;AACvC,UAAM,mBAAmB,cAAc,MAAM,GAAG,EAAE,CAAC;AACnD,UAAM,OAAO,cAAc,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC;AACrD,UAAM,SAAS,cAAc,MAAM,GAAG,EAAE,CAAC;AACzC,aAAS,GAAG,gBAAgB,IAAI,IAAI,IAAI,MAAM;AAAA,EAClD,OAAO;AACH,aAAS;AAAA,EACb;AACA,SAAO,OAAO,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG;AACjD;AAEO,SAAS,gBAAgB,KAA0B;AApD1D;AAqDI,QAAM,UAAoB,CAAC;AAC3B,MAAI,OAAY,IAAI,QAAQ,IAAI,wCAAuB,GAAG;AAC1D,SAAO,MAAM;AACT,UAAM,OAAO,KAAK,aAAa,wCAAuB;AACtD,UAAM,cAAc,UAAU,IAAI;AAClC,UAAM,oBAAoB,UAAU,QAAQ,GAAG,CAAC,KAAK,EAAE,EAAE;AAAA,MACrD;AAAA,IACJ;AACA,QAAI,CAAC,mBAAmB;AACpB,cAAQ,QAAQ,IAAI;AAAA,IACxB;AACA,YAAO,UAAK,kBAAL,mBAAoB,QAAQ,IAAI,wCAAuB;AAAA,EAClE;AACA,SAAO,QAAQ,IAAI,CAAC,aAAS,wCAAuB,IAAI,CAAC;AAC7D;","names":[]}
|
|
@@ -23,14 +23,29 @@ function getCsDataOfElement(event) {
|
|
|
23
23
|
fieldMetadata
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
|
+
function getPrefix(cslp) {
|
|
27
|
+
let prefix;
|
|
28
|
+
if (cslp.startsWith("v2:")) {
|
|
29
|
+
const variantPrefix = cslp.split(":")[1];
|
|
30
|
+
const content_type_uid = variantPrefix.split(".")[0];
|
|
31
|
+
const euid = variantPrefix.split(".")[1].split("_")[0];
|
|
32
|
+
const locale = variantPrefix.split(".")[2];
|
|
33
|
+
prefix = `${content_type_uid}.${euid}.${locale}`;
|
|
34
|
+
} else {
|
|
35
|
+
prefix = cslp;
|
|
36
|
+
}
|
|
37
|
+
return prefix.split(".").slice(0, 3).join(".");
|
|
38
|
+
}
|
|
26
39
|
function getDOMEditStack(ele) {
|
|
27
40
|
var _a;
|
|
28
41
|
const cslpSet = [];
|
|
29
42
|
let curr = ele.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);
|
|
30
43
|
while (curr) {
|
|
31
44
|
const cslp = curr.getAttribute(DATA_CSLP_ATTR_SELECTOR);
|
|
32
|
-
const entryPrefix = cslp
|
|
33
|
-
const hasSamePrevPrefix = (cslpSet.at(0) || "").startsWith(
|
|
45
|
+
const entryPrefix = getPrefix(cslp);
|
|
46
|
+
const hasSamePrevPrefix = getPrefix(cslpSet.at(0) || "").startsWith(
|
|
47
|
+
entryPrefix
|
|
48
|
+
);
|
|
34
49
|
if (!hasSamePrevPrefix) {
|
|
35
50
|
cslpSet.unshift(cslp);
|
|
36
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/visualBuilder/utils/getCsDataOfElement.ts"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"./constants\";\n\n/**\n * Returns the CSLP data of the closest ancestor element with a `data-cslp` attribute\n * to the target element of a mouse event.\n * @param event - The mouse event.\n * @returns The CSLP data of the closest ancestor element with a `data-cslp` attribute,\n * along with metadata and schema information for the corresponding field.\n */\nexport function getCsDataOfElement(\n event: MouseEvent\n): VisualBuilderCslpEventDetails | undefined {\n const targetElement = event.target as HTMLElement;\n if (!targetElement) {\n return;\n }\n const editableElement = targetElement.closest(\"[data-cslp]\");\n\n if (!editableElement) {\n return;\n }\n const cslpData = editableElement.getAttribute(\"data-cslp\");\n if (!cslpData) {\n return;\n }\n const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n return {\n editableElement: editableElement,\n cslpData,\n fieldMetadata,\n };\n}\n\nexport function getDOMEditStack(ele: Element): CslpData[] {\n const cslpSet: string[] = [];\n let curr: any = ele.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n while (curr) {\n const cslp = curr.getAttribute(DATA_CSLP_ATTR_SELECTOR)!;\n const entryPrefix = cslp
|
|
1
|
+
{"version":3,"sources":["../../../../src/visualBuilder/utils/getCsDataOfElement.ts"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"./constants\";\n\n/**\n * Returns the CSLP data of the closest ancestor element with a `data-cslp` attribute\n * to the target element of a mouse event.\n * @param event - The mouse event.\n * @returns The CSLP data of the closest ancestor element with a `data-cslp` attribute,\n * along with metadata and schema information for the corresponding field.\n */\nexport function getCsDataOfElement(\n event: MouseEvent\n): VisualBuilderCslpEventDetails | undefined {\n const targetElement = event.target as HTMLElement;\n if (!targetElement) {\n return;\n }\n const editableElement = targetElement.closest(\"[data-cslp]\");\n\n if (!editableElement) {\n return;\n }\n const cslpData = editableElement.getAttribute(\"data-cslp\");\n if (!cslpData) {\n return;\n }\n const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n return {\n editableElement: editableElement,\n cslpData,\n fieldMetadata,\n };\n}\n\nfunction getPrefix(cslp: string): string {\n let prefix;\n if (cslp.startsWith(\"v2:\")) {\n // v2: prefix is added to cslp in variant cases\n const variantPrefix = cslp.split(\":\")[1];\n const content_type_uid = variantPrefix.split(\".\")[0];\n const euid = variantPrefix.split(\".\")[1].split(\"_\")[0]; //page.blt7a1e5b297a97bd12_cs8171e34d92207334.en-us\n const locale = variantPrefix.split(\".\")[2];\n prefix = `${content_type_uid}.${euid}.${locale}`;\n } else {\n prefix = cslp;\n }\n return prefix.split(\".\").slice(0, 3).join(\".\");\n}\n\nexport function getDOMEditStack(ele: Element): CslpData[] {\n const cslpSet: string[] = [];\n let curr: any = ele.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n while (curr) {\n const cslp = curr.getAttribute(DATA_CSLP_ATTR_SELECTOR)!;\n const entryPrefix = getPrefix(cslp);\n const hasSamePrevPrefix = getPrefix(cslpSet.at(0) || \"\").startsWith(\n entryPrefix\n );\n if (!hasSamePrevPrefix) {\n cslpSet.unshift(cslp);\n }\n curr = curr.parentElement?.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n }\n return cslpSet.map((cslp) => extractDetailsFromCslp(cslp));\n}\n"],"mappings":";;;AAEA,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AASjC,SAAS,mBACZ,OACyC;AACzC,QAAM,gBAAgB,MAAM;AAC5B,MAAI,CAAC,eAAe;AAChB;AAAA,EACJ;AACA,QAAM,kBAAkB,cAAc,QAAQ,aAAa;AAE3D,MAAI,CAAC,iBAAiB;AAClB;AAAA,EACJ;AACA,QAAM,WAAW,gBAAgB,aAAa,WAAW;AACzD,MAAI,CAAC,UAAU;AACX;AAAA,EACJ;AACA,QAAM,gBAAgB,uBAAuB,QAAQ;AAErD,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;AAEA,SAAS,UAAU,MAAsB;AACrC,MAAI;AACJ,MAAI,KAAK,WAAW,KAAK,GAAG;AAExB,UAAM,gBAAgB,KAAK,MAAM,GAAG,EAAE,CAAC;AACvC,UAAM,mBAAmB,cAAc,MAAM,GAAG,EAAE,CAAC;AACnD,UAAM,OAAO,cAAc,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC;AACrD,UAAM,SAAS,cAAc,MAAM,GAAG,EAAE,CAAC;AACzC,aAAS,GAAG,gBAAgB,IAAI,IAAI,IAAI,MAAM;AAAA,EAClD,OAAO;AACH,aAAS;AAAA,EACb;AACA,SAAO,OAAO,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG;AACjD;AAEO,SAAS,gBAAgB,KAA0B;AApD1D;AAqDI,QAAM,UAAoB,CAAC;AAC3B,MAAI,OAAY,IAAI,QAAQ,IAAI,uBAAuB,GAAG;AAC1D,SAAO,MAAM;AACT,UAAM,OAAO,KAAK,aAAa,uBAAuB;AACtD,UAAM,cAAc,UAAU,IAAI;AAClC,UAAM,oBAAoB,UAAU,QAAQ,GAAG,CAAC,KAAK,EAAE,EAAE;AAAA,MACrD;AAAA,IACJ;AACA,QAAI,CAAC,mBAAmB;AACpB,cAAQ,QAAQ,IAAI;AAAA,IACxB;AACA,YAAO,UAAK,kBAAL,mBAAoB,QAAQ,IAAI,uBAAuB;AAAA,EAClE;AACA,SAAO,QAAQ,IAAI,CAAC,SAAS,uBAAuB,IAAI,CAAC;AAC7D;","names":[]}
|
|
@@ -610,6 +610,8 @@ function visualBuilderStyles() {
|
|
|
610
610
|
`,
|
|
611
611
|
"variant-field-revert-component__dropdown-content": import_goober.css`
|
|
612
612
|
position: absolute;
|
|
613
|
+
top: -12px;
|
|
614
|
+
left: -4px;
|
|
613
615
|
background-color: #ffffff;
|
|
614
616
|
min-width: max-content;
|
|
615
617
|
box-shadow:
|
|
@@ -623,6 +625,7 @@ function visualBuilderStyles() {
|
|
|
623
625
|
`,
|
|
624
626
|
"variant-field-revert-component__dropdown-content__list-item": import_goober.css`
|
|
625
627
|
color: black;
|
|
628
|
+
font-weight: 400;
|
|
626
629
|
padding: 9.6px 16px;
|
|
627
630
|
text-decoration: none;
|
|
628
631
|
display: block;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/visualBuilder/visualBuilder.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nconst tooltipBaseStyle = `\n pointer-events: all;\n svg {\n pointer-events: none;\n }\n &:before {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 20px;\n margin-bottom: 24px;\n padding: 12px;\n border-radius: 4px;\n width: max-content;\n max-width: 200px;\n color: #fff;\n font-family: Inter;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 132%; /* 0.99rem */\n letter-spacing: 0.015rem;\n background: #767676;\n }\n &:after {\n content: \"\";\n position: absolute;\n bottom: 28px;\n /* the arrow */\n border: 10px solid #000;\n border-color: #767676 transparent transparent transparent;\n }\n`;\n\nexport function visualBuilderStyles() {\n return {\n \"visual-builder__container\": css`\n --outline-transition: all 0.15s ease-in;\n font-family: \"Inter\", sans-serif;\n `,\n \"visual-builder__cursor\": css`\n visibility: hidden;\n height: 0;\n\n &.visible {\n visibility: visible;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 2147483647 !important;\n\n color: #fff;\n\n height: auto;\n padding: 0 10px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n pointer-events: none !important;\n position: fixed !important;\n cursor: none;\n }\n `,\n \"visual-builder__overlay__wrapper\": css`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n visibility: hidden;\n z-index: 99999;\n\n pointer-events: none;\n\n &.visible {\n visibility: visible;\n }\n `,\n \"visual-builder__overlay--outline\": css`\n position: absolute;\n outline: 4px solid #715cdd;\n transition: var(--outline-transition);\n `,\n \"visual-builder__overlay\": css`\n background: rgba(0, 0, 0, 0.3);\n box-sizing: content-box;\n pointer-events: all;\n position: absolute;\n transition: var(--outline-transition);\n `,\n \"visual-builder__add-button\": css`\n position: absolute;\n pointer-events: all;\n\n background: #ffffff;\n color: #475161;\n\n border-radius: 4px;\n border: 1px solid #6c5ce7;\n\n height: 32px;\n min-width: 32px;\n max-width: 180px;\n padding: 8px 6px;\n transform: translate(-50%, -50%);\n\n font-weight: 600;\n color: #6c5ce7;\n overflow: hidden;\n\n z-index: 2147483647 !important;\n\n display: grid;\n grid-template-columns: min-content 0fr;\n align-content: center;\n gap: 0;\n\n transition:\n grid-template-columns 0.25s,\n left 0.15s ease-in,\n top 0.15s ease-in,\n gap 0.15s ease-in;\n\n &:has(.visual-builder__add-button-label):hover {\n grid-template-columns: min-content 1fr;\n gap: 8px;\n padding: 8px 16px;\n }\n\n svg {\n fill: #6c5ce7;\n }\n\n &:disabled {\n border-color: #bbbec3;\n cursor: not-allowed;\n }\n\n &:disabled svg {\n fill: #bbbec3;\n }\n `,\n \"visual-builder__add-button-label\": css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n \"visual-builder__start-editing-btn\": css`\n z-index: 1000;\n text-decoration: none;\n position: fixed;\n bottom: 30px;\n right: 30px;\n box-shadow:\n 0px 4px 15px 0px rgba(108, 92, 231, 0.2),\n 0px 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14);\n display: inline-flex;\n padding: 0.5rem 1rem;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n\n border-radius: 4px;\n border: 1px solid transparent;\n background: #6c5ce7;\n transition:\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n -webkit-box-shadow 0.15s ease-in-out;\n\n &:hover {\n background-color: #5d50be;\n }\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px #ada4f4;\n }\n & > span {\n color: #fff;\n /* Body/P1 Bold */\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n\n & > svg {\n color: #fff;\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n `,\n \"visual-builder__cursor-icon\": css`\n height: 40px;\n width: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #5d50be;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n `,\n \"visual-builder__cursor-pointer\": css`\n position: absolute;\n top: -8px;\n left: -8px;\n `,\n \"visual-builder__cursor-icon--loader\": css`\n animation: visual-builder__spinner 1s linear infinite;\n `,\n \"visual-builder__focused-toolbar\": css`\n position: absolute;\n transform: translateY(-100%);\n z-index: 100000;\n gap: 8px;\n width: 0;\n display: flex;\n align-items: end;\n transition: var(--outline-transition);\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__current-field\": css`\n padding: 4px 8px !important;\n background: #6c5ce7;\n color: #fff;\n z-index: 1;\n border-radius: 2px !important;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: fit-content;\n\n &:disabled {\n filter: contrast(0.7);\n }\n\n .visual-builder__focused-toolbar__text {\n padding-right: 3px;\n height: 16px;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\": css`\n pointer-events: none;\n color: #5d50be;\n padding: 4px !important;\n margin-bottom: 3px;\n display: none;\n width: fit-content;\n position: absolute;\n z-index: 100000;\n `,\n \"field-label-dropdown-open\": css`\n .visual-builder__focused-toolbar__field-label-wrapper__parent-field {\n pointer-events: all;\n visibility: visible;\n display: initial;\n }\n\n .visual-builder__button--secondary:hover {\n background-color: #6c5ce7;\n color: #f9f8ff;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper\": css`\n display: flex;\n flex-direction: column-reverse;\n position: relative;\n `,\n \"visual-builder__focused-toolbar__field-label-container\": css`\n display: flex;\n column-gap: 0.5rem;\n align-items: center;\n `,\n \"visual-builder__button\": css`\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n font-size: 16px;\n font-weight: 600;\n line-height: 100%;\n padding: 8px 16px;\n text-align: center;\n z-index: 2147483647 !important;\n transition:\n color 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n // vertical-align: middle;\n `,\n \"visual-builder__button--primary\": css`\n background-color: #6c5ce7;\n color: #fff;\n\n &:hover {\n background-color: #5d50be;\n }\n `,\n \"visual-builder__button--secondary\": css`\n background-color: #f9f8ff;\n border: 1px solid #6c5ce7;\n color: #6c5ce7;\n `,\n \"visual-builder__button--edit\": css`\n svg {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__button-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #ffffff;\n }\n }\n `,\n \"visual-builder__button--comment-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__field-icon\": css`\n svg {\n height: 16px;\n width: 16px;\n margin-right: 5px;\n }\n `,\n \"visual-builder__focused-toolbar__button-group\": css`\n display: flex;\n background: #fff;\n border-radius: 2px;\n height: 100%;\n padding: 4px !important;\n z-index: 2147483647 !important;\n\n &:has(.visual-builder__button) {\n padding: 2px;\n gap: 8px;\n }\n\n .visual-builder__button:hover {\n background-color: #f5f5f5;\n\n svg {\n color: #5d50be;\n }\n }\n\n .visual-builder__button {\n background-color: #fff;\n border-color: transparent;\n color: #475161;\n padding: 4px;\n min-width: 32px;\n min-height: 32px;\n }\n `,\n \"visual-builder__focused-toolbar__text\": css`\n font-family: Inter, \"sans-serif\";\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n letter-spacing: 0.015rem;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n `,\n \"visual-builder__focused-toolbar__multiple-field-toolbar\": css`\n height: 40px;\n z-index: 2147483647 !important;\n\n svg {\n height: 100%;\n width: 100%;\n }\n `,\n \"visual-builder__rotate--90\": css`\n transform: rotate(90deg);\n `,\n \"visual-builder__focused-toolbar--field-disabled\": css`\n pointer-events: none;\n cursor: not-allowed;\n .visual-builder__focused-toolbar__field-label-wrapper__current-field {\n background: #909090;\n }\n `,\n \"visual-builder__cursor-disabled\": css`\n .visual-builder__cursor-icon {\n background: #909090;\n }\n\n .visual-builder__cursor-pointer path {\n fill: #909090;\n }\n `,\n \"visual-builder__tooltip\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: none;\n }\n\n &:hover:before,\n &:hover:after {\n display: block;\n z-index: 2147483647 !important;\n }\n\n &:after {\n display: none;\n }\n `,\n \"visual-builder__tooltip--bottom\": css`\n &:before {\n bottom: -66px;\n }\n &:after {\n bottom: -6px;\n transform: rotate(180deg);\n }\n `,\n\n \"visual-builder__tooltip--persistent\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: block;\n }\n\n &:after {\n display: block;\n }\n `,\n \"visual-builder__empty-block\": css`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1rem;\n min-height: 100px;\n `,\n \"visual-builder__empty-block-title\": css`\n font-size: 0.95rem;\n font-family: Inter;\n font-weight: 400;\n line-height: 100%;\n color: #647696;\n `,\n \"visual-builder__empty-block-add-button\": css`\n height: 32px;\n border-radius: 4px;\n background: #f9f8ff;\n border-color: #6c5ce7;\n border-width: 1px;\n padding: 8px 16px 8px 16px;\n font-size: 0.9rem;\n font-family: Inter;\n font-weight: 600;\n color: #6c5ce7;\n padding-block: 0px;\n letter-spacing: 0.01rem;\n `,\n \"visual-builder__hover-outline\": css`\n position: absolute;\n outline: 2px dashed #6c5ce7;\n transition: var(--outline-transition);\n z-index: 2147483647 !important;\n `,\n \"visual-builder__hover-outline--hidden\": css`\n visibility: hidden;\n `,\n \"visual-builder__hover-outline--unclickable\": css`\n pointer-events: none;\n `,\n \"visual-builder__hover-outline--disabled\": css`\n outline: 2px dashed #909090;\n `,\n \"visual-builder__default-cursor--disabled\": css`\n cursor: none;\n `,\n \"visual-builder__draft-field\": css`\n outline: 2px dashed #eb5646;\n `,\n \"visual-builder__variant-field\": css`\n outline: 2px solid #bd59fa;\n `,\n \"visual-builder__pseudo-editable-element\": css`\n z-index: 99999 !important;\n `,\n // cslp error styles\n \"visual-builder__button-error\": css`\n background-color: #ffeeeb;\n padding: 0px !important;\n &:hover {\n background-color: #ffeeeb;\n }\n `,\n \"visual-builder__focused-toolbar__error\": css`\n display: flex;\n justify-content: center;\n align-items: center;\n column-gap: 3px;\n padding: 4px 8px;\n `,\n \"visual-builder__focused-toolbar__error-text\": css`\n font-weight: 400;\n font-size: 12px;\n line-height: 18px;\n color: #a31b00;\n `,\n \"visual-builder__focused-toolbar__error-toolip\": css`\n position: absolute;\n width: 400px;\n background-color: red;\n left: 0;\n top: -7px;\n transform: translateY(-100%);\n background-color: #767676;\n border-radius: 4px;\n box-shadow:\n 0px 1px 10px 0px #6c5ce733,\n 0px 5px 5px 0px #0000001f,\n 0px 2px 4px 0px #00000024;\n padding: 12px;\n text-align: left;\n\n &:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n left: 4%;\n transform: translateX(-50%) rotate(45deg);\n width: 10px;\n height: 10px;\n background-color: #767676;\n }\n\n > p {\n margin: 0;\n color: #ffffff;\n font-size: 14px;\n font-weight: 600;\n line-height: 21px;\n margin-bottom: 4px;\n }\n\n > span {\n color: #ffffff;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n `,\n \"variant-field-revert-component\": css`\n position: relative;\n display: inline-block;\n z-index: 2147483647 !important;\n `,\n \"variant-field-revert-component__dropdown-content\": css`\n position: absolute;\n background-color: #ffffff;\n min-width: max-content;\n box-shadow:\n 0 4px 15px 0 rgba(108, 92, 231, 0.2),\n 0 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0 8px 10px 1px rgba(0, 0, 0, 0.14);\n z-index: 2147483647 !important;\n margin-top: 4px;\n padding: 4px 0px;\n border-radius: 2px;\n `,\n \"variant-field-revert-component__dropdown-content__list-item\": css`\n color: black;\n padding: 9.6px 16px;\n text-decoration: none;\n display: block;\n font-size: 0.75rem;\n height: 32px;\n line-height: 2rem;\n display: flex;\n align-items: center;\n z-index: 2147483647 !important;\n cursor: pointer;\n &:hover {\n background-color: #f1f1f1;\n }\n &:hover > span {\n color: #5d50be;\n }\n & > span {\n margin-top: 4px;\n margin-bottom: 4px;\n }\n `,\n \"visual-builder__no-cursor-style\": css`\n cursor: none !important;\n `,\n \"visual-builder__field-toolbar-container\": css`\n display: flex;\n flex-direction: column-reverse;\n z-index: 2147483647 !important;\n `,\n \"visual-builder__variant-button\": css`\n display: flex;\n min-width: 3rem !important;\n gap: 0.25rem;\n align-items: center;\n justify-content: center;\n display: flex;\n & svg path {\n fill: #475161;\n }\n `,\n };\n}\n\nexport const VisualBuilderGlobalStyles = `\n @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n [data-cslp] [contenteditable=\"true\"] {\n outline: none;\n }\n \n @keyframes visual-builder__spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n`;\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/visualBuilder/visualBuilder.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nconst tooltipBaseStyle = `\n pointer-events: all;\n svg {\n pointer-events: none;\n }\n &:before {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 20px;\n margin-bottom: 24px;\n padding: 12px;\n border-radius: 4px;\n width: max-content;\n max-width: 200px;\n color: #fff;\n font-family: Inter;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 132%; /* 0.99rem */\n letter-spacing: 0.015rem;\n background: #767676;\n }\n &:after {\n content: \"\";\n position: absolute;\n bottom: 28px;\n /* the arrow */\n border: 10px solid #000;\n border-color: #767676 transparent transparent transparent;\n }\n`;\n\nexport function visualBuilderStyles() {\n return {\n \"visual-builder__container\": css`\n --outline-transition: all 0.15s ease-in;\n font-family: \"Inter\", sans-serif;\n `,\n \"visual-builder__cursor\": css`\n visibility: hidden;\n height: 0;\n\n &.visible {\n visibility: visible;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 2147483647 !important;\n\n color: #fff;\n\n height: auto;\n padding: 0 10px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n pointer-events: none !important;\n position: fixed !important;\n cursor: none;\n }\n `,\n \"visual-builder__overlay__wrapper\": css`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n visibility: hidden;\n z-index: 99999;\n\n pointer-events: none;\n\n &.visible {\n visibility: visible;\n }\n `,\n \"visual-builder__overlay--outline\": css`\n position: absolute;\n outline: 4px solid #715cdd;\n transition: var(--outline-transition);\n `,\n \"visual-builder__overlay\": css`\n background: rgba(0, 0, 0, 0.3);\n box-sizing: content-box;\n pointer-events: all;\n position: absolute;\n transition: var(--outline-transition);\n `,\n \"visual-builder__add-button\": css`\n position: absolute;\n pointer-events: all;\n\n background: #ffffff;\n color: #475161;\n\n border-radius: 4px;\n border: 1px solid #6c5ce7;\n\n height: 32px;\n min-width: 32px;\n max-width: 180px;\n padding: 8px 6px;\n transform: translate(-50%, -50%);\n\n font-weight: 600;\n color: #6c5ce7;\n overflow: hidden;\n\n z-index: 2147483647 !important;\n\n display: grid;\n grid-template-columns: min-content 0fr;\n align-content: center;\n gap: 0;\n\n transition:\n grid-template-columns 0.25s,\n left 0.15s ease-in,\n top 0.15s ease-in,\n gap 0.15s ease-in;\n\n &:has(.visual-builder__add-button-label):hover {\n grid-template-columns: min-content 1fr;\n gap: 8px;\n padding: 8px 16px;\n }\n\n svg {\n fill: #6c5ce7;\n }\n\n &:disabled {\n border-color: #bbbec3;\n cursor: not-allowed;\n }\n\n &:disabled svg {\n fill: #bbbec3;\n }\n `,\n \"visual-builder__add-button-label\": css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n \"visual-builder__start-editing-btn\": css`\n z-index: 1000;\n text-decoration: none;\n position: fixed;\n bottom: 30px;\n right: 30px;\n box-shadow:\n 0px 4px 15px 0px rgba(108, 92, 231, 0.2),\n 0px 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14);\n display: inline-flex;\n padding: 0.5rem 1rem;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n\n border-radius: 4px;\n border: 1px solid transparent;\n background: #6c5ce7;\n transition:\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n -webkit-box-shadow 0.15s ease-in-out;\n\n &:hover {\n background-color: #5d50be;\n }\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px #ada4f4;\n }\n & > span {\n color: #fff;\n /* Body/P1 Bold */\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n\n & > svg {\n color: #fff;\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n `,\n \"visual-builder__cursor-icon\": css`\n height: 40px;\n width: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #5d50be;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n `,\n \"visual-builder__cursor-pointer\": css`\n position: absolute;\n top: -8px;\n left: -8px;\n `,\n \"visual-builder__cursor-icon--loader\": css`\n animation: visual-builder__spinner 1s linear infinite;\n `,\n \"visual-builder__focused-toolbar\": css`\n position: absolute;\n transform: translateY(-100%);\n z-index: 100000;\n gap: 8px;\n width: 0;\n display: flex;\n align-items: end;\n transition: var(--outline-transition);\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__current-field\": css`\n padding: 4px 8px !important;\n background: #6c5ce7;\n color: #fff;\n z-index: 1;\n border-radius: 2px !important;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: fit-content;\n\n &:disabled {\n filter: contrast(0.7);\n }\n\n .visual-builder__focused-toolbar__text {\n padding-right: 3px;\n height: 16px;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\": css`\n pointer-events: none;\n color: #5d50be;\n padding: 4px !important;\n margin-bottom: 3px;\n display: none;\n width: fit-content;\n position: absolute;\n z-index: 100000;\n `,\n \"field-label-dropdown-open\": css`\n .visual-builder__focused-toolbar__field-label-wrapper__parent-field {\n pointer-events: all;\n visibility: visible;\n display: initial;\n }\n\n .visual-builder__button--secondary:hover {\n background-color: #6c5ce7;\n color: #f9f8ff;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper\": css`\n display: flex;\n flex-direction: column-reverse;\n position: relative;\n `,\n \"visual-builder__focused-toolbar__field-label-container\": css`\n display: flex;\n column-gap: 0.5rem;\n align-items: center;\n `,\n \"visual-builder__button\": css`\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n font-size: 16px;\n font-weight: 600;\n line-height: 100%;\n padding: 8px 16px;\n text-align: center;\n z-index: 2147483647 !important;\n transition:\n color 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n // vertical-align: middle;\n `,\n \"visual-builder__button--primary\": css`\n background-color: #6c5ce7;\n color: #fff;\n\n &:hover {\n background-color: #5d50be;\n }\n `,\n \"visual-builder__button--secondary\": css`\n background-color: #f9f8ff;\n border: 1px solid #6c5ce7;\n color: #6c5ce7;\n `,\n \"visual-builder__button--edit\": css`\n svg {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__button-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #ffffff;\n }\n }\n `,\n \"visual-builder__button--comment-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__field-icon\": css`\n svg {\n height: 16px;\n width: 16px;\n margin-right: 5px;\n }\n `,\n \"visual-builder__focused-toolbar__button-group\": css`\n display: flex;\n background: #fff;\n border-radius: 2px;\n height: 100%;\n padding: 4px !important;\n z-index: 2147483647 !important;\n\n &:has(.visual-builder__button) {\n padding: 2px;\n gap: 8px;\n }\n\n .visual-builder__button:hover {\n background-color: #f5f5f5;\n\n svg {\n color: #5d50be;\n }\n }\n\n .visual-builder__button {\n background-color: #fff;\n border-color: transparent;\n color: #475161;\n padding: 4px;\n min-width: 32px;\n min-height: 32px;\n }\n `,\n \"visual-builder__focused-toolbar__text\": css`\n font-family: Inter, \"sans-serif\";\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n letter-spacing: 0.015rem;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n `,\n \"visual-builder__focused-toolbar__multiple-field-toolbar\": css`\n height: 40px;\n z-index: 2147483647 !important;\n\n svg {\n height: 100%;\n width: 100%;\n }\n `,\n \"visual-builder__rotate--90\": css`\n transform: rotate(90deg);\n `,\n \"visual-builder__focused-toolbar--field-disabled\": css`\n pointer-events: none;\n cursor: not-allowed;\n .visual-builder__focused-toolbar__field-label-wrapper__current-field {\n background: #909090;\n }\n `,\n \"visual-builder__cursor-disabled\": css`\n .visual-builder__cursor-icon {\n background: #909090;\n }\n\n .visual-builder__cursor-pointer path {\n fill: #909090;\n }\n `,\n \"visual-builder__tooltip\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: none;\n }\n\n &:hover:before,\n &:hover:after {\n display: block;\n z-index: 2147483647 !important;\n }\n\n &:after {\n display: none;\n }\n `,\n \"visual-builder__tooltip--bottom\": css`\n &:before {\n bottom: -66px;\n }\n &:after {\n bottom: -6px;\n transform: rotate(180deg);\n }\n `,\n\n \"visual-builder__tooltip--persistent\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: block;\n }\n\n &:after {\n display: block;\n }\n `,\n \"visual-builder__empty-block\": css`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1rem;\n min-height: 100px;\n `,\n \"visual-builder__empty-block-title\": css`\n font-size: 0.95rem;\n font-family: Inter;\n font-weight: 400;\n line-height: 100%;\n color: #647696;\n `,\n \"visual-builder__empty-block-add-button\": css`\n height: 32px;\n border-radius: 4px;\n background: #f9f8ff;\n border-color: #6c5ce7;\n border-width: 1px;\n padding: 8px 16px 8px 16px;\n font-size: 0.9rem;\n font-family: Inter;\n font-weight: 600;\n color: #6c5ce7;\n padding-block: 0px;\n letter-spacing: 0.01rem;\n `,\n \"visual-builder__hover-outline\": css`\n position: absolute;\n outline: 2px dashed #6c5ce7;\n transition: var(--outline-transition);\n z-index: 2147483647 !important;\n `,\n \"visual-builder__hover-outline--hidden\": css`\n visibility: hidden;\n `,\n \"visual-builder__hover-outline--unclickable\": css`\n pointer-events: none;\n `,\n \"visual-builder__hover-outline--disabled\": css`\n outline: 2px dashed #909090;\n `,\n \"visual-builder__default-cursor--disabled\": css`\n cursor: none;\n `,\n \"visual-builder__draft-field\": css`\n outline: 2px dashed #eb5646;\n `,\n \"visual-builder__variant-field\": css`\n outline: 2px solid #bd59fa;\n `,\n \"visual-builder__pseudo-editable-element\": css`\n z-index: 99999 !important;\n `,\n // cslp error styles\n \"visual-builder__button-error\": css`\n background-color: #ffeeeb;\n padding: 0px !important;\n &:hover {\n background-color: #ffeeeb;\n }\n `,\n \"visual-builder__focused-toolbar__error\": css`\n display: flex;\n justify-content: center;\n align-items: center;\n column-gap: 3px;\n padding: 4px 8px;\n `,\n \"visual-builder__focused-toolbar__error-text\": css`\n font-weight: 400;\n font-size: 12px;\n line-height: 18px;\n color: #a31b00;\n `,\n \"visual-builder__focused-toolbar__error-toolip\": css`\n position: absolute;\n width: 400px;\n background-color: red;\n left: 0;\n top: -7px;\n transform: translateY(-100%);\n background-color: #767676;\n border-radius: 4px;\n box-shadow:\n 0px 1px 10px 0px #6c5ce733,\n 0px 5px 5px 0px #0000001f,\n 0px 2px 4px 0px #00000024;\n padding: 12px;\n text-align: left;\n\n &:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n left: 4%;\n transform: translateX(-50%) rotate(45deg);\n width: 10px;\n height: 10px;\n background-color: #767676;\n }\n\n > p {\n margin: 0;\n color: #ffffff;\n font-size: 14px;\n font-weight: 600;\n line-height: 21px;\n margin-bottom: 4px;\n }\n\n > span {\n color: #ffffff;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n `,\n \"variant-field-revert-component\": css`\n position: relative;\n display: inline-block;\n z-index: 2147483647 !important;\n `,\n \"variant-field-revert-component__dropdown-content\": css`\n position: absolute;\n top: -12px;\n left: -4px;\n background-color: #ffffff;\n min-width: max-content;\n box-shadow:\n 0 4px 15px 0 rgba(108, 92, 231, 0.2),\n 0 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0 8px 10px 1px rgba(0, 0, 0, 0.14);\n z-index: 2147483647 !important;\n margin-top: 4px;\n padding: 4px 0px;\n border-radius: 2px;\n `,\n \"variant-field-revert-component__dropdown-content__list-item\": css`\n color: black;\n font-weight: 400;\n padding: 9.6px 16px;\n text-decoration: none;\n display: block;\n font-size: 0.75rem;\n height: 32px;\n line-height: 2rem;\n display: flex;\n align-items: center;\n z-index: 2147483647 !important;\n cursor: pointer;\n &:hover {\n background-color: #f1f1f1;\n }\n &:hover > span {\n color: #5d50be;\n }\n & > span {\n margin-top: 4px;\n margin-bottom: 4px;\n }\n `,\n \"visual-builder__no-cursor-style\": css`\n cursor: none !important;\n `,\n \"visual-builder__field-toolbar-container\": css`\n display: flex;\n flex-direction: column-reverse;\n z-index: 2147483647 !important;\n `,\n \"visual-builder__variant-button\": css`\n display: flex;\n min-width: 3rem !important;\n gap: 0.25rem;\n align-items: center;\n justify-content: center;\n display: flex;\n & svg path {\n fill: #475161;\n }\n `,\n };\n}\n\nexport const VisualBuilderGlobalStyles = `\n @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n [data-cslp] [contenteditable=\"true\"] {\n outline: none;\n }\n \n @keyframes visual-builder__spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n`;\n"],"mappings":"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","names":[]}
|
|
@@ -587,6 +587,8 @@ function visualBuilderStyles() {
|
|
|
587
587
|
`,
|
|
588
588
|
"variant-field-revert-component__dropdown-content": css`
|
|
589
589
|
position: absolute;
|
|
590
|
+
top: -12px;
|
|
591
|
+
left: -4px;
|
|
590
592
|
background-color: #ffffff;
|
|
591
593
|
min-width: max-content;
|
|
592
594
|
box-shadow:
|
|
@@ -600,6 +602,7 @@ function visualBuilderStyles() {
|
|
|
600
602
|
`,
|
|
601
603
|
"variant-field-revert-component__dropdown-content__list-item": css`
|
|
602
604
|
color: black;
|
|
605
|
+
font-weight: 400;
|
|
603
606
|
padding: 9.6px 16px;
|
|
604
607
|
text-decoration: none;
|
|
605
608
|
display: block;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/visualBuilder/visualBuilder.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nconst tooltipBaseStyle = `\n pointer-events: all;\n svg {\n pointer-events: none;\n }\n &:before {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 20px;\n margin-bottom: 24px;\n padding: 12px;\n border-radius: 4px;\n width: max-content;\n max-width: 200px;\n color: #fff;\n font-family: Inter;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 132%; /* 0.99rem */\n letter-spacing: 0.015rem;\n background: #767676;\n }\n &:after {\n content: \"\";\n position: absolute;\n bottom: 28px;\n /* the arrow */\n border: 10px solid #000;\n border-color: #767676 transparent transparent transparent;\n }\n`;\n\nexport function visualBuilderStyles() {\n return {\n \"visual-builder__container\": css`\n --outline-transition: all 0.15s ease-in;\n font-family: \"Inter\", sans-serif;\n `,\n \"visual-builder__cursor\": css`\n visibility: hidden;\n height: 0;\n\n &.visible {\n visibility: visible;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 2147483647 !important;\n\n color: #fff;\n\n height: auto;\n padding: 0 10px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n pointer-events: none !important;\n position: fixed !important;\n cursor: none;\n }\n `,\n \"visual-builder__overlay__wrapper\": css`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n visibility: hidden;\n z-index: 99999;\n\n pointer-events: none;\n\n &.visible {\n visibility: visible;\n }\n `,\n \"visual-builder__overlay--outline\": css`\n position: absolute;\n outline: 4px solid #715cdd;\n transition: var(--outline-transition);\n `,\n \"visual-builder__overlay\": css`\n background: rgba(0, 0, 0, 0.3);\n box-sizing: content-box;\n pointer-events: all;\n position: absolute;\n transition: var(--outline-transition);\n `,\n \"visual-builder__add-button\": css`\n position: absolute;\n pointer-events: all;\n\n background: #ffffff;\n color: #475161;\n\n border-radius: 4px;\n border: 1px solid #6c5ce7;\n\n height: 32px;\n min-width: 32px;\n max-width: 180px;\n padding: 8px 6px;\n transform: translate(-50%, -50%);\n\n font-weight: 600;\n color: #6c5ce7;\n overflow: hidden;\n\n z-index: 2147483647 !important;\n\n display: grid;\n grid-template-columns: min-content 0fr;\n align-content: center;\n gap: 0;\n\n transition:\n grid-template-columns 0.25s,\n left 0.15s ease-in,\n top 0.15s ease-in,\n gap 0.15s ease-in;\n\n &:has(.visual-builder__add-button-label):hover {\n grid-template-columns: min-content 1fr;\n gap: 8px;\n padding: 8px 16px;\n }\n\n svg {\n fill: #6c5ce7;\n }\n\n &:disabled {\n border-color: #bbbec3;\n cursor: not-allowed;\n }\n\n &:disabled svg {\n fill: #bbbec3;\n }\n `,\n \"visual-builder__add-button-label\": css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n \"visual-builder__start-editing-btn\": css`\n z-index: 1000;\n text-decoration: none;\n position: fixed;\n bottom: 30px;\n right: 30px;\n box-shadow:\n 0px 4px 15px 0px rgba(108, 92, 231, 0.2),\n 0px 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14);\n display: inline-flex;\n padding: 0.5rem 1rem;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n\n border-radius: 4px;\n border: 1px solid transparent;\n background: #6c5ce7;\n transition:\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n -webkit-box-shadow 0.15s ease-in-out;\n\n &:hover {\n background-color: #5d50be;\n }\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px #ada4f4;\n }\n & > span {\n color: #fff;\n /* Body/P1 Bold */\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n\n & > svg {\n color: #fff;\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n `,\n \"visual-builder__cursor-icon\": css`\n height: 40px;\n width: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #5d50be;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n `,\n \"visual-builder__cursor-pointer\": css`\n position: absolute;\n top: -8px;\n left: -8px;\n `,\n \"visual-builder__cursor-icon--loader\": css`\n animation: visual-builder__spinner 1s linear infinite;\n `,\n \"visual-builder__focused-toolbar\": css`\n position: absolute;\n transform: translateY(-100%);\n z-index: 100000;\n gap: 8px;\n width: 0;\n display: flex;\n align-items: end;\n transition: var(--outline-transition);\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__current-field\": css`\n padding: 4px 8px !important;\n background: #6c5ce7;\n color: #fff;\n z-index: 1;\n border-radius: 2px !important;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: fit-content;\n\n &:disabled {\n filter: contrast(0.7);\n }\n\n .visual-builder__focused-toolbar__text {\n padding-right: 3px;\n height: 16px;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\": css`\n pointer-events: none;\n color: #5d50be;\n padding: 4px !important;\n margin-bottom: 3px;\n display: none;\n width: fit-content;\n position: absolute;\n z-index: 100000;\n `,\n \"field-label-dropdown-open\": css`\n .visual-builder__focused-toolbar__field-label-wrapper__parent-field {\n pointer-events: all;\n visibility: visible;\n display: initial;\n }\n\n .visual-builder__button--secondary:hover {\n background-color: #6c5ce7;\n color: #f9f8ff;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper\": css`\n display: flex;\n flex-direction: column-reverse;\n position: relative;\n `,\n \"visual-builder__focused-toolbar__field-label-container\": css`\n display: flex;\n column-gap: 0.5rem;\n align-items: center;\n `,\n \"visual-builder__button\": css`\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n font-size: 16px;\n font-weight: 600;\n line-height: 100%;\n padding: 8px 16px;\n text-align: center;\n z-index: 2147483647 !important;\n transition:\n color 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n // vertical-align: middle;\n `,\n \"visual-builder__button--primary\": css`\n background-color: #6c5ce7;\n color: #fff;\n\n &:hover {\n background-color: #5d50be;\n }\n `,\n \"visual-builder__button--secondary\": css`\n background-color: #f9f8ff;\n border: 1px solid #6c5ce7;\n color: #6c5ce7;\n `,\n \"visual-builder__button--edit\": css`\n svg {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__button-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #ffffff;\n }\n }\n `,\n \"visual-builder__button--comment-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__field-icon\": css`\n svg {\n height: 16px;\n width: 16px;\n margin-right: 5px;\n }\n `,\n \"visual-builder__focused-toolbar__button-group\": css`\n display: flex;\n background: #fff;\n border-radius: 2px;\n height: 100%;\n padding: 4px !important;\n z-index: 2147483647 !important;\n\n &:has(.visual-builder__button) {\n padding: 2px;\n gap: 8px;\n }\n\n .visual-builder__button:hover {\n background-color: #f5f5f5;\n\n svg {\n color: #5d50be;\n }\n }\n\n .visual-builder__button {\n background-color: #fff;\n border-color: transparent;\n color: #475161;\n padding: 4px;\n min-width: 32px;\n min-height: 32px;\n }\n `,\n \"visual-builder__focused-toolbar__text\": css`\n font-family: Inter, \"sans-serif\";\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n letter-spacing: 0.015rem;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n `,\n \"visual-builder__focused-toolbar__multiple-field-toolbar\": css`\n height: 40px;\n z-index: 2147483647 !important;\n\n svg {\n height: 100%;\n width: 100%;\n }\n `,\n \"visual-builder__rotate--90\": css`\n transform: rotate(90deg);\n `,\n \"visual-builder__focused-toolbar--field-disabled\": css`\n pointer-events: none;\n cursor: not-allowed;\n .visual-builder__focused-toolbar__field-label-wrapper__current-field {\n background: #909090;\n }\n `,\n \"visual-builder__cursor-disabled\": css`\n .visual-builder__cursor-icon {\n background: #909090;\n }\n\n .visual-builder__cursor-pointer path {\n fill: #909090;\n }\n `,\n \"visual-builder__tooltip\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: none;\n }\n\n &:hover:before,\n &:hover:after {\n display: block;\n z-index: 2147483647 !important;\n }\n\n &:after {\n display: none;\n }\n `,\n \"visual-builder__tooltip--bottom\": css`\n &:before {\n bottom: -66px;\n }\n &:after {\n bottom: -6px;\n transform: rotate(180deg);\n }\n `,\n\n \"visual-builder__tooltip--persistent\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: block;\n }\n\n &:after {\n display: block;\n }\n `,\n \"visual-builder__empty-block\": css`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1rem;\n min-height: 100px;\n `,\n \"visual-builder__empty-block-title\": css`\n font-size: 0.95rem;\n font-family: Inter;\n font-weight: 400;\n line-height: 100%;\n color: #647696;\n `,\n \"visual-builder__empty-block-add-button\": css`\n height: 32px;\n border-radius: 4px;\n background: #f9f8ff;\n border-color: #6c5ce7;\n border-width: 1px;\n padding: 8px 16px 8px 16px;\n font-size: 0.9rem;\n font-family: Inter;\n font-weight: 600;\n color: #6c5ce7;\n padding-block: 0px;\n letter-spacing: 0.01rem;\n `,\n \"visual-builder__hover-outline\": css`\n position: absolute;\n outline: 2px dashed #6c5ce7;\n transition: var(--outline-transition);\n z-index: 2147483647 !important;\n `,\n \"visual-builder__hover-outline--hidden\": css`\n visibility: hidden;\n `,\n \"visual-builder__hover-outline--unclickable\": css`\n pointer-events: none;\n `,\n \"visual-builder__hover-outline--disabled\": css`\n outline: 2px dashed #909090;\n `,\n \"visual-builder__default-cursor--disabled\": css`\n cursor: none;\n `,\n \"visual-builder__draft-field\": css`\n outline: 2px dashed #eb5646;\n `,\n \"visual-builder__variant-field\": css`\n outline: 2px solid #bd59fa;\n `,\n \"visual-builder__pseudo-editable-element\": css`\n z-index: 99999 !important;\n `,\n // cslp error styles\n \"visual-builder__button-error\": css`\n background-color: #ffeeeb;\n padding: 0px !important;\n &:hover {\n background-color: #ffeeeb;\n }\n `,\n \"visual-builder__focused-toolbar__error\": css`\n display: flex;\n justify-content: center;\n align-items: center;\n column-gap: 3px;\n padding: 4px 8px;\n `,\n \"visual-builder__focused-toolbar__error-text\": css`\n font-weight: 400;\n font-size: 12px;\n line-height: 18px;\n color: #a31b00;\n `,\n \"visual-builder__focused-toolbar__error-toolip\": css`\n position: absolute;\n width: 400px;\n background-color: red;\n left: 0;\n top: -7px;\n transform: translateY(-100%);\n background-color: #767676;\n border-radius: 4px;\n box-shadow:\n 0px 1px 10px 0px #6c5ce733,\n 0px 5px 5px 0px #0000001f,\n 0px 2px 4px 0px #00000024;\n padding: 12px;\n text-align: left;\n\n &:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n left: 4%;\n transform: translateX(-50%) rotate(45deg);\n width: 10px;\n height: 10px;\n background-color: #767676;\n }\n\n > p {\n margin: 0;\n color: #ffffff;\n font-size: 14px;\n font-weight: 600;\n line-height: 21px;\n margin-bottom: 4px;\n }\n\n > span {\n color: #ffffff;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n `,\n \"variant-field-revert-component\": css`\n position: relative;\n display: inline-block;\n z-index: 2147483647 !important;\n `,\n \"variant-field-revert-component__dropdown-content\": css`\n position: absolute;\n background-color: #ffffff;\n min-width: max-content;\n box-shadow:\n 0 4px 15px 0 rgba(108, 92, 231, 0.2),\n 0 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0 8px 10px 1px rgba(0, 0, 0, 0.14);\n z-index: 2147483647 !important;\n margin-top: 4px;\n padding: 4px 0px;\n border-radius: 2px;\n `,\n \"variant-field-revert-component__dropdown-content__list-item\": css`\n color: black;\n padding: 9.6px 16px;\n text-decoration: none;\n display: block;\n font-size: 0.75rem;\n height: 32px;\n line-height: 2rem;\n display: flex;\n align-items: center;\n z-index: 2147483647 !important;\n cursor: pointer;\n &:hover {\n background-color: #f1f1f1;\n }\n &:hover > span {\n color: #5d50be;\n }\n & > span {\n margin-top: 4px;\n margin-bottom: 4px;\n }\n `,\n \"visual-builder__no-cursor-style\": css`\n cursor: none !important;\n `,\n \"visual-builder__field-toolbar-container\": css`\n display: flex;\n flex-direction: column-reverse;\n z-index: 2147483647 !important;\n `,\n \"visual-builder__variant-button\": css`\n display: flex;\n min-width: 3rem !important;\n gap: 0.25rem;\n align-items: center;\n justify-content: center;\n display: flex;\n & svg path {\n fill: #475161;\n }\n `,\n };\n}\n\nexport const VisualBuilderGlobalStyles = `\n @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n [data-cslp] [contenteditable=\"true\"] {\n outline: none;\n }\n \n @keyframes visual-builder__spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n`;\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/visualBuilder/visualBuilder.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nconst tooltipBaseStyle = `\n pointer-events: all;\n svg {\n pointer-events: none;\n }\n &:before {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 20px;\n margin-bottom: 24px;\n padding: 12px;\n border-radius: 4px;\n width: max-content;\n max-width: 200px;\n color: #fff;\n font-family: Inter;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 132%; /* 0.99rem */\n letter-spacing: 0.015rem;\n background: #767676;\n }\n &:after {\n content: \"\";\n position: absolute;\n bottom: 28px;\n /* the arrow */\n border: 10px solid #000;\n border-color: #767676 transparent transparent transparent;\n }\n`;\n\nexport function visualBuilderStyles() {\n return {\n \"visual-builder__container\": css`\n --outline-transition: all 0.15s ease-in;\n font-family: \"Inter\", sans-serif;\n `,\n \"visual-builder__cursor\": css`\n visibility: hidden;\n height: 0;\n\n &.visible {\n visibility: visible;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 2147483647 !important;\n\n color: #fff;\n\n height: auto;\n padding: 0 10px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n pointer-events: none !important;\n position: fixed !important;\n cursor: none;\n }\n `,\n \"visual-builder__overlay__wrapper\": css`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n visibility: hidden;\n z-index: 99999;\n\n pointer-events: none;\n\n &.visible {\n visibility: visible;\n }\n `,\n \"visual-builder__overlay--outline\": css`\n position: absolute;\n outline: 4px solid #715cdd;\n transition: var(--outline-transition);\n `,\n \"visual-builder__overlay\": css`\n background: rgba(0, 0, 0, 0.3);\n box-sizing: content-box;\n pointer-events: all;\n position: absolute;\n transition: var(--outline-transition);\n `,\n \"visual-builder__add-button\": css`\n position: absolute;\n pointer-events: all;\n\n background: #ffffff;\n color: #475161;\n\n border-radius: 4px;\n border: 1px solid #6c5ce7;\n\n height: 32px;\n min-width: 32px;\n max-width: 180px;\n padding: 8px 6px;\n transform: translate(-50%, -50%);\n\n font-weight: 600;\n color: #6c5ce7;\n overflow: hidden;\n\n z-index: 2147483647 !important;\n\n display: grid;\n grid-template-columns: min-content 0fr;\n align-content: center;\n gap: 0;\n\n transition:\n grid-template-columns 0.25s,\n left 0.15s ease-in,\n top 0.15s ease-in,\n gap 0.15s ease-in;\n\n &:has(.visual-builder__add-button-label):hover {\n grid-template-columns: min-content 1fr;\n gap: 8px;\n padding: 8px 16px;\n }\n\n svg {\n fill: #6c5ce7;\n }\n\n &:disabled {\n border-color: #bbbec3;\n cursor: not-allowed;\n }\n\n &:disabled svg {\n fill: #bbbec3;\n }\n `,\n \"visual-builder__add-button-label\": css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n \"visual-builder__start-editing-btn\": css`\n z-index: 1000;\n text-decoration: none;\n position: fixed;\n bottom: 30px;\n right: 30px;\n box-shadow:\n 0px 4px 15px 0px rgba(108, 92, 231, 0.2),\n 0px 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14);\n display: inline-flex;\n padding: 0.5rem 1rem;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n\n border-radius: 4px;\n border: 1px solid transparent;\n background: #6c5ce7;\n transition:\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n -webkit-box-shadow 0.15s ease-in-out;\n\n &:hover {\n background-color: #5d50be;\n }\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px #ada4f4;\n }\n & > span {\n color: #fff;\n /* Body/P1 Bold */\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n\n & > svg {\n color: #fff;\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n `,\n \"visual-builder__cursor-icon\": css`\n height: 40px;\n width: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #5d50be;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n `,\n \"visual-builder__cursor-pointer\": css`\n position: absolute;\n top: -8px;\n left: -8px;\n `,\n \"visual-builder__cursor-icon--loader\": css`\n animation: visual-builder__spinner 1s linear infinite;\n `,\n \"visual-builder__focused-toolbar\": css`\n position: absolute;\n transform: translateY(-100%);\n z-index: 100000;\n gap: 8px;\n width: 0;\n display: flex;\n align-items: end;\n transition: var(--outline-transition);\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__current-field\": css`\n padding: 4px 8px !important;\n background: #6c5ce7;\n color: #fff;\n z-index: 1;\n border-radius: 2px !important;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: fit-content;\n\n &:disabled {\n filter: contrast(0.7);\n }\n\n .visual-builder__focused-toolbar__text {\n padding-right: 3px;\n height: 16px;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\": css`\n pointer-events: none;\n color: #5d50be;\n padding: 4px !important;\n margin-bottom: 3px;\n display: none;\n width: fit-content;\n position: absolute;\n z-index: 100000;\n `,\n \"field-label-dropdown-open\": css`\n .visual-builder__focused-toolbar__field-label-wrapper__parent-field {\n pointer-events: all;\n visibility: visible;\n display: initial;\n }\n\n .visual-builder__button--secondary:hover {\n background-color: #6c5ce7;\n color: #f9f8ff;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper\": css`\n display: flex;\n flex-direction: column-reverse;\n position: relative;\n `,\n \"visual-builder__focused-toolbar__field-label-container\": css`\n display: flex;\n column-gap: 0.5rem;\n align-items: center;\n `,\n \"visual-builder__button\": css`\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n font-size: 16px;\n font-weight: 600;\n line-height: 100%;\n padding: 8px 16px;\n text-align: center;\n z-index: 2147483647 !important;\n transition:\n color 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n // vertical-align: middle;\n `,\n \"visual-builder__button--primary\": css`\n background-color: #6c5ce7;\n color: #fff;\n\n &:hover {\n background-color: #5d50be;\n }\n `,\n \"visual-builder__button--secondary\": css`\n background-color: #f9f8ff;\n border: 1px solid #6c5ce7;\n color: #6c5ce7;\n `,\n \"visual-builder__button--edit\": css`\n svg {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__button-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #ffffff;\n }\n }\n `,\n \"visual-builder__button--comment-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__field-icon\": css`\n svg {\n height: 16px;\n width: 16px;\n margin-right: 5px;\n }\n `,\n \"visual-builder__focused-toolbar__button-group\": css`\n display: flex;\n background: #fff;\n border-radius: 2px;\n height: 100%;\n padding: 4px !important;\n z-index: 2147483647 !important;\n\n &:has(.visual-builder__button) {\n padding: 2px;\n gap: 8px;\n }\n\n .visual-builder__button:hover {\n background-color: #f5f5f5;\n\n svg {\n color: #5d50be;\n }\n }\n\n .visual-builder__button {\n background-color: #fff;\n border-color: transparent;\n color: #475161;\n padding: 4px;\n min-width: 32px;\n min-height: 32px;\n }\n `,\n \"visual-builder__focused-toolbar__text\": css`\n font-family: Inter, \"sans-serif\";\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n letter-spacing: 0.015rem;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n `,\n \"visual-builder__focused-toolbar__multiple-field-toolbar\": css`\n height: 40px;\n z-index: 2147483647 !important;\n\n svg {\n height: 100%;\n width: 100%;\n }\n `,\n \"visual-builder__rotate--90\": css`\n transform: rotate(90deg);\n `,\n \"visual-builder__focused-toolbar--field-disabled\": css`\n pointer-events: none;\n cursor: not-allowed;\n .visual-builder__focused-toolbar__field-label-wrapper__current-field {\n background: #909090;\n }\n `,\n \"visual-builder__cursor-disabled\": css`\n .visual-builder__cursor-icon {\n background: #909090;\n }\n\n .visual-builder__cursor-pointer path {\n fill: #909090;\n }\n `,\n \"visual-builder__tooltip\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: none;\n }\n\n &:hover:before,\n &:hover:after {\n display: block;\n z-index: 2147483647 !important;\n }\n\n &:after {\n display: none;\n }\n `,\n \"visual-builder__tooltip--bottom\": css`\n &:before {\n bottom: -66px;\n }\n &:after {\n bottom: -6px;\n transform: rotate(180deg);\n }\n `,\n\n \"visual-builder__tooltip--persistent\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: block;\n }\n\n &:after {\n display: block;\n }\n `,\n \"visual-builder__empty-block\": css`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1rem;\n min-height: 100px;\n `,\n \"visual-builder__empty-block-title\": css`\n font-size: 0.95rem;\n font-family: Inter;\n font-weight: 400;\n line-height: 100%;\n color: #647696;\n `,\n \"visual-builder__empty-block-add-button\": css`\n height: 32px;\n border-radius: 4px;\n background: #f9f8ff;\n border-color: #6c5ce7;\n border-width: 1px;\n padding: 8px 16px 8px 16px;\n font-size: 0.9rem;\n font-family: Inter;\n font-weight: 600;\n color: #6c5ce7;\n padding-block: 0px;\n letter-spacing: 0.01rem;\n `,\n \"visual-builder__hover-outline\": css`\n position: absolute;\n outline: 2px dashed #6c5ce7;\n transition: var(--outline-transition);\n z-index: 2147483647 !important;\n `,\n \"visual-builder__hover-outline--hidden\": css`\n visibility: hidden;\n `,\n \"visual-builder__hover-outline--unclickable\": css`\n pointer-events: none;\n `,\n \"visual-builder__hover-outline--disabled\": css`\n outline: 2px dashed #909090;\n `,\n \"visual-builder__default-cursor--disabled\": css`\n cursor: none;\n `,\n \"visual-builder__draft-field\": css`\n outline: 2px dashed #eb5646;\n `,\n \"visual-builder__variant-field\": css`\n outline: 2px solid #bd59fa;\n `,\n \"visual-builder__pseudo-editable-element\": css`\n z-index: 99999 !important;\n `,\n // cslp error styles\n \"visual-builder__button-error\": css`\n background-color: #ffeeeb;\n padding: 0px !important;\n &:hover {\n background-color: #ffeeeb;\n }\n `,\n \"visual-builder__focused-toolbar__error\": css`\n display: flex;\n justify-content: center;\n align-items: center;\n column-gap: 3px;\n padding: 4px 8px;\n `,\n \"visual-builder__focused-toolbar__error-text\": css`\n font-weight: 400;\n font-size: 12px;\n line-height: 18px;\n color: #a31b00;\n `,\n \"visual-builder__focused-toolbar__error-toolip\": css`\n position: absolute;\n width: 400px;\n background-color: red;\n left: 0;\n top: -7px;\n transform: translateY(-100%);\n background-color: #767676;\n border-radius: 4px;\n box-shadow:\n 0px 1px 10px 0px #6c5ce733,\n 0px 5px 5px 0px #0000001f,\n 0px 2px 4px 0px #00000024;\n padding: 12px;\n text-align: left;\n\n &:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n left: 4%;\n transform: translateX(-50%) rotate(45deg);\n width: 10px;\n height: 10px;\n background-color: #767676;\n }\n\n > p {\n margin: 0;\n color: #ffffff;\n font-size: 14px;\n font-weight: 600;\n line-height: 21px;\n margin-bottom: 4px;\n }\n\n > span {\n color: #ffffff;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n `,\n \"variant-field-revert-component\": css`\n position: relative;\n display: inline-block;\n z-index: 2147483647 !important;\n `,\n \"variant-field-revert-component__dropdown-content\": css`\n position: absolute;\n top: -12px;\n left: -4px;\n background-color: #ffffff;\n min-width: max-content;\n box-shadow:\n 0 4px 15px 0 rgba(108, 92, 231, 0.2),\n 0 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0 8px 10px 1px rgba(0, 0, 0, 0.14);\n z-index: 2147483647 !important;\n margin-top: 4px;\n padding: 4px 0px;\n border-radius: 2px;\n `,\n \"variant-field-revert-component__dropdown-content__list-item\": css`\n color: black;\n font-weight: 400;\n padding: 9.6px 16px;\n text-decoration: none;\n display: block;\n font-size: 0.75rem;\n height: 32px;\n line-height: 2rem;\n display: flex;\n align-items: center;\n z-index: 2147483647 !important;\n cursor: pointer;\n &:hover {\n background-color: #f1f1f1;\n }\n &:hover > span {\n color: #5d50be;\n }\n & > span {\n margin-top: 4px;\n margin-bottom: 4px;\n }\n `,\n \"visual-builder__no-cursor-style\": css`\n cursor: none !important;\n `,\n \"visual-builder__field-toolbar-container\": css`\n display: flex;\n flex-direction: column-reverse;\n z-index: 2147483647 !important;\n `,\n \"visual-builder__variant-button\": css`\n display: flex;\n min-width: 3rem !important;\n gap: 0.25rem;\n align-items: center;\n justify-content: center;\n display: flex;\n & svg path {\n fill: #475161;\n }\n `,\n };\n}\n\nexport const VisualBuilderGlobalStyles = `\n @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n [data-cslp] [contenteditable=\"true\"] {\n outline: none;\n }\n \n @keyframes visual-builder__spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n`;\n"],"mappings":"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","names":[]}
|
package/dist/modern/index.cjs
CHANGED
|
@@ -28,15 +28,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
30
|
// src/index.ts
|
|
31
|
-
var
|
|
32
|
-
__export(
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
33
|
VB_EmptyBlockParentClass: () => VB_EmptyBlockParentClass,
|
|
34
|
-
default: () =>
|
|
34
|
+
default: () => index_default
|
|
35
35
|
});
|
|
36
|
-
module.exports = __toCommonJS(
|
|
36
|
+
module.exports = __toCommonJS(index_exports);
|
|
37
37
|
var import_contentstack_live_preview_HOC = __toESM(require("./preview/contentstack-live-preview-HOC.cjs"), 1);
|
|
38
38
|
var VB_EmptyBlockParentClass = "visual-builder__empty-block-parent";
|
|
39
|
-
var
|
|
39
|
+
var index_default = import_contentstack_live_preview_HOC.default;
|
|
40
40
|
// Annotate the CommonJS export names for ESM import in node:
|
|
41
41
|
0 && (module.exports = {
|
|
42
42
|
VB_EmptyBlockParentClass
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import ContentstackLivePreviewHOC from \"./preview/contentstack-live-preview-HOC\";\n\nimport { IStackSdk as ExternalStackSdkType } from \"./types/types\";\nexport type IStackSdk = ExternalStackSdkType;\nclass LightLivePreviewHoC implements ContentstackLivePreviewHOC {\n static init() {}\n\n get hash() {\n return \"\";\n }\n\n static onEntryChange(callback: (...args: any[]) => void) {\n return callback();\n }\n\n static onLiveEdit() {\n // intentionally empty\n }\n\n static unsubscribeOnEntryChange() {\n // intentionally empty\n }\n\n static getSdkVersion(): string {\n return process?.env?.PACKAGE_VERSION!;\n }\n}\n\n// export const ContentstackLivePreview: ContentstackLivePreviewHOC =\n// ContentstackLivePreviewHOC;\n\nexport const VB_EmptyBlockParentClass = \"visual-builder__empty-block-parent\";\nexport default ContentstackLivePreviewHOC;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2CAAuC;AA+BhC,IAAM,2BAA2B;AACxC,IAAO,
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import ContentstackLivePreviewHOC from \"./preview/contentstack-live-preview-HOC\";\n\nimport { IStackSdk as ExternalStackSdkType } from \"./types/types\";\nexport type IStackSdk = ExternalStackSdkType;\nclass LightLivePreviewHoC implements ContentstackLivePreviewHOC {\n static init() {}\n\n get hash() {\n return \"\";\n }\n\n static onEntryChange(callback: (...args: any[]) => void) {\n return callback();\n }\n\n static onLiveEdit() {\n // intentionally empty\n }\n\n static unsubscribeOnEntryChange() {\n // intentionally empty\n }\n\n static getSdkVersion(): string {\n return process?.env?.PACKAGE_VERSION!;\n }\n}\n\n// export const ContentstackLivePreview: ContentstackLivePreviewHOC =\n// ContentstackLivePreviewHOC;\n\nexport const VB_EmptyBlockParentClass = \"visual-builder__empty-block-parent\";\nexport default ContentstackLivePreviewHOC;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2CAAuC;AA+BhC,IAAM,2BAA2B;AACxC,IAAO,gBAAQ,qCAAAA;","names":["ContentstackLivePreviewHOC"]}
|
package/dist/modern/index.js
CHANGED
|
@@ -3,9 +3,9 @@ import "./chunk-5WRI5ZAA.js";
|
|
|
3
3
|
// src/index.ts
|
|
4
4
|
import ContentstackLivePreviewHOC from "./preview/contentstack-live-preview-HOC.js";
|
|
5
5
|
var VB_EmptyBlockParentClass = "visual-builder__empty-block-parent";
|
|
6
|
-
var
|
|
6
|
+
var index_default = ContentstackLivePreviewHOC;
|
|
7
7
|
export {
|
|
8
8
|
VB_EmptyBlockParentClass,
|
|
9
|
-
|
|
9
|
+
index_default as default
|
|
10
10
|
};
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
package/dist/modern/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import ContentstackLivePreviewHOC from \"./preview/contentstack-live-preview-HOC\";\n\nimport { IStackSdk as ExternalStackSdkType } from \"./types/types\";\nexport type IStackSdk = ExternalStackSdkType;\nclass LightLivePreviewHoC implements ContentstackLivePreviewHOC {\n static init() {}\n\n get hash() {\n return \"\";\n }\n\n static onEntryChange(callback: (...args: any[]) => void) {\n return callback();\n }\n\n static onLiveEdit() {\n // intentionally empty\n }\n\n static unsubscribeOnEntryChange() {\n // intentionally empty\n }\n\n static getSdkVersion(): string {\n return process?.env?.PACKAGE_VERSION!;\n }\n}\n\n// export const ContentstackLivePreview: ContentstackLivePreviewHOC =\n// ContentstackLivePreviewHOC;\n\nexport const VB_EmptyBlockParentClass = \"visual-builder__empty-block-parent\";\nexport default ContentstackLivePreviewHOC;\n"],"mappings":";;;AAAA,OAAO,gCAAgC;AA+BhC,IAAM,2BAA2B;AACxC,IAAO,
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import ContentstackLivePreviewHOC from \"./preview/contentstack-live-preview-HOC\";\n\nimport { IStackSdk as ExternalStackSdkType } from \"./types/types\";\nexport type IStackSdk = ExternalStackSdkType;\nclass LightLivePreviewHoC implements ContentstackLivePreviewHOC {\n static init() {}\n\n get hash() {\n return \"\";\n }\n\n static onEntryChange(callback: (...args: any[]) => void) {\n return callback();\n }\n\n static onLiveEdit() {\n // intentionally empty\n }\n\n static unsubscribeOnEntryChange() {\n // intentionally empty\n }\n\n static getSdkVersion(): string {\n return process?.env?.PACKAGE_VERSION!;\n }\n}\n\n// export const ContentstackLivePreview: ContentstackLivePreviewHOC =\n// ContentstackLivePreviewHOC;\n\nexport const VB_EmptyBlockParentClass = \"visual-builder__empty-block-parent\";\nexport default ContentstackLivePreviewHOC;\n"],"mappings":";;;AAAA,OAAO,gCAAgC;AA+BhC,IAAM,2BAA2B;AACxC,IAAO,gBAAQ;","names":[]}
|
|
@@ -265,6 +265,9 @@ var LivePreviewEditButton = class {
|
|
|
265
265
|
return false;
|
|
266
266
|
}
|
|
267
267
|
updateTooltipPosition() {
|
|
268
|
+
if (!document.getElementById("cslp-tooltip")) {
|
|
269
|
+
this.createCslpTooltip();
|
|
270
|
+
}
|
|
268
271
|
const editButton = import_configManager.default.get().editButton;
|
|
269
272
|
const elements = import_configManager.default.get().elements;
|
|
270
273
|
if (!elements.highlightedElement || !this.tooltip) return false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/livePreview/editButton/editButton.ts"],"sourcesContent":["import { effect } from \"@preact/signals\";\nimport { inIframe } from \"../../common/inIframe\";\nimport Config from \"../../configManager/configManager\";\nimport { addCslpOutline, extractDetailsFromCslp } from \"../../cslp\";\nimport { cslpTagStyles } from \"./editButton.style\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport {\n type IEditButtonPosition,\n ILivePreviewWindowType,\n} from \"../../types/types\";\nimport livePreviewPostMessage from \"../eventManager/livePreviewEventManager\";\nimport { EDIT_BUTTON_TOOLTIP_ID } from \"./editButton.constant\";\nimport { isOpeningInTimeline } from \"../../utils\";\n\nfunction calculateEditButtonPosition(\n currentHoveredElement: HTMLElement,\n cslpButtonPosition: string\n): IEditButtonPosition {\n const editButtonPosition: IEditButtonPosition = {\n upperBoundOfTooltip: 0,\n leftBoundOfTooltip: 0,\n };\n const currentRectOfElement = currentHoveredElement.getBoundingClientRect();\n try {\n const buttonMeasurementValues = {\n width: 72,\n halfWidth: 36,\n height: 40,\n basicMargin: 5,\n widthWithMargin: 77,\n };\n\n switch (cslpButtonPosition) {\n case \"top-center\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.width / 2 -\n buttonMeasurementValues.halfWidth +\n currentRectOfElement.left;\n break;\n case \"top-right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right - buttonMeasurementValues.width;\n break;\n case \"right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top -\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right +\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom-left\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom-center\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.width / 2 -\n buttonMeasurementValues.halfWidth +\n currentRectOfElement.left;\n break;\n case \"bottom-right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right - buttonMeasurementValues.width;\n break;\n case \"left\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top -\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.widthWithMargin;\n break;\n // default position => top, top-left or any other string\n default:\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n }\n return editButtonPosition;\n } catch (error) {\n PublicLogger.error(error);\n return editButtonPosition;\n }\n}\n\nexport const createSingularEditButton = (\n editCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n const singularEditButton = document.createElement(\"div\");\n singularEditButton.classList.add(\"cslp-tooltip-child\", \"singular\");\n singularEditButton.setAttribute(\n \"data-test-id\",\n \"cslp-singular-edit-button\"\n );\n singularEditButton.innerHTML = `<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n </svg>Edit`;\n\n singularEditButton.addEventListener(\"click\", editCallback);\n\n return singularEditButton;\n};\n\nexport const createMultipleEditButton = (\n editCallback: (e: MouseEvent) => void,\n linkCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n const multipleEditButton = document.createElement(\"div\");\n multipleEditButton.classList.add(\"cslp-tooltip-child\");\n multipleEditButton.setAttribute(\"data-title\", \"Edit\");\n multipleEditButton.setAttribute(\n \"data-test-id\",\n \"cslp-multiple-edit-button\"\n );\n multipleEditButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n </svg>`;\n\n multipleEditButton.addEventListener(\"click\", editCallback);\n\n const multipleExternalLinkButton = document.createElement(\"div\");\n multipleExternalLinkButton.classList.add(\"cslp-tooltip-child\");\n multipleExternalLinkButton.setAttribute(\"data-title\", \"Go to link\");\n multipleExternalLinkButton.setAttribute(\n \"data-test-id\",\n \"cslp-multiple-external-link-button\"\n );\n multipleExternalLinkButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.66654 2.66758H13.3332V13.3342H6.66654V16.0009H13.3332C14.0405 16.0009 14.7187 15.72 15.2188 15.2199C15.7189 14.7198 15.9999 14.0415 15.9999 13.3342V2.66758C15.9999 1.96034 15.7189 1.28206 15.2188 0.781964C14.7187 0.281867 14.0405 0.000915527 13.3332 0.000915527H2.66654C1.9593 0.000915527 1.28102 0.281867 0.780927 0.781964C0.280829 1.28206 -0.00012207 1.96034 -0.00012207 2.66758V9.33425H2.66654V2.66758Z\" fill=\"#718096\" />\n <path d=\"M6.94263 7.05734L0.999958 13L2.88529 14.8853L8.82796 8.94267L10.8853 11V5.00001H4.88529L6.94263 7.05734Z\" fill=\"#718096\" />\n </svg>`;\n\n multipleExternalLinkButton.addEventListener(\"click\", linkCallback);\n\n const multipleEditFragment = document.createDocumentFragment();\n multipleEditFragment.appendChild(multipleEditButton);\n multipleEditFragment.appendChild(multipleExternalLinkButton);\n\n const multipleDiv = document.createElement(\"div\");\n multipleDiv.appendChild(multipleEditFragment);\n multipleDiv.classList.add(cslpTagStyles()[\"multiple\"]);\n\n return multipleDiv;\n};\n\nexport function getEditButtonPosition(\n currentHoveredElement: HTMLElement | null,\n defaultPosition: string | undefined\n): IEditButtonPosition {\n if (!currentHoveredElement)\n return { upperBoundOfTooltip: 0, leftBoundOfTooltip: 0 };\n\n const cslpButtonPosition = currentHoveredElement.getAttribute(\n \"data-cslp-button-position\"\n );\n if (cslpButtonPosition) {\n return calculateEditButtonPosition(\n currentHoveredElement,\n cslpButtonPosition\n );\n }\n\n // NOTE: position \"top\" and \"top-left\" will be the position of edit button if no default position passed in config\n return calculateEditButtonPosition(\n currentHoveredElement,\n defaultPosition || \"top\"\n );\n}\n\nexport function shouldRenderEditButton(): boolean {\n const config = Config.get();\n\n if (!config.editButton.enable) {\n if (config.editButton.enable === undefined)\n PublicLogger.error(\n \"enable key is required inside editButton object\"\n );\n return false;\n }\n\n // return boolean in case of cslp-buttons query added in url\n try {\n const currentLocation = new URL(window.location.href);\n const cslpButtonQueryValue =\n currentLocation.searchParams.get(\"cslp-buttons\");\n\n if (\n cslpButtonQueryValue !== null &&\n config.editButton.includeByQueryParameter !== false\n )\n return cslpButtonQueryValue === \"false\" ? false : true;\n } catch (error) {\n PublicLogger.error(error);\n }\n\n const iFrameCheck = inIframe();\n\n // case outside live preview\n if (\n !iFrameCheck &&\n config.editButton.exclude?.find(\n (exclude) => exclude === \"outsideLivePreviewPortal\"\n )\n ) {\n return false;\n }\n\n // case if inside live preview\n if (\n iFrameCheck &&\n config.editButton.exclude?.find(\n (exclude) => exclude === \"insideLivePreviewPortal\"\n )\n ) {\n return false;\n } else if (iFrameCheck) {\n // case if inside visual builder\n if (config.windowType === \"builder\") {\n return false;\n }\n\n // case if independent site\n return true;\n }\n\n // Priority list => 1. cslpEditButton query value 2. Inside live preview 3. renderCslpButtonByDefault value selected by user\n return true;\n}\n\nexport function toggleEditButtonElement() {\n const render = shouldRenderEditButton();\n const exists = doesEditButtonExist();\n\n if (render && !exists) {\n LivePreviewEditButton.livePreviewEditButton =\n new LivePreviewEditButton();\n } else if (!render && exists) {\n LivePreviewEditButton.livePreviewEditButton?.destroy();\n }\n}\n\nexport function doesEditButtonExist() {\n return document.getElementById(EDIT_BUTTON_TOOLTIP_ID) !== null;\n}\n\nexport class LivePreviewEditButton {\n private tooltip: HTMLButtonElement | null = null;\n private typeOfCurrentChild: \"singular\" | \"multiple\" = \"singular\";\n private tooltipChild: {\n singular: HTMLDivElement | null;\n multiple: HTMLDivElement | null;\n } = {\n singular: null,\n multiple: null,\n };\n static livePreviewEditButton: LivePreviewEditButton | null = null;\n\n constructor() {\n this.createCslpTooltip = this.createCslpTooltip.bind(this);\n this.updateTooltipPosition = this.updateTooltipPosition.bind(this);\n this.addEditStyleOnHover = this.addEditStyleOnHover.bind(this);\n this.scrollHandler = this.scrollHandler.bind(this);\n this.generateRedirectUrl = this.generateRedirectUrl.bind(this);\n this.linkClickHandler = this.linkClickHandler.bind(this);\n this.destroy = this.destroy.bind(this);\n\n if (this.createCslpTooltip()) {\n this.updateTooltipPosition();\n\n window.addEventListener(\"scroll\", this.updateTooltipPosition);\n window.addEventListener(\"mouseover\", this.addEditStyleOnHover);\n }\n }\n\n private createCslpTooltip(): boolean {\n const editButton = Config.get().editButton;\n\n if (\n !document.getElementById(EDIT_BUTTON_TOOLTIP_ID) &&\n editButton.enable &&\n shouldRenderEditButton()\n ) {\n const tooltip = document.createElement(\"button\");\n this.tooltip = tooltip;\n\n this.tooltip.classList.add(cslpTagStyles()[\"cslp-tooltip\"]);\n this.tooltip.setAttribute(\"data-test-id\", \"cs-cslp-tooltip\");\n this.tooltip.id = EDIT_BUTTON_TOOLTIP_ID;\n\n window.document.body.insertAdjacentElement(\n \"beforeend\",\n this.tooltip\n );\n\n this.tooltipChild.singular = createSingularEditButton(\n this.scrollHandler\n );\n this.tooltipChild.multiple = createMultipleEditButton(\n this.scrollHandler,\n this.linkClickHandler\n );\n\n this.tooltip.appendChild(this.tooltipChild.singular);\n return true;\n }\n return false;\n }\n\n private updateTooltipPosition() {\n const editButton = Config.get().editButton;\n const elements = Config.get().elements;\n\n if (!elements.highlightedElement || !this.tooltip) return false;\n\n const currentRectOfElement =\n elements.highlightedElement.getBoundingClientRect();\n const currentRectOfParentOfElement =\n this.tooltip.parentElement?.getBoundingClientRect();\n\n if (currentRectOfElement && currentRectOfParentOfElement) {\n const editButtonPosition = getEditButtonPosition(\n elements.highlightedElement as HTMLElement,\n editButton.position\n );\n\n let upperBoundOfTooltip = editButtonPosition.upperBoundOfTooltip;\n const leftBoundOfTooltip = editButtonPosition.leftBoundOfTooltip;\n\n // if scrolled and element is still visible, make sure tooltip is also visible\n if (upperBoundOfTooltip < 0) {\n if (currentRectOfElement.top < 0)\n upperBoundOfTooltip = currentRectOfElement.top;\n else upperBoundOfTooltip = 0;\n }\n\n this.tooltip.style.top = upperBoundOfTooltip + \"px\";\n this.tooltip.style.zIndex =\n elements.highlightedElement.style.zIndex || \"200\";\n this.tooltip.style.left = leftBoundOfTooltip + \"px\";\n\n if (this.tooltipChild.singular && this.tooltipChild.multiple) {\n if (\n elements.highlightedElement.hasAttribute(\"href\") &&\n this.typeOfCurrentChild !== \"multiple\"\n ) {\n this.tooltip.innerHTML = \"\";\n this.tooltip.appendChild(this.tooltipChild.multiple);\n this.typeOfCurrentChild = \"multiple\";\n } else if (this.typeOfCurrentChild !== \"singular\") {\n this.tooltip.innerHTML = \"\";\n this.tooltip.appendChild(this.tooltipChild.singular);\n this.typeOfCurrentChild = \"singular\";\n }\n }\n return true;\n }\n\n return false;\n }\n\n private addEditStyleOnHover(e: MouseEvent) {\n const updateTooltipPosition: Parameters<typeof addCslpOutline>[\"1\"] = ({\n cslpTag,\n highlightedElement,\n }) => {\n if (this.updateTooltipPosition()) {\n this.tooltip?.setAttribute(\"current-data-cslp\", cslpTag);\n this.tooltip?.setAttribute(\n \"current-href\",\n highlightedElement.getAttribute(\"href\") ?? \"\"\n );\n }\n };\n\n const editButton = Config.get().editButton;\n const windowType = Config.get().windowType;\n\n if (\n (windowType === ILivePreviewWindowType.PREVIEW ||\n windowType === ILivePreviewWindowType.INDEPENDENT) &&\n editButton.enable\n ) {\n addCslpOutline(e, updateTooltipPosition);\n }\n }\n\n private scrollHandler() {\n if (!this.tooltip) return;\n\n const cslpTag = this.tooltip.getAttribute(\"current-data-cslp\");\n\n if (cslpTag) {\n const { content_type_uid, entry_uid, locale, variant, fieldPathWithIndex } =\n extractDetailsFromCslp(cslpTag);\n\n if (inIframe()) {\n livePreviewPostMessage?.send(\"scroll\", {\n field: fieldPathWithIndex,\n content_type_uid,\n entry_uid,\n variant,\n locale,\n });\n } else {\n try {\n // Redirect to Contentstack edit page\n const redirectUrl = this.generateRedirectUrl(\n content_type_uid,\n locale,\n entry_uid,\n variant,\n fieldPathWithIndex\n );\n\n window.open(redirectUrl, \"_blank\");\n } catch (error) {\n PublicLogger.error(error);\n }\n }\n }\n }\n\n /**\n * Generates the redirect URL for editing a specific entry in the Live Preview SDK.\n * @param content_type_uid - The UID of the content type.\n * @param locale - The locale of the entry (default: \"en-us\").\n * @param entry_uid - The UID of the entry.\n * @param preview_field - The field to be previewed.\n * @returns The redirect URL for editing the entry.\n */\n private generateRedirectUrl(\n content_type_uid: string,\n locale = \"en-us\",\n entry_uid: string,\n variant: string | undefined,\n preview_field: string\n ): string {\n const config = Config.get();\n\n if (!config.stackDetails.apiKey) {\n throw `To use edit tags, you must provide the stack API key. Specify the API key while initializing the Live Preview SDK.\n\n ContentstackLivePreview.init({\n ...,\n stackDetails: {\n apiKey: 'your-api-key'\n },\n ...\n })`;\n }\n\n if (!config.stackDetails.environment) {\n throw `To use edit tags, you must provide the preview environment. Specify the preview environment while initializing the Live Preview SDK.\n\n ContentstackLivePreview.init({\n ...,\n stackDetails: {\n environment: 'Your-environment'\n },\n ...\n })`;\n }\n\n const protocol = String(config.clientUrlParams.protocol);\n const host = String(config.clientUrlParams.host);\n const port = String(config.clientUrlParams.port);\n const environment = String(config.stackDetails.environment);\n const branch = String(config.stackDetails.branch || \"main\");\n\n let urlHash = `!/stack/${\n config.stackDetails.apiKey\n }/content-type/${content_type_uid}/${\n locale ?? \"en-us\"\n }/entry/${entry_uid}`;\n\n if (variant) {\n urlHash += `/variant/${variant}/edit`;\n } else {\n urlHash += `/edit`;\n }\n\n const url = new URL(`${protocol}://${host}`);\n url.port = port;\n url.hash = urlHash;\n if (config.stackDetails.branch) {\n url.searchParams.append(\"branch\", branch);\n }\n url.searchParams.append(\"preview-field\", preview_field);\n url.searchParams.append(\"preview-locale\", locale ?? \"en-us\");\n url.searchParams.append(\"preview-environment\", environment);\n\n return `${url.origin}/${url.hash}${url.search}`;\n }\n\n private linkClickHandler() {\n if (!this.tooltip) return;\n const hrefAttribute = this.tooltip.getAttribute(\"current-href\");\n\n if (hrefAttribute) {\n window.location.assign(hrefAttribute);\n }\n }\n\n /**\n * Destroys the edit button by removing event listeners and removing the tooltip.\n */\n destroy(): void {\n window.removeEventListener(\"scroll\", this.updateTooltipPosition);\n window.removeEventListener(\"mouseover\", this.addEditStyleOnHover);\n this.tooltip?.remove();\n }\n}\n\neffect(function handleWindowTypeChange() {\n // we need to specify when to run this effect.\n // here, we run it when the value of windowType changes\n if (typeof window === \"undefined\") return;\n Config.get().windowType;\n if (LivePreviewEditButton && !isOpeningInTimeline()) {\n toggleEditButtonElement();\n }\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAuB;AACvB,sBAAyB;AACzB,2BAAmB;AACnB,kBAAuD;AACvD,wBAA8B;AAC9B,oBAA6B;AAC7B,mBAGO;AACP,qCAAmC;AACnC,IAAAA,qBAAuC;AACvC,mBAAoC;AAEpC,SAAS,4BACL,uBACA,oBACmB;AACnB,QAAM,qBAA0C;AAAA,IAC5C,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,EACxB;AACA,QAAM,uBAAuB,sBAAsB,sBAAsB;AACzE,MAAI;AACA,UAAM,0BAA0B;AAAA,MAC5B,OAAO;AAAA,MACP,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,IACrB;AAEA,YAAQ,oBAAoB;AAAA,MACxB,KAAK;AACD,2BAAmB,sBACf,qBAAqB,MAAM,wBAAwB;AACvD,2BAAmB,qBACf,qBAAqB,QAAQ,IAC7B,wBAAwB,YACxB,qBAAqB;AACzB;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,MAAM,wBAAwB;AACvD,2BAAmB,qBACf,qBAAqB,QAAQ,wBAAwB;AACzD;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,MACrB,wBAAwB;AAC5B,2BAAmB,qBACf,qBAAqB,QACrB,wBAAwB;AAC5B;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,SACrB,wBAAwB;AAC5B,2BAAmB,qBACf,qBAAqB,OACrB,wBAAwB;AAC5B;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,SACrB,wBAAwB;AAC5B,2BAAmB,qBACf,qBAAqB,OACrB,wBAAwB;AAC5B;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,SACrB,wBAAwB;AAC5B,2BAAmB,qBACf,qBAAqB,QAAQ,IAC7B,wBAAwB,YACxB,qBAAqB;AACzB;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,SACrB,wBAAwB;AAC5B,2BAAmB,qBACf,qBAAqB,QAAQ,wBAAwB;AACzD;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,MACrB,wBAAwB;AAC5B,2BAAmB,qBACf,qBAAqB,OACrB,wBAAwB;AAC5B;AAAA;AAAA,MAEJ;AACI,2BAAmB,sBACf,qBAAqB,MAAM,wBAAwB;AACvD,2BAAmB,qBACf,qBAAqB,OACrB,wBAAwB;AAC5B;AAAA,IACR;AACA,WAAO;AAAA,EACX,SAAS,OAAO;AACZ,+BAAa,MAAM,KAAK;AACxB,WAAO;AAAA,EACX;AACJ;AAEO,IAAM,2BAA2B,CACpC,iBACiB;AACjB,QAAM,qBAAqB,SAAS,cAAc,KAAK;AACvD,qBAAmB,UAAU,IAAI,sBAAsB,UAAU;AACjE,qBAAmB;AAAA,IACf;AAAA,IACA;AAAA,EACJ;AACA,qBAAmB,YAAY;AAAA;AAAA;AAAA;AAK/B,qBAAmB,iBAAiB,SAAS,YAAY;AAEzD,SAAO;AACX;AAEO,IAAM,2BAA2B,CACpC,cACA,iBACiB;AACjB,QAAM,qBAAqB,SAAS,cAAc,KAAK;AACvD,qBAAmB,UAAU,IAAI,oBAAoB;AACrD,qBAAmB,aAAa,cAAc,MAAM;AACpD,qBAAmB;AAAA,IACf;AAAA,IACA;AAAA,EACJ;AACA,qBAAmB,YAAY;AAAA;AAAA;AAAA;AAK/B,qBAAmB,iBAAiB,SAAS,YAAY;AAEzD,QAAM,6BAA6B,SAAS,cAAc,KAAK;AAC/D,6BAA2B,UAAU,IAAI,oBAAoB;AAC7D,6BAA2B,aAAa,cAAc,YAAY;AAClE,6BAA2B;AAAA,IACvB;AAAA,IACA;AAAA,EACJ;AACA,6BAA2B,YAAY;AAAA;AAAA;AAAA;AAKvC,6BAA2B,iBAAiB,SAAS,YAAY;AAEjE,QAAM,uBAAuB,SAAS,uBAAuB;AAC7D,uBAAqB,YAAY,kBAAkB;AACnD,uBAAqB,YAAY,0BAA0B;AAE3D,QAAM,cAAc,SAAS,cAAc,KAAK;AAChD,cAAY,YAAY,oBAAoB;AAC5C,cAAY,UAAU,QAAI,iCAAc,EAAE,UAAU,CAAC;AAErD,SAAO;AACX;AAEO,SAAS,sBACZ,uBACA,iBACmB;AACnB,MAAI,CAAC;AACD,WAAO,EAAE,qBAAqB,GAAG,oBAAoB,EAAE;AAE3D,QAAM,qBAAqB,sBAAsB;AAAA,IAC7C;AAAA,EACJ;AACA,MAAI,oBAAoB;AACpB,WAAO;AAAA,MACH;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AAGA,SAAO;AAAA,IACH;AAAA,IACA,mBAAmB;AAAA,EACvB;AACJ;AAEO,SAAS,yBAAkC;AAC9C,QAAM,SAAS,qBAAAC,QAAO,IAAI;AAE1B,MAAI,CAAC,OAAO,WAAW,QAAQ;AAC3B,QAAI,OAAO,WAAW,WAAW;AAC7B,iCAAa;AAAA,QACT;AAAA,MACJ;AACJ,WAAO;AAAA,EACX;AAGA,MAAI;AACA,UAAM,kBAAkB,IAAI,IAAI,OAAO,SAAS,IAAI;AACpD,UAAM,uBACF,gBAAgB,aAAa,IAAI,cAAc;AAEnD,QACI,yBAAyB,QACzB,OAAO,WAAW,4BAA4B;AAE9C,aAAO,yBAAyB,UAAU,QAAQ;AAAA,EAC1D,SAAS,OAAO;AACZ,+BAAa,MAAM,KAAK;AAAA,EAC5B;AAEA,QAAM,kBAAc,0BAAS;AAG7B,MACI,CAAC,eACD,OAAO,WAAW,SAAS;AAAA,IACvB,CAAC,YAAY,YAAY;AAAA,EAC7B,GACF;AACE,WAAO;AAAA,EACX;AAGA,MACI,eACA,OAAO,WAAW,SAAS;AAAA,IACvB,CAAC,YAAY,YAAY;AAAA,EAC7B,GACF;AACE,WAAO;AAAA,EACX,WAAW,aAAa;AAEpB,QAAI,OAAO,eAAe,WAAW;AACjC,aAAO;AAAA,IACX;AAGA,WAAO;AAAA,EACX;AAGA,SAAO;AACX;AAEO,SAAS,0BAA0B;AACtC,QAAM,SAAS,uBAAuB;AACtC,QAAM,SAAS,oBAAoB;AAEnC,MAAI,UAAU,CAAC,QAAQ;AACnB,0BAAsB,wBAClB,IAAI,sBAAsB;AAAA,EAClC,WAAW,CAAC,UAAU,QAAQ;AAC1B,0BAAsB,uBAAuB,QAAQ;AAAA,EACzD;AACJ;AAEO,SAAS,sBAAsB;AAClC,SAAO,SAAS,eAAe,yCAAsB,MAAM;AAC/D;AAEO,IAAM,wBAAN,MAA4B;AAAA,EAY/B,cAAc;AAXd,SAAQ,UAAoC;AAC5C,SAAQ,qBAA8C;AACtD,SAAQ,eAGJ;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAII,SAAK,oBAAoB,KAAK,kBAAkB,KAAK,IAAI;AACzD,SAAK,wBAAwB,KAAK,sBAAsB,KAAK,IAAI;AACjE,SAAK,sBAAsB,KAAK,oBAAoB,KAAK,IAAI;AAC7D,SAAK,gBAAgB,KAAK,cAAc,KAAK,IAAI;AACjD,SAAK,sBAAsB,KAAK,oBAAoB,KAAK,IAAI;AAC7D,SAAK,mBAAmB,KAAK,iBAAiB,KAAK,IAAI;AACvD,SAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AAErC,QAAI,KAAK,kBAAkB,GAAG;AAC1B,WAAK,sBAAsB;AAE3B,aAAO,iBAAiB,UAAU,KAAK,qBAAqB;AAC5D,aAAO,iBAAiB,aAAa,KAAK,mBAAmB;AAAA,IACjE;AAAA,EACJ;AAAA,EAEQ,oBAA6B;AACjC,UAAM,aAAa,qBAAAA,QAAO,IAAI,EAAE;AAEhC,QACI,CAAC,SAAS,eAAe,yCAAsB,KAC/C,WAAW,UACX,uBAAuB,GACzB;AACE,YAAM,UAAU,SAAS,cAAc,QAAQ;AAC/C,WAAK,UAAU;AAEf,WAAK,QAAQ,UAAU,QAAI,iCAAc,EAAE,cAAc,CAAC;AAC1D,WAAK,QAAQ,aAAa,gBAAgB,iBAAiB;AAC3D,WAAK,QAAQ,KAAK;AAElB,aAAO,SAAS,KAAK;AAAA,QACjB;AAAA,QACA,KAAK;AAAA,MACT;AAEA,WAAK,aAAa,WAAW;AAAA,QACzB,KAAK;AAAA,MACT;AACA,WAAK,aAAa,WAAW;AAAA,QACzB,KAAK;AAAA,QACL,KAAK;AAAA,MACT;AAEA,WAAK,QAAQ,YAAY,KAAK,aAAa,QAAQ;AACnD,aAAO;AAAA,IACX;AACA,WAAO;AAAA,EACX;AAAA,EAEQ,wBAAwB;AAC5B,UAAM,aAAa,qBAAAA,QAAO,IAAI,EAAE;AAChC,UAAM,WAAW,qBAAAA,QAAO,IAAI,EAAE;AAE9B,QAAI,CAAC,SAAS,sBAAsB,CAAC,KAAK,QAAS,QAAO;AAE1D,UAAM,uBACF,SAAS,mBAAmB,sBAAsB;AACtD,UAAM,+BACF,KAAK,QAAQ,eAAe,sBAAsB;AAEtD,QAAI,wBAAwB,8BAA8B;AACtD,YAAM,qBAAqB;AAAA,QACvB,SAAS;AAAA,QACT,WAAW;AAAA,MACf;AAEA,UAAI,sBAAsB,mBAAmB;AAC7C,YAAM,qBAAqB,mBAAmB;AAG9C,UAAI,sBAAsB,GAAG;AACzB,YAAI,qBAAqB,MAAM;AAC3B,gCAAsB,qBAAqB;AAAA,YAC1C,uBAAsB;AAAA,MAC/B;AAEA,WAAK,QAAQ,MAAM,MAAM,sBAAsB;AAC/C,WAAK,QAAQ,MAAM,SACf,SAAS,mBAAmB,MAAM,UAAU;AAChD,WAAK,QAAQ,MAAM,OAAO,qBAAqB;AAE/C,UAAI,KAAK,aAAa,YAAY,KAAK,aAAa,UAAU;AAC1D,YACI,SAAS,mBAAmB,aAAa,MAAM,KAC/C,KAAK,uBAAuB,YAC9B;AACE,eAAK,QAAQ,YAAY;AACzB,eAAK,QAAQ,YAAY,KAAK,aAAa,QAAQ;AACnD,eAAK,qBAAqB;AAAA,QAC9B,WAAW,KAAK,uBAAuB,YAAY;AAC/C,eAAK,QAAQ,YAAY;AACzB,eAAK,QAAQ,YAAY,KAAK,aAAa,QAAQ;AACnD,eAAK,qBAAqB;AAAA,QAC9B;AAAA,MACJ;AACA,aAAO;AAAA,IACX;AAEA,WAAO;AAAA,EACX;AAAA,EAEQ,oBAAoB,GAAe;AACvC,UAAM,wBAAgE,CAAC;AAAA,MACnE;AAAA,MACA;AAAA,IACJ,MAAM;AACF,UAAI,KAAK,sBAAsB,GAAG;AAC9B,aAAK,SAAS,aAAa,qBAAqB,OAAO;AACvD,aAAK,SAAS;AAAA,UACV;AAAA,UACA,mBAAmB,aAAa,MAAM,KAAK;AAAA,QAC/C;AAAA,MACJ;AAAA,IACJ;AAEA,UAAM,aAAa,qBAAAA,QAAO,IAAI,EAAE;AAChC,UAAM,aAAa,qBAAAA,QAAO,IAAI,EAAE;AAEhC,SACK,eAAe,oCAAuB,WACnC,eAAe,oCAAuB,gBAC1C,WAAW,QACb;AACE,sCAAe,GAAG,qBAAqB;AAAA,IAC3C;AAAA,EACJ;AAAA,EAEQ,gBAAgB;AACpB,QAAI,CAAC,KAAK,QAAS;AAEnB,UAAM,UAAU,KAAK,QAAQ,aAAa,mBAAmB;AAE7D,QAAI,SAAS;AACT,YAAM,EAAE,kBAAkB,WAAW,QAAQ,SAAS,mBAAmB,QACrE,oCAAuB,OAAO;AAElC,cAAI,0BAAS,GAAG;AACZ,uCAAAC,SAAwB,KAAK,UAAU;AAAA,UACnC,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACJ,CAAC;AAAA,MACL,OAAO;AACH,YAAI;AAEA,gBAAM,cAAc,KAAK;AAAA,YACrB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACJ;AAEA,iBAAO,KAAK,aAAa,QAAQ;AAAA,QACrC,SAAS,OAAO;AACZ,qCAAa,MAAM,KAAK;AAAA,QAC5B;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUQ,oBACJ,kBACA,SAAS,SACT,WACA,SACA,eACM;AACN,UAAM,SAAS,qBAAAD,QAAO,IAAI;AAE1B,QAAI,CAAC,OAAO,aAAa,QAAQ;AAC7B,YAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASV;AAEA,QAAI,CAAC,OAAO,aAAa,aAAa;AAClC,YAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASV;AAEA,UAAM,WAAW,OAAO,OAAO,gBAAgB,QAAQ;AACvD,UAAM,OAAO,OAAO,OAAO,gBAAgB,IAAI;AAC/C,UAAM,OAAO,OAAO,OAAO,gBAAgB,IAAI;AAC/C,UAAM,cAAc,OAAO,OAAO,aAAa,WAAW;AAC1D,UAAM,SAAS,OAAO,OAAO,aAAa,UAAU,MAAM;AAE1D,QAAI,UAAU,WACV,OAAO,aAAa,MACxB,iBAAiB,gBAAgB,IAC7B,UAAU,OACd,UAAU,SAAS;AAEnB,QAAI,SAAS;AACT,iBAAW,YAAY,OAAO;AAAA,IAClC,OAAO;AACH,iBAAW;AAAA,IACf;AAEA,UAAM,MAAM,IAAI,IAAI,GAAG,QAAQ,MAAM,IAAI,EAAE;AAC3C,QAAI,OAAO;AACX,QAAI,OAAO;AACX,QAAI,OAAO,aAAa,QAAQ;AAC5B,UAAI,aAAa,OAAO,UAAU,MAAM;AAAA,IAC5C;AACA,QAAI,aAAa,OAAO,iBAAiB,aAAa;AACtD,QAAI,aAAa,OAAO,kBAAkB,UAAU,OAAO;AAC3D,QAAI,aAAa,OAAO,uBAAuB,WAAW;AAE1D,WAAO,GAAG,IAAI,MAAM,IAAI,IAAI,IAAI,GAAG,IAAI,MAAM;AAAA,EACjD;AAAA,EAEQ,mBAAmB;AACvB,QAAI,CAAC,KAAK,QAAS;AACnB,UAAM,gBAAgB,KAAK,QAAQ,aAAa,cAAc;AAE9D,QAAI,eAAe;AACf,aAAO,SAAS,OAAO,aAAa;AAAA,IACxC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,UAAgB;AACZ,WAAO,oBAAoB,UAAU,KAAK,qBAAqB;AAC/D,WAAO,oBAAoB,aAAa,KAAK,mBAAmB;AAChE,SAAK,SAAS,OAAO;AAAA,EACzB;AACJ;AA1Qa,sBAUF,wBAAsD;AAAA,IAkQjE,uBAAO,SAAS,yBAAyB;AAGrC,MAAI,OAAO,WAAW,YAAa;AACnC,uBAAAA,QAAO,IAAI,EAAE;AACb,MAAI,yBAAyB,KAAC,kCAAoB,GAAG;AACjD,4BAAwB;AAAA,EAC5B;AACJ,CAAC;","names":["import_editButton","Config","livePreviewPostMessage"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/livePreview/editButton/editButton.ts"],"sourcesContent":["import { effect } from \"@preact/signals\";\nimport { inIframe } from \"../../common/inIframe\";\nimport Config from \"../../configManager/configManager\";\nimport { addCslpOutline, extractDetailsFromCslp } from \"../../cslp\";\nimport { cslpTagStyles } from \"./editButton.style\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport {\n type IEditButtonPosition,\n ILivePreviewWindowType,\n} from \"../../types/types\";\nimport livePreviewPostMessage from \"../eventManager/livePreviewEventManager\";\nimport { EDIT_BUTTON_TOOLTIP_ID } from \"./editButton.constant\";\nimport { isOpeningInTimeline } from \"../../utils\";\n\nfunction calculateEditButtonPosition(\n currentHoveredElement: HTMLElement,\n cslpButtonPosition: string\n): IEditButtonPosition {\n const editButtonPosition: IEditButtonPosition = {\n upperBoundOfTooltip: 0,\n leftBoundOfTooltip: 0,\n };\n const currentRectOfElement = currentHoveredElement.getBoundingClientRect();\n try {\n const buttonMeasurementValues = {\n width: 72,\n halfWidth: 36,\n height: 40,\n basicMargin: 5,\n widthWithMargin: 77,\n };\n\n switch (cslpButtonPosition) {\n case \"top-center\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.width / 2 -\n buttonMeasurementValues.halfWidth +\n currentRectOfElement.left;\n break;\n case \"top-right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right - buttonMeasurementValues.width;\n break;\n case \"right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top -\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right +\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom-left\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom-center\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.width / 2 -\n buttonMeasurementValues.halfWidth +\n currentRectOfElement.left;\n break;\n case \"bottom-right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right - buttonMeasurementValues.width;\n break;\n case \"left\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top -\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.widthWithMargin;\n break;\n // default position => top, top-left or any other string\n default:\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n }\n return editButtonPosition;\n } catch (error) {\n PublicLogger.error(error);\n return editButtonPosition;\n }\n}\n\nexport const createSingularEditButton = (\n editCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n const singularEditButton = document.createElement(\"div\");\n singularEditButton.classList.add(\"cslp-tooltip-child\", \"singular\");\n singularEditButton.setAttribute(\n \"data-test-id\",\n \"cslp-singular-edit-button\"\n );\n singularEditButton.innerHTML = `<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n </svg>Edit`;\n\n singularEditButton.addEventListener(\"click\", editCallback);\n\n return singularEditButton;\n};\n\nexport const createMultipleEditButton = (\n editCallback: (e: MouseEvent) => void,\n linkCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n const multipleEditButton = document.createElement(\"div\");\n multipleEditButton.classList.add(\"cslp-tooltip-child\");\n multipleEditButton.setAttribute(\"data-title\", \"Edit\");\n multipleEditButton.setAttribute(\n \"data-test-id\",\n \"cslp-multiple-edit-button\"\n );\n multipleEditButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n </svg>`;\n\n multipleEditButton.addEventListener(\"click\", editCallback);\n\n const multipleExternalLinkButton = document.createElement(\"div\");\n multipleExternalLinkButton.classList.add(\"cslp-tooltip-child\");\n multipleExternalLinkButton.setAttribute(\"data-title\", \"Go to link\");\n multipleExternalLinkButton.setAttribute(\n \"data-test-id\",\n \"cslp-multiple-external-link-button\"\n );\n multipleExternalLinkButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.66654 2.66758H13.3332V13.3342H6.66654V16.0009H13.3332C14.0405 16.0009 14.7187 15.72 15.2188 15.2199C15.7189 14.7198 15.9999 14.0415 15.9999 13.3342V2.66758C15.9999 1.96034 15.7189 1.28206 15.2188 0.781964C14.7187 0.281867 14.0405 0.000915527 13.3332 0.000915527H2.66654C1.9593 0.000915527 1.28102 0.281867 0.780927 0.781964C0.280829 1.28206 -0.00012207 1.96034 -0.00012207 2.66758V9.33425H2.66654V2.66758Z\" fill=\"#718096\" />\n <path d=\"M6.94263 7.05734L0.999958 13L2.88529 14.8853L8.82796 8.94267L10.8853 11V5.00001H4.88529L6.94263 7.05734Z\" fill=\"#718096\" />\n </svg>`;\n\n multipleExternalLinkButton.addEventListener(\"click\", linkCallback);\n\n const multipleEditFragment = document.createDocumentFragment();\n multipleEditFragment.appendChild(multipleEditButton);\n multipleEditFragment.appendChild(multipleExternalLinkButton);\n\n const multipleDiv = document.createElement(\"div\");\n multipleDiv.appendChild(multipleEditFragment);\n multipleDiv.classList.add(cslpTagStyles()[\"multiple\"]);\n\n return multipleDiv;\n};\n\nexport function getEditButtonPosition(\n currentHoveredElement: HTMLElement | null,\n defaultPosition: string | undefined\n): IEditButtonPosition {\n if (!currentHoveredElement)\n return { upperBoundOfTooltip: 0, leftBoundOfTooltip: 0 };\n\n const cslpButtonPosition = currentHoveredElement.getAttribute(\n \"data-cslp-button-position\"\n );\n if (cslpButtonPosition) {\n return calculateEditButtonPosition(\n currentHoveredElement,\n cslpButtonPosition\n );\n }\n\n // NOTE: position \"top\" and \"top-left\" will be the position of edit button if no default position passed in config\n return calculateEditButtonPosition(\n currentHoveredElement,\n defaultPosition || \"top\"\n );\n}\n\nexport function shouldRenderEditButton(): boolean {\n const config = Config.get();\n\n if (!config.editButton.enable) {\n if (config.editButton.enable === undefined)\n PublicLogger.error(\n \"enable key is required inside editButton object\"\n );\n return false;\n }\n\n // return boolean in case of cslp-buttons query added in url\n try {\n const currentLocation = new URL(window.location.href);\n const cslpButtonQueryValue =\n currentLocation.searchParams.get(\"cslp-buttons\");\n\n if (\n cslpButtonQueryValue !== null &&\n config.editButton.includeByQueryParameter !== false\n )\n return cslpButtonQueryValue === \"false\" ? false : true;\n } catch (error) {\n PublicLogger.error(error);\n }\n\n const iFrameCheck = inIframe();\n\n // case outside live preview\n if (\n !iFrameCheck &&\n config.editButton.exclude?.find(\n (exclude) => exclude === \"outsideLivePreviewPortal\"\n )\n ) {\n return false;\n }\n\n // case if inside live preview\n if (\n iFrameCheck &&\n config.editButton.exclude?.find(\n (exclude) => exclude === \"insideLivePreviewPortal\"\n )\n ) {\n return false;\n } else if (iFrameCheck) {\n // case if inside visual builder\n if (config.windowType === \"builder\") {\n return false;\n }\n\n // case if independent site\n return true;\n }\n\n // Priority list => 1. cslpEditButton query value 2. Inside live preview 3. renderCslpButtonByDefault value selected by user\n return true;\n}\n\nexport function toggleEditButtonElement() {\n const render = shouldRenderEditButton();\n const exists = doesEditButtonExist();\n\n if (render && !exists) {\n LivePreviewEditButton.livePreviewEditButton =\n new LivePreviewEditButton();\n } else if (!render && exists) {\n LivePreviewEditButton.livePreviewEditButton?.destroy();\n }\n}\n\nexport function doesEditButtonExist() {\n return document.getElementById(EDIT_BUTTON_TOOLTIP_ID) !== null;\n}\n\nexport class LivePreviewEditButton {\n private tooltip: HTMLButtonElement | null = null;\n private typeOfCurrentChild: \"singular\" | \"multiple\" = \"singular\";\n private tooltipChild: {\n singular: HTMLDivElement | null;\n multiple: HTMLDivElement | null;\n } = {\n singular: null,\n multiple: null,\n };\n static livePreviewEditButton: LivePreviewEditButton | null = null;\n\n constructor() {\n this.createCslpTooltip = this.createCslpTooltip.bind(this);\n this.updateTooltipPosition = this.updateTooltipPosition.bind(this);\n this.addEditStyleOnHover = this.addEditStyleOnHover.bind(this);\n this.scrollHandler = this.scrollHandler.bind(this);\n this.generateRedirectUrl = this.generateRedirectUrl.bind(this);\n this.linkClickHandler = this.linkClickHandler.bind(this);\n this.destroy = this.destroy.bind(this);\n\n if (this.createCslpTooltip()) {\n this.updateTooltipPosition();\n\n window.addEventListener(\"scroll\", this.updateTooltipPosition);\n window.addEventListener(\"mouseover\", this.addEditStyleOnHover);\n }\n }\n\n private createCslpTooltip(): boolean {\n const editButton = Config.get().editButton;\n\n if (\n !document.getElementById(EDIT_BUTTON_TOOLTIP_ID) &&\n editButton.enable &&\n shouldRenderEditButton()\n ) {\n const tooltip = document.createElement(\"button\");\n this.tooltip = tooltip;\n\n this.tooltip.classList.add(cslpTagStyles()[\"cslp-tooltip\"]);\n this.tooltip.setAttribute(\"data-test-id\", \"cs-cslp-tooltip\");\n this.tooltip.id = EDIT_BUTTON_TOOLTIP_ID;\n\n window.document.body.insertAdjacentElement(\n \"beforeend\",\n this.tooltip\n );\n\n this.tooltipChild.singular = createSingularEditButton(\n this.scrollHandler\n );\n this.tooltipChild.multiple = createMultipleEditButton(\n this.scrollHandler,\n this.linkClickHandler\n );\n\n this.tooltip.appendChild(this.tooltipChild.singular);\n return true;\n }\n return false;\n }\n\n private updateTooltipPosition() {\n if (!document.getElementById(\"cslp-tooltip\")) {\n this.createCslpTooltip();\n }\n const editButton = Config.get().editButton;\n const elements = Config.get().elements;\n\n if (!elements.highlightedElement || !this.tooltip) return false;\n\n const currentRectOfElement =\n elements.highlightedElement.getBoundingClientRect();\n const currentRectOfParentOfElement =\n this.tooltip.parentElement?.getBoundingClientRect();\n\n if (currentRectOfElement && currentRectOfParentOfElement) {\n const editButtonPosition = getEditButtonPosition(\n elements.highlightedElement as HTMLElement,\n editButton.position\n );\n\n let upperBoundOfTooltip = editButtonPosition.upperBoundOfTooltip;\n const leftBoundOfTooltip = editButtonPosition.leftBoundOfTooltip;\n\n // if scrolled and element is still visible, make sure tooltip is also visible\n if (upperBoundOfTooltip < 0) {\n if (currentRectOfElement.top < 0)\n upperBoundOfTooltip = currentRectOfElement.top;\n else upperBoundOfTooltip = 0;\n }\n\n this.tooltip.style.top = upperBoundOfTooltip + \"px\";\n this.tooltip.style.zIndex =\n elements.highlightedElement.style.zIndex || \"200\";\n this.tooltip.style.left = leftBoundOfTooltip + \"px\";\n\n if (this.tooltipChild.singular && this.tooltipChild.multiple) {\n if (\n elements.highlightedElement.hasAttribute(\"href\") &&\n this.typeOfCurrentChild !== \"multiple\"\n ) {\n this.tooltip.innerHTML = \"\";\n this.tooltip.appendChild(this.tooltipChild.multiple);\n this.typeOfCurrentChild = \"multiple\";\n } else if (this.typeOfCurrentChild !== \"singular\") {\n this.tooltip.innerHTML = \"\";\n this.tooltip.appendChild(this.tooltipChild.singular);\n this.typeOfCurrentChild = \"singular\";\n }\n }\n return true;\n }\n\n return false;\n }\n\n private addEditStyleOnHover(e: MouseEvent) {\n const updateTooltipPosition: Parameters<typeof addCslpOutline>[\"1\"] = ({\n cslpTag,\n highlightedElement,\n }) => {\n if (this.updateTooltipPosition()) {\n this.tooltip?.setAttribute(\"current-data-cslp\", cslpTag);\n this.tooltip?.setAttribute(\n \"current-href\",\n highlightedElement.getAttribute(\"href\") ?? \"\"\n );\n }\n };\n\n const editButton = Config.get().editButton;\n const windowType = Config.get().windowType;\n\n if (\n (windowType === ILivePreviewWindowType.PREVIEW ||\n windowType === ILivePreviewWindowType.INDEPENDENT) &&\n editButton.enable\n ) {\n addCslpOutline(e, updateTooltipPosition);\n }\n }\n\n private scrollHandler() {\n if (!this.tooltip) return;\n\n const cslpTag = this.tooltip.getAttribute(\"current-data-cslp\");\n\n if (cslpTag) {\n const { content_type_uid, entry_uid, locale, variant, fieldPathWithIndex } =\n extractDetailsFromCslp(cslpTag);\n\n if (inIframe()) {\n livePreviewPostMessage?.send(\"scroll\", {\n field: fieldPathWithIndex,\n content_type_uid,\n entry_uid,\n variant,\n locale,\n });\n } else {\n try {\n // Redirect to Contentstack edit page\n const redirectUrl = this.generateRedirectUrl(\n content_type_uid,\n locale,\n entry_uid,\n variant,\n fieldPathWithIndex\n );\n\n window.open(redirectUrl, \"_blank\");\n } catch (error) {\n PublicLogger.error(error);\n }\n }\n }\n }\n\n /**\n * Generates the redirect URL for editing a specific entry in the Live Preview SDK.\n * @param content_type_uid - The UID of the content type.\n * @param locale - The locale of the entry (default: \"en-us\").\n * @param entry_uid - The UID of the entry.\n * @param preview_field - The field to be previewed.\n * @returns The redirect URL for editing the entry.\n */\n private generateRedirectUrl(\n content_type_uid: string,\n locale = \"en-us\",\n entry_uid: string,\n variant: string | undefined,\n preview_field: string\n ): string {\n const config = Config.get();\n\n if (!config.stackDetails.apiKey) {\n throw `To use edit tags, you must provide the stack API key. Specify the API key while initializing the Live Preview SDK.\n\n ContentstackLivePreview.init({\n ...,\n stackDetails: {\n apiKey: 'your-api-key'\n },\n ...\n })`;\n }\n\n if (!config.stackDetails.environment) {\n throw `To use edit tags, you must provide the preview environment. Specify the preview environment while initializing the Live Preview SDK.\n\n ContentstackLivePreview.init({\n ...,\n stackDetails: {\n environment: 'Your-environment'\n },\n ...\n })`;\n }\n\n const protocol = String(config.clientUrlParams.protocol);\n const host = String(config.clientUrlParams.host);\n const port = String(config.clientUrlParams.port);\n const environment = String(config.stackDetails.environment);\n const branch = String(config.stackDetails.branch || \"main\");\n\n let urlHash = `!/stack/${\n config.stackDetails.apiKey\n }/content-type/${content_type_uid}/${\n locale ?? \"en-us\"\n }/entry/${entry_uid}`;\n\n if (variant) {\n urlHash += `/variant/${variant}/edit`;\n } else {\n urlHash += `/edit`;\n }\n\n const url = new URL(`${protocol}://${host}`);\n url.port = port;\n url.hash = urlHash;\n if (config.stackDetails.branch) {\n url.searchParams.append(\"branch\", branch);\n }\n url.searchParams.append(\"preview-field\", preview_field);\n url.searchParams.append(\"preview-locale\", locale ?? \"en-us\");\n url.searchParams.append(\"preview-environment\", environment);\n\n return `${url.origin}/${url.hash}${url.search}`;\n }\n\n private linkClickHandler() {\n if (!this.tooltip) return;\n const hrefAttribute = this.tooltip.getAttribute(\"current-href\");\n\n if (hrefAttribute) {\n window.location.assign(hrefAttribute);\n }\n }\n\n /**\n * Destroys the edit button by removing event listeners and removing the tooltip.\n */\n destroy(): void {\n window.removeEventListener(\"scroll\", this.updateTooltipPosition);\n window.removeEventListener(\"mouseover\", this.addEditStyleOnHover);\n this.tooltip?.remove();\n }\n}\n\neffect(function handleWindowTypeChange() {\n // we need to specify when to run this effect.\n // here, we run it when the value of windowType changes\n if (typeof window === \"undefined\") return;\n Config.get().windowType;\n if (LivePreviewEditButton && !isOpeningInTimeline()) {\n toggleEditButtonElement();\n }\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAuB;AACvB,sBAAyB;AACzB,2BAAmB;AACnB,kBAAuD;AACvD,wBAA8B;AAC9B,oBAA6B;AAC7B,mBAGO;AACP,qCAAmC;AACnC,IAAAA,qBAAuC;AACvC,mBAAoC;AAEpC,SAAS,4BACL,uBACA,oBACmB;AACnB,QAAM,qBAA0C;AAAA,IAC5C,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,EACxB;AACA,QAAM,uBAAuB,sBAAsB,sBAAsB;AACzE,MAAI;AACA,UAAM,0BAA0B;AAAA,MAC5B,OAAO;AAAA,MACP,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,IACrB;AAEA,YAAQ,oBAAoB;AAAA,MACxB,KAAK;AACD,2BAAmB,sBACf,qBAAqB,MAAM,wBAAwB;AACvD,2BAAmB,qBACf,qBAAqB,QAAQ,IAC7B,wBAAwB,YACxB,qBAAqB;AACzB;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,MAAM,wBAAwB;AACvD,2BAAmB,qBACf,qBAAqB,QAAQ,wBAAwB;AACzD;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,MACrB,wBAAwB;AAC5B,2BAAmB,qBACf,qBAAqB,QACrB,wBAAwB;AAC5B;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,SACrB,wBAAwB;AAC5B,2BAAmB,qBACf,qBAAqB,OACrB,wBAAwB;AAC5B;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,SACrB,wBAAwB;AAC5B,2BAAmB,qBACf,qBAAqB,OACrB,wBAAwB;AAC5B;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,SACrB,wBAAwB;AAC5B,2BAAmB,qBACf,qBAAqB,QAAQ,IAC7B,wBAAwB,YACxB,qBAAqB;AACzB;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,SACrB,wBAAwB;AAC5B,2BAAmB,qBACf,qBAAqB,QAAQ,wBAAwB;AACzD;AAAA,MACJ,KAAK;AACD,2BAAmB,sBACf,qBAAqB,MACrB,wBAAwB;AAC5B,2BAAmB,qBACf,qBAAqB,OACrB,wBAAwB;AAC5B;AAAA;AAAA,MAEJ;AACI,2BAAmB,sBACf,qBAAqB,MAAM,wBAAwB;AACvD,2BAAmB,qBACf,qBAAqB,OACrB,wBAAwB;AAC5B;AAAA,IACR;AACA,WAAO;AAAA,EACX,SAAS,OAAO;AACZ,+BAAa,MAAM,KAAK;AACxB,WAAO;AAAA,EACX;AACJ;AAEO,IAAM,2BAA2B,CACpC,iBACiB;AACjB,QAAM,qBAAqB,SAAS,cAAc,KAAK;AACvD,qBAAmB,UAAU,IAAI,sBAAsB,UAAU;AACjE,qBAAmB;AAAA,IACf;AAAA,IACA;AAAA,EACJ;AACA,qBAAmB,YAAY;AAAA;AAAA;AAAA;AAK/B,qBAAmB,iBAAiB,SAAS,YAAY;AAEzD,SAAO;AACX;AAEO,IAAM,2BAA2B,CACpC,cACA,iBACiB;AACjB,QAAM,qBAAqB,SAAS,cAAc,KAAK;AACvD,qBAAmB,UAAU,IAAI,oBAAoB;AACrD,qBAAmB,aAAa,cAAc,MAAM;AACpD,qBAAmB;AAAA,IACf;AAAA,IACA;AAAA,EACJ;AACA,qBAAmB,YAAY;AAAA;AAAA;AAAA;AAK/B,qBAAmB,iBAAiB,SAAS,YAAY;AAEzD,QAAM,6BAA6B,SAAS,cAAc,KAAK;AAC/D,6BAA2B,UAAU,IAAI,oBAAoB;AAC7D,6BAA2B,aAAa,cAAc,YAAY;AAClE,6BAA2B;AAAA,IACvB;AAAA,IACA;AAAA,EACJ;AACA,6BAA2B,YAAY;AAAA;AAAA;AAAA;AAKvC,6BAA2B,iBAAiB,SAAS,YAAY;AAEjE,QAAM,uBAAuB,SAAS,uBAAuB;AAC7D,uBAAqB,YAAY,kBAAkB;AACnD,uBAAqB,YAAY,0BAA0B;AAE3D,QAAM,cAAc,SAAS,cAAc,KAAK;AAChD,cAAY,YAAY,oBAAoB;AAC5C,cAAY,UAAU,QAAI,iCAAc,EAAE,UAAU,CAAC;AAErD,SAAO;AACX;AAEO,SAAS,sBACZ,uBACA,iBACmB;AACnB,MAAI,CAAC;AACD,WAAO,EAAE,qBAAqB,GAAG,oBAAoB,EAAE;AAE3D,QAAM,qBAAqB,sBAAsB;AAAA,IAC7C;AAAA,EACJ;AACA,MAAI,oBAAoB;AACpB,WAAO;AAAA,MACH;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AAGA,SAAO;AAAA,IACH;AAAA,IACA,mBAAmB;AAAA,EACvB;AACJ;AAEO,SAAS,yBAAkC;AAC9C,QAAM,SAAS,qBAAAC,QAAO,IAAI;AAE1B,MAAI,CAAC,OAAO,WAAW,QAAQ;AAC3B,QAAI,OAAO,WAAW,WAAW;AAC7B,iCAAa;AAAA,QACT;AAAA,MACJ;AACJ,WAAO;AAAA,EACX;AAGA,MAAI;AACA,UAAM,kBAAkB,IAAI,IAAI,OAAO,SAAS,IAAI;AACpD,UAAM,uBACF,gBAAgB,aAAa,IAAI,cAAc;AAEnD,QACI,yBAAyB,QACzB,OAAO,WAAW,4BAA4B;AAE9C,aAAO,yBAAyB,UAAU,QAAQ;AAAA,EAC1D,SAAS,OAAO;AACZ,+BAAa,MAAM,KAAK;AAAA,EAC5B;AAEA,QAAM,kBAAc,0BAAS;AAG7B,MACI,CAAC,eACD,OAAO,WAAW,SAAS;AAAA,IACvB,CAAC,YAAY,YAAY;AAAA,EAC7B,GACF;AACE,WAAO;AAAA,EACX;AAGA,MACI,eACA,OAAO,WAAW,SAAS;AAAA,IACvB,CAAC,YAAY,YAAY;AAAA,EAC7B,GACF;AACE,WAAO;AAAA,EACX,WAAW,aAAa;AAEpB,QAAI,OAAO,eAAe,WAAW;AACjC,aAAO;AAAA,IACX;AAGA,WAAO;AAAA,EACX;AAGA,SAAO;AACX;AAEO,SAAS,0BAA0B;AACtC,QAAM,SAAS,uBAAuB;AACtC,QAAM,SAAS,oBAAoB;AAEnC,MAAI,UAAU,CAAC,QAAQ;AACnB,0BAAsB,wBAClB,IAAI,sBAAsB;AAAA,EAClC,WAAW,CAAC,UAAU,QAAQ;AAC1B,0BAAsB,uBAAuB,QAAQ;AAAA,EACzD;AACJ;AAEO,SAAS,sBAAsB;AAClC,SAAO,SAAS,eAAe,yCAAsB,MAAM;AAC/D;AAEO,IAAM,wBAAN,MAA4B;AAAA,EAY/B,cAAc;AAXd,SAAQ,UAAoC;AAC5C,SAAQ,qBAA8C;AACtD,SAAQ,eAGJ;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAII,SAAK,oBAAoB,KAAK,kBAAkB,KAAK,IAAI;AACzD,SAAK,wBAAwB,KAAK,sBAAsB,KAAK,IAAI;AACjE,SAAK,sBAAsB,KAAK,oBAAoB,KAAK,IAAI;AAC7D,SAAK,gBAAgB,KAAK,cAAc,KAAK,IAAI;AACjD,SAAK,sBAAsB,KAAK,oBAAoB,KAAK,IAAI;AAC7D,SAAK,mBAAmB,KAAK,iBAAiB,KAAK,IAAI;AACvD,SAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AAErC,QAAI,KAAK,kBAAkB,GAAG;AAC1B,WAAK,sBAAsB;AAE3B,aAAO,iBAAiB,UAAU,KAAK,qBAAqB;AAC5D,aAAO,iBAAiB,aAAa,KAAK,mBAAmB;AAAA,IACjE;AAAA,EACJ;AAAA,EAEQ,oBAA6B;AACjC,UAAM,aAAa,qBAAAA,QAAO,IAAI,EAAE;AAEhC,QACI,CAAC,SAAS,eAAe,yCAAsB,KAC/C,WAAW,UACX,uBAAuB,GACzB;AACE,YAAM,UAAU,SAAS,cAAc,QAAQ;AAC/C,WAAK,UAAU;AAEf,WAAK,QAAQ,UAAU,QAAI,iCAAc,EAAE,cAAc,CAAC;AAC1D,WAAK,QAAQ,aAAa,gBAAgB,iBAAiB;AAC3D,WAAK,QAAQ,KAAK;AAElB,aAAO,SAAS,KAAK;AAAA,QACjB;AAAA,QACA,KAAK;AAAA,MACT;AAEA,WAAK,aAAa,WAAW;AAAA,QACzB,KAAK;AAAA,MACT;AACA,WAAK,aAAa,WAAW;AAAA,QACzB,KAAK;AAAA,QACL,KAAK;AAAA,MACT;AAEA,WAAK,QAAQ,YAAY,KAAK,aAAa,QAAQ;AACnD,aAAO;AAAA,IACX;AACA,WAAO;AAAA,EACX;AAAA,EAEQ,wBAAwB;AAC5B,QAAI,CAAC,SAAS,eAAe,cAAc,GAAG;AAC1C,WAAK,kBAAkB;AAAA,IAC3B;AACA,UAAM,aAAa,qBAAAA,QAAO,IAAI,EAAE;AAChC,UAAM,WAAW,qBAAAA,QAAO,IAAI,EAAE;AAE9B,QAAI,CAAC,SAAS,sBAAsB,CAAC,KAAK,QAAS,QAAO;AAE1D,UAAM,uBACF,SAAS,mBAAmB,sBAAsB;AACtD,UAAM,+BACF,KAAK,QAAQ,eAAe,sBAAsB;AAEtD,QAAI,wBAAwB,8BAA8B;AACtD,YAAM,qBAAqB;AAAA,QACvB,SAAS;AAAA,QACT,WAAW;AAAA,MACf;AAEA,UAAI,sBAAsB,mBAAmB;AAC7C,YAAM,qBAAqB,mBAAmB;AAG9C,UAAI,sBAAsB,GAAG;AACzB,YAAI,qBAAqB,MAAM;AAC3B,gCAAsB,qBAAqB;AAAA,YAC1C,uBAAsB;AAAA,MAC/B;AAEA,WAAK,QAAQ,MAAM,MAAM,sBAAsB;AAC/C,WAAK,QAAQ,MAAM,SACf,SAAS,mBAAmB,MAAM,UAAU;AAChD,WAAK,QAAQ,MAAM,OAAO,qBAAqB;AAE/C,UAAI,KAAK,aAAa,YAAY,KAAK,aAAa,UAAU;AAC1D,YACI,SAAS,mBAAmB,aAAa,MAAM,KAC/C,KAAK,uBAAuB,YAC9B;AACE,eAAK,QAAQ,YAAY;AACzB,eAAK,QAAQ,YAAY,KAAK,aAAa,QAAQ;AACnD,eAAK,qBAAqB;AAAA,QAC9B,WAAW,KAAK,uBAAuB,YAAY;AAC/C,eAAK,QAAQ,YAAY;AACzB,eAAK,QAAQ,YAAY,KAAK,aAAa,QAAQ;AACnD,eAAK,qBAAqB;AAAA,QAC9B;AAAA,MACJ;AACA,aAAO;AAAA,IACX;AAEA,WAAO;AAAA,EACX;AAAA,EAEQ,oBAAoB,GAAe;AACvC,UAAM,wBAAgE,CAAC;AAAA,MACnE;AAAA,MACA;AAAA,IACJ,MAAM;AACF,UAAI,KAAK,sBAAsB,GAAG;AAC9B,aAAK,SAAS,aAAa,qBAAqB,OAAO;AACvD,aAAK,SAAS;AAAA,UACV;AAAA,UACA,mBAAmB,aAAa,MAAM,KAAK;AAAA,QAC/C;AAAA,MACJ;AAAA,IACJ;AAEA,UAAM,aAAa,qBAAAA,QAAO,IAAI,EAAE;AAChC,UAAM,aAAa,qBAAAA,QAAO,IAAI,EAAE;AAEhC,SACK,eAAe,oCAAuB,WACnC,eAAe,oCAAuB,gBAC1C,WAAW,QACb;AACE,sCAAe,GAAG,qBAAqB;AAAA,IAC3C;AAAA,EACJ;AAAA,EAEQ,gBAAgB;AACpB,QAAI,CAAC,KAAK,QAAS;AAEnB,UAAM,UAAU,KAAK,QAAQ,aAAa,mBAAmB;AAE7D,QAAI,SAAS;AACT,YAAM,EAAE,kBAAkB,WAAW,QAAQ,SAAS,mBAAmB,QACrE,oCAAuB,OAAO;AAElC,cAAI,0BAAS,GAAG;AACZ,uCAAAC,SAAwB,KAAK,UAAU;AAAA,UACnC,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACJ,CAAC;AAAA,MACL,OAAO;AACH,YAAI;AAEA,gBAAM,cAAc,KAAK;AAAA,YACrB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACJ;AAEA,iBAAO,KAAK,aAAa,QAAQ;AAAA,QACrC,SAAS,OAAO;AACZ,qCAAa,MAAM,KAAK;AAAA,QAC5B;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUQ,oBACJ,kBACA,SAAS,SACT,WACA,SACA,eACM;AACN,UAAM,SAAS,qBAAAD,QAAO,IAAI;AAE1B,QAAI,CAAC,OAAO,aAAa,QAAQ;AAC7B,YAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASV;AAEA,QAAI,CAAC,OAAO,aAAa,aAAa;AAClC,YAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASV;AAEA,UAAM,WAAW,OAAO,OAAO,gBAAgB,QAAQ;AACvD,UAAM,OAAO,OAAO,OAAO,gBAAgB,IAAI;AAC/C,UAAM,OAAO,OAAO,OAAO,gBAAgB,IAAI;AAC/C,UAAM,cAAc,OAAO,OAAO,aAAa,WAAW;AAC1D,UAAM,SAAS,OAAO,OAAO,aAAa,UAAU,MAAM;AAE1D,QAAI,UAAU,WACV,OAAO,aAAa,MACxB,iBAAiB,gBAAgB,IAC7B,UAAU,OACd,UAAU,SAAS;AAEnB,QAAI,SAAS;AACT,iBAAW,YAAY,OAAO;AAAA,IAClC,OAAO;AACH,iBAAW;AAAA,IACf;AAEA,UAAM,MAAM,IAAI,IAAI,GAAG,QAAQ,MAAM,IAAI,EAAE;AAC3C,QAAI,OAAO;AACX,QAAI,OAAO;AACX,QAAI,OAAO,aAAa,QAAQ;AAC5B,UAAI,aAAa,OAAO,UAAU,MAAM;AAAA,IAC5C;AACA,QAAI,aAAa,OAAO,iBAAiB,aAAa;AACtD,QAAI,aAAa,OAAO,kBAAkB,UAAU,OAAO;AAC3D,QAAI,aAAa,OAAO,uBAAuB,WAAW;AAE1D,WAAO,GAAG,IAAI,MAAM,IAAI,IAAI,IAAI,GAAG,IAAI,MAAM;AAAA,EACjD;AAAA,EAEQ,mBAAmB;AACvB,QAAI,CAAC,KAAK,QAAS;AACnB,UAAM,gBAAgB,KAAK,QAAQ,aAAa,cAAc;AAE9D,QAAI,eAAe;AACf,aAAO,SAAS,OAAO,aAAa;AAAA,IACxC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKA,UAAgB;AACZ,WAAO,oBAAoB,UAAU,KAAK,qBAAqB;AAC/D,WAAO,oBAAoB,aAAa,KAAK,mBAAmB;AAChE,SAAK,SAAS,OAAO;AAAA,EACzB;AACJ;AA7Qa,sBAUF,wBAAsD;AAAA,IAqQjE,uBAAO,SAAS,yBAAyB;AAGrC,MAAI,OAAO,WAAW,YAAa;AACnC,uBAAAA,QAAO,IAAI,EAAE;AACb,MAAI,yBAAyB,KAAC,kCAAoB,GAAG;AACjD,4BAAwB;AAAA,EAC5B;AACJ,CAAC;","names":["import_editButton","Config","livePreviewPostMessage"]}
|
|
@@ -229,6 +229,9 @@ var LivePreviewEditButton = class {
|
|
|
229
229
|
return false;
|
|
230
230
|
}
|
|
231
231
|
updateTooltipPosition() {
|
|
232
|
+
if (!document.getElementById("cslp-tooltip")) {
|
|
233
|
+
this.createCslpTooltip();
|
|
234
|
+
}
|
|
232
235
|
const editButton = Config.get().editButton;
|
|
233
236
|
const elements = Config.get().elements;
|
|
234
237
|
if (!elements.highlightedElement || !this.tooltip) return false;
|