npm - @contentstack/live-preview-utils - Versions diffs - 3.2.0-alpha.1 → 3.2.1 - Mend

@contentstack/live-preview-utils 3.2.0-alpha.1 → 3.2.1

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

Files changed (508) hide show

package/dist/modern/visualBuilder/index.js.map CHANGED Viewed

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

package/dist/modern/visualBuilder/listeners/mouseClick.cjs CHANGED Viewed

@@ -45,11 +45,14 @@ var import_fieldSchemaMap = require("../utils/fieldSchemaMap.cjs");
 var import_isFieldDisabled = require("../utils/isFieldDisabled.cjs");
 var import_generateHighlightedComment = require("../generators/generateHighlightedComment.cjs");
 var import__2 = require("../../index.cjs");
+var import_FieldRevertComponent = require("../components/FieldRevert/FieldRevertComponent.cjs");
 var import_get_xpath = __toESM(require("get-xpath"), 1);
 var import_configManager = __toESM(require("../../configManager/configManager.cjs"), 1);
 var import_generateThread = require("../generators/generateThread.cjs");
 var import_generateThread2 = require("../generators/generateThread.cjs");
 var import_generateThread3 = require("../generators/generateThread.cjs");
+var import_collabUtils = require("../utils/collabUtils.cjs");
+var import_uuid = require("uuid");
 function addOverlay(params) {
   if (!params.overlayWrapper || !params.editableElement) return;
   (0, import_generateOverlay.addFocusOverlay)(
@@ -65,13 +68,35 @@ function addFocusedToolbar(params) {
   (0, import_generateToolbar.appendFocusedToolbar)(
     params.eventDetails,
     params.focusedToolbar,
-    params.hideOverlay
+    params.hideOverlay,
+    params.isVariant
   );
 }
 async function handleBuilderInteraction(params) {
   const eventTarget = params.event.target;
   const isAnchorElement = eventTarget instanceof HTMLAnchorElement;
   const elementHasCslp = eventTarget && (eventTarget.hasAttribute("data-cslp") || eventTarget.closest("[data-cslp]"));
+  const duplicates = document.querySelectorAll(
+    `[data-cslp="${eventTarget?.getAttribute("data-cslp")}"]`
+  );
+  if (duplicates.length > 1) {
+    duplicates.forEach((ele) => {
+      if (!ele.hasAttribute("data-cslp-unique-id")) {
+        const uniqueId = `cslp-${(0, import_uuid.v4)()}`;
+        ele.setAttribute("data-cslp-unique-id", uniqueId);
+      }
+    });
+  }
+  if (eventTarget?.getAttribute("data-studio-ui") === "true") {
+    return;
+  }
+  if (params.event.altKey) {
+    if (isAnchorElement) {
+      params.event.preventDefault();
+      params.event.stopPropagation();
+    }
+    return;
+  }
   if (isAnchorElement || elementHasCslp && !eventTarget.closest(".visual-builder__empty-block")) {
     params.event.preventDefault();
     params.event.stopPropagation();
@@ -79,11 +104,15 @@ async function handleBuilderInteraction(params) {
   const config = import_configManager.default.get();
   if (config?.collab.enable === true) {
     if (config?.collab.pauseFeedback) return;
-    const xpath = (0, import_get_xpath.default)(eventTarget);
+    const xpath = (0, import_collabUtils.fixSvgXPath)((0, import_get_xpath.default)(eventTarget));
     if (!eventTarget) return;
     const rect = eventTarget.getBoundingClientRect();
     const relativeX = (params.event.clientX - rect.left) / rect.width;
     const relativeY = (params.event.clientY - rect.top) / rect.height;
+    if (!(0, import_generateThread2.isCollabThread)(eventTarget)) {
+      params.event.preventDefault();
+      params.event.stopPropagation();
+    }
     if ((0, import_generateThread2.isCollabThread)(eventTarget)) {
       import_configManager.default.set("collab.isFeedbackMode", false);
     } else if (config?.collab.isFeedbackMode) {
@@ -101,17 +130,45 @@ async function handleBuilderInteraction(params) {
     return;
   }
   const eventDetails = (0, import_getCsDataOfElement.getCsDataOfElement)(params.event);
+  sendMouseClickPostMessage(eventDetails);
+  if (!eventDetails || !params.overlayWrapper || !params.visualBuilderContainer) {
+    return;
+  }
+  const { editableElement, fieldMetadata } = eventDetails;
+  const variantStatus = await (0, import_FieldRevertComponent.getFieldVariantStatus)(fieldMetadata);
+  const isVariant = variantStatus ? Object.values(variantStatus).some((value) => value === true) : false;
+  cleanResidualsIfNeeded(params, editableElement);
+  if (isEmptyBlockElement(editableElement)) {
+    return;
+  }
+  const previousSelectedElement = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  if (isSameSelectedElement(previousSelectedElement, editableElement, params)) {
+    return;
+  }
+  import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = editableElement;
+  addOverlayAndToolbar(params, eventDetails, editableElement, isVariant);
+  const { cslpValue } = fieldMetadata;
+  (0, import_generateHighlightedComment.toggleHighlightedCommentIconDisplay)(cslpValue, false);
+  await handleFieldSchemaAndIndividualFields(
+    params,
+    eventDetails,
+    fieldMetadata,
+    editableElement,
+    previousSelectedElement
+  );
+  observeEditableElementChanges(params, editableElement);
+}
+function sendMouseClickPostMessage(eventDetails) {
   import_visualBuilderPostMessage.default?.send(import_postMessage.VisualBuilderPostMessageEvents.MOUSE_CLICK, {
     cslpData: eventDetails?.cslpData,
     fieldMetadata: eventDetails?.fieldMetadata
   }).catch((err) => {
     console.warn("Error while sending post message", err);
   });
-  if (!eventDetails || !params.overlayWrapper || !params.visualBuilderContainer) {
-    return;
-  }
-  const { editableElement, fieldMetadata } = eventDetails;
-  if (import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM && import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM !== editableElement) {
+}
+function cleanResidualsIfNeeded(params, editableElement) {
+  const previousSelectedElement = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  if (previousSelectedElement && previousSelectedElement !== editableElement || params.reEvaluate) {
     (0, import_handleIndividualFields.cleanIndividualFieldResidual)({
       overlayWrapper: params.overlayWrapper,
       visualBuilderContainer: params.visualBuilderContainer,
@@ -119,14 +176,14 @@ async function handleBuilderInteraction(params) {
       resizeObserver: params.resizeObserver
     });
   }
-  if (editableElement.classList.contains(import__2.VB_EmptyBlockParentClass) || editableElement.classList.contains("visual-builder__empty-block")) {
-    return;
-  }
-  const previousSelectedElement = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
-  if (previousSelectedElement && previousSelectedElement === editableElement) {
-    return;
-  }
-  import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = editableElement;
+}
+function isEmptyBlockElement(editableElement) {
+  return editableElement.classList.contains(import__2.VB_EmptyBlockParentClass) || editableElement.classList.contains("visual-builder__empty-block");
+}
+function isSameSelectedElement(previousSelectedElement, editableElement, params) {
+  return !!(previousSelectedElement && previousSelectedElement === editableElement && !params.reEvaluate);
+}
+function addOverlayAndToolbar(params, eventDetails, editableElement, isVariant) {
   addOverlay({
     overlayWrapper: params.overlayWrapper,
     resizeObserver: params.resizeObserver,
@@ -142,10 +199,12 @@ async function handleBuilderInteraction(params) {
         focusedToolbar: params.focusedToolbar,
         resizeObserver: params.resizeObserver
       });
-    }
+    },
+    isVariant
   });
-  const { content_type_uid, fieldPath, cslpValue } = fieldMetadata;
-  (0, import_generateHighlightedComment.toggleHighlightedCommentIconDisplay)(cslpValue, false);
+}
+async function handleFieldSchemaAndIndividualFields(params, eventDetails, fieldMetadata, editableElement, previousSelectedElement) {
+  const { content_type_uid, fieldPath } = fieldMetadata;
   const fieldSchema = await import_fieldSchemaMap.FieldSchemaMap.getFieldSchema(
     content_type_uid,
     fieldPath
@@ -170,6 +229,19 @@ async function handleBuilderInteraction(params) {
     lastEditedField: previousSelectedElement
   });
 }
+function observeEditableElementChanges(params, editableElement) {
+  const focusElementObserver = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === "attributes" && mutation.attributeName === "data-cslp") {
+        focusElementObserver?.disconnect();
+        import__.VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver = null;
+        handleBuilderInteraction({ ...params, reEvaluate: true });
+      }
+    });
+  });
+  import__.VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver = focusElementObserver;
+  focusElementObserver.observe(editableElement, { attributes: true });
+}
 var mouseClick_default = handleBuilderInteraction;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/modern/visualBuilder/listeners/mouseClick.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseClick.ts"],"sourcesContent":["import {\n cleanIndividualFieldResidual,\n handleIndividualFields,\n} from \"../utils/handleIndividualFields\";\n\nimport {\n getCsDataOfElement,\n getDOMEditStack,\n} from \"../utils/getCsDataOfElement\";\n\nimport { appendFocusedToolbar } from \"../generators/generateToolbar\";\n\nimport { addFocusOverlay, hideOverlay } from \"../generators/generateOverlay\";\n\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\n\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport EventListenerHandlerParams from \"./types\";\nimport { toggleHighlightedCommentIconDisplay } from \"../generators/generateHighlightedComment\";\nimport { VB_EmptyBlockParentClass } from \"../..\";\nimport getXPath from \"get-xpath\";\nimport Config from \"../../configManager/configManager\";\nimport { generateThread } from \"../generators/generateThread\";\nimport { isCollabThread } from \"../generators/generateThread\";\nimport { toggleCollabPopup } from \"../generators/generateThread\";\n\ntype HandleBuilderInteractionParams = Omit<\n EventListenerHandlerParams,\n \"eventDetails\" \| \"customCursor\"\n>;\n\ntype AddFocusOverlayParams = Pick<\n EventListenerHandlerParams,\n \"overlayWrapper\" \| \"resizeObserver\"\n> & { editableElement: Element; isFieldDisabled?: boolean };\n\ntype AddFocusedToolbarParams = Pick<\n EventListenerHandlerParams,\n \"eventDetails\" \| \"focusedToolbar\"\n> & { hideOverlay: () => void };\n\nfunction addOverlay(params: AddFocusOverlayParams) {\n if (!params.overlayWrapper \|\| !params.editableElement) return;\n\n addFocusOverlay(\n params.editableElement,\n params.overlayWrapper,\n params.isFieldDisabled\n );\n params.resizeObserver.observe(params.editableElement);\n}\n\nexport function addFocusedToolbar(params: AddFocusedToolbarParams): void {\n const { editableElement } = params.eventDetails;\n\n if (!editableElement \|\| !params.focusedToolbar) return;\n\n appendFocusedToolbar(\n params.eventDetails,\n params.focusedToolbar,\n params.hideOverlay\n );\n}\n\nasync function handleBuilderInteraction(\n params: HandleBuilderInteractionParams\n): Promise<void> {\n const eventTarget = params.event.target as HTMLElement \| null;\n const isAnchorElement = eventTarget instanceof HTMLAnchorElement;\n const elementHasCslp =\n eventTarget &&\n (eventTarget.hasAttribute(\"data-cslp\") \|\|\n eventTarget.closest(\"[data-cslp]\"));\n\n // prevent default behavior for anchor elements and elements with cslp attribute\n if (\n isAnchorElement \|\|\n (elementHasCslp && !eventTarget.closest(\".visual-builder__empty-block\"))\n ) {\n params.event.preventDefault();\n params.event.stopPropagation();\n }\n\n const config = Config.get();\n\n if (config?.collab.enable === true) {\n if (config?.collab.pauseFeedback) return;\n const xpath = getXPath(eventTarget);\n if (!eventTarget) return;\n const rect = eventTarget.getBoundingClientRect();\n const relativeX = (params.event.clientX - rect.left) / rect.width;\n const relativeY = (params.event.clientY - rect.top) / rect.height;\n\n if (isCollabThread(eventTarget)) {\n Config.set(\"collab.isFeedbackMode\", false);\n } else if (config?.collab.isFeedbackMode) {\n generateThread(\n { xpath, relativeX, relativeY },\n {\n isNewThread: true,\n updateConfig: true,\n }\n );\n } else {\n toggleCollabPopup({ threadUid: \"\", action: \"close\" });\n Config.set(\"collab.isFeedbackMode\", true);\n }\n return;\n }\n\n const eventDetails = getCsDataOfElement(params.event);\n visualBuilderPostMessage\n ?.send(VisualBuilderPostMessageEvents.MOUSE_CLICK, {\n cslpData: eventDetails?.cslpData,\n fieldMetadata: eventDetails?.fieldMetadata,\n })\n .catch((err) => {\n console.warn(\"Error while sending post message\", err);\n });\n if (\n !eventDetails \|\|\n !params.overlayWrapper \|\|\n !params.visualBuilderContainer\n ) {\n return;\n }\n const { editableElement, fieldMetadata } = eventDetails;\n\n if (\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM &&\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM !== editableElement\n ) {\n cleanIndividualFieldResidual({\n overlayWrapper: params.overlayWrapper,\n visualBuilderContainer: params.visualBuilderContainer,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n }\n\n // if the selected element is our empty block element, return\n if (\n editableElement.classList.contains(VB_EmptyBlockParentClass) \|\|\n editableElement.classList.contains(\"visual-builder__empty-block\")\n ) {\n return;\n }\n\n // when previous and current selected element is same, return.\n // this also avoids inserting psuedo-editable field (field data is\n // not equal to text content in DOM) when performing mouse\n // selections in the content editable\n const previousSelectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n previousSelectedElement &&\n previousSelectedElement === editableElement\n ) {\n return;\n }\n\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n editableElement;\n\n addOverlay({\n overlayWrapper: params.overlayWrapper,\n resizeObserver: params.resizeObserver,\n editableElement: editableElement,\n });\n\n addFocusedToolbar({\n eventDetails: eventDetails,\n focusedToolbar: params.focusedToolbar,\n hideOverlay: () => {\n hideOverlay({\n visualBuilderContainer: params.visualBuilderContainer,\n visualBuilderOverlayWrapper: params.overlayWrapper,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n },\n });\n\n const { content_type_uid, fieldPath, cslpValue } = fieldMetadata;\n\n toggleHighlightedCommentIconDisplay(cslpValue, false);\n\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n content_type_uid,\n fieldPath\n );\n\n if (fieldSchema) {\n // after field schema is available re-add disabled overlay\n const { isDisabled } = isFieldDisabled(fieldSchema, eventDetails);\n if (isDisabled) {\n addOverlay({\n overlayWrapper: params.overlayWrapper,\n resizeObserver: params.resizeObserver,\n editableElement: editableElement,\n isFieldDisabled: true,\n });\n }\n }\n\n // This is most probably redundant code, as the handleIndividualFields function\n // takes care of this\n // TODO: Remove this\n // if (\n // fieldSchema.data_type === \"block\" \|\|\n // fieldSchema.multiple \|\|\n // (fieldSchema.data_type === \"reference\" &&\n // // @ts-ignore\n // fieldSchema.field_metadata.ref_multiple)\n // ) {\n // handleAddButtonsForMultiple(eventDetails, {\n // editableElement: editableElement,\n // visualBuilderContainer: params.visualBuilderContainer,\n // resizeObserver: params.resizeObserver,\n // });\n // } else {\n // removeAddInstanceButtons({\n // eventTarget: params.event.target,\n // visualBuilderContainer: params.visualBuilderContainer,\n // overlayWrapper: params.overlayWrapper,\n // });\n // }\n visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FOCUS_FIELD, {\n DOMEditStack: getDOMEditStack(editableElement),\n });\n\n await handleIndividualFields(eventDetails, {\n visualBuilderContainer: params.visualBuilderContainer,\n resizeObserver: params.resizeObserver,\n lastEditedField: previousSelectedElement,\n });\n}\n\nexport default handleBuilderInteraction;\n"],"mappings":"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","names":["import__","import_generateThread","Config","getXPath","visualBuilderPostMessage"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseClick.ts"],"sourcesContent":["import {\n cleanIndividualFieldResidual,\n handleIndividualFields,\n} from \"../utils/handleIndividualFields\";\n\nimport {\n getCsDataOfElement,\n getDOMEditStack,\n} from \"../utils/getCsDataOfElement\";\n\nimport { appendFocusedToolbar } from \"../generators/generateToolbar\";\n\nimport { addFocusOverlay, hideOverlay } from \"../generators/generateOverlay\";\n\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\n\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport EventListenerHandlerParams from \"./types\";\nimport { toggleHighlightedCommentIconDisplay } from \"../generators/generateHighlightedComment\";\nimport { VB_EmptyBlockParentClass } from \"../..\";\nimport { getFieldVariantStatus } from \"../components/FieldRevert/FieldRevertComponent\";\nimport getXPath from \"get-xpath\";\nimport Config from \"../../configManager/configManager\";\nimport { generateThread } from \"../generators/generateThread\";\nimport { isCollabThread } from \"../generators/generateThread\";\nimport { toggleCollabPopup } from \"../generators/generateThread\";\nimport { fixSvgXPath } from \"../utils/collabUtils\";\nimport { v4 as uuidV4 } from \"uuid\";\n\ntype HandleBuilderInteractionParams = Omit<\n EventListenerHandlerParams,\n \"eventDetails\" \| \"customCursor\"\n> & { reEvaluate?: boolean };\n\ntype AddFocusOverlayParams = Pick<\n EventListenerHandlerParams,\n \"overlayWrapper\" \| \"resizeObserver\"\n> & { editableElement: Element; isFieldDisabled?: boolean };\n\ntype AddFocusedToolbarParams = Pick<\n EventListenerHandlerParams,\n \"eventDetails\" \| \"focusedToolbar\"\n> & { hideOverlay: () => void; isVariant: boolean };\n\nfunction addOverlay(params: AddFocusOverlayParams) {\n if (!params.overlayWrapper \|\| !params.editableElement) return;\n\n addFocusOverlay(\n params.editableElement,\n params.overlayWrapper,\n params.isFieldDisabled\n );\n params.resizeObserver.observe(params.editableElement);\n}\n\nexport function addFocusedToolbar(params: AddFocusedToolbarParams): void {\n const { editableElement } = params.eventDetails;\n\n if (!editableElement \|\| !params.focusedToolbar) return;\n\n appendFocusedToolbar(\n params.eventDetails,\n params.focusedToolbar,\n params.hideOverlay,\n params.isVariant\n );\n}\n\nasync function handleBuilderInteraction(\n params: HandleBuilderInteractionParams\n): Promise<void> {\n const eventTarget = params.event.target as HTMLElement \| null;\n const isAnchorElement = eventTarget instanceof HTMLAnchorElement;\n const elementHasCslp =\n eventTarget &&\n (eventTarget.hasAttribute(\"data-cslp\") \|\|\n eventTarget.closest(\"[data-cslp]\"));\n\n // if multiple elements with the same cslp element are found,\n // assign a unique ID to each element which we can use to identify\n // them in updateFocussedState and other places where we\n // would have queried the element by data-cslp\n const duplicates = document.querySelectorAll(\n `[data-cslp=\"${eventTarget?.getAttribute(\"data-cslp\")}\"]`\n );\n if (duplicates.length > 1) {\n duplicates.forEach((ele) => {\n if (!ele.hasAttribute(\"data-cslp-unique-id\")) {\n const uniqueId = `cslp-${uuidV4()}`;\n ele.setAttribute(\"data-cslp-unique-id\", uniqueId);\n }\n });\n }\n\n // if the target element is a studio-ui element, return\n // this is currently used for the \"Edit in Studio\" button\n if (eventTarget?.getAttribute(\"data-studio-ui\") === \"true\") {\n return;\n }\n\n if (params.event.altKey) {\n if (isAnchorElement) {\n params.event.preventDefault();\n params.event.stopPropagation();\n }\n return;\n }\n // prevent default behavior for anchor elements and elements with cslp attribute\n if (\n isAnchorElement \|\|\n (elementHasCslp && !eventTarget.closest(\".visual-builder__empty-block\"))\n ) {\n params.event.preventDefault();\n params.event.stopPropagation();\n }\n\n const config = Config.get();\n\n if (config?.collab.enable === true) {\n if (config?.collab.pauseFeedback) return;\n const xpath = fixSvgXPath(getXPath(eventTarget));\n if (!eventTarget) return;\n\n const rect = eventTarget.getBoundingClientRect();\n const relativeX = (params.event.clientX - rect.left) / rect.width;\n const relativeY = (params.event.clientY - rect.top) / rect.height;\n\n if (!isCollabThread(eventTarget)) {\n params.event.preventDefault();\n params.event.stopPropagation();\n }\n\n if (isCollabThread(eventTarget)) {\n Config.set(\"collab.isFeedbackMode\", false);\n } else if (config?.collab.isFeedbackMode) {\n generateThread(\n { xpath, relativeX, relativeY },\n {\n isNewThread: true,\n updateConfig: true,\n }\n );\n } else {\n toggleCollabPopup({ threadUid: \"\", action: \"close\" });\n Config.set(\"collab.isFeedbackMode\", true);\n }\n return;\n }\n\n const eventDetails = getCsDataOfElement(params.event);\n\n // Send mouse click post message\n sendMouseClickPostMessage(eventDetails);\n\n if (\n !eventDetails \|\|\n !params.overlayWrapper \|\|\n !params.visualBuilderContainer\n ) {\n return;\n }\n\n const { editableElement, fieldMetadata } = eventDetails;\n const variantStatus = await getFieldVariantStatus(fieldMetadata);\n const isVariant = variantStatus\n ? Object.values(variantStatus).some((value) => value === true)\n : false;\n\n // Clean residuals if necessary\n cleanResidualsIfNeeded(params, editableElement);\n\n // Return if the selected element is an empty block\n if (isEmptyBlockElement(editableElement)) {\n return;\n }\n\n // when previous and current selected element is same, return.\n // this also avoids inserting psuedo-editable field (field data is\n // not equal to text content in DOM) when performing mouse\n // selections in the content editable\n const previousSelectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n isSameSelectedElement(previousSelectedElement, editableElement, params)\n ) {\n return;\n }\n\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n editableElement;\n\n // Add overlay and focused toolbar\n addOverlayAndToolbar(params, eventDetails, editableElement, isVariant);\n\n const { cslpValue } = fieldMetadata;\n\n toggleHighlightedCommentIconDisplay(cslpValue, false);\n\n // Handle field schema and individual fields\n await handleFieldSchemaAndIndividualFields(\n params,\n eventDetails,\n fieldMetadata,\n editableElement,\n previousSelectedElement\n );\n\n // Observe changes to the editable element\n observeEditableElementChanges(params, editableElement);\n}\n\nfunction sendMouseClickPostMessage(eventDetails: any) {\n visualBuilderPostMessage\n ?.send(VisualBuilderPostMessageEvents.MOUSE_CLICK, {\n cslpData: eventDetails?.cslpData,\n fieldMetadata: eventDetails?.fieldMetadata,\n })\n .catch((err) => {\n console.warn(\"Error while sending post message\", err);\n });\n}\nfunction cleanResidualsIfNeeded(\n params: HandleBuilderInteractionParams,\n editableElement: Element\n) {\n const previousSelectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n (previousSelectedElement &&\n previousSelectedElement !== editableElement) \|\|\n params.reEvaluate\n ) {\n cleanIndividualFieldResidual({\n overlayWrapper: params.overlayWrapper!,\n visualBuilderContainer: params.visualBuilderContainer,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n }\n}\nfunction isEmptyBlockElement(editableElement: Element): boolean {\n return (\n editableElement.classList.contains(VB_EmptyBlockParentClass) \|\|\n editableElement.classList.contains(\"visual-builder__empty-block\")\n );\n}\n\nfunction isSameSelectedElement(\n previousSelectedElement: Element \| null,\n editableElement: Element,\n params: HandleBuilderInteractionParams\n): boolean {\n return !!(\n previousSelectedElement &&\n previousSelectedElement === editableElement &&\n !params.reEvaluate\n );\n}\n\nfunction addOverlayAndToolbar(\n params: HandleBuilderInteractionParams,\n eventDetails: any,\n editableElement: Element,\n isVariant: boolean\n) {\n addOverlay({\n overlayWrapper: params.overlayWrapper,\n resizeObserver: params.resizeObserver,\n editableElement: editableElement,\n });\n\n addFocusedToolbar({\n eventDetails: eventDetails,\n focusedToolbar: params.focusedToolbar,\n hideOverlay: () => {\n hideOverlay({\n visualBuilderContainer: params.visualBuilderContainer,\n visualBuilderOverlayWrapper: params.overlayWrapper,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n },\n isVariant,\n });\n}\nasync function handleFieldSchemaAndIndividualFields(\n params: HandleBuilderInteractionParams,\n eventDetails: any,\n fieldMetadata: any,\n editableElement: Element,\n previousSelectedElement: Element \| null\n) {\n const { content_type_uid, fieldPath } = fieldMetadata;\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n content_type_uid,\n fieldPath\n );\n\n if (fieldSchema) {\n const { isDisabled } = isFieldDisabled(fieldSchema, eventDetails);\n if (isDisabled) {\n addOverlay({\n overlayWrapper: params.overlayWrapper,\n resizeObserver: params.resizeObserver,\n editableElement: editableElement,\n isFieldDisabled: true,\n });\n }\n }\n\n visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FOCUS_FIELD, {\n DOMEditStack: getDOMEditStack(editableElement),\n });\n\n await handleIndividualFields(eventDetails, {\n visualBuilderContainer: params.visualBuilderContainer!,\n resizeObserver: params.resizeObserver,\n lastEditedField: previousSelectedElement,\n });\n}\nfunction observeEditableElementChanges(\n params: HandleBuilderInteractionParams,\n editableElement: Element\n) {\n const focusElementObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.type === \"attributes\" &&\n mutation.attributeName === \"data-cslp\"\n ) {\n focusElementObserver?.disconnect();\n VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver =\n null;\n handleBuilderInteraction({ ...params, reEvaluate: true });\n }\n });\n });\n\n VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver =\n focusElementObserver;\n focusElementObserver.observe(editableElement, { attributes: true });\n}\n\nexport default handleBuilderInteraction;\n"],"mappings":"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","names":["import__","import_generateThread","uuidV4","Config","getXPath","visualBuilderPostMessage"]}

package/dist/modern/visualBuilder/listeners/mouseClick.d.cts CHANGED Viewed

@@ -2,9 +2,12 @@ import EventListenerHandlerParams from './types.cjs';
 import '../types/visualBuilder.types.cjs';
 import '../../cslp/types/cslp.types.cjs';
-type HandleBuilderInteractionParams = Omit<EventListenerHandlerParams, "eventDetails" | "customCursor">;
+type HandleBuilderInteractionParams = Omit<EventListenerHandlerParams, "eventDetails" | "customCursor"> & {
+    reEvaluate?: boolean;
+};
 type AddFocusedToolbarParams = Pick<EventListenerHandlerParams, "eventDetails" | "focusedToolbar"> & {
     hideOverlay: () => void;
+    isVariant: boolean;
 };
 declare function addFocusedToolbar(params: AddFocusedToolbarParams): void;
 declare function handleBuilderInteraction(params: HandleBuilderInteractionParams): Promise<void>;

package/dist/modern/visualBuilder/listeners/mouseClick.d.ts CHANGED Viewed

@@ -2,9 +2,12 @@ import EventListenerHandlerParams from './types.js';
 import '../types/visualBuilder.types.js';
 import '../../cslp/types/cslp.types.js';
-type HandleBuilderInteractionParams = Omit<EventListenerHandlerParams, "eventDetails" | "customCursor">;
+type HandleBuilderInteractionParams = Omit<EventListenerHandlerParams, "eventDetails" | "customCursor"> & {
+    reEvaluate?: boolean;
+};
 type AddFocusedToolbarParams = Pick<EventListenerHandlerParams, "eventDetails" | "focusedToolbar"> & {
     hideOverlay: () => void;
+    isVariant: boolean;
 };
 declare function addFocusedToolbar(params: AddFocusedToolbarParams): void;
 declare function handleBuilderInteraction(params: HandleBuilderInteractionParams): Promise<void>;

package/dist/modern/visualBuilder/listeners/mouseClick.js CHANGED Viewed

@@ -18,11 +18,14 @@ import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
 import { isFieldDisabled } from "../utils/isFieldDisabled.js";
 import { toggleHighlightedCommentIconDisplay } from "../generators/generateHighlightedComment.js";
 import { VB_EmptyBlockParentClass } from "../../index.js";
+import { getFieldVariantStatus } from "../components/FieldRevert/FieldRevertComponent.js";
 import getXPath from "get-xpath";
 import Config from "../../configManager/configManager.js";
 import { generateThread } from "../generators/generateThread.js";
 import { isCollabThread } from "../generators/generateThread.js";
 import { toggleCollabPopup } from "../generators/generateThread.js";
+import { fixSvgXPath } from "../utils/collabUtils.js";
+import { v4 as uuidV4 } from "uuid";
 function addOverlay(params) {
   if (!params.overlayWrapper || !params.editableElement) return;
   addFocusOverlay(
@@ -38,13 +41,35 @@ function addFocusedToolbar(params) {
   appendFocusedToolbar(
     params.eventDetails,
     params.focusedToolbar,
-    params.hideOverlay
+    params.hideOverlay,
+    params.isVariant
   );
 }
 async function handleBuilderInteraction(params) {
   const eventTarget = params.event.target;
   const isAnchorElement = eventTarget instanceof HTMLAnchorElement;
   const elementHasCslp = eventTarget && (eventTarget.hasAttribute("data-cslp") || eventTarget.closest("[data-cslp]"));
+  const duplicates = document.querySelectorAll(
+    `[data-cslp="${eventTarget?.getAttribute("data-cslp")}"]`
+  );
+  if (duplicates.length > 1) {
+    duplicates.forEach((ele) => {
+      if (!ele.hasAttribute("data-cslp-unique-id")) {
+        const uniqueId = `cslp-${uuidV4()}`;
+        ele.setAttribute("data-cslp-unique-id", uniqueId);
+      }
+    });
+  }
+  if (eventTarget?.getAttribute("data-studio-ui") === "true") {
+    return;
+  }
+  if (params.event.altKey) {
+    if (isAnchorElement) {
+      params.event.preventDefault();
+      params.event.stopPropagation();
+    }
+    return;
+  }
   if (isAnchorElement || elementHasCslp && !eventTarget.closest(".visual-builder__empty-block")) {
     params.event.preventDefault();
     params.event.stopPropagation();
@@ -52,11 +77,15 @@ async function handleBuilderInteraction(params) {
   const config = Config.get();
   if (config?.collab.enable === true) {
     if (config?.collab.pauseFeedback) return;
-    const xpath = getXPath(eventTarget);
+    const xpath = fixSvgXPath(getXPath(eventTarget));
     if (!eventTarget) return;
     const rect = eventTarget.getBoundingClientRect();
     const relativeX = (params.event.clientX - rect.left) / rect.width;
     const relativeY = (params.event.clientY - rect.top) / rect.height;
+    if (!isCollabThread(eventTarget)) {
+      params.event.preventDefault();
+      params.event.stopPropagation();
+    }
     if (isCollabThread(eventTarget)) {
       Config.set("collab.isFeedbackMode", false);
     } else if (config?.collab.isFeedbackMode) {
@@ -74,17 +103,45 @@ async function handleBuilderInteraction(params) {
     return;
   }
   const eventDetails = getCsDataOfElement(params.event);
+  sendMouseClickPostMessage(eventDetails);
+  if (!eventDetails || !params.overlayWrapper || !params.visualBuilderContainer) {
+    return;
+  }
+  const { editableElement, fieldMetadata } = eventDetails;
+  const variantStatus = await getFieldVariantStatus(fieldMetadata);
+  const isVariant = variantStatus ? Object.values(variantStatus).some((value) => value === true) : false;
+  cleanResidualsIfNeeded(params, editableElement);
+  if (isEmptyBlockElement(editableElement)) {
+    return;
+  }
+  const previousSelectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  if (isSameSelectedElement(previousSelectedElement, editableElement, params)) {
+    return;
+  }
+  VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = editableElement;
+  addOverlayAndToolbar(params, eventDetails, editableElement, isVariant);
+  const { cslpValue } = fieldMetadata;
+  toggleHighlightedCommentIconDisplay(cslpValue, false);
+  await handleFieldSchemaAndIndividualFields(
+    params,
+    eventDetails,
+    fieldMetadata,
+    editableElement,
+    previousSelectedElement
+  );
+  observeEditableElementChanges(params, editableElement);
+}
+function sendMouseClickPostMessage(eventDetails) {
   visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.MOUSE_CLICK, {
     cslpData: eventDetails?.cslpData,
     fieldMetadata: eventDetails?.fieldMetadata
   }).catch((err) => {
     console.warn("Error while sending post message", err);
   });
-  if (!eventDetails || !params.overlayWrapper || !params.visualBuilderContainer) {
-    return;
-  }
-  const { editableElement, fieldMetadata } = eventDetails;
-  if (VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM && VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM !== editableElement) {
+}
+function cleanResidualsIfNeeded(params, editableElement) {
+  const previousSelectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  if (previousSelectedElement && previousSelectedElement !== editableElement || params.reEvaluate) {
     cleanIndividualFieldResidual({
       overlayWrapper: params.overlayWrapper,
       visualBuilderContainer: params.visualBuilderContainer,
@@ -92,14 +149,14 @@ async function handleBuilderInteraction(params) {
       resizeObserver: params.resizeObserver
     });
   }
-  if (editableElement.classList.contains(VB_EmptyBlockParentClass) || editableElement.classList.contains("visual-builder__empty-block")) {
-    return;
-  }
-  const previousSelectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
-  if (previousSelectedElement && previousSelectedElement === editableElement) {
-    return;
-  }
-  VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = editableElement;
+}
+function isEmptyBlockElement(editableElement) {
+  return editableElement.classList.contains(VB_EmptyBlockParentClass) || editableElement.classList.contains("visual-builder__empty-block");
+}
+function isSameSelectedElement(previousSelectedElement, editableElement, params) {
+  return !!(previousSelectedElement && previousSelectedElement === editableElement && !params.reEvaluate);
+}
+function addOverlayAndToolbar(params, eventDetails, editableElement, isVariant) {
   addOverlay({
     overlayWrapper: params.overlayWrapper,
     resizeObserver: params.resizeObserver,
@@ -115,10 +172,12 @@ async function handleBuilderInteraction(params) {
         focusedToolbar: params.focusedToolbar,
         resizeObserver: params.resizeObserver
       });
-    }
+    },
+    isVariant
   });
-  const { content_type_uid, fieldPath, cslpValue } = fieldMetadata;
-  toggleHighlightedCommentIconDisplay(cslpValue, false);
+}
+async function handleFieldSchemaAndIndividualFields(params, eventDetails, fieldMetadata, editableElement, previousSelectedElement) {
+  const { content_type_uid, fieldPath } = fieldMetadata;
   const fieldSchema = await FieldSchemaMap.getFieldSchema(
     content_type_uid,
     fieldPath
@@ -143,6 +202,19 @@ async function handleBuilderInteraction(params) {
     lastEditedField: previousSelectedElement
   });
 }
+function observeEditableElementChanges(params, editableElement) {
+  const focusElementObserver = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === "attributes" && mutation.attributeName === "data-cslp") {
+        focusElementObserver?.disconnect();
+        VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver = null;
+        handleBuilderInteraction({ ...params, reEvaluate: true });
+      }
+    });
+  });
+  VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver = focusElementObserver;
+  focusElementObserver.observe(editableElement, { attributes: true });
+}
 var mouseClick_default = handleBuilderInteraction;
 export {
   addFocusedToolbar,