@contentstack/live-preview-utils 3.2.4 → 3.3.0

package/README.md

@@ -16,7 +16,7 @@ Alternatively, if you want to include the package directly in your website HTML
 
 ```html
 <script type='module'  integrity='sha384-b6G+ggU20rGxqCqsgaS6zludFgj5N11xsuXhMEIARMuQY2PtyDS04TU0H5goP+32' crossorigin="anonymous">
-     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@3.2.4';
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@3.2.5';
 
      ContentstackLivePreview.init({
         stackDetails: {

package/dist/legacy/index.d.cts

@@ -5,7 +5,7 @@ import './livePreview/types/onEntryChangeCallback.type.cjs';
 import './visualBuilder/types/collab.types.cjs';
 
 type IStackSdk = IStackSdk$1;
-declare const ContentstackLivePreview: typeof ContentstackLivePreview$1 | typeof LightLivePreviewHoC;
+declare const ContentstackLivePreview: typeof LightLivePreviewHoC | typeof ContentstackLivePreview$1;
 declare const VB_EmptyBlockParentClass = "visual-builder__empty-block-parent";
 
 export { type IStackSdk, VB_EmptyBlockParentClass, ContentstackLivePreview as default };

package/dist/legacy/index.d.ts

@@ -5,7 +5,7 @@ import './livePreview/types/onEntryChangeCallback.type.js';
 import './visualBuilder/types/collab.types.js';
 
 type IStackSdk = IStackSdk$1;
-declare const ContentstackLivePreview: typeof ContentstackLivePreview$1 | typeof LightLivePreviewHoC;
+declare const ContentstackLivePreview: typeof LightLivePreviewHoC | typeof ContentstackLivePreview$1;
 declare const VB_EmptyBlockParentClass = "visual-builder__empty-block-parent";
 
 export { type IStackSdk, VB_EmptyBlockParentClass, ContentstackLivePreview as default };

package/dist/legacy/light-sdk.cjs

@@ -60,7 +60,7 @@ var _LightLivePreviewHoC = class _LightLivePreviewHoC {
   static unsubscribeOnEntryChange() {
   }
   static getSdkVersion() {
-    return "3.2.4";
+    return "3.3.0";
   }
 };
 _LightLivePreviewHoC.previewConstructors = {};

package/dist/legacy/light-sdk.js

@@ -38,7 +38,7 @@ var _LightLivePreviewHoC = class _LightLivePreviewHoC {
   static unsubscribeOnEntryChange() {
   }
   static getSdkVersion() {
-    return "3.2.4";
+    return "3.3.0";
   }
 };
 _LightLivePreviewHoC.previewConstructors = {};

package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.cjs

@@ -89,7 +89,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
       config: {
         shouldReload: import_configManager.default.get().ssr,
         href: window.location.href,
-        sdkVersion: "3.2.4",
+        sdkVersion: "3.3.0",
         mode: import_configManager.default.get().mode
       }
     }

package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.js

@@ -55,7 +55,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
       config: {
         shouldReload: Config.get().ssr,
         href: window.location.href,
-        sdkVersion: "3.2.4",
+        sdkVersion: "3.3.0",
         mode: Config.get().mode
       }
     }

package/dist/legacy/livePreview/live-preview.cjs

@@ -59,8 +59,12 @@ var LivePreview = class {
       );
     }
     if (config.enable) {
-      if (typeof document !== void 0 && document.readyState === "complete") {
-        this.requestDataSync();
+      if (typeof document !== void 0) {
+        if (document.readyState === "interactive" || document.readyState === "complete") {
+          this.requestDataSync();
+        } else {
+          document.addEventListener("DOMContentLoaded", this.requestDataSync);
+        }
       } else {
         window.addEventListener("load", this.requestDataSync);
       }

package/dist/legacy/livePreview/live-preview.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/livePreview/live-preview.ts"],"sourcesContent":["import Config from \"../configManager/configManager\";\nimport { PublicLogger } from \"../logger/logger\";\nimport { ILivePreviewModeConfig } from \"../types/types\";\nimport { addLivePreviewQueryTags, isOpeningInTimeline } from \"../utils\";\nimport { LivePreviewEditButton } from \"./editButton/editButton\";\nimport { sendInitializeLivePreviewPostMessageEvent } from \"./eventManager/postMessageEvent.hooks\";\nimport { removeDataCslp } from \"./livePreviewProductionCleanup\";\nimport { removeFromOnChangeSubscribers } from \"./removeFromOnChangeSubscribers\";\nimport {\n    OnEntryChangeCallback,\n    OnEntryChangeCallbackSubscribers,\n    OnEntryChangeCallbackUID,\n    OnEntryChangeUnsubscribeParameters,\n} from \"./types/onEntryChangeCallback.type\";\n\nexport default class LivePreview {\n    /**\n     * @hideconstructor\n     */\n\n    private subscribers: OnEntryChangeCallbackSubscribers = {};\n\n    constructor() {\n        this.requestDataSync = this.requestDataSync.bind(this);\n        this.subscribeToOnEntryChange =\n            this.subscribeToOnEntryChange.bind(this);\n        this.publish = this.publish.bind(this);\n        this.unsubscribeOnEntryChange =\n            this.unsubscribeOnEntryChange.bind(this);\n\n        const config = Config.get();\n\n        if (config.debug) {\n            PublicLogger.debug(\n                \"Contentstack Live Preview Debugging mode: config --\",\n                Config.config\n            );\n        }\n\n        if (config.enable) {\n            if (\n                typeof document !== undefined &&\n                document.readyState === \"complete\"\n            ) {\n                this.requestDataSync();\n            } else {\n                window.addEventListener(\"load\", this.requestDataSync);\n            }\n\n            // TODO: capetown: add test cases for this condition.\n            // TODO: mjrf: Check if we need the second condition here.\n            // We are already handling the functions separately in the visual builder.\n            // render the hover outline only when edit button enable\n\n            if (\n                !isOpeningInTimeline() && \n                (config.editButton.enable ||\n                config.mode >= ILivePreviewModeConfig.BUILDER)\n            ) {\n                LivePreviewEditButton.livePreviewEditButton =\n                    new LivePreviewEditButton();\n            }\n\n        } else if (config.cleanCslpOnProduction) {\n            removeDataCslp();\n        }\n    }\n\n    // Request parent for data sync when document loads\n    private requestDataSync() {\n        const config = Config.get();\n\n        Config.set(\"onChange\", this.publish);\n\n        //! TODO: we replaced the handleOnChange() with this.\n        //! I don't think we need this. Confirm and remove it.\n        config.onChange();\n\n        sendInitializeLivePreviewPostMessageEvent();\n    }\n\n    subscribeToOnEntryChange(\n        callback: OnEntryChangeCallback,\n        callbackUid: OnEntryChangeCallbackUID\n    ): string {\n        this.subscribers[callbackUid] = callback;\n        return callbackUid;\n    }\n\n    private publish(): void {\n        Object.values<OnEntryChangeCallback>(this.subscribers).forEach(\n            (func) => {\n                func();\n            }\n        );\n    }\n\n    unsubscribeOnEntryChange(\n        callback: OnEntryChangeUnsubscribeParameters\n    ): void {\n        removeFromOnChangeSubscribers(this.subscribers, callback);\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAmB;AACnB,oBAA6B;AAC7B,mBAAuC;AACvC,mBAA6D;AAC7D,wBAAsC;AACtC,8BAA0D;AAC1D,0CAA+B;AAC/B,2CAA8C;AAQ9C,IAAqB,cAArB,MAAiC;AAAA,EAO7B,cAAc;AAFd;AAAA;AAAA;AAAA,SAAQ,cAAgD,CAAC;AAGrD,SAAK,kBAAkB,KAAK,gBAAgB,KAAK,IAAI;AACrD,SAAK,2BACD,KAAK,yBAAyB,KAAK,IAAI;AAC3C,SAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AACrC,SAAK,2BACD,KAAK,yBAAyB,KAAK,IAAI;AAE3C,UAAM,SAAS,qBAAAA,QAAO,IAAI;AAE1B,QAAI,OAAO,OAAO;AACd,iCAAa;AAAA,QACT;AAAA,QACA,qBAAAA,QAAO;AAAA,MACX;AAAA,IACJ;AAEA,QAAI,OAAO,QAAQ;AACf,UACI,OAAO,aAAa,UACpB,SAAS,eAAe,YAC1B;AACE,aAAK,gBAAgB;AAAA,MACzB,OAAO;AACH,eAAO,iBAAiB,QAAQ,KAAK,eAAe;AAAA,MACxD;AAOA,UACI,KAAC,kCAAoB,MACpB,OAAO,WAAW,UACnB,OAAO,QAAQ,oCAAuB,UACxC;AACE,gDAAsB,wBAClB,IAAI,wCAAsB;AAAA,MAClC;AAAA,IAEJ,WAAW,OAAO,uBAAuB;AACrC,8DAAe;AAAA,IACnB;AAAA,EACJ;AAAA;AAAA,EAGQ,kBAAkB;AACtB,UAAM,SAAS,qBAAAA,QAAO,IAAI;AAE1B,yBAAAA,QAAO,IAAI,YAAY,KAAK,OAAO;AAInC,WAAO,SAAS;AAEhB,2EAA0C;AAAA,EAC9C;AAAA,EAEA,yBACI,UACA,aACM;AACN,SAAK,YAAY,WAAW,IAAI;AAChC,WAAO;AAAA,EACX;AAAA,EAEQ,UAAgB;AACpB,WAAO,OAA8B,KAAK,WAAW,EAAE;AAAA,MACnD,CAAC,SAAS;AACN,aAAK;AAAA,MACT;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,yBACI,UACI;AACJ,4EAA8B,KAAK,aAAa,QAAQ;AAAA,EAC5D;AACJ;","names":["Config"]}
+{"version":3,"sources":["../../../src/livePreview/live-preview.ts"],"sourcesContent":["import Config from \"../configManager/configManager\";\nimport { PublicLogger } from \"../logger/logger\";\nimport { ILivePreviewModeConfig } from \"../types/types\";\nimport { addLivePreviewQueryTags, isOpeningInTimeline } from \"../utils\";\nimport { LivePreviewEditButton } from \"./editButton/editButton\";\nimport { sendInitializeLivePreviewPostMessageEvent } from \"./eventManager/postMessageEvent.hooks\";\nimport { removeDataCslp } from \"./livePreviewProductionCleanup\";\nimport { removeFromOnChangeSubscribers } from \"./removeFromOnChangeSubscribers\";\nimport {\n    OnEntryChangeCallback,\n    OnEntryChangeCallbackSubscribers,\n    OnEntryChangeCallbackUID,\n    OnEntryChangeUnsubscribeParameters,\n} from \"./types/onEntryChangeCallback.type\";\n\nexport default class LivePreview {\n    /**\n     * @hideconstructor\n     */\n\n    private subscribers: OnEntryChangeCallbackSubscribers = {};\n\n    constructor() {\n        this.requestDataSync = this.requestDataSync.bind(this);\n        this.subscribeToOnEntryChange =\n            this.subscribeToOnEntryChange.bind(this);\n        this.publish = this.publish.bind(this);\n        this.unsubscribeOnEntryChange =\n            this.unsubscribeOnEntryChange.bind(this);\n\n        const config = Config.get();\n\n        if (config.debug) {\n            PublicLogger.debug(\n                \"Contentstack Live Preview Debugging mode: config --\",\n                Config.config\n            );\n        }\n\n        if (config.enable) {\n            if (\n                typeof document !== undefined\n            ) {\n                if(document.readyState === \"interactive\" || document.readyState === \"complete\"){\n                    this.requestDataSync();\n                } else {\n                    document.addEventListener(\"DOMContentLoaded\", this.requestDataSync);\n                }\n            } else {\n                window.addEventListener(\"load\", this.requestDataSync);\n            }\n\n            // TODO: capetown: add test cases for this condition.\n            // TODO: mjrf: Check if we need the second condition here.\n            // We are already handling the functions separately in the visual builder.\n            // render the hover outline only when edit button enable\n\n            if (\n                !isOpeningInTimeline() && \n                (config.editButton.enable ||\n                config.mode >= ILivePreviewModeConfig.BUILDER)\n            ) {\n                LivePreviewEditButton.livePreviewEditButton =\n                    new LivePreviewEditButton();\n            }\n\n        } else if (config.cleanCslpOnProduction) {\n            removeDataCslp();\n        }\n    }\n\n    // Request parent for data sync when document loads\n    private requestDataSync() {\n        const config = Config.get();\n\n        Config.set(\"onChange\", this.publish);\n\n        //! TODO: we replaced the handleOnChange() with this.\n        //! I don't think we need this. Confirm and remove it.\n        config.onChange();\n\n        sendInitializeLivePreviewPostMessageEvent();\n    }\n\n    subscribeToOnEntryChange(\n        callback: OnEntryChangeCallback,\n        callbackUid: OnEntryChangeCallbackUID\n    ): string {\n        this.subscribers[callbackUid] = callback;\n        return callbackUid;\n    }\n\n    private publish(): void {\n        Object.values<OnEntryChangeCallback>(this.subscribers).forEach(\n            (func) => {\n                func();\n            }\n        );\n    }\n\n    unsubscribeOnEntryChange(\n        callback: OnEntryChangeUnsubscribeParameters\n    ): void {\n        removeFromOnChangeSubscribers(this.subscribers, callback);\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAmB;AACnB,oBAA6B;AAC7B,mBAAuC;AACvC,mBAA6D;AAC7D,wBAAsC;AACtC,8BAA0D;AAC1D,0CAA+B;AAC/B,2CAA8C;AAQ9C,IAAqB,cAArB,MAAiC;AAAA,EAO7B,cAAc;AAFd;AAAA;AAAA;AAAA,SAAQ,cAAgD,CAAC;AAGrD,SAAK,kBAAkB,KAAK,gBAAgB,KAAK,IAAI;AACrD,SAAK,2BACD,KAAK,yBAAyB,KAAK,IAAI;AAC3C,SAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AACrC,SAAK,2BACD,KAAK,yBAAyB,KAAK,IAAI;AAE3C,UAAM,SAAS,qBAAAA,QAAO,IAAI;AAE1B,QAAI,OAAO,OAAO;AACd,iCAAa;AAAA,QACT;AAAA,QACA,qBAAAA,QAAO;AAAA,MACX;AAAA,IACJ;AAEA,QAAI,OAAO,QAAQ;AACf,UACI,OAAO,aAAa,QACtB;AACE,YAAG,SAAS,eAAe,iBAAiB,SAAS,eAAe,YAAW;AAC3E,eAAK,gBAAgB;AAAA,QACzB,OAAO;AACH,mBAAS,iBAAiB,oBAAoB,KAAK,eAAe;AAAA,QACtE;AAAA,MACJ,OAAO;AACH,eAAO,iBAAiB,QAAQ,KAAK,eAAe;AAAA,MACxD;AAOA,UACI,KAAC,kCAAoB,MACpB,OAAO,WAAW,UACnB,OAAO,QAAQ,oCAAuB,UACxC;AACE,gDAAsB,wBAClB,IAAI,wCAAsB;AAAA,MAClC;AAAA,IAEJ,WAAW,OAAO,uBAAuB;AACrC,8DAAe;AAAA,IACnB;AAAA,EACJ;AAAA;AAAA,EAGQ,kBAAkB;AACtB,UAAM,SAAS,qBAAAA,QAAO,IAAI;AAE1B,yBAAAA,QAAO,IAAI,YAAY,KAAK,OAAO;AAInC,WAAO,SAAS;AAEhB,2EAA0C;AAAA,EAC9C;AAAA,EAEA,yBACI,UACA,aACM;AACN,SAAK,YAAY,WAAW,IAAI;AAChC,WAAO;AAAA,EACX;AAAA,EAEQ,UAAgB;AACpB,WAAO,OAA8B,KAAK,WAAW,EAAE;AAAA,MACnD,CAAC,SAAS;AACN,aAAK;AAAA,MACT;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,yBACI,UACI;AACJ,4EAA8B,KAAK,aAAa,QAAQ;AAAA,EAC5D;AACJ;","names":["Config"]}

package/dist/legacy/livePreview/live-preview.js

@@ -27,8 +27,12 @@ var LivePreview = class {
       );
     }
     if (config.enable) {
-      if (typeof document !== void 0 && document.readyState === "complete") {
-        this.requestDataSync();
+      if (typeof document !== void 0) {
+        if (document.readyState === "interactive" || document.readyState === "complete") {
+          this.requestDataSync();
+        } else {
+          document.addEventListener("DOMContentLoaded", this.requestDataSync);
+        }
       } else {
         window.addEventListener("load", this.requestDataSync);
       }

package/dist/legacy/livePreview/live-preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/livePreview/live-preview.ts"],"sourcesContent":["import Config from \"../configManager/configManager\";\nimport { PublicLogger } from \"../logger/logger\";\nimport { ILivePreviewModeConfig } from \"../types/types\";\nimport { addLivePreviewQueryTags, isOpeningInTimeline } from \"../utils\";\nimport { LivePreviewEditButton } from \"./editButton/editButton\";\nimport { sendInitializeLivePreviewPostMessageEvent } from \"./eventManager/postMessageEvent.hooks\";\nimport { removeDataCslp } from \"./livePreviewProductionCleanup\";\nimport { removeFromOnChangeSubscribers } from \"./removeFromOnChangeSubscribers\";\nimport {\n    OnEntryChangeCallback,\n    OnEntryChangeCallbackSubscribers,\n    OnEntryChangeCallbackUID,\n    OnEntryChangeUnsubscribeParameters,\n} from \"./types/onEntryChangeCallback.type\";\n\nexport default class LivePreview {\n    /**\n     * @hideconstructor\n     */\n\n    private subscribers: OnEntryChangeCallbackSubscribers = {};\n\n    constructor() {\n        this.requestDataSync = this.requestDataSync.bind(this);\n        this.subscribeToOnEntryChange =\n            this.subscribeToOnEntryChange.bind(this);\n        this.publish = this.publish.bind(this);\n        this.unsubscribeOnEntryChange =\n            this.unsubscribeOnEntryChange.bind(this);\n\n        const config = Config.get();\n\n        if (config.debug) {\n            PublicLogger.debug(\n                \"Contentstack Live Preview Debugging mode: config --\",\n                Config.config\n            );\n        }\n\n        if (config.enable) {\n            if (\n                typeof document !== undefined &&\n                document.readyState === \"complete\"\n            ) {\n                this.requestDataSync();\n            } else {\n                window.addEventListener(\"load\", this.requestDataSync);\n            }\n\n            // TODO: capetown: add test cases for this condition.\n            // TODO: mjrf: Check if we need the second condition here.\n            // We are already handling the functions separately in the visual builder.\n            // render the hover outline only when edit button enable\n\n            if (\n                !isOpeningInTimeline() && \n                (config.editButton.enable ||\n                config.mode >= ILivePreviewModeConfig.BUILDER)\n            ) {\n                LivePreviewEditButton.livePreviewEditButton =\n                    new LivePreviewEditButton();\n            }\n\n        } else if (config.cleanCslpOnProduction) {\n            removeDataCslp();\n        }\n    }\n\n    // Request parent for data sync when document loads\n    private requestDataSync() {\n        const config = Config.get();\n\n        Config.set(\"onChange\", this.publish);\n\n        //! TODO: we replaced the handleOnChange() with this.\n        //! I don't think we need this. Confirm and remove it.\n        config.onChange();\n\n        sendInitializeLivePreviewPostMessageEvent();\n    }\n\n    subscribeToOnEntryChange(\n        callback: OnEntryChangeCallback,\n        callbackUid: OnEntryChangeCallbackUID\n    ): string {\n        this.subscribers[callbackUid] = callback;\n        return callbackUid;\n    }\n\n    private publish(): void {\n        Object.values<OnEntryChangeCallback>(this.subscribers).forEach(\n            (func) => {\n                func();\n            }\n        );\n    }\n\n    unsubscribeOnEntryChange(\n        callback: OnEntryChangeUnsubscribeParameters\n    ): void {\n        removeFromOnChangeSubscribers(this.subscribers, callback);\n    }\n}\n"],"mappings":";;;AAAA,OAAO,YAAY;AACnB,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAkC,2BAA2B;AAC7D,SAAS,6BAA6B;AACtC,SAAS,iDAAiD;AAC1D,SAAS,sBAAsB;AAC/B,SAAS,qCAAqC;AAQ9C,IAAqB,cAArB,MAAiC;AAAA,EAO7B,cAAc;AAFd;AAAA;AAAA;AAAA,SAAQ,cAAgD,CAAC;AAGrD,SAAK,kBAAkB,KAAK,gBAAgB,KAAK,IAAI;AACrD,SAAK,2BACD,KAAK,yBAAyB,KAAK,IAAI;AAC3C,SAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AACrC,SAAK,2BACD,KAAK,yBAAyB,KAAK,IAAI;AAE3C,UAAM,SAAS,OAAO,IAAI;AAE1B,QAAI,OAAO,OAAO;AACd,mBAAa;AAAA,QACT;AAAA,QACA,OAAO;AAAA,MACX;AAAA,IACJ;AAEA,QAAI,OAAO,QAAQ;AACf,UACI,OAAO,aAAa,UACpB,SAAS,eAAe,YAC1B;AACE,aAAK,gBAAgB;AAAA,MACzB,OAAO;AACH,eAAO,iBAAiB,QAAQ,KAAK,eAAe;AAAA,MACxD;AAOA,UACI,CAAC,oBAAoB,MACpB,OAAO,WAAW,UACnB,OAAO,QAAQ,uBAAuB,UACxC;AACE,8BAAsB,wBAClB,IAAI,sBAAsB;AAAA,MAClC;AAAA,IAEJ,WAAW,OAAO,uBAAuB;AACrC,qBAAe;AAAA,IACnB;AAAA,EACJ;AAAA;AAAA,EAGQ,kBAAkB;AACtB,UAAM,SAAS,OAAO,IAAI;AAE1B,WAAO,IAAI,YAAY,KAAK,OAAO;AAInC,WAAO,SAAS;AAEhB,8CAA0C;AAAA,EAC9C;AAAA,EAEA,yBACI,UACA,aACM;AACN,SAAK,YAAY,WAAW,IAAI;AAChC,WAAO;AAAA,EACX;AAAA,EAEQ,UAAgB;AACpB,WAAO,OAA8B,KAAK,WAAW,EAAE;AAAA,MACnD,CAAC,SAAS;AACN,aAAK;AAAA,MACT;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,yBACI,UACI;AACJ,kCAA8B,KAAK,aAAa,QAAQ;AAAA,EAC5D;AACJ;","names":[]}
+{"version":3,"sources":["../../../src/livePreview/live-preview.ts"],"sourcesContent":["import Config from \"../configManager/configManager\";\nimport { PublicLogger } from \"../logger/logger\";\nimport { ILivePreviewModeConfig } from \"../types/types\";\nimport { addLivePreviewQueryTags, isOpeningInTimeline } from \"../utils\";\nimport { LivePreviewEditButton } from \"./editButton/editButton\";\nimport { sendInitializeLivePreviewPostMessageEvent } from \"./eventManager/postMessageEvent.hooks\";\nimport { removeDataCslp } from \"./livePreviewProductionCleanup\";\nimport { removeFromOnChangeSubscribers } from \"./removeFromOnChangeSubscribers\";\nimport {\n    OnEntryChangeCallback,\n    OnEntryChangeCallbackSubscribers,\n    OnEntryChangeCallbackUID,\n    OnEntryChangeUnsubscribeParameters,\n} from \"./types/onEntryChangeCallback.type\";\n\nexport default class LivePreview {\n    /**\n     * @hideconstructor\n     */\n\n    private subscribers: OnEntryChangeCallbackSubscribers = {};\n\n    constructor() {\n        this.requestDataSync = this.requestDataSync.bind(this);\n        this.subscribeToOnEntryChange =\n            this.subscribeToOnEntryChange.bind(this);\n        this.publish = this.publish.bind(this);\n        this.unsubscribeOnEntryChange =\n            this.unsubscribeOnEntryChange.bind(this);\n\n        const config = Config.get();\n\n        if (config.debug) {\n            PublicLogger.debug(\n                \"Contentstack Live Preview Debugging mode: config --\",\n                Config.config\n            );\n        }\n\n        if (config.enable) {\n            if (\n                typeof document !== undefined\n            ) {\n                if(document.readyState === \"interactive\" || document.readyState === \"complete\"){\n                    this.requestDataSync();\n                } else {\n                    document.addEventListener(\"DOMContentLoaded\", this.requestDataSync);\n                }\n            } else {\n                window.addEventListener(\"load\", this.requestDataSync);\n            }\n\n            // TODO: capetown: add test cases for this condition.\n            // TODO: mjrf: Check if we need the second condition here.\n            // We are already handling the functions separately in the visual builder.\n            // render the hover outline only when edit button enable\n\n            if (\n                !isOpeningInTimeline() && \n                (config.editButton.enable ||\n                config.mode >= ILivePreviewModeConfig.BUILDER)\n            ) {\n                LivePreviewEditButton.livePreviewEditButton =\n                    new LivePreviewEditButton();\n            }\n\n        } else if (config.cleanCslpOnProduction) {\n            removeDataCslp();\n        }\n    }\n\n    // Request parent for data sync when document loads\n    private requestDataSync() {\n        const config = Config.get();\n\n        Config.set(\"onChange\", this.publish);\n\n        //! TODO: we replaced the handleOnChange() with this.\n        //! I don't think we need this. Confirm and remove it.\n        config.onChange();\n\n        sendInitializeLivePreviewPostMessageEvent();\n    }\n\n    subscribeToOnEntryChange(\n        callback: OnEntryChangeCallback,\n        callbackUid: OnEntryChangeCallbackUID\n    ): string {\n        this.subscribers[callbackUid] = callback;\n        return callbackUid;\n    }\n\n    private publish(): void {\n        Object.values<OnEntryChangeCallback>(this.subscribers).forEach(\n            (func) => {\n                func();\n            }\n        );\n    }\n\n    unsubscribeOnEntryChange(\n        callback: OnEntryChangeUnsubscribeParameters\n    ): void {\n        removeFromOnChangeSubscribers(this.subscribers, callback);\n    }\n}\n"],"mappings":";;;AAAA,OAAO,YAAY;AACnB,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAkC,2BAA2B;AAC7D,SAAS,6BAA6B;AACtC,SAAS,iDAAiD;AAC1D,SAAS,sBAAsB;AAC/B,SAAS,qCAAqC;AAQ9C,IAAqB,cAArB,MAAiC;AAAA,EAO7B,cAAc;AAFd;AAAA;AAAA;AAAA,SAAQ,cAAgD,CAAC;AAGrD,SAAK,kBAAkB,KAAK,gBAAgB,KAAK,IAAI;AACrD,SAAK,2BACD,KAAK,yBAAyB,KAAK,IAAI;AAC3C,SAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AACrC,SAAK,2BACD,KAAK,yBAAyB,KAAK,IAAI;AAE3C,UAAM,SAAS,OAAO,IAAI;AAE1B,QAAI,OAAO,OAAO;AACd,mBAAa;AAAA,QACT;AAAA,QACA,OAAO;AAAA,MACX;AAAA,IACJ;AAEA,QAAI,OAAO,QAAQ;AACf,UACI,OAAO,aAAa,QACtB;AACE,YAAG,SAAS,eAAe,iBAAiB,SAAS,eAAe,YAAW;AAC3E,eAAK,gBAAgB;AAAA,QACzB,OAAO;AACH,mBAAS,iBAAiB,oBAAoB,KAAK,eAAe;AAAA,QACtE;AAAA,MACJ,OAAO;AACH,eAAO,iBAAiB,QAAQ,KAAK,eAAe;AAAA,MACxD;AAOA,UACI,CAAC,oBAAoB,MACpB,OAAO,WAAW,UACnB,OAAO,QAAQ,uBAAuB,UACxC;AACE,8BAAsB,wBAClB,IAAI,sBAAsB;AAAA,MAClC;AAAA,IAEJ,WAAW,OAAO,uBAAuB;AACrC,qBAAe;AAAA,IACnB;AAAA,EACJ;AAAA;AAAA,EAGQ,kBAAkB;AACtB,UAAM,SAAS,OAAO,IAAI;AAE1B,WAAO,IAAI,YAAY,KAAK,OAAO;AAInC,WAAO,SAAS;AAEhB,8CAA0C;AAAA,EAC9C;AAAA,EAEA,yBACI,UACA,aACM;AACN,SAAK,YAAY,WAAW,IAAI;AAChC,WAAO;AAAA,EACX;AAAA,EAEQ,UAAgB;AACpB,WAAO,OAA8B,KAAK,WAAW,EAAE;AAAA,MACnD,CAAC,SAAS;AACN,aAAK;AAAA,MACT;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,yBACI,UACI;AACJ,kCAA8B,KAAK,aAAa,QAAQ;AAAA,EAC5D;AACJ;","names":[]}

package/dist/legacy/preview/contentstack-live-preview-HOC.cjs

@@ -227,7 +227,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
    * @returns The version of the SDK as a string.
    */
   static getSdkVersion() {
-    return "3.2.4";
+    return "3.3.0";
   }
 };
 _ContentstackLivePreview.previewConstructors = {};

package/dist/legacy/preview/contentstack-live-preview-HOC.js

@@ -195,7 +195,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
    * @returns The version of the SDK as a string.
    */
   static getSdkVersion() {
-    return "3.2.4";
+    return "3.3.0";
   }
 };
 _ContentstackLivePreview.previewConstructors = {};

package/dist/legacy/utils/index.cjs

@@ -23,6 +23,7 @@ __export(utils_exports, {
   addLivePreviewQueryTags: () => import_addLivePreviewQueryTags.addLivePreviewQueryTags,
   addParamsToUrl: () => addParamsToUrl,
   hasWindow: () => hasWindow,
+  isOpenInBuilder: () => isOpenInBuilder,
   isOpeningInTimeline: () => isOpeningInTimeline
 });
 module.exports = __toCommonJS(utils_exports);
@@ -49,11 +50,20 @@ function isOpeningInTimeline() {
   }
   return false;
 }
+function isOpenInBuilder() {
+  if (hasWindow()) {
+    const urlParams = new URLSearchParams(window.location.search);
+    const builder = urlParams.get("builder");
+    return !!builder;
+  }
+  return false;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   addLivePreviewQueryTags,
   addParamsToUrl,
   hasWindow,
+  isOpenInBuilder,
   isOpeningInTimeline
 });
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["import { PublicLogger } from \"../logger/logger\";\nimport { addLivePreviewQueryTags } from \"./addLivePreviewQueryTags\";\nexport function hasWindow(): boolean {\n    return typeof window !== \"undefined\";\n}\nexport { addLivePreviewQueryTags };\nexport function addParamsToUrl() {\n    // Setting the query params to all the click events related to current domain\n    window.addEventListener(\"click\", (event: any) => {\n        const target: any = event.target;\n        const targetHref: string | any = target.href;\n        const docOrigin: string = document.location.origin;\n        if (\n            targetHref &&\n            targetHref.includes(docOrigin) &&\n            !targetHref.includes(\"live_preview\")\n        ) {\n            const newUrl = addLivePreviewQueryTags(target.href);\n            event.target.href = newUrl || target.href;\n        }\n    });\n}\nexport function isOpeningInTimeline(): boolean {\n    if (hasWindow()) {\n        const urlParams = new URLSearchParams(window.location.search);\n        const previewTimestamp = urlParams.get(\"preview_timestamp\");\n        return !!previewTimestamp;\n    }\n    return false;\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,qCAAwC;AACjC,SAAS,YAAqB;AACjC,SAAO,OAAO,WAAW;AAC7B;AAEO,SAAS,iBAAiB;AAE7B,SAAO,iBAAiB,SAAS,CAAC,UAAe;AAC7C,UAAM,SAAc,MAAM;AAC1B,UAAM,aAA2B,OAAO;AACxC,UAAM,YAAoB,SAAS,SAAS;AAC5C,QACI,cACA,WAAW,SAAS,SAAS,KAC7B,CAAC,WAAW,SAAS,cAAc,GACrC;AACE,YAAM,aAAS,wDAAwB,OAAO,IAAI;AAClD,YAAM,OAAO,OAAO,UAAU,OAAO;AAAA,IACzC;AAAA,EACJ,CAAC;AACL;AACO,SAAS,sBAA+B;AAC3C,MAAI,UAAU,GAAG;AACb,UAAM,YAAY,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAC5D,UAAM,mBAAmB,UAAU,IAAI,mBAAmB;AAC1D,WAAO,CAAC,CAAC;AAAA,EACb;AACA,SAAO;AACX;","names":[]}
+{"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["import { PublicLogger } from \"../logger/logger\";\nimport { addLivePreviewQueryTags } from \"./addLivePreviewQueryTags\";\nexport function hasWindow(): boolean {\n    return typeof window !== \"undefined\";\n}\nexport { addLivePreviewQueryTags };\nexport function addParamsToUrl() {\n    // Setting the query params to all the click events related to current domain\n    window.addEventListener(\"click\", (event: any) => {\n        const target: any = event.target;\n        const targetHref: string | any = target.href;\n        const docOrigin: string = document.location.origin;\n        if (\n            targetHref &&\n            targetHref.includes(docOrigin) &&\n            !targetHref.includes(\"live_preview\")\n        ) {\n            const newUrl = addLivePreviewQueryTags(target.href);\n            event.target.href = newUrl || target.href;\n        }\n    });\n}\nexport function isOpeningInTimeline(): boolean {\n    if (hasWindow()) {\n        const urlParams = new URLSearchParams(window.location.search);\n        const previewTimestamp = urlParams.get(\"preview_timestamp\");\n        return !!previewTimestamp;\n    }\n    return false;\n}\n\nexport function isOpenInBuilder(): boolean {\n    if (hasWindow()) {\n        const urlParams = new URLSearchParams(window.location.search);\n        const builder = urlParams.get(\"builder\");\n        return !!builder;\n    }\n    return false;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,qCAAwC;AACjC,SAAS,YAAqB;AACjC,SAAO,OAAO,WAAW;AAC7B;AAEO,SAAS,iBAAiB;AAE7B,SAAO,iBAAiB,SAAS,CAAC,UAAe;AAC7C,UAAM,SAAc,MAAM;AAC1B,UAAM,aAA2B,OAAO;AACxC,UAAM,YAAoB,SAAS,SAAS;AAC5C,QACI,cACA,WAAW,SAAS,SAAS,KAC7B,CAAC,WAAW,SAAS,cAAc,GACrC;AACE,YAAM,aAAS,wDAAwB,OAAO,IAAI;AAClD,YAAM,OAAO,OAAO,UAAU,OAAO;AAAA,IACzC;AAAA,EACJ,CAAC;AACL;AACO,SAAS,sBAA+B;AAC3C,MAAI,UAAU,GAAG;AACb,UAAM,YAAY,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAC5D,UAAM,mBAAmB,UAAU,IAAI,mBAAmB;AAC1D,WAAO,CAAC,CAAC;AAAA,EACb;AACA,SAAO;AACX;AAEO,SAAS,kBAA2B;AACvC,MAAI,UAAU,GAAG;AACb,UAAM,YAAY,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAC5D,UAAM,UAAU,UAAU,IAAI,SAAS;AACvC,WAAO,CAAC,CAAC;AAAA,EACb;AACA,SAAO;AACX;","names":[]}

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

@@ -4,5 +4,6 @@ declare function hasWindow(): boolean;
 
 declare function addParamsToUrl(): void;
 declare function isOpeningInTimeline(): boolean;
+declare function isOpenInBuilder(): boolean;
 
-export { addParamsToUrl, hasWindow, isOpeningInTimeline };
+export { addParamsToUrl, hasWindow, isOpenInBuilder, isOpeningInTimeline };

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

@@ -4,5 +4,6 @@ declare function hasWindow(): boolean;
 
 declare function addParamsToUrl(): void;
 declare function isOpeningInTimeline(): boolean;
+declare function isOpenInBuilder(): boolean;
 
-export { addParamsToUrl, hasWindow, isOpeningInTimeline };
+export { addParamsToUrl, hasWindow, isOpenInBuilder, isOpeningInTimeline };

package/dist/legacy/utils/index.js

@@ -24,10 +24,19 @@ function isOpeningInTimeline() {
   }
   return false;
 }
+function isOpenInBuilder() {
+  if (hasWindow()) {
+    const urlParams = new URLSearchParams(window.location.search);
+    const builder = urlParams.get("builder");
+    return !!builder;
+  }
+  return false;
+}
 export {
   addLivePreviewQueryTags,
   addParamsToUrl,
   hasWindow,
+  isOpenInBuilder,
   isOpeningInTimeline
 };
 //# sourceMappingURL=index.js.map

package/dist/legacy/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["import { PublicLogger } from \"../logger/logger\";\nimport { addLivePreviewQueryTags } from \"./addLivePreviewQueryTags\";\nexport function hasWindow(): boolean {\n    return typeof window !== \"undefined\";\n}\nexport { addLivePreviewQueryTags };\nexport function addParamsToUrl() {\n    // Setting the query params to all the click events related to current domain\n    window.addEventListener(\"click\", (event: any) => {\n        const target: any = event.target;\n        const targetHref: string | any = target.href;\n        const docOrigin: string = document.location.origin;\n        if (\n            targetHref &&\n            targetHref.includes(docOrigin) &&\n            !targetHref.includes(\"live_preview\")\n        ) {\n            const newUrl = addLivePreviewQueryTags(target.href);\n            event.target.href = newUrl || target.href;\n        }\n    });\n}\nexport function isOpeningInTimeline(): boolean {\n    if (hasWindow()) {\n        const urlParams = new URLSearchParams(window.location.search);\n        const previewTimestamp = urlParams.get(\"preview_timestamp\");\n        return !!previewTimestamp;\n    }\n    return false;\n}"],"mappings":";;;AACA,SAAS,+BAA+B;AACjC,SAAS,YAAqB;AACjC,SAAO,OAAO,WAAW;AAC7B;AAEO,SAAS,iBAAiB;AAE7B,SAAO,iBAAiB,SAAS,CAAC,UAAe;AAC7C,UAAM,SAAc,MAAM;AAC1B,UAAM,aAA2B,OAAO;AACxC,UAAM,YAAoB,SAAS,SAAS;AAC5C,QACI,cACA,WAAW,SAAS,SAAS,KAC7B,CAAC,WAAW,SAAS,cAAc,GACrC;AACE,YAAM,SAAS,wBAAwB,OAAO,IAAI;AAClD,YAAM,OAAO,OAAO,UAAU,OAAO;AAAA,IACzC;AAAA,EACJ,CAAC;AACL;AACO,SAAS,sBAA+B;AAC3C,MAAI,UAAU,GAAG;AACb,UAAM,YAAY,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAC5D,UAAM,mBAAmB,UAAU,IAAI,mBAAmB;AAC1D,WAAO,CAAC,CAAC;AAAA,EACb;AACA,SAAO;AACX;","names":[]}
+{"version":3,"sources":["../../../src/utils/index.ts"],"sourcesContent":["import { PublicLogger } from \"../logger/logger\";\nimport { addLivePreviewQueryTags } from \"./addLivePreviewQueryTags\";\nexport function hasWindow(): boolean {\n    return typeof window !== \"undefined\";\n}\nexport { addLivePreviewQueryTags };\nexport function addParamsToUrl() {\n    // Setting the query params to all the click events related to current domain\n    window.addEventListener(\"click\", (event: any) => {\n        const target: any = event.target;\n        const targetHref: string | any = target.href;\n        const docOrigin: string = document.location.origin;\n        if (\n            targetHref &&\n            targetHref.includes(docOrigin) &&\n            !targetHref.includes(\"live_preview\")\n        ) {\n            const newUrl = addLivePreviewQueryTags(target.href);\n            event.target.href = newUrl || target.href;\n        }\n    });\n}\nexport function isOpeningInTimeline(): boolean {\n    if (hasWindow()) {\n        const urlParams = new URLSearchParams(window.location.search);\n        const previewTimestamp = urlParams.get(\"preview_timestamp\");\n        return !!previewTimestamp;\n    }\n    return false;\n}\n\nexport function isOpenInBuilder(): boolean {\n    if (hasWindow()) {\n        const urlParams = new URLSearchParams(window.location.search);\n        const builder = urlParams.get(\"builder\");\n        return !!builder;\n    }\n    return false;\n}\n"],"mappings":";;;AACA,SAAS,+BAA+B;AACjC,SAAS,YAAqB;AACjC,SAAO,OAAO,WAAW;AAC7B;AAEO,SAAS,iBAAiB;AAE7B,SAAO,iBAAiB,SAAS,CAAC,UAAe;AAC7C,UAAM,SAAc,MAAM;AAC1B,UAAM,aAA2B,OAAO;AACxC,UAAM,YAAoB,SAAS,SAAS;AAC5C,QACI,cACA,WAAW,SAAS,SAAS,KAC7B,CAAC,WAAW,SAAS,cAAc,GACrC;AACE,YAAM,SAAS,wBAAwB,OAAO,IAAI;AAClD,YAAM,OAAO,OAAO,UAAU,OAAO;AAAA,IACzC;AAAA,EACJ,CAAC;AACL;AACO,SAAS,sBAA+B;AAC3C,MAAI,UAAU,GAAG;AACb,UAAM,YAAY,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAC5D,UAAM,mBAAmB,UAAU,IAAI,mBAAmB;AAC1D,WAAO,CAAC,CAAC;AAAA,EACb;AACA,SAAO;AACX;AAEO,SAAS,kBAA2B;AACvC,MAAI,UAAU,GAAG;AACb,UAAM,YAAY,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAC5D,UAAM,UAAU,UAAU,IAAI,SAAS;AACvC,WAAO,CAAC,CAAC;AAAA,EACb;AACA,SAAO;AACX;","names":[]}

package/dist/legacy/visualBuilder/components/Tooltip.cjs

@@ -0,0 +1,167 @@
+"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/components/Tooltip.tsx
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  ToolbarTooltip: () => ToolbarTooltip,
+  default: () => Tooltip_default
+});
+module.exports = __toCommonJS(Tooltip_exports);
+var import_preact = require("preact");
+var import_hooks = require("preact/hooks");
+var import_dom = require("@floating-ui/dom");
+var import_visualBuilder = require("../visualBuilder.style.cjs");
+var import_classnames = __toESM(require("classnames"), 1);
+var import_icons = require("./icons/index.cjs");
+var import_generateCustomCursor = require("../generators/generateCustomCursor.cjs");
+var import_jsx_runtime = require("preact/jsx-runtime");
+var Tooltip = ({ children, content, placement = "top-start" }) => {
+  const [isVisible, setIsVisible] = (0, import_hooks.useState)(false);
+  const triggerRef = (0, import_hooks.useRef)(null);
+  const tooltipRef = (0, import_hooks.useRef)(null);
+  const arrowRef = (0, import_hooks.useRef)(null);
+  const showTooltip = () => setIsVisible(true);
+  const hideTooltip = () => setIsVisible(false);
+  (0, import_hooks.useEffect)(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const trigger = triggerRef.current;
+    const tooltip = tooltipRef.current;
+    (0, import_dom.computePosition)(trigger, tooltip, {
+      placement,
+      // Middleware runs in order to modify the position
+      middleware: [
+        (0, import_dom.offset)(8),
+        // Add 8px of space between the trigger and tooltip
+        (0, import_dom.flip)(),
+        // Flip to the opposite side if it overflows
+        (0, import_dom.shift)({ padding: 5 }),
+        // Shift to keep it in view
+        ...arrowRef.current ? [(0, import_dom.arrow)({ element: arrowRef.current })] : []
+        // Handle arrow positioning
+      ]
+    }).then(({ x, y, placement: placement2, middlewareData }) => {
+      Object.assign(tooltip.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      if (middlewareData.arrow && arrowRef.current) {
+        const { x: arrowX, y: arrowY } = middlewareData.arrow;
+        const side = placement2.split("-")[0];
+        const staticSide = {
+          top: "bottom",
+          right: "left",
+          bottom: "top",
+          left: "right"
+        }[side];
+        const arrowElement = arrowRef.current;
+        Object.assign(arrowElement.style, {
+          left: "",
+          top: "",
+          right: "",
+          bottom: ""
+        });
+        if (placement2.includes("-start") || placement2.includes("-end")) {
+          const tooltipRect = tooltip.getBoundingClientRect();
+          if (side === "top" || side === "bottom") {
+            arrowElement.style.left = `${14}px`;
+            if (arrowY != null) {
+              arrowElement.style.top = `${arrowY}px`;
+            }
+          } else {
+            arrowElement.style.top = `${tooltipRect.height / 2 - 4}px`;
+            if (arrowX != null) {
+              arrowElement.style.left = `${arrowX}px`;
+            }
+          }
+        } else {
+          if (arrowX != null) {
+            arrowElement.style.left = `${arrowX}px`;
+          }
+          if (arrowY != null) {
+            arrowElement.style.top = `${arrowY}px`;
+          }
+        }
+        arrowElement.style[staticSide] = "-4px";
+      }
+    });
+  }, [isVisible, placement, content]);
+  const triggerWithListeners = (0, import_preact.cloneElement)(children, {
+    ref: triggerRef,
+    onMouseEnter: showTooltip,
+    onMouseLeave: hideTooltip,
+    onFocus: showTooltip,
+    onBlur: hideTooltip,
+    "aria-describedby": "lightweight-tooltip"
+    // for accessibility
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    triggerWithListeners,
+    isVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: tooltipRef,
+        role: "tooltip",
+        id: "lightweight-tooltip",
+        className: (0, import_classnames.default)("tooltip-container", (0, import_visualBuilder.visualBuilderStyles)()["tooltip-container"]),
+        children: [
+          content,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: arrowRef, className: (0, import_classnames.default)("tooltip-arrow", (0, import_visualBuilder.visualBuilderStyles)()["tooltip-arrow"]) })
+        ]
+      }
+    )
+  ] });
+};
+function ToolbarTooltipContent({ contentTypeName, referenceFieldName }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_classnames.default)("toolbar-tooltip-content", (0, import_visualBuilder.visualBuilderStyles)()["toolbar-tooltip-content"]), children: [
+    contentTypeName && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_classnames.default)("toolbar-tooltip-content-item", (0, import_visualBuilder.visualBuilderStyles)()["toolbar-tooltip-content-item"]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ContentTypeIcon, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: contentTypeName })
+    ] }),
+    referenceFieldName && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_classnames.default)("toolbar-tooltip-content-item", (0, import_visualBuilder.visualBuilderStyles)()["toolbar-tooltip-content-item"]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: import_generateCustomCursor.FieldTypeIconsMap.reference }, className: (0, import_classnames.default)("visual-builder__field-icon", (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__field-icon"]) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: referenceFieldName })
+    ] })
+  ] });
+}
+function ToolbarTooltip({ children, data, disabled = false }) {
+  if (disabled) {
+    return children;
+  }
+  const { contentTypeName, referenceFieldName } = data;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarTooltipContent, { contentTypeName, referenceFieldName }), children });
+}
+var Tooltip_default = Tooltip;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToolbarTooltip
+});
+//# sourceMappingURL=Tooltip.cjs.map

package/dist/legacy/visualBuilder/components/Tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/Tooltip.tsx"],"sourcesContent":["import { h, cloneElement } from 'preact';\nimport { useState, useEffect, useRef } from 'preact/hooks';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow\n} from '@floating-ui/dom';\nimport { visualBuilderStyles } from '../visualBuilder.style';\nimport classNames from 'classnames';\nimport { ContentTypeIcon } from './icons';\nimport { FieldTypeIconsMap } from '../generators/generateCustomCursor';\ninterface TooltipProps {\n  children: JSX.Element;\n  content: JSX.Element;\n  placement?: 'top-start' | 'bottom-start' | 'left-start' | 'right-start';\n}\n\n/**\n * A lightweight, reusable tooltip component for Preact powered by Floating UI.\n *\n * @param {object} props - The component props.\n * @param {preact.ComponentChildren} props.children - The single child element that triggers the tooltip.\n * @param {string | preact.VNode} props.content - The content to display inside the tooltip.\n * @param {'top'|'bottom'|'left'|'right'} [props.placement='top'] - The desired placement of the tooltip.\n */\nconst Tooltip = ({ children, content, placement = 'top-start' }: TooltipProps) => {\n    const [isVisible, setIsVisible] = useState(false);\n    // Create refs for the trigger and the floating tooltip elements\n    const triggerRef = useRef(null);\n    const tooltipRef = useRef(null);\n    const arrowRef = useRef(null);\n\n    const showTooltip = () => setIsVisible(true);\n    const hideTooltip = () => setIsVisible(false);\n\n    // This effect calculates the tooltip's position whenever it becomes visible\n    // or if its content or placement changes.\n    useEffect(() => {\n        if (!isVisible || !triggerRef.current || !tooltipRef.current) {\n            return;\n        }\n\n        const trigger = triggerRef.current as HTMLElement;\n        const tooltip = tooltipRef.current as HTMLElement;\n\n        computePosition(trigger, tooltip, {\n            placement,\n            // Middleware runs in order to modify the position\n            middleware: [\n                offset(8), // Add 8px of space between the trigger and tooltip\n                flip(),    // Flip to the opposite side if it overflows\n                shift({ padding: 5 }), // Shift to keep it in view\n                ...(arrowRef.current ? [arrow({ element: arrowRef.current as HTMLElement })] : []), // Handle arrow positioning\n            ],\n        }).then(({ x, y, placement, middlewareData }) => {\n            // Apply the calculated coordinates to the tooltip element\n            Object.assign(tooltip.style, {\n                left: `${x}px`,\n                top: `${y}px`,\n            });\n\n            // Position the arrow element\n            if (middlewareData.arrow && arrowRef.current) {\n                const { x: arrowX, y: arrowY } = middlewareData.arrow;\n                const side = placement.split('-')[0];\n                const staticSide = {\n                    top: 'bottom',\n                    right: 'left',\n                    bottom: 'top',\n                    left: 'right',\n                }[side] as string;\n\n                const arrowElement = arrowRef.current as HTMLElement;\n                \n                // Reset all positioning properties\n                Object.assign(arrowElement.style, {\n                    left: '',\n                    top: '',\n                    right: '',\n                    bottom: '',\n                });\n\n                // For placements like top-start, bottom-start, etc., we want the arrow \n                // to be centered on the tooltip rather than pointing at the trigger center\n                if (placement.includes('-start') || placement.includes('-end')) {\n                    const tooltipRect = tooltip.getBoundingClientRect();\n                    \n                    if (side === 'top' || side === 'bottom') {\n                        // For top/bottom placements, center the arrow horizontally\n                        arrowElement.style.left = `${14}px`; // 4px = half arrow width\n                        if (arrowY != null) {\n                            arrowElement.style.top = `${arrowY}px`;\n                        }\n                    } else {\n                        // For left/right placements, center the arrow vertically\n                        arrowElement.style.top = `${tooltipRect.height / 2 - 4}px`; // 4px = half arrow height\n                        if (arrowX != null) {\n                            arrowElement.style.left = `${arrowX}px`;\n                        }\n                    }\n                } else {\n                    // For regular placements (top, bottom, left, right), use floating-ui's positioning\n                    if (arrowX != null) {\n                        arrowElement.style.left = `${arrowX}px`;\n                    }\n                    if (arrowY != null) {\n                        arrowElement.style.top = `${arrowY}px`;\n                    }\n                }\n\n                // Position arrow to overlap the tooltip's border\n                (arrowElement.style as any)[staticSide] = '-4px';\n            }\n        });\n\n    }, [isVisible, placement, content]);\n\n    // We need to clone the child element to attach our ref and event listeners.\n    // This ensures we don't wrap the child in an extra <div>.\n    const triggerWithListeners = cloneElement(children, {\n        ref: triggerRef,\n        onMouseEnter: showTooltip,\n        onMouseLeave: hideTooltip,\n        onFocus: showTooltip,\n        onBlur: hideTooltip,\n        'aria-describedby': 'lightweight-tooltip' // for accessibility\n    });\n\n    return (\n        <>\n            {triggerWithListeners}\n            {isVisible && (\n                <div\n                    ref={tooltipRef}\n                    role=\"tooltip\"\n                    id=\"lightweight-tooltip\"\n                    className={classNames(\"tooltip-container\", visualBuilderStyles()[\"tooltip-container\"])}\n                >\n                    {content}\n                    <div ref={arrowRef} className={classNames(\"tooltip-arrow\", visualBuilderStyles()[\"tooltip-arrow\"])}></div>\n                </div>\n            )}\n        </>\n    );\n};\n\nfunction ToolbarTooltipContent({contentTypeName, referenceFieldName}: {contentTypeName: string, referenceFieldName: string}) {\n  return (\n    <div className={classNames(\"toolbar-tooltip-content\", visualBuilderStyles()[\"toolbar-tooltip-content\"])}>\n      {\n        contentTypeName && (\n          <div className={classNames(\"toolbar-tooltip-content-item\", visualBuilderStyles()[\"toolbar-tooltip-content-item\"])}>\n            <ContentTypeIcon />\n            <p>{contentTypeName}</p>\n          </div>\n        )\n      }\n      {\n        referenceFieldName && (\n          <div className={classNames(\"toolbar-tooltip-content-item\", visualBuilderStyles()[\"toolbar-tooltip-content-item\"])}>\n            <div dangerouslySetInnerHTML={{__html: FieldTypeIconsMap.reference}} className={classNames(\"visual-builder__field-icon\", visualBuilderStyles()[\"visual-builder__field-icon\"])}/>\n            <p>{referenceFieldName}</p>\n          </div>\n        )\n      }\n    </div>\n  )\n}\n\nexport function ToolbarTooltip({children, data, disabled = false}: {children: JSX.Element, data: {contentTypeName: string, referenceFieldName: string}, disabled?: boolean}) {\n  if (disabled) {\n    return children;\n  }\n  const { contentTypeName, referenceFieldName } = data;\n  return (\n    <Tooltip content={<ToolbarTooltipContent contentTypeName={contentTypeName} referenceFieldName={referenceFieldName} />}>\n      {children}\n    </Tooltip>\n  )\n}\n\nexport default Tooltip;"],"mappings":"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","names":["placement","classNames"]}

package/dist/legacy/visualBuilder/components/Tooltip.d.cts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TooltipProps {
+    children: JSX.Element;
+    content: JSX.Element;
+    placement?: 'top-start' | 'bottom-start' | 'left-start' | 'right-start';
+}
+/**
+ * A lightweight, reusable tooltip component for Preact powered by Floating UI.
+ *
+ * @param {object} props - The component props.
+ * @param {preact.ComponentChildren} props.children - The single child element that triggers the tooltip.
+ * @param {string | preact.VNode} props.content - The content to display inside the tooltip.
+ * @param {'top'|'bottom'|'left'|'right'} [props.placement='top'] - The desired placement of the tooltip.
+ */
+declare const Tooltip: ({ children, content, placement }: TooltipProps) => react_jsx_runtime.JSX.Element;
+declare function ToolbarTooltip({ children, data, disabled }: {
+    children: JSX.Element;
+    data: {
+        contentTypeName: string;
+        referenceFieldName: string;
+    };
+    disabled?: boolean;
+}): JSX.Element;
+
+export { ToolbarTooltip, Tooltip as default };

package/dist/legacy/visualBuilder/components/Tooltip.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TooltipProps {
+    children: JSX.Element;
+    content: JSX.Element;
+    placement?: 'top-start' | 'bottom-start' | 'left-start' | 'right-start';
+}
+/**
+ * A lightweight, reusable tooltip component for Preact powered by Floating UI.
+ *
+ * @param {object} props - The component props.
+ * @param {preact.ComponentChildren} props.children - The single child element that triggers the tooltip.
+ * @param {string | preact.VNode} props.content - The content to display inside the tooltip.
+ * @param {'top'|'bottom'|'left'|'right'} [props.placement='top'] - The desired placement of the tooltip.
+ */
+declare const Tooltip: ({ children, content, placement }: TooltipProps) => react_jsx_runtime.JSX.Element;
+declare function ToolbarTooltip({ children, data, disabled }: {
+    children: JSX.Element;
+    data: {
+        contentTypeName: string;
+        referenceFieldName: string;
+    };
+    disabled?: boolean;
+}): JSX.Element;
+
+export { ToolbarTooltip, Tooltip as default };