npm - @contentstack/live-preview-utils - Versions diffs - 3.0.0 → 3.0.1 - Mend

@contentstack/live-preview-utils 3.0.0 → 3.0.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 (118) hide show

package/dist/modern/visualBuilder/utils/getPsuedoEditableStylesElement.js ADDED Viewed

@@ -0,0 +1,23 @@
+import "../../chunk-5WRI5ZAA.js";
+// src/visualBuilder/utils/getPsuedoEditableStylesElement.ts
+import getCamelCaseStyles from "./getCamelCaseStyles.js";
+import getStyleOfAnElement from "./getStyleOfAnElement.js";
+function getPsuedoEditableElementStyles(psuedoEditableElement, camelCase) {
+  let styles = getStyleOfAnElement(psuedoEditableElement);
+  if (camelCase) {
+    styles = getCamelCaseStyles(styles);
+  }
+  const rect = psuedoEditableElement.getBoundingClientRect();
+  styles.position = "absolute";
+  styles.top = `${rect.top + window.scrollY}px`;
+  styles.left = `${rect.left + window.scrollX}px`;
+  styles.height = "auto";
+  styles.whiteSpace = "pre-line";
+  styles.textTransform = "none";
+  return styles;
+}
+export {
+  getPsuedoEditableElementStyles
+};
+//# sourceMappingURL=getPsuedoEditableStylesElement.js.map

package/dist/modern/visualBuilder/utils/getPsuedoEditableStylesElement.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/visualBuilder/utils/getPsuedoEditableStylesElement.ts"],"sourcesContent":["import getCamelCaseStyles from \"./getCamelCaseStyles\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\nexport function getPsuedoEditableElementStyles(\n psuedoEditableElement: HTMLElement,\n camelCase?: boolean\n): { [key: string]: string } {\n let styles = getStyleOfAnElement(psuedoEditableElement);\n if (camelCase) {\n styles = getCamelCaseStyles(styles);\n }\n // Get the offsetTop and offsetLeft of the editable element and set the position of the pseudo editable element\n // The pseudo editable element is positioned absolutely at the same location as the editable element\n const rect = psuedoEditableElement.getBoundingClientRect();\n\n styles.position = \"absolute\";\n styles.top = `${rect.top + window.scrollY}px`;\n styles.left = `${rect.left + window.scrollX}px`;\n // setting height to auto so that the element can grow based on the content\n // and the resize observer can detect the change in height\n styles.height = \"auto\";\n styles.whiteSpace = \"pre-line\";\n styles.textTransform = \"none\";\n\n return styles;\n}\n"],"mappings":";;;AAAA,OAAO,wBAAwB;AAC/B,OAAO,yBAAyB;AAEzB,SAAS,+BACZ,uBACA,WACyB;AACzB,MAAI,SAAS,oBAAoB,qBAAqB;AACtD,MAAI,WAAW;AACX,aAAS,mBAAmB,MAAM;AAAA,EACtC;AAGA,QAAM,OAAO,sBAAsB,sBAAsB;AAEzD,SAAO,WAAW;AAClB,SAAO,MAAM,GAAG,KAAK,MAAM,OAAO,OAAO;AACzC,SAAO,OAAO,GAAG,KAAK,OAAO,OAAO,OAAO;AAG3C,SAAO,SAAS;AAChB,SAAO,aAAa;AACpB,SAAO,gBAAgB;AAEvB,SAAO;AACX;","names":[]}

package/dist/modern/visualBuilder/utils/getStyleOfAnElement.cjs CHANGED Viewed

@@ -33,6 +33,8 @@ function getStyleOfAnElement(element) {
     "right",
     "bottom",
     "text-overflow",
+    // allows seeing the text from CMS field as-is
+    "text-transform",
     "margin",
     "margin-block-end",
     "margin-block-start",

package/dist/modern/visualBuilder/utils/getStyleOfAnElement.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/utils/getStyleOfAnElement.ts"],"sourcesContent":["/*\n Retrieves the computed style of an HTML element.\n \n @param element - The HTML element to retrieve the style from.\n * @returns An object representing the computed style of the element.\n */\nexport default function getStyleOfAnElement(element: HTMLElement): {\n [key: string]: string;\n} {\n const styleSheetDeclaration = window.getComputedStyle(element);\n const styleSheetArray = Array.from(styleSheetDeclaration);\n\n const FILTER_STYLES = [\n \"position\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n \"text-overflow\",\n \"margin\",\n \"margin-block-end\",\n \"margin-block-start\",\n \"margin-inline-end\",\n \"margin-inline-start\",\n \"margin-left\",\n \"margin-right\",\n \"margin-top\",\n \"margin-bottom\",\n \"-webkit-user-modify\",\n \"cursor\",\n ];\n\n const styles: { [key: string]: string } = {};\n styleSheetArray.forEach((style: string) => {\n if (!FILTER_STYLES.includes(style)) {\n const styleValue = styleSheetDeclaration.getPropertyValue(style);\n styles[style] = styleValue;\n }\n });\n\n return styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMe,SAAR,oBAAqC,SAE1C;AACE,QAAM,wBAAwB,OAAO,iBAAiB,OAAO;AAC7D,QAAM,kBAAkB,MAAM,KAAK,qBAAqB;AAExD,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAoC,CAAC;AAC3C,kBAAgB,QAAQ,CAAC,UAAkB;AACvC,QAAI,CAAC,cAAc,SAAS,KAAK,GAAG;AAChC,YAAM,aAAa,sBAAsB,iBAAiB,KAAK;AAC/D,aAAO,KAAK,IAAI;AAAA,IACpB;AAAA,EACJ,CAAC;AAED,SAAO;AACX;","names":[]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/utils/getStyleOfAnElement.ts"],"sourcesContent":["/*\n Retrieves the computed style of an HTML element.\n \n @param element - The HTML element to retrieve the style from.\n * @returns An object representing the computed style of the element.\n */\nexport default function getStyleOfAnElement(element: HTMLElement): {\n [key: string]: string;\n} {\n const styleSheetDeclaration = window.getComputedStyle(element);\n const styleSheetArray = Array.from(styleSheetDeclaration);\n\n const FILTER_STYLES = [\n \"position\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n \"text-overflow\",\n // allows seeing the text from CMS field as-is\n \"text-transform\",\n \"margin\",\n \"margin-block-end\",\n \"margin-block-start\",\n \"margin-inline-end\",\n \"margin-inline-start\",\n \"margin-left\",\n \"margin-right\",\n \"margin-top\",\n \"margin-bottom\",\n \"-webkit-user-modify\",\n \"cursor\",\n ];\n\n const styles: { [key: string]: string } = {};\n styleSheetArray.forEach((style: string) => {\n if (!FILTER_STYLES.includes(style)) {\n const styleValue = styleSheetDeclaration.getPropertyValue(style);\n styles[style] = styleValue;\n }\n });\n\n return styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMe,SAAR,oBAAqC,SAE1C;AACE,QAAM,wBAAwB,OAAO,iBAAiB,OAAO;AAC7D,QAAM,kBAAkB,MAAM,KAAK,qBAAqB;AAExD,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAoC,CAAC;AAC3C,kBAAgB,QAAQ,CAAC,UAAkB;AACvC,QAAI,CAAC,cAAc,SAAS,KAAK,GAAG;AAChC,YAAM,aAAa,sBAAsB,iBAAiB,KAAK;AAC/D,aAAO,KAAK,IAAI;AAAA,IACpB;AAAA,EACJ,CAAC;AAED,SAAO;AACX;","names":[]}

package/dist/modern/visualBuilder/utils/getStyleOfAnElement.js CHANGED Viewed

@@ -11,6 +11,8 @@ function getStyleOfAnElement(element) {
     "right",
     "bottom",
     "text-overflow",
+    // allows seeing the text from CMS field as-is
+    "text-transform",
     "margin",
     "margin-block-end",
     "margin-block-start",

package/dist/modern/visualBuilder/utils/getStyleOfAnElement.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/utils/getStyleOfAnElement.ts"],"sourcesContent":["/*\n Retrieves the computed style of an HTML element.\n \n @param element - The HTML element to retrieve the style from.\n * @returns An object representing the computed style of the element.\n */\nexport default function getStyleOfAnElement(element: HTMLElement): {\n [key: string]: string;\n} {\n const styleSheetDeclaration = window.getComputedStyle(element);\n const styleSheetArray = Array.from(styleSheetDeclaration);\n\n const FILTER_STYLES = [\n \"position\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n \"text-overflow\",\n \"margin\",\n \"margin-block-end\",\n \"margin-block-start\",\n \"margin-inline-end\",\n \"margin-inline-start\",\n \"margin-left\",\n \"margin-right\",\n \"margin-top\",\n \"margin-bottom\",\n \"-webkit-user-modify\",\n \"cursor\",\n ];\n\n const styles: { [key: string]: string } = {};\n styleSheetArray.forEach((style: string) => {\n if (!FILTER_STYLES.includes(style)) {\n const styleValue = styleSheetDeclaration.getPropertyValue(style);\n styles[style] = styleValue;\n }\n });\n\n return styles;\n}\n"],"mappings":";;;AAMe,SAAR,oBAAqC,SAE1C;AACE,QAAM,wBAAwB,OAAO,iBAAiB,OAAO;AAC7D,QAAM,kBAAkB,MAAM,KAAK,qBAAqB;AAExD,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAoC,CAAC;AAC3C,kBAAgB,QAAQ,CAAC,UAAkB;AACvC,QAAI,CAAC,cAAc,SAAS,KAAK,GAAG;AAChC,YAAM,aAAa,sBAAsB,iBAAiB,KAAK;AAC/D,aAAO,KAAK,IAAI;AAAA,IACpB;AAAA,EACJ,CAAC;AAED,SAAO;AACX;","names":[]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/utils/getStyleOfAnElement.ts"],"sourcesContent":["/*\n Retrieves the computed style of an HTML element.\n \n @param element - The HTML element to retrieve the style from.\n * @returns An object representing the computed style of the element.\n */\nexport default function getStyleOfAnElement(element: HTMLElement): {\n [key: string]: string;\n} {\n const styleSheetDeclaration = window.getComputedStyle(element);\n const styleSheetArray = Array.from(styleSheetDeclaration);\n\n const FILTER_STYLES = [\n \"position\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n \"text-overflow\",\n // allows seeing the text from CMS field as-is\n \"text-transform\",\n \"margin\",\n \"margin-block-end\",\n \"margin-block-start\",\n \"margin-inline-end\",\n \"margin-inline-start\",\n \"margin-left\",\n \"margin-right\",\n \"margin-top\",\n \"margin-bottom\",\n \"-webkit-user-modify\",\n \"cursor\",\n ];\n\n const styles: { [key: string]: string } = {};\n styleSheetArray.forEach((style: string) => {\n if (!FILTER_STYLES.includes(style)) {\n const styleValue = styleSheetDeclaration.getPropertyValue(style);\n styles[style] = styleValue;\n }\n });\n\n return styles;\n}\n"],"mappings":";;;AAMe,SAAR,oBAAqC,SAE1C;AACE,QAAM,wBAAwB,OAAO,iBAAiB,OAAO;AAC7D,QAAM,kBAAkB,MAAM,KAAK,qBAAqB;AAExD,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAoC,CAAC;AAC3C,kBAAgB,QAAQ,CAAC,UAAkB;AACvC,QAAI,CAAC,cAAc,SAAS,KAAK,GAAG;AAChC,YAAM,aAAa,sBAAsB,iBAAiB,KAAK;AAC/D,aAAO,KAAK,IAAI;AAAA,IACpB;AAAA,EACJ,CAAC;AAED,SAAO;AACX;","names":[]}

package/dist/modern/visualBuilder/utils/handleIndividualFields.cjs CHANGED Viewed

@@ -148,8 +148,8 @@ async function handleIndividualFields(eventDetails, elements) {
             editableElement: actualEditableField,
             visualBuilderContainer: visualBuilderContainer2,
             overlayWrapper,
-            resizeObserver,
-            focusedToolbar
+            focusedToolbar,
+            resizeObserver
           });
         }, 200);
         actualEditableField.addEventListener(

package/dist/modern/visualBuilder/utils/handleIndividualFields.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/utils/handleIndividualFields.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"..\";\nimport {\n generatePseudoEditableElement,\n isEllipsisActive,\n} from \"../generators/generatePseudoEditableField\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n} from \"./constants\";\nimport { FieldSchemaMap } from \"./fieldSchemaMap\";\nimport { getFieldData } from \"./getFieldData\";\nimport { getFieldType } from \"./getFieldType\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { isFieldDisabled } from \"./isFieldDisabled\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\nimport {\n handleAddButtonsForMultiple,\n removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\n\n/*\n It handles all the fields based on their data type and its \"multiple\" property.\n * @param eventDetails The event details object that contain cslp and field metadata.\n * @param elements The elements object that contain the visual builder wrapper.\n /\nexport async function handleIndividualFields(\n eventDetails: VisualBuilderCslpEventDetails,\n elements: {\n visualBuilderContainer: HTMLDivElement;\n resizeObserver: ResizeObserver;\n lastEditedField: Element \| null;\n }\n): Promise<void> {\n const { fieldMetadata, editableElement } = eventDetails;\n const { visualBuilderContainer, lastEditedField, resizeObserver } =\n elements;\n const {\n content_type_uid,\n entry_uid,\n locale,\n fieldPath,\n fieldPathWithIndex,\n } = fieldMetadata;\n\n const [fieldSchema, expectedFieldData] = await Promise.all([\n FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath),\n getFieldData(\n { content_type_uid, entry_uid, locale },\n fieldPathWithIndex\n ),\n ]);\n // if value is an array, get the value for the instance\n const expectedFieldInstanceData = Array.isArray(expectedFieldData)\n ? expectedFieldData.at(fieldMetadata.multipleFieldMetadata.index)\n : undefined;\n\n const fieldType = getFieldType(fieldSchema);\n\n const { isDisabled: disabled } = isFieldDisabled(fieldSchema, eventDetails);\n\n editableElement.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n\n if (\n fieldSchema &&\n (fieldSchema?.multiple \|\|\n (fieldSchema?.data_type === \"reference\" &&\n // @ts-ignore\n fieldSchema?.field_metadata.ref_multiple))\n ) {\n if (lastEditedField !== editableElement) {\n const addButtonLabel =\n fieldSchema.data_type === \"blocks\"\n ? // ? `Add ${fieldSchema.display_name ?? \"Modular Block\"}`\n \"Add Section\"\n : undefined;\n\n handleAddButtonsForMultiple(\n eventDetails,\n {\n editableElement: eventDetails.editableElement,\n visualBuilderContainer: visualBuilderContainer,\n resizeObserver: resizeObserver,\n },\n {\n fieldSchema,\n expectedFieldData,\n disabled,\n label: addButtonLabel,\n }\n );\n }\n\n // fields could be handled as they are in a single instance\n if (eventDetails.fieldMetadata.multipleFieldMetadata.index > -1) {\n handleSingleField(\n {\n editableElement,\n visualBuilderContainer,\n resizeObserver: elements.resizeObserver,\n },\n { expectedFieldData: expectedFieldInstanceData, disabled }\n );\n }\n } else {\n handleSingleField(\n {\n editableElement,\n visualBuilderContainer,\n resizeObserver: elements.resizeObserver,\n },\n { expectedFieldData, disabled }\n );\n }\n\n /*\n Handles all the fields based on their data type.\n /\n function handleSingleField(\n elements: {\n editableElement: Element;\n visualBuilderContainer: HTMLDivElement;\n resizeObserver: ResizeObserver;\n },\n config: { expectedFieldData: string; disabled?: boolean }\n ) {\n const { editableElement, visualBuilderContainer } = elements;\n\n if (config.disabled) {\n return;\n }\n\n // title, single single_line, single multi_line, single number\n if (ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {\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 = config.expectedFieldData;\n if (\n textContent !== expectedTextContent \|\|\n isEllipsisActive(editableElement as HTMLElement)\n ) {\n // TODO: Testing will be don in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: config.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(\n \"paste\",\n pasteAsPlainText\n );\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 resizeObserver,\n focusedToolbar,\n });\n }, 200);\n actualEditableField.addEventListener(\n \"input\",\n onInlineElementInput\n );\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 }\n}\n\nexport function cleanIndividualFieldResidual(elements: {\n overlayWrapper: HTMLDivElement;\n visualBuilderContainer: HTMLDivElement \| null;\n focusedToolbar: HTMLDivElement \| null;\n resizeObserver: ResizeObserver;\n}): void {\n const { overlayWrapper, visualBuilderContainer, focusedToolbar } = elements;\n\n removeAddInstanceButtons(\n {\n eventTarget: null,\n visualBuilderContainer: visualBuilderContainer,\n overlayWrapper: overlayWrapper,\n },\n true\n );\n\n const previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (previousSelectedEditableDOM) {\n previousSelectedEditableDOM.removeAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n );\n previousSelectedEditableDOM.removeAttribute(\"contenteditable\");\n previousSelectedEditableDOM.removeEventListener(\n \"input\",\n handleFieldInput\n );\n previousSelectedEditableDOM.removeEventListener(\n \"keydown\",\n handleFieldKeyDown\n );\n\n previousSelectedEditableDOM.removeEventListener(\n \"paste\",\n pasteAsPlainText\n );\n // Note - this happens in two places, 1. hideOverlay and 2. here\n // TODO maybe see all usages of both functions and try to do it in one place\n elements.resizeObserver.unobserve(previousSelectedEditableDOM);\n }\n\n const pseudoEditableElement = visualBuilderContainer?.querySelector(\n \".visual-builder__pseudo-editable-element\"\n );\n if (pseudoEditableElement) {\n elements.resizeObserver.unobserve(pseudoEditableElement);\n pseudoEditableElement.removeEventListener(\"paste\", pasteAsPlainText);\n pseudoEditableElement.remove();\n if (previousSelectedEditableDOM) {\n (previousSelectedEditableDOM as HTMLElement).style.removeProperty(\n \"visibility\"\n );\n }\n }\n\n if (focusedToolbar) {\n focusedToolbar.innerHTML = \"\";\n }\n}\n\nconst pasteAsPlainText = debounce(\n (e: Event) => {\n e.preventDefault();\n const clipboardData = (e as ClipboardEvent).clipboardData;\n document.execCommand(\n \"inserttext\",\n false,\n clipboardData?.getData(\"text/plain\")\n );\n },\n 100,\n { leading: true }\n);\n"],"mappings":"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","names":["elements","editableElement","visualBuilderContainer"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/utils/handleIndividualFields.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"..\";\nimport {\n generatePseudoEditableElement,\n isEllipsisActive,\n} from \"../generators/generatePseudoEditableField\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n} from \"./constants\";\nimport { FieldSchemaMap } from \"./fieldSchemaMap\";\nimport { getFieldData } from \"./getFieldData\";\nimport { getFieldType } from \"./getFieldType\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { isFieldDisabled } from \"./isFieldDisabled\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\nimport {\n handleAddButtonsForMultiple,\n removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\n\n/*\n It handles all the fields based on their data type and its \"multiple\" property.\n * @param eventDetails The event details object that contain cslp and field metadata.\n * @param elements The elements object that contain the visual builder wrapper.\n /\nexport async function handleIndividualFields(\n eventDetails: VisualBuilderCslpEventDetails,\n elements: {\n visualBuilderContainer: HTMLDivElement;\n resizeObserver: ResizeObserver;\n lastEditedField: Element \| null;\n }\n): Promise<void> {\n const { fieldMetadata, editableElement } = eventDetails;\n const { visualBuilderContainer, lastEditedField, resizeObserver } =\n elements;\n const {\n content_type_uid,\n entry_uid,\n locale,\n fieldPath,\n fieldPathWithIndex,\n } = fieldMetadata;\n\n const [fieldSchema, expectedFieldData] = await Promise.all([\n FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath),\n getFieldData(\n { content_type_uid, entry_uid, locale },\n fieldPathWithIndex\n ),\n ]);\n // if value is an array, get the value for the instance\n const expectedFieldInstanceData = Array.isArray(expectedFieldData)\n ? expectedFieldData.at(fieldMetadata.multipleFieldMetadata.index)\n : undefined;\n\n const fieldType = getFieldType(fieldSchema);\n\n const { isDisabled: disabled } = isFieldDisabled(fieldSchema, eventDetails);\n\n editableElement.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n\n if (\n fieldSchema &&\n (fieldSchema?.multiple \|\|\n (fieldSchema?.data_type === \"reference\" &&\n // @ts-ignore\n fieldSchema?.field_metadata.ref_multiple))\n ) {\n if (lastEditedField !== editableElement) {\n const addButtonLabel =\n fieldSchema.data_type === \"blocks\"\n ? // ? `Add ${fieldSchema.display_name ?? \"Modular Block\"}`\n \"Add Section\"\n : undefined;\n\n handleAddButtonsForMultiple(\n eventDetails,\n {\n editableElement: eventDetails.editableElement,\n visualBuilderContainer: visualBuilderContainer,\n resizeObserver: resizeObserver,\n },\n {\n fieldSchema,\n expectedFieldData,\n disabled,\n label: addButtonLabel,\n }\n );\n }\n\n // fields could be handled as they are in a single instance\n if (eventDetails.fieldMetadata.multipleFieldMetadata.index > -1) {\n handleSingleField(\n {\n editableElement,\n visualBuilderContainer,\n resizeObserver: elements.resizeObserver,\n },\n { expectedFieldData: expectedFieldInstanceData, disabled }\n );\n }\n } else {\n handleSingleField(\n {\n editableElement,\n visualBuilderContainer,\n resizeObserver: elements.resizeObserver,\n },\n { expectedFieldData, disabled }\n );\n }\n\n /*\n Handles all the fields based on their data type.\n /\n function handleSingleField(\n elements: {\n editableElement: Element;\n visualBuilderContainer: HTMLDivElement;\n resizeObserver: ResizeObserver;\n },\n config: { expectedFieldData: string; disabled?: boolean }\n ) {\n const { editableElement, visualBuilderContainer } = elements;\n\n if (config.disabled) {\n return;\n }\n\n // title, single single_line, single multi_line, single number\n if (ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {\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 = config.expectedFieldData;\n if (\n textContent !== expectedTextContent \|\|\n isEllipsisActive(editableElement as HTMLElement)\n ) {\n // TODO: Testing will be don in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: config.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(\n \"paste\",\n pasteAsPlainText\n );\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(\n \"input\",\n onInlineElementInput\n );\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 }\n}\n\nexport function cleanIndividualFieldResidual(elements: {\n overlayWrapper: HTMLDivElement;\n visualBuilderContainer: HTMLDivElement \| null;\n focusedToolbar: HTMLDivElement \| null;\n resizeObserver: ResizeObserver;\n}): void {\n const { overlayWrapper, visualBuilderContainer, focusedToolbar } = elements;\n\n removeAddInstanceButtons(\n {\n eventTarget: null,\n visualBuilderContainer: visualBuilderContainer,\n overlayWrapper: overlayWrapper,\n },\n true\n );\n\n const previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (previousSelectedEditableDOM) {\n previousSelectedEditableDOM.removeAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n );\n previousSelectedEditableDOM.removeAttribute(\"contenteditable\");\n previousSelectedEditableDOM.removeEventListener(\n \"input\",\n handleFieldInput\n );\n previousSelectedEditableDOM.removeEventListener(\n \"keydown\",\n handleFieldKeyDown\n );\n\n previousSelectedEditableDOM.removeEventListener(\n \"paste\",\n pasteAsPlainText\n );\n // Note - this happens in two places, 1. hideOverlay and 2. here\n // TODO maybe see all usages of both functions and try to do it in one place\n elements.resizeObserver.unobserve(previousSelectedEditableDOM);\n }\n\n const pseudoEditableElement = visualBuilderContainer?.querySelector(\n \".visual-builder__pseudo-editable-element\"\n );\n if (pseudoEditableElement) {\n elements.resizeObserver.unobserve(pseudoEditableElement);\n pseudoEditableElement.removeEventListener(\"paste\", pasteAsPlainText);\n pseudoEditableElement.remove();\n if (previousSelectedEditableDOM) {\n (previousSelectedEditableDOM as HTMLElement).style.removeProperty(\n \"visibility\"\n );\n }\n }\n\n if (focusedToolbar) {\n focusedToolbar.innerHTML = \"\";\n }\n}\n\nconst pasteAsPlainText = debounce(\n (e: Event) => {\n e.preventDefault();\n const clipboardData = (e as ClipboardEvent).clipboardData;\n document.execCommand(\n \"inserttext\",\n false,\n clipboardData?.getData(\"text/plain\")\n );\n },\n 100,\n { leading: true }\n);\n"],"mappings":"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","names":["elements","editableElement","visualBuilderContainer"]}

package/dist/modern/visualBuilder/utils/handleIndividualFields.js CHANGED Viewed

@@ -134,8 +134,8 @@ async function handleIndividualFields(eventDetails, elements) {
             editableElement: actualEditableField,
             visualBuilderContainer: visualBuilderContainer2,
             overlayWrapper,
-            resizeObserver,
-            focusedToolbar
+            focusedToolbar,
+            resizeObserver
           });
         }, 200);
         actualEditableField.addEventListener(

package/dist/modern/visualBuilder/utils/handleIndividualFields.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/utils/handleIndividualFields.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"..\";\nimport {\n generatePseudoEditableElement,\n isEllipsisActive,\n} from \"../generators/generatePseudoEditableField\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n} from \"./constants\";\nimport { FieldSchemaMap } from \"./fieldSchemaMap\";\nimport { getFieldData } from \"./getFieldData\";\nimport { getFieldType } from \"./getFieldType\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { isFieldDisabled } from \"./isFieldDisabled\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\nimport {\n handleAddButtonsForMultiple,\n removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\n\n/*\n It handles all the fields based on their data type and its \"multiple\" property.\n * @param eventDetails The event details object that contain cslp and field metadata.\n * @param elements The elements object that contain the visual builder wrapper.\n /\nexport async function handleIndividualFields(\n eventDetails: VisualBuilderCslpEventDetails,\n elements: {\n visualBuilderContainer: HTMLDivElement;\n resizeObserver: ResizeObserver;\n lastEditedField: Element \| null;\n }\n): Promise<void> {\n const { fieldMetadata, editableElement } = eventDetails;\n const { visualBuilderContainer, lastEditedField, resizeObserver } =\n elements;\n const {\n content_type_uid,\n entry_uid,\n locale,\n fieldPath,\n fieldPathWithIndex,\n } = fieldMetadata;\n\n const [fieldSchema, expectedFieldData] = await Promise.all([\n FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath),\n getFieldData(\n { content_type_uid, entry_uid, locale },\n fieldPathWithIndex\n ),\n ]);\n // if value is an array, get the value for the instance\n const expectedFieldInstanceData = Array.isArray(expectedFieldData)\n ? expectedFieldData.at(fieldMetadata.multipleFieldMetadata.index)\n : undefined;\n\n const fieldType = getFieldType(fieldSchema);\n\n const { isDisabled: disabled } = isFieldDisabled(fieldSchema, eventDetails);\n\n editableElement.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n\n if (\n fieldSchema &&\n (fieldSchema?.multiple \|\|\n (fieldSchema?.data_type === \"reference\" &&\n // @ts-ignore\n fieldSchema?.field_metadata.ref_multiple))\n ) {\n if (lastEditedField !== editableElement) {\n const addButtonLabel =\n fieldSchema.data_type === \"blocks\"\n ? // ? `Add ${fieldSchema.display_name ?? \"Modular Block\"}`\n \"Add Section\"\n : undefined;\n\n handleAddButtonsForMultiple(\n eventDetails,\n {\n editableElement: eventDetails.editableElement,\n visualBuilderContainer: visualBuilderContainer,\n resizeObserver: resizeObserver,\n },\n {\n fieldSchema,\n expectedFieldData,\n disabled,\n label: addButtonLabel,\n }\n );\n }\n\n // fields could be handled as they are in a single instance\n if (eventDetails.fieldMetadata.multipleFieldMetadata.index > -1) {\n handleSingleField(\n {\n editableElement,\n visualBuilderContainer,\n resizeObserver: elements.resizeObserver,\n },\n { expectedFieldData: expectedFieldInstanceData, disabled }\n );\n }\n } else {\n handleSingleField(\n {\n editableElement,\n visualBuilderContainer,\n resizeObserver: elements.resizeObserver,\n },\n { expectedFieldData, disabled }\n );\n }\n\n /*\n Handles all the fields based on their data type.\n /\n function handleSingleField(\n elements: {\n editableElement: Element;\n visualBuilderContainer: HTMLDivElement;\n resizeObserver: ResizeObserver;\n },\n config: { expectedFieldData: string; disabled?: boolean }\n ) {\n const { editableElement, visualBuilderContainer } = elements;\n\n if (config.disabled) {\n return;\n }\n\n // title, single single_line, single multi_line, single number\n if (ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {\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 = config.expectedFieldData;\n if (\n textContent !== expectedTextContent \|\|\n isEllipsisActive(editableElement as HTMLElement)\n ) {\n // TODO: Testing will be don in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: config.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(\n \"paste\",\n pasteAsPlainText\n );\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 resizeObserver,\n focusedToolbar,\n });\n }, 200);\n actualEditableField.addEventListener(\n \"input\",\n onInlineElementInput\n );\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 }\n}\n\nexport function cleanIndividualFieldResidual(elements: {\n overlayWrapper: HTMLDivElement;\n visualBuilderContainer: HTMLDivElement \| null;\n focusedToolbar: HTMLDivElement \| null;\n resizeObserver: ResizeObserver;\n}): void {\n const { overlayWrapper, visualBuilderContainer, focusedToolbar } = elements;\n\n removeAddInstanceButtons(\n {\n eventTarget: null,\n visualBuilderContainer: visualBuilderContainer,\n overlayWrapper: overlayWrapper,\n },\n true\n );\n\n const previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (previousSelectedEditableDOM) {\n previousSelectedEditableDOM.removeAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n );\n previousSelectedEditableDOM.removeAttribute(\"contenteditable\");\n previousSelectedEditableDOM.removeEventListener(\n \"input\",\n handleFieldInput\n );\n previousSelectedEditableDOM.removeEventListener(\n \"keydown\",\n handleFieldKeyDown\n );\n\n previousSelectedEditableDOM.removeEventListener(\n \"paste\",\n pasteAsPlainText\n );\n // Note - this happens in two places, 1. hideOverlay and 2. here\n // TODO maybe see all usages of both functions and try to do it in one place\n elements.resizeObserver.unobserve(previousSelectedEditableDOM);\n }\n\n const pseudoEditableElement = visualBuilderContainer?.querySelector(\n \".visual-builder__pseudo-editable-element\"\n );\n if (pseudoEditableElement) {\n elements.resizeObserver.unobserve(pseudoEditableElement);\n pseudoEditableElement.removeEventListener(\"paste\", pasteAsPlainText);\n pseudoEditableElement.remove();\n if (previousSelectedEditableDOM) {\n (previousSelectedEditableDOM as HTMLElement).style.removeProperty(\n \"visibility\"\n );\n }\n }\n\n if (focusedToolbar) {\n focusedToolbar.innerHTML = \"\";\n }\n}\n\nconst pasteAsPlainText = debounce(\n (e: Event) => {\n e.preventDefault();\n const clipboardData = (e as ClipboardEvent).clipboardData;\n document.execCommand(\n \"inserttext\",\n false,\n clipboardData?.getData(\"text/plain\")\n );\n },\n 100,\n { leading: true }\n);\n"],"mappings":"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","names":["elements","editableElement","visualBuilderContainer"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/utils/handleIndividualFields.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"..\";\nimport {\n generatePseudoEditableElement,\n isEllipsisActive,\n} from \"../generators/generatePseudoEditableField\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n} from \"./constants\";\nimport { FieldSchemaMap } from \"./fieldSchemaMap\";\nimport { getFieldData } from \"./getFieldData\";\nimport { getFieldType } from \"./getFieldType\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { isFieldDisabled } from \"./isFieldDisabled\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\nimport {\n handleAddButtonsForMultiple,\n removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\n\n/*\n It handles all the fields based on their data type and its \"multiple\" property.\n * @param eventDetails The event details object that contain cslp and field metadata.\n * @param elements The elements object that contain the visual builder wrapper.\n /\nexport async function handleIndividualFields(\n eventDetails: VisualBuilderCslpEventDetails,\n elements: {\n visualBuilderContainer: HTMLDivElement;\n resizeObserver: ResizeObserver;\n lastEditedField: Element \| null;\n }\n): Promise<void> {\n const { fieldMetadata, editableElement } = eventDetails;\n const { visualBuilderContainer, lastEditedField, resizeObserver } =\n elements;\n const {\n content_type_uid,\n entry_uid,\n locale,\n fieldPath,\n fieldPathWithIndex,\n } = fieldMetadata;\n\n const [fieldSchema, expectedFieldData] = await Promise.all([\n FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath),\n getFieldData(\n { content_type_uid, entry_uid, locale },\n fieldPathWithIndex\n ),\n ]);\n // if value is an array, get the value for the instance\n const expectedFieldInstanceData = Array.isArray(expectedFieldData)\n ? expectedFieldData.at(fieldMetadata.multipleFieldMetadata.index)\n : undefined;\n\n const fieldType = getFieldType(fieldSchema);\n\n const { isDisabled: disabled } = isFieldDisabled(fieldSchema, eventDetails);\n\n editableElement.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n\n if (\n fieldSchema &&\n (fieldSchema?.multiple \|\|\n (fieldSchema?.data_type === \"reference\" &&\n // @ts-ignore\n fieldSchema?.field_metadata.ref_multiple))\n ) {\n if (lastEditedField !== editableElement) {\n const addButtonLabel =\n fieldSchema.data_type === \"blocks\"\n ? // ? `Add ${fieldSchema.display_name ?? \"Modular Block\"}`\n \"Add Section\"\n : undefined;\n\n handleAddButtonsForMultiple(\n eventDetails,\n {\n editableElement: eventDetails.editableElement,\n visualBuilderContainer: visualBuilderContainer,\n resizeObserver: resizeObserver,\n },\n {\n fieldSchema,\n expectedFieldData,\n disabled,\n label: addButtonLabel,\n }\n );\n }\n\n // fields could be handled as they are in a single instance\n if (eventDetails.fieldMetadata.multipleFieldMetadata.index > -1) {\n handleSingleField(\n {\n editableElement,\n visualBuilderContainer,\n resizeObserver: elements.resizeObserver,\n },\n { expectedFieldData: expectedFieldInstanceData, disabled }\n );\n }\n } else {\n handleSingleField(\n {\n editableElement,\n visualBuilderContainer,\n resizeObserver: elements.resizeObserver,\n },\n { expectedFieldData, disabled }\n );\n }\n\n /*\n Handles all the fields based on their data type.\n /\n function handleSingleField(\n elements: {\n editableElement: Element;\n visualBuilderContainer: HTMLDivElement;\n resizeObserver: ResizeObserver;\n },\n config: { expectedFieldData: string; disabled?: boolean }\n ) {\n const { editableElement, visualBuilderContainer } = elements;\n\n if (config.disabled) {\n return;\n }\n\n // title, single single_line, single multi_line, single number\n if (ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {\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 = config.expectedFieldData;\n if (\n textContent !== expectedTextContent \|\|\n isEllipsisActive(editableElement as HTMLElement)\n ) {\n // TODO: Testing will be don in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: config.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(\n \"paste\",\n pasteAsPlainText\n );\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(\n \"input\",\n onInlineElementInput\n );\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 }\n}\n\nexport function cleanIndividualFieldResidual(elements: {\n overlayWrapper: HTMLDivElement;\n visualBuilderContainer: HTMLDivElement \| null;\n focusedToolbar: HTMLDivElement \| null;\n resizeObserver: ResizeObserver;\n}): void {\n const { overlayWrapper, visualBuilderContainer, focusedToolbar } = elements;\n\n removeAddInstanceButtons(\n {\n eventTarget: null,\n visualBuilderContainer: visualBuilderContainer,\n overlayWrapper: overlayWrapper,\n },\n true\n );\n\n const previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (previousSelectedEditableDOM) {\n previousSelectedEditableDOM.removeAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n );\n previousSelectedEditableDOM.removeAttribute(\"contenteditable\");\n previousSelectedEditableDOM.removeEventListener(\n \"input\",\n handleFieldInput\n );\n previousSelectedEditableDOM.removeEventListener(\n \"keydown\",\n handleFieldKeyDown\n );\n\n previousSelectedEditableDOM.removeEventListener(\n \"paste\",\n pasteAsPlainText\n );\n // Note - this happens in two places, 1. hideOverlay and 2. here\n // TODO maybe see all usages of both functions and try to do it in one place\n elements.resizeObserver.unobserve(previousSelectedEditableDOM);\n }\n\n const pseudoEditableElement = visualBuilderContainer?.querySelector(\n \".visual-builder__pseudo-editable-element\"\n );\n if (pseudoEditableElement) {\n elements.resizeObserver.unobserve(pseudoEditableElement);\n pseudoEditableElement.removeEventListener(\"paste\", pasteAsPlainText);\n pseudoEditableElement.remove();\n if (previousSelectedEditableDOM) {\n (previousSelectedEditableDOM as HTMLElement).style.removeProperty(\n \"visibility\"\n );\n }\n }\n\n if (focusedToolbar) {\n focusedToolbar.innerHTML = \"\";\n }\n}\n\nconst pasteAsPlainText = debounce(\n (e: Event) => {\n e.preventDefault();\n const clipboardData = (e as ClipboardEvent).clipboardData;\n document.execCommand(\n \"inserttext\",\n false,\n clipboardData?.getData(\"text/plain\")\n );\n },\n 100,\n { leading: true }\n);\n"],"mappings":"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","names":["elements","editableElement","visualBuilderContainer"]}

package/dist/modern/visualBuilder/utils/updateFocussedState.cjs CHANGED Viewed

@@ -41,7 +41,7 @@ var import_generateOverlay = require("../generators/generateOverlay.cjs");
 var import_mouseHover = require("../listeners/mouseHover.cjs");
 var import_constants = require("./constants.cjs");
 var import_getChildrenDirection = __toESM(require("./getChildrenDirection.cjs"), 1);
-var import_getStyleOfAnElement = __toESM(require("./getStyleOfAnElement.cjs"), 1);
+var import_getPsuedoEditableStylesElement = require("./getPsuedoEditableStylesElement.cjs");
 function positionToolbar({
   focusedToolbar,
   selectedElementDimension
@@ -51,7 +51,10 @@ function positionToolbar({
     const distanceFromTop = selectedElementDimension.top + window.scrollY - import_constants.TOOLBAR_EDGE_BUFFER;
     const adjustedDistanceFromTop = selectedElementDimension.top + window.scrollY < import_constants.TOP_EDGE_BUFFER ? distanceFromTop + selectedElementDimension.height + import_constants.TOP_EDGE_BUFFER : distanceFromTop;
     const distanceFromLeft = selectedElementDimension.left - import_constants.LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;
-    const adjustedDistanceFromLeft = Math.max(distanceFromLeft, import_constants.TOOLBAR_EDGE_BUFFER);
+    const adjustedDistanceFromLeft = Math.max(
+      distanceFromLeft,
+      import_constants.TOOLBAR_EDGE_BUFFER
+    );
     if (targetElementRightEdgeOffset < import_constants.RIGHT_EDGE_BUFFER && (focusedToolbar.style.justifyContent !== "flex-end" || focusedToolbar.style.left !== `${selectedElementDimension.right + import_constants.LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)) {
       focusedToolbar.style.justifyContent = "flex-end";
       focusedToolbar.style.left = `${selectedElementDimension.right + import_constants.LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;
@@ -71,17 +74,35 @@ function updateFocussedState({
   focusedToolbar,
   resizeObserver
 }) {
-  const previousSelectedEditableDOM = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  let previousSelectedEditableDOM = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
   if (!visualBuilderContainer || !editableElement || !previousSelectedEditableDOM || !overlayWrapper) {
     return;
   }
+  const previousSelectedElementCslp = previousSelectedEditableDOM?.getAttribute("data-cslp");
+  const newPreviousSelectedElement = document.querySelector(
+    `[data-cslp="${previousSelectedElementCslp}"]`
+  );
+  if (!newPreviousSelectedElement && resizeObserver) {
+    (0, import_generateOverlay.hideFocusOverlay)({
+      visualBuilderOverlayWrapper: overlayWrapper,
+      focusedToolbar,
+      visualBuilderContainer,
+      resizeObserver,
+      noTrigger: true
+    });
+    return;
+  }
+  if (newPreviousSelectedElement !== previousSelectedEditableDOM) {
+    previousSelectedEditableDOM = newPreviousSelectedElement;
+    import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = previousSelectedEditableDOM;
+  }
   (0, import_mouseHover.hideHoverOutline)(visualBuilderContainer);
   (0, import_generateOverlay.addFocusOverlay)(previousSelectedEditableDOM, overlayWrapper);
   const psuedoEditableElement = visualBuilderContainer.querySelector(
     ".visual-builder__pseudo-editable-element"
   );
   if (psuedoEditableElement) {
-    const styles = (0, import_getStyleOfAnElement.default)(editableElement);
+    const styles = (0, import_getPsuedoEditableStylesElement.getPsuedoEditableElementStyles)(editableElement);
     const styleString = Object.entries(styles).reduce(
       (acc, [key, value]) => {
         return `${acc}${key}:${value};`;
@@ -90,17 +111,13 @@ function updateFocussedState({
     );
     psuedoEditableElement.style.cssText = styleString;
     psuedoEditableElement.style.visibility = "visible";
-    psuedoEditableElement.style.position = "absolute";
-    psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;
-    psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;
   }
   const cslp = editableElement?.getAttribute("data-cslp") || "";
   const fieldMetadata = (0, import_cslp.extractDetailsFromCslp)(cslp);
   const targetElementDimension = editableElement.getBoundingClientRect();
   if (targetElementDimension.width && targetElementDimension.height) {
     const selectedElement = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
-    if (!selectedElement)
-      return;
+    if (!selectedElement) return;
     positionToolbar({
       focusedToolbar,
       selectedElementDimension: selectedElement.getBoundingClientRect()
@@ -130,11 +147,28 @@ function updateFocussedState({
     }
   }
 }
-function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visualBuilderContainer) {
+function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visualBuilderContainer, resizeObserver) {
   if (!focusOverlayWrapper) return;
-  const selectedElement = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
-  if (!selectedElement)
+  let selectedElement = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  if (!selectedElement) return;
+  const selectedElementCslp = selectedElement?.getAttribute("data-cslp");
+  const newSelectedElement = document.querySelector(
+    `[data-cslp="${selectedElementCslp}"]`
+  );
+  if (!newSelectedElement && resizeObserver) {
+    (0, import_generateOverlay.hideFocusOverlay)({
+      visualBuilderOverlayWrapper: focusOverlayWrapper,
+      focusedToolbar,
+      visualBuilderContainer,
+      resizeObserver,
+      noTrigger: true
+    });
     return;
+  }
+  if (newSelectedElement !== selectedElement) {
+    selectedElement = newSelectedElement;
+    import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = selectedElement;
+  }
   const selectedElementDimension = selectedElement.getBoundingClientRect();
   const focusOutline = focusOverlayWrapper.querySelector(
     ".visual-builder__overlay--outline"
@@ -216,19 +250,16 @@ function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visu
       ".visual-builder__pseudo-editable-element"
     );
     const editableElement = selectedElement;
-    const styles = (0, import_getStyleOfAnElement.default)(editableElement);
+    const styles = (0, import_getPsuedoEditableStylesElement.getPsuedoEditableElementStyles)(editableElement);
     const styleString = Object.entries(styles).reduce(
       (acc, [key, value]) => {
         return `${acc}${key}:${value};`;
       },
       ""
     );
-    if (psuedoEditableElement && (psuedoEditableElement.style.cssText !== styleString || psuedoEditableElement.style.visibility !== "visible" || psuedoEditableElement.style.position !== "absolute" || psuedoEditableElement.style.top !== `${editableElement.offsetTop}px` || psuedoEditableElement.style.left !== `${editableElement.offsetLeft}px`)) {
+    if (psuedoEditableElement && (psuedoEditableElement.style.cssText !== styleString || psuedoEditableElement.style.visibility !== "visible")) {
       psuedoEditableElement.style.cssText = styleString;
       psuedoEditableElement.style.visibility = "visible";
-      psuedoEditableElement.style.position = "absolute";
-      psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;
-      psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;
     }
   }
 }

package/dist/modern/visualBuilder/utils/updateFocussedState.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport { addFocusOverlay } from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport { LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX, RIGHT_EDGE_BUFFER, TOOLBAR_EDGE_BUFFER, TOP_EDGE_BUFFER } from \"./constants\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\ninterface ToolbarPositionParams {\n focusedToolbar: HTMLElement \| null;\n selectedElementDimension: DOMRect;\n}\n/*\n Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n/\nfunction positionToolbar({\n focusedToolbar,\n selectedElementDimension,\n}: ToolbarPositionParams): void {\n if (focusedToolbar) {\n const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop = selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n // Adjust top position based on the available space\n const adjustedDistanceFromTop = \n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft = selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(distanceFromLeft, TOOLBAR_EDGE_BUFFER);\n\n // Handle right-edge overflow\n if (\n targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n (focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !== `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n ) {\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n } else if (\n focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n // Adjust top position if necessary\n if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n}\n\n/\n This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n /\nexport function updateFocussedState({\n editableElement,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n}: {\n editableElement: HTMLElement \| null;\n visualBuilderContainer: HTMLDivElement \| null;\n overlayWrapper: HTMLDivElement \| null;\n focusedToolbar: HTMLDivElement \| null;\n resizeObserver: ResizeObserver;\n}): void {\n const previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n !visualBuilderContainer \|\|\n !editableElement \|\|\n !previousSelectedEditableDOM \|\|\n !overlayWrapper\n ) {\n return;\n }\n hideHoverOutline(visualBuilderContainer);\n addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);\n\n // update psuedo editable element if present\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n if (psuedoEditableElement) {\n const styles = getStyleOfAnElement(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n psuedoEditableElement.style.cssText = styleString;\n psuedoEditableElement.style.visibility = \"visible\";\n psuedoEditableElement.style.position = \"absolute\";\n psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;\n psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;\n }\n\n const cslp = editableElement?.getAttribute(\"data-cslp\") \|\| \"\";\n const fieldMetadata = extractDetailsFromCslp(cslp);\n\n const targetElementDimension = editableElement.getBoundingClientRect();\n if (targetElementDimension.width && targetElementDimension.height) {\n const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;\n\n if(!selectedElement)\n return;\n // position the focused tool bar\n positionToolbar({\n focusedToolbar: focusedToolbar,\n selectedElementDimension: selectedElement.getBoundingClientRect(),\n });\n }\n\n // re-add multiple instance add buttons\n const buttons = getAddInstanceButtons(visualBuilderContainer);\n const parentCslpValue =\n fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n if (\n buttons &&\n parentCslpValue &&\n buttons.length > 1 &&\n buttons[0] &&\n buttons[1]\n ) {\n const [previousButton, nextButton] = buttons;\n const direction = getChildrenDirection(\n editableElement,\n parentCslpValue\n );\n const targetDOMDimension = editableElement.getBoundingClientRect();\n\n if (direction === \"horizontal\") {\n const middleHeight =\n targetDOMDimension.top +\n (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n window.scrollY;\n previousButton.style.left = `${targetDOMDimension.left}px`;\n previousButton.style.top = `${middleHeight}px`;\n\n nextButton.style.left = `${targetDOMDimension.right}px`;\n nextButton.style.top = `${middleHeight}px`;\n } else if (direction === \"vertical\") {\n const middleWidth =\n targetDOMDimension.left +\n (targetDOMDimension.right - targetDOMDimension.left) / 2;\n previousButton.style.left = `${middleWidth}px`;\n previousButton.style.top = `${\n targetDOMDimension.top + window.scrollY\n }px`;\n\n nextButton.style.left = `${middleWidth}px`;\n nextButton.style.top = `${\n targetDOMDimension.bottom + window.scrollY\n }px`;\n }\n }\n}\n\n/\n This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n /\nexport function updateFocussedStateOnMutation(\n focusOverlayWrapper: HTMLDivElement \| null,\n focusedToolbar: HTMLDivElement \| null,\n visualBuilderContainer: HTMLDivElement \| null,\n) {\n \n if (!focusOverlayWrapper) return;\n\n const selectedElement = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;\n\n if(!selectedElement)\n return;\n\n const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n /\n Update the focus outline if it exists.\n /\n const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--outline\"\n );\n\n if (focusOutline) {\n const focusOutlineDimension = focusOutline.getBoundingClientRect();\n if(!isSameRect(selectedElementDimension, focusOutlineDimension)){\n focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n focusOutline.style.left = `${selectedElementDimension.left}px`;\n focusOutline.style.width = `${selectedElementDimension.width}px`;\n focusOutline.style.height = `${selectedElementDimension.height}px`;\n }\n }\n\n /\n Update the focus overlays if they exists.\n /\n\n const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--top\"\n );\n const focusedOverlayBottom = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--bottom\"\n );\n const focusedOverlayLeft = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--left\"\n );\n const focusedOverlayRight = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--right\"\n );\n\n const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n if (focusedOverlayTop) {\n const dimension = focusedOverlayTop.getBoundingClientRect();\n if(dimension.height !== distanceFromTop) {\n focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n }\n }\n\n if (focusedOverlayBottom) {\n const dimension = focusedOverlayBottom.getBoundingClientRect();\n if(dimension.top !== selectedElementDimension.bottom \|\|\n dimension.height !== window.document.body.scrollHeight - selectedElementDimension.bottom - window.scrollY) {\n focusedOverlayBottom.style.top = `${\n selectedElementDimension.bottom + window.scrollY\n }px`;\n focusedOverlayBottom.style.height = `${\n window.document.body.scrollHeight -\n selectedElementDimension.bottom -\n window.scrollY\n }px`;\n }\n }\n\n if (focusedOverlayLeft) {\n const dimension = focusedOverlayLeft.getBoundingClientRect();\n if(dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !== selectedElementDimension.left) {\n focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n }\n }\n\n if (focusedOverlayRight) {\n const dimension = focusedOverlayRight.getBoundingClientRect();\n if(dimension.left !== selectedElementDimension.right \|\|\n dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !== document.documentElement.clientWidth - selectedElementDimension.right) {\n focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n focusedOverlayRight.style.top = `${distanceFromTop}px`;\n focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayRight.style.width = `${\n document.documentElement.clientWidth - selectedElementDimension.right\n }px`;\n }\n }\n\n /\n Update the focus toolbar if it exists.\n /\n\n if (focusedToolbar) {\n const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop =\n selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n const adjustedDistanceFromTop =\n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop + selectedElementDimension.height + TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft =\n selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(\n distanceFromLeft,\n TOOLBAR_EDGE_BUFFER\n );\n\n if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n ( focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !== `${\n selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px` )\n ) {\n // Overflow / Cutoff on right edge\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${\n selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px`;\n } else if (focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n if(focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`){\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n\n /\n Update the pseudo-editable if it exists.\n */\n\n if (visualBuilderContainer) {\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n const editableElement = selectedElement as HTMLElement;\n const styles = getStyleOfAnElement(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n if (psuedoEditableElement &&\n (\n psuedoEditableElement.style.cssText !== styleString \|\|\n psuedoEditableElement.style.visibility !== \"visible\" \|\|\n psuedoEditableElement.style.position !== \"absolute\" \|\|\n psuedoEditableElement.style.top !== `${editableElement.offsetTop}px` \|\|\n psuedoEditableElement.style.left !== `${editableElement.offsetLeft}px`\n )\n ) {\n psuedoEditableElement.style.cssText = styleString;\n psuedoEditableElement.style.visibility = \"visible\";\n psuedoEditableElement.style.position = \"absolute\";\n psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;\n psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;\n }\n }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n return (\n rect1.top === rect2.top &&\n rect1.left === rect2.left &&\n rect1.width === rect2.width &&\n rect1.height === rect2.height\n );\n}"],"mappings":"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","names":["getStyleOfAnElement","getChildrenDirection","distanceFromTop"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport {\n addFocusOverlay,\n hideFocusOverlay,\n} from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport {\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n RIGHT_EDGE_BUFFER,\n TOOLBAR_EDGE_BUFFER,\n TOP_EDGE_BUFFER,\n} from \"./constants\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { getPsuedoEditableElementStyles } from \"./getPsuedoEditableStylesElement\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\ninterface ToolbarPositionParams {\n focusedToolbar: HTMLElement \| null;\n selectedElementDimension: DOMRect;\n}\n/*\n Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n /\nfunction positionToolbar({\n focusedToolbar,\n selectedElementDimension,\n}: ToolbarPositionParams): void {\n if (focusedToolbar) {\n const targetElementRightEdgeOffset =\n window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop =\n selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n // Adjust top position based on the available space\n const adjustedDistanceFromTop =\n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop +\n selectedElementDimension.height +\n TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft =\n selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(\n distanceFromLeft,\n TOOLBAR_EDGE_BUFFER\n );\n\n // Handle right-edge overflow\n if (\n targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n (focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !==\n `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n ) {\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n } else if (\n focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n // Adjust top position if necessary\n if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n}\n\n/\n This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n /\nexport function updateFocussedState({\n editableElement,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n}: {\n editableElement: HTMLElement \| null;\n visualBuilderContainer: HTMLDivElement \| null;\n overlayWrapper: HTMLDivElement \| null;\n focusedToolbar: HTMLDivElement \| null;\n resizeObserver: ResizeObserver \| null;\n}): void {\n let previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n !visualBuilderContainer \|\|\n !editableElement \|\|\n !previousSelectedEditableDOM \|\|\n !overlayWrapper\n ) {\n return;\n }\n\n const previousSelectedElementCslp =\n previousSelectedEditableDOM?.getAttribute(\"data-cslp\");\n const newPreviousSelectedElement = document.querySelector(\n `[data-cslp=\"${previousSelectedElementCslp}\"]`\n );\n if (!newPreviousSelectedElement && resizeObserver) {\n hideFocusOverlay({\n visualBuilderOverlayWrapper: overlayWrapper,\n focusedToolbar,\n visualBuilderContainer,\n resizeObserver,\n noTrigger: true,\n });\n return;\n }\n if (newPreviousSelectedElement !== previousSelectedEditableDOM) {\n previousSelectedEditableDOM = newPreviousSelectedElement as HTMLElement;\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n previousSelectedEditableDOM;\n }\n\n hideHoverOutline(visualBuilderContainer);\n addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);\n\n // update psuedo editable element if present\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n if (psuedoEditableElement) {\n const styles = getPsuedoEditableElementStyles(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n psuedoEditableElement.style.cssText = styleString;\n // since we are copying styles from the editableEl\n // it will now have a visibility of hidden, which we added\n // when creating the pseudo editable element, so make the psuedo visible\n psuedoEditableElement.style.visibility = \"visible\";\n }\n\n const cslp = editableElement?.getAttribute(\"data-cslp\") \|\| \"\";\n const fieldMetadata = extractDetailsFromCslp(cslp);\n\n const targetElementDimension = editableElement.getBoundingClientRect();\n if (targetElementDimension.width && targetElementDimension.height) {\n const selectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n\n if (!selectedElement) return;\n // position the focused tool bar\n positionToolbar({\n focusedToolbar: focusedToolbar,\n selectedElementDimension: selectedElement.getBoundingClientRect(),\n });\n }\n\n // re-add multiple instance add buttons\n const buttons = getAddInstanceButtons(visualBuilderContainer);\n const parentCslpValue =\n fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n if (\n buttons &&\n parentCslpValue &&\n buttons.length > 1 &&\n buttons[0] &&\n buttons[1]\n ) {\n const [previousButton, nextButton] = buttons;\n const direction = getChildrenDirection(\n editableElement,\n parentCslpValue\n );\n const targetDOMDimension = editableElement.getBoundingClientRect();\n\n if (direction === \"horizontal\") {\n const middleHeight =\n targetDOMDimension.top +\n (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n window.scrollY;\n previousButton.style.left = `${targetDOMDimension.left}px`;\n previousButton.style.top = `${middleHeight}px`;\n\n nextButton.style.left = `${targetDOMDimension.right}px`;\n nextButton.style.top = `${middleHeight}px`;\n } else if (direction === \"vertical\") {\n const middleWidth =\n targetDOMDimension.left +\n (targetDOMDimension.right - targetDOMDimension.left) / 2;\n previousButton.style.left = `${middleWidth}px`;\n previousButton.style.top = `${\n targetDOMDimension.top + window.scrollY\n }px`;\n\n nextButton.style.left = `${middleWidth}px`;\n nextButton.style.top = `${\n targetDOMDimension.bottom + window.scrollY\n }px`;\n }\n }\n}\n\n/\n This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n /\nexport function updateFocussedStateOnMutation(\n focusOverlayWrapper: HTMLDivElement \| null,\n focusedToolbar: HTMLDivElement \| null,\n visualBuilderContainer: HTMLDivElement \| null,\n resizeObserver: ResizeObserver \| null\n) {\n if (!focusOverlayWrapper) return;\n\n let selectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (!selectedElement) return;\n\n const selectedElementCslp = selectedElement?.getAttribute(\"data-cslp\");\n const newSelectedElement = document.querySelector(\n `[data-cslp=\"${selectedElementCslp}\"]`\n );\n if (!newSelectedElement && resizeObserver) {\n hideFocusOverlay({\n visualBuilderOverlayWrapper: focusOverlayWrapper,\n focusedToolbar,\n visualBuilderContainer,\n resizeObserver,\n noTrigger: true,\n });\n return;\n }\n\n if (newSelectedElement !== selectedElement) {\n selectedElement = newSelectedElement as HTMLElement;\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n selectedElement;\n }\n\n const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n /\n Update the focus outline if it exists.\n /\n const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--outline\"\n );\n\n if (focusOutline) {\n const focusOutlineDimension = focusOutline.getBoundingClientRect();\n if (!isSameRect(selectedElementDimension, focusOutlineDimension)) {\n focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n focusOutline.style.left = `${selectedElementDimension.left}px`;\n focusOutline.style.width = `${selectedElementDimension.width}px`;\n focusOutline.style.height = `${selectedElementDimension.height}px`;\n }\n }\n\n /\n Update the focus overlays if they exists.\n /\n\n const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--top\"\n );\n const focusedOverlayBottom =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--bottom\"\n );\n const focusedOverlayLeft =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--left\"\n );\n const focusedOverlayRight =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--right\"\n );\n\n const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n if (focusedOverlayTop) {\n const dimension = focusedOverlayTop.getBoundingClientRect();\n if (dimension.height !== distanceFromTop) {\n focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n }\n }\n\n if (focusedOverlayBottom) {\n const dimension = focusedOverlayBottom.getBoundingClientRect();\n if (\n dimension.top !== selectedElementDimension.bottom \|\|\n dimension.height !==\n window.document.body.scrollHeight -\n selectedElementDimension.bottom -\n window.scrollY\n ) {\n focusedOverlayBottom.style.top = `${\n selectedElementDimension.bottom + window.scrollY\n }px`;\n focusedOverlayBottom.style.height = `${\n window.document.body.scrollHeight -\n selectedElementDimension.bottom -\n window.scrollY\n }px`;\n }\n }\n\n if (focusedOverlayLeft) {\n const dimension = focusedOverlayLeft.getBoundingClientRect();\n if (\n dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !== selectedElementDimension.left\n ) {\n focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n }\n }\n\n if (focusedOverlayRight) {\n const dimension = focusedOverlayRight.getBoundingClientRect();\n if (\n dimension.left !== selectedElementDimension.right \|\|\n dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !==\n document.documentElement.clientWidth -\n selectedElementDimension.right\n ) {\n focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n focusedOverlayRight.style.top = `${distanceFromTop}px`;\n focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayRight.style.width = `${\n document.documentElement.clientWidth -\n selectedElementDimension.right\n }px`;\n }\n }\n\n /\n Update the focus toolbar if it exists.\n /\n\n if (focusedToolbar) {\n const targetElementRightEdgeOffset =\n window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop =\n selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n const adjustedDistanceFromTop =\n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop +\n selectedElementDimension.height +\n TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft =\n selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(\n distanceFromLeft,\n TOOLBAR_EDGE_BUFFER\n );\n\n if (\n targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n (focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !==\n `${\n selectedElementDimension.right +\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px`)\n ) {\n // Overflow / Cutoff on right edge\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${\n selectedElementDimension.right +\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px`;\n } else if (\n focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n\n /\n Update the pseudo-editable if it exists.\n */\n\n if (visualBuilderContainer) {\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n const editableElement = selectedElement as HTMLElement;\n const styles = getPsuedoEditableElementStyles(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n if (\n psuedoEditableElement &&\n (psuedoEditableElement.style.cssText !== styleString \|\|\n psuedoEditableElement.style.visibility !== \"visible\")\n ) {\n psuedoEditableElement.style.cssText = styleString;\n // since we are copying styles from the editableEl\n // it will now have a visibility of hidden, which we added\n // when creating the pseudo editable element, so make the psuedo visible\n psuedoEditableElement.style.visibility = \"visible\";\n }\n }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n return (\n rect1.top === rect2.top &&\n rect1.left === rect2.left &&\n rect1.width === rect2.width &&\n rect1.height === rect2.height\n );\n}\n"],"mappings":"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","names":["getChildrenDirection","distanceFromTop"]}

package/dist/modern/visualBuilder/utils/updateFocussedState.d.cts CHANGED Viewed

@@ -10,12 +10,12 @@ declare function updateFocussedState({ editableElement, visualBuilderContainer,
     visualBuilderContainer: HTMLDivElement | null;
     overlayWrapper: HTMLDivElement | null;
     focusedToolbar: HTMLDivElement | null;
-    resizeObserver: ResizeObserver;
+    resizeObserver: ResizeObserver | null;
 }): void;
 /**
  * This function is used to resize/reposition focus overlay and toolbar due to a
  * mutation in the DOM or due to changes in a different field (other than the focussed field).
  */
-declare function updateFocussedStateOnMutation(focusOverlayWrapper: HTMLDivElement | null, focusedToolbar: HTMLDivElement | null, visualBuilderContainer: HTMLDivElement | null): void;
+declare function updateFocussedStateOnMutation(focusOverlayWrapper: HTMLDivElement | null, focusedToolbar: HTMLDivElement | null, visualBuilderContainer: HTMLDivElement | null, resizeObserver: ResizeObserver | null): void;
 export { updateFocussedState, updateFocussedStateOnMutation };

package/dist/modern/visualBuilder/utils/updateFocussedState.d.ts CHANGED Viewed

@@ -10,12 +10,12 @@ declare function updateFocussedState({ editableElement, visualBuilderContainer,
     visualBuilderContainer: HTMLDivElement | null;
     overlayWrapper: HTMLDivElement | null;
     focusedToolbar: HTMLDivElement | null;
-    resizeObserver: ResizeObserver;
+    resizeObserver: ResizeObserver | null;
 }): void;
 /**
  * This function is used to resize/reposition focus overlay and toolbar due to a
  * mutation in the DOM or due to changes in a different field (other than the focussed field).
  */
-declare function updateFocussedStateOnMutation(focusOverlayWrapper: HTMLDivElement | null, focusedToolbar: HTMLDivElement | null, visualBuilderContainer: HTMLDivElement | null): void;
+declare function updateFocussedStateOnMutation(focusOverlayWrapper: HTMLDivElement | null, focusedToolbar: HTMLDivElement | null, visualBuilderContainer: HTMLDivElement | null, resizeObserver: ResizeObserver | null): void;
 export { updateFocussedState, updateFocussedStateOnMutation };