@contentstack/live-preview-utils 4.0.1 → 4.0.2

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 (34) hide show
  1. package/README.md +3 -3
  2. package/dist/legacy/light-sdk.cjs +1 -1
  3. package/dist/legacy/light-sdk.js +1 -1
  4. package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.cjs +24 -8
  5. package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.cjs.map +1 -1
  6. package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.js +24 -8
  7. package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.js.map +1 -1
  8. package/dist/legacy/preview/contentstack-live-preview-HOC.cjs +1 -1
  9. package/dist/legacy/preview/contentstack-live-preview-HOC.js +1 -1
  10. package/dist/legacy/visualBuilder/utils/enableInlineEditing.cjs +3 -1
  11. package/dist/legacy/visualBuilder/utils/enableInlineEditing.cjs.map +1 -1
  12. package/dist/legacy/visualBuilder/utils/enableInlineEditing.js +3 -1
  13. package/dist/legacy/visualBuilder/utils/enableInlineEditing.js.map +1 -1
  14. package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.cjs +5 -0
  15. package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.cjs.map +1 -1
  16. package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.js +5 -0
  17. package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.js.map +1 -1
  18. package/dist/modern/light-sdk.cjs +1 -1
  19. package/dist/modern/light-sdk.js +1 -1
  20. package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.cjs +23 -7
  21. package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.cjs.map +1 -1
  22. package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.js +23 -7
  23. package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.js.map +1 -1
  24. package/dist/modern/preview/contentstack-live-preview-HOC.cjs +1 -1
  25. package/dist/modern/preview/contentstack-live-preview-HOC.js +1 -1
  26. package/dist/modern/visualBuilder/utils/enableInlineEditing.cjs +3 -1
  27. package/dist/modern/visualBuilder/utils/enableInlineEditing.cjs.map +1 -1
  28. package/dist/modern/visualBuilder/utils/enableInlineEditing.js +3 -1
  29. package/dist/modern/visualBuilder/utils/enableInlineEditing.js.map +1 -1
  30. package/dist/modern/visualBuilder/utils/handleFieldMouseDown.cjs +5 -0
  31. package/dist/modern/visualBuilder/utils/handleFieldMouseDown.cjs.map +1 -1
  32. package/dist/modern/visualBuilder/utils/handleFieldMouseDown.js +5 -0
  33. package/dist/modern/visualBuilder/utils/handleFieldMouseDown.js.map +1 -1
  34. package/package.json +1 -3
package/README.md CHANGED
@@ -15,8 +15,8 @@ npm install @contentstack/live-preview-utils
15
15
  Alternatively, if you want to include the package directly in your website HTML code, use the following command:
16
16
 
17
17
  ```html
18
- <script type='module' integrity='sha384-b6G+ggU20rGxqCqsgaS6zludFgj5N11xsuXhMEIARMuQY2PtyDS04TU0H5goP+32' crossorigin="anonymous">
19
- import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.0.1';
18
+ <script type='module' crossorigin="anonymous">
19
+ import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.0.2';
20
20
 
21
21
  ContentstackLivePreview.init({
22
22
  stackDetails: {
@@ -51,7 +51,7 @@ ContentstackLivePreview.init({
51
51
 
52
52
  MIT License
53
53
 
54
- Copyright © 2024 [Contentstack](https://www.contentstack.com/). All Rights Reserved
54
+ Copyright © 2021-2025 [Contentstack](https://www.contentstack.com/). All Rights Reserved
55
55
 
56
56
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
57
57
 
@@ -60,7 +60,7 @@ var _LightLivePreviewHoC = class _LightLivePreviewHoC {
60
60
  static unsubscribeOnEntryChange() {
61
61
  }
62
62
  static getSdkVersion() {
63
- return "4.0.1";
63
+ return "4.0.2";
64
64
  }
65
65
  };
66
66
  _LightLivePreviewHoC.previewConstructors = {};
@@ -38,7 +38,7 @@ var _LightLivePreviewHoC = class _LightLivePreviewHoC {
38
38
  static unsubscribeOnEntryChange() {
39
39
  }
40
40
  static getSdkVersion() {
41
- return "4.0.1";
41
+ return "4.0.2";
42
42
  }
43
43
  };
44
44
  _LightLivePreviewHoC.previewConstructors = {};
@@ -74,9 +74,9 @@ function useOnEntryUpdatePostMessageEvent() {
74
74
  (_a = import_livePreviewEventManager.default) == null ? void 0 : _a.on(
75
75
  import_livePreviewEventManager2.LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,
76
76
  (event) => {
77
- var _a2;
77
+ var _a2, _b, _c;
78
78
  try {
79
- const { ssr, onChange } = import_configManager.default.get();
79
+ const { ssr, onChange, stackDetails } = import_configManager.default.get();
80
80
  const event_type = (_a2 = event.data._metadata) == null ? void 0 : _a2.event_type;
81
81
  (0, import_configManager.setConfigFromParams)({
82
82
  live_preview: event.data.hash
@@ -91,13 +91,29 @@ function useOnEntryUpdatePostMessageEvent() {
91
91
  }
92
92
  ;
93
93
  if (ssr && !event_type) {
94
- if (window.location.href.includes("live_preview")) {
94
+ const url = new URL(window.location.href);
95
+ let live_preview = url.searchParams.get("live_preview");
96
+ let content_type_uid = url.searchParams.get("content_type_uid");
97
+ let entry_uid = url.searchParams.get("entry_uid");
98
+ if (live_preview && content_type_uid && entry_uid) {
95
99
  window.location.reload();
96
100
  } else {
97
- const url = new URL(window.location.href);
98
- url.searchParams.set("live_preview", event.data.hash);
99
- url.searchParams.set("content_type_uid", import_configManager.default.get().stackDetails.contentTypeUid || "");
100
- url.searchParams.set("entry_uid", import_configManager.default.get().stackDetails.entryUid || "");
101
+ live_preview = event.data.hash;
102
+ content_type_uid = event.data.content_type_uid || ((_b = stackDetails.$contentTypeUid) == null ? void 0 : _b.toString()) || "";
103
+ entry_uid = event.data.entry_uid || ((_c = stackDetails.$entryUid) == null ? void 0 : _c.toString()) || "";
104
+ url.searchParams.set("live_preview", live_preview);
105
+ if (content_type_uid) {
106
+ url.searchParams.set(
107
+ "content_type_uid",
108
+ content_type_uid
109
+ );
110
+ }
111
+ if (entry_uid) {
112
+ url.searchParams.set(
113
+ "entry_uid",
114
+ entry_uid
115
+ );
116
+ }
101
117
  window.location.href = url.toString();
102
118
  }
103
119
  }
@@ -125,7 +141,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
125
141
  config: {
126
142
  shouldReload: import_configManager.default.get().ssr,
127
143
  href: window.location.href,
128
- sdkVersion: "4.0.1",
144
+ sdkVersion: "4.0.2",
129
145
  mode: import_configManager.default.get().mode
130
146
  }
131
147
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/livePreview/eventManager/postMessageEvent.hooks.ts"],"sourcesContent":["import { isOpeningInNewTab } from \"../../common/inIframe\";\nimport Config, { setConfigFromParams } from \"../../configManager/configManager\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport { ILivePreviewWindowType } from \"../../types/types\";\nimport { addParamsToUrl, isOpeningInTimeline } from \"../../utils\";\nimport livePreviewPostMessage from \"./livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"./livePreviewEventManager.constant\";\nimport {\n HistoryLivePreviewPostMessageEventData,\n LivePreviewInitEventResponse,\n OnChangeLivePreviewPostMessageEventData,\n OnChangeLivePreviewPostMessageEventTypes,\n} from \"./types/livePreviewPostMessageEvent.type\";\n\n/**\n * Registers a post message event listener for history-related events.\n * The listener handles events for forward, backward, and reload actions on the browser history.\n */\nexport function useHistoryPostMessageEvent(): void {\n livePreviewPostMessage?.on<HistoryLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY,\n (event) => {\n switch (event.data.type) {\n case \"forward\": {\n window.history.forward();\n break;\n }\n case \"backward\": {\n window.history.back();\n break;\n }\n case \"reload\": {\n window.history.go();\n break;\n }\n default: {\n const exhaustiveCheck: never = event.data.type;\n throw new Error(`Unhandled event: ${exhaustiveCheck}`);\n }\n }\n }\n );\n}\n\n/**\n * Registers a post message event listener for updating the entry in the live preview.\n */\nexport function useOnEntryUpdatePostMessageEvent(): void {\n livePreviewPostMessage?.on<OnChangeLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,\n (event) => {\n try {\n const { ssr, onChange } = Config.get();\n const event_type = event.data._metadata?.event_type;\n setConfigFromParams({\n live_preview: event.data.hash,\n });\n\n // This section will run when there is a change in the entry and the website is CSR\n if (!ssr && !event_type) {\n onChange();\n } \n\n if(isOpeningInNewTab()) {\n if(!window) {\n PublicLogger.error(\"window is not defined\");\n return;\n };\n \n // This section will run when there is a change in the entry and the website is SSR\n if(ssr && !event_type) {\n if(window.location.href.includes(\"live_preview\")) {\n window.location.reload();\n } else {\n const url = new URL(window.location.href);\n url.searchParams.set(\"live_preview\", event.data.hash);\n url.searchParams.set(\"content_type_uid\", Config.get().stackDetails.contentTypeUid || \"\");\n url.searchParams.set(\"entry_uid\", Config.get().stackDetails.entryUid || \"\");\n window.location.href = url.toString();\n }\n }\n \n // This section will run when the hash changes and the website is SSR or CSR\n if(event_type === OnChangeLivePreviewPostMessageEventTypes.HASH_CHANGE){\n const newUrl = new URL(window.location.href);\n newUrl.searchParams.set(\"live_preview\", event.data.hash);\n window.history.pushState({}, \"\", newUrl.toString());\n }\n \n // This section will run when the URL of the page changes\n if(event_type === OnChangeLivePreviewPostMessageEventTypes.URL_CHANGE && event.data.url){\n window.location.href = event.data.url;\n }\n }\n\n \n } catch (error) {\n PublicLogger.error(\"Error handling live preview update:\", error);\n return;\n }\n }\n );\n}\n\nexport function sendInitializeLivePreviewPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send<LivePreviewInitEventResponse>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.INIT,\n {\n config: {\n shouldReload: Config.get().ssr,\n href: window.location.href,\n sdkVersion: process?.env?.PACKAGE_VERSION,\n mode: Config.get().mode,\n },\n }\n )\n .then((data) => {\n const {\n contentTypeUid,\n entryUid,\n windowType = ILivePreviewWindowType.PREVIEW,\n } = data || {};\n\n // TODO: This is a fix for the issue where we were calling sending init in the builder\n // Let's remove this condition when we fix it.\n if (Config?.get()?.windowType && Config.get().windowType === ILivePreviewWindowType.BUILDER) {\n return;\n }\n\n if (contentTypeUid && entryUid) {\n // TODO: we should not use this function. Instead we should have sideEffect run automatically when we set the config.\n setConfigFromParams({\n content_type_uid: contentTypeUid,\n entry_uid: entryUid,\n });\n } else {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\n // \"init message did not contain contentTypeUid or entryUid.\"\n // );\n }\n if (Config.get().ssr || isOpeningInTimeline() || isOpeningInNewTab()) {\n addParamsToUrl();\n }\n Config.set(\"windowType\", windowType);\n\n // set timeout for client side (use to show warning: You are not editing this page)\n if (!Config.get().ssr) {\n setInterval(() => {\n sendCurrentPageUrlPostMessageEvent();\n }, 1500);\n }\n\n useHistoryPostMessageEvent();\n useOnEntryUpdatePostMessageEvent();\n })\n .catch((e) => {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\"Error while sending init message\", e);\n });\n}\n\nfunction sendCurrentPageUrlPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.CHECK_ENTRY_PAGE, {\n href: window.location.href,\n })\n .catch(() => {\n // TODO: add debug logs that runs conditionally\n });\n}\n"],"mappings":"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","names":["import_livePreviewEventManager","livePreviewPostMessage","_a","Config"]}
1
+ {"version":3,"sources":["../../../../src/livePreview/eventManager/postMessageEvent.hooks.ts"],"sourcesContent":["import { isOpeningInNewTab } from \"../../common/inIframe\";\nimport Config, { setConfigFromParams } from \"../../configManager/configManager\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport { ILivePreviewWindowType } from \"../../types/types\";\nimport { addParamsToUrl, isOpeningInTimeline } from \"../../utils\";\nimport livePreviewPostMessage from \"./livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"./livePreviewEventManager.constant\";\nimport {\n HistoryLivePreviewPostMessageEventData,\n LivePreviewInitEventResponse,\n OnChangeLivePreviewPostMessageEventData,\n OnChangeLivePreviewPostMessageEventTypes,\n} from \"./types/livePreviewPostMessageEvent.type\";\n\n/**\n * Registers a post message event listener for history-related events.\n * The listener handles events for forward, backward, and reload actions on the browser history.\n */\nexport function useHistoryPostMessageEvent(): void {\n livePreviewPostMessage?.on<HistoryLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY,\n (event) => {\n switch (event.data.type) {\n case \"forward\": {\n window.history.forward();\n break;\n }\n case \"backward\": {\n window.history.back();\n break;\n }\n case \"reload\": {\n window.history.go();\n break;\n }\n default: {\n const exhaustiveCheck: never = event.data.type;\n throw new Error(`Unhandled event: ${exhaustiveCheck}`);\n }\n }\n }\n );\n}\n\n/**\n * Registers a post message event listener for updating the entry in the live preview.\n */\nexport function useOnEntryUpdatePostMessageEvent(): void {\n livePreviewPostMessage?.on<OnChangeLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,\n (event) => {\n try {\n const { ssr, onChange, stackDetails } = Config.get();\n const event_type = event.data._metadata?.event_type;\n setConfigFromParams({\n live_preview: event.data.hash,\n });\n\n // This section will run when there is a change in the entry and the website is CSR\n if (!ssr && !event_type) {\n onChange();\n }\n\n if (isOpeningInNewTab()) {\n if (!window) {\n PublicLogger.error(\"window is not defined\");\n return;\n };\n\n if (ssr && !event_type) {\n const url = new URL(window.location.href);\n let live_preview = url.searchParams.get(\"live_preview\");\n let content_type_uid = url.searchParams.get(\"content_type_uid\");\n let entry_uid = url.searchParams.get(\"entry_uid\");\n\n if (live_preview && content_type_uid && entry_uid) {\n // All required params are present, just reload\n window.location.reload();\n } else {\n live_preview = event.data.hash;\n content_type_uid = event.data.content_type_uid || stackDetails.$contentTypeUid?.toString() || \"\";\n entry_uid = event.data.entry_uid || stackDetails.$entryUid?.toString() || \"\";\n // Set missing params and redirect\n url.searchParams.set(\"live_preview\", live_preview);\n if (content_type_uid) {\n url.searchParams.set(\n \"content_type_uid\",\n content_type_uid\n );\n }\n if (entry_uid) {\n url.searchParams.set(\n \"entry_uid\",\n entry_uid\n );\n }\n window.location.href = url.toString();\n }\n }\n\n // This section will run when the hash changes and the website is SSR or CSR\n if (event_type === OnChangeLivePreviewPostMessageEventTypes.HASH_CHANGE) {\n const newUrl = new URL(window.location.href);\n newUrl.searchParams.set(\"live_preview\", event.data.hash);\n window.history.pushState({}, \"\", newUrl.toString());\n }\n\n // This section will run when the URL of the page changes\n if (event_type === OnChangeLivePreviewPostMessageEventTypes.URL_CHANGE && event.data.url) {\n window.location.href = event.data.url;\n }\n }\n } catch (error) {\n PublicLogger.error(\"Error handling live preview update:\", error);\n return;\n }\n }\n );\n}\n\nexport function sendInitializeLivePreviewPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send<LivePreviewInitEventResponse>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.INIT,\n {\n config: {\n shouldReload: Config.get().ssr,\n href: window.location.href,\n sdkVersion: process?.env?.PACKAGE_VERSION,\n mode: Config.get().mode,\n },\n }\n )\n .then((data) => {\n const {\n contentTypeUid,\n entryUid,\n windowType = ILivePreviewWindowType.PREVIEW,\n } = data || {};\n\n // TODO: This is a fix for the issue where we were calling sending init in the builder\n // Let's remove this condition when we fix it.\n if (Config?.get()?.windowType && Config.get().windowType === ILivePreviewWindowType.BUILDER) {\n return;\n }\n\n if (contentTypeUid && entryUid) {\n // TODO: we should not use this function. Instead we should have sideEffect run automatically when we set the config.\n setConfigFromParams({\n content_type_uid: contentTypeUid,\n entry_uid: entryUid,\n });\n } else {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\n // \"init message did not contain contentTypeUid or entryUid.\"\n // );\n }\n if (Config.get().ssr || isOpeningInTimeline() || isOpeningInNewTab()) {\n addParamsToUrl();\n }\n Config.set(\"windowType\", windowType);\n\n // set timeout for client side (use to show warning: You are not editing this page)\n if (!Config.get().ssr) {\n setInterval(() => {\n sendCurrentPageUrlPostMessageEvent();\n }, 1500);\n }\n\n useHistoryPostMessageEvent();\n useOnEntryUpdatePostMessageEvent();\n })\n .catch((e) => {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\"Error while sending init message\", e);\n });\n}\n\nfunction sendCurrentPageUrlPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.CHECK_ENTRY_PAGE, {\n href: window.location.href,\n })\n .catch(() => {\n // TODO: add debug logs that runs conditionally\n });\n}\n"],"mappings":"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","names":["import_livePreviewEventManager","livePreviewPostMessage","_a","Config"]}
@@ -42,9 +42,9 @@ function useOnEntryUpdatePostMessageEvent() {
42
42
  (_a = livePreviewPostMessage) == null ? void 0 : _a.on(
43
43
  LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,
44
44
  (event) => {
45
- var _a2;
45
+ var _a2, _b, _c;
46
46
  try {
47
- const { ssr, onChange } = Config.get();
47
+ const { ssr, onChange, stackDetails } = Config.get();
48
48
  const event_type = (_a2 = event.data._metadata) == null ? void 0 : _a2.event_type;
49
49
  setConfigFromParams({
50
50
  live_preview: event.data.hash
@@ -59,13 +59,29 @@ function useOnEntryUpdatePostMessageEvent() {
59
59
  }
60
60
  ;
61
61
  if (ssr && !event_type) {
62
- if (window.location.href.includes("live_preview")) {
62
+ const url = new URL(window.location.href);
63
+ let live_preview = url.searchParams.get("live_preview");
64
+ let content_type_uid = url.searchParams.get("content_type_uid");
65
+ let entry_uid = url.searchParams.get("entry_uid");
66
+ if (live_preview && content_type_uid && entry_uid) {
63
67
  window.location.reload();
64
68
  } else {
65
- const url = new URL(window.location.href);
66
- url.searchParams.set("live_preview", event.data.hash);
67
- url.searchParams.set("content_type_uid", Config.get().stackDetails.contentTypeUid || "");
68
- url.searchParams.set("entry_uid", Config.get().stackDetails.entryUid || "");
69
+ live_preview = event.data.hash;
70
+ content_type_uid = event.data.content_type_uid || ((_b = stackDetails.$contentTypeUid) == null ? void 0 : _b.toString()) || "";
71
+ entry_uid = event.data.entry_uid || ((_c = stackDetails.$entryUid) == null ? void 0 : _c.toString()) || "";
72
+ url.searchParams.set("live_preview", live_preview);
73
+ if (content_type_uid) {
74
+ url.searchParams.set(
75
+ "content_type_uid",
76
+ content_type_uid
77
+ );
78
+ }
79
+ if (entry_uid) {
80
+ url.searchParams.set(
81
+ "entry_uid",
82
+ entry_uid
83
+ );
84
+ }
69
85
  window.location.href = url.toString();
70
86
  }
71
87
  }
@@ -93,7 +109,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
93
109
  config: {
94
110
  shouldReload: Config.get().ssr,
95
111
  href: window.location.href,
96
- sdkVersion: "4.0.1",
112
+ sdkVersion: "4.0.2",
97
113
  mode: Config.get().mode
98
114
  }
99
115
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/livePreview/eventManager/postMessageEvent.hooks.ts"],"sourcesContent":["import { isOpeningInNewTab } from \"../../common/inIframe\";\nimport Config, { setConfigFromParams } from \"../../configManager/configManager\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport { ILivePreviewWindowType } from \"../../types/types\";\nimport { addParamsToUrl, isOpeningInTimeline } from \"../../utils\";\nimport livePreviewPostMessage from \"./livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"./livePreviewEventManager.constant\";\nimport {\n HistoryLivePreviewPostMessageEventData,\n LivePreviewInitEventResponse,\n OnChangeLivePreviewPostMessageEventData,\n OnChangeLivePreviewPostMessageEventTypes,\n} from \"./types/livePreviewPostMessageEvent.type\";\n\n/**\n * Registers a post message event listener for history-related events.\n * The listener handles events for forward, backward, and reload actions on the browser history.\n */\nexport function useHistoryPostMessageEvent(): void {\n livePreviewPostMessage?.on<HistoryLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY,\n (event) => {\n switch (event.data.type) {\n case \"forward\": {\n window.history.forward();\n break;\n }\n case \"backward\": {\n window.history.back();\n break;\n }\n case \"reload\": {\n window.history.go();\n break;\n }\n default: {\n const exhaustiveCheck: never = event.data.type;\n throw new Error(`Unhandled event: ${exhaustiveCheck}`);\n }\n }\n }\n );\n}\n\n/**\n * Registers a post message event listener for updating the entry in the live preview.\n */\nexport function useOnEntryUpdatePostMessageEvent(): void {\n livePreviewPostMessage?.on<OnChangeLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,\n (event) => {\n try {\n const { ssr, onChange } = Config.get();\n const event_type = event.data._metadata?.event_type;\n setConfigFromParams({\n live_preview: event.data.hash,\n });\n\n // This section will run when there is a change in the entry and the website is CSR\n if (!ssr && !event_type) {\n onChange();\n } \n\n if(isOpeningInNewTab()) {\n if(!window) {\n PublicLogger.error(\"window is not defined\");\n return;\n };\n \n // This section will run when there is a change in the entry and the website is SSR\n if(ssr && !event_type) {\n if(window.location.href.includes(\"live_preview\")) {\n window.location.reload();\n } else {\n const url = new URL(window.location.href);\n url.searchParams.set(\"live_preview\", event.data.hash);\n url.searchParams.set(\"content_type_uid\", Config.get().stackDetails.contentTypeUid || \"\");\n url.searchParams.set(\"entry_uid\", Config.get().stackDetails.entryUid || \"\");\n window.location.href = url.toString();\n }\n }\n \n // This section will run when the hash changes and the website is SSR or CSR\n if(event_type === OnChangeLivePreviewPostMessageEventTypes.HASH_CHANGE){\n const newUrl = new URL(window.location.href);\n newUrl.searchParams.set(\"live_preview\", event.data.hash);\n window.history.pushState({}, \"\", newUrl.toString());\n }\n \n // This section will run when the URL of the page changes\n if(event_type === OnChangeLivePreviewPostMessageEventTypes.URL_CHANGE && event.data.url){\n window.location.href = event.data.url;\n }\n }\n\n \n } catch (error) {\n PublicLogger.error(\"Error handling live preview update:\", error);\n return;\n }\n }\n );\n}\n\nexport function sendInitializeLivePreviewPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send<LivePreviewInitEventResponse>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.INIT,\n {\n config: {\n shouldReload: Config.get().ssr,\n href: window.location.href,\n sdkVersion: process?.env?.PACKAGE_VERSION,\n mode: Config.get().mode,\n },\n }\n )\n .then((data) => {\n const {\n contentTypeUid,\n entryUid,\n windowType = ILivePreviewWindowType.PREVIEW,\n } = data || {};\n\n // TODO: This is a fix for the issue where we were calling sending init in the builder\n // Let's remove this condition when we fix it.\n if (Config?.get()?.windowType && Config.get().windowType === ILivePreviewWindowType.BUILDER) {\n return;\n }\n\n if (contentTypeUid && entryUid) {\n // TODO: we should not use this function. Instead we should have sideEffect run automatically when we set the config.\n setConfigFromParams({\n content_type_uid: contentTypeUid,\n entry_uid: entryUid,\n });\n } else {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\n // \"init message did not contain contentTypeUid or entryUid.\"\n // );\n }\n if (Config.get().ssr || isOpeningInTimeline() || isOpeningInNewTab()) {\n addParamsToUrl();\n }\n Config.set(\"windowType\", windowType);\n\n // set timeout for client side (use to show warning: You are not editing this page)\n if (!Config.get().ssr) {\n setInterval(() => {\n sendCurrentPageUrlPostMessageEvent();\n }, 1500);\n }\n\n useHistoryPostMessageEvent();\n useOnEntryUpdatePostMessageEvent();\n })\n .catch((e) => {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\"Error while sending init message\", e);\n });\n}\n\nfunction sendCurrentPageUrlPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.CHECK_ENTRY_PAGE, {\n href: window.location.href,\n })\n .catch(() => {\n // TODO: add debug logs that runs conditionally\n });\n}\n"],"mappings":"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","names":["_a"]}
1
+ {"version":3,"sources":["../../../../src/livePreview/eventManager/postMessageEvent.hooks.ts"],"sourcesContent":["import { isOpeningInNewTab } from \"../../common/inIframe\";\nimport Config, { setConfigFromParams } from \"../../configManager/configManager\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport { ILivePreviewWindowType } from \"../../types/types\";\nimport { addParamsToUrl, isOpeningInTimeline } from \"../../utils\";\nimport livePreviewPostMessage from \"./livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"./livePreviewEventManager.constant\";\nimport {\n HistoryLivePreviewPostMessageEventData,\n LivePreviewInitEventResponse,\n OnChangeLivePreviewPostMessageEventData,\n OnChangeLivePreviewPostMessageEventTypes,\n} from \"./types/livePreviewPostMessageEvent.type\";\n\n/**\n * Registers a post message event listener for history-related events.\n * The listener handles events for forward, backward, and reload actions on the browser history.\n */\nexport function useHistoryPostMessageEvent(): void {\n livePreviewPostMessage?.on<HistoryLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY,\n (event) => {\n switch (event.data.type) {\n case \"forward\": {\n window.history.forward();\n break;\n }\n case \"backward\": {\n window.history.back();\n break;\n }\n case \"reload\": {\n window.history.go();\n break;\n }\n default: {\n const exhaustiveCheck: never = event.data.type;\n throw new Error(`Unhandled event: ${exhaustiveCheck}`);\n }\n }\n }\n );\n}\n\n/**\n * Registers a post message event listener for updating the entry in the live preview.\n */\nexport function useOnEntryUpdatePostMessageEvent(): void {\n livePreviewPostMessage?.on<OnChangeLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,\n (event) => {\n try {\n const { ssr, onChange, stackDetails } = Config.get();\n const event_type = event.data._metadata?.event_type;\n setConfigFromParams({\n live_preview: event.data.hash,\n });\n\n // This section will run when there is a change in the entry and the website is CSR\n if (!ssr && !event_type) {\n onChange();\n }\n\n if (isOpeningInNewTab()) {\n if (!window) {\n PublicLogger.error(\"window is not defined\");\n return;\n };\n\n if (ssr && !event_type) {\n const url = new URL(window.location.href);\n let live_preview = url.searchParams.get(\"live_preview\");\n let content_type_uid = url.searchParams.get(\"content_type_uid\");\n let entry_uid = url.searchParams.get(\"entry_uid\");\n\n if (live_preview && content_type_uid && entry_uid) {\n // All required params are present, just reload\n window.location.reload();\n } else {\n live_preview = event.data.hash;\n content_type_uid = event.data.content_type_uid || stackDetails.$contentTypeUid?.toString() || \"\";\n entry_uid = event.data.entry_uid || stackDetails.$entryUid?.toString() || \"\";\n // Set missing params and redirect\n url.searchParams.set(\"live_preview\", live_preview);\n if (content_type_uid) {\n url.searchParams.set(\n \"content_type_uid\",\n content_type_uid\n );\n }\n if (entry_uid) {\n url.searchParams.set(\n \"entry_uid\",\n entry_uid\n );\n }\n window.location.href = url.toString();\n }\n }\n\n // This section will run when the hash changes and the website is SSR or CSR\n if (event_type === OnChangeLivePreviewPostMessageEventTypes.HASH_CHANGE) {\n const newUrl = new URL(window.location.href);\n newUrl.searchParams.set(\"live_preview\", event.data.hash);\n window.history.pushState({}, \"\", newUrl.toString());\n }\n\n // This section will run when the URL of the page changes\n if (event_type === OnChangeLivePreviewPostMessageEventTypes.URL_CHANGE && event.data.url) {\n window.location.href = event.data.url;\n }\n }\n } catch (error) {\n PublicLogger.error(\"Error handling live preview update:\", error);\n return;\n }\n }\n );\n}\n\nexport function sendInitializeLivePreviewPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send<LivePreviewInitEventResponse>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.INIT,\n {\n config: {\n shouldReload: Config.get().ssr,\n href: window.location.href,\n sdkVersion: process?.env?.PACKAGE_VERSION,\n mode: Config.get().mode,\n },\n }\n )\n .then((data) => {\n const {\n contentTypeUid,\n entryUid,\n windowType = ILivePreviewWindowType.PREVIEW,\n } = data || {};\n\n // TODO: This is a fix for the issue where we were calling sending init in the builder\n // Let's remove this condition when we fix it.\n if (Config?.get()?.windowType && Config.get().windowType === ILivePreviewWindowType.BUILDER) {\n return;\n }\n\n if (contentTypeUid && entryUid) {\n // TODO: we should not use this function. Instead we should have sideEffect run automatically when we set the config.\n setConfigFromParams({\n content_type_uid: contentTypeUid,\n entry_uid: entryUid,\n });\n } else {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\n // \"init message did not contain contentTypeUid or entryUid.\"\n // );\n }\n if (Config.get().ssr || isOpeningInTimeline() || isOpeningInNewTab()) {\n addParamsToUrl();\n }\n Config.set(\"windowType\", windowType);\n\n // set timeout for client side (use to show warning: You are not editing this page)\n if (!Config.get().ssr) {\n setInterval(() => {\n sendCurrentPageUrlPostMessageEvent();\n }, 1500);\n }\n\n useHistoryPostMessageEvent();\n useOnEntryUpdatePostMessageEvent();\n })\n .catch((e) => {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\"Error while sending init message\", e);\n });\n}\n\nfunction sendCurrentPageUrlPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.CHECK_ENTRY_PAGE, {\n href: window.location.href,\n })\n .catch(() => {\n // TODO: add debug logs that runs conditionally\n });\n}\n"],"mappings":"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","names":["_a"]}
@@ -227,7 +227,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
227
227
  * @returns The version of the SDK as a string.
228
228
  */
229
229
  static getSdkVersion() {
230
- return "4.0.1";
230
+ return "4.0.2";
231
231
  }
232
232
  };
233
233
  _ContentstackLivePreview.previewConstructors = {};
@@ -195,7 +195,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
195
195
  * @returns The version of the SDK as a string.
196
196
  */
197
197
  static getSdkVersion() {
198
- return "4.0.1";
198
+ return "4.0.2";
199
199
  }
200
200
  };
201
201
  _ContentstackLivePreview.previewConstructors = {};
@@ -48,7 +48,8 @@ function enableInlineEditing({
48
48
  actualEditableField.addEventListener("paste", import_pasteAsPlainText.pasteAsPlainText);
49
49
  }
50
50
  const expectedTextContent = expectedFieldData;
51
- if (expectedTextContent && textContent !== expectedTextContent || (0, import_generatePseudoEditableField.isEllipsisActive)(editableElement)) {
51
+ const isFieldLastEdited = document.querySelector("[data-cs-last-edited]") === editableElement;
52
+ if (expectedTextContent && textContent !== expectedTextContent || (0, import_generatePseudoEditableField.isEllipsisActive)(editableElement) || isFieldLastEdited) {
52
53
  const pseudoEditableField = (0, import_generatePseudoEditableField.generatePseudoEditableElement)(
53
54
  { editableElement },
54
55
  { textContent: expectedFieldData }
@@ -84,6 +85,7 @@ function enableInlineEditing({
84
85
  actualEditableField.setAttribute("contenteditable", "true");
85
86
  actualEditableField.addEventListener("input", import_handleFieldMouseDown.handleFieldInput);
86
87
  actualEditableField.addEventListener("keydown", import_handleFieldMouseDown.handleFieldKeyDown);
88
+ editableElement.setAttribute("data-cs-last-edited", "true");
87
89
  actualEditableField.focus();
88
90
  return;
89
91
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n isEllipsisActive,\n generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n expectedFieldData,\n editableElement,\n fieldType,\n elements,\n}: {\n expectedFieldData: any;\n editableElement: HTMLElement;\n fieldType: FieldDataType;\n elements: VisualBuilderEditContext;\n}) {\n const { visualBuilderContainer, resizeObserver } = elements;\n let actualEditableField = editableElement as HTMLElement;\n\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n actualEditableField?.innerText;\n\n const elementComputedDisplay =\n window.getComputedStyle(actualEditableField).display;\n\n let textContent =\n (editableElement as HTMLElement).innerText ||\n editableElement.textContent ||\n \"\";\n\n if (fieldType === FieldDataType.MULTILINE) {\n textContent = getMultilinePlaintext(actualEditableField);\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n }\n const expectedTextContent = expectedFieldData;\n if (\n (expectedTextContent && textContent !== expectedTextContent) ||\n isEllipsisActive(editableElement as HTMLElement)\n ) {\n // TODO: Testing will be done in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: expectedFieldData }\n );\n\n (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n // set field type attribute to the pseudo editable field\n // ensures proper keydown handling similar to the actual editable field\n pseudoEditableField.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n visualBuilderContainer.appendChild(pseudoEditableField);\n actualEditableField = pseudoEditableField;\n\n if (fieldType === FieldDataType.MULTILINE)\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n // we will unobserve this in hideOverlay\n elements.resizeObserver.observe(pseudoEditableField);\n } else if (elementComputedDisplay === \"inline\") {\n // if the editable field is inline\n const onInlineElementInput = throttle(() => {\n const overlayWrapper = visualBuilderContainer.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement;\n const focusedToolbar = visualBuilderContainer.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n updateFocussedState({\n editableElement: actualEditableField,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n });\n }, 200);\n actualEditableField.addEventListener(\"input\", onInlineElementInput);\n }\n\n actualEditableField.setAttribute(\"contenteditable\", \"true\");\n actualEditableField.addEventListener(\"input\", handleFieldInput);\n actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n // focus on the contenteditable element to start accepting input\n actualEditableField.focus();\n\n return;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,eAA8B;AAC9B,yCAGO;AACP,uBAAwD;AACxD,mCAAsC;AACtC,kCAAqD;AACrD,mBAAwD;AACxD,iCAAoC;AACpC,8BAAiC;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,yBAAc,yBAAyB,MAAM,kBACzC,2DAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAEjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,2BAAc,WAAW;AACvC,sBAAc,oDAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,wCAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAC5B,MACK,uBAAuB,gBAAgB,2BACxC,qDAAiB,eAA8B,GACjD;AAEE,UAAM,0BAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,2BAAc;AAC5B,0BAAoB,iBAAiB,SAAS,wCAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,2BAAuB,2BAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0DAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,4CAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,8CAAkB;AAElE,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n isEllipsisActive,\n generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n expectedFieldData,\n editableElement,\n fieldType,\n elements,\n}: {\n expectedFieldData: any;\n editableElement: HTMLElement;\n fieldType: FieldDataType;\n elements: VisualBuilderEditContext;\n}) {\n const { visualBuilderContainer, resizeObserver } = elements;\n let actualEditableField = editableElement as HTMLElement;\n\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n actualEditableField?.innerText;\n\n const elementComputedDisplay =\n window.getComputedStyle(actualEditableField).display;\n\n \n let textContent =\n (editableElement as HTMLElement).innerText ||\n editableElement.textContent ||\n \"\";\n\n if (fieldType === FieldDataType.MULTILINE) {\n textContent = getMultilinePlaintext(actualEditableField);\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n }\n const expectedTextContent = expectedFieldData;\n \n const isFieldLastEdited = document.querySelector(\"[data-cs-last-edited]\") === editableElement;\n if (\n (expectedTextContent && textContent !== expectedTextContent) ||\n isEllipsisActive(editableElement as HTMLElement) ||\n isFieldLastEdited\n ) {\n // TODO: Testing will be done in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: expectedFieldData } \n );\n\n (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n // set field type attribute to the pseudo editable field\n // ensures proper keydown handling similar to the actual editable field\n pseudoEditableField.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n visualBuilderContainer.appendChild(pseudoEditableField);\n actualEditableField = pseudoEditableField;\n\n if (fieldType === FieldDataType.MULTILINE)\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n // we will unobserve this in hideOverlay\n elements.resizeObserver.observe(pseudoEditableField);\n } else if (elementComputedDisplay === \"inline\") {\n // if the editable field is inline\n const onInlineElementInput = throttle(() => {\n const overlayWrapper = visualBuilderContainer.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement;\n const focusedToolbar = visualBuilderContainer.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n updateFocussedState({\n editableElement: actualEditableField,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n });\n }, 200);\n actualEditableField.addEventListener(\"input\", onInlineElementInput);\n }\n\n actualEditableField.setAttribute(\"contenteditable\", \"true\");\n actualEditableField.addEventListener(\"input\", handleFieldInput);\n actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n\n editableElement.setAttribute(\"data-cs-last-edited\", \"true\");\n\n // focus on the contenteditable element to start accepting input\n actualEditableField.focus();\n\n return;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,eAA8B;AAC9B,yCAGO;AACP,uBAAwD;AACxD,mCAAsC;AACtC,kCAAqD;AACrD,mBAAwD;AACxD,iCAAoC;AACpC,8BAAiC;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,yBAAc,yBAAyB,MAAM,kBACzC,2DAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAGjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,2BAAc,WAAW;AACvC,sBAAc,oDAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,wCAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAE5B,QAAM,oBAAoB,SAAS,cAAc,uBAAuB,MAAM;AAC9E,MACK,uBAAuB,gBAAgB,2BACxC,qDAAiB,eAA8B,KAC/C,mBACF;AAEE,UAAM,0BAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,2BAAc;AAC5B,0BAAoB,iBAAiB,SAAS,wCAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,2BAAuB,2BAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0DAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,4CAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,8CAAkB;AAElE,kBAAgB,aAAa,uBAAuB,MAAM;AAG1D,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
@@ -29,7 +29,8 @@ function enableInlineEditing({
29
29
  actualEditableField.addEventListener("paste", pasteAsPlainText);
30
30
  }
31
31
  const expectedTextContent = expectedFieldData;
32
- if (expectedTextContent && textContent !== expectedTextContent || isEllipsisActive(editableElement)) {
32
+ const isFieldLastEdited = document.querySelector("[data-cs-last-edited]") === editableElement;
33
+ if (expectedTextContent && textContent !== expectedTextContent || isEllipsisActive(editableElement) || isFieldLastEdited) {
33
34
  const pseudoEditableField = generatePseudoEditableElement(
34
35
  { editableElement },
35
36
  { textContent: expectedFieldData }
@@ -65,6 +66,7 @@ function enableInlineEditing({
65
66
  actualEditableField.setAttribute("contenteditable", "true");
66
67
  actualEditableField.addEventListener("input", handleFieldInput);
67
68
  actualEditableField.addEventListener("keydown", handleFieldKeyDown);
69
+ editableElement.setAttribute("data-cs-last-edited", "true");
68
70
  actualEditableField.focus();
69
71
  return;
70
72
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n isEllipsisActive,\n generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n expectedFieldData,\n editableElement,\n fieldType,\n elements,\n}: {\n expectedFieldData: any;\n editableElement: HTMLElement;\n fieldType: FieldDataType;\n elements: VisualBuilderEditContext;\n}) {\n const { visualBuilderContainer, resizeObserver } = elements;\n let actualEditableField = editableElement as HTMLElement;\n\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n actualEditableField?.innerText;\n\n const elementComputedDisplay =\n window.getComputedStyle(actualEditableField).display;\n\n let textContent =\n (editableElement as HTMLElement).innerText ||\n editableElement.textContent ||\n \"\";\n\n if (fieldType === FieldDataType.MULTILINE) {\n textContent = getMultilinePlaintext(actualEditableField);\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n }\n const expectedTextContent = expectedFieldData;\n if (\n (expectedTextContent && textContent !== expectedTextContent) ||\n isEllipsisActive(editableElement as HTMLElement)\n ) {\n // TODO: Testing will be done in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: expectedFieldData }\n );\n\n (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n // set field type attribute to the pseudo editable field\n // ensures proper keydown handling similar to the actual editable field\n pseudoEditableField.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n visualBuilderContainer.appendChild(pseudoEditableField);\n actualEditableField = pseudoEditableField;\n\n if (fieldType === FieldDataType.MULTILINE)\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n // we will unobserve this in hideOverlay\n elements.resizeObserver.observe(pseudoEditableField);\n } else if (elementComputedDisplay === \"inline\") {\n // if the editable field is inline\n const onInlineElementInput = throttle(() => {\n const overlayWrapper = visualBuilderContainer.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement;\n const focusedToolbar = visualBuilderContainer.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n updateFocussedState({\n editableElement: actualEditableField,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n });\n }, 200);\n actualEditableField.addEventListener(\"input\", onInlineElementInput);\n }\n\n actualEditableField.setAttribute(\"contenteditable\", \"true\");\n actualEditableField.addEventListener(\"input\", handleFieldInput);\n actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n // focus on the contenteditable element to start accepting input\n actualEditableField.focus();\n\n return;\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,+CAA+C;AACxD,SAAS,6BAA6B;AACtC,SAAS,kBAAkB,0BAA0B;AACrD,SAAS,qBAA+C;AACxD,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,gBAAc,yBAAyB,MAAM,kBACzC,2DAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAEjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,cAAc,WAAW;AACvC,kBAAc,sBAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,gBAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAC5B,MACK,uBAAuB,gBAAgB,uBACxC,iBAAiB,eAA8B,GACjD;AAEE,UAAM,sBAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,cAAc;AAC5B,0BAAoB,iBAAiB,SAAS,gBAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,uBAAuB,SAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0BAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,gBAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,kBAAkB;AAElE,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n isEllipsisActive,\n generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n expectedFieldData,\n editableElement,\n fieldType,\n elements,\n}: {\n expectedFieldData: any;\n editableElement: HTMLElement;\n fieldType: FieldDataType;\n elements: VisualBuilderEditContext;\n}) {\n const { visualBuilderContainer, resizeObserver } = elements;\n let actualEditableField = editableElement as HTMLElement;\n\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n actualEditableField?.innerText;\n\n const elementComputedDisplay =\n window.getComputedStyle(actualEditableField).display;\n\n \n let textContent =\n (editableElement as HTMLElement).innerText ||\n editableElement.textContent ||\n \"\";\n\n if (fieldType === FieldDataType.MULTILINE) {\n textContent = getMultilinePlaintext(actualEditableField);\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n }\n const expectedTextContent = expectedFieldData;\n \n const isFieldLastEdited = document.querySelector(\"[data-cs-last-edited]\") === editableElement;\n if (\n (expectedTextContent && textContent !== expectedTextContent) ||\n isEllipsisActive(editableElement as HTMLElement) ||\n isFieldLastEdited\n ) {\n // TODO: Testing will be done in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: expectedFieldData } \n );\n\n (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n // set field type attribute to the pseudo editable field\n // ensures proper keydown handling similar to the actual editable field\n pseudoEditableField.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n visualBuilderContainer.appendChild(pseudoEditableField);\n actualEditableField = pseudoEditableField;\n\n if (fieldType === FieldDataType.MULTILINE)\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n // we will unobserve this in hideOverlay\n elements.resizeObserver.observe(pseudoEditableField);\n } else if (elementComputedDisplay === \"inline\") {\n // if the editable field is inline\n const onInlineElementInput = throttle(() => {\n const overlayWrapper = visualBuilderContainer.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement;\n const focusedToolbar = visualBuilderContainer.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n updateFocussedState({\n editableElement: actualEditableField,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n });\n }, 200);\n actualEditableField.addEventListener(\"input\", onInlineElementInput);\n }\n\n actualEditableField.setAttribute(\"contenteditable\", \"true\");\n actualEditableField.addEventListener(\"input\", handleFieldInput);\n actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n\n editableElement.setAttribute(\"data-cs-last-edited\", \"true\");\n\n // focus on the contenteditable element to start accepting input\n actualEditableField.focus();\n\n return;\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,+CAA+C;AACxD,SAAS,6BAA6B;AACtC,SAAS,kBAAkB,0BAA0B;AACrD,SAAS,qBAA+C;AACxD,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,gBAAc,yBAAyB,MAAM,kBACzC,2DAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAGjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,cAAc,WAAW;AACvC,kBAAc,sBAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,gBAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAE5B,QAAM,oBAAoB,SAAS,cAAc,uBAAuB,MAAM;AAC9E,MACK,uBAAuB,gBAAgB,uBACxC,iBAAiB,eAA8B,KAC/C,mBACF;AAEE,UAAM,sBAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,cAAc;AAC5B,0BAAoB,iBAAiB,SAAS,gBAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,uBAAuB,SAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0BAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,gBAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,kBAAkB;AAElE,kBAAgB,aAAa,uBAAuB,MAAM;AAG1D,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
@@ -37,6 +37,11 @@ function handleFieldInput(e) {
37
37
  const fieldType = targetElement.getAttribute(
38
38
  import_constants.VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
39
39
  );
40
+ const previousLastEditedElement = document.querySelector("[data-cs-last-edited]");
41
+ if (previousLastEditedElement !== targetElement) {
42
+ previousLastEditedElement == null ? void 0 : previousLastEditedElement.removeAttribute("data-cs-last-edited");
43
+ targetElement.setAttribute("data-cs-last-edited", "true");
44
+ }
40
45
  if (event.type === "input" && import_constants.ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {
41
46
  if (!import__.VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput) {
42
47
  import__.VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput = true;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n const event = e as InputEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n if (\n event.type === \"input\" &&\n ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n ) {\n if (\n !VisualBuilder.VisualBuilderGlobalState.value\n .focusFieldReceivedInput\n ) {\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n true;\n }\n throttledFieldSync();\n }\n}\nconst throttledFieldSync = throttle(() => {\n try {\n const visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n ) as HTMLElement;\n if (!visualBuilderContainer) return;\n sendFieldEvent({\n visualBuilderContainer,\n eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n });\n } catch (error) {\n console.error(\"Error in throttledFieldSync\", error);\n }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n const event = e as KeyboardEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n if (\n event\n .composedPath()\n .some(\n (element) =>\n element instanceof Element && element.tagName === \"BUTTON\"\n )\n ) {\n // custom space handling when a button is involved\n handleKeyDownOnButton(event);\n }\n if (fieldType === FieldDataType.NUMBER) {\n handleNumericFieldKeyDown(event);\n } else if (fieldType === FieldDataType.SINGLELINE) {\n handleSingleLineFieldKeyDown(event);\n }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n if (e.code === \"Space\" && e.target) {\n e.preventDefault();\n insertSpaceAtCursor(e.target as HTMLElement);\n throttledFieldSync();\n }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n if (e.code === \"Enter\") {\n e.preventDefault();\n }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n const targetElement = event.target as HTMLElement;\n\n const allowedKeys = [\n \"Backspace\",\n \"Tab\",\n \"Enter\",\n \"End\",\n \"Home\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Delete\",\n ];\n\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n allowedKeys.includes(event.code)\n ) {\n // Allow Ctrl, Cmd, Alt, and special keys\n return;\n }\n\n if (event.code.includes(\"Digit\")) {\n return;\n }\n\n const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n if (!nonNumericAllowedCharacters.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n const selection = {\n startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n };\n\n const existingInput = targetElement.textContent || \"\";\n const currentOutputArr = existingInput.split(\"\");\n currentOutputArr.splice(\n selection.startOffset,\n selection.endOffset - selection.startOffset,\n event.key\n );\n const currentInput = currentOutputArr.join(\"\");\n\n if (!numericInputRegex.test(currentInput)) {\n event.preventDefault();\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,6BAA+B;AAC/B,uBAIO;AACP,mBAA8B;AAC9B,yBAA+C;AAC/C,iCAAoC;AACpC,eAA8B;AAEvB,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,+CAA8B,SAAS,SAA0B,GACnE;AACE,QACI,CAAC,uBAAc,yBAAyB,MACnC,yBACP;AACE,6BAAc,yBAAyB,MAAM,0BACzC;AAAA,IACR;AACA,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,yBAAqB,2BAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,+CAAe;AAAA,MACX;AAAA,MACA,WAAW,kDAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MACI,MACK,aAAa,EACb;AAAA,IACG,CAAC,YACG,mBAAmB,WAAW,QAAQ,YAAY;AAAA,EAC1D,GACN;AAEE,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,2BAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,2BAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wDAAoB,EAAE,MAAqB;AAC3C,uBAAmB;AAAA,EACvB;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAzF/D;AA0FI,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,eAAa,YAAO,aAAa,MAApB,mBAAuB,WAAW,GAAG,gBAAe;AAAA,IACjE,aAAW,YAAO,aAAa,MAApB,mBAAuB,WAAW,GAAG,cAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,mCAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n const event = e as InputEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n const previousLastEditedElement = document.querySelector(\"[data-cs-last-edited]\");\n if (previousLastEditedElement !== targetElement) {\n previousLastEditedElement?.removeAttribute(\"data-cs-last-edited\");\n targetElement.setAttribute(\"data-cs-last-edited\", \"true\");\n }\n if (\n event.type === \"input\" &&\n ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n ) {\n if (\n !VisualBuilder.VisualBuilderGlobalState.value\n .focusFieldReceivedInput\n ) {\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n true;\n }\n throttledFieldSync();\n }\n}\nconst throttledFieldSync = throttle(() => {\n try {\n const visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n ) as HTMLElement;\n if (!visualBuilderContainer) return;\n sendFieldEvent({\n visualBuilderContainer,\n eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n });\n } catch (error) {\n console.error(\"Error in throttledFieldSync\", error);\n }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n const event = e as KeyboardEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n if (\n event\n .composedPath()\n .some(\n (element) =>\n element instanceof Element && element.tagName === \"BUTTON\"\n )\n ) {\n // custom space handling when a button is involved\n handleKeyDownOnButton(event);\n }\n if (fieldType === FieldDataType.NUMBER) {\n handleNumericFieldKeyDown(event);\n } else if (fieldType === FieldDataType.SINGLELINE) {\n handleSingleLineFieldKeyDown(event);\n }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n if (e.code === \"Space\" && e.target) {\n e.preventDefault();\n insertSpaceAtCursor(e.target as HTMLElement);\n throttledFieldSync();\n }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n if (e.code === \"Enter\") {\n e.preventDefault();\n }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n const targetElement = event.target as HTMLElement;\n\n const allowedKeys = [\n \"Backspace\",\n \"Tab\",\n \"Enter\",\n \"End\",\n \"Home\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Delete\",\n ];\n\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n allowedKeys.includes(event.code)\n ) {\n // Allow Ctrl, Cmd, Alt, and special keys\n return;\n }\n\n if (event.code.includes(\"Digit\")) {\n return;\n }\n\n const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n if (!nonNumericAllowedCharacters.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n const selection = {\n startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n };\n\n const existingInput = targetElement.textContent || \"\";\n const currentOutputArr = existingInput.split(\"\");\n currentOutputArr.splice(\n selection.startOffset,\n selection.endOffset - selection.startOffset,\n event.key\n );\n const currentInput = currentOutputArr.join(\"\");\n\n if (!numericInputRegex.test(currentInput)) {\n event.preventDefault();\n }\n}\n"],"mappings":"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","names":[]}
@@ -18,6 +18,11 @@ function handleFieldInput(e) {
18
18
  const fieldType = targetElement.getAttribute(
19
19
  VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
20
20
  );
21
+ const previousLastEditedElement = document.querySelector("[data-cs-last-edited]");
22
+ if (previousLastEditedElement !== targetElement) {
23
+ previousLastEditedElement == null ? void 0 : previousLastEditedElement.removeAttribute("data-cs-last-edited");
24
+ targetElement.setAttribute("data-cs-last-edited", "true");
25
+ }
21
26
  if (event.type === "input" && ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {
22
27
  if (!VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput) {
23
28
  VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput = true;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n const event = e as InputEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n if (\n event.type === \"input\" &&\n ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n ) {\n if (\n !VisualBuilder.VisualBuilderGlobalState.value\n .focusFieldReceivedInput\n ) {\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n true;\n }\n throttledFieldSync();\n }\n}\nconst throttledFieldSync = throttle(() => {\n try {\n const visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n ) as HTMLElement;\n if (!visualBuilderContainer) return;\n sendFieldEvent({\n visualBuilderContainer,\n eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n });\n } catch (error) {\n console.error(\"Error in throttledFieldSync\", error);\n }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n const event = e as KeyboardEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n if (\n event\n .composedPath()\n .some(\n (element) =>\n element instanceof Element && element.tagName === \"BUTTON\"\n )\n ) {\n // custom space handling when a button is involved\n handleKeyDownOnButton(event);\n }\n if (fieldType === FieldDataType.NUMBER) {\n handleNumericFieldKeyDown(event);\n } else if (fieldType === FieldDataType.SINGLELINE) {\n handleSingleLineFieldKeyDown(event);\n }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n if (e.code === \"Space\" && e.target) {\n e.preventDefault();\n insertSpaceAtCursor(e.target as HTMLElement);\n throttledFieldSync();\n }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n if (e.code === \"Enter\") {\n e.preventDefault();\n }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n const targetElement = event.target as HTMLElement;\n\n const allowedKeys = [\n \"Backspace\",\n \"Tab\",\n \"Enter\",\n \"End\",\n \"Home\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Delete\",\n ];\n\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n allowedKeys.includes(event.code)\n ) {\n // Allow Ctrl, Cmd, Alt, and special keys\n return;\n }\n\n if (event.code.includes(\"Digit\")) {\n return;\n }\n\n const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n if (!nonNumericAllowedCharacters.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n const selection = {\n startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n };\n\n const existingInput = targetElement.textContent || \"\";\n const currentOutputArr = existingInput.split(\"\");\n currentOutputArr.splice(\n selection.startOffset,\n selection.endOffset - selection.startOffset,\n event.key\n );\n const currentInput = currentOutputArr.join(\"\");\n\n if (!numericInputRegex.test(currentInput)) {\n event.preventDefault();\n }\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,qBAAqB;AAC9B,SAAS,sCAAsC;AAC/C,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAEvB,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,8BAA8B,SAAS,SAA0B,GACnE;AACE,QACI,CAAC,cAAc,yBAAyB,MACnC,yBACP;AACE,oBAAc,yBAAyB,MAAM,0BACzC;AAAA,IACR;AACA,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,qBAAqB,SAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,mBAAe;AAAA,MACX;AAAA,MACA,WAAW,+BAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MACI,MACK,aAAa,EACb;AAAA,IACG,CAAC,YACG,mBAAmB,WAAW,QAAQ,YAAY;AAAA,EAC1D,GACN;AAEE,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,cAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,cAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wBAAoB,EAAE,MAAqB;AAC3C,uBAAmB;AAAA,EACvB;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAzF/D;AA0FI,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,eAAa,YAAO,aAAa,MAApB,mBAAuB,WAAW,GAAG,gBAAe;AAAA,IACjE,aAAW,YAAO,aAAa,MAApB,mBAAuB,WAAW,GAAG,cAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,kBAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n const event = e as InputEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n const previousLastEditedElement = document.querySelector(\"[data-cs-last-edited]\");\n if (previousLastEditedElement !== targetElement) {\n previousLastEditedElement?.removeAttribute(\"data-cs-last-edited\");\n targetElement.setAttribute(\"data-cs-last-edited\", \"true\");\n }\n if (\n event.type === \"input\" &&\n ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n ) {\n if (\n !VisualBuilder.VisualBuilderGlobalState.value\n .focusFieldReceivedInput\n ) {\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n true;\n }\n throttledFieldSync();\n }\n}\nconst throttledFieldSync = throttle(() => {\n try {\n const visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n ) as HTMLElement;\n if (!visualBuilderContainer) return;\n sendFieldEvent({\n visualBuilderContainer,\n eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n });\n } catch (error) {\n console.error(\"Error in throttledFieldSync\", error);\n }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n const event = e as KeyboardEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n if (\n event\n .composedPath()\n .some(\n (element) =>\n element instanceof Element && element.tagName === \"BUTTON\"\n )\n ) {\n // custom space handling when a button is involved\n handleKeyDownOnButton(event);\n }\n if (fieldType === FieldDataType.NUMBER) {\n handleNumericFieldKeyDown(event);\n } else if (fieldType === FieldDataType.SINGLELINE) {\n handleSingleLineFieldKeyDown(event);\n }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n if (e.code === \"Space\" && e.target) {\n e.preventDefault();\n insertSpaceAtCursor(e.target as HTMLElement);\n throttledFieldSync();\n }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n if (e.code === \"Enter\") {\n e.preventDefault();\n }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n const targetElement = event.target as HTMLElement;\n\n const allowedKeys = [\n \"Backspace\",\n \"Tab\",\n \"Enter\",\n \"End\",\n \"Home\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Delete\",\n ];\n\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n allowedKeys.includes(event.code)\n ) {\n // Allow Ctrl, Cmd, Alt, and special keys\n return;\n }\n\n if (event.code.includes(\"Digit\")) {\n return;\n }\n\n const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n if (!nonNumericAllowedCharacters.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n const selection = {\n startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n };\n\n const existingInput = targetElement.textContent || \"\";\n const currentOutputArr = existingInput.split(\"\");\n currentOutputArr.splice(\n selection.startOffset,\n selection.endOffset - selection.startOffset,\n event.key\n );\n const currentInput = currentOutputArr.join(\"\");\n\n if (!numericInputRegex.test(currentInput)) {\n event.preventDefault();\n }\n}\n"],"mappings":"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","names":[]}
@@ -60,7 +60,7 @@ var _LightLivePreviewHoC = class _LightLivePreviewHoC {
60
60
  static unsubscribeOnEntryChange() {
61
61
  }
62
62
  static getSdkVersion() {
63
- return "4.0.1";
63
+ return "4.0.2";
64
64
  }
65
65
  };
66
66
  _LightLivePreviewHoC.previewConstructors = {};
@@ -38,7 +38,7 @@ var _LightLivePreviewHoC = class _LightLivePreviewHoC {
38
38
  static unsubscribeOnEntryChange() {
39
39
  }
40
40
  static getSdkVersion() {
41
- return "4.0.1";
41
+ return "4.0.2";
42
42
  }
43
43
  };
44
44
  _LightLivePreviewHoC.previewConstructors = {};
@@ -73,7 +73,7 @@ function useOnEntryUpdatePostMessageEvent() {
73
73
  import_livePreviewEventManager2.LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,
74
74
  (event) => {
75
75
  try {
76
- const { ssr, onChange } = import_configManager.default.get();
76
+ const { ssr, onChange, stackDetails } = import_configManager.default.get();
77
77
  const event_type = event.data._metadata?.event_type;
78
78
  (0, import_configManager.setConfigFromParams)({
79
79
  live_preview: event.data.hash
@@ -88,13 +88,29 @@ function useOnEntryUpdatePostMessageEvent() {
88
88
  }
89
89
  ;
90
90
  if (ssr && !event_type) {
91
- if (window.location.href.includes("live_preview")) {
91
+ const url = new URL(window.location.href);
92
+ let live_preview = url.searchParams.get("live_preview");
93
+ let content_type_uid = url.searchParams.get("content_type_uid");
94
+ let entry_uid = url.searchParams.get("entry_uid");
95
+ if (live_preview && content_type_uid && entry_uid) {
92
96
  window.location.reload();
93
97
  } else {
94
- const url = new URL(window.location.href);
95
- url.searchParams.set("live_preview", event.data.hash);
96
- url.searchParams.set("content_type_uid", import_configManager.default.get().stackDetails.contentTypeUid || "");
97
- url.searchParams.set("entry_uid", import_configManager.default.get().stackDetails.entryUid || "");
98
+ live_preview = event.data.hash;
99
+ content_type_uid = event.data.content_type_uid || stackDetails.$contentTypeUid?.toString() || "";
100
+ entry_uid = event.data.entry_uid || stackDetails.$entryUid?.toString() || "";
101
+ url.searchParams.set("live_preview", live_preview);
102
+ if (content_type_uid) {
103
+ url.searchParams.set(
104
+ "content_type_uid",
105
+ content_type_uid
106
+ );
107
+ }
108
+ if (entry_uid) {
109
+ url.searchParams.set(
110
+ "entry_uid",
111
+ entry_uid
112
+ );
113
+ }
98
114
  window.location.href = url.toString();
99
115
  }
100
116
  }
@@ -121,7 +137,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
121
137
  config: {
122
138
  shouldReload: import_configManager.default.get().ssr,
123
139
  href: window.location.href,
124
- sdkVersion: "4.0.1",
140
+ sdkVersion: "4.0.2",
125
141
  mode: import_configManager.default.get().mode
126
142
  }
127
143
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/livePreview/eventManager/postMessageEvent.hooks.ts"],"sourcesContent":["import { isOpeningInNewTab } from \"../../common/inIframe\";\nimport Config, { setConfigFromParams } from \"../../configManager/configManager\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport { ILivePreviewWindowType } from \"../../types/types\";\nimport { addParamsToUrl, isOpeningInTimeline } from \"../../utils\";\nimport livePreviewPostMessage from \"./livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"./livePreviewEventManager.constant\";\nimport {\n HistoryLivePreviewPostMessageEventData,\n LivePreviewInitEventResponse,\n OnChangeLivePreviewPostMessageEventData,\n OnChangeLivePreviewPostMessageEventTypes,\n} from \"./types/livePreviewPostMessageEvent.type\";\n\n/**\n * Registers a post message event listener for history-related events.\n * The listener handles events for forward, backward, and reload actions on the browser history.\n */\nexport function useHistoryPostMessageEvent(): void {\n livePreviewPostMessage?.on<HistoryLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY,\n (event) => {\n switch (event.data.type) {\n case \"forward\": {\n window.history.forward();\n break;\n }\n case \"backward\": {\n window.history.back();\n break;\n }\n case \"reload\": {\n window.history.go();\n break;\n }\n default: {\n const exhaustiveCheck: never = event.data.type;\n throw new Error(`Unhandled event: ${exhaustiveCheck}`);\n }\n }\n }\n );\n}\n\n/**\n * Registers a post message event listener for updating the entry in the live preview.\n */\nexport function useOnEntryUpdatePostMessageEvent(): void {\n livePreviewPostMessage?.on<OnChangeLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,\n (event) => {\n try {\n const { ssr, onChange } = Config.get();\n const event_type = event.data._metadata?.event_type;\n setConfigFromParams({\n live_preview: event.data.hash,\n });\n\n // This section will run when there is a change in the entry and the website is CSR\n if (!ssr && !event_type) {\n onChange();\n } \n\n if(isOpeningInNewTab()) {\n if(!window) {\n PublicLogger.error(\"window is not defined\");\n return;\n };\n \n // This section will run when there is a change in the entry and the website is SSR\n if(ssr && !event_type) {\n if(window.location.href.includes(\"live_preview\")) {\n window.location.reload();\n } else {\n const url = new URL(window.location.href);\n url.searchParams.set(\"live_preview\", event.data.hash);\n url.searchParams.set(\"content_type_uid\", Config.get().stackDetails.contentTypeUid || \"\");\n url.searchParams.set(\"entry_uid\", Config.get().stackDetails.entryUid || \"\");\n window.location.href = url.toString();\n }\n }\n \n // This section will run when the hash changes and the website is SSR or CSR\n if(event_type === OnChangeLivePreviewPostMessageEventTypes.HASH_CHANGE){\n const newUrl = new URL(window.location.href);\n newUrl.searchParams.set(\"live_preview\", event.data.hash);\n window.history.pushState({}, \"\", newUrl.toString());\n }\n \n // This section will run when the URL of the page changes\n if(event_type === OnChangeLivePreviewPostMessageEventTypes.URL_CHANGE && event.data.url){\n window.location.href = event.data.url;\n }\n }\n\n \n } catch (error) {\n PublicLogger.error(\"Error handling live preview update:\", error);\n return;\n }\n }\n );\n}\n\nexport function sendInitializeLivePreviewPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send<LivePreviewInitEventResponse>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.INIT,\n {\n config: {\n shouldReload: Config.get().ssr,\n href: window.location.href,\n sdkVersion: process?.env?.PACKAGE_VERSION,\n mode: Config.get().mode,\n },\n }\n )\n .then((data) => {\n const {\n contentTypeUid,\n entryUid,\n windowType = ILivePreviewWindowType.PREVIEW,\n } = data || {};\n\n // TODO: This is a fix for the issue where we were calling sending init in the builder\n // Let's remove this condition when we fix it.\n if (Config?.get()?.windowType && Config.get().windowType === ILivePreviewWindowType.BUILDER) {\n return;\n }\n\n if (contentTypeUid && entryUid) {\n // TODO: we should not use this function. Instead we should have sideEffect run automatically when we set the config.\n setConfigFromParams({\n content_type_uid: contentTypeUid,\n entry_uid: entryUid,\n });\n } else {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\n // \"init message did not contain contentTypeUid or entryUid.\"\n // );\n }\n if (Config.get().ssr || isOpeningInTimeline() || isOpeningInNewTab()) {\n addParamsToUrl();\n }\n Config.set(\"windowType\", windowType);\n\n // set timeout for client side (use to show warning: You are not editing this page)\n if (!Config.get().ssr) {\n setInterval(() => {\n sendCurrentPageUrlPostMessageEvent();\n }, 1500);\n }\n\n useHistoryPostMessageEvent();\n useOnEntryUpdatePostMessageEvent();\n })\n .catch((e) => {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\"Error while sending init message\", e);\n });\n}\n\nfunction sendCurrentPageUrlPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.CHECK_ENTRY_PAGE, {\n href: window.location.href,\n })\n .catch(() => {\n // TODO: add debug logs that runs conditionally\n });\n}\n"],"mappings":"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","names":["import_livePreviewEventManager","livePreviewPostMessage","Config"]}
1
+ {"version":3,"sources":["../../../../src/livePreview/eventManager/postMessageEvent.hooks.ts"],"sourcesContent":["import { isOpeningInNewTab } from \"../../common/inIframe\";\nimport Config, { setConfigFromParams } from \"../../configManager/configManager\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport { ILivePreviewWindowType } from \"../../types/types\";\nimport { addParamsToUrl, isOpeningInTimeline } from \"../../utils\";\nimport livePreviewPostMessage from \"./livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"./livePreviewEventManager.constant\";\nimport {\n HistoryLivePreviewPostMessageEventData,\n LivePreviewInitEventResponse,\n OnChangeLivePreviewPostMessageEventData,\n OnChangeLivePreviewPostMessageEventTypes,\n} from \"./types/livePreviewPostMessageEvent.type\";\n\n/**\n * Registers a post message event listener for history-related events.\n * The listener handles events for forward, backward, and reload actions on the browser history.\n */\nexport function useHistoryPostMessageEvent(): void {\n livePreviewPostMessage?.on<HistoryLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY,\n (event) => {\n switch (event.data.type) {\n case \"forward\": {\n window.history.forward();\n break;\n }\n case \"backward\": {\n window.history.back();\n break;\n }\n case \"reload\": {\n window.history.go();\n break;\n }\n default: {\n const exhaustiveCheck: never = event.data.type;\n throw new Error(`Unhandled event: ${exhaustiveCheck}`);\n }\n }\n }\n );\n}\n\n/**\n * Registers a post message event listener for updating the entry in the live preview.\n */\nexport function useOnEntryUpdatePostMessageEvent(): void {\n livePreviewPostMessage?.on<OnChangeLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,\n (event) => {\n try {\n const { ssr, onChange, stackDetails } = Config.get();\n const event_type = event.data._metadata?.event_type;\n setConfigFromParams({\n live_preview: event.data.hash,\n });\n\n // This section will run when there is a change in the entry and the website is CSR\n if (!ssr && !event_type) {\n onChange();\n }\n\n if (isOpeningInNewTab()) {\n if (!window) {\n PublicLogger.error(\"window is not defined\");\n return;\n };\n\n if (ssr && !event_type) {\n const url = new URL(window.location.href);\n let live_preview = url.searchParams.get(\"live_preview\");\n let content_type_uid = url.searchParams.get(\"content_type_uid\");\n let entry_uid = url.searchParams.get(\"entry_uid\");\n\n if (live_preview && content_type_uid && entry_uid) {\n // All required params are present, just reload\n window.location.reload();\n } else {\n live_preview = event.data.hash;\n content_type_uid = event.data.content_type_uid || stackDetails.$contentTypeUid?.toString() || \"\";\n entry_uid = event.data.entry_uid || stackDetails.$entryUid?.toString() || \"\";\n // Set missing params and redirect\n url.searchParams.set(\"live_preview\", live_preview);\n if (content_type_uid) {\n url.searchParams.set(\n \"content_type_uid\",\n content_type_uid\n );\n }\n if (entry_uid) {\n url.searchParams.set(\n \"entry_uid\",\n entry_uid\n );\n }\n window.location.href = url.toString();\n }\n }\n\n // This section will run when the hash changes and the website is SSR or CSR\n if (event_type === OnChangeLivePreviewPostMessageEventTypes.HASH_CHANGE) {\n const newUrl = new URL(window.location.href);\n newUrl.searchParams.set(\"live_preview\", event.data.hash);\n window.history.pushState({}, \"\", newUrl.toString());\n }\n\n // This section will run when the URL of the page changes\n if (event_type === OnChangeLivePreviewPostMessageEventTypes.URL_CHANGE && event.data.url) {\n window.location.href = event.data.url;\n }\n }\n } catch (error) {\n PublicLogger.error(\"Error handling live preview update:\", error);\n return;\n }\n }\n );\n}\n\nexport function sendInitializeLivePreviewPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send<LivePreviewInitEventResponse>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.INIT,\n {\n config: {\n shouldReload: Config.get().ssr,\n href: window.location.href,\n sdkVersion: process?.env?.PACKAGE_VERSION,\n mode: Config.get().mode,\n },\n }\n )\n .then((data) => {\n const {\n contentTypeUid,\n entryUid,\n windowType = ILivePreviewWindowType.PREVIEW,\n } = data || {};\n\n // TODO: This is a fix for the issue where we were calling sending init in the builder\n // Let's remove this condition when we fix it.\n if (Config?.get()?.windowType && Config.get().windowType === ILivePreviewWindowType.BUILDER) {\n return;\n }\n\n if (contentTypeUid && entryUid) {\n // TODO: we should not use this function. Instead we should have sideEffect run automatically when we set the config.\n setConfigFromParams({\n content_type_uid: contentTypeUid,\n entry_uid: entryUid,\n });\n } else {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\n // \"init message did not contain contentTypeUid or entryUid.\"\n // );\n }\n if (Config.get().ssr || isOpeningInTimeline() || isOpeningInNewTab()) {\n addParamsToUrl();\n }\n Config.set(\"windowType\", windowType);\n\n // set timeout for client side (use to show warning: You are not editing this page)\n if (!Config.get().ssr) {\n setInterval(() => {\n sendCurrentPageUrlPostMessageEvent();\n }, 1500);\n }\n\n useHistoryPostMessageEvent();\n useOnEntryUpdatePostMessageEvent();\n })\n .catch((e) => {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\"Error while sending init message\", e);\n });\n}\n\nfunction sendCurrentPageUrlPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.CHECK_ENTRY_PAGE, {\n href: window.location.href,\n })\n .catch(() => {\n // TODO: add debug logs that runs conditionally\n });\n}\n"],"mappings":"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","names":["import_livePreviewEventManager","livePreviewPostMessage","Config"]}
@@ -41,7 +41,7 @@ function useOnEntryUpdatePostMessageEvent() {
41
41
  LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,
42
42
  (event) => {
43
43
  try {
44
- const { ssr, onChange } = Config.get();
44
+ const { ssr, onChange, stackDetails } = Config.get();
45
45
  const event_type = event.data._metadata?.event_type;
46
46
  setConfigFromParams({
47
47
  live_preview: event.data.hash
@@ -56,13 +56,29 @@ function useOnEntryUpdatePostMessageEvent() {
56
56
  }
57
57
  ;
58
58
  if (ssr && !event_type) {
59
- if (window.location.href.includes("live_preview")) {
59
+ const url = new URL(window.location.href);
60
+ let live_preview = url.searchParams.get("live_preview");
61
+ let content_type_uid = url.searchParams.get("content_type_uid");
62
+ let entry_uid = url.searchParams.get("entry_uid");
63
+ if (live_preview && content_type_uid && entry_uid) {
60
64
  window.location.reload();
61
65
  } else {
62
- const url = new URL(window.location.href);
63
- url.searchParams.set("live_preview", event.data.hash);
64
- url.searchParams.set("content_type_uid", Config.get().stackDetails.contentTypeUid || "");
65
- url.searchParams.set("entry_uid", Config.get().stackDetails.entryUid || "");
66
+ live_preview = event.data.hash;
67
+ content_type_uid = event.data.content_type_uid || stackDetails.$contentTypeUid?.toString() || "";
68
+ entry_uid = event.data.entry_uid || stackDetails.$entryUid?.toString() || "";
69
+ url.searchParams.set("live_preview", live_preview);
70
+ if (content_type_uid) {
71
+ url.searchParams.set(
72
+ "content_type_uid",
73
+ content_type_uid
74
+ );
75
+ }
76
+ if (entry_uid) {
77
+ url.searchParams.set(
78
+ "entry_uid",
79
+ entry_uid
80
+ );
81
+ }
66
82
  window.location.href = url.toString();
67
83
  }
68
84
  }
@@ -89,7 +105,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
89
105
  config: {
90
106
  shouldReload: Config.get().ssr,
91
107
  href: window.location.href,
92
- sdkVersion: "4.0.1",
108
+ sdkVersion: "4.0.2",
93
109
  mode: Config.get().mode
94
110
  }
95
111
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/livePreview/eventManager/postMessageEvent.hooks.ts"],"sourcesContent":["import { isOpeningInNewTab } from \"../../common/inIframe\";\nimport Config, { setConfigFromParams } from \"../../configManager/configManager\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport { ILivePreviewWindowType } from \"../../types/types\";\nimport { addParamsToUrl, isOpeningInTimeline } from \"../../utils\";\nimport livePreviewPostMessage from \"./livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"./livePreviewEventManager.constant\";\nimport {\n HistoryLivePreviewPostMessageEventData,\n LivePreviewInitEventResponse,\n OnChangeLivePreviewPostMessageEventData,\n OnChangeLivePreviewPostMessageEventTypes,\n} from \"./types/livePreviewPostMessageEvent.type\";\n\n/**\n * Registers a post message event listener for history-related events.\n * The listener handles events for forward, backward, and reload actions on the browser history.\n */\nexport function useHistoryPostMessageEvent(): void {\n livePreviewPostMessage?.on<HistoryLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY,\n (event) => {\n switch (event.data.type) {\n case \"forward\": {\n window.history.forward();\n break;\n }\n case \"backward\": {\n window.history.back();\n break;\n }\n case \"reload\": {\n window.history.go();\n break;\n }\n default: {\n const exhaustiveCheck: never = event.data.type;\n throw new Error(`Unhandled event: ${exhaustiveCheck}`);\n }\n }\n }\n );\n}\n\n/**\n * Registers a post message event listener for updating the entry in the live preview.\n */\nexport function useOnEntryUpdatePostMessageEvent(): void {\n livePreviewPostMessage?.on<OnChangeLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,\n (event) => {\n try {\n const { ssr, onChange } = Config.get();\n const event_type = event.data._metadata?.event_type;\n setConfigFromParams({\n live_preview: event.data.hash,\n });\n\n // This section will run when there is a change in the entry and the website is CSR\n if (!ssr && !event_type) {\n onChange();\n } \n\n if(isOpeningInNewTab()) {\n if(!window) {\n PublicLogger.error(\"window is not defined\");\n return;\n };\n \n // This section will run when there is a change in the entry and the website is SSR\n if(ssr && !event_type) {\n if(window.location.href.includes(\"live_preview\")) {\n window.location.reload();\n } else {\n const url = new URL(window.location.href);\n url.searchParams.set(\"live_preview\", event.data.hash);\n url.searchParams.set(\"content_type_uid\", Config.get().stackDetails.contentTypeUid || \"\");\n url.searchParams.set(\"entry_uid\", Config.get().stackDetails.entryUid || \"\");\n window.location.href = url.toString();\n }\n }\n \n // This section will run when the hash changes and the website is SSR or CSR\n if(event_type === OnChangeLivePreviewPostMessageEventTypes.HASH_CHANGE){\n const newUrl = new URL(window.location.href);\n newUrl.searchParams.set(\"live_preview\", event.data.hash);\n window.history.pushState({}, \"\", newUrl.toString());\n }\n \n // This section will run when the URL of the page changes\n if(event_type === OnChangeLivePreviewPostMessageEventTypes.URL_CHANGE && event.data.url){\n window.location.href = event.data.url;\n }\n }\n\n \n } catch (error) {\n PublicLogger.error(\"Error handling live preview update:\", error);\n return;\n }\n }\n );\n}\n\nexport function sendInitializeLivePreviewPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send<LivePreviewInitEventResponse>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.INIT,\n {\n config: {\n shouldReload: Config.get().ssr,\n href: window.location.href,\n sdkVersion: process?.env?.PACKAGE_VERSION,\n mode: Config.get().mode,\n },\n }\n )\n .then((data) => {\n const {\n contentTypeUid,\n entryUid,\n windowType = ILivePreviewWindowType.PREVIEW,\n } = data || {};\n\n // TODO: This is a fix for the issue where we were calling sending init in the builder\n // Let's remove this condition when we fix it.\n if (Config?.get()?.windowType && Config.get().windowType === ILivePreviewWindowType.BUILDER) {\n return;\n }\n\n if (contentTypeUid && entryUid) {\n // TODO: we should not use this function. Instead we should have sideEffect run automatically when we set the config.\n setConfigFromParams({\n content_type_uid: contentTypeUid,\n entry_uid: entryUid,\n });\n } else {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\n // \"init message did not contain contentTypeUid or entryUid.\"\n // );\n }\n if (Config.get().ssr || isOpeningInTimeline() || isOpeningInNewTab()) {\n addParamsToUrl();\n }\n Config.set(\"windowType\", windowType);\n\n // set timeout for client side (use to show warning: You are not editing this page)\n if (!Config.get().ssr) {\n setInterval(() => {\n sendCurrentPageUrlPostMessageEvent();\n }, 1500);\n }\n\n useHistoryPostMessageEvent();\n useOnEntryUpdatePostMessageEvent();\n })\n .catch((e) => {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\"Error while sending init message\", e);\n });\n}\n\nfunction sendCurrentPageUrlPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.CHECK_ENTRY_PAGE, {\n href: window.location.href,\n })\n .catch(() => {\n // TODO: add debug logs that runs conditionally\n });\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../../../src/livePreview/eventManager/postMessageEvent.hooks.ts"],"sourcesContent":["import { isOpeningInNewTab } from \"../../common/inIframe\";\nimport Config, { setConfigFromParams } from \"../../configManager/configManager\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport { ILivePreviewWindowType } from \"../../types/types\";\nimport { addParamsToUrl, isOpeningInTimeline } from \"../../utils\";\nimport livePreviewPostMessage from \"./livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"./livePreviewEventManager.constant\";\nimport {\n HistoryLivePreviewPostMessageEventData,\n LivePreviewInitEventResponse,\n OnChangeLivePreviewPostMessageEventData,\n OnChangeLivePreviewPostMessageEventTypes,\n} from \"./types/livePreviewPostMessageEvent.type\";\n\n/**\n * Registers a post message event listener for history-related events.\n * The listener handles events for forward, backward, and reload actions on the browser history.\n */\nexport function useHistoryPostMessageEvent(): void {\n livePreviewPostMessage?.on<HistoryLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.HISTORY,\n (event) => {\n switch (event.data.type) {\n case \"forward\": {\n window.history.forward();\n break;\n }\n case \"backward\": {\n window.history.back();\n break;\n }\n case \"reload\": {\n window.history.go();\n break;\n }\n default: {\n const exhaustiveCheck: never = event.data.type;\n throw new Error(`Unhandled event: ${exhaustiveCheck}`);\n }\n }\n }\n );\n}\n\n/**\n * Registers a post message event listener for updating the entry in the live preview.\n */\nexport function useOnEntryUpdatePostMessageEvent(): void {\n livePreviewPostMessage?.on<OnChangeLivePreviewPostMessageEventData>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.ON_CHANGE,\n (event) => {\n try {\n const { ssr, onChange, stackDetails } = Config.get();\n const event_type = event.data._metadata?.event_type;\n setConfigFromParams({\n live_preview: event.data.hash,\n });\n\n // This section will run when there is a change in the entry and the website is CSR\n if (!ssr && !event_type) {\n onChange();\n }\n\n if (isOpeningInNewTab()) {\n if (!window) {\n PublicLogger.error(\"window is not defined\");\n return;\n };\n\n if (ssr && !event_type) {\n const url = new URL(window.location.href);\n let live_preview = url.searchParams.get(\"live_preview\");\n let content_type_uid = url.searchParams.get(\"content_type_uid\");\n let entry_uid = url.searchParams.get(\"entry_uid\");\n\n if (live_preview && content_type_uid && entry_uid) {\n // All required params are present, just reload\n window.location.reload();\n } else {\n live_preview = event.data.hash;\n content_type_uid = event.data.content_type_uid || stackDetails.$contentTypeUid?.toString() || \"\";\n entry_uid = event.data.entry_uid || stackDetails.$entryUid?.toString() || \"\";\n // Set missing params and redirect\n url.searchParams.set(\"live_preview\", live_preview);\n if (content_type_uid) {\n url.searchParams.set(\n \"content_type_uid\",\n content_type_uid\n );\n }\n if (entry_uid) {\n url.searchParams.set(\n \"entry_uid\",\n entry_uid\n );\n }\n window.location.href = url.toString();\n }\n }\n\n // This section will run when the hash changes and the website is SSR or CSR\n if (event_type === OnChangeLivePreviewPostMessageEventTypes.HASH_CHANGE) {\n const newUrl = new URL(window.location.href);\n newUrl.searchParams.set(\"live_preview\", event.data.hash);\n window.history.pushState({}, \"\", newUrl.toString());\n }\n\n // This section will run when the URL of the page changes\n if (event_type === OnChangeLivePreviewPostMessageEventTypes.URL_CHANGE && event.data.url) {\n window.location.href = event.data.url;\n }\n }\n } catch (error) {\n PublicLogger.error(\"Error handling live preview update:\", error);\n return;\n }\n }\n );\n}\n\nexport function sendInitializeLivePreviewPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send<LivePreviewInitEventResponse>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.INIT,\n {\n config: {\n shouldReload: Config.get().ssr,\n href: window.location.href,\n sdkVersion: process?.env?.PACKAGE_VERSION,\n mode: Config.get().mode,\n },\n }\n )\n .then((data) => {\n const {\n contentTypeUid,\n entryUid,\n windowType = ILivePreviewWindowType.PREVIEW,\n } = data || {};\n\n // TODO: This is a fix for the issue where we were calling sending init in the builder\n // Let's remove this condition when we fix it.\n if (Config?.get()?.windowType && Config.get().windowType === ILivePreviewWindowType.BUILDER) {\n return;\n }\n\n if (contentTypeUid && entryUid) {\n // TODO: we should not use this function. Instead we should have sideEffect run automatically when we set the config.\n setConfigFromParams({\n content_type_uid: contentTypeUid,\n entry_uid: entryUid,\n });\n } else {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\n // \"init message did not contain contentTypeUid or entryUid.\"\n // );\n }\n if (Config.get().ssr || isOpeningInTimeline() || isOpeningInNewTab()) {\n addParamsToUrl();\n }\n Config.set(\"windowType\", windowType);\n\n // set timeout for client side (use to show warning: You are not editing this page)\n if (!Config.get().ssr) {\n setInterval(() => {\n sendCurrentPageUrlPostMessageEvent();\n }, 1500);\n }\n\n useHistoryPostMessageEvent();\n useOnEntryUpdatePostMessageEvent();\n })\n .catch((e) => {\n // TODO: add debug logs that runs conditionally\n // PublicLogger.debug(\"Error while sending init message\", e);\n });\n}\n\nfunction sendCurrentPageUrlPostMessageEvent(): void {\n livePreviewPostMessage\n ?.send(LIVE_PREVIEW_POST_MESSAGE_EVENTS.CHECK_ENTRY_PAGE, {\n href: window.location.href,\n })\n .catch(() => {\n // TODO: add debug logs that runs conditionally\n });\n}\n"],"mappings":"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","names":[]}
@@ -227,7 +227,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
227
227
  * @returns The version of the SDK as a string.
228
228
  */
229
229
  static getSdkVersion() {
230
- return "4.0.1";
230
+ return "4.0.2";
231
231
  }
232
232
  };
233
233
  _ContentstackLivePreview.previewConstructors = {};
@@ -195,7 +195,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
195
195
  * @returns The version of the SDK as a string.
196
196
  */
197
197
  static getSdkVersion() {
198
- return "4.0.1";
198
+ return "4.0.2";
199
199
  }
200
200
  };
201
201
  _ContentstackLivePreview.previewConstructors = {};
@@ -48,7 +48,8 @@ function enableInlineEditing({
48
48
  actualEditableField.addEventListener("paste", import_pasteAsPlainText.pasteAsPlainText);
49
49
  }
50
50
  const expectedTextContent = expectedFieldData;
51
- if (expectedTextContent && textContent !== expectedTextContent || (0, import_generatePseudoEditableField.isEllipsisActive)(editableElement)) {
51
+ const isFieldLastEdited = document.querySelector("[data-cs-last-edited]") === editableElement;
52
+ if (expectedTextContent && textContent !== expectedTextContent || (0, import_generatePseudoEditableField.isEllipsisActive)(editableElement) || isFieldLastEdited) {
52
53
  const pseudoEditableField = (0, import_generatePseudoEditableField.generatePseudoEditableElement)(
53
54
  { editableElement },
54
55
  { textContent: expectedFieldData }
@@ -84,6 +85,7 @@ function enableInlineEditing({
84
85
  actualEditableField.setAttribute("contenteditable", "true");
85
86
  actualEditableField.addEventListener("input", import_handleFieldMouseDown.handleFieldInput);
86
87
  actualEditableField.addEventListener("keydown", import_handleFieldMouseDown.handleFieldKeyDown);
88
+ editableElement.setAttribute("data-cs-last-edited", "true");
87
89
  actualEditableField.focus();
88
90
  return;
89
91
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n isEllipsisActive,\n generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n expectedFieldData,\n editableElement,\n fieldType,\n elements,\n}: {\n expectedFieldData: any;\n editableElement: HTMLElement;\n fieldType: FieldDataType;\n elements: VisualBuilderEditContext;\n}) {\n const { visualBuilderContainer, resizeObserver } = elements;\n let actualEditableField = editableElement as HTMLElement;\n\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n actualEditableField?.innerText;\n\n const elementComputedDisplay =\n window.getComputedStyle(actualEditableField).display;\n\n let textContent =\n (editableElement as HTMLElement).innerText ||\n editableElement.textContent ||\n \"\";\n\n if (fieldType === FieldDataType.MULTILINE) {\n textContent = getMultilinePlaintext(actualEditableField);\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n }\n const expectedTextContent = expectedFieldData;\n if (\n (expectedTextContent && textContent !== expectedTextContent) ||\n isEllipsisActive(editableElement as HTMLElement)\n ) {\n // TODO: Testing will be done in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: expectedFieldData }\n );\n\n (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n // set field type attribute to the pseudo editable field\n // ensures proper keydown handling similar to the actual editable field\n pseudoEditableField.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n visualBuilderContainer.appendChild(pseudoEditableField);\n actualEditableField = pseudoEditableField;\n\n if (fieldType === FieldDataType.MULTILINE)\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n // we will unobserve this in hideOverlay\n elements.resizeObserver.observe(pseudoEditableField);\n } else if (elementComputedDisplay === \"inline\") {\n // if the editable field is inline\n const onInlineElementInput = throttle(() => {\n const overlayWrapper = visualBuilderContainer.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement;\n const focusedToolbar = visualBuilderContainer.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n updateFocussedState({\n editableElement: actualEditableField,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n });\n }, 200);\n actualEditableField.addEventListener(\"input\", onInlineElementInput);\n }\n\n actualEditableField.setAttribute(\"contenteditable\", \"true\");\n actualEditableField.addEventListener(\"input\", handleFieldInput);\n actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n // focus on the contenteditable element to start accepting input\n actualEditableField.focus();\n\n return;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,eAA8B;AAC9B,yCAGO;AACP,uBAAwD;AACxD,mCAAsC;AACtC,kCAAqD;AACrD,mBAAwD;AACxD,iCAAoC;AACpC,8BAAiC;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,yBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAEjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,2BAAc,WAAW;AACvC,sBAAc,oDAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,wCAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAC5B,MACK,uBAAuB,gBAAgB,2BACxC,qDAAiB,eAA8B,GACjD;AAEE,UAAM,0BAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,2BAAc;AAC5B,0BAAoB,iBAAiB,SAAS,wCAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,2BAAuB,2BAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0DAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,4CAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,8CAAkB;AAElE,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n isEllipsisActive,\n generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n expectedFieldData,\n editableElement,\n fieldType,\n elements,\n}: {\n expectedFieldData: any;\n editableElement: HTMLElement;\n fieldType: FieldDataType;\n elements: VisualBuilderEditContext;\n}) {\n const { visualBuilderContainer, resizeObserver } = elements;\n let actualEditableField = editableElement as HTMLElement;\n\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n actualEditableField?.innerText;\n\n const elementComputedDisplay =\n window.getComputedStyle(actualEditableField).display;\n\n \n let textContent =\n (editableElement as HTMLElement).innerText ||\n editableElement.textContent ||\n \"\";\n\n if (fieldType === FieldDataType.MULTILINE) {\n textContent = getMultilinePlaintext(actualEditableField);\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n }\n const expectedTextContent = expectedFieldData;\n \n const isFieldLastEdited = document.querySelector(\"[data-cs-last-edited]\") === editableElement;\n if (\n (expectedTextContent && textContent !== expectedTextContent) ||\n isEllipsisActive(editableElement as HTMLElement) ||\n isFieldLastEdited\n ) {\n // TODO: Testing will be done in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: expectedFieldData } \n );\n\n (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n // set field type attribute to the pseudo editable field\n // ensures proper keydown handling similar to the actual editable field\n pseudoEditableField.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n visualBuilderContainer.appendChild(pseudoEditableField);\n actualEditableField = pseudoEditableField;\n\n if (fieldType === FieldDataType.MULTILINE)\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n // we will unobserve this in hideOverlay\n elements.resizeObserver.observe(pseudoEditableField);\n } else if (elementComputedDisplay === \"inline\") {\n // if the editable field is inline\n const onInlineElementInput = throttle(() => {\n const overlayWrapper = visualBuilderContainer.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement;\n const focusedToolbar = visualBuilderContainer.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n updateFocussedState({\n editableElement: actualEditableField,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n });\n }, 200);\n actualEditableField.addEventListener(\"input\", onInlineElementInput);\n }\n\n actualEditableField.setAttribute(\"contenteditable\", \"true\");\n actualEditableField.addEventListener(\"input\", handleFieldInput);\n actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n\n editableElement.setAttribute(\"data-cs-last-edited\", \"true\");\n\n // focus on the contenteditable element to start accepting input\n actualEditableField.focus();\n\n return;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,eAA8B;AAC9B,yCAGO;AACP,uBAAwD;AACxD,mCAAsC;AACtC,kCAAqD;AACrD,mBAAwD;AACxD,iCAAoC;AACpC,8BAAiC;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,yBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAGjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,2BAAc,WAAW;AACvC,sBAAc,oDAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,wCAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAE5B,QAAM,oBAAoB,SAAS,cAAc,uBAAuB,MAAM;AAC9E,MACK,uBAAuB,gBAAgB,2BACxC,qDAAiB,eAA8B,KAC/C,mBACF;AAEE,UAAM,0BAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,2BAAc;AAC5B,0BAAoB,iBAAiB,SAAS,wCAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,2BAAuB,2BAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0DAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,4CAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,8CAAkB;AAElE,kBAAgB,aAAa,uBAAuB,MAAM;AAG1D,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
@@ -29,7 +29,8 @@ function enableInlineEditing({
29
29
  actualEditableField.addEventListener("paste", pasteAsPlainText);
30
30
  }
31
31
  const expectedTextContent = expectedFieldData;
32
- if (expectedTextContent && textContent !== expectedTextContent || isEllipsisActive(editableElement)) {
32
+ const isFieldLastEdited = document.querySelector("[data-cs-last-edited]") === editableElement;
33
+ if (expectedTextContent && textContent !== expectedTextContent || isEllipsisActive(editableElement) || isFieldLastEdited) {
33
34
  const pseudoEditableField = generatePseudoEditableElement(
34
35
  { editableElement },
35
36
  { textContent: expectedFieldData }
@@ -65,6 +66,7 @@ function enableInlineEditing({
65
66
  actualEditableField.setAttribute("contenteditable", "true");
66
67
  actualEditableField.addEventListener("input", handleFieldInput);
67
68
  actualEditableField.addEventListener("keydown", handleFieldKeyDown);
69
+ editableElement.setAttribute("data-cs-last-edited", "true");
68
70
  actualEditableField.focus();
69
71
  return;
70
72
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n isEllipsisActive,\n generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n expectedFieldData,\n editableElement,\n fieldType,\n elements,\n}: {\n expectedFieldData: any;\n editableElement: HTMLElement;\n fieldType: FieldDataType;\n elements: VisualBuilderEditContext;\n}) {\n const { visualBuilderContainer, resizeObserver } = elements;\n let actualEditableField = editableElement as HTMLElement;\n\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n actualEditableField?.innerText;\n\n const elementComputedDisplay =\n window.getComputedStyle(actualEditableField).display;\n\n let textContent =\n (editableElement as HTMLElement).innerText ||\n editableElement.textContent ||\n \"\";\n\n if (fieldType === FieldDataType.MULTILINE) {\n textContent = getMultilinePlaintext(actualEditableField);\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n }\n const expectedTextContent = expectedFieldData;\n if (\n (expectedTextContent && textContent !== expectedTextContent) ||\n isEllipsisActive(editableElement as HTMLElement)\n ) {\n // TODO: Testing will be done in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: expectedFieldData }\n );\n\n (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n // set field type attribute to the pseudo editable field\n // ensures proper keydown handling similar to the actual editable field\n pseudoEditableField.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n visualBuilderContainer.appendChild(pseudoEditableField);\n actualEditableField = pseudoEditableField;\n\n if (fieldType === FieldDataType.MULTILINE)\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n // we will unobserve this in hideOverlay\n elements.resizeObserver.observe(pseudoEditableField);\n } else if (elementComputedDisplay === \"inline\") {\n // if the editable field is inline\n const onInlineElementInput = throttle(() => {\n const overlayWrapper = visualBuilderContainer.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement;\n const focusedToolbar = visualBuilderContainer.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n updateFocussedState({\n editableElement: actualEditableField,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n });\n }, 200);\n actualEditableField.addEventListener(\"input\", onInlineElementInput);\n }\n\n actualEditableField.setAttribute(\"contenteditable\", \"true\");\n actualEditableField.addEventListener(\"input\", handleFieldInput);\n actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n // focus on the contenteditable element to start accepting input\n actualEditableField.focus();\n\n return;\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,+CAA+C;AACxD,SAAS,6BAA6B;AACtC,SAAS,kBAAkB,0BAA0B;AACrD,SAAS,qBAA+C;AACxD,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,gBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAEjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,cAAc,WAAW;AACvC,kBAAc,sBAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,gBAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAC5B,MACK,uBAAuB,gBAAgB,uBACxC,iBAAiB,eAA8B,GACjD;AAEE,UAAM,sBAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,cAAc;AAC5B,0BAAoB,iBAAiB,SAAS,gBAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,uBAAuB,SAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0BAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,gBAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,kBAAkB;AAElE,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n isEllipsisActive,\n generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n expectedFieldData,\n editableElement,\n fieldType,\n elements,\n}: {\n expectedFieldData: any;\n editableElement: HTMLElement;\n fieldType: FieldDataType;\n elements: VisualBuilderEditContext;\n}) {\n const { visualBuilderContainer, resizeObserver } = elements;\n let actualEditableField = editableElement as HTMLElement;\n\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n actualEditableField?.innerText;\n\n const elementComputedDisplay =\n window.getComputedStyle(actualEditableField).display;\n\n \n let textContent =\n (editableElement as HTMLElement).innerText ||\n editableElement.textContent ||\n \"\";\n\n if (fieldType === FieldDataType.MULTILINE) {\n textContent = getMultilinePlaintext(actualEditableField);\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n }\n const expectedTextContent = expectedFieldData;\n \n const isFieldLastEdited = document.querySelector(\"[data-cs-last-edited]\") === editableElement;\n if (\n (expectedTextContent && textContent !== expectedTextContent) ||\n isEllipsisActive(editableElement as HTMLElement) ||\n isFieldLastEdited\n ) {\n // TODO: Testing will be done in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: expectedFieldData } \n );\n\n (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n // set field type attribute to the pseudo editable field\n // ensures proper keydown handling similar to the actual editable field\n pseudoEditableField.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n visualBuilderContainer.appendChild(pseudoEditableField);\n actualEditableField = pseudoEditableField;\n\n if (fieldType === FieldDataType.MULTILINE)\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n // we will unobserve this in hideOverlay\n elements.resizeObserver.observe(pseudoEditableField);\n } else if (elementComputedDisplay === \"inline\") {\n // if the editable field is inline\n const onInlineElementInput = throttle(() => {\n const overlayWrapper = visualBuilderContainer.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement;\n const focusedToolbar = visualBuilderContainer.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n updateFocussedState({\n editableElement: actualEditableField,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n });\n }, 200);\n actualEditableField.addEventListener(\"input\", onInlineElementInput);\n }\n\n actualEditableField.setAttribute(\"contenteditable\", \"true\");\n actualEditableField.addEventListener(\"input\", handleFieldInput);\n actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n\n editableElement.setAttribute(\"data-cs-last-edited\", \"true\");\n\n // focus on the contenteditable element to start accepting input\n actualEditableField.focus();\n\n return;\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,+CAA+C;AACxD,SAAS,6BAA6B;AACtC,SAAS,kBAAkB,0BAA0B;AACrD,SAAS,qBAA+C;AACxD,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,gBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAGjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,cAAc,WAAW;AACvC,kBAAc,sBAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,gBAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAE5B,QAAM,oBAAoB,SAAS,cAAc,uBAAuB,MAAM;AAC9E,MACK,uBAAuB,gBAAgB,uBACxC,iBAAiB,eAA8B,KAC/C,mBACF;AAEE,UAAM,sBAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,cAAc;AAC5B,0BAAoB,iBAAiB,SAAS,gBAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,uBAAuB,SAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0BAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,gBAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,kBAAkB;AAElE,kBAAgB,aAAa,uBAAuB,MAAM;AAG1D,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
@@ -37,6 +37,11 @@ function handleFieldInput(e) {
37
37
  const fieldType = targetElement.getAttribute(
38
38
  import_constants.VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
39
39
  );
40
+ const previousLastEditedElement = document.querySelector("[data-cs-last-edited]");
41
+ if (previousLastEditedElement !== targetElement) {
42
+ previousLastEditedElement?.removeAttribute("data-cs-last-edited");
43
+ targetElement.setAttribute("data-cs-last-edited", "true");
44
+ }
40
45
  if (event.type === "input" && import_constants.ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {
41
46
  if (!import__.VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput) {
42
47
  import__.VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput = true;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n const event = e as InputEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n if (\n event.type === \"input\" &&\n ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n ) {\n if (\n !VisualBuilder.VisualBuilderGlobalState.value\n .focusFieldReceivedInput\n ) {\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n true;\n }\n throttledFieldSync();\n }\n}\nconst throttledFieldSync = throttle(() => {\n try {\n const visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n ) as HTMLElement;\n if (!visualBuilderContainer) return;\n sendFieldEvent({\n visualBuilderContainer,\n eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n });\n } catch (error) {\n console.error(\"Error in throttledFieldSync\", error);\n }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n const event = e as KeyboardEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n if (\n event\n .composedPath()\n .some(\n (element) =>\n element instanceof Element && element.tagName === \"BUTTON\"\n )\n ) {\n // custom space handling when a button is involved\n handleKeyDownOnButton(event);\n }\n if (fieldType === FieldDataType.NUMBER) {\n handleNumericFieldKeyDown(event);\n } else if (fieldType === FieldDataType.SINGLELINE) {\n handleSingleLineFieldKeyDown(event);\n }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n if (e.code === \"Space\" && e.target) {\n e.preventDefault();\n insertSpaceAtCursor(e.target as HTMLElement);\n throttledFieldSync();\n }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n if (e.code === \"Enter\") {\n e.preventDefault();\n }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n const targetElement = event.target as HTMLElement;\n\n const allowedKeys = [\n \"Backspace\",\n \"Tab\",\n \"Enter\",\n \"End\",\n \"Home\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Delete\",\n ];\n\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n allowedKeys.includes(event.code)\n ) {\n // Allow Ctrl, Cmd, Alt, and special keys\n return;\n }\n\n if (event.code.includes(\"Digit\")) {\n return;\n }\n\n const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n if (!nonNumericAllowedCharacters.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n const selection = {\n startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n };\n\n const existingInput = targetElement.textContent || \"\";\n const currentOutputArr = existingInput.split(\"\");\n currentOutputArr.splice(\n selection.startOffset,\n selection.endOffset - selection.startOffset,\n event.key\n );\n const currentInput = currentOutputArr.join(\"\");\n\n if (!numericInputRegex.test(currentInput)) {\n event.preventDefault();\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,6BAA+B;AAC/B,uBAIO;AACP,mBAA8B;AAC9B,yBAA+C;AAC/C,iCAAoC;AACpC,eAA8B;AAEvB,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,+CAA8B,SAAS,SAA0B,GACnE;AACE,QACI,CAAC,uBAAc,yBAAyB,MACnC,yBACP;AACE,6BAAc,yBAAyB,MAAM,0BACzC;AAAA,IACR;AACA,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,yBAAqB,2BAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,+CAAe;AAAA,MACX;AAAA,MACA,WAAW,kDAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MACI,MACK,aAAa,EACb;AAAA,IACG,CAAC,YACG,mBAAmB,WAAW,QAAQ,YAAY;AAAA,EAC1D,GACN;AAEE,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,2BAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,2BAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wDAAoB,EAAE,MAAqB;AAC3C,uBAAmB;AAAA,EACvB;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAC3D,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,aAAa,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,eAAe;AAAA,IACjE,WAAW,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,aAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,mCAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n const event = e as InputEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n const previousLastEditedElement = document.querySelector(\"[data-cs-last-edited]\");\n if (previousLastEditedElement !== targetElement) {\n previousLastEditedElement?.removeAttribute(\"data-cs-last-edited\");\n targetElement.setAttribute(\"data-cs-last-edited\", \"true\");\n }\n if (\n event.type === \"input\" &&\n ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n ) {\n if (\n !VisualBuilder.VisualBuilderGlobalState.value\n .focusFieldReceivedInput\n ) {\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n true;\n }\n throttledFieldSync();\n }\n}\nconst throttledFieldSync = throttle(() => {\n try {\n const visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n ) as HTMLElement;\n if (!visualBuilderContainer) return;\n sendFieldEvent({\n visualBuilderContainer,\n eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n });\n } catch (error) {\n console.error(\"Error in throttledFieldSync\", error);\n }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n const event = e as KeyboardEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n if (\n event\n .composedPath()\n .some(\n (element) =>\n element instanceof Element && element.tagName === \"BUTTON\"\n )\n ) {\n // custom space handling when a button is involved\n handleKeyDownOnButton(event);\n }\n if (fieldType === FieldDataType.NUMBER) {\n handleNumericFieldKeyDown(event);\n } else if (fieldType === FieldDataType.SINGLELINE) {\n handleSingleLineFieldKeyDown(event);\n }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n if (e.code === \"Space\" && e.target) {\n e.preventDefault();\n insertSpaceAtCursor(e.target as HTMLElement);\n throttledFieldSync();\n }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n if (e.code === \"Enter\") {\n e.preventDefault();\n }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n const targetElement = event.target as HTMLElement;\n\n const allowedKeys = [\n \"Backspace\",\n \"Tab\",\n \"Enter\",\n \"End\",\n \"Home\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Delete\",\n ];\n\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n allowedKeys.includes(event.code)\n ) {\n // Allow Ctrl, Cmd, Alt, and special keys\n return;\n }\n\n if (event.code.includes(\"Digit\")) {\n return;\n }\n\n const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n if (!nonNumericAllowedCharacters.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n const selection = {\n startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n };\n\n const existingInput = targetElement.textContent || \"\";\n const currentOutputArr = existingInput.split(\"\");\n currentOutputArr.splice(\n selection.startOffset,\n selection.endOffset - selection.startOffset,\n event.key\n );\n const currentInput = currentOutputArr.join(\"\");\n\n if (!numericInputRegex.test(currentInput)) {\n event.preventDefault();\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,6BAA+B;AAC/B,uBAIO;AACP,mBAA8B;AAC9B,yBAA+C;AAC/C,iCAAoC;AACpC,eAA8B;AAEvB,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,QAAM,4BAA4B,SAAS,cAAc,uBAAuB;AAChF,MAAI,8BAA8B,eAAe;AAC7C,+BAA2B,gBAAgB,qBAAqB;AAChE,kBAAc,aAAa,uBAAuB,MAAM;AAAA,EAC5D;AACA,MACI,MAAM,SAAS,WACf,+CAA8B,SAAS,SAA0B,GACnE;AACE,QACI,CAAC,uBAAc,yBAAyB,MACnC,yBACP;AACE,6BAAc,yBAAyB,MAAM,0BACzC;AAAA,IACR;AACA,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,yBAAqB,2BAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,+CAAe;AAAA,MACX;AAAA,MACA,WAAW,kDAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MACI,MACK,aAAa,EACb;AAAA,IACG,CAAC,YACG,mBAAmB,WAAW,QAAQ,YAAY;AAAA,EAC1D,GACN;AAEE,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,2BAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,2BAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wDAAoB,EAAE,MAAqB;AAC3C,uBAAmB;AAAA,EACvB;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAC3D,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,aAAa,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,eAAe;AAAA,IACjE,WAAW,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,aAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,mCAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}
@@ -18,6 +18,11 @@ function handleFieldInput(e) {
18
18
  const fieldType = targetElement.getAttribute(
19
19
  VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
20
20
  );
21
+ const previousLastEditedElement = document.querySelector("[data-cs-last-edited]");
22
+ if (previousLastEditedElement !== targetElement) {
23
+ previousLastEditedElement?.removeAttribute("data-cs-last-edited");
24
+ targetElement.setAttribute("data-cs-last-edited", "true");
25
+ }
21
26
  if (event.type === "input" && ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {
22
27
  if (!VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput) {
23
28
  VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput = true;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n const event = e as InputEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n if (\n event.type === \"input\" &&\n ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n ) {\n if (\n !VisualBuilder.VisualBuilderGlobalState.value\n .focusFieldReceivedInput\n ) {\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n true;\n }\n throttledFieldSync();\n }\n}\nconst throttledFieldSync = throttle(() => {\n try {\n const visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n ) as HTMLElement;\n if (!visualBuilderContainer) return;\n sendFieldEvent({\n visualBuilderContainer,\n eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n });\n } catch (error) {\n console.error(\"Error in throttledFieldSync\", error);\n }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n const event = e as KeyboardEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n if (\n event\n .composedPath()\n .some(\n (element) =>\n element instanceof Element && element.tagName === \"BUTTON\"\n )\n ) {\n // custom space handling when a button is involved\n handleKeyDownOnButton(event);\n }\n if (fieldType === FieldDataType.NUMBER) {\n handleNumericFieldKeyDown(event);\n } else if (fieldType === FieldDataType.SINGLELINE) {\n handleSingleLineFieldKeyDown(event);\n }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n if (e.code === \"Space\" && e.target) {\n e.preventDefault();\n insertSpaceAtCursor(e.target as HTMLElement);\n throttledFieldSync();\n }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n if (e.code === \"Enter\") {\n e.preventDefault();\n }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n const targetElement = event.target as HTMLElement;\n\n const allowedKeys = [\n \"Backspace\",\n \"Tab\",\n \"Enter\",\n \"End\",\n \"Home\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Delete\",\n ];\n\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n allowedKeys.includes(event.code)\n ) {\n // Allow Ctrl, Cmd, Alt, and special keys\n return;\n }\n\n if (event.code.includes(\"Digit\")) {\n return;\n }\n\n const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n if (!nonNumericAllowedCharacters.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n const selection = {\n startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n };\n\n const existingInput = targetElement.textContent || \"\";\n const currentOutputArr = existingInput.split(\"\");\n currentOutputArr.splice(\n selection.startOffset,\n selection.endOffset - selection.startOffset,\n event.key\n );\n const currentInput = currentOutputArr.join(\"\");\n\n if (!numericInputRegex.test(currentInput)) {\n event.preventDefault();\n }\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,qBAAqB;AAC9B,SAAS,sCAAsC;AAC/C,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAEvB,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,8BAA8B,SAAS,SAA0B,GACnE;AACE,QACI,CAAC,cAAc,yBAAyB,MACnC,yBACP;AACE,oBAAc,yBAAyB,MAAM,0BACzC;AAAA,IACR;AACA,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,qBAAqB,SAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,mBAAe;AAAA,MACX;AAAA,MACA,WAAW,+BAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MACI,MACK,aAAa,EACb;AAAA,IACG,CAAC,YACG,mBAAmB,WAAW,QAAQ,YAAY;AAAA,EAC1D,GACN;AAEE,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,cAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,cAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wBAAoB,EAAE,MAAqB;AAC3C,uBAAmB;AAAA,EACvB;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAC3D,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,aAAa,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,eAAe;AAAA,IACjE,WAAW,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,aAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,kBAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n const event = e as InputEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n const previousLastEditedElement = document.querySelector(\"[data-cs-last-edited]\");\n if (previousLastEditedElement !== targetElement) {\n previousLastEditedElement?.removeAttribute(\"data-cs-last-edited\");\n targetElement.setAttribute(\"data-cs-last-edited\", \"true\");\n }\n if (\n event.type === \"input\" &&\n ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n ) {\n if (\n !VisualBuilder.VisualBuilderGlobalState.value\n .focusFieldReceivedInput\n ) {\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n true;\n }\n throttledFieldSync();\n }\n}\nconst throttledFieldSync = throttle(() => {\n try {\n const visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n ) as HTMLElement;\n if (!visualBuilderContainer) return;\n sendFieldEvent({\n visualBuilderContainer,\n eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n });\n } catch (error) {\n console.error(\"Error in throttledFieldSync\", error);\n }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n const event = e as KeyboardEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n if (\n event\n .composedPath()\n .some(\n (element) =>\n element instanceof Element && element.tagName === \"BUTTON\"\n )\n ) {\n // custom space handling when a button is involved\n handleKeyDownOnButton(event);\n }\n if (fieldType === FieldDataType.NUMBER) {\n handleNumericFieldKeyDown(event);\n } else if (fieldType === FieldDataType.SINGLELINE) {\n handleSingleLineFieldKeyDown(event);\n }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n if (e.code === \"Space\" && e.target) {\n e.preventDefault();\n insertSpaceAtCursor(e.target as HTMLElement);\n throttledFieldSync();\n }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n if (e.code === \"Enter\") {\n e.preventDefault();\n }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n const targetElement = event.target as HTMLElement;\n\n const allowedKeys = [\n \"Backspace\",\n \"Tab\",\n \"Enter\",\n \"End\",\n \"Home\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Delete\",\n ];\n\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n allowedKeys.includes(event.code)\n ) {\n // Allow Ctrl, Cmd, Alt, and special keys\n return;\n }\n\n if (event.code.includes(\"Digit\")) {\n return;\n }\n\n const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n if (!nonNumericAllowedCharacters.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n const selection = {\n startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n };\n\n const existingInput = targetElement.textContent || \"\";\n const currentOutputArr = existingInput.split(\"\");\n currentOutputArr.splice(\n selection.startOffset,\n selection.endOffset - selection.startOffset,\n event.key\n );\n const currentInput = currentOutputArr.join(\"\");\n\n if (!numericInputRegex.test(currentInput)) {\n event.preventDefault();\n }\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,qBAAqB;AAC9B,SAAS,sCAAsC;AAC/C,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAEvB,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,QAAM,4BAA4B,SAAS,cAAc,uBAAuB;AAChF,MAAI,8BAA8B,eAAe;AAC7C,+BAA2B,gBAAgB,qBAAqB;AAChE,kBAAc,aAAa,uBAAuB,MAAM;AAAA,EAC5D;AACA,MACI,MAAM,SAAS,WACf,8BAA8B,SAAS,SAA0B,GACnE;AACE,QACI,CAAC,cAAc,yBAAyB,MACnC,yBACP;AACE,oBAAc,yBAAyB,MAAM,0BACzC;AAAA,IACR;AACA,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,qBAAqB,SAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,mBAAe;AAAA,MACX;AAAA,MACA,WAAW,+BAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MACI,MACK,aAAa,EACb;AAAA,IACG,CAAC,YACG,mBAAmB,WAAW,QAAQ,YAAY;AAAA,EAC1D,GACN;AAEE,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,cAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,cAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wBAAoB,EAAE,MAAqB;AAC3C,uBAAmB;AAAA,EACvB;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAC3D,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,aAAa,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,eAAe;AAAA,IACjE,WAAW,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,aAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,kBAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentstack/live-preview-utils",
3
- "version": "4.0.1",
3
+ "version": "4.0.2",
4
4
  "description": "Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting live changes to the preview pane.",
5
5
  "type": "module",
6
6
  "types": "dist/legacy/index.d.ts",
@@ -56,7 +56,6 @@
56
56
  "@types/mustache": "^4.2.2",
57
57
  "@types/react": "^18.2.57",
58
58
  "@types/react-dom": "^18.2.19",
59
- "@types/ssri": "^7.1.5",
60
59
  "@types/uuid": "^8.3.1",
61
60
  "@vitest/coverage-v8": "^2.1.2",
62
61
  "@vitest/ui": "^2.1.2",
@@ -71,7 +70,6 @@
71
70
  "jsdom": "^25.0.0",
72
71
  "prettier": "^3.3.3",
73
72
  "prettier-eslint": "^15.0.1",
74
- "ssri": "^11.0.0",
75
73
  "ts-node": "^10.9.2",
76
74
  "tsc": "^2.0.4",
77
75
  "tsup": "^8.0.1",