@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.
- package/README.md +3 -3
- package/dist/legacy/light-sdk.cjs +1 -1
- package/dist/legacy/light-sdk.js +1 -1
- package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.cjs +24 -8
- package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.cjs.map +1 -1
- package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.js +24 -8
- package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.js.map +1 -1
- package/dist/legacy/preview/contentstack-live-preview-HOC.cjs +1 -1
- package/dist/legacy/preview/contentstack-live-preview-HOC.js +1 -1
- package/dist/legacy/visualBuilder/utils/enableInlineEditing.cjs +3 -1
- package/dist/legacy/visualBuilder/utils/enableInlineEditing.cjs.map +1 -1
- package/dist/legacy/visualBuilder/utils/enableInlineEditing.js +3 -1
- package/dist/legacy/visualBuilder/utils/enableInlineEditing.js.map +1 -1
- package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.cjs +5 -0
- package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.cjs.map +1 -1
- package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.js +5 -0
- package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.js.map +1 -1
- package/dist/modern/light-sdk.cjs +1 -1
- package/dist/modern/light-sdk.js +1 -1
- package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.cjs +23 -7
- package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.cjs.map +1 -1
- package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.js +23 -7
- package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.js.map +1 -1
- package/dist/modern/preview/contentstack-live-preview-HOC.cjs +1 -1
- package/dist/modern/preview/contentstack-live-preview-HOC.js +1 -1
- package/dist/modern/visualBuilder/utils/enableInlineEditing.cjs +3 -1
- package/dist/modern/visualBuilder/utils/enableInlineEditing.cjs.map +1 -1
- package/dist/modern/visualBuilder/utils/enableInlineEditing.js +3 -1
- package/dist/modern/visualBuilder/utils/enableInlineEditing.js.map +1 -1
- package/dist/modern/visualBuilder/utils/handleFieldMouseDown.cjs +5 -0
- package/dist/modern/visualBuilder/utils/handleFieldMouseDown.cjs.map +1 -1
- package/dist/modern/visualBuilder/utils/handleFieldMouseDown.js +5 -0
- package/dist/modern/visualBuilder/utils/handleFieldMouseDown.js.map +1 -1
- 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'
|
|
19
|
-
import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.0.
|
|
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 ©
|
|
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
|
|
package/dist/legacy/light-sdk.js
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
url.searchParams.set("
|
|
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.
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkC;AAClC,2BAA4C;AAC5C,oBAA6B;AAC7B,mBAAuC;AACvC,mBAAoD;AACpD,qCAAmC;AACnC,IAAAA,kCAAiD;AACjD,yCAKO;AAMA,SAAS,6BAAmC;AAlBnD;AAmBI,uCAAAC,YAAA,mBAAwB;AAAA,IACpB,iEAAiC;AAAA,IACjC,CAAC,UAAU;AACP,cAAQ,MAAM,KAAK,MAAM;AAAA,QACrB,KAAK,WAAW;AACZ,iBAAO,QAAQ,QAAQ;AACvB;AAAA,QACJ;AAAA,QACA,KAAK,YAAY;AACb,iBAAO,QAAQ,KAAK;AACpB;AAAA,QACJ;AAAA,QACA,KAAK,UAAU;AACX,iBAAO,QAAQ,GAAG;AAClB;AAAA,QACJ;AAAA,QACA,SAAS;AACL,gBAAM,kBAAyB,MAAM,KAAK;AAC1C,gBAAM,IAAI,MAAM,oBAAoB,eAAe,EAAE;AAAA,QACzD;AAAA,MACJ;AAAA,IACJ;AAAA;AAER;AAKO,SAAS,mCAAyC;AA/CzD;AAgDI,uCAAAA,YAAA,mBAAwB;AAAA,IACpB,iEAAiC;AAAA,IACjC,CAAC,UAAU;AAlDnB,UAAAC;AAmDY,UAAI;AACA,cAAM,EAAE,KAAK,SAAS,IAAI,qBAAAC,QAAO,IAAI;AACrC,cAAM,cAAaD,MAAA,MAAM,KAAK,cAAX,gBAAAA,IAAsB;AACzC,sDAAoB;AAAA,UAChB,cAAc,MAAM,KAAK;AAAA,QAC7B,CAAC;AAGD,YAAI,CAAC,OAAO,CAAC,YAAY;AACrB,mBAAS;AAAA,QACb;AAEA,gBAAG,mCAAkB,GAAG;AACpB,cAAG,CAAC,QAAQ;AACR,uCAAa,MAAM,uBAAuB;AAC1C;AAAA,UACJ;AAAC;AAGD,cAAG,OAAO,CAAC,YAAY;AACnB,gBAAG,OAAO,SAAS,KAAK,SAAS,cAAc,GAAG;AAC9C,qBAAO,SAAS,OAAO;AAAA,YAC3B,OAAO;AACH,oBAAM,MAAM,IAAI,IAAI,OAAO,SAAS,IAAI;AACxC,kBAAI,aAAa,IAAI,gBAAgB,MAAM,KAAK,IAAI;AACpD,kBAAI,aAAa,IAAI,oBAAoB,qBAAAC,QAAO,IAAI,EAAE,aAAa,kBAAkB,EAAE;AACvF,kBAAI,aAAa,IAAI,aAAa,qBAAAA,QAAO,IAAI,EAAE,aAAa,YAAY,EAAE;AAC1E,qBAAO,SAAS,OAAO,IAAI,SAAS;AAAA,YACxC;AAAA,UACJ;AAGA,cAAG,eAAe,4EAAyC,aAAY;AACnE,kBAAM,SAAS,IAAI,IAAI,OAAO,SAAS,IAAI;AAC3C,mBAAO,aAAa,IAAI,gBAAgB,MAAM,KAAK,IAAI;AACvD,mBAAO,QAAQ,UAAU,CAAC,GAAG,IAAI,OAAO,SAAS,CAAC;AAAA,UACtD;AAGA,cAAG,eAAe,4EAAyC,cAAc,MAAM,KAAK,KAAI;AACpF,mBAAO,SAAS,OAAO,MAAM,KAAK;AAAA,UACtC;AAAA,QACJ;AAAA,MAGJ,SAAS,OAAO;AACZ,mCAAa,MAAM,uCAAuC,KAAK;AAC/D;AAAA,MACJ;AAAA,IACJ;AAAA;AAER;AAEO,SAAS,4CAAkD;AAxGlE;AAyGI,uCAAAF,YAAA,mBACM;AAAA,IACE,iEAAiC;AAAA,IACjC;AAAA,MACI,QAAQ;AAAA,QACJ,cAAc,qBAAAE,QAAO,IAAI,EAAE;AAAA,QAC3B,MAAM,OAAO,SAAS;AAAA,QACtB,YAAY;AAAA,QACZ,MAAM,qBAAAA,QAAO,IAAI,EAAE;AAAA,MACvB;AAAA,IACJ;AAAA,IAEH,KAAK,CAAC,SAAS;AArHxB,QAAAD,KAAA;AAsHY,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA,aAAa,oCAAuB;AAAA,IACxC,IAAI,QAAQ,CAAC;AAIb,UAAI,MAAAA,MAAA,qBAAAC,YAAA,gBAAAD,IAAQ,UAAR,mBAAe,eAAc,qBAAAC,QAAO,IAAI,EAAE,eAAe,oCAAuB,SAAS;AACzF;AAAA,IACJ;AAEA,QAAI,kBAAkB,UAAU;AAE5B,oDAAoB;AAAA,QAChB,kBAAkB;AAAA,QAClB,WAAW;AAAA,MACf,CAAC;AAAA,IACL,OAAO;AAAA,IAKP;AACA,QAAI,qBAAAA,QAAO,IAAI,EAAE,WAAO,kCAAoB,SAAK,mCAAkB,GAAG;AAClE,uCAAe;AAAA,IACnB;AACA,yBAAAA,QAAO,IAAI,cAAc,UAAU;AAGnC,QAAI,CAAC,qBAAAA,QAAO,IAAI,EAAE,KAAK;AACnB,kBAAY,MAAM;AACd,2CAAmC;AAAA,MACvC,GAAG,IAAI;AAAA,IACX;AAEA,+BAA2B;AAC3B,qCAAiC;AAAA,EACrC,GACC,MAAM,CAAC,MAAM;AAAA,EAGd;AACR;AAEA,SAAS,qCAA2C;AAnKpD;AAoKI,uCAAAF,YAAA,mBACM,KAAK,iEAAiC,kBAAkB;AAAA,IACtD,MAAM,OAAO,SAAS;AAAA,EAC1B,GACC,MAAM,MAAM;AAAA,EAEb;AACR;","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
|
-
|
|
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
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
url.searchParams.set("
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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;
|
|
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
|
-
|
|
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;
|
|
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;
|
|
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;
|
|
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":[]}
|
package/dist/modern/light-sdk.js
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
url.searchParams.set("
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
url.searchParams.set("
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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;
|
|
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
|
-
|
|
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;
|
|
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":"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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?.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":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentstack/live-preview-utils",
|
|
3
|
-
"version": "4.0.
|
|
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",
|