npm - @contentstack/live-preview-utils - Versions diffs - 3.2.3 → 3.2.5 - Mend

@contentstack/live-preview-utils 3.2.3 → 3.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (118) hide show

package/README.md CHANGED Viewed

@@ -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.3';
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@3.2.5';
      ContentstackLivePreview.init({
         stackDetails: {

package/dist/legacy/light-sdk.cjs CHANGED Viewed

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

package/dist/legacy/light-sdk.js CHANGED Viewed

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

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

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

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

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

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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 ) {\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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 ) {\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 CHANGED Viewed

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

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

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

package/dist/legacy/utils/index.cjs CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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}\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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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}\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/Collab/ThreadPopup/CommentTextArea.cjs CHANGED Viewed

@@ -94,26 +94,29 @@ var MentionSuggestionsList = ({
         }
       },
       ref: listRef,
-      children: filteredUsers.map((user, index) => {
-        var _a2;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "li",
-          {
-            onClick: () => insertMention(user),
-            className: (0, import_classnames.default)(
-              "collab-thread-body--input--textarea--suggestionsList--item",
-              (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--suggestionsList--item"],
-              index === selectedIndex ? (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--suggestionsList--item-selected"] : ""
-            ),
-            ref: (el) => itemRefs.current[index] = el,
-            onKeyDown: (e) => e.key === "Enter" ? insertMention(user) : handleKeyDown(e),
-            tabIndex: -1,
-            "aria-selected": index === selectedIndex,
-            children: (((_a2 = user.display) == null ? void 0 : _a2.length) || 0) > 20 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.default, { content: user.display || "", children: (user.display || "").substring(0, 18) + "..." }) : user.display || ""
-          },
-          user.uid
-        );
-      })
+      children: filteredUsers.map((user, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "li",
+        {
+          onClick: () => insertMention(user),
+          className: (0, import_classnames.default)(
+            "collab-thread-body--input--textarea--suggestionsList--item",
+            (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--suggestionsList--item"],
+            index === selectedIndex ? (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--suggestionsList--item-selected"] : ""
+          ),
+          ref: (el) => itemRefs.current[index] = el,
+          onKeyDown: (e) => e.key === "Enter" ? insertMention(user) : handleKeyDown(e),
+          tabIndex: -1,
+          "aria-selected": index === selectedIndex,
+          children: user.display === user.email ? user.display.length > 20 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.default, { content: user.display || "", children: (user.display || "").substring(0, 18) + "..." }) : user.display : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Tooltip.default,
+            {
+              content: user.display + " - " + user.email || "",
+              children: user.display.length > 20 ? (user.display || "").substring(0, 18) + "..." : user.display
+            }
+          )
+        },
+        user.uid
+      ))
     }
   );
 };

package/dist/legacy/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect } from \"preact/hooks\";\nimport { useCommentTextArea } from \"../../../hooks/useCommentTextArea\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport {\n ICommentTextAreaProps,\n IMentionList,\n} from \"../../../types/collab.types\";\nimport classNames from \"classnames\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nconst ErrorIndicator: React.FC<{ errorMessage: string }> = ({\n errorMessage,\n}) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--error\",\n collabStyles()[\"collab-thread-input-indicator--error\"]\n )}\n >\n {errorMessage}\n </div>\n);\n\nconst CharacterCounter: React.FC<{\n currentLength: number;\n maxLength: number;\n}> = ({ currentLength, maxLength }) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--count\",\n collabStyles()[\"collab-thread-input-indicator--count\"]\n )}\n >\n {currentLength}/{maxLength}\n </div>\n);\n\nconst MentionSuggestionsList: React.FC<{\n filteredUsers: IMentionList[];\n selectedIndex: number;\n cursorPosition: { top: number; showAbove: boolean };\n inputRef: React.RefObject<HTMLTextAreaElement>;\n listRef: React.RefObject<HTMLUListElement>;\n itemRefs: React.MutableRefObject<(HTMLLIElement \| null)[]>;\n insertMention: (user: IMentionList) => void;\n handleKeyDown: (event: KeyboardEvent) => void;\n}> = ({\n filteredUsers,\n selectedIndex,\n cursorPosition,\n inputRef,\n listRef,\n itemRefs,\n insertMention,\n handleKeyDown,\n}) => {\n if (filteredUsers.length === 0) return null;\n\n return (\n <ul\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList\"\n ]\n )}\n style={{\n ...(cursorPosition.showAbove\n ? {\n bottom: `${window.innerHeight - (inputRef.current?.getBoundingClientRect().top \|\| 0) - cursorPosition.top}px`,\n top: \"auto\",\n }\n : {\n top: `${(inputRef.current?.getBoundingClientRect().top \|\| 0) + cursorPosition.top}px`,\n }),\n }}\n ref={listRef}\n >\n {filteredUsers.map((user, index) => (\n <li\n key={user.uid}\n onClick={() => insertMention(user)}\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList--item\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item\"\n ],\n index === selectedIndex\n ? collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item-selected\"\n ]\n : \"\"\n )}\n ref={(el) => (itemRefs.current[index] = el)}\n onKeyDown={(e) =>\n e.key === \"Enter\"\n ? insertMention(user)\n : handleKeyDown(e as KeyboardEvent)\n }\n tabIndex={-1}\n aria-selected={index === selectedIndex}\n >\n {(user.display?.length \|\| 0) > 20 ? (\n <Tooltip content={user.display \|\| \"\"}>\n {(user.display \|\| \"\").substring(0, 18) + \"...\"}\n </Tooltip>\n ) : (\n user.display \|\| \"\"\n )}\n </li>\n ))}\n </ul>\n );\n};\n\nconst CommentTextArea: React.FC<ICommentTextAreaProps> = React.memo(\n ({ userState, handleOnSaveRef, comment, onClose }) => {\n const {\n state,\n error,\n showSuggestions,\n cursorPosition,\n selectedIndex,\n filteredUsers,\n inputRef,\n listRef,\n itemRefs,\n handleInputChange,\n handleKeyDown,\n handleSubmit,\n insertMention,\n maxMessageLength,\n } = useCommentTextArea(userState, comment, onClose);\n\n const onChangeHandler = (event: Event) =>\n handleInputChange(event as any);\n const onKeyDownHandler = (event: KeyboardEvent) =>\n handleKeyDown(event as any);\n\n useEffect(() => {\n handleOnSaveRef.current = handleSubmit;\n }, [handleSubmit, handleOnSaveRef]);\n\n return (\n <div\n className={classNames(\n \"collab-thread-body--input--wrapper\",\n collabStyles()[\"collab-thread-body--input--wrapper\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input\",\n collabStyles()[\"collab-thread-body--input\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input--textarea--wrapper\",\n collabStyles()[\n \"collab-thread-body--input--textarea--wrapper\"\n ]\n )}\n >\n <textarea\n name=\"collab-thread-body--input--textarea\"\n id=\"collab-thread-body--input--textarea\"\n rows={1}\n className={classNames(\n \"collab-thread-body--input--textarea\",\n collabStyles()[\n \"collab-thread-body--input--textarea\"\n ]\n )}\n value={state.message}\n onChange={onChangeHandler}\n onKeyDown={onKeyDownHandler}\n maxLength={maxMessageLength}\n placeholder=\"Enter a comment or tag others using “@”\"\n ref={inputRef}\n />\n {showSuggestions && (\n <MentionSuggestionsList\n filteredUsers={filteredUsers}\n selectedIndex={selectedIndex}\n cursorPosition={cursorPosition}\n inputRef={inputRef}\n listRef={listRef}\n itemRefs={itemRefs}\n insertMention={insertMention}\n handleKeyDown={handleKeyDown}\n />\n )}\n </div>\n </div>\n\n <div\n className={classNames(\n \"collab-thread-input-indicator--wrapper\",\n \"flex-v-center\",\n collabStyles()[\n \"collab-thread-input-indicator--wrapper\"\n ],\n flexAlignCenter\n )}\n >\n <ErrorIndicator errorMessage={error.message} />\n <CharacterCounter\n currentLength={state.message.length}\n maxLength={maxMessageLength}\n />\n </div>\n </div>\n );\n }\n);\n\nexport default CommentTextArea;\n"],"mappings":"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","names":["classNames","_a","Tooltip","React"]}
1	+ {"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect } from \"preact/hooks\";\nimport { useCommentTextArea } from \"../../../hooks/useCommentTextArea\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport {\n ICommentTextAreaProps,\n IMentionList,\n} from \"../../../types/collab.types\";\nimport classNames from \"classnames\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nconst ErrorIndicator: React.FC<{ errorMessage: string }> = ({\n errorMessage,\n}) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--error\",\n collabStyles()[\"collab-thread-input-indicator--error\"]\n )}\n >\n {errorMessage}\n </div>\n);\n\nconst CharacterCounter: React.FC<{\n currentLength: number;\n maxLength: number;\n}> = ({ currentLength, maxLength }) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--count\",\n collabStyles()[\"collab-thread-input-indicator--count\"]\n )}\n >\n {currentLength}/{maxLength}\n </div>\n);\n\nconst MentionSuggestionsList: React.FC<{\n filteredUsers: IMentionList[];\n selectedIndex: number;\n cursorPosition: { top: number; showAbove: boolean };\n inputRef: React.RefObject<HTMLTextAreaElement>;\n listRef: React.RefObject<HTMLUListElement>;\n itemRefs: React.MutableRefObject<(HTMLLIElement \| null)[]>;\n insertMention: (user: IMentionList) => void;\n handleKeyDown: (event: KeyboardEvent) => void;\n}> = ({\n filteredUsers,\n selectedIndex,\n cursorPosition,\n inputRef,\n listRef,\n itemRefs,\n insertMention,\n handleKeyDown,\n}) => {\n if (filteredUsers.length === 0) return null;\n\n return (\n <ul\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList\"\n ]\n )}\n style={{\n ...(cursorPosition.showAbove\n ? {\n bottom: `${window.innerHeight - (inputRef.current?.getBoundingClientRect().top \|\| 0) - cursorPosition.top}px`,\n top: \"auto\",\n }\n : {\n top: `${(inputRef.current?.getBoundingClientRect().top \|\| 0) + cursorPosition.top}px`,\n }),\n }}\n ref={listRef}\n >\n {filteredUsers.map((user, index) => (\n <li\n key={user.uid}\n onClick={() => insertMention(user)}\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList--item\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item\"\n ],\n index === selectedIndex\n ? collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item-selected\"\n ]\n : \"\"\n )}\n ref={(el) => (itemRefs.current[index] = el)}\n onKeyDown={(e) =>\n e.key === \"Enter\"\n ? insertMention(user)\n : handleKeyDown(e as KeyboardEvent)\n }\n tabIndex={-1}\n aria-selected={index === selectedIndex}\n >\n {user.display === user.email ? (\n user.display.length > 20 ? (\n <Tooltip content={user.display \|\| \"\"}>\n {(user.display \|\| \"\").substring(0, 18) + \"...\"}\n </Tooltip>\n ) : (\n user.display\n )\n ) : (\n <Tooltip\n content={user.display + \" - \" + user.email \|\| \"\"}\n >\n {user.display.length > 20\n ? (user.display \|\| \"\").substring(0, 18) + \"...\"\n : user.display}\n </Tooltip>\n )}\n </li>\n ))}\n </ul>\n );\n};\n\nconst CommentTextArea: React.FC<ICommentTextAreaProps> = React.memo(\n ({ userState, handleOnSaveRef, comment, onClose }) => {\n const {\n state,\n error,\n showSuggestions,\n cursorPosition,\n selectedIndex,\n filteredUsers,\n inputRef,\n listRef,\n itemRefs,\n handleInputChange,\n handleKeyDown,\n handleSubmit,\n insertMention,\n maxMessageLength,\n } = useCommentTextArea(userState, comment, onClose);\n\n const onChangeHandler = (event: Event) =>\n handleInputChange(event as any);\n const onKeyDownHandler = (event: KeyboardEvent) =>\n handleKeyDown(event as any);\n\n useEffect(() => {\n handleOnSaveRef.current = handleSubmit;\n }, [handleSubmit, handleOnSaveRef]);\n\n return (\n <div\n className={classNames(\n \"collab-thread-body--input--wrapper\",\n collabStyles()[\"collab-thread-body--input--wrapper\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input\",\n collabStyles()[\"collab-thread-body--input\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input--textarea--wrapper\",\n collabStyles()[\n \"collab-thread-body--input--textarea--wrapper\"\n ]\n )}\n >\n <textarea\n name=\"collab-thread-body--input--textarea\"\n id=\"collab-thread-body--input--textarea\"\n rows={1}\n className={classNames(\n \"collab-thread-body--input--textarea\",\n collabStyles()[\n \"collab-thread-body--input--textarea\"\n ]\n )}\n value={state.message}\n onChange={onChangeHandler}\n onKeyDown={onKeyDownHandler}\n maxLength={maxMessageLength}\n placeholder=\"Enter a comment or tag others using “@”\"\n ref={inputRef}\n />\n {showSuggestions && (\n <MentionSuggestionsList\n filteredUsers={filteredUsers}\n selectedIndex={selectedIndex}\n cursorPosition={cursorPosition}\n inputRef={inputRef}\n listRef={listRef}\n itemRefs={itemRefs}\n insertMention={insertMention}\n handleKeyDown={handleKeyDown}\n />\n )}\n </div>\n </div>\n\n <div\n className={classNames(\n \"collab-thread-input-indicator--wrapper\",\n \"flex-v-center\",\n collabStyles()[\n \"collab-thread-input-indicator--wrapper\"\n ],\n flexAlignCenter\n )}\n >\n <ErrorIndicator errorMessage={error.message} />\n <CharacterCounter\n currentLength={state.message.length}\n maxLength={maxMessageLength}\n />\n </div>\n </div>\n );\n }\n);\n\nexport default CommentTextArea;\n"],"mappings":"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","names":["classNames","Tooltip","React"]}

package/dist/legacy/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.js CHANGED Viewed

@@ -62,26 +62,29 @@ var MentionSuggestionsList = ({
         }
       },
       ref: listRef,
-      children: filteredUsers.map((user, index) => {
-        var _a2;
-        return /* @__PURE__ */ jsx(
-          "li",
-          {
-            onClick: () => insertMention(user),
-            className: classNames(
-              "collab-thread-body--input--textarea--suggestionsList--item",
-              collabStyles()["collab-thread-body--input--textarea--suggestionsList--item"],
-              index === selectedIndex ? collabStyles()["collab-thread-body--input--textarea--suggestionsList--item-selected"] : ""
-            ),
-            ref: (el) => itemRefs.current[index] = el,
-            onKeyDown: (e) => e.key === "Enter" ? insertMention(user) : handleKeyDown(e),
-            tabIndex: -1,
-            "aria-selected": index === selectedIndex,
-            children: (((_a2 = user.display) == null ? void 0 : _a2.length) || 0) > 20 ? /* @__PURE__ */ jsx(Tooltip, { content: user.display || "", children: (user.display || "").substring(0, 18) + "..." }) : user.display || ""
-          },
-          user.uid
-        );
-      })
+      children: filteredUsers.map((user, index) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          onClick: () => insertMention(user),
+          className: classNames(
+            "collab-thread-body--input--textarea--suggestionsList--item",
+            collabStyles()["collab-thread-body--input--textarea--suggestionsList--item"],
+            index === selectedIndex ? collabStyles()["collab-thread-body--input--textarea--suggestionsList--item-selected"] : ""
+          ),
+          ref: (el) => itemRefs.current[index] = el,
+          onKeyDown: (e) => e.key === "Enter" ? insertMention(user) : handleKeyDown(e),
+          tabIndex: -1,
+          "aria-selected": index === selectedIndex,
+          children: user.display === user.email ? user.display.length > 20 ? /* @__PURE__ */ jsx(Tooltip, { content: user.display || "", children: (user.display || "").substring(0, 18) + "..." }) : user.display : /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: user.display + " - " + user.email || "",
+              children: user.display.length > 20 ? (user.display || "").substring(0, 18) + "..." : user.display
+            }
+          )
+        },
+        user.uid
+      ))
     }
   );
 };

package/dist/legacy/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect } from \"preact/hooks\";\nimport { useCommentTextArea } from \"../../../hooks/useCommentTextArea\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport {\n ICommentTextAreaProps,\n IMentionList,\n} from \"../../../types/collab.types\";\nimport classNames from \"classnames\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nconst ErrorIndicator: React.FC<{ errorMessage: string }> = ({\n errorMessage,\n}) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--error\",\n collabStyles()[\"collab-thread-input-indicator--error\"]\n )}\n >\n {errorMessage}\n </div>\n);\n\nconst CharacterCounter: React.FC<{\n currentLength: number;\n maxLength: number;\n}> = ({ currentLength, maxLength }) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--count\",\n collabStyles()[\"collab-thread-input-indicator--count\"]\n )}\n >\n {currentLength}/{maxLength}\n </div>\n);\n\nconst MentionSuggestionsList: React.FC<{\n filteredUsers: IMentionList[];\n selectedIndex: number;\n cursorPosition: { top: number; showAbove: boolean };\n inputRef: React.RefObject<HTMLTextAreaElement>;\n listRef: React.RefObject<HTMLUListElement>;\n itemRefs: React.MutableRefObject<(HTMLLIElement \| null)[]>;\n insertMention: (user: IMentionList) => void;\n handleKeyDown: (event: KeyboardEvent) => void;\n}> = ({\n filteredUsers,\n selectedIndex,\n cursorPosition,\n inputRef,\n listRef,\n itemRefs,\n insertMention,\n handleKeyDown,\n}) => {\n if (filteredUsers.length === 0) return null;\n\n return (\n <ul\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList\"\n ]\n )}\n style={{\n ...(cursorPosition.showAbove\n ? {\n bottom: `${window.innerHeight - (inputRef.current?.getBoundingClientRect().top \|\| 0) - cursorPosition.top}px`,\n top: \"auto\",\n }\n : {\n top: `${(inputRef.current?.getBoundingClientRect().top \|\| 0) + cursorPosition.top}px`,\n }),\n }}\n ref={listRef}\n >\n {filteredUsers.map((user, index) => (\n <li\n key={user.uid}\n onClick={() => insertMention(user)}\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList--item\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item\"\n ],\n index === selectedIndex\n ? collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item-selected\"\n ]\n : \"\"\n )}\n ref={(el) => (itemRefs.current[index] = el)}\n onKeyDown={(e) =>\n e.key === \"Enter\"\n ? insertMention(user)\n : handleKeyDown(e as KeyboardEvent)\n }\n tabIndex={-1}\n aria-selected={index === selectedIndex}\n >\n {(user.display?.length \|\| 0) > 20 ? (\n <Tooltip content={user.display \|\| \"\"}>\n {(user.display \|\| \"\").substring(0, 18) + \"...\"}\n </Tooltip>\n ) : (\n user.display \|\| \"\"\n )}\n </li>\n ))}\n </ul>\n );\n};\n\nconst CommentTextArea: React.FC<ICommentTextAreaProps> = React.memo(\n ({ userState, handleOnSaveRef, comment, onClose }) => {\n const {\n state,\n error,\n showSuggestions,\n cursorPosition,\n selectedIndex,\n filteredUsers,\n inputRef,\n listRef,\n itemRefs,\n handleInputChange,\n handleKeyDown,\n handleSubmit,\n insertMention,\n maxMessageLength,\n } = useCommentTextArea(userState, comment, onClose);\n\n const onChangeHandler = (event: Event) =>\n handleInputChange(event as any);\n const onKeyDownHandler = (event: KeyboardEvent) =>\n handleKeyDown(event as any);\n\n useEffect(() => {\n handleOnSaveRef.current = handleSubmit;\n }, [handleSubmit, handleOnSaveRef]);\n\n return (\n <div\n className={classNames(\n \"collab-thread-body--input--wrapper\",\n collabStyles()[\"collab-thread-body--input--wrapper\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input\",\n collabStyles()[\"collab-thread-body--input\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input--textarea--wrapper\",\n collabStyles()[\n \"collab-thread-body--input--textarea--wrapper\"\n ]\n )}\n >\n <textarea\n name=\"collab-thread-body--input--textarea\"\n id=\"collab-thread-body--input--textarea\"\n rows={1}\n className={classNames(\n \"collab-thread-body--input--textarea\",\n collabStyles()[\n \"collab-thread-body--input--textarea\"\n ]\n )}\n value={state.message}\n onChange={onChangeHandler}\n onKeyDown={onKeyDownHandler}\n maxLength={maxMessageLength}\n placeholder=\"Enter a comment or tag others using “@”\"\n ref={inputRef}\n />\n {showSuggestions && (\n <MentionSuggestionsList\n filteredUsers={filteredUsers}\n selectedIndex={selectedIndex}\n cursorPosition={cursorPosition}\n inputRef={inputRef}\n listRef={listRef}\n itemRefs={itemRefs}\n insertMention={insertMention}\n handleKeyDown={handleKeyDown}\n />\n )}\n </div>\n </div>\n\n <div\n className={classNames(\n \"collab-thread-input-indicator--wrapper\",\n \"flex-v-center\",\n collabStyles()[\n \"collab-thread-input-indicator--wrapper\"\n ],\n flexAlignCenter\n )}\n >\n <ErrorIndicator errorMessage={error.message} />\n <CharacterCounter\n currentLength={state.message.length}\n maxLength={maxMessageLength}\n />\n </div>\n </div>\n );\n }\n);\n\nexport default CommentTextArea;\n"],"mappings":"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","names":["_a"]}
1	+ {"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect } from \"preact/hooks\";\nimport { useCommentTextArea } from \"../../../hooks/useCommentTextArea\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport {\n ICommentTextAreaProps,\n IMentionList,\n} from \"../../../types/collab.types\";\nimport classNames from \"classnames\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nconst ErrorIndicator: React.FC<{ errorMessage: string }> = ({\n errorMessage,\n}) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--error\",\n collabStyles()[\"collab-thread-input-indicator--error\"]\n )}\n >\n {errorMessage}\n </div>\n);\n\nconst CharacterCounter: React.FC<{\n currentLength: number;\n maxLength: number;\n}> = ({ currentLength, maxLength }) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--count\",\n collabStyles()[\"collab-thread-input-indicator--count\"]\n )}\n >\n {currentLength}/{maxLength}\n </div>\n);\n\nconst MentionSuggestionsList: React.FC<{\n filteredUsers: IMentionList[];\n selectedIndex: number;\n cursorPosition: { top: number; showAbove: boolean };\n inputRef: React.RefObject<HTMLTextAreaElement>;\n listRef: React.RefObject<HTMLUListElement>;\n itemRefs: React.MutableRefObject<(HTMLLIElement \| null)[]>;\n insertMention: (user: IMentionList) => void;\n handleKeyDown: (event: KeyboardEvent) => void;\n}> = ({\n filteredUsers,\n selectedIndex,\n cursorPosition,\n inputRef,\n listRef,\n itemRefs,\n insertMention,\n handleKeyDown,\n}) => {\n if (filteredUsers.length === 0) return null;\n\n return (\n <ul\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList\"\n ]\n )}\n style={{\n ...(cursorPosition.showAbove\n ? {\n bottom: `${window.innerHeight - (inputRef.current?.getBoundingClientRect().top \|\| 0) - cursorPosition.top}px`,\n top: \"auto\",\n }\n : {\n top: `${(inputRef.current?.getBoundingClientRect().top \|\| 0) + cursorPosition.top}px`,\n }),\n }}\n ref={listRef}\n >\n {filteredUsers.map((user, index) => (\n <li\n key={user.uid}\n onClick={() => insertMention(user)}\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList--item\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item\"\n ],\n index === selectedIndex\n ? collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item-selected\"\n ]\n : \"\"\n )}\n ref={(el) => (itemRefs.current[index] = el)}\n onKeyDown={(e) =>\n e.key === \"Enter\"\n ? insertMention(user)\n : handleKeyDown(e as KeyboardEvent)\n }\n tabIndex={-1}\n aria-selected={index === selectedIndex}\n >\n {user.display === user.email ? (\n user.display.length > 20 ? (\n <Tooltip content={user.display \|\| \"\"}>\n {(user.display \|\| \"\").substring(0, 18) + \"...\"}\n </Tooltip>\n ) : (\n user.display\n )\n ) : (\n <Tooltip\n content={user.display + \" - \" + user.email \|\| \"\"}\n >\n {user.display.length > 20\n ? (user.display \|\| \"\").substring(0, 18) + \"...\"\n : user.display}\n </Tooltip>\n )}\n </li>\n ))}\n </ul>\n );\n};\n\nconst CommentTextArea: React.FC<ICommentTextAreaProps> = React.memo(\n ({ userState, handleOnSaveRef, comment, onClose }) => {\n const {\n state,\n error,\n showSuggestions,\n cursorPosition,\n selectedIndex,\n filteredUsers,\n inputRef,\n listRef,\n itemRefs,\n handleInputChange,\n handleKeyDown,\n handleSubmit,\n insertMention,\n maxMessageLength,\n } = useCommentTextArea(userState, comment, onClose);\n\n const onChangeHandler = (event: Event) =>\n handleInputChange(event as any);\n const onKeyDownHandler = (event: KeyboardEvent) =>\n handleKeyDown(event as any);\n\n useEffect(() => {\n handleOnSaveRef.current = handleSubmit;\n }, [handleSubmit, handleOnSaveRef]);\n\n return (\n <div\n className={classNames(\n \"collab-thread-body--input--wrapper\",\n collabStyles()[\"collab-thread-body--input--wrapper\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input\",\n collabStyles()[\"collab-thread-body--input\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input--textarea--wrapper\",\n collabStyles()[\n \"collab-thread-body--input--textarea--wrapper\"\n ]\n )}\n >\n <textarea\n name=\"collab-thread-body--input--textarea\"\n id=\"collab-thread-body--input--textarea\"\n rows={1}\n className={classNames(\n \"collab-thread-body--input--textarea\",\n collabStyles()[\n \"collab-thread-body--input--textarea\"\n ]\n )}\n value={state.message}\n onChange={onChangeHandler}\n onKeyDown={onKeyDownHandler}\n maxLength={maxMessageLength}\n placeholder=\"Enter a comment or tag others using “@”\"\n ref={inputRef}\n />\n {showSuggestions && (\n <MentionSuggestionsList\n filteredUsers={filteredUsers}\n selectedIndex={selectedIndex}\n cursorPosition={cursorPosition}\n inputRef={inputRef}\n listRef={listRef}\n itemRefs={itemRefs}\n insertMention={insertMention}\n handleKeyDown={handleKeyDown}\n />\n )}\n </div>\n </div>\n\n <div\n className={classNames(\n \"collab-thread-input-indicator--wrapper\",\n \"flex-v-center\",\n collabStyles()[\n \"collab-thread-input-indicator--wrapper\"\n ],\n flexAlignCenter\n )}\n >\n <ErrorIndicator errorMessage={error.message} />\n <CharacterCounter\n currentLength={state.message.length}\n maxLength={maxMessageLength}\n />\n </div>\n </div>\n );\n }\n);\n\nexport default CommentTextArea;\n"],"mappings":"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","names":[]}

package/dist/legacy/visualBuilder/components/VisualBuilder.cjs CHANGED Viewed

@@ -36,8 +36,12 @@ module.exports = __toCommonJS(VisualBuilder_exports);
 var import_classnames = __toESM(require("classnames"), 1);
 var import_generateOverlay = require("../generators/generateOverlay.cjs");
 var import_visualBuilder = require("../visualBuilder.style.cjs");
+var import_utils = require("../../utils/index.cjs");
 var import_jsx_runtime = require("preact/jsx-runtime");
 function VisualBuilderComponent(props) {
+  if (!(0, import_utils.isOpenInBuilder)()) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "style",

package/dist/legacy/visualBuilder/components/VisualBuilder.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/components/VisualBuilder.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport {\n visualBuilderStyles,\n VisualBuilderGlobalStyles,\n} from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\n\ninterface VisualBuilderProps {\n visualBuilderContainer: HTMLDivElement \| null;\n resizeObserver: ResizeObserver;\n}\n\nfunction VisualBuilderComponent(props: VisualBuilderProps): JSX.Element {\n return (\n <>\n {/* For some reason, goober's glob and createGlobalStyle were not working in this case. /}\n {/ glob also does not work when called in visualBuilder's constructor */}\n <style\n dangerouslySetInnerHTML={{\n __html: VisualBuilderGlobalStyles,\n }}\n />\n <div\n className={classNames(\n visualBuilderStyles()[\"visual-builder__cursor\"],\n \"visual-builder__cursor\"\n )}\n data-testid=\"visual-builder__cursor\"\n ></div>\n <div\n className={classNames(\n visualBuilderStyles()[\"visual-builder__overlay__wrapper\"],\n \"visual-builder__overlay__wrapper\"\n )}\n data-testid=\"visual-builder__overlay__wrapper\"\n onClick={(event) => {\n const targetElement = event.currentTarget as HTMLDivElement;\n\n const focusedToolbar = document.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n\n hideOverlay({\n visualBuilderContainer: props.visualBuilderContainer,\n visualBuilderOverlayWrapper: targetElement,\n focusedToolbar: focusedToolbar,\n resizeObserver: props.resizeObserver,\n });\n }}\n >\n <div\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--top\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n data-testid=\"visual-builder__overlay--top\"\n ></div>\n <div\n data-testid=\"visual-builder__overlay--left\"\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--left\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n ></div>\n <div\n data-testid=\"visual-builder__overlay--right\"\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--right\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n ></div>\n <div\n data-testid=\"visual-builder__overlay--bottom\"\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--bottom\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n ></div>\n <div\n data-testid=\"visual-builder__overlay--outline\"\n className={classNames(\n \"visual-builder__overlay--outline\",\n visualBuilderStyles()[\n \"visual-builder__overlay--outline\"\n ]\n )}\n ></div>\n </div>\n\n <div\n className={classNames(\n \"visual-builder__hover-outline visual-builder__hover-outline--unclickable\",\n visualBuilderStyles()[\"visual-builder__hover-outline\"],\n visualBuilderStyles()[\n \"visual-builder__hover-outline--unclickable\"\n ]\n )}\n data-testid=\"visual-builder__hover-outline\"\n ></div>\n <div\n className={classNames(\n \"visual-builder__focused-toolbar\",\n visualBuilderStyles()[\"visual-builder__focused-toolbar\"]\n )}\n data-testid=\"visual-builder__focused-toolbar\"\n ></div>\n </>\n );\n}\n\nexport default VisualBuilderComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,6BAA4B;AAC5B,2BAGO;~~AAUC~~;~~AAFR~~,SAAS,uBAAuB,~~OAAwC~~;~~AACpE~~,SACI,4EAGI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,yBAAyB;AAAA,UACrB,QAAQ;AAAA,QACZ;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,cACP,0CAAoB,EAAE,wBAAwB;AAAA,UAC9C;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,cACP,0CAAoB,EAAE,kCAAkC;AAAA,UACxD;AAAA,QACJ;AAAA,QACA,eAAY;AAAA,QACZ,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAgB,MAAM;AAE5B,gBAAM,iBAAiB,SAAS;AAAA,YAC5B;AAAA,UACJ;AAEA,kDAAY;AAAA,YACR,wBAAwB,MAAM;AAAA,YAC9B,6BAA6B;AAAA,YAC7B;AAAA,YACA,gBAAgB,MAAM;AAAA,UAC1B,CAAC;AAAA,QACL;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACG,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA,cACA,eAAY;AAAA;AAAA,UACf;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAChB,kCACJ;AAAA,cACJ;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACL;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,0CAAoB,EAAE,+BAA+B;AAAA,cACrD,0CAAoB,EAChB,4CACJ;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,0CAAoB,EAAE,iCAAiC;AAAA,QAC3D;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,KACL;AAER;AAEA,IAAO,wBAAQ;","names":["classNames"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/components/VisualBuilder.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport {\n visualBuilderStyles,\n VisualBuilderGlobalStyles,\n} from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\nimport { isOpenInBuilder } from \"../../utils\";\n\ninterface VisualBuilderProps {\n visualBuilderContainer: HTMLDivElement \| null;\n resizeObserver: ResizeObserver;\n}\n\nfunction VisualBuilderComponent(props: VisualBuilderProps): JSX.Element \| null {\n if (!isOpenInBuilder()) {\n return null;\n }\n\n return (\n <>\n {/* For some reason, goober's glob and createGlobalStyle were not working in this case. /}\n {/ glob also does not work when called in visualBuilder's constructor */}\n <style\n dangerouslySetInnerHTML={{\n __html: VisualBuilderGlobalStyles,\n }}\n />\n <div\n className={classNames(\n visualBuilderStyles()[\"visual-builder__cursor\"],\n \"visual-builder__cursor\"\n )}\n data-testid=\"visual-builder__cursor\"\n ></div>\n <div\n className={classNames(\n visualBuilderStyles()[\"visual-builder__overlay__wrapper\"],\n \"visual-builder__overlay__wrapper\"\n )}\n data-testid=\"visual-builder__overlay__wrapper\"\n onClick={(event) => {\n const targetElement = event.currentTarget as HTMLDivElement;\n\n const focusedToolbar = document.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n\n hideOverlay({\n visualBuilderContainer: props.visualBuilderContainer,\n visualBuilderOverlayWrapper: targetElement,\n focusedToolbar: focusedToolbar,\n resizeObserver: props.resizeObserver,\n });\n }}\n >\n <div\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--top\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n data-testid=\"visual-builder__overlay--top\"\n ></div>\n <div\n data-testid=\"visual-builder__overlay--left\"\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--left\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n ></div>\n <div\n data-testid=\"visual-builder__overlay--right\"\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--right\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n ></div>\n <div\n data-testid=\"visual-builder__overlay--bottom\"\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--bottom\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n ></div>\n <div\n data-testid=\"visual-builder__overlay--outline\"\n className={classNames(\n \"visual-builder__overlay--outline\",\n visualBuilderStyles()[\n \"visual-builder__overlay--outline\"\n ]\n )}\n ></div>\n </div>\n\n <div\n className={classNames(\n \"visual-builder__hover-outline visual-builder__hover-outline--unclickable\",\n visualBuilderStyles()[\"visual-builder__hover-outline\"],\n visualBuilderStyles()[\n \"visual-builder__hover-outline--unclickable\"\n ]\n )}\n data-testid=\"visual-builder__hover-outline\"\n ></div>\n <div\n className={classNames(\n \"visual-builder__focused-toolbar\",\n visualBuilderStyles()[\"visual-builder__focused-toolbar\"]\n )}\n data-testid=\"visual-builder__focused-toolbar\"\n ></div>\n </>\n );\n}\n\nexport default VisualBuilderComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,6BAA4B;AAC5B,2BAGO;AAEP,mBAAgC;AAaxB;AANR,SAAS,uBAAuB,OAA+C;AAC3E,MAAI,KAAC,8BAAgB,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,SACI,4EAGI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,yBAAyB;AAAA,UACrB,QAAQ;AAAA,QACZ;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,cACP,0CAAoB,EAAE,wBAAwB;AAAA,UAC9C;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,cACP,0CAAoB,EAAE,kCAAkC;AAAA,UACxD;AAAA,QACJ;AAAA,QACA,eAAY;AAAA,QACZ,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAgB,MAAM;AAE5B,gBAAM,iBAAiB,SAAS;AAAA,YAC5B;AAAA,UACJ;AAEA,kDAAY;AAAA,YACR,wBAAwB,MAAM;AAAA,YAC9B,6BAA6B;AAAA,YAC7B;AAAA,YACA,gBAAgB,MAAM;AAAA,UAC1B,CAAC;AAAA,QACL;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACG,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA,cACA,eAAY;AAAA;AAAA,UACf;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAChB,kCACJ;AAAA,cACJ;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACL;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,0CAAoB,EAAE,+BAA+B;AAAA,cACrD,0CAAoB,EAChB,4CACJ;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,0CAAoB,EAAE,iCAAiC;AAAA,QAC3D;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,KACL;AAER;AAEA,IAAO,wBAAQ;","names":["classNames"]}

package/dist/legacy/visualBuilder/components/VisualBuilder.d.cts CHANGED Viewed

@@ -2,6 +2,6 @@ interface VisualBuilderProps {
     visualBuilderContainer: HTMLDivElement | null;
     resizeObserver: ResizeObserver;
 }
-declare function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element;
+declare function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element | null;
 export { VisualBuilderComponent as default };

package/dist/legacy/visualBuilder/components/VisualBuilder.d.ts CHANGED Viewed

@@ -2,6 +2,6 @@ interface VisualBuilderProps {
     visualBuilderContainer: HTMLDivElement | null;
     resizeObserver: ResizeObserver;
 }
-declare function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element;
+declare function VisualBuilderComponent(props: VisualBuilderProps): JSX.Element | null;
 export { VisualBuilderComponent as default };

package/dist/legacy/visualBuilder/components/VisualBuilder.js CHANGED Viewed

@@ -7,8 +7,12 @@ import {
   visualBuilderStyles,
   VisualBuilderGlobalStyles
 } from "../visualBuilder.style.js";
+import { isOpenInBuilder } from "../../utils/index.js";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 function VisualBuilderComponent(props) {
+  if (!isOpenInBuilder()) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "style",

package/dist/legacy/visualBuilder/components/VisualBuilder.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/components/VisualBuilder.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport {\n visualBuilderStyles,\n VisualBuilderGlobalStyles,\n} from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\n\ninterface VisualBuilderProps {\n visualBuilderContainer: HTMLDivElement \| null;\n resizeObserver: ResizeObserver;\n}\n\nfunction VisualBuilderComponent(props: VisualBuilderProps): JSX.Element {\n return (\n <>\n {/* For some reason, goober's glob and createGlobalStyle were not working in this case. /}\n {/ glob also does not work when called in visualBuilder's constructor */}\n <style\n dangerouslySetInnerHTML={{\n __html: VisualBuilderGlobalStyles,\n }}\n />\n <div\n className={classNames(\n visualBuilderStyles()[\"visual-builder__cursor\"],\n \"visual-builder__cursor\"\n )}\n data-testid=\"visual-builder__cursor\"\n ></div>\n <div\n className={classNames(\n visualBuilderStyles()[\"visual-builder__overlay__wrapper\"],\n \"visual-builder__overlay__wrapper\"\n )}\n data-testid=\"visual-builder__overlay__wrapper\"\n onClick={(event) => {\n const targetElement = event.currentTarget as HTMLDivElement;\n\n const focusedToolbar = document.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n\n hideOverlay({\n visualBuilderContainer: props.visualBuilderContainer,\n visualBuilderOverlayWrapper: targetElement,\n focusedToolbar: focusedToolbar,\n resizeObserver: props.resizeObserver,\n });\n }}\n >\n <div\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--top\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n data-testid=\"visual-builder__overlay--top\"\n ></div>\n <div\n data-testid=\"visual-builder__overlay--left\"\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--left\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n ></div>\n <div\n data-testid=\"visual-builder__overlay--right\"\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--right\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n ></div>\n <div\n data-testid=\"visual-builder__overlay--bottom\"\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--bottom\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n ></div>\n <div\n data-testid=\"visual-builder__overlay--outline\"\n className={classNames(\n \"visual-builder__overlay--outline\",\n visualBuilderStyles()[\n \"visual-builder__overlay--outline\"\n ]\n )}\n ></div>\n </div>\n\n <div\n className={classNames(\n \"visual-builder__hover-outline visual-builder__hover-outline--unclickable\",\n visualBuilderStyles()[\"visual-builder__hover-outline\"],\n visualBuilderStyles()[\n \"visual-builder__hover-outline--unclickable\"\n ]\n )}\n data-testid=\"visual-builder__hover-outline\"\n ></div>\n <div\n className={classNames(\n \"visual-builder__focused-toolbar\",\n visualBuilderStyles()[\"visual-builder__focused-toolbar\"]\n )}\n data-testid=\"visual-builder__focused-toolbar\"\n ></div>\n </>\n );\n}\n\nexport default VisualBuilderComponent;\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AACvB,SAAS,mBAAmB;AAC5B;AAAA,EACI;AAAA,EACA;AAAA,OACG;~~AAUC~~,mBAGI,KAYA,YAfJ;~~AAFR~~,SAAS,uBAAuB,~~OAAwC~~;~~AACpE~~,SACI,iCAGI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,yBAAyB;AAAA,UACrB,QAAQ;AAAA,QACZ;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP,oBAAoB,EAAE,wBAAwB;AAAA,UAC9C;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP,oBAAoB,EAAE,kCAAkC;AAAA,UACxD;AAAA,QACJ;AAAA,QACA,eAAY;AAAA,QACZ,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAgB,MAAM;AAE5B,gBAAM,iBAAiB,SAAS;AAAA,YAC5B;AAAA,UACJ;AAEA,sBAAY;AAAA,YACR,wBAAwB,MAAM;AAAA,YAC9B,6BAA6B;AAAA,YAC7B;AAAA,YACA,gBAAgB,MAAM;AAAA,UAC1B,CAAC;AAAA,QACL;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACG,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA,cACA,eAAY;AAAA;AAAA,UACf;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAChB,kCACJ;AAAA,cACJ;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACL;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,oBAAoB,EAAE,+BAA+B;AAAA,UACrD,oBAAoB,EAChB,4CACJ;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,oBAAoB,EAAE,iCAAiC;AAAA,QAC3D;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,KACL;AAER;AAEA,IAAO,wBAAQ;","names":[]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/components/VisualBuilder.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport {\n visualBuilderStyles,\n VisualBuilderGlobalStyles,\n} from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\nimport { isOpenInBuilder } from \"../../utils\";\n\ninterface VisualBuilderProps {\n visualBuilderContainer: HTMLDivElement \| null;\n resizeObserver: ResizeObserver;\n}\n\nfunction VisualBuilderComponent(props: VisualBuilderProps): JSX.Element \| null {\n if (!isOpenInBuilder()) {\n return null;\n }\n\n return (\n <>\n {/* For some reason, goober's glob and createGlobalStyle were not working in this case. /}\n {/ glob also does not work when called in visualBuilder's constructor */}\n <style\n dangerouslySetInnerHTML={{\n __html: VisualBuilderGlobalStyles,\n }}\n />\n <div\n className={classNames(\n visualBuilderStyles()[\"visual-builder__cursor\"],\n \"visual-builder__cursor\"\n )}\n data-testid=\"visual-builder__cursor\"\n ></div>\n <div\n className={classNames(\n visualBuilderStyles()[\"visual-builder__overlay__wrapper\"],\n \"visual-builder__overlay__wrapper\"\n )}\n data-testid=\"visual-builder__overlay__wrapper\"\n onClick={(event) => {\n const targetElement = event.currentTarget as HTMLDivElement;\n\n const focusedToolbar = document.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n\n hideOverlay({\n visualBuilderContainer: props.visualBuilderContainer,\n visualBuilderOverlayWrapper: targetElement,\n focusedToolbar: focusedToolbar,\n resizeObserver: props.resizeObserver,\n });\n }}\n >\n <div\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--top\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n data-testid=\"visual-builder__overlay--top\"\n ></div>\n <div\n data-testid=\"visual-builder__overlay--left\"\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--left\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n ></div>\n <div\n data-testid=\"visual-builder__overlay--right\"\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--right\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n ></div>\n <div\n data-testid=\"visual-builder__overlay--bottom\"\n className={classNames(\n \"visual-builder__overlay visual-builder__overlay--bottom\",\n visualBuilderStyles()[\"visual-builder__overlay\"]\n )}\n ></div>\n <div\n data-testid=\"visual-builder__overlay--outline\"\n className={classNames(\n \"visual-builder__overlay--outline\",\n visualBuilderStyles()[\n \"visual-builder__overlay--outline\"\n ]\n )}\n ></div>\n </div>\n\n <div\n className={classNames(\n \"visual-builder__hover-outline visual-builder__hover-outline--unclickable\",\n visualBuilderStyles()[\"visual-builder__hover-outline\"],\n visualBuilderStyles()[\n \"visual-builder__hover-outline--unclickable\"\n ]\n )}\n data-testid=\"visual-builder__hover-outline\"\n ></div>\n <div\n className={classNames(\n \"visual-builder__focused-toolbar\",\n visualBuilderStyles()[\"visual-builder__focused-toolbar\"]\n )}\n data-testid=\"visual-builder__focused-toolbar\"\n ></div>\n </>\n );\n}\n\nexport default VisualBuilderComponent;\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AACvB,SAAS,mBAAmB;AAC5B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,SAAS,uBAAuB;AAaxB,mBAGI,KAYA,YAfJ;AANR,SAAS,uBAAuB,OAA+C;AAC3E,MAAI,CAAC,gBAAgB,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,SACI,iCAGI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,yBAAyB;AAAA,UACrB,QAAQ;AAAA,QACZ;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP,oBAAoB,EAAE,wBAAwB;AAAA,UAC9C;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP,oBAAoB,EAAE,kCAAkC;AAAA,UACxD;AAAA,QACJ;AAAA,QACA,eAAY;AAAA,QACZ,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAgB,MAAM;AAE5B,gBAAM,iBAAiB,SAAS;AAAA,YAC5B;AAAA,UACJ;AAEA,sBAAY;AAAA,YACR,wBAAwB,MAAM;AAAA,YAC9B,6BAA6B;AAAA,YAC7B;AAAA,YACA,gBAAgB,MAAM;AAAA,UAC1B,CAAC;AAAA,QACL;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACG,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA,cACA,eAAY;AAAA;AAAA,UACf;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAChB,kCACJ;AAAA,cACJ;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACL;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,oBAAoB,EAAE,+BAA+B;AAAA,UACrD,oBAAoB,EAChB,4CACJ;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,oBAAoB,EAAE,iCAAiC;AAAA,QAC3D;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,KACL;AAER;AAEA,IAAO,wBAAQ;","names":[]}