@contentstack/live-preview-utils 2.0.4 → 3.0.1

package/dist/legacy/visualBuilder/index.cjs

@@ -0,0 +1,303 @@
+"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/index.ts
+var visualBuilder_exports = {};
+__export(visualBuilder_exports, {
+  VisualBuilder: () => VisualBuilder
+});
+module.exports = __toCommonJS(visualBuilder_exports);
+var import_signals = require("@preact/signals");
+var import_inIframe = require("../common/inIframe.cjs");
+var import_configManager = __toESM(require("../configManager/configManager.cjs"), 1);
+var import_postMessageEvent = require("../livePreview/eventManager/postMessageEvent.hooks.cjs");
+var import_types = require("../types/types.cjs");
+var import_generateStartEditingButton = require("./generators/generateStartEditingButton.cjs");
+var import_generateOverlay = require("./generators/generateOverlay.cjs");
+var import_getEntryIdentifiersInCurrentPage = require("./utils/getEntryIdentifiersInCurrentPage.cjs");
+var import_visualBuilderPostMessage = __toESM(require("./utils/visualBuilderPostMessage.cjs"), 1);
+var import_postMessage = require("./utils/types/postMessage.types.cjs");
+var import_goober = require("goober");
+var import_lodash_es = require("lodash-es");
+var import_preact = require("preact");
+var import_cslp = require("../cslp/index.cjs");
+var import_components = __toESM(require("./components/index.cjs"), 1);
+var import_useDraftFieldsPostMessageEvent = require("./eventManager/useDraftFieldsPostMessageEvent.cjs");
+var import_useHideFocusOverlayPostMessageEvent = require("./eventManager/useHideFocusOverlayPostMessageEvent.cjs");
+var import_useScrollToField = require("./eventManager/useScrollToField.cjs");
+var import_useVariantsPostMessageEvent = require("./eventManager/useVariantsPostMessageEvent.cjs");
+var import_generateEmptyBlock = require("./generators/generateEmptyBlock.cjs");
+var import_listeners = require("./listeners/index.cjs");
+var import_keyboardShortcuts = require("./listeners/keyboardShortcuts.cjs");
+var import_fieldSchemaMap = require("./utils/fieldSchemaMap.cjs");
+var import_isFieldDisabled = require("./utils/isFieldDisabled.cjs");
+var import_updateFocussedState = require("./utils/updateFocussedState.cjs");
+var import_useHighlightCommentIcon = require("./eventManager/useHighlightCommentIcon.cjs");
+var import_generateHighlightedComment = require("./generators/generateHighlightedComment.cjs");
+var import_useRecalculateVariantDataCSLPValues = require("./eventManager/useRecalculateVariantDataCSLPValues.cjs");
+var _VisualBuilder = class _VisualBuilder {
+  constructor() {
+    this.customCursor = null;
+    this.overlayWrapper = null;
+    this.visualBuilderContainer = null;
+    this.focusedToolbar = null;
+    this.scrollEventHandler = () => {
+      (0, import_generateHighlightedComment.updateHighlightedCommentIconPosition)();
+    };
+    this.resizeEventHandler = () => {
+      const previousSelectedEditableDOM = _VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+      (0, import_generateHighlightedComment.updateHighlightedCommentIconPosition)();
+      if (previousSelectedEditableDOM) {
+        this.handlePositionChange(
+          previousSelectedEditableDOM
+        );
+      }
+    };
+    this.resizeObserver = new ResizeObserver(([entry]) => {
+      const previousSelectedEditableDOM = _VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+      if (!this.overlayWrapper || !previousSelectedEditableDOM) {
+        return;
+      }
+      if (!entry.target.isSameNode(previousSelectedEditableDOM) && !entry.target.classList.contains(
+        "visual-builder__pseudo-editable-element"
+      )) {
+        return;
+      }
+      const isPsuedoEditableElement = entry.target.classList.contains(
+        "visual-builder__pseudo-editable-element"
+      );
+      const editableElement = isPsuedoEditableElement ? previousSelectedEditableDOM : entry.target.closest("[data-cslp]");
+      if (isPsuedoEditableElement) {
+        (0, import_generateOverlay.addFocusOverlay)(entry.target, this.overlayWrapper);
+      } else if (editableElement) {
+        this.handlePositionChange(editableElement);
+      }
+      const cslpData = editableElement && editableElement.getAttribute("data-cslp");
+      if (!editableElement || !cslpData) {
+        return;
+      }
+      const fieldMetadata = (0, import_cslp.extractDetailsFromCslp)(cslpData);
+      import_fieldSchemaMap.FieldSchemaMap.getFieldSchema(
+        fieldMetadata.content_type_uid,
+        fieldMetadata.fieldPath
+      ).then((fieldSchema) => {
+        if (!fieldSchema) {
+          return;
+        }
+        const { isDisabled } = (0, import_isFieldDisabled.isFieldDisabled)(fieldSchema, {
+          editableElement,
+          fieldMetadata
+        });
+        if (isDisabled) {
+          (0, import_generateOverlay.addFocusOverlay)(
+            editableElement,
+            this.overlayWrapper,
+            isDisabled
+          );
+        }
+      });
+    });
+    this.mutationObserver = new MutationObserver(
+      (0, import_lodash_es.debounce)(
+        async () => {
+          (0, import_updateFocussedState.updateFocussedStateOnMutation)(
+            this.overlayWrapper,
+            this.focusedToolbar,
+            this.visualBuilderContainer,
+            this.resizeObserver
+          );
+          const emptyBlockParents = Array.from(
+            document.querySelectorAll(
+              ".visual-builder__empty-block-parent"
+            )
+          );
+          const previousEmptyBlockParents = _VisualBuilder.VisualBuilderGlobalState.value.previousEmptyBlockParents;
+          if (!(0, import_lodash_es.isEqual)(emptyBlockParents, previousEmptyBlockParents)) {
+            const noMoreEmptyBlockParent = previousEmptyBlockParents.filter(
+              (x) => !emptyBlockParents.includes(x)
+            );
+            const newEmptyBlockParent = emptyBlockParents.filter(
+              (x) => !previousEmptyBlockParents.includes(x)
+            );
+            (0, import_generateEmptyBlock.removeEmptyBlocks)(noMoreEmptyBlockParent);
+            await (0, import_generateEmptyBlock.generateEmptyBlocks)(newEmptyBlockParent);
+            _VisualBuilder.VisualBuilderGlobalState.value = {
+              ..._VisualBuilder.VisualBuilderGlobalState.value,
+              previousEmptyBlockParents: emptyBlockParents
+            };
+          }
+        },
+        100,
+        { trailing: true }
+      )
+    );
+    // TODO: write test cases
+    this.destroy = () => {
+      window.removeEventListener("resize", this.resizeEventHandler);
+      window.removeEventListener("scroll", this.scrollEventHandler);
+      (0, import_listeners.removeEventListeners)({
+        overlayWrapper: this.overlayWrapper,
+        visualBuilderContainer: this.visualBuilderContainer,
+        previousSelectedEditableDOM: _VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM,
+        focusedToolbar: this.focusedToolbar,
+        resizeObserver: this.resizeObserver,
+        customCursor: this.customCursor
+      });
+      this.resizeObserver.disconnect();
+      this.mutationObserver.disconnect();
+      _VisualBuilder.VisualBuilderGlobalState.value = {
+        previousSelectedEditableDOM: null,
+        previousHoveredTargetDOM: null,
+        previousEmptyBlockParents: [],
+        focusFieldValue: null,
+        audienceMode: false,
+        locale: "en-us",
+        variant: null
+      };
+      if (this.visualBuilderContainer) {
+        window.document.body.removeChild(this.visualBuilderContainer);
+      }
+      if (this.customCursor) {
+        this.customCursor.remove();
+      }
+      if (this.overlayWrapper) {
+        this.overlayWrapper.remove();
+      }
+      if (this.focusedToolbar) {
+        this.focusedToolbar.remove();
+      }
+      this.customCursor = null;
+      this.overlayWrapper = null;
+      this.visualBuilderContainer = null;
+      this.focusedToolbar = null;
+    };
+    var _a;
+    window.addEventListener("resize", this.resizeEventHandler);
+    window.addEventListener("scroll", this.scrollEventHandler);
+    (0, import_components.default)({
+      resizeObserver: this.resizeObserver
+    });
+    (0, import_goober.setup)(import_preact.h);
+    this.visualBuilderContainer = document.querySelector(
+      ".visual-builder__container"
+    );
+    this.overlayWrapper = document.querySelector(
+      ".visual-builder__overlay__wrapper"
+    );
+    this.customCursor = document.querySelector(".visual-builder__cursor");
+    this.focusedToolbar = document.querySelector(
+      ".visual-builder__focused-toolbar"
+    );
+    const config = import_configManager.default.get();
+    if (!config.enable || config.mode < import_types.ILivePreviewModeConfig.BUILDER) {
+      return;
+    }
+    (_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.send("init", {
+      isSSR: config.ssr,
+      href: window.location.href
+    }).then((data) => {
+      var _a2, _b;
+      const {
+        windowType = import_types.ILivePreviewWindowType.BUILDER,
+        stackDetails
+      } = data || {};
+      import_configManager.default.set("windowType", windowType);
+      import_configManager.default.set(
+        "stackDetails.masterLocale",
+        (stackDetails == null ? void 0 : stackDetails.masterLocale) || "en-us"
+      );
+      (0, import_listeners.addEventListeners)({
+        overlayWrapper: this.overlayWrapper,
+        visualBuilderContainer: this.visualBuilderContainer,
+        previousSelectedEditableDOM: _VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM,
+        focusedToolbar: this.focusedToolbar,
+        resizeObserver: this.resizeObserver,
+        customCursor: this.customCursor
+      });
+      (0, import_keyboardShortcuts.addKeyboardShortcuts)({
+        overlayWrapper: this.overlayWrapper,
+        visualBuilderContainer: this.visualBuilderContainer,
+        focusedToolbar: this.focusedToolbar,
+        resizeObserver: this.resizeObserver
+      });
+      (0, import_useScrollToField.useScrollToField)();
+      (0, import_useHighlightCommentIcon.useHighlightCommentIcon)();
+      this.mutationObserver.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+      (_a2 = import_visualBuilderPostMessage.default) == null ? void 0 : _a2.on(
+        import_postMessage.VisualBuilderPostMessageEvents.GET_ALL_ENTRIES_IN_CURRENT_PAGE,
+        import_getEntryIdentifiersInCurrentPage.getEntryIdentifiersInCurrentPage
+      );
+      (_b = import_visualBuilderPostMessage.default) == null ? void 0 : _b.send(
+        import_postMessage.VisualBuilderPostMessageEvents.SEND_VARIANT_AND_LOCALE
+      );
+      (0, import_useHideFocusOverlayPostMessageEvent.useHideFocusOverlayPostMessageEvent)({
+        overlayWrapper: this.overlayWrapper,
+        visualBuilderContainer: this.visualBuilderContainer,
+        focusedToolbar: this.focusedToolbar,
+        resizeObserver: this.resizeObserver
+      });
+      (0, import_postMessageEvent.useHistoryPostMessageEvent)();
+      (0, import_postMessageEvent.useOnEntryUpdatePostMessageEvent)();
+      (0, import_useRecalculateVariantDataCSLPValues.useRecalculateVariantDataCSLPValues)();
+      (0, import_useDraftFieldsPostMessageEvent.useDraftFieldsPostMessageEvent)();
+      (0, import_useVariantsPostMessageEvent.useVariantFieldsPostMessageEvent)();
+    }).catch(() => {
+      if (!(0, import_inIframe.inIframe)()) {
+        (0, import_generateStartEditingButton.generateStartEditingButton)(this.visualBuilderContainer);
+      }
+    });
+  }
+  handlePositionChange(editableElement) {
+    (0, import_updateFocussedState.updateFocussedState)({
+      editableElement,
+      visualBuilderContainer: this.visualBuilderContainer,
+      overlayWrapper: this.overlayWrapper,
+      focusedToolbar: this.focusedToolbar,
+      resizeObserver: this.resizeObserver
+    });
+  }
+};
+_VisualBuilder.VisualBuilderGlobalState = (0, import_signals.signal)({
+  previousSelectedEditableDOM: null,
+  previousHoveredTargetDOM: null,
+  previousEmptyBlockParents: [],
+  focusFieldValue: null,
+  audienceMode: false,
+  locale: import_configManager.default.get().stackDetails.masterLocale || "en-us",
+  variant: null
+});
+var VisualBuilder = _VisualBuilder;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VisualBuilder
+});
+//# sourceMappingURL=index.cjs.map

package/dist/legacy/visualBuilder/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/visualBuilder/index.ts"],"sourcesContent":["import { Signal, signal } from \"@preact/signals\";\n\nimport { inIframe } from \"../common/inIframe\";\nimport Config from \"../configManager/configManager\";\nimport {\n    useHistoryPostMessageEvent,\n    useOnEntryUpdatePostMessageEvent,\n} from \"../livePreview/eventManager/postMessageEvent.hooks\";\nimport {\n    ILivePreviewModeConfig,\n    ILivePreviewWindowType,\n    IVisualBuilderInitEvent,\n} from \"../types/types\";\nimport { generateStartEditingButton } from \"./generators/generateStartEditingButton\";\n\nimport { addFocusOverlay } from \"./generators/generateOverlay\";\nimport { getEntryIdentifiersInCurrentPage } from \"./utils/getEntryIdentifiersInCurrentPage\";\nimport visualBuilderPostMessage from \"./utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"./utils/types/postMessage.types\";\n\nimport { setup } from \"goober\";\nimport { debounce, isEqual } from \"lodash-es\";\nimport { h } from \"preact\";\nimport { extractDetailsFromCslp } from \"../cslp\";\nimport initUI from \"./components\";\nimport { useDraftFieldsPostMessageEvent } from \"./eventManager/useDraftFieldsPostMessageEvent\";\nimport { useHideFocusOverlayPostMessageEvent } from \"./eventManager/useHideFocusOverlayPostMessageEvent\";\nimport { useScrollToField } from \"./eventManager/useScrollToField\";\nimport { useVariantFieldsPostMessageEvent } from \"./eventManager/useVariantsPostMessageEvent\";\nimport {\n    generateEmptyBlocks,\n    removeEmptyBlocks,\n} from \"./generators/generateEmptyBlock\";\nimport { addEventListeners, removeEventListeners } from \"./listeners\";\nimport { addKeyboardShortcuts } from \"./listeners/keyboardShortcuts\";\nimport { FieldSchemaMap } from \"./utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"./utils/isFieldDisabled\";\nimport {\n    updateFocussedState,\n    updateFocussedStateOnMutation,\n} from \"./utils/updateFocussedState\";\nimport { useHighlightCommentIcon } from \"./eventManager/useHighlightCommentIcon\";\nimport { updateHighlightedCommentIconPosition } from \"./generators/generateHighlightedComment\";\nimport { useRecalculateVariantDataCSLPValues } from \"./eventManager/useRecalculateVariantDataCSLPValues\";\n\ninterface VisualBuilderGlobalStateImpl {\n    previousSelectedEditableDOM: HTMLElement | Element | null;\n    previousHoveredTargetDOM: Element | null;\n    previousEmptyBlockParents: Element[] | [];\n    focusFieldValue: string | null;\n    audienceMode: boolean;\n    locale: string;\n    variant: string | null;\n}\n\nexport class VisualBuilder {\n    private customCursor: HTMLDivElement | null = null;\n    private overlayWrapper: HTMLDivElement | null = null;\n    private visualBuilderContainer: HTMLDivElement | null = null;\n    private focusedToolbar: HTMLDivElement | null = null;\n\n    static VisualBuilderGlobalState: Signal<VisualBuilderGlobalStateImpl> =\n        signal({\n            previousSelectedEditableDOM: null,\n            previousHoveredTargetDOM: null,\n            previousEmptyBlockParents: [],\n            focusFieldValue: null,\n            audienceMode: false,\n            locale: Config.get().stackDetails.masterLocale || \"en-us\",\n            variant: null,\n        });\n\n    private handlePositionChange(editableElement: HTMLElement) {\n        updateFocussedState({\n            editableElement,\n            visualBuilderContainer: this.visualBuilderContainer,\n            overlayWrapper: this.overlayWrapper,\n            focusedToolbar: this.focusedToolbar,\n            resizeObserver: this.resizeObserver,\n        });\n    }\n\n    private scrollEventHandler = () => {\n        updateHighlightedCommentIconPosition(); // Update icons position\n    };\n\n    private resizeEventHandler = () => {\n        const previousSelectedEditableDOM =\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM;\n        updateHighlightedCommentIconPosition();\n        if (previousSelectedEditableDOM) {\n            this.handlePositionChange(\n                previousSelectedEditableDOM as HTMLElement\n            );\n        }\n    };\n\n    private resizeObserver = new ResizeObserver(([entry]) => {\n        const previousSelectedEditableDOM =\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM;\n\n        if (!this.overlayWrapper || !previousSelectedEditableDOM) {\n            return;\n        }\n\n        // if previous selected editable element is not same as the current\n        // target and the target is also not psuedo-editable then return\n        if (\n            !entry.target.isSameNode(previousSelectedEditableDOM) &&\n            !entry.target.classList.contains(\n                \"visual-builder__pseudo-editable-element\"\n            )\n        ) {\n            return;\n        }\n\n        const isPsuedoEditableElement = entry.target.classList.contains(\n            \"visual-builder__pseudo-editable-element\"\n        );\n\n        // the \"actual\" editable element when the current target is psuedo-editable\n        // is the previous selected editable element instead of the closest data-cslp element\n        // (cant use closest because the psuedo editable is absolute positioned)\n        // (Note - why do we even need the closest? we do an early exit if entry.target\n        // is not the previous selected editable element, needs more investigation)\n        const editableElement = (\n            isPsuedoEditableElement\n                ? previousSelectedEditableDOM\n                : entry.target.closest(\"[data-cslp]\")\n        ) as HTMLElement | null;\n\n        if (isPsuedoEditableElement) {\n            // if the current target is psuedo-editable, then the resizing occurred by typing\n            // into the psuedo editable, simply update the focus overlay\n            addFocusOverlay(entry.target, this.overlayWrapper);\n\n            // TODO check if we can now resize the actual editable element\n            // when psuedo editable element is resized, avoid infinite loops\n        } else if (editableElement) {\n            this.handlePositionChange(editableElement);\n        }\n\n        // update the overlay if field is disabled\n        const cslpData =\n            editableElement && editableElement.getAttribute(\"data-cslp\");\n\n        if (!editableElement || !cslpData) {\n            return;\n        }\n\n        const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n        FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        ).then((fieldSchema) => {\n            if (!fieldSchema) {\n                return;\n            }\n            const { isDisabled } = isFieldDisabled(fieldSchema, {\n                editableElement,\n                fieldMetadata,\n            });\n            if (isDisabled) {\n                addFocusOverlay(\n                    editableElement,\n                    this.overlayWrapper as HTMLDivElement,\n                    isDisabled\n                );\n            }\n        });\n    });\n\n    private mutationObserver = new MutationObserver(\n        debounce(\n            async () => {\n                updateFocussedStateOnMutation(\n                    this.overlayWrapper,\n                    this.focusedToolbar,\n                    this.visualBuilderContainer,\n                    this.resizeObserver\n                );\n                const emptyBlockParents = Array.from(\n                    document.querySelectorAll(\n                        \".visual-builder__empty-block-parent\"\n                    )\n                );\n\n                const previousEmptyBlockParents = VisualBuilder\n                    .VisualBuilderGlobalState.value\n                    .previousEmptyBlockParents as Element[];\n\n                if (!isEqual(emptyBlockParents, previousEmptyBlockParents)) {\n                    const noMoreEmptyBlockParent =\n                        previousEmptyBlockParents.filter(\n                            (x) => !emptyBlockParents.includes(x)\n                        );\n                    const newEmptyBlockParent = emptyBlockParents.filter(\n                        (x) => !previousEmptyBlockParents.includes(x)\n                    );\n\n                    removeEmptyBlocks(noMoreEmptyBlockParent);\n                    await generateEmptyBlocks(newEmptyBlockParent);\n\n                    VisualBuilder.VisualBuilderGlobalState.value = {\n                        ...VisualBuilder.VisualBuilderGlobalState.value,\n                        previousEmptyBlockParents: emptyBlockParents,\n                    };\n                }\n            },\n            100,\n            { trailing: true }\n        )\n    );\n\n    constructor() {\n        // Handles changes in element positions due to sidebar toggling or window resizing,\n        // triggering a redraw of the visual builder\n        window.addEventListener(\"resize\", this.resizeEventHandler);\n        window.addEventListener(\"scroll\", this.scrollEventHandler);\n        initUI({\n            resizeObserver: this.resizeObserver,\n        });\n\n        // Initializing goober for css-in-js\n        setup(h);\n\n        this.visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        );\n        this.overlayWrapper = document.querySelector(\n            \".visual-builder__overlay__wrapper\"\n        );\n        this.customCursor = document.querySelector(\".visual-builder__cursor\");\n        this.focusedToolbar = document.querySelector(\n            \".visual-builder__focused-toolbar\"\n        );\n\n        const config = Config.get();\n\n        if (!config.enable || config.mode < ILivePreviewModeConfig.BUILDER) {\n            return;\n        }\n        visualBuilderPostMessage\n            ?.send<IVisualBuilderInitEvent>(\"init\", {\n                isSSR: config.ssr,\n                href: window.location.href,\n            })\n            .then((data) => {\n                const {\n                    windowType = ILivePreviewWindowType.BUILDER,\n                    stackDetails,\n                } = data || {};\n                Config.set(\"windowType\", windowType);\n                Config.set(\n                    \"stackDetails.masterLocale\",\n                    stackDetails?.masterLocale || \"en-us\"\n                );\n\n                addEventListeners({\n                    overlayWrapper: this.overlayWrapper,\n                    visualBuilderContainer: this.visualBuilderContainer,\n                    previousSelectedEditableDOM:\n                        VisualBuilder.VisualBuilderGlobalState.value\n                            .previousSelectedEditableDOM,\n                    focusedToolbar: this.focusedToolbar,\n                    resizeObserver: this.resizeObserver,\n                    customCursor: this.customCursor,\n                });\n\n                addKeyboardShortcuts({\n                    overlayWrapper: this.overlayWrapper,\n                    visualBuilderContainer: this.visualBuilderContainer,\n                    focusedToolbar: this.focusedToolbar,\n                    resizeObserver: this.resizeObserver,\n                });\n                useScrollToField();\n                useHighlightCommentIcon();\n                this.mutationObserver.observe(document.body, {\n                    childList: true,\n                    subtree: true,\n                });\n\n                visualBuilderPostMessage?.on(\n                    VisualBuilderPostMessageEvents.GET_ALL_ENTRIES_IN_CURRENT_PAGE,\n                    getEntryIdentifiersInCurrentPage\n                );\n                visualBuilderPostMessage?.send(\n                    VisualBuilderPostMessageEvents.SEND_VARIANT_AND_LOCALE\n                );\n\n                useHideFocusOverlayPostMessageEvent({\n                    overlayWrapper: this.overlayWrapper,\n                    visualBuilderContainer: this.visualBuilderContainer,\n                    focusedToolbar: this.focusedToolbar,\n                    resizeObserver: this.resizeObserver,\n                });\n\n                // These events are used to sync the data when we made some changes in the entry without invoking live preview module.\n                useHistoryPostMessageEvent();\n                useOnEntryUpdatePostMessageEvent();\n                useRecalculateVariantDataCSLPValues();\n                useDraftFieldsPostMessageEvent();\n                useVariantFieldsPostMessageEvent();\n            })\n            .catch(() => {\n                if (!inIframe()) {\n                    generateStartEditingButton(this.visualBuilderContainer);\n                }\n            });\n    }\n\n    // TODO: write test cases\n    destroy = (): void => {\n        // Remove event listeners\n        window.removeEventListener(\"resize\", this.resizeEventHandler);\n        window.removeEventListener(\"scroll\", this.scrollEventHandler);\n\n        // Remove custom event listeners\n        removeEventListeners({\n            overlayWrapper: this.overlayWrapper,\n            visualBuilderContainer: this.visualBuilderContainer,\n            previousSelectedEditableDOM:\n                VisualBuilder.VisualBuilderGlobalState.value\n                    .previousSelectedEditableDOM,\n            focusedToolbar: this.focusedToolbar,\n            resizeObserver: this.resizeObserver,\n            customCursor: this.customCursor,\n        });\n\n        // Disconnect observers\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n\n        // Clear global state\n        VisualBuilder.VisualBuilderGlobalState.value = {\n            previousSelectedEditableDOM: null,\n            previousHoveredTargetDOM: null,\n            previousEmptyBlockParents: [],\n            focusFieldValue: null,\n            audienceMode: false,\n            locale: \"en-us\",\n            variant: null,\n        };\n\n        // Remove DOM elements\n        if (this.visualBuilderContainer) {\n            window.document.body.removeChild(this.visualBuilderContainer);\n        }\n        if (this.customCursor) {\n            this.customCursor.remove();\n        }\n        if (this.overlayWrapper) {\n            this.overlayWrapper.remove();\n        }\n        if (this.focusedToolbar) {\n            this.focusedToolbar.remove();\n        }\n\n        // Nullify references\n        this.customCursor = null;\n        this.overlayWrapper = null;\n        this.visualBuilderContainer = null;\n        this.focusedToolbar = null;\n    };\n}\n"],"mappings":"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","names":["initUI","Config","visualBuilderPostMessage","_a"]}

package/dist/legacy/visualBuilder/index.d.cts

@@ -0,0 +1,27 @@
+import { Signal } from '@preact/signals';
+
+interface VisualBuilderGlobalStateImpl {
+    previousSelectedEditableDOM: HTMLElement | Element | null;
+    previousHoveredTargetDOM: Element | null;
+    previousEmptyBlockParents: Element[] | [];
+    focusFieldValue: string | null;
+    audienceMode: boolean;
+    locale: string;
+    variant: string | null;
+}
+declare class VisualBuilder {
+    private customCursor;
+    private overlayWrapper;
+    private visualBuilderContainer;
+    private focusedToolbar;
+    static VisualBuilderGlobalState: Signal<VisualBuilderGlobalStateImpl>;
+    private handlePositionChange;
+    private scrollEventHandler;
+    private resizeEventHandler;
+    private resizeObserver;
+    private mutationObserver;
+    constructor();
+    destroy: () => void;
+}
+
+export { VisualBuilder };

package/dist/legacy/visualBuilder/index.d.ts

@@ -0,0 +1,27 @@
+import { Signal } from '@preact/signals';
+
+interface VisualBuilderGlobalStateImpl {
+    previousSelectedEditableDOM: HTMLElement | Element | null;
+    previousHoveredTargetDOM: Element | null;
+    previousEmptyBlockParents: Element[] | [];
+    focusFieldValue: string | null;
+    audienceMode: boolean;
+    locale: string;
+    variant: string | null;
+}
+declare class VisualBuilder {
+    private customCursor;
+    private overlayWrapper;
+    private visualBuilderContainer;
+    private focusedToolbar;
+    static VisualBuilderGlobalState: Signal<VisualBuilderGlobalStateImpl>;
+    private handlePositionChange;
+    private scrollEventHandler;
+    private resizeEventHandler;
+    private resizeObserver;
+    private mutationObserver;
+    constructor();
+    destroy: () => void;
+}
+
+export { VisualBuilder };