@contentstack/live-preview-utils 2.0.3 → 3.0.0

package/dist/modern/visualBuilder/generators/generateOverlay.cjs

@@ -0,0 +1,191 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/generators/generateOverlay.tsx
+var generateOverlay_exports = {};
+__export(generateOverlay_exports, {
+  addFocusOverlay: () => addFocusOverlay,
+  hideFocusOverlay: () => hideFocusOverlay,
+  hideOverlay: () => hideOverlay,
+  sendFieldEvent: () => sendFieldEvent
+});
+module.exports = __toCommonJS(generateOverlay_exports);
+var import_cslpdata = require("../../cslp/cslpdata.cjs");
+var import_handleIndividualFields = require("../utils/handleIndividualFields.cjs");
+var import_visualBuilderPostMessage = __toESM(require("../utils/visualBuilderPostMessage.cjs"), 1);
+var import_postMessage = require("../utils/types/postMessage.types.cjs");
+var import__ = require("../index.cjs");
+var import_fieldSchemaMap = require("../utils/fieldSchemaMap.cjs");
+var import_types = require("../utils/types/index.types.cjs");
+var import_getFieldType = require("../utils/getFieldType.cjs");
+var import_getMultilinePlaintext = require("../utils/getMultilinePlaintext.cjs");
+var import_generateHighlightedComment = require("./generateHighlightedComment.cjs");
+function addFocusOverlay(targetElement, focusOverlayWrapper, disabled) {
+  const targetElementDimension = targetElement.getBoundingClientRect();
+  if (targetElementDimension.width === 0 || targetElementDimension.height === 0)
+    return;
+  focusOverlayWrapper.classList.add("visible");
+  const distanceFromTop = targetElementDimension.top + window.scrollY;
+  const topOverlayDOM = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--top"
+  );
+  if (topOverlayDOM) {
+    topOverlayDOM.style.top = "0";
+    topOverlayDOM.style.left = "0";
+    topOverlayDOM.style.width = "100%";
+    topOverlayDOM.style.height = `calc(${distanceFromTop}px)`;
+  }
+  const bottomOverlayDOM = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--bottom"
+  );
+  if (bottomOverlayDOM) {
+    bottomOverlayDOM.style.top = `${targetElementDimension.bottom + window.scrollY}px`;
+    bottomOverlayDOM.style.height = `${window.document.body.scrollHeight - targetElementDimension.bottom - window.scrollY}px`;
+    bottomOverlayDOM.style.left = "0";
+    bottomOverlayDOM.style.width = "100%";
+  }
+  const leftOverlayDOM = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--left"
+  );
+  if (leftOverlayDOM) {
+    leftOverlayDOM.style.left = "0";
+    leftOverlayDOM.style.top = `${distanceFromTop}px`;
+    leftOverlayDOM.style.height = `${targetElementDimension.height}px`;
+    leftOverlayDOM.style.width = `${targetElementDimension.left}px`;
+  }
+  const rightOverlayDOM = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--right"
+  );
+  if (rightOverlayDOM) {
+    rightOverlayDOM.style.left = `${targetElementDimension.right}px`;
+    rightOverlayDOM.style.top = `${distanceFromTop}px`;
+    rightOverlayDOM.style.height = `${targetElementDimension.height}px`;
+    rightOverlayDOM.style.width = `${document.documentElement.clientWidth - targetElementDimension.right}px`;
+  }
+  const outlineDOM = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--outline"
+  );
+  if (outlineDOM) {
+    outlineDOM.style.top = `${targetElementDimension.top + window.scrollY}px`;
+    outlineDOM.style.height = `${targetElementDimension.height}px`;
+    outlineDOM.style.width = `${targetElementDimension.width}px`;
+    outlineDOM.style.left = `${targetElementDimension.left}px`;
+    outlineDOM.style.outlineColor = disabled ? "#909090" : "#715cdd";
+  }
+}
+function hideFocusOverlay(elements) {
+  const {
+    visualBuilderContainer,
+    visualBuilderOverlayWrapper,
+    focusedToolbar,
+    resizeObserver,
+    noTrigger
+  } = elements;
+  if (visualBuilderOverlayWrapper) {
+    visualBuilderOverlayWrapper.classList.remove("visible");
+    visualBuilderOverlayWrapper.childNodes.forEach((childNode) => {
+      if (childNode instanceof Element) {
+        childNode.removeAttribute("style");
+      }
+    });
+    if (!noTrigger) {
+      sendFieldEvent({
+        visualBuilderContainer,
+        eventType: import_postMessage.VisualBuilderPostMessageEvents.UPDATE_FIELD
+      });
+    } else {
+      const { previousSelectedEditableDOM, focusFieldValue } = import__.VisualBuilder.VisualBuilderGlobalState.value || {};
+      if (previousSelectedEditableDOM && "innerText" in previousSelectedEditableDOM && focusFieldValue != null) {
+        previousSelectedEditableDOM.innerText = focusFieldValue;
+      }
+    }
+    import__.VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = null;
+    (0, import_handleIndividualFields.cleanIndividualFieldResidual)({
+      overlayWrapper: visualBuilderOverlayWrapper,
+      visualBuilderContainer,
+      focusedToolbar,
+      resizeObserver
+    });
+  }
+}
+function sendFieldEvent(options) {
+  const { visualBuilderContainer, eventType } = options;
+  const previousSelectedEditableDOM = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  const pseudoEditableElement = visualBuilderContainer?.querySelector(
+    "div.visual-builder__pseudo-editable-element"
+  );
+  if (previousSelectedEditableDOM && (previousSelectedEditableDOM.hasAttribute("contenteditable") || pseudoEditableElement)) {
+    const actualEditedElement = pseudoEditableElement || previousSelectedEditableDOM;
+    let data = "innerText" in actualEditedElement ? actualEditedElement.innerText : actualEditedElement.textContent;
+    const fieldMetadata = (0, import_cslpdata.extractDetailsFromCslp)(
+      previousSelectedEditableDOM.getAttribute("data-cslp")
+    );
+    import_fieldSchemaMap.FieldSchemaMap.getFieldSchema(
+      fieldMetadata.content_type_uid,
+      fieldMetadata.fieldPath
+    ).then((fieldSchema) => {
+      if (fieldSchema && eventType === import_postMessage.VisualBuilderPostMessageEvents.UPDATE_FIELD) {
+        const fieldType = (0, import_getFieldType.getFieldType)(fieldSchema);
+        if (fieldType && fieldType === import_types.FieldDataType.MULTILINE) {
+          data = (0, import_getMultilinePlaintext.getMultilinePlaintext)(actualEditedElement);
+          actualEditedElement.innerText = data;
+        }
+      }
+    }).finally(() => {
+      import_visualBuilderPostMessage.default?.send(eventType, {
+        data,
+        fieldMetadata
+      });
+    });
+  }
+}
+function hideOverlay(params) {
+  hideFocusOverlay({
+    visualBuilderContainer: params.visualBuilderContainer,
+    visualBuilderOverlayWrapper: params.visualBuilderOverlayWrapper,
+    focusedToolbar: params.focusedToolbar,
+    resizeObserver: params.resizeObserver,
+    noTrigger: Boolean(params.noTrigger)
+  });
+  (0, import_generateHighlightedComment.showAllHiddenHighlightedCommentIcons)();
+  if (!import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM)
+    return;
+  params.resizeObserver.unobserve(
+    import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM
+  );
+  import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  addFocusOverlay,
+  hideFocusOverlay,
+  hideOverlay,
+  sendFieldEvent
+});
+//# sourceMappingURL=generateOverlay.cjs.map

package/dist/modern/visualBuilder/generators/generateOverlay.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateOverlay.tsx"],"sourcesContent":["import { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { cleanIndividualFieldResidual } from \"../utils/handleIndividualFields\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport EventListenerHandlerParams from \"../listeners/types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { FieldDataType } from \"../utils/types/index.types\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { getMultilinePlaintext } from \"../utils/getMultilinePlaintext\";\nimport { showAllHiddenHighlightedCommentIcons } from \"./generateHighlightedComment\";\n\n/**\n * Adds a focus overlay to the target element.\n * @param targetElement - The element to add the focus overlay to.\n * @param focusOverlayWrapper - The HTMLDivElement that contains the focus overlay.\n * @returns void\n */\nexport function addFocusOverlay(\n    targetElement: Element,\n    focusOverlayWrapper: HTMLDivElement,\n    disabled?: boolean\n): void {\n    const targetElementDimension = targetElement.getBoundingClientRect();\n    if (\n        targetElementDimension.width === 0 ||\n        targetElementDimension.height === 0\n    )\n        return;\n    focusOverlayWrapper.classList.add(\"visible\");\n\n    const distanceFromTop = targetElementDimension.top + window.scrollY;\n    const topOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--top\"\n    );\n\n    if (topOverlayDOM) {\n        topOverlayDOM.style.top = \"0\";\n        topOverlayDOM.style.left = \"0\";\n        topOverlayDOM.style.width = \"100%\";\n        topOverlayDOM.style.height = `calc(${distanceFromTop}px)`;\n    }\n\n    const bottomOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--bottom\"\n    );\n    if (bottomOverlayDOM) {\n        bottomOverlayDOM.style.top = `${\n            targetElementDimension.bottom + window.scrollY\n        }px`;\n        bottomOverlayDOM.style.height = `${\n            window.document.body.scrollHeight -\n            targetElementDimension.bottom -\n            window.scrollY\n        }px`;\n        bottomOverlayDOM.style.left = \"0\";\n        bottomOverlayDOM.style.width = \"100%\";\n    }\n\n    const leftOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--left\"\n    );\n    if (leftOverlayDOM) {\n        leftOverlayDOM.style.left = \"0\";\n        leftOverlayDOM.style.top = `${distanceFromTop}px`;\n        leftOverlayDOM.style.height = `${targetElementDimension.height}px`;\n        leftOverlayDOM.style.width = `${targetElementDimension.left}px`;\n    }\n\n    const rightOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--right\"\n    );\n    if (rightOverlayDOM) {\n        rightOverlayDOM.style.left = `${targetElementDimension.right}px`;\n        rightOverlayDOM.style.top = `${distanceFromTop}px`;\n        rightOverlayDOM.style.height = `${targetElementDimension.height}px`;\n        rightOverlayDOM.style.width = `${\n            document.documentElement.clientWidth - targetElementDimension.right\n        }px`;\n    }\n\n    const outlineDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--outline\"\n    );\n    if (outlineDOM) {\n        outlineDOM.style.top = `${\n            targetElementDimension.top + window.scrollY\n        }px`;\n        outlineDOM.style.height = `${targetElementDimension.height}px`;\n        outlineDOM.style.width = `${targetElementDimension.width}px`;\n        outlineDOM.style.left = `${targetElementDimension.left}px`;\n        outlineDOM.style.outlineColor = disabled ? \"#909090\" : \"#715cdd\";\n    }\n}\n\n/**\n * Hides the focus overlay and performs necessary cleanup actions when the user clicks outside of the focused element.\n * @param event - The mouse event that triggered the function.\n * @param elements - An object containing references to the focus overlay wrapper, the previously selected editable DOM element, and the visual builder wrapper.\n */\nexport function hideFocusOverlay(elements: HideOverlayParams): void {\n    const {\n        visualBuilderContainer,\n        visualBuilderOverlayWrapper,\n        focusedToolbar,\n        resizeObserver,\n        noTrigger,\n    } = elements;\n\n    if (visualBuilderOverlayWrapper) {\n        visualBuilderOverlayWrapper.classList.remove(\"visible\");\n\n        // Cleanup overlay styles: Top, Right, Bottom, Left & Outline\n        visualBuilderOverlayWrapper.childNodes.forEach((childNode) => {\n            if (childNode instanceof Element) {\n                childNode.removeAttribute(\"style\");\n            }\n        });\n\n        if (!noTrigger) {\n            sendFieldEvent({\n                visualBuilderContainer,\n                eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,\n            });\n        } else {\n            const { previousSelectedEditableDOM, focusFieldValue } =\n                VisualBuilder.VisualBuilderGlobalState.value || {};\n            if (\n                previousSelectedEditableDOM &&\n                \"innerText\" in previousSelectedEditableDOM &&\n                focusFieldValue != null\n            ) {\n                previousSelectedEditableDOM.innerText = focusFieldValue;\n            }\n        }\n        VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = null;\n        cleanIndividualFieldResidual({\n            overlayWrapper: visualBuilderOverlayWrapper,\n            visualBuilderContainer: visualBuilderContainer,\n            focusedToolbar: focusedToolbar,\n            resizeObserver: resizeObserver,\n        });\n    }\n}\ninterface ISendFieldEventParams {\n    visualBuilderContainer: HTMLElement | null;\n    eventType:\n        | VisualBuilderPostMessageEvents.UPDATE_FIELD\n        | VisualBuilderPostMessageEvents.SYNC_FIELD;\n}\nexport function sendFieldEvent(options: ISendFieldEventParams): void {\n    const { visualBuilderContainer, eventType } = options;\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \"div.visual-builder__pseudo-editable-element\"\n    );\n    if (\n        previousSelectedEditableDOM &&\n        (previousSelectedEditableDOM.hasAttribute(\"contenteditable\") ||\n            pseudoEditableElement)\n    ) {\n        const actualEditedElement =\n            pseudoEditableElement ||\n            (previousSelectedEditableDOM as HTMLElement);\n\n        let data =\n            \"innerText\" in actualEditedElement\n                ? actualEditedElement.innerText\n                : actualEditedElement.textContent;\n\n        const fieldMetadata = extractDetailsFromCslp(\n            previousSelectedEditableDOM.getAttribute(\"data-cslp\") as string\n        );\n\n        FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        )\n            .then((fieldSchema) => {\n                if (\n                    fieldSchema &&\n                    eventType === VisualBuilderPostMessageEvents.UPDATE_FIELD\n                ) {\n                    const fieldType = getFieldType(fieldSchema);\n                    if (fieldType && fieldType === FieldDataType.MULTILINE) {\n                        data = getMultilinePlaintext(actualEditedElement);\n                        (actualEditedElement as HTMLElement).innerText =\n                            data as string;\n                    }\n                }\n            })\n            .finally(() => {\n                visualBuilderPostMessage?.send(eventType, {\n                    data,\n                    fieldMetadata,\n                });\n            });\n    }\n}\ninterface HideOverlayParams\n    extends Pick<\n        EventListenerHandlerParams,\n        \"visualBuilderContainer\" | \"focusedToolbar\" | \"resizeObserver\"\n    > {\n    visualBuilderOverlayWrapper: HTMLDivElement | null;\n    noTrigger?: boolean;\n}\n\nexport function hideOverlay(params: HideOverlayParams): void {\n    hideFocusOverlay({\n        visualBuilderContainer: params.visualBuilderContainer,\n        visualBuilderOverlayWrapper: params.visualBuilderOverlayWrapper,\n        focusedToolbar: params.focusedToolbar,\n        resizeObserver: params.resizeObserver,\n        noTrigger: Boolean(params.noTrigger),\n    });\n    showAllHiddenHighlightedCommentIcons();\n    if (\n        !VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM\n    )\n        return;\n    params.resizeObserver.unobserve(\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM\n    );\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAuC;AACvC,oCAA6C;AAC7C,sCAAqC;AACrC,yBAA+C;AAE/C,eAA8B;AAE9B,4BAA+B;AAC/B,mBAA8B;AAC9B,0BAA6B;AAE7B,mCAAsC;AACtC,wCAAqD;AAQ9C,SAAS,gBACZ,eACA,qBACA,UACI;AACJ,QAAM,yBAAyB,cAAc,sBAAsB;AACnE,MACI,uBAAuB,UAAU,KACjC,uBAAuB,WAAW;AAElC;AACJ,sBAAoB,UAAU,IAAI,SAAS;AAE3C,QAAM,kBAAkB,uBAAuB,MAAM,OAAO;AAC5D,QAAM,gBAAgB,oBAAoB;AAAA,IACtC;AAAA,EACJ;AAEA,MAAI,eAAe;AACf,kBAAc,MAAM,MAAM;AAC1B,kBAAc,MAAM,OAAO;AAC3B,kBAAc,MAAM,QAAQ;AAC5B,kBAAc,MAAM,SAAS,QAAQ,eAAe;AAAA,EACxD;AAEA,QAAM,mBAAmB,oBAAoB;AAAA,IACzC;AAAA,EACJ;AACA,MAAI,kBAAkB;AAClB,qBAAiB,MAAM,MAAM,GACzB,uBAAuB,SAAS,OAAO,OAC3C;AACA,qBAAiB,MAAM,SAAS,GAC5B,OAAO,SAAS,KAAK,eACrB,uBAAuB,SACvB,OAAO,OACX;AACA,qBAAiB,MAAM,OAAO;AAC9B,qBAAiB,MAAM,QAAQ;AAAA,EACnC;AAEA,QAAM,iBAAiB,oBAAoB;AAAA,IACvC;AAAA,EACJ;AACA,MAAI,gBAAgB;AAChB,mBAAe,MAAM,OAAO;AAC5B,mBAAe,MAAM,MAAM,GAAG,eAAe;AAC7C,mBAAe,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAC9D,mBAAe,MAAM,QAAQ,GAAG,uBAAuB,IAAI;AAAA,EAC/D;AAEA,QAAM,kBAAkB,oBAAoB;AAAA,IACxC;AAAA,EACJ;AACA,MAAI,iBAAiB;AACjB,oBAAgB,MAAM,OAAO,GAAG,uBAAuB,KAAK;AAC5D,oBAAgB,MAAM,MAAM,GAAG,eAAe;AAC9C,oBAAgB,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAC/D,oBAAgB,MAAM,QAAQ,GAC1B,SAAS,gBAAgB,cAAc,uBAAuB,KAClE;AAAA,EACJ;AAEA,QAAM,aAAa,oBAAoB;AAAA,IACnC;AAAA,EACJ;AACA,MAAI,YAAY;AACZ,eAAW,MAAM,MAAM,GACnB,uBAAuB,MAAM,OAAO,OACxC;AACA,eAAW,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAC1D,eAAW,MAAM,QAAQ,GAAG,uBAAuB,KAAK;AACxD,eAAW,MAAM,OAAO,GAAG,uBAAuB,IAAI;AACtD,eAAW,MAAM,eAAe,WAAW,YAAY;AAAA,EAC3D;AACJ;AAOO,SAAS,iBAAiB,UAAmC;AAChE,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,MAAI,6BAA6B;AAC7B,gCAA4B,UAAU,OAAO,SAAS;AAGtD,gCAA4B,WAAW,QAAQ,CAAC,cAAc;AAC1D,UAAI,qBAAqB,SAAS;AAC9B,kBAAU,gBAAgB,OAAO;AAAA,MACrC;AAAA,IACJ,CAAC;AAED,QAAI,CAAC,WAAW;AACZ,qBAAe;AAAA,QACX;AAAA,QACA,WAAW,kDAA+B;AAAA,MAC9C,CAAC;AAAA,IACL,OAAO;AACH,YAAM,EAAE,6BAA6B,gBAAgB,IACjD,uBAAc,yBAAyB,SAAS,CAAC;AACrD,UACI,+BACA,eAAe,+BACf,mBAAmB,MACrB;AACE,oCAA4B,YAAY;AAAA,MAC5C;AAAA,IACJ;AACA,2BAAc,yBAAyB,MAAM,kBAAkB;AAC/D,oEAA6B;AAAA,MACzB,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACJ,CAAC;AAAA,EACL;AACJ;AAOO,SAAS,eAAe,SAAsC;AACjE,QAAM,EAAE,wBAAwB,UAAU,IAAI;AAC9C,QAAM,8BACF,uBAAc,yBAAyB,MAClC;AACT,QAAM,wBAAwB,wBAAwB;AAAA,IAClD;AAAA,EACJ;AACA,MACI,gCACC,4BAA4B,aAAa,iBAAiB,KACvD,wBACN;AACE,UAAM,sBACF,yBACC;AAEL,QAAI,OACA,eAAe,sBACT,oBAAoB,YACpB,oBAAoB;AAE9B,UAAM,oBAAgB;AAAA,MAClB,4BAA4B,aAAa,WAAW;AAAA,IACxD;AAEA,yCAAe;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,IAClB,EACK,KAAK,CAAC,gBAAgB;AACnB,UACI,eACA,cAAc,kDAA+B,cAC/C;AACE,cAAM,gBAAY,kCAAa,WAAW;AAC1C,YAAI,aAAa,cAAc,2BAAc,WAAW;AACpD,qBAAO,oDAAsB,mBAAmB;AAChD,UAAC,oBAAoC,YACjC;AAAA,QACR;AAAA,MACJ;AAAA,IACJ,CAAC,EACA,QAAQ,MAAM;AACX,sCAAAA,SAA0B,KAAK,WAAW;AAAA,QACtC;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,CAAC;AAAA,EACT;AACJ;AAUO,SAAS,YAAY,QAAiC;AACzD,mBAAiB;AAAA,IACb,wBAAwB,OAAO;AAAA,IAC/B,6BAA6B,OAAO;AAAA,IACpC,gBAAgB,OAAO;AAAA,IACvB,gBAAgB,OAAO;AAAA,IACvB,WAAW,QAAQ,OAAO,SAAS;AAAA,EACvC,CAAC;AACD,8EAAqC;AACrC,MACI,CAAC,uBAAc,yBAAyB,MACnC;AAEL;AACJ,SAAO,eAAe;AAAA,IAClB,uBAAc,yBAAyB,MAAM;AAAA,EACjD;AACA,yBAAc,yBAAyB,MAAM,8BACzC;AACR;","names":["visualBuilderPostMessage"]}

package/dist/modern/visualBuilder/generators/generateOverlay.d.cts

@@ -0,0 +1,30 @@
+import { VisualBuilderPostMessageEvents } from '../utils/types/postMessage.types.cjs';
+import EventListenerHandlerParams from '../listeners/types.cjs';
+import '../types/visualBuilder.types.cjs';
+import '../../cslp/types/cslp.types.cjs';
+
+/**
+ * Adds a focus overlay to the target element.
+ * @param targetElement - The element to add the focus overlay to.
+ * @param focusOverlayWrapper - The HTMLDivElement that contains the focus overlay.
+ * @returns void
+ */
+declare function addFocusOverlay(targetElement: Element, focusOverlayWrapper: HTMLDivElement, disabled?: boolean): void;
+/**
+ * Hides the focus overlay and performs necessary cleanup actions when the user clicks outside of the focused element.
+ * @param event - The mouse event that triggered the function.
+ * @param elements - An object containing references to the focus overlay wrapper, the previously selected editable DOM element, and the visual builder wrapper.
+ */
+declare function hideFocusOverlay(elements: HideOverlayParams): void;
+interface ISendFieldEventParams {
+    visualBuilderContainer: HTMLElement | null;
+    eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD | VisualBuilderPostMessageEvents.SYNC_FIELD;
+}
+declare function sendFieldEvent(options: ISendFieldEventParams): void;
+interface HideOverlayParams extends Pick<EventListenerHandlerParams, "visualBuilderContainer" | "focusedToolbar" | "resizeObserver"> {
+    visualBuilderOverlayWrapper: HTMLDivElement | null;
+    noTrigger?: boolean;
+}
+declare function hideOverlay(params: HideOverlayParams): void;
+
+export { addFocusOverlay, hideFocusOverlay, hideOverlay, sendFieldEvent };

package/dist/modern/visualBuilder/generators/generateOverlay.d.ts

@@ -0,0 +1,30 @@
+import { VisualBuilderPostMessageEvents } from '../utils/types/postMessage.types.js';
+import EventListenerHandlerParams from '../listeners/types.js';
+import '../types/visualBuilder.types.js';
+import '../../cslp/types/cslp.types.js';
+
+/**
+ * Adds a focus overlay to the target element.
+ * @param targetElement - The element to add the focus overlay to.
+ * @param focusOverlayWrapper - The HTMLDivElement that contains the focus overlay.
+ * @returns void
+ */
+declare function addFocusOverlay(targetElement: Element, focusOverlayWrapper: HTMLDivElement, disabled?: boolean): void;
+/**
+ * Hides the focus overlay and performs necessary cleanup actions when the user clicks outside of the focused element.
+ * @param event - The mouse event that triggered the function.
+ * @param elements - An object containing references to the focus overlay wrapper, the previously selected editable DOM element, and the visual builder wrapper.
+ */
+declare function hideFocusOverlay(elements: HideOverlayParams): void;
+interface ISendFieldEventParams {
+    visualBuilderContainer: HTMLElement | null;
+    eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD | VisualBuilderPostMessageEvents.SYNC_FIELD;
+}
+declare function sendFieldEvent(options: ISendFieldEventParams): void;
+interface HideOverlayParams extends Pick<EventListenerHandlerParams, "visualBuilderContainer" | "focusedToolbar" | "resizeObserver"> {
+    visualBuilderOverlayWrapper: HTMLDivElement | null;
+    noTrigger?: boolean;
+}
+declare function hideOverlay(params: HideOverlayParams): void;
+
+export { addFocusOverlay, hideFocusOverlay, hideOverlay, sendFieldEvent };

package/dist/modern/visualBuilder/generators/generateOverlay.js

@@ -0,0 +1,155 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/generators/generateOverlay.tsx
+import { extractDetailsFromCslp } from "../../cslp/cslpdata.js";
+import { cleanIndividualFieldResidual } from "../utils/handleIndividualFields.js";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
+import { VisualBuilder } from "../index.js";
+import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
+import { FieldDataType } from "../utils/types/index.types.js";
+import { getFieldType } from "../utils/getFieldType.js";
+import { getMultilinePlaintext } from "../utils/getMultilinePlaintext.js";
+import { showAllHiddenHighlightedCommentIcons } from "./generateHighlightedComment.js";
+function addFocusOverlay(targetElement, focusOverlayWrapper, disabled) {
+  const targetElementDimension = targetElement.getBoundingClientRect();
+  if (targetElementDimension.width === 0 || targetElementDimension.height === 0)
+    return;
+  focusOverlayWrapper.classList.add("visible");
+  const distanceFromTop = targetElementDimension.top + window.scrollY;
+  const topOverlayDOM = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--top"
+  );
+  if (topOverlayDOM) {
+    topOverlayDOM.style.top = "0";
+    topOverlayDOM.style.left = "0";
+    topOverlayDOM.style.width = "100%";
+    topOverlayDOM.style.height = `calc(${distanceFromTop}px)`;
+  }
+  const bottomOverlayDOM = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--bottom"
+  );
+  if (bottomOverlayDOM) {
+    bottomOverlayDOM.style.top = `${targetElementDimension.bottom + window.scrollY}px`;
+    bottomOverlayDOM.style.height = `${window.document.body.scrollHeight - targetElementDimension.bottom - window.scrollY}px`;
+    bottomOverlayDOM.style.left = "0";
+    bottomOverlayDOM.style.width = "100%";
+  }
+  const leftOverlayDOM = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--left"
+  );
+  if (leftOverlayDOM) {
+    leftOverlayDOM.style.left = "0";
+    leftOverlayDOM.style.top = `${distanceFromTop}px`;
+    leftOverlayDOM.style.height = `${targetElementDimension.height}px`;
+    leftOverlayDOM.style.width = `${targetElementDimension.left}px`;
+  }
+  const rightOverlayDOM = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--right"
+  );
+  if (rightOverlayDOM) {
+    rightOverlayDOM.style.left = `${targetElementDimension.right}px`;
+    rightOverlayDOM.style.top = `${distanceFromTop}px`;
+    rightOverlayDOM.style.height = `${targetElementDimension.height}px`;
+    rightOverlayDOM.style.width = `${document.documentElement.clientWidth - targetElementDimension.right}px`;
+  }
+  const outlineDOM = focusOverlayWrapper.querySelector(
+    ".visual-builder__overlay--outline"
+  );
+  if (outlineDOM) {
+    outlineDOM.style.top = `${targetElementDimension.top + window.scrollY}px`;
+    outlineDOM.style.height = `${targetElementDimension.height}px`;
+    outlineDOM.style.width = `${targetElementDimension.width}px`;
+    outlineDOM.style.left = `${targetElementDimension.left}px`;
+    outlineDOM.style.outlineColor = disabled ? "#909090" : "#715cdd";
+  }
+}
+function hideFocusOverlay(elements) {
+  const {
+    visualBuilderContainer,
+    visualBuilderOverlayWrapper,
+    focusedToolbar,
+    resizeObserver,
+    noTrigger
+  } = elements;
+  if (visualBuilderOverlayWrapper) {
+    visualBuilderOverlayWrapper.classList.remove("visible");
+    visualBuilderOverlayWrapper.childNodes.forEach((childNode) => {
+      if (childNode instanceof Element) {
+        childNode.removeAttribute("style");
+      }
+    });
+    if (!noTrigger) {
+      sendFieldEvent({
+        visualBuilderContainer,
+        eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD
+      });
+    } else {
+      const { previousSelectedEditableDOM, focusFieldValue } = VisualBuilder.VisualBuilderGlobalState.value || {};
+      if (previousSelectedEditableDOM && "innerText" in previousSelectedEditableDOM && focusFieldValue != null) {
+        previousSelectedEditableDOM.innerText = focusFieldValue;
+      }
+    }
+    VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = null;
+    cleanIndividualFieldResidual({
+      overlayWrapper: visualBuilderOverlayWrapper,
+      visualBuilderContainer,
+      focusedToolbar,
+      resizeObserver
+    });
+  }
+}
+function sendFieldEvent(options) {
+  const { visualBuilderContainer, eventType } = options;
+  const previousSelectedEditableDOM = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  const pseudoEditableElement = visualBuilderContainer?.querySelector(
+    "div.visual-builder__pseudo-editable-element"
+  );
+  if (previousSelectedEditableDOM && (previousSelectedEditableDOM.hasAttribute("contenteditable") || pseudoEditableElement)) {
+    const actualEditedElement = pseudoEditableElement || previousSelectedEditableDOM;
+    let data = "innerText" in actualEditedElement ? actualEditedElement.innerText : actualEditedElement.textContent;
+    const fieldMetadata = extractDetailsFromCslp(
+      previousSelectedEditableDOM.getAttribute("data-cslp")
+    );
+    FieldSchemaMap.getFieldSchema(
+      fieldMetadata.content_type_uid,
+      fieldMetadata.fieldPath
+    ).then((fieldSchema) => {
+      if (fieldSchema && eventType === VisualBuilderPostMessageEvents.UPDATE_FIELD) {
+        const fieldType = getFieldType(fieldSchema);
+        if (fieldType && fieldType === FieldDataType.MULTILINE) {
+          data = getMultilinePlaintext(actualEditedElement);
+          actualEditedElement.innerText = data;
+        }
+      }
+    }).finally(() => {
+      visualBuilderPostMessage?.send(eventType, {
+        data,
+        fieldMetadata
+      });
+    });
+  }
+}
+function hideOverlay(params) {
+  hideFocusOverlay({
+    visualBuilderContainer: params.visualBuilderContainer,
+    visualBuilderOverlayWrapper: params.visualBuilderOverlayWrapper,
+    focusedToolbar: params.focusedToolbar,
+    resizeObserver: params.resizeObserver,
+    noTrigger: Boolean(params.noTrigger)
+  });
+  showAllHiddenHighlightedCommentIcons();
+  if (!VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM)
+    return;
+  params.resizeObserver.unobserve(
+    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM
+  );
+  VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = null;
+}
+export {
+  addFocusOverlay,
+  hideFocusOverlay,
+  hideOverlay,
+  sendFieldEvent
+};
+//# sourceMappingURL=generateOverlay.js.map

package/dist/modern/visualBuilder/generators/generateOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateOverlay.tsx"],"sourcesContent":["import { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { cleanIndividualFieldResidual } from \"../utils/handleIndividualFields\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport EventListenerHandlerParams from \"../listeners/types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { FieldDataType } from \"../utils/types/index.types\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { getMultilinePlaintext } from \"../utils/getMultilinePlaintext\";\nimport { showAllHiddenHighlightedCommentIcons } from \"./generateHighlightedComment\";\n\n/**\n * Adds a focus overlay to the target element.\n * @param targetElement - The element to add the focus overlay to.\n * @param focusOverlayWrapper - The HTMLDivElement that contains the focus overlay.\n * @returns void\n */\nexport function addFocusOverlay(\n    targetElement: Element,\n    focusOverlayWrapper: HTMLDivElement,\n    disabled?: boolean\n): void {\n    const targetElementDimension = targetElement.getBoundingClientRect();\n    if (\n        targetElementDimension.width === 0 ||\n        targetElementDimension.height === 0\n    )\n        return;\n    focusOverlayWrapper.classList.add(\"visible\");\n\n    const distanceFromTop = targetElementDimension.top + window.scrollY;\n    const topOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--top\"\n    );\n\n    if (topOverlayDOM) {\n        topOverlayDOM.style.top = \"0\";\n        topOverlayDOM.style.left = \"0\";\n        topOverlayDOM.style.width = \"100%\";\n        topOverlayDOM.style.height = `calc(${distanceFromTop}px)`;\n    }\n\n    const bottomOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--bottom\"\n    );\n    if (bottomOverlayDOM) {\n        bottomOverlayDOM.style.top = `${\n            targetElementDimension.bottom + window.scrollY\n        }px`;\n        bottomOverlayDOM.style.height = `${\n            window.document.body.scrollHeight -\n            targetElementDimension.bottom -\n            window.scrollY\n        }px`;\n        bottomOverlayDOM.style.left = \"0\";\n        bottomOverlayDOM.style.width = \"100%\";\n    }\n\n    const leftOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--left\"\n    );\n    if (leftOverlayDOM) {\n        leftOverlayDOM.style.left = \"0\";\n        leftOverlayDOM.style.top = `${distanceFromTop}px`;\n        leftOverlayDOM.style.height = `${targetElementDimension.height}px`;\n        leftOverlayDOM.style.width = `${targetElementDimension.left}px`;\n    }\n\n    const rightOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--right\"\n    );\n    if (rightOverlayDOM) {\n        rightOverlayDOM.style.left = `${targetElementDimension.right}px`;\n        rightOverlayDOM.style.top = `${distanceFromTop}px`;\n        rightOverlayDOM.style.height = `${targetElementDimension.height}px`;\n        rightOverlayDOM.style.width = `${\n            document.documentElement.clientWidth - targetElementDimension.right\n        }px`;\n    }\n\n    const outlineDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--outline\"\n    );\n    if (outlineDOM) {\n        outlineDOM.style.top = `${\n            targetElementDimension.top + window.scrollY\n        }px`;\n        outlineDOM.style.height = `${targetElementDimension.height}px`;\n        outlineDOM.style.width = `${targetElementDimension.width}px`;\n        outlineDOM.style.left = `${targetElementDimension.left}px`;\n        outlineDOM.style.outlineColor = disabled ? \"#909090\" : \"#715cdd\";\n    }\n}\n\n/**\n * Hides the focus overlay and performs necessary cleanup actions when the user clicks outside of the focused element.\n * @param event - The mouse event that triggered the function.\n * @param elements - An object containing references to the focus overlay wrapper, the previously selected editable DOM element, and the visual builder wrapper.\n */\nexport function hideFocusOverlay(elements: HideOverlayParams): void {\n    const {\n        visualBuilderContainer,\n        visualBuilderOverlayWrapper,\n        focusedToolbar,\n        resizeObserver,\n        noTrigger,\n    } = elements;\n\n    if (visualBuilderOverlayWrapper) {\n        visualBuilderOverlayWrapper.classList.remove(\"visible\");\n\n        // Cleanup overlay styles: Top, Right, Bottom, Left & Outline\n        visualBuilderOverlayWrapper.childNodes.forEach((childNode) => {\n            if (childNode instanceof Element) {\n                childNode.removeAttribute(\"style\");\n            }\n        });\n\n        if (!noTrigger) {\n            sendFieldEvent({\n                visualBuilderContainer,\n                eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,\n            });\n        } else {\n            const { previousSelectedEditableDOM, focusFieldValue } =\n                VisualBuilder.VisualBuilderGlobalState.value || {};\n            if (\n                previousSelectedEditableDOM &&\n                \"innerText\" in previousSelectedEditableDOM &&\n                focusFieldValue != null\n            ) {\n                previousSelectedEditableDOM.innerText = focusFieldValue;\n            }\n        }\n        VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = null;\n        cleanIndividualFieldResidual({\n            overlayWrapper: visualBuilderOverlayWrapper,\n            visualBuilderContainer: visualBuilderContainer,\n            focusedToolbar: focusedToolbar,\n            resizeObserver: resizeObserver,\n        });\n    }\n}\ninterface ISendFieldEventParams {\n    visualBuilderContainer: HTMLElement | null;\n    eventType:\n        | VisualBuilderPostMessageEvents.UPDATE_FIELD\n        | VisualBuilderPostMessageEvents.SYNC_FIELD;\n}\nexport function sendFieldEvent(options: ISendFieldEventParams): void {\n    const { visualBuilderContainer, eventType } = options;\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \"div.visual-builder__pseudo-editable-element\"\n    );\n    if (\n        previousSelectedEditableDOM &&\n        (previousSelectedEditableDOM.hasAttribute(\"contenteditable\") ||\n            pseudoEditableElement)\n    ) {\n        const actualEditedElement =\n            pseudoEditableElement ||\n            (previousSelectedEditableDOM as HTMLElement);\n\n        let data =\n            \"innerText\" in actualEditedElement\n                ? actualEditedElement.innerText\n                : actualEditedElement.textContent;\n\n        const fieldMetadata = extractDetailsFromCslp(\n            previousSelectedEditableDOM.getAttribute(\"data-cslp\") as string\n        );\n\n        FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        )\n            .then((fieldSchema) => {\n                if (\n                    fieldSchema &&\n                    eventType === VisualBuilderPostMessageEvents.UPDATE_FIELD\n                ) {\n                    const fieldType = getFieldType(fieldSchema);\n                    if (fieldType && fieldType === FieldDataType.MULTILINE) {\n                        data = getMultilinePlaintext(actualEditedElement);\n                        (actualEditedElement as HTMLElement).innerText =\n                            data as string;\n                    }\n                }\n            })\n            .finally(() => {\n                visualBuilderPostMessage?.send(eventType, {\n                    data,\n                    fieldMetadata,\n                });\n            });\n    }\n}\ninterface HideOverlayParams\n    extends Pick<\n        EventListenerHandlerParams,\n        \"visualBuilderContainer\" | \"focusedToolbar\" | \"resizeObserver\"\n    > {\n    visualBuilderOverlayWrapper: HTMLDivElement | null;\n    noTrigger?: boolean;\n}\n\nexport function hideOverlay(params: HideOverlayParams): void {\n    hideFocusOverlay({\n        visualBuilderContainer: params.visualBuilderContainer,\n        visualBuilderOverlayWrapper: params.visualBuilderOverlayWrapper,\n        focusedToolbar: params.focusedToolbar,\n        resizeObserver: params.resizeObserver,\n        noTrigger: Boolean(params.noTrigger),\n    });\n    showAllHiddenHighlightedCommentIcons();\n    if (\n        !VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM\n    )\n        return;\n    params.resizeObserver.unobserve(\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM\n    );\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        null;\n}\n"],"mappings":";;;AAAA,SAAS,8BAA8B;AACvC,SAAS,oCAAoC;AAC7C,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AAE/C,SAAS,qBAAqB;AAE9B,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAE7B,SAAS,6BAA6B;AACtC,SAAS,4CAA4C;AAQ9C,SAAS,gBACZ,eACA,qBACA,UACI;AACJ,QAAM,yBAAyB,cAAc,sBAAsB;AACnE,MACI,uBAAuB,UAAU,KACjC,uBAAuB,WAAW;AAElC;AACJ,sBAAoB,UAAU,IAAI,SAAS;AAE3C,QAAM,kBAAkB,uBAAuB,MAAM,OAAO;AAC5D,QAAM,gBAAgB,oBAAoB;AAAA,IACtC;AAAA,EACJ;AAEA,MAAI,eAAe;AACf,kBAAc,MAAM,MAAM;AAC1B,kBAAc,MAAM,OAAO;AAC3B,kBAAc,MAAM,QAAQ;AAC5B,kBAAc,MAAM,SAAS,QAAQ,eAAe;AAAA,EACxD;AAEA,QAAM,mBAAmB,oBAAoB;AAAA,IACzC;AAAA,EACJ;AACA,MAAI,kBAAkB;AAClB,qBAAiB,MAAM,MAAM,GACzB,uBAAuB,SAAS,OAAO,OAC3C;AACA,qBAAiB,MAAM,SAAS,GAC5B,OAAO,SAAS,KAAK,eACrB,uBAAuB,SACvB,OAAO,OACX;AACA,qBAAiB,MAAM,OAAO;AAC9B,qBAAiB,MAAM,QAAQ;AAAA,EACnC;AAEA,QAAM,iBAAiB,oBAAoB;AAAA,IACvC;AAAA,EACJ;AACA,MAAI,gBAAgB;AAChB,mBAAe,MAAM,OAAO;AAC5B,mBAAe,MAAM,MAAM,GAAG,eAAe;AAC7C,mBAAe,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAC9D,mBAAe,MAAM,QAAQ,GAAG,uBAAuB,IAAI;AAAA,EAC/D;AAEA,QAAM,kBAAkB,oBAAoB;AAAA,IACxC;AAAA,EACJ;AACA,MAAI,iBAAiB;AACjB,oBAAgB,MAAM,OAAO,GAAG,uBAAuB,KAAK;AAC5D,oBAAgB,MAAM,MAAM,GAAG,eAAe;AAC9C,oBAAgB,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAC/D,oBAAgB,MAAM,QAAQ,GAC1B,SAAS,gBAAgB,cAAc,uBAAuB,KAClE;AAAA,EACJ;AAEA,QAAM,aAAa,oBAAoB;AAAA,IACnC;AAAA,EACJ;AACA,MAAI,YAAY;AACZ,eAAW,MAAM,MAAM,GACnB,uBAAuB,MAAM,OAAO,OACxC;AACA,eAAW,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAC1D,eAAW,MAAM,QAAQ,GAAG,uBAAuB,KAAK;AACxD,eAAW,MAAM,OAAO,GAAG,uBAAuB,IAAI;AACtD,eAAW,MAAM,eAAe,WAAW,YAAY;AAAA,EAC3D;AACJ;AAOO,SAAS,iBAAiB,UAAmC;AAChE,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,MAAI,6BAA6B;AAC7B,gCAA4B,UAAU,OAAO,SAAS;AAGtD,gCAA4B,WAAW,QAAQ,CAAC,cAAc;AAC1D,UAAI,qBAAqB,SAAS;AAC9B,kBAAU,gBAAgB,OAAO;AAAA,MACrC;AAAA,IACJ,CAAC;AAED,QAAI,CAAC,WAAW;AACZ,qBAAe;AAAA,QACX;AAAA,QACA,WAAW,+BAA+B;AAAA,MAC9C,CAAC;AAAA,IACL,OAAO;AACH,YAAM,EAAE,6BAA6B,gBAAgB,IACjD,cAAc,yBAAyB,SAAS,CAAC;AACrD,UACI,+BACA,eAAe,+BACf,mBAAmB,MACrB;AACE,oCAA4B,YAAY;AAAA,MAC5C;AAAA,IACJ;AACA,kBAAc,yBAAyB,MAAM,kBAAkB;AAC/D,iCAA6B;AAAA,MACzB,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACJ,CAAC;AAAA,EACL;AACJ;AAOO,SAAS,eAAe,SAAsC;AACjE,QAAM,EAAE,wBAAwB,UAAU,IAAI;AAC9C,QAAM,8BACF,cAAc,yBAAyB,MAClC;AACT,QAAM,wBAAwB,wBAAwB;AAAA,IAClD;AAAA,EACJ;AACA,MACI,gCACC,4BAA4B,aAAa,iBAAiB,KACvD,wBACN;AACE,UAAM,sBACF,yBACC;AAEL,QAAI,OACA,eAAe,sBACT,oBAAoB,YACpB,oBAAoB;AAE9B,UAAM,gBAAgB;AAAA,MAClB,4BAA4B,aAAa,WAAW;AAAA,IACxD;AAEA,mBAAe;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,IAClB,EACK,KAAK,CAAC,gBAAgB;AACnB,UACI,eACA,cAAc,+BAA+B,cAC/C;AACE,cAAM,YAAY,aAAa,WAAW;AAC1C,YAAI,aAAa,cAAc,cAAc,WAAW;AACpD,iBAAO,sBAAsB,mBAAmB;AAChD,UAAC,oBAAoC,YACjC;AAAA,QACR;AAAA,MACJ;AAAA,IACJ,CAAC,EACA,QAAQ,MAAM;AACX,gCAA0B,KAAK,WAAW;AAAA,QACtC;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,CAAC;AAAA,EACT;AACJ;AAUO,SAAS,YAAY,QAAiC;AACzD,mBAAiB;AAAA,IACb,wBAAwB,OAAO;AAAA,IAC/B,6BAA6B,OAAO;AAAA,IACpC,gBAAgB,OAAO;AAAA,IACvB,gBAAgB,OAAO;AAAA,IACvB,WAAW,QAAQ,OAAO,SAAS;AAAA,EACvC,CAAC;AACD,uCAAqC;AACrC,MACI,CAAC,cAAc,yBAAyB,MACnC;AAEL;AACJ,SAAO,eAAe;AAAA,IAClB,cAAc,yBAAyB,MAAM;AAAA,EACjD;AACA,gBAAc,yBAAyB,MAAM,8BACzC;AACR;","names":[]}

package/dist/modern/visualBuilder/generators/generatePseudoEditableField.cjs

@@ -0,0 +1,70 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/generators/generatePseudoEditableField.tsx
+var generatePseudoEditableField_exports = {};
+__export(generatePseudoEditableField_exports, {
+  generatePseudoEditableElement: () => generatePseudoEditableElement,
+  isEllipsisActive: () => isEllipsisActive
+});
+module.exports = __toCommonJS(generatePseudoEditableField_exports);
+var import_preact = require("preact");
+var import_pseudoEditableField = __toESM(require("../components/pseudoEditableField.cjs"), 1);
+var import_jsx_runtime = require("preact/jsx-runtime");
+function isEllipsisActive(element) {
+  return element.offsetWidth < element.scrollWidth;
+}
+function generatePseudoEditableElement(elements, config) {
+  const { editableElement } = elements;
+  const visualBuilderContainer = document.querySelector(
+    ".visual-builder__container"
+  );
+  const wrapper = document.createDocumentFragment();
+  (0, import_preact.render)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_pseudoEditableField.default,
+      {
+        editableElement,
+        config
+      }
+    ),
+    wrapper
+  );
+  visualBuilderContainer?.appendChild(wrapper);
+  const pseudoEditableElement = document.querySelector(
+    ".visual-builder__pseudo-editable-element"
+  );
+  return pseudoEditableElement;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generatePseudoEditableElement,
+  isEllipsisActive
+});
+//# sourceMappingURL=generatePseudoEditableField.cjs.map

package/dist/modern/visualBuilder/generators/generatePseudoEditableField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generatePseudoEditableField.tsx"],"sourcesContent":["import { render } from \"preact\";\nimport PseudoEditableFieldComponent from \"../components/pseudoEditableField\";\n\n/**\n * Checks if the content of an element is truncated with ellipsis.\n *\n * @param element The HTML element to check.\n * @returns A boolean indicating whether the content is truncated with ellipsis.\n */\nexport function isEllipsisActive(element: HTMLElement): boolean {\n    return element.offsetWidth < element.scrollWidth;\n}\n\n/**\n * Generates a pseudo editable element based on the provided parameters.\n * The pseudo editable element is created as a <div> element with the provided text content,\n * positioned absolutely at the same location as the editable element.\n * The original editable element is hidden while the pseudo editable element is displayed.\n * It is used to edit the text content if the original editable element is not completely\n * visible.\n *\n * @param elements - An object containing the editable element.\n * @param elements.editableElement - The HTML element to be replaced with the pseudo editable element.\n * @param config - An object containing the configuration for the pseudo editable element.\n * @param config.textContent - The text content to be displayed in the pseudo editable element.\n *\n * @returns The generated pseudo editable element as an HTMLDivElement.\n */\nexport function generatePseudoEditableElement(\n    elements: {\n        editableElement: HTMLElement;\n    },\n    config: { textContent: string }\n): HTMLDivElement {\n    const { editableElement } = elements;\n\n    const visualBuilderContainer = document.querySelector(\n        \".visual-builder__container\"\n    );\n    const wrapper = document.createDocumentFragment();\n    render(\n        <PseudoEditableFieldComponent\n            editableElement={editableElement}\n            config={config}\n        />,\n        wrapper\n    );\n\n    visualBuilderContainer?.appendChild(wrapper);\n\n    const pseudoEditableElement = document.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    ) as HTMLDivElement;\n\n    // TODO: set up a observer for UI shift.\n    return pseudoEditableElement;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;AACvB,iCAAyC;AAwCjC;AAhCD,SAAS,iBAAiB,SAA+B;AAC5D,SAAO,QAAQ,cAAc,QAAQ;AACzC;AAiBO,SAAS,8BACZ,UAGA,QACc;AACd,QAAM,EAAE,gBAAgB,IAAI;AAE5B,QAAM,yBAAyB,SAAS;AAAA,IACpC;AAAA,EACJ;AACA,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,2BAAAA;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,0BAAwB,YAAY,OAAO;AAE3C,QAAM,wBAAwB,SAAS;AAAA,IACnC;AAAA,EACJ;AAGA,SAAO;AACX;","names":["PseudoEditableFieldComponent"]}

package/dist/modern/visualBuilder/generators/generatePseudoEditableField.d.cts

@@ -0,0 +1,29 @@
+/**
+ * Checks if the content of an element is truncated with ellipsis.
+ *
+ * @param element The HTML element to check.
+ * @returns A boolean indicating whether the content is truncated with ellipsis.
+ */
+declare function isEllipsisActive(element: HTMLElement): boolean;
+/**
+ * Generates a pseudo editable element based on the provided parameters.
+ * The pseudo editable element is created as a <div> element with the provided text content,
+ * positioned absolutely at the same location as the editable element.
+ * The original editable element is hidden while the pseudo editable element is displayed.
+ * It is used to edit the text content if the original editable element is not completely
+ * visible.
+ *
+ * @param elements - An object containing the editable element.
+ * @param elements.editableElement - The HTML element to be replaced with the pseudo editable element.
+ * @param config - An object containing the configuration for the pseudo editable element.
+ * @param config.textContent - The text content to be displayed in the pseudo editable element.
+ *
+ * @returns The generated pseudo editable element as an HTMLDivElement.
+ */
+declare function generatePseudoEditableElement(elements: {
+    editableElement: HTMLElement;
+}, config: {
+    textContent: string;
+}): HTMLDivElement;
+
+export { generatePseudoEditableElement, isEllipsisActive };

package/dist/modern/visualBuilder/generators/generatePseudoEditableField.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Checks if the content of an element is truncated with ellipsis.
+ *
+ * @param element The HTML element to check.
+ * @returns A boolean indicating whether the content is truncated with ellipsis.
+ */
+declare function isEllipsisActive(element: HTMLElement): boolean;
+/**
+ * Generates a pseudo editable element based on the provided parameters.
+ * The pseudo editable element is created as a <div> element with the provided text content,
+ * positioned absolutely at the same location as the editable element.
+ * The original editable element is hidden while the pseudo editable element is displayed.
+ * It is used to edit the text content if the original editable element is not completely
+ * visible.
+ *
+ * @param elements - An object containing the editable element.
+ * @param elements.editableElement - The HTML element to be replaced with the pseudo editable element.
+ * @param config - An object containing the configuration for the pseudo editable element.
+ * @param config.textContent - The text content to be displayed in the pseudo editable element.
+ *
+ * @returns The generated pseudo editable element as an HTMLDivElement.
+ */
+declare function generatePseudoEditableElement(elements: {
+    editableElement: HTMLElement;
+}, config: {
+    textContent: string;
+}): HTMLDivElement;
+
+export { generatePseudoEditableElement, isEllipsisActive };

package/dist/modern/visualBuilder/generators/generatePseudoEditableField.js

@@ -0,0 +1,36 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/generators/generatePseudoEditableField.tsx
+import { render } from "preact";
+import PseudoEditableFieldComponent from "../components/pseudoEditableField.js";
+import { jsx } from "preact/jsx-runtime";
+function isEllipsisActive(element) {
+  return element.offsetWidth < element.scrollWidth;
+}
+function generatePseudoEditableElement(elements, config) {
+  const { editableElement } = elements;
+  const visualBuilderContainer = document.querySelector(
+    ".visual-builder__container"
+  );
+  const wrapper = document.createDocumentFragment();
+  render(
+    /* @__PURE__ */ jsx(
+      PseudoEditableFieldComponent,
+      {
+        editableElement,
+        config
+      }
+    ),
+    wrapper
+  );
+  visualBuilderContainer?.appendChild(wrapper);
+  const pseudoEditableElement = document.querySelector(
+    ".visual-builder__pseudo-editable-element"
+  );
+  return pseudoEditableElement;
+}
+export {
+  generatePseudoEditableElement,
+  isEllipsisActive
+};
+//# sourceMappingURL=generatePseudoEditableField.js.map

package/dist/modern/visualBuilder/generators/generatePseudoEditableField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generatePseudoEditableField.tsx"],"sourcesContent":["import { render } from \"preact\";\nimport PseudoEditableFieldComponent from \"../components/pseudoEditableField\";\n\n/**\n * Checks if the content of an element is truncated with ellipsis.\n *\n * @param element The HTML element to check.\n * @returns A boolean indicating whether the content is truncated with ellipsis.\n */\nexport function isEllipsisActive(element: HTMLElement): boolean {\n    return element.offsetWidth < element.scrollWidth;\n}\n\n/**\n * Generates a pseudo editable element based on the provided parameters.\n * The pseudo editable element is created as a <div> element with the provided text content,\n * positioned absolutely at the same location as the editable element.\n * The original editable element is hidden while the pseudo editable element is displayed.\n * It is used to edit the text content if the original editable element is not completely\n * visible.\n *\n * @param elements - An object containing the editable element.\n * @param elements.editableElement - The HTML element to be replaced with the pseudo editable element.\n * @param config - An object containing the configuration for the pseudo editable element.\n * @param config.textContent - The text content to be displayed in the pseudo editable element.\n *\n * @returns The generated pseudo editable element as an HTMLDivElement.\n */\nexport function generatePseudoEditableElement(\n    elements: {\n        editableElement: HTMLElement;\n    },\n    config: { textContent: string }\n): HTMLDivElement {\n    const { editableElement } = elements;\n\n    const visualBuilderContainer = document.querySelector(\n        \".visual-builder__container\"\n    );\n    const wrapper = document.createDocumentFragment();\n    render(\n        <PseudoEditableFieldComponent\n            editableElement={editableElement}\n            config={config}\n        />,\n        wrapper\n    );\n\n    visualBuilderContainer?.appendChild(wrapper);\n\n    const pseudoEditableElement = document.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    ) as HTMLDivElement;\n\n    // TODO: set up a observer for UI shift.\n    return pseudoEditableElement;\n}\n"],"mappings":";;;AAAA,SAAS,cAAc;AACvB,OAAO,kCAAkC;AAwCjC;AAhCD,SAAS,iBAAiB,SAA+B;AAC5D,SAAO,QAAQ,cAAc,QAAQ;AACzC;AAiBO,SAAS,8BACZ,UAGA,QACc;AACd,QAAM,EAAE,gBAAgB,IAAI;AAE5B,QAAM,yBAAyB,SAAS;AAAA,IACpC;AAAA,EACJ;AACA,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,0BAAwB,YAAY,OAAO;AAE3C,QAAM,wBAAwB,SAAS;AAAA,IACnC;AAAA,EACJ;AAGA,SAAO;AACX;","names":[]}