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

package/dist/modern/visualBuilder/utils/collabUtils.d.ts

@@ -48,5 +48,29 @@ declare const sanitizeData: (dirty: any) => string;
  * @returns {Object} The comment body containing the sanitized message and mentioned users.
  */
 declare const getCommentBody: (state: ICommentState) => ICommentState;
+declare function normalizePath(path: string): string;
+declare function fixSvgXPath(xpath: string | null): string;
+/**
+ * populate the position of the thread based on edges of the screen.
+ * @param position
+ * @param options
+ * @returns
+ */
+declare function adjustPositionToViewport(position: {
+    top: number;
+    left: number;
+}, options?: {
+    threadWidth?: number;
+    safeMargin?: number;
+    topSafeMargin?: number;
+}): {
+    top: number;
+    left: number;
+};
+declare function formatDate(dateString: string): string;
+/**
+ * Calculates and updates tooltip position based on available viewport space.
+ */
+declare const positionTooltip: (tooltipRef: React.RefObject<HTMLDivElement>, targetRef: React.RefObject<HTMLDivElement>, position: "top" | "bottom" | "left" | "right", setActualPosition: (position: "top" | "bottom" | "left" | "right") => void) => void;
 
-export { filterOutInvalidMentions, getCommentBody, getMessageWithDisplayName, getThreadTitle, getUserName, sanitizeData, validateCommentAndMentions };
+export { adjustPositionToViewport, filterOutInvalidMentions, fixSvgXPath, formatDate, getCommentBody, getMessageWithDisplayName, getThreadTitle, getUserName, normalizePath, positionTooltip, sanitizeData, validateCommentAndMentions };

package/dist/modern/visualBuilder/utils/collabUtils.js

@@ -4,6 +4,7 @@ import "../../chunk-5WRI5ZAA.js";
 import { maxMessageLength, mentionLimit } from "./constants.js";
 import { uniqBy } from "lodash-es";
 import DOMPurify from "dompurify";
+import dayjs from "dayjs";
 var escapeRegExp = (string) => {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 };
@@ -33,11 +34,12 @@ var filterOutInvalidMentions = (message, toUsers) => {
 };
 var getMessageWithDisplayName = (comment, userState, profile) => {
   if (!comment) return void 0;
-  let tempText = comment.message;
-  comment?.toUsers?.forEach((user) => {
+  let tempText = sanitizeData(comment.message).replace(/<[^>]*>/g, "");
+  comment.toUsers?.forEach((user) => {
     const userPattern = new RegExp(`{{${user}}}`, "g");
     const userData = userState.userMap[user];
-    const replacement = profile === "html" ? `<b class="collab-thread-comment--message">@${userData.display || getUserName(userData)}</b>` : `@${userData.display || getUserName(userData)}`;
+    const displayName = userData ? userData.display || getUserName(userData) : `unknown user`;
+    const replacement = profile === "html" ? `<b class="collab-thread-comment--message">@${displayName}</b>` : `@${displayName}`;
     tempText = tempText.replace(userPattern, replacement);
   });
   return tempText;
@@ -46,7 +48,7 @@ var sanitizeData = (dirty) => {
   return DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });
 };
 var getCommentBody = (state) => {
-  let finalMessage = state.message.replace(/[^\S\r\n]+/g, " ").replace(/ *\n */g, "\n").trim();
+  let finalMessage = sanitizeData(state.message).replace(/[^\S\r\n]+/g, " ").replace(/ *\n */g, "\n").replace(/<[^>]*>/g, "").trim();
   const comment = {
     message: finalMessage,
     toUsers: [],
@@ -65,12 +67,109 @@ var getCommentBody = (state) => {
   comment.message = finalMessage;
   return comment;
 };
+function normalizePath(path) {
+  if (path === "/") return path;
+  return path.endsWith("/") ? path.slice(0, -1) : path;
+}
+function fixSvgXPath(xpath) {
+  if (!xpath) return "";
+  return xpath.replace(/\/svg/g, "/*[name()='svg']");
+}
+function adjustPositionToViewport(position, options = {}) {
+  const { top, left } = position;
+  const viewportWidth = window.innerWidth;
+  const safeMargin = options.safeMargin ?? 16;
+  const topSafeMargin = options.topSafeMargin ?? 42;
+  const threadWidth = options.threadWidth ?? 16;
+  let adjustedLeft = left;
+  let adjustedTop = top;
+  if (adjustedLeft + threadWidth > viewportWidth - safeMargin) {
+    adjustedLeft = viewportWidth - safeMargin - threadWidth;
+  }
+  if (adjustedTop - window.scrollY < topSafeMargin) {
+    adjustedTop = window.scrollY + topSafeMargin;
+  }
+  return { top: adjustedTop, left: adjustedLeft };
+}
+function formatDate(dateString) {
+  if (!dateString) return "";
+  return dayjs(dateString).format("MMM DD, YYYY, hh:mm A");
+}
+var positionTooltip = (tooltipRef, targetRef, position, setActualPosition) => {
+  if (!tooltipRef.current || !targetRef.current) return;
+  const targetRect = targetRef.current.getBoundingClientRect();
+  const tooltipRect = tooltipRef.current.getBoundingClientRect();
+  const margin = 8;
+  const positions = {
+    bottom: {
+      top: targetRect.bottom + margin,
+      left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
+    },
+    top: {
+      top: targetRect.top - tooltipRect.height - margin,
+      left: targetRect.left + (targetRect.width - tooltipRect.width) / 2
+    },
+    left: {
+      top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
+      left: targetRect.left - tooltipRect.width - margin
+    },
+    right: {
+      top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,
+      left: targetRect.right + margin
+    }
+  };
+  let bestPosition = position;
+  let coords = positions[position];
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const wouldBeOutsideViewport = {
+    bottom: coords.top + tooltipRect.height > viewportHeight,
+    top: coords.top < 0,
+    left: coords.left < 0,
+    right: coords.left + tooltipRect.width > viewportWidth
+  };
+  const horizontalOutOfBounds = coords.left < 0 || coords.left + tooltipRect.width > viewportWidth;
+  if (wouldBeOutsideViewport[position] || horizontalOutOfBounds) {
+    const positionPriority = ["bottom", "top", "right", "left"];
+    positionPriority.splice(positionPriority.indexOf(position), 1);
+    positionPriority.push(position);
+    for (const pos of positionPriority) {
+      const testCoords = positions[pos];
+      const isVisible = testCoords.top >= 0 && testCoords.top + tooltipRect.height <= viewportHeight && testCoords.left >= 0 && testCoords.left + tooltipRect.width <= viewportWidth;
+      if (isVisible) {
+        bestPosition = pos;
+        coords = testCoords;
+        break;
+      }
+    }
+  }
+  if (coords.left < 0) {
+    coords.left = margin;
+  } else if (coords.left + tooltipRect.width > viewportWidth) {
+    coords.left = viewportWidth - tooltipRect.width - margin;
+  }
+  if (coords.top < 0) {
+    coords.top = margin;
+  } else if (coords.top + tooltipRect.height > viewportHeight) {
+    coords.top = viewportHeight - tooltipRect.height - margin;
+  }
+  setActualPosition(bestPosition);
+  Object.assign(tooltipRef.current.style, {
+    top: `${coords.top}px`,
+    left: `${coords.left}px`
+  });
+};
 export {
+  adjustPositionToViewport,
   filterOutInvalidMentions,
+  fixSvgXPath,
+  formatDate,
   getCommentBody,
   getMessageWithDisplayName,
   getThreadTitle,
   getUserName,
+  normalizePath,
+  positionTooltip,
   sanitizeData,
   validateCommentAndMentions
 };

package/dist/modern/visualBuilder/utils/collabUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/collabUtils.ts"],"sourcesContent":["import {\n    ICommentState,\n    IMentionedList,\n    IMentionItem,\n    IMessageDTO,\n    IUserDTO,\n    IUserState,\n} from \"../types/collab.types\";\nimport { maxMessageLength, mentionLimit } from \"./constants\";\nimport { uniqBy } from \"lodash-es\";\nimport DOMPurify from \"dompurify\";\n\nconst escapeRegExp = (string: string): string => {\n    return string.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n};\n\n/**\n * Generates the title for the thread based on the number of comments.\n * @param {number} commentCount - The number of comments.\n * @returns {string} The title for the thread.\n */\nexport const getThreadTitle = (commentCount: number): string => {\n    if (commentCount === 0) return \"Add New Comment\";\n    return commentCount === 1 ? \"1 Comment\" : `${commentCount} Comments`;\n};\n\n/**\n * returns the available email.\n * @param {IUserDTO} user - The user object.\n * @returns {string} The user's email.\n */\nexport const getUserName = (user: IUserDTO): string => {\n    return user.firstName && user.lastName\n        ? `${user.firstName} ${user.lastName}`\n        : user.firstName || user.lastName || user.email;\n};\n\n/**\n * Validates the comment length and the number of mentions.\n * @param {string} comment - The comment message.\n * @param {IMentionedList} toUsers - The list of mentioned users.\n * @returns {string} The error message if validation fails, otherwise an empty string.\n */\nexport const validateCommentAndMentions = (\n    comment: string,\n    toUsers: IMentionedList\n): string => {\n    if (comment.length > maxMessageLength) {\n        return `Limit exceeded. You can have a maximum length of ${maxMessageLength} characters.`;\n    }\n    if (toUsers.length > mentionLimit) {\n        return `Limit exceeded. You can tag a maximum of ${mentionLimit} users.`;\n    }\n    return \"\";\n};\n\n/**\n * Removes mentions that no longer exist in the message.\n * @param {string} message - The comment message.\n * @param {IMentionedList} toUsers - The list of mentioned users.\n * @returns {Object} The updated lists of mentioned users.\n */\nexport const filterOutInvalidMentions = (\n    message: string,\n    toUsers: IMentionedList\n) => {\n    const to_users_temp = toUsers.filter((user) =>\n        message.includes(user.display)\n    );\n\n    return {\n        toUsers: uniqBy(to_users_temp, \"id\"),\n    };\n};\n\n/**\n * Replaces mention placeholders with display names in the comment message.\n * @param {IMessageDTO | undefined} comment - The comment object.\n * @param {IUserState} userState - The user state containing user and role maps.\n * @param {\"text\" | \"html\"} profile - The format for the output message, either plain text or HTML.\n * @returns {string | undefined} The formatted message or undefined if the comment is not provided.\n */\nexport const getMessageWithDisplayName = (\n    comment: IMessageDTO | undefined | null,\n    userState: IUserState,\n    profile: \"text\" | \"html\"\n): string | undefined => {\n    if (!comment) return undefined;\n\n    let tempText = comment.message;\n\n    comment?.toUsers?.forEach((user) => {\n        const userPattern = new RegExp(`{{${user}}}`, \"g\");\n        const userData = userState.userMap[user];\n        const replacement =\n            profile === \"html\"\n                ? `<b class=\"collab-thread-comment--message\">@${userData.display || getUserName(userData)}</b>`\n                : `@${userData.display || getUserName(userData)}`;\n        tempText = tempText.replace(userPattern, replacement);\n    });\n\n    return tempText;\n};\n\n/**\n * Sanitizes HTML content to prevent XSS attacks.\n * @param {any} dirty - The unsanitized HTML content.\n * @returns {string} The sanitized HTML content.\n */\nexport const sanitizeData = (dirty: any): string => {\n    return DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });\n};\n\n/**\n * Constructs the comment body with mentions replaced by their unique identifiers.\n * @param {ICommentState} state - The state containing the comment and mentions.\n * @returns {Object} The comment body containing the sanitized message and mentioned users.\n */\nexport const getCommentBody = (state: ICommentState): ICommentState => {\n    let finalMessage = state.message\n        .replace(/[^\\S\\r\\n]+/g, \" \")\n        .replace(/ *\\n */g, \"\\n\")\n        .trim();\n\n    const comment = {\n        message: finalMessage,\n        toUsers: [],\n        images: [],\n        createdBy: state.createdBy,\n        author: state.author,\n    };\n\n    const updateMentionToUID = (\n        entity: IMentionItem,\n        result: Array<string>\n    ) => {\n        const displayName = entity.display;\n\n        const escapedDisplayName = escapeRegExp(`@${displayName}`);\n        const regexUser = new RegExp(escapedDisplayName, \"g\");\n        finalMessage = finalMessage.replace(regexUser, `{{${entity.id}}}`);\n        result.push(entity.id);\n    };\n\n    state.toUsers?.forEach((user) => updateMentionToUID(user, comment.toUsers));\n\n    comment.message = finalMessage;\n    return comment;\n};\n"],"mappings":";;;AAQA,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,cAAc;AACvB,OAAO,eAAe;AAEtB,IAAM,eAAe,CAAC,WAA2B;AAC7C,SAAO,OAAO,QAAQ,uBAAuB,MAAM;AACvD;AAOO,IAAM,iBAAiB,CAAC,iBAAiC;AAC5D,MAAI,iBAAiB,EAAG,QAAO;AAC/B,SAAO,iBAAiB,IAAI,cAAc,GAAG,YAAY;AAC7D;AAOO,IAAM,cAAc,CAAC,SAA2B;AACnD,SAAO,KAAK,aAAa,KAAK,WACxB,GAAG,KAAK,SAAS,IAAI,KAAK,QAAQ,KAClC,KAAK,aAAa,KAAK,YAAY,KAAK;AAClD;AAQO,IAAM,6BAA6B,CACtC,SACA,YACS;AACT,MAAI,QAAQ,SAAS,kBAAkB;AACnC,WAAO,oDAAoD,gBAAgB;AAAA,EAC/E;AACA,MAAI,QAAQ,SAAS,cAAc;AAC/B,WAAO,4CAA4C,YAAY;AAAA,EACnE;AACA,SAAO;AACX;AAQO,IAAM,2BAA2B,CACpC,SACA,YACC;AACD,QAAM,gBAAgB,QAAQ;AAAA,IAAO,CAAC,SAClC,QAAQ,SAAS,KAAK,OAAO;AAAA,EACjC;AAEA,SAAO;AAAA,IACH,SAAS,OAAO,eAAe,IAAI;AAAA,EACvC;AACJ;AASO,IAAM,4BAA4B,CACrC,SACA,WACA,YACqB;AACrB,MAAI,CAAC,QAAS,QAAO;AAErB,MAAI,WAAW,QAAQ;AAEvB,WAAS,SAAS,QAAQ,CAAC,SAAS;AAChC,UAAM,cAAc,IAAI,OAAO,KAAK,IAAI,MAAM,GAAG;AACjD,UAAM,WAAW,UAAU,QAAQ,IAAI;AACvC,UAAM,cACF,YAAY,SACN,8CAA8C,SAAS,WAAW,YAAY,QAAQ,CAAC,SACvF,IAAI,SAAS,WAAW,YAAY,QAAQ,CAAC;AACvD,eAAW,SAAS,QAAQ,aAAa,WAAW;AAAA,EACxD,CAAC;AAED,SAAO;AACX;AAOO,IAAM,eAAe,CAAC,UAAuB;AAChD,SAAO,UAAU,SAAS,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,EAAE,CAAC;AACrE;AAOO,IAAM,iBAAiB,CAAC,UAAwC;AACnE,MAAI,eAAe,MAAM,QACpB,QAAQ,eAAe,GAAG,EAC1B,QAAQ,WAAW,IAAI,EACvB,KAAK;AAEV,QAAM,UAAU;AAAA,IACZ,SAAS;AAAA,IACT,SAAS,CAAC;AAAA,IACV,QAAQ,CAAC;AAAA,IACT,WAAW,MAAM;AAAA,IACjB,QAAQ,MAAM;AAAA,EAClB;AAEA,QAAM,qBAAqB,CACvB,QACA,WACC;AACD,UAAM,cAAc,OAAO;AAE3B,UAAM,qBAAqB,aAAa,IAAI,WAAW,EAAE;AACzD,UAAM,YAAY,IAAI,OAAO,oBAAoB,GAAG;AACpD,mBAAe,aAAa,QAAQ,WAAW,KAAK,OAAO,EAAE,IAAI;AACjE,WAAO,KAAK,OAAO,EAAE;AAAA,EACzB;AAEA,QAAM,SAAS,QAAQ,CAAC,SAAS,mBAAmB,MAAM,QAAQ,OAAO,CAAC;AAE1E,UAAQ,UAAU;AAClB,SAAO;AACX;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/collabUtils.ts"],"sourcesContent":["import {\n    ICommentState,\n    IMentionedList,\n    IMentionItem,\n    IMessageDTO,\n    IUserDTO,\n    IUserState,\n} from \"../types/collab.types\";\nimport { maxMessageLength, mentionLimit } from \"./constants\";\nimport { uniqBy } from \"lodash-es\";\nimport DOMPurify from \"dompurify\";\nimport dayjs from \"dayjs\";\n\nconst escapeRegExp = (string: string): string => {\n    return string.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n};\n\n/**\n * Generates the title for the thread based on the number of comments.\n * @param {number} commentCount - The number of comments.\n * @returns {string} The title for the thread.\n */\nexport const getThreadTitle = (commentCount: number): string => {\n    if (commentCount === 0) return \"Add New Comment\";\n    return commentCount === 1 ? \"1 Comment\" : `${commentCount} Comments`;\n};\n\n/**\n * returns the available email.\n * @param {IUserDTO} user - The user object.\n * @returns {string} The user's email.\n */\nexport const getUserName = (user: IUserDTO): string => {\n    return user.firstName && user.lastName\n        ? `${user.firstName} ${user.lastName}`\n        : user.firstName || user.lastName || user.email;\n};\n\n/**\n * Validates the comment length and the number of mentions.\n * @param {string} comment - The comment message.\n * @param {IMentionedList} toUsers - The list of mentioned users.\n * @returns {string} The error message if validation fails, otherwise an empty string.\n */\nexport const validateCommentAndMentions = (\n    comment: string,\n    toUsers: IMentionedList\n): string => {\n    if (comment.length > maxMessageLength) {\n        return `Limit exceeded. You can have a maximum length of ${maxMessageLength} characters.`;\n    }\n    if (toUsers.length > mentionLimit) {\n        return `Limit exceeded. You can tag a maximum of ${mentionLimit} users.`;\n    }\n    return \"\";\n};\n\n/**\n * Removes mentions that no longer exist in the message.\n * @param {string} message - The comment message.\n * @param {IMentionedList} toUsers - The list of mentioned users.\n * @returns {Object} The updated lists of mentioned users.\n */\nexport const filterOutInvalidMentions = (\n    message: string,\n    toUsers: IMentionedList\n) => {\n    const to_users_temp = toUsers.filter((user) =>\n        message.includes(user.display)\n    );\n\n    return {\n        toUsers: uniqBy(to_users_temp, \"id\"),\n    };\n};\n\n/**\n * Replaces mention placeholders with display names in the comment message.\n * @param {IMessageDTO | undefined} comment - The comment object.\n * @param {IUserState} userState - The user state containing user and role maps.\n * @param {\"text\" | \"html\"} profile - The format for the output message, either plain text or HTML.\n * @returns {string | undefined} The formatted message or undefined if the comment is not provided.\n */\nexport const getMessageWithDisplayName = (\n    comment: IMessageDTO | undefined | null,\n    userState: IUserState,\n    profile: \"text\" | \"html\"\n): string | undefined => {\n    if (!comment) return undefined;\n\n    let tempText = sanitizeData(comment.message).replace(/<[^>]*>/g, \"\");\n\n    comment.toUsers?.forEach((user) => {\n        const userPattern = new RegExp(`{{${user}}}`, \"g\");\n        const userData = userState.userMap[user];\n        const displayName = userData\n            ? userData.display || getUserName(userData)\n            : `unknown user`;\n\n        const replacement =\n            profile === \"html\"\n                ? `<b class=\"collab-thread-comment--message\">@${displayName}</b>`\n                : `@${displayName}`;\n        tempText = tempText.replace(userPattern, replacement);\n    });\n\n    return tempText;\n};\n\n/**\n * Sanitizes HTML content to prevent XSS attacks.\n * @param {any} dirty - The unsanitized HTML content.\n * @returns {string} The sanitized HTML content.\n */\nexport const sanitizeData = (dirty: any): string => {\n    return DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });\n};\n\n/**\n * Constructs the comment body with mentions replaced by their unique identifiers.\n * @param {ICommentState} state - The state containing the comment and mentions.\n * @returns {Object} The comment body containing the sanitized message and mentioned users.\n */\nexport const getCommentBody = (state: ICommentState): ICommentState => {\n    let finalMessage = sanitizeData(state.message)\n        .replace(/[^\\S\\r\\n]+/g, \" \")\n        .replace(/ *\\n */g, \"\\n\")\n        .replace(/<[^>]*>/g, \"\")\n        .trim();\n\n    const comment = {\n        message: finalMessage,\n        toUsers: [],\n        images: [],\n        createdBy: state.createdBy,\n        author: state.author,\n    };\n\n    const updateMentionToUID = (\n        entity: IMentionItem,\n        result: Array<string>\n    ) => {\n        const displayName = entity.display;\n\n        const escapedDisplayName = escapeRegExp(`@${displayName}`);\n        const regexUser = new RegExp(escapedDisplayName, \"g\");\n        finalMessage = finalMessage.replace(regexUser, `{{${entity.id}}}`);\n        result.push(entity.id);\n    };\n\n    state.toUsers?.forEach((user) => updateMentionToUID(user, comment.toUsers));\n\n    comment.message = finalMessage;\n    return comment;\n};\n\nexport function normalizePath(path: string): string {\n    if (path === \"/\") return path;\n    return path.endsWith(\"/\") ? path.slice(0, -1) : path;\n}\n\nexport function fixSvgXPath(xpath: string | null): string {\n    if (!xpath) return \"\";\n    return xpath.replace(/\\/svg/g, \"/*[name()='svg']\");\n}\n\n/**\n * populate the position of the thread based on edges of the screen.\n * @param position\n * @param options\n * @returns\n */\nexport function adjustPositionToViewport(\n    position: { top: number; left: number },\n    options: {\n        threadWidth?: number;\n        safeMargin?: number;\n        topSafeMargin?: number;\n    } = {}\n): { top: number; left: number } {\n    const { top, left } = position;\n    const viewportWidth = window.innerWidth;\n    const safeMargin = options.safeMargin ?? 16;\n    const topSafeMargin = options.topSafeMargin ?? 42;\n    const threadWidth = options.threadWidth ?? 16;\n\n    let adjustedLeft = left;\n    let adjustedTop = top;\n\n    // Adjust position if too close to right edge\n    if (adjustedLeft + threadWidth > viewportWidth - safeMargin) {\n        adjustedLeft = viewportWidth - safeMargin - threadWidth;\n    }\n\n    // Adjust position if too close to top edge\n    if (adjustedTop - window.scrollY < topSafeMargin) {\n        adjustedTop = window.scrollY + topSafeMargin;\n    }\n\n    return { top: adjustedTop, left: adjustedLeft };\n}\n\nexport function formatDate(dateString: string): string {\n    if (!dateString) return \"\";\n    return dayjs(dateString).format(\"MMM DD, YYYY, hh:mm A\");\n}\n\ninterface PositionCoords {\n    top: number;\n    left: number;\n}\n\ninterface Positions {\n    bottom: PositionCoords;\n    top: PositionCoords;\n    left: PositionCoords;\n    right: PositionCoords;\n}\n\n/**\n * Calculates and updates tooltip position based on available viewport space.\n */\nexport const positionTooltip = (\n    tooltipRef: React.RefObject<HTMLDivElement>,\n    targetRef: React.RefObject<HTMLDivElement>,\n    position: \"top\" | \"bottom\" | \"left\" | \"right\",\n    setActualPosition: (position: \"top\" | \"bottom\" | \"left\" | \"right\") => void\n) => {\n    if (!tooltipRef.current || !targetRef.current) return;\n\n    const targetRect = targetRef.current.getBoundingClientRect();\n    const tooltipRect = tooltipRef.current.getBoundingClientRect();\n    const margin = 8;\n\n    const positions: Positions = {\n        bottom: {\n            top: targetRect.bottom + margin,\n            left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,\n        },\n        top: {\n            top: targetRect.top - tooltipRect.height - margin,\n            left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,\n        },\n        left: {\n            top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,\n            left: targetRect.left - tooltipRect.width - margin,\n        },\n        right: {\n            top: targetRect.top + (targetRect.height - tooltipRect.height) / 2,\n            left: targetRect.right + margin,\n        },\n    };\n\n    let bestPosition = position;\n    let coords = positions[position];\n\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    const wouldBeOutsideViewport = {\n        bottom: coords.top + tooltipRect.height > viewportHeight,\n        top: coords.top < 0,\n        left: coords.left < 0,\n        right: coords.left + tooltipRect.width > viewportWidth,\n    };\n\n    const horizontalOutOfBounds =\n        coords.left < 0 || coords.left + tooltipRect.width > viewportWidth;\n\n    if (wouldBeOutsideViewport[position] || horizontalOutOfBounds) {\n        const positionPriority = [\"bottom\", \"top\", \"right\", \"left\"];\n\n        positionPriority.splice(positionPriority.indexOf(position), 1);\n        positionPriority.push(position);\n\n        for (const pos of positionPriority) {\n            const testCoords = positions[pos as keyof Positions];\n\n            const isVisible =\n                testCoords.top >= 0 &&\n                testCoords.top + tooltipRect.height <= viewportHeight &&\n                testCoords.left >= 0 &&\n                testCoords.left + tooltipRect.width <= viewportWidth;\n\n            if (isVisible) {\n                bestPosition = pos as \"top\" | \"bottom\" | \"left\" | \"right\";\n                coords = testCoords;\n                break;\n            }\n        }\n    }\n\n    if (coords.left < 0) {\n        coords.left = margin;\n    } else if (coords.left + tooltipRect.width > viewportWidth) {\n        coords.left = viewportWidth - tooltipRect.width - margin;\n    }\n\n    if (coords.top < 0) {\n        coords.top = margin;\n    } else if (coords.top + tooltipRect.height > viewportHeight) {\n        coords.top = viewportHeight - tooltipRect.height - margin;\n    }\n\n    setActualPosition(bestPosition);\n\n    Object.assign(tooltipRef.current.style, {\n        top: `${coords.top}px`,\n        left: `${coords.left}px`,\n    });\n};\n"],"mappings":"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","names":[]}

package/dist/modern/visualBuilder/utils/enableInlineEditing.cjs

@@ -0,0 +1,94 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/utils/enableInlineEditing.ts
+var enableInlineEditing_exports = {};
+__export(enableInlineEditing_exports, {
+  enableInlineEditing: () => enableInlineEditing
+});
+module.exports = __toCommonJS(enableInlineEditing_exports);
+var import_lodash_es = require("lodash-es");
+var import__ = require("../index.cjs");
+var import_generatePseudoEditableField = require("../generators/generatePseudoEditableField.cjs");
+var import_constants = require("./constants.cjs");
+var import_getMultilinePlaintext = require("./getMultilinePlaintext.cjs");
+var import_handleFieldMouseDown = require("./handleFieldMouseDown.cjs");
+var import_types = require("./types/index.types.cjs");
+var import_updateFocussedState = require("./updateFocussedState.cjs");
+var import_pasteAsPlainText = require("./pasteAsPlainText.cjs");
+function enableInlineEditing({
+  expectedFieldData,
+  editableElement,
+  fieldType,
+  elements
+}) {
+  const { visualBuilderContainer, resizeObserver } = elements;
+  let actualEditableField = editableElement;
+  import__.VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = actualEditableField?.innerText;
+  const elementComputedDisplay = window.getComputedStyle(actualEditableField).display;
+  let textContent = editableElement.innerText || editableElement.textContent || "";
+  if (fieldType === import_types.FieldDataType.MULTILINE) {
+    textContent = (0, import_getMultilinePlaintext.getMultilinePlaintext)(actualEditableField);
+    actualEditableField.addEventListener("paste", import_pasteAsPlainText.pasteAsPlainText);
+  }
+  const expectedTextContent = expectedFieldData;
+  if (expectedTextContent && textContent !== expectedTextContent || (0, import_generatePseudoEditableField.isEllipsisActive)(editableElement)) {
+    const pseudoEditableField = (0, import_generatePseudoEditableField.generatePseudoEditableElement)(
+      { editableElement },
+      { textContent: expectedFieldData }
+    );
+    editableElement.style.visibility = "hidden";
+    pseudoEditableField.setAttribute(
+      import_constants.VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,
+      fieldType
+    );
+    visualBuilderContainer.appendChild(pseudoEditableField);
+    actualEditableField = pseudoEditableField;
+    if (fieldType === import_types.FieldDataType.MULTILINE)
+      actualEditableField.addEventListener("paste", import_pasteAsPlainText.pasteAsPlainText);
+    elements.resizeObserver.observe(pseudoEditableField);
+  } else if (elementComputedDisplay === "inline") {
+    const onInlineElementInput = (0, import_lodash_es.throttle)(() => {
+      const overlayWrapper = visualBuilderContainer.querySelector(
+        ".visual-builder__overlay__wrapper"
+      );
+      const focusedToolbar = visualBuilderContainer.querySelector(
+        ".visual-builder__focused-toolbar"
+      );
+      (0, import_updateFocussedState.updateFocussedState)({
+        editableElement: actualEditableField,
+        visualBuilderContainer,
+        overlayWrapper,
+        focusedToolbar,
+        resizeObserver
+      });
+    }, 200);
+    actualEditableField.addEventListener("input", onInlineElementInput);
+  }
+  actualEditableField.setAttribute("contenteditable", "true");
+  actualEditableField.addEventListener("input", import_handleFieldMouseDown.handleFieldInput);
+  actualEditableField.addEventListener("keydown", import_handleFieldMouseDown.handleFieldKeyDown);
+  actualEditableField.focus();
+  return;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  enableInlineEditing
+});
+//# sourceMappingURL=enableInlineEditing.cjs.map

package/dist/modern/visualBuilder/utils/enableInlineEditing.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n    isEllipsisActive,\n    generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n    expectedFieldData,\n    editableElement,\n    fieldType,\n    elements,\n}: {\n    expectedFieldData: any;\n    editableElement: HTMLElement;\n    fieldType: FieldDataType;\n    elements: VisualBuilderEditContext;\n}) {\n    const { visualBuilderContainer, resizeObserver } = elements;\n    let actualEditableField = editableElement as HTMLElement;\n\n    VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n        actualEditableField?.innerText;\n\n    const elementComputedDisplay =\n        window.getComputedStyle(actualEditableField).display;\n\n    let textContent =\n        (editableElement as HTMLElement).innerText ||\n        editableElement.textContent ||\n        \"\";\n\n    if (fieldType === FieldDataType.MULTILINE) {\n        textContent = getMultilinePlaintext(actualEditableField);\n        actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n    }\n    const expectedTextContent = expectedFieldData;\n    if (\n        (expectedTextContent && textContent !== expectedTextContent) ||\n        isEllipsisActive(editableElement as HTMLElement)\n    ) {\n        // TODO: Testing will be done in the E2E.\n        const pseudoEditableField = generatePseudoEditableElement(\n            { editableElement: editableElement as HTMLElement },\n            { textContent: expectedFieldData }\n        );\n\n        (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n        // set field type attribute to the pseudo editable field\n        // ensures proper keydown handling similar to the actual editable field\n        pseudoEditableField.setAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n            fieldType\n        );\n        visualBuilderContainer.appendChild(pseudoEditableField);\n        actualEditableField = pseudoEditableField;\n\n        if (fieldType === FieldDataType.MULTILINE)\n            actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n        // we will unobserve this in hideOverlay\n        elements.resizeObserver.observe(pseudoEditableField);\n    } else if (elementComputedDisplay === \"inline\") {\n        // if the editable field is inline\n        const onInlineElementInput = throttle(() => {\n            const overlayWrapper = visualBuilderContainer.querySelector(\n                \".visual-builder__overlay__wrapper\"\n            ) as HTMLDivElement;\n            const focusedToolbar = visualBuilderContainer.querySelector(\n                \".visual-builder__focused-toolbar\"\n            ) as HTMLDivElement;\n            updateFocussedState({\n                editableElement: actualEditableField,\n                visualBuilderContainer,\n                overlayWrapper,\n                focusedToolbar,\n                resizeObserver,\n            });\n        }, 200);\n        actualEditableField.addEventListener(\"input\", onInlineElementInput);\n    }\n\n    actualEditableField.setAttribute(\"contenteditable\", \"true\");\n    actualEditableField.addEventListener(\"input\", handleFieldInput);\n    actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n    // focus on the contenteditable element to start accepting input\n    actualEditableField.focus();\n\n    return;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,eAA8B;AAC9B,yCAGO;AACP,uBAAwD;AACxD,mCAAsC;AACtC,kCAAqD;AACrD,mBAAwD;AACxD,iCAAoC;AACpC,8BAAiC;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,yBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAEjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,2BAAc,WAAW;AACvC,sBAAc,oDAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,wCAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAC5B,MACK,uBAAuB,gBAAgB,2BACxC,qDAAiB,eAA8B,GACjD;AAEE,UAAM,0BAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,2BAAc;AAC5B,0BAAoB,iBAAiB,SAAS,wCAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,2BAAuB,2BAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0DAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,4CAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,8CAAkB;AAElE,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}

package/dist/modern/visualBuilder/utils/enableInlineEditing.d.cts

@@ -0,0 +1,11 @@
+import { FieldDataType, VisualBuilderEditContext } from './types/index.types.cjs';
+import '../../cms/types/contentTypeSchema.types.cjs';
+
+declare function enableInlineEditing({ expectedFieldData, editableElement, fieldType, elements, }: {
+    expectedFieldData: any;
+    editableElement: HTMLElement;
+    fieldType: FieldDataType;
+    elements: VisualBuilderEditContext;
+}): void;
+
+export { enableInlineEditing };

package/dist/modern/visualBuilder/utils/enableInlineEditing.d.ts

@@ -0,0 +1,11 @@
+import { FieldDataType, VisualBuilderEditContext } from './types/index.types.js';
+import '../../cms/types/contentTypeSchema.types.js';
+
+declare function enableInlineEditing({ expectedFieldData, editableElement, fieldType, elements, }: {
+    expectedFieldData: any;
+    editableElement: HTMLElement;
+    fieldType: FieldDataType;
+    elements: VisualBuilderEditContext;
+}): void;
+
+export { enableInlineEditing };

package/dist/modern/visualBuilder/utils/enableInlineEditing.js

@@ -0,0 +1,74 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/utils/enableInlineEditing.ts
+import { throttle } from "lodash-es";
+import { VisualBuilder } from "../index.js";
+import {
+  isEllipsisActive,
+  generatePseudoEditableElement
+} from "../generators/generatePseudoEditableField.js";
+import { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from "./constants.js";
+import { getMultilinePlaintext } from "./getMultilinePlaintext.js";
+import { handleFieldInput, handleFieldKeyDown } from "./handleFieldMouseDown.js";
+import { FieldDataType } from "./types/index.types.js";
+import { updateFocussedState } from "./updateFocussedState.js";
+import { pasteAsPlainText } from "./pasteAsPlainText.js";
+function enableInlineEditing({
+  expectedFieldData,
+  editableElement,
+  fieldType,
+  elements
+}) {
+  const { visualBuilderContainer, resizeObserver } = elements;
+  let actualEditableField = editableElement;
+  VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = actualEditableField?.innerText;
+  const elementComputedDisplay = window.getComputedStyle(actualEditableField).display;
+  let textContent = editableElement.innerText || editableElement.textContent || "";
+  if (fieldType === FieldDataType.MULTILINE) {
+    textContent = getMultilinePlaintext(actualEditableField);
+    actualEditableField.addEventListener("paste", pasteAsPlainText);
+  }
+  const expectedTextContent = expectedFieldData;
+  if (expectedTextContent && textContent !== expectedTextContent || isEllipsisActive(editableElement)) {
+    const pseudoEditableField = generatePseudoEditableElement(
+      { editableElement },
+      { textContent: expectedFieldData }
+    );
+    editableElement.style.visibility = "hidden";
+    pseudoEditableField.setAttribute(
+      VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,
+      fieldType
+    );
+    visualBuilderContainer.appendChild(pseudoEditableField);
+    actualEditableField = pseudoEditableField;
+    if (fieldType === FieldDataType.MULTILINE)
+      actualEditableField.addEventListener("paste", pasteAsPlainText);
+    elements.resizeObserver.observe(pseudoEditableField);
+  } else if (elementComputedDisplay === "inline") {
+    const onInlineElementInput = throttle(() => {
+      const overlayWrapper = visualBuilderContainer.querySelector(
+        ".visual-builder__overlay__wrapper"
+      );
+      const focusedToolbar = visualBuilderContainer.querySelector(
+        ".visual-builder__focused-toolbar"
+      );
+      updateFocussedState({
+        editableElement: actualEditableField,
+        visualBuilderContainer,
+        overlayWrapper,
+        focusedToolbar,
+        resizeObserver
+      });
+    }, 200);
+    actualEditableField.addEventListener("input", onInlineElementInput);
+  }
+  actualEditableField.setAttribute("contenteditable", "true");
+  actualEditableField.addEventListener("input", handleFieldInput);
+  actualEditableField.addEventListener("keydown", handleFieldKeyDown);
+  actualEditableField.focus();
+  return;
+}
+export {
+  enableInlineEditing
+};
+//# sourceMappingURL=enableInlineEditing.js.map

package/dist/modern/visualBuilder/utils/enableInlineEditing.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n    isEllipsisActive,\n    generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n    expectedFieldData,\n    editableElement,\n    fieldType,\n    elements,\n}: {\n    expectedFieldData: any;\n    editableElement: HTMLElement;\n    fieldType: FieldDataType;\n    elements: VisualBuilderEditContext;\n}) {\n    const { visualBuilderContainer, resizeObserver } = elements;\n    let actualEditableField = editableElement as HTMLElement;\n\n    VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n        actualEditableField?.innerText;\n\n    const elementComputedDisplay =\n        window.getComputedStyle(actualEditableField).display;\n\n    let textContent =\n        (editableElement as HTMLElement).innerText ||\n        editableElement.textContent ||\n        \"\";\n\n    if (fieldType === FieldDataType.MULTILINE) {\n        textContent = getMultilinePlaintext(actualEditableField);\n        actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n    }\n    const expectedTextContent = expectedFieldData;\n    if (\n        (expectedTextContent && textContent !== expectedTextContent) ||\n        isEllipsisActive(editableElement as HTMLElement)\n    ) {\n        // TODO: Testing will be done in the E2E.\n        const pseudoEditableField = generatePseudoEditableElement(\n            { editableElement: editableElement as HTMLElement },\n            { textContent: expectedFieldData }\n        );\n\n        (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n        // set field type attribute to the pseudo editable field\n        // ensures proper keydown handling similar to the actual editable field\n        pseudoEditableField.setAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n            fieldType\n        );\n        visualBuilderContainer.appendChild(pseudoEditableField);\n        actualEditableField = pseudoEditableField;\n\n        if (fieldType === FieldDataType.MULTILINE)\n            actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n        // we will unobserve this in hideOverlay\n        elements.resizeObserver.observe(pseudoEditableField);\n    } else if (elementComputedDisplay === \"inline\") {\n        // if the editable field is inline\n        const onInlineElementInput = throttle(() => {\n            const overlayWrapper = visualBuilderContainer.querySelector(\n                \".visual-builder__overlay__wrapper\"\n            ) as HTMLDivElement;\n            const focusedToolbar = visualBuilderContainer.querySelector(\n                \".visual-builder__focused-toolbar\"\n            ) as HTMLDivElement;\n            updateFocussedState({\n                editableElement: actualEditableField,\n                visualBuilderContainer,\n                overlayWrapper,\n                focusedToolbar,\n                resizeObserver,\n            });\n        }, 200);\n        actualEditableField.addEventListener(\"input\", onInlineElementInput);\n    }\n\n    actualEditableField.setAttribute(\"contenteditable\", \"true\");\n    actualEditableField.addEventListener(\"input\", handleFieldInput);\n    actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n    // focus on the contenteditable element to start accepting input\n    actualEditableField.focus();\n\n    return;\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,+CAA+C;AACxD,SAAS,6BAA6B;AACtC,SAAS,kBAAkB,0BAA0B;AACrD,SAAS,qBAA+C;AACxD,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,gBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAEjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,cAAc,WAAW;AACvC,kBAAc,sBAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,gBAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAC5B,MACK,uBAAuB,gBAAgB,uBACxC,iBAAiB,eAA8B,GACjD;AAEE,UAAM,sBAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,cAAc;AAC5B,0BAAoB,iBAAiB,SAAS,gBAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,uBAAuB,SAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0BAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,gBAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,kBAAkB;AAElE,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}

package/dist/modern/visualBuilder/utils/getChildrenDirection.cjs

@@ -34,6 +34,7 @@ __export(getChildrenDirection_exports, {
 });
 module.exports = __toCommonJS(getChildrenDirection_exports);
 var import_getChildElements = __toESM(require("./getChildElements.cjs"), 1);
+var validPositions = ["vertical", "horizontal", "none"];
 function getChildrenDirection(editableElement, parentCslpValue) {
   if (!editableElement) {
     return "none";
@@ -44,6 +45,13 @@ function getChildrenDirection(editableElement, parentCslpValue) {
   if (!parentElement) {
     return "none";
   }
+  const directionFromParentElement = parentElement.getAttribute("data-add-direction");
+  const isValidParentDirection = validPositions.includes(
+    directionFromParentElement
+  );
+  if (directionFromParentElement && isValidParentDirection) {
+    return directionFromParentElement;
+  }
   const [firstChildElement, secondChildElement, removeClone] = (0, import_getChildElements.default)(parentElement, parentCslpValue);
   if (!firstChildElement) return "none";
   const firstChildBounds = firstChildElement.getBoundingClientRect();

package/dist/modern/visualBuilder/utils/getChildrenDirection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/getChildrenDirection.ts"],"sourcesContent":["import getChildElements from \"./getChildElements\";\n\nexport default function getChildrenDirection(\n    editableElement: Element,\n    parentCslpValue: string\n): \"none\" | \"horizontal\" | \"vertical\" {\n    if (!editableElement) {\n        return \"none\";\n    }\n\n    const parentElement = editableElement.closest(\n        `[data-cslp=\"${parentCslpValue}\"]`\n    );\n\n    if (!parentElement) {\n        return \"none\";\n    }\n\n    const [firstChildElement, secondChildElement, removeClone] =\n        getChildElements(parentElement, parentCslpValue);\n\n    if (!firstChildElement) return \"none\";\n\n    // get horizontal and vertical position differences\n    const firstChildBounds = firstChildElement.getBoundingClientRect();\n    const secondChildBounds = secondChildElement.getBoundingClientRect();\n\n    const deltaX = Math.abs(firstChildBounds.left - secondChildBounds.left);\n    const deltaY = Math.abs(firstChildBounds.top - secondChildBounds.top);\n\n    const dir = deltaX > deltaY ? \"horizontal\" : \"vertical\";\n\n    // remove the clone that was created in case there was only one child\n    removeClone();\n\n    return dir;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA6B;AAEd,SAAR,qBACH,iBACA,iBACkC;AAClC,MAAI,CAAC,iBAAiB;AAClB,WAAO;AAAA,EACX;AAEA,QAAM,gBAAgB,gBAAgB;AAAA,IAClC,eAAe,eAAe;AAAA,EAClC;AAEA,MAAI,CAAC,eAAe;AAChB,WAAO;AAAA,EACX;AAEA,QAAM,CAAC,mBAAmB,oBAAoB,WAAW,QACrD,wBAAAA,SAAiB,eAAe,eAAe;AAEnD,MAAI,CAAC,kBAAmB,QAAO;AAG/B,QAAM,mBAAmB,kBAAkB,sBAAsB;AACjE,QAAM,oBAAoB,mBAAmB,sBAAsB;AAEnE,QAAM,SAAS,KAAK,IAAI,iBAAiB,OAAO,kBAAkB,IAAI;AACtE,QAAM,SAAS,KAAK,IAAI,iBAAiB,MAAM,kBAAkB,GAAG;AAEpE,QAAM,MAAM,SAAS,SAAS,eAAe;AAG7C,cAAY;AAEZ,SAAO;AACX;","names":["getChildElements"]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/getChildrenDirection.ts"],"sourcesContent":["import getChildElements from \"./getChildElements\";\n\n\nconst validPositions = [\"vertical\", \"horizontal\", \"none\"] as const;\ntype ValidPositions = typeof validPositions[number];\n\nexport default function getChildrenDirection(\n    editableElement: Element,\n    parentCslpValue: string\n): ValidPositions {\n    if (!editableElement) {\n        return \"none\";\n    }\n\n    const parentElement = editableElement.closest(\n        `[data-cslp=\"${parentCslpValue}\"]`\n    );\n\n    if (!parentElement) {\n        return \"none\";\n    }\n\n    const directionFromParentElement =\n        parentElement.getAttribute(\"data-add-direction\");\n\n    const isValidParentDirection = validPositions.includes(\n        directionFromParentElement as ValidPositions\n    );\n\n\n    if (directionFromParentElement && isValidParentDirection) {\n        return directionFromParentElement as ValidPositions;\n    }\n    const [firstChildElement, secondChildElement, removeClone] =\n        getChildElements(parentElement, parentCslpValue);\n\n    if (!firstChildElement) return \"none\";\n\n    // get horizontal and vertical position differences\n    const firstChildBounds = firstChildElement.getBoundingClientRect();\n    const secondChildBounds = secondChildElement.getBoundingClientRect();\n\n    const deltaX = Math.abs(firstChildBounds.left - secondChildBounds.left);\n    const deltaY = Math.abs(firstChildBounds.top - secondChildBounds.top);\n\n    const dir = deltaX > deltaY ? \"horizontal\" : \"vertical\";\n\n    // remove the clone that was created in case there was only one child\n    removeClone();\n\n    return dir;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA6B;AAG7B,IAAM,iBAAiB,CAAC,YAAY,cAAc,MAAM;AAGzC,SAAR,qBACH,iBACA,iBACc;AACd,MAAI,CAAC,iBAAiB;AAClB,WAAO;AAAA,EACX;AAEA,QAAM,gBAAgB,gBAAgB;AAAA,IAClC,eAAe,eAAe;AAAA,EAClC;AAEA,MAAI,CAAC,eAAe;AAChB,WAAO;AAAA,EACX;AAEA,QAAM,6BACF,cAAc,aAAa,oBAAoB;AAEnD,QAAM,yBAAyB,eAAe;AAAA,IAC1C;AAAA,EACJ;AAGA,MAAI,8BAA8B,wBAAwB;AACtD,WAAO;AAAA,EACX;AACA,QAAM,CAAC,mBAAmB,oBAAoB,WAAW,QACrD,wBAAAA,SAAiB,eAAe,eAAe;AAEnD,MAAI,CAAC,kBAAmB,QAAO;AAG/B,QAAM,mBAAmB,kBAAkB,sBAAsB;AACjE,QAAM,oBAAoB,mBAAmB,sBAAsB;AAEnE,QAAM,SAAS,KAAK,IAAI,iBAAiB,OAAO,kBAAkB,IAAI;AACtE,QAAM,SAAS,KAAK,IAAI,iBAAiB,MAAM,kBAAkB,GAAG;AAEpE,QAAM,MAAM,SAAS,SAAS,eAAe;AAG7C,cAAY;AAEZ,SAAO;AACX;","names":["getChildElements"]}

package/dist/modern/visualBuilder/utils/getChildrenDirection.d.cts

@@ -1,3 +1,5 @@
-declare function getChildrenDirection(editableElement: Element, parentCslpValue: string): "none" | "horizontal" | "vertical";
+declare const validPositions: readonly ["vertical", "horizontal", "none"];
+type ValidPositions = typeof validPositions[number];
+declare function getChildrenDirection(editableElement: Element, parentCslpValue: string): ValidPositions;
 
 export { getChildrenDirection as default };

package/dist/modern/visualBuilder/utils/getChildrenDirection.d.ts

@@ -1,3 +1,5 @@
-declare function getChildrenDirection(editableElement: Element, parentCslpValue: string): "none" | "horizontal" | "vertical";
+declare const validPositions: readonly ["vertical", "horizontal", "none"];
+type ValidPositions = typeof validPositions[number];
+declare function getChildrenDirection(editableElement: Element, parentCslpValue: string): ValidPositions;
 
 export { getChildrenDirection as default };

package/dist/modern/visualBuilder/utils/getChildrenDirection.js

@@ -2,6 +2,7 @@ import "../../chunk-5WRI5ZAA.js";
 
 // src/visualBuilder/utils/getChildrenDirection.ts
 import getChildElements from "./getChildElements.js";
+var validPositions = ["vertical", "horizontal", "none"];
 function getChildrenDirection(editableElement, parentCslpValue) {
   if (!editableElement) {
     return "none";
@@ -12,6 +13,13 @@ function getChildrenDirection(editableElement, parentCslpValue) {
   if (!parentElement) {
     return "none";
   }
+  const directionFromParentElement = parentElement.getAttribute("data-add-direction");
+  const isValidParentDirection = validPositions.includes(
+    directionFromParentElement
+  );
+  if (directionFromParentElement && isValidParentDirection) {
+    return directionFromParentElement;
+  }
   const [firstChildElement, secondChildElement, removeClone] = getChildElements(parentElement, parentCslpValue);
   if (!firstChildElement) return "none";
   const firstChildBounds = firstChildElement.getBoundingClientRect();

package/dist/modern/visualBuilder/utils/getChildrenDirection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/getChildrenDirection.ts"],"sourcesContent":["import getChildElements from \"./getChildElements\";\n\nexport default function getChildrenDirection(\n    editableElement: Element,\n    parentCslpValue: string\n): \"none\" | \"horizontal\" | \"vertical\" {\n    if (!editableElement) {\n        return \"none\";\n    }\n\n    const parentElement = editableElement.closest(\n        `[data-cslp=\"${parentCslpValue}\"]`\n    );\n\n    if (!parentElement) {\n        return \"none\";\n    }\n\n    const [firstChildElement, secondChildElement, removeClone] =\n        getChildElements(parentElement, parentCslpValue);\n\n    if (!firstChildElement) return \"none\";\n\n    // get horizontal and vertical position differences\n    const firstChildBounds = firstChildElement.getBoundingClientRect();\n    const secondChildBounds = secondChildElement.getBoundingClientRect();\n\n    const deltaX = Math.abs(firstChildBounds.left - secondChildBounds.left);\n    const deltaY = Math.abs(firstChildBounds.top - secondChildBounds.top);\n\n    const dir = deltaX > deltaY ? \"horizontal\" : \"vertical\";\n\n    // remove the clone that was created in case there was only one child\n    removeClone();\n\n    return dir;\n}\n"],"mappings":";;;AAAA,OAAO,sBAAsB;AAEd,SAAR,qBACH,iBACA,iBACkC;AAClC,MAAI,CAAC,iBAAiB;AAClB,WAAO;AAAA,EACX;AAEA,QAAM,gBAAgB,gBAAgB;AAAA,IAClC,eAAe,eAAe;AAAA,EAClC;AAEA,MAAI,CAAC,eAAe;AAChB,WAAO;AAAA,EACX;AAEA,QAAM,CAAC,mBAAmB,oBAAoB,WAAW,IACrD,iBAAiB,eAAe,eAAe;AAEnD,MAAI,CAAC,kBAAmB,QAAO;AAG/B,QAAM,mBAAmB,kBAAkB,sBAAsB;AACjE,QAAM,oBAAoB,mBAAmB,sBAAsB;AAEnE,QAAM,SAAS,KAAK,IAAI,iBAAiB,OAAO,kBAAkB,IAAI;AACtE,QAAM,SAAS,KAAK,IAAI,iBAAiB,MAAM,kBAAkB,GAAG;AAEpE,QAAM,MAAM,SAAS,SAAS,eAAe;AAG7C,cAAY;AAEZ,SAAO;AACX;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/getChildrenDirection.ts"],"sourcesContent":["import getChildElements from \"./getChildElements\";\n\n\nconst validPositions = [\"vertical\", \"horizontal\", \"none\"] as const;\ntype ValidPositions = typeof validPositions[number];\n\nexport default function getChildrenDirection(\n    editableElement: Element,\n    parentCslpValue: string\n): ValidPositions {\n    if (!editableElement) {\n        return \"none\";\n    }\n\n    const parentElement = editableElement.closest(\n        `[data-cslp=\"${parentCslpValue}\"]`\n    );\n\n    if (!parentElement) {\n        return \"none\";\n    }\n\n    const directionFromParentElement =\n        parentElement.getAttribute(\"data-add-direction\");\n\n    const isValidParentDirection = validPositions.includes(\n        directionFromParentElement as ValidPositions\n    );\n\n\n    if (directionFromParentElement && isValidParentDirection) {\n        return directionFromParentElement as ValidPositions;\n    }\n    const [firstChildElement, secondChildElement, removeClone] =\n        getChildElements(parentElement, parentCslpValue);\n\n    if (!firstChildElement) return \"none\";\n\n    // get horizontal and vertical position differences\n    const firstChildBounds = firstChildElement.getBoundingClientRect();\n    const secondChildBounds = secondChildElement.getBoundingClientRect();\n\n    const deltaX = Math.abs(firstChildBounds.left - secondChildBounds.left);\n    const deltaY = Math.abs(firstChildBounds.top - secondChildBounds.top);\n\n    const dir = deltaX > deltaY ? \"horizontal\" : \"vertical\";\n\n    // remove the clone that was created in case there was only one child\n    removeClone();\n\n    return dir;\n}\n"],"mappings":";;;AAAA,OAAO,sBAAsB;AAG7B,IAAM,iBAAiB,CAAC,YAAY,cAAc,MAAM;AAGzC,SAAR,qBACH,iBACA,iBACc;AACd,MAAI,CAAC,iBAAiB;AAClB,WAAO;AAAA,EACX;AAEA,QAAM,gBAAgB,gBAAgB;AAAA,IAClC,eAAe,eAAe;AAAA,EAClC;AAEA,MAAI,CAAC,eAAe;AAChB,WAAO;AAAA,EACX;AAEA,QAAM,6BACF,cAAc,aAAa,oBAAoB;AAEnD,QAAM,yBAAyB,eAAe;AAAA,IAC1C;AAAA,EACJ;AAGA,MAAI,8BAA8B,wBAAwB;AACtD,WAAO;AAAA,EACX;AACA,QAAM,CAAC,mBAAmB,oBAAoB,WAAW,IACrD,iBAAiB,eAAe,eAAe;AAEnD,MAAI,CAAC,kBAAmB,QAAO;AAG/B,QAAM,mBAAmB,kBAAkB,sBAAsB;AACjE,QAAM,oBAAoB,mBAAmB,sBAAsB;AAEnE,QAAM,SAAS,KAAK,IAAI,iBAAiB,OAAO,kBAAkB,IAAI;AACtE,QAAM,SAAS,KAAK,IAAI,iBAAiB,MAAM,kBAAkB,GAAG;AAEpE,QAAM,MAAM,SAAS,SAAS,eAAe;AAG7C,cAAY;AAEZ,SAAO;AACX;","names":[]}

package/dist/modern/visualBuilder/utils/handleFieldMouseDown.cjs

@@ -60,7 +60,9 @@ function handleFieldKeyDown(e) {
   const fieldType = targetElement.getAttribute(
     import_constants.VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
   );
-  if (targetElement.tagName === "BUTTON") {
+  if (event.composedPath().some(
+    (element) => element instanceof Element && element.tagName === "BUTTON"
+  )) {
     handleKeyDownOnButton(event);
   }
   if (fieldType === import_types.FieldDataType.NUMBER) {
@@ -73,6 +75,7 @@ function handleKeyDownOnButton(e) {
   if (e.code === "Space" && e.target) {
     e.preventDefault();
     (0, import_insertSpaceAtCursor.insertSpaceAtCursor)(e.target);
+    throttledFieldSync();
   }
 }
 function handleSingleLineFieldKeyDown(e) {

package/dist/modern/visualBuilder/utils/handleFieldMouseDown.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n    numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\n\nexport function handleFieldInput(e: Event): void {\n    const event = e as InputEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n    if (\n        event.type === \"input\" &&\n        ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n    ) {\n        throttledFieldSync();\n    }\n}\nconst throttledFieldSync = throttle(() => {\n    try {\n        const visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLElement;\n        if (!visualBuilderContainer) return;\n        sendFieldEvent({\n            visualBuilderContainer,\n            eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n        });\n    } catch (error) {\n        console.error(\"Error in throttledFieldSync\", error);\n    }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n    const event = e as KeyboardEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    if (targetElement.tagName === \"BUTTON\") {\n        handleKeyDownOnButton(event);\n    }\n    if (fieldType === FieldDataType.NUMBER) {\n        handleNumericFieldKeyDown(event);\n    } else if (fieldType === FieldDataType.SINGLELINE) {\n        handleSingleLineFieldKeyDown(event);\n    }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n    if (e.code === \"Space\" && e.target) {\n        e.preventDefault();\n        insertSpaceAtCursor(e.target as HTMLElement);\n    }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n    if (e.code === \"Enter\") {\n        e.preventDefault();\n    }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n    const targetElement = event.target as HTMLElement;\n\n    const allowedKeys = [\n        \"Backspace\",\n        \"Tab\",\n        \"Enter\",\n        \"End\",\n        \"Home\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Delete\",\n    ];\n\n    if (\n        event.ctrlKey ||\n        event.metaKey ||\n        event.altKey ||\n        allowedKeys.includes(event.code)\n    ) {\n        // Allow Ctrl, Cmd, Alt, and special keys\n        return;\n    }\n\n    if (event.code.includes(\"Digit\")) {\n        return;\n    }\n\n    const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n    if (!nonNumericAllowedCharacters.includes(event.key)) {\n        event.preventDefault();\n        return;\n    }\n\n    const selection = {\n        startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n        endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n    };\n\n    const existingInput = targetElement.textContent || \"\";\n    const currentOutputArr = existingInput.split(\"\");\n    currentOutputArr.splice(\n        selection.startOffset,\n        selection.endOffset - selection.startOffset,\n        event.key\n    );\n    const currentInput = currentOutputArr.join(\"\");\n\n    if (!numericInputRegex.test(currentInput)) {\n        event.preventDefault();\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,6BAA+B;AAC/B,uBAIO;AACP,mBAA8B;AAC9B,yBAA+C;AAC/C,iCAAoC;AAE7B,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,+CAA8B,SAAS,SAA0B,GACnE;AACE,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,yBAAqB,2BAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,+CAAe;AAAA,MACX;AAAA,MACA,WAAW,kDAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MAAI,cAAc,YAAY,UAAU;AACpC,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,2BAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,2BAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wDAAoB,EAAE,MAAqB;AAAA,EAC/C;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAC3D,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,aAAa,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,eAAe;AAAA,IACjE,WAAW,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,aAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,mCAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n    numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\n\nexport function handleFieldInput(e: Event): void {\n    const event = e as InputEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n    if (\n        event.type === \"input\" &&\n        ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n    ) {\n        throttledFieldSync();\n    }\n}\nconst throttledFieldSync = throttle(() => {\n    try {\n        const visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLElement;\n        if (!visualBuilderContainer) return;\n        sendFieldEvent({\n            visualBuilderContainer,\n            eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n        });\n    } catch (error) {\n        console.error(\"Error in throttledFieldSync\", error);\n    }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n    const event = e as KeyboardEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    if (\n        event\n            .composedPath()\n            .some(\n                (element) =>\n                    element instanceof Element && element.tagName === \"BUTTON\"\n            )\n    ) {\n        // custom space handling when a button is involved\n        handleKeyDownOnButton(event);\n    }\n    if (fieldType === FieldDataType.NUMBER) {\n        handleNumericFieldKeyDown(event);\n    } else if (fieldType === FieldDataType.SINGLELINE) {\n        handleSingleLineFieldKeyDown(event);\n    }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n    if (e.code === \"Space\" && e.target) {\n        e.preventDefault();\n        insertSpaceAtCursor(e.target as HTMLElement);\n        throttledFieldSync();\n    }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n    if (e.code === \"Enter\") {\n        e.preventDefault();\n    }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n    const targetElement = event.target as HTMLElement;\n\n    const allowedKeys = [\n        \"Backspace\",\n        \"Tab\",\n        \"Enter\",\n        \"End\",\n        \"Home\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Delete\",\n    ];\n\n    if (\n        event.ctrlKey ||\n        event.metaKey ||\n        event.altKey ||\n        allowedKeys.includes(event.code)\n    ) {\n        // Allow Ctrl, Cmd, Alt, and special keys\n        return;\n    }\n\n    if (event.code.includes(\"Digit\")) {\n        return;\n    }\n\n    const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n    if (!nonNumericAllowedCharacters.includes(event.key)) {\n        event.preventDefault();\n        return;\n    }\n\n    const selection = {\n        startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n        endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n    };\n\n    const existingInput = targetElement.textContent || \"\";\n    const currentOutputArr = existingInput.split(\"\");\n    currentOutputArr.splice(\n        selection.startOffset,\n        selection.endOffset - selection.startOffset,\n        event.key\n    );\n    const currentInput = currentOutputArr.join(\"\");\n\n    if (!numericInputRegex.test(currentInput)) {\n        event.preventDefault();\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,6BAA+B;AAC/B,uBAIO;AACP,mBAA8B;AAC9B,yBAA+C;AAC/C,iCAAoC;AAE7B,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,+CAA8B,SAAS,SAA0B,GACnE;AACE,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,yBAAqB,2BAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,+CAAe;AAAA,MACX;AAAA,MACA,WAAW,kDAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MACI,MACK,aAAa,EACb;AAAA,IACG,CAAC,YACG,mBAAmB,WAAW,QAAQ,YAAY;AAAA,EAC1D,GACN;AAEE,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,2BAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,2BAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wDAAoB,EAAE,MAAqB;AAC3C,uBAAmB;AAAA,EACvB;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAC3D,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,aAAa,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,eAAe;AAAA,IACjE,WAAW,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,aAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,mCAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}

package/dist/modern/visualBuilder/utils/handleFieldMouseDown.js

@@ -41,7 +41,9 @@ function handleFieldKeyDown(e) {
   const fieldType = targetElement.getAttribute(
     VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
   );
-  if (targetElement.tagName === "BUTTON") {
+  if (event.composedPath().some(
+    (element) => element instanceof Element && element.tagName === "BUTTON"
+  )) {
     handleKeyDownOnButton(event);
   }
   if (fieldType === FieldDataType.NUMBER) {
@@ -54,6 +56,7 @@ function handleKeyDownOnButton(e) {
   if (e.code === "Space" && e.target) {
     e.preventDefault();
     insertSpaceAtCursor(e.target);
+    throttledFieldSync();
   }
 }
 function handleSingleLineFieldKeyDown(e) {