@contentstack/live-preview-utils 2.0.4 → 3.0.1

package/dist/legacy/visualBuilder/components/FieldToolbar.js

@@ -0,0 +1,409 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/FieldToolbar.tsx
+import { useSignal } from "@preact/signals";
+import getChildrenDirection from "../utils/getChildrenDirection.js";
+import {
+  ALLOWED_MODAL_EDITABLE_FIELD,
+  ALLOWED_REPLACE_FIELDS,
+  DEFAULT_MULTIPLE_FIELDS
+} from "../utils/constants.js";
+import { getFieldType } from "../utils/getFieldType.js";
+import {
+  handleDeleteInstance,
+  handleMoveInstance
+} from "../utils/instanceHandlers.js";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
+import { FieldDataType } from "../utils/types/index.types.js";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
+import {
+  CaretIcon,
+  DeleteIcon,
+  MoveLeftIcon,
+  MoveRightIcon,
+  ReplaceAssetIcon
+} from "./icons/index.js";
+import { fieldIcons } from "./icons/fields/index.js";
+import classNames from "classnames";
+import { visualBuilderStyles } from "../visualBuilder.style.js";
+import CommentIcon from "./CommentIcon.js";
+import { useEffect, useState } from "preact/compat";
+import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
+import { isFieldDisabled } from "../utils/isFieldDisabled.js";
+import { FormIcon } from "./icons/index.js";
+import { getDOMEditStack } from "../utils/getCsDataOfElement.js";
+import { VariantIcon } from "./icons/variant.js";
+import {
+  BASE_VARIANT_STATUS,
+  FieldRevertComponent,
+  getFieldVariantStatus
+} from "./FieldRevert/FieldRevertComponent.js";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+var TOOLTIP_TOP_EDGE_BUFFER = 96;
+function handleReplaceAsset(fieldMetadata) {
+  var _a;
+  (_a = visualBuilderPostMessage) == null ? void 0 : _a.send(
+    VisualBuilderPostMessageEvents.OPEN_ASSET_MODAL,
+    {
+      fieldMetadata
+    }
+  );
+}
+function handleReplaceReference(fieldMetadata) {
+  var _a, _b;
+  const isMultipleInstance = fieldMetadata.multipleFieldMetadata.index > -1 && fieldMetadata.fieldPathWithIndex === ((_a = fieldMetadata.multipleFieldMetadata.parentDetails) == null ? void 0 : _a.parentPath);
+  const entryPath = isMultipleInstance ? fieldMetadata.instance.fieldPathWithIndex : fieldMetadata.fieldPathWithIndex;
+  (_b = visualBuilderPostMessage) == null ? void 0 : _b.send(
+    VisualBuilderPostMessageEvents.OPEN_REFERENCE_MODAL,
+    {
+      entry_uid: fieldMetadata.entry_uid,
+      content_type_uid: fieldMetadata.content_type_uid,
+      locale: fieldMetadata.locale,
+      fieldPath: fieldMetadata.fieldPath,
+      fieldPathWithIndex: fieldMetadata.fieldPathWithIndex,
+      entryPath
+    }
+  );
+}
+function handleEdit(fieldMetadata) {
+  var _a;
+  (_a = visualBuilderPostMessage) == null ? void 0 : _a.send(
+    VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,
+    { fieldMetadata }
+  );
+}
+function handleFormFieldFocus(eventDetails) {
+  var _a;
+  const { editableElement, fieldMetadata, cslpData } = eventDetails;
+  (_a = visualBuilderPostMessage) == null ? void 0 : _a.send(
+    VisualBuilderPostMessageEvents.TOGGLE_FORM,
+    {
+      fieldMetadata,
+      cslpData
+    }
+  ).then(() => {
+    var _a2;
+    (_a2 = visualBuilderPostMessage) == null ? void 0 : _a2.send(VisualBuilderPostMessageEvents.FOCUS_FIELD, {
+      DOMEditStack: getDOMEditStack(editableElement)
+    });
+  });
+}
+function FieldToolbarComponent(props) {
+  var _a, _b, _c, _d, _e;
+  const { eventDetails } = props;
+  const { fieldMetadata, editableElement: targetElement } = eventDetails;
+  const direction = useSignal("");
+  const parentPath = ((_b = (_a = fieldMetadata == null ? void 0 : fieldMetadata.multipleFieldMetadata) == null ? void 0 : _a.parentDetails) == null ? void 0 : _b.parentCslpValue) || "";
+  const isVariant = !!(fieldMetadata == null ? void 0 : fieldMetadata.variant);
+  const [fieldSchema, setFieldSchema] = useState(
+    null
+  );
+  const [fieldVariantStatus, setFieldVariantStatus] = useState(BASE_VARIANT_STATUS);
+  const [isOpenVariantRevert, setIsOpenVariantRevert] = useState(false);
+  let isModalEditable = false;
+  let isReplaceAllowed = false;
+  let isMultiple = false;
+  let Icon = null;
+  let fieldType = null;
+  let isWholeMultipleField = false;
+  if (fieldSchema) {
+    const { isDisabled } = isFieldDisabled(
+      fieldSchema,
+      {
+        editableElement: targetElement,
+        fieldMetadata
+      }
+    );
+    if (isDisabled) {
+      return null;
+    }
+    fieldType = getFieldType(fieldSchema);
+    isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);
+    isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType);
+    Icon = fieldIcons[fieldType];
+    isMultiple = fieldSchema.multiple || false;
+    if (fieldType === FieldDataType.REFERENCE)
+      isMultiple = fieldSchema.field_metadata.ref_multiple;
+    isWholeMultipleField = isMultiple && (fieldMetadata.fieldPathWithIndex === fieldMetadata.instance.fieldPathWithIndex || ((_c = fieldMetadata.multipleFieldMetadata) == null ? void 0 : _c.index) === -1);
+    if (DEFAULT_MULTIPLE_FIELDS.includes(fieldType) && isWholeMultipleField) {
+      return null;
+    }
+  }
+  direction.value = getChildrenDirection(targetElement, parentPath);
+  const invertTooltipPosition = targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;
+  const editButton = Icon ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__edit-button",
+      className: classNames(
+        "visual-builder__button visual-builder__button--secondary visual-builder__button--edit",
+        visualBuilderStyles()["visual-builder__button"],
+        visualBuilderStyles()["visual-builder__button--secondary"],
+        visualBuilderStyles()["visual-builder__button--edit"],
+        visualBuilderStyles()["visual-builder__tooltip"],
+        {
+          "visual-builder__tooltip--bottom": invertTooltipPosition,
+          [visualBuilderStyles()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
+        }
+      ),
+      "data-tooltip": "Edit",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleEdit(fieldMetadata);
+      },
+      children: /* @__PURE__ */ jsx(Icon, {})
+    }
+  ) : null;
+  const replaceButton = fieldType ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: classNames(
+        "visual-builder__replace-button visual-builder__button visual-builder__button--secondary",
+        visualBuilderStyles()["visual-builder__button"],
+        visualBuilderStyles()["visual-builder__button--secondary"],
+        visualBuilderStyles()["visual-builder__tooltip"],
+        {
+          "visual-builder__tooltip--bottom": invertTooltipPosition,
+          [visualBuilderStyles()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
+        }
+      ),
+      "data-tooltip": "Replace",
+      "data-testid": `visual-builder-replace-${fieldType}`,
+      onClick: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (fieldType === FieldDataType.REFERENCE) {
+          handleReplaceReference(fieldMetadata);
+          return;
+        } else if (fieldType === FieldDataType.FILE) {
+          handleReplaceAsset(fieldMetadata);
+          return;
+        }
+      },
+      children: /* @__PURE__ */ jsx(ReplaceAssetIcon, {})
+    }
+  ) : null;
+  const formButton = /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: classNames(
+        "visual-builder__replace-button visual-builder__button visual-builder__button--secondary",
+        visualBuilderStyles()["visual-builder__button"],
+        visualBuilderStyles()["visual-builder__button--secondary"],
+        visualBuilderStyles()["visual-builder__tooltip"],
+        {
+          "visual-builder__tooltip--bottom": invertTooltipPosition,
+          [visualBuilderStyles()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
+        }
+      ),
+      "data-tooltip": "Form",
+      "data-testid": `visual-builder-form`,
+      onClick: (e) => {
+        handleFormFieldFocus(eventDetails);
+      },
+      children: /* @__PURE__ */ jsx(FormIcon, {})
+    }
+  );
+  const toggleVariantDropdown = () => {
+    setIsOpenVariantRevert(!isOpenVariantRevert);
+  };
+  const closeVariantDropdown = () => {
+    setIsOpenVariantRevert(false);
+  };
+  const variantButton = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: classNames(
+        "visual-builder__variant-button visual-builder__button visual-builder__button--secondary",
+        visualBuilderStyles()["visual-builder__button"],
+        visualBuilderStyles()["visual-builder__button--secondary"],
+        visualBuilderStyles()["visual-builder__tooltip"],
+        visualBuilderStyles()["visual-builder__variant-button"],
+        {
+          "visual-builder__tooltip--bottom": invertTooltipPosition,
+          [visualBuilderStyles()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
+        }
+      ),
+      "data-tooltip": "Variant Revert",
+      "data-testid": `visual-builder-canvas-variant-revert`,
+      onClick: toggleVariantDropdown,
+      children: [
+        /* @__PURE__ */ jsx(VariantIcon, {}),
+        /* @__PURE__ */ jsx(CaretIcon, { open: isOpenVariantRevert })
+      ]
+    }
+  );
+  const totalElementCount = ((_d = targetElement == null ? void 0 : targetElement.parentNode) == null ? void 0 : _d.childElementCount) ?? 1;
+  const indexOfElement = (_e = fieldMetadata == null ? void 0 : fieldMetadata.multipleFieldMetadata) == null ? void 0 : _e.index;
+  const disableMoveLeft = indexOfElement === 0;
+  const disableMoveRight = indexOfElement === totalElementCount - 1;
+  useEffect(() => {
+    async function fetchFieldSchema() {
+      const fieldSchema2 = await FieldSchemaMap.getFieldSchema(
+        fieldMetadata.content_type_uid,
+        fieldMetadata.fieldPath
+      );
+      if (fieldSchema2) {
+        setFieldSchema(fieldSchema2);
+      }
+      const variantStatus = await getFieldVariantStatus(
+        fieldMetadata.fieldPathWithIndex
+      );
+      setFieldVariantStatus(variantStatus ?? BASE_VARIANT_STATUS);
+    }
+    fetchFieldSchema();
+  }, [fieldMetadata]);
+  useEffect(() => {
+    var _a2;
+    (_a2 = visualBuilderPostMessage) == null ? void 0 : _a2.on(VisualBuilderPostMessageEvents.DELETE_INSTANCE, (args) => {
+      var _a3;
+      if (((_a3 = args.data) == null ? void 0 : _a3.path) === fieldMetadata.instance.fieldPathWithIndex) {
+        props.hideOverlay();
+      }
+    });
+  }, []);
+  const multipleFieldToolbarButtonClasses = classNames(
+    "visual-builder__button visual-builder__button--secondary",
+    visualBuilderStyles()["visual-builder__button"],
+    visualBuilderStyles()["visual-builder__button--secondary"],
+    visualBuilderStyles()["visual-builder__tooltip"],
+    {
+      "visual-builder__tooltip--bottom": invertTooltipPosition,
+      [visualBuilderStyles()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "visual-builder__field-toolbar-container",
+        visualBuilderStyles()["visual-builder__field-toolbar-container"]
+      ),
+      children: [
+        isVariant && /* @__PURE__ */ jsx(
+          FieldRevertComponent,
+          {
+            fieldDataName: fieldMetadata.fieldPathWithIndex,
+            fieldMetadata,
+            variantStatus: fieldVariantStatus,
+            isOpen: isOpenVariantRevert,
+            closeDropdown: closeVariantDropdown
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(
+              "visual-builder__focused-toolbar__multiple-field-toolbar",
+              visualBuilderStyles()["visual-builder__focused-toolbar__multiple-field-toolbar"]
+            ),
+            "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classNames(
+                  "visual-builder__focused-toolbar__button-group",
+                  visualBuilderStyles()["visual-builder__focused-toolbar__button-group"]
+                ),
+                children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  isVariant ? variantButton : null,
+                  isMultiple && !isWholeMultipleField ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button",
+                        className: multipleFieldToolbarButtonClasses,
+                        "data-tooltip": direction.value === "vertical" ? "Move up" : "Move left",
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleMoveInstance(
+                            fieldMetadata,
+                            "previous"
+                          );
+                        },
+                        disabled: disableMoveLeft,
+                        children: /* @__PURE__ */ jsx(
+                          MoveLeftIcon,
+                          {
+                            className: classNames({
+                              "visual-builder__rotate--90": direction.value === "vertical",
+                              [visualBuilderStyles()["visual-builder__rotate--90"]]: direction.value === "vertical"
+                            }),
+                            disabled: disableMoveLeft
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button",
+                        className: multipleFieldToolbarButtonClasses,
+                        "data-tooltip": direction.value === "vertical" ? "Move down" : "Move right",
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleMoveInstance(
+                            fieldMetadata,
+                            "next"
+                          );
+                        },
+                        disabled: disableMoveRight,
+                        children: /* @__PURE__ */ jsx(
+                          MoveRightIcon,
+                          {
+                            className: classNames({
+                              "visual-builder__rotate--90": direction.value === "vertical",
+                              [visualBuilderStyles()["visual-builder__rotate--90"]]: direction.value === "vertical"
+                            }),
+                            disabled: disableMoveRight
+                          }
+                        )
+                      }
+                    ),
+                    isModalEditable ? editButton : null,
+                    formButton,
+                    isReplaceAllowed ? replaceButton : null,
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__delete-button",
+                        className: multipleFieldToolbarButtonClasses,
+                        "data-tooltip": "Delete",
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleDeleteInstance(fieldMetadata);
+                        },
+                        children: /* @__PURE__ */ jsx(DeleteIcon, {})
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    isModalEditable ? editButton : null,
+                    isReplaceAllowed ? replaceButton : null,
+                    formButton,
+                    fieldSchema ? /* @__PURE__ */ jsx(
+                      CommentIcon,
+                      {
+                        fieldMetadata,
+                        fieldSchema,
+                        invertTooltipPosition
+                      }
+                    ) : null
+                  ] })
+                ] })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var FieldToolbar_default = FieldToolbarComponent;
+export {
+  FieldToolbar_default as default
+};
+//# sourceMappingURL=FieldToolbar.js.map

package/dist/legacy/visualBuilder/components/FieldToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/FieldToolbar.tsx"],"sourcesContent":["import { useSignal } from \"@preact/signals\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport getChildrenDirection from \"../utils/getChildrenDirection\";\nimport {\n    ALLOWED_MODAL_EDITABLE_FIELD,\n    ALLOWED_REPLACE_FIELDS,\n    DEFAULT_MULTIPLE_FIELDS,\n} from \"../utils/constants\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport {\n    handleDeleteInstance,\n    handleMoveInstance,\n} from \"../utils/instanceHandlers\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { FieldDataType, ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport {\n    CaretIcon,\n    DeleteIcon,\n    MoveLeftIcon,\n    MoveRightIcon,\n    ReplaceAssetIcon,\n} from \"./icons\";\nimport { fieldIcons } from \"./icons/fields\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport CommentIcon from \"./CommentIcon\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { IReferenceContentTypeSchema } from \"../../cms/types/contentTypeSchema.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FormIcon } from \"./icons\";\nimport { getDOMEditStack } from \"../utils/getCsDataOfElement\";\nimport { VariantIcon } from \"./icons/variant\";\nimport {\n    BASE_VARIANT_STATUS,\n    FieldRevertComponent,\n    getFieldVariantStatus,\n    IVariantStatus,\n} from \"./FieldRevert/FieldRevertComponent\";\n\nexport type FieldDetails = Pick<VisualBuilderCslpEventDetails, \"editableElement\" | \"fieldMetadata\">;\n\nconst TOOLTIP_TOP_EDGE_BUFFER = 96;\n\ninterface MultipleFieldToolbarProps {\n    eventDetails: VisualBuilderCslpEventDetails;\n    hideOverlay: () => void;\n};\n\nfunction handleReplaceAsset(fieldMetadata: CslpData) {\n    // TODO avoid sending whole fieldMetadata\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_ASSET_MODAL,\n        {\n            fieldMetadata,\n        }\n    );\n}\n\nfunction handleReplaceReference(fieldMetadata: CslpData) {\n    const isMultipleInstance =\n        fieldMetadata.multipleFieldMetadata.index > -1 &&\n        fieldMetadata.fieldPathWithIndex ===\n            fieldMetadata.multipleFieldMetadata.parentDetails?.parentPath;\n    const entryPath = isMultipleInstance\n        ? fieldMetadata.instance.fieldPathWithIndex\n        : fieldMetadata.fieldPathWithIndex;\n\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_REFERENCE_MODAL,\n        {\n            entry_uid: fieldMetadata.entry_uid,\n            content_type_uid: fieldMetadata.content_type_uid,\n            locale: fieldMetadata.locale,\n            fieldPath: fieldMetadata.fieldPath,\n            fieldPathWithIndex: fieldMetadata.fieldPathWithIndex,\n            entryPath,\n        }\n    );\n}\n\nfunction handleEdit(fieldMetadata: CslpData) {\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,\n        { fieldMetadata }\n    );\n}\n\nfunction handleFormFieldFocus(eventDetails: VisualBuilderCslpEventDetails) {\n    const { editableElement, fieldMetadata, cslpData } = eventDetails;\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.TOGGLE_FORM,\n        {\n            fieldMetadata,\n            cslpData,\n        }\n    ).then(() => {\n        visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FOCUS_FIELD, {\n            DOMEditStack: getDOMEditStack(editableElement),\n        });\n    });\n}\n\nfunction FieldToolbarComponent(\n    props: MultipleFieldToolbarProps\n): JSX.Element | null {\n    const { eventDetails } = props;\n    const { fieldMetadata, editableElement: targetElement } = eventDetails;\n    const direction = useSignal(\"\");\n    const parentPath =\n        fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue ||\n        \"\";\n    const isVariant = !!fieldMetadata?.variant;\n    const [fieldSchema, setFieldSchema] = useState<ISchemaFieldMap | null>(\n        null\n    );\n    const [fieldVariantStatus, setFieldVariantStatus] =\n        useState<IVariantStatus>(BASE_VARIANT_STATUS);\n    const [isOpenVariantRevert, setIsOpenVariantRevert] =\n        useState<boolean>(false);\n\n    let isModalEditable = false;\n    let isReplaceAllowed = false;\n    let isMultiple = false;\n    let Icon = null;\n    let fieldType = null;\n    let isWholeMultipleField = false;\n\n    if(fieldSchema) {\n        const { isDisabled } = isFieldDisabled(\n            fieldSchema,\n            {\n                editableElement: targetElement,\n                fieldMetadata\n            }\n        );\n\n        // field is disabled, no actions needed\n        if (isDisabled) {\n            return null;\n        }\n\n        fieldType = getFieldType(fieldSchema);\n        isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);\n        isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType);\n\n        Icon = fieldIcons[fieldType];\n\n        isMultiple = fieldSchema.multiple || false;\n        if(fieldType === FieldDataType.REFERENCE)\n            isMultiple = (fieldSchema as IReferenceContentTypeSchema).field_metadata.ref_multiple;\n\n        // field is multiple but an instance is not selected\n        // instead the whole field (all instances) is selected.\n        // Currently, when whole featured_blogs is selected in canvas,\n        // the fieldPathWithIndex and instance.fieldPathWithIndex are the same\n        // cannot rely on -1 index, as the non-negative index then refers to the index of\n        // the featured_blogs block in page_components\n        // It is not needed except taxanomy.\n        isWholeMultipleField = isMultiple &&\n        (fieldMetadata.fieldPathWithIndex ===\n            fieldMetadata.instance.fieldPathWithIndex ||\n            fieldMetadata.multipleFieldMetadata?.index === -1);\n\n        if (DEFAULT_MULTIPLE_FIELDS.includes(fieldType) && isWholeMultipleField) {\n            return null;\n        }\n    }\n\n    direction.value = getChildrenDirection(targetElement, parentPath);\n\n    const invertTooltipPosition =\n        targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;\n\n    const editButton = Icon ? (\n        <button\n            data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__edit-button\"\n            className={classNames(\n                \"visual-builder__button visual-builder__button--secondary visual-builder__button--edit\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__button--edit\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Edit\"}\n            onClick={(e) => {\n                // TODO the listener for field path is attached to the common parent requiring\n                // propagation to be stopped, should ideally only attach onClick to fieldpath dropdown\n                e.preventDefault();\n                e.stopPropagation();\n                handleEdit(fieldMetadata);\n            }}\n        >\n            <Icon />\n        </button>\n    ) : null;\n\n    const replaceButton = fieldType ? (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Replace\"}\n            data-testid={`visual-builder-replace-${fieldType}`}\n            onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n                if (fieldType === FieldDataType.REFERENCE) {\n                    handleReplaceReference(fieldMetadata);\n                    return;\n                } else if (fieldType === FieldDataType.FILE) {\n                    handleReplaceAsset(fieldMetadata);\n                    return;\n                }\n            }}\n        >\n            <ReplaceAssetIcon />\n        </button>\n    ) : null;\n\n    const formButton = (\n        <button\n            className={classNames(\n                \"visual-builder__replace-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Form\"}\n            data-testid={`visual-builder-form`}\n            onClick={(e) => {\n                handleFormFieldFocus(eventDetails);\n            }}\n        >\n            <FormIcon />\n        </button>\n    );\n\n    const toggleVariantDropdown = () => {\n        setIsOpenVariantRevert(!isOpenVariantRevert);\n    };\n\n    const closeVariantDropdown = () => {\n        setIsOpenVariantRevert(false);\n    };\n\n    const variantButton = (\n        <button\n            className={classNames(\n                \"visual-builder__variant-button visual-builder__button visual-builder__button--secondary\",\n                visualBuilderStyles()[\"visual-builder__button\"],\n                visualBuilderStyles()[\"visual-builder__button--secondary\"],\n                visualBuilderStyles()[\"visual-builder__tooltip\"],\n                visualBuilderStyles()[\"visual-builder__variant-button\"],\n                {\n                    \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n                    [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                        invertTooltipPosition,\n                }\n            )}\n            data-tooltip={\"Variant Revert\"}\n            data-testid={`visual-builder-canvas-variant-revert`}\n            onClick={toggleVariantDropdown}\n        >\n            <VariantIcon />\n            <CaretIcon open={isOpenVariantRevert} />\n        </button>\n    );\n\n    const totalElementCount = targetElement?.parentNode?.childElementCount ?? 1;\n    const indexOfElement = fieldMetadata?.multipleFieldMetadata?.index;\n\n    const disableMoveLeft = indexOfElement === 0; // first element\n    const disableMoveRight = indexOfElement === totalElementCount - 1; // last element\n\n    useEffect(() => {\n        async function fetchFieldSchema() {\n            const fieldSchema = await FieldSchemaMap.getFieldSchema(\n                fieldMetadata.content_type_uid,\n                fieldMetadata.fieldPath\n            );\n            if (fieldSchema) {\n                setFieldSchema(fieldSchema);\n            }\n            const variantStatus = await getFieldVariantStatus(\n                fieldMetadata.fieldPathWithIndex\n            );\n            setFieldVariantStatus(variantStatus ?? BASE_VARIANT_STATUS);\n        }\n        fetchFieldSchema();\n    }, [fieldMetadata]);\n\n    useEffect(() => {\n        visualBuilderPostMessage?.on(VisualBuilderPostMessageEvents.DELETE_INSTANCE, (args: { data: { path: string } }) => {\n            if(args.data?.path === fieldMetadata.instance.fieldPathWithIndex){\n                props.hideOverlay()\n            }\n        })\n    }, [])\n\n    const multipleFieldToolbarButtonClasses = classNames(\n        \"visual-builder__button visual-builder__button--secondary\",\n        visualBuilderStyles()[\"visual-builder__button\"],\n        visualBuilderStyles()[\"visual-builder__button--secondary\"],\n        visualBuilderStyles()[\"visual-builder__tooltip\"],\n        {\n            \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n            [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                invertTooltipPosition,\n        }\n    );\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__field-toolbar-container\",\n                visualBuilderStyles()[\"visual-builder__field-toolbar-container\"]\n            )}\n        >\n            {isVariant && (\n                <FieldRevertComponent\n                    fieldDataName={fieldMetadata.fieldPathWithIndex}\n                    fieldMetadata={fieldMetadata}\n                    variantStatus={fieldVariantStatus}\n                    isOpen={isOpenVariantRevert}\n                    closeDropdown={closeVariantDropdown}\n                />\n            )}\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar__multiple-field-toolbar\",\n                    visualBuilderStyles()[\n                        \"visual-builder__focused-toolbar__multiple-field-toolbar\"\n                    ]\n                )}\n                data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar\"\n            >\n                <div\n                    className={classNames(\n                        \"visual-builder__focused-toolbar__button-group\",\n                        visualBuilderStyles()[\n                            \"visual-builder__focused-toolbar__button-group\"\n                        ]\n                    )}\n                >\n                    <>\n                        {isVariant ? variantButton : null}\n                        {isMultiple && !isWholeMultipleField ? (\n                            <>\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\n                                        direction.value === \"vertical\"\n                                            ? \"Move up\"\n                                            : \"Move left\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"previous\"\n                                        );\n                                    }}\n                                    disabled={disableMoveLeft}\n                                >\n                                    <MoveLeftIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction.value === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction.value === \"vertical\",\n                                        })}\n                                        disabled={disableMoveLeft}\n                                    />\n                                </button>\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\n                                        direction.value === \"vertical\"\n                                            ? \"Move down\"\n                                            : \"Move right\"\n                                    }\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleMoveInstance(\n                                            fieldMetadata,\n                                            \"next\"\n                                        );\n                                    }}\n                                    disabled={disableMoveRight}\n                                >\n                                    <MoveRightIcon\n                                        className={classNames({\n                                            \"visual-builder__rotate--90\":\n                                                direction.value === \"vertical\",\n                                            [visualBuilderStyles()[\n                                                \"visual-builder__rotate--90\"\n                                            ]]: direction.value === \"vertical\",\n                                        })}\n                                        disabled={disableMoveRight}\n                                    />\n                                </button>\n\n                                {isModalEditable ? editButton : null}\n                                {formButton}\n                                {isReplaceAllowed ? replaceButton : null}\n\n                                <button\n                                    data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__delete-button\"\n                                    className={\n                                        multipleFieldToolbarButtonClasses\n                                    }\n                                    data-tooltip={\"Delete\"}\n                                    onClick={(e) => {\n                                        e.preventDefault();\n                                        e.stopPropagation();\n                                        handleDeleteInstance(fieldMetadata);\n                                    }}\n                                >\n                                    <DeleteIcon />\n                                </button>\n                            </>\n                        ) : (\n                            <>\n                                {isModalEditable ? editButton : null}\n                                {isReplaceAllowed ? replaceButton : null}\n                                {formButton}\n                                {fieldSchema ? (\n                                    <CommentIcon\n                                        fieldMetadata={fieldMetadata}\n                                        fieldSchema={fieldSchema}\n                                        invertTooltipPosition={\n                                            invertTooltipPosition\n                                        }\n                                    />\n                                ) : null}\n                            </>\n                        )}\n                    </>\n                </div>\n            </div>\n        </div>\n    );\n}\n\nexport default FieldToolbarComponent;\n"],"mappings":"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","names":["_a","fieldSchema"]}

package/dist/legacy/visualBuilder/components/HighlightedCommentIcon.cjs

@@ -0,0 +1,57 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/components/HighlightedCommentIcon.tsx
+var HighlightedCommentIcon_exports = {};
+__export(HighlightedCommentIcon_exports, {
+  default: () => HighlightedCommentIcon_default
+});
+module.exports = __toCommonJS(HighlightedCommentIcon_exports);
+var import_icons = require("./icons/index.cjs");
+var import_visualBuilderPostMessage = __toESM(require("../utils/visualBuilderPostMessage.cjs"), 1);
+var import_postMessage = require("../utils/types/postMessage.types.cjs");
+var import_jsx_runtime = require("preact/jsx-runtime");
+var HighlightedCommentIcon = (props) => {
+  const { data } = props;
+  const handleCommentModal = async () => {
+    var _a;
+    (_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.send(
+      import_postMessage.VisualBuilderPostMessageEvents.OPEN_FIELD_COMMENT_MODAL,
+      {
+        fieldMetadata: data == null ? void 0 : data.fieldMetadata,
+        discussion: data == null ? void 0 : data.discussion,
+        fieldSchema: data == null ? void 0 : data.fieldSchema,
+        absolutePath: data.absolutePath
+      }
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { onClick: handleCommentModal, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.HighlightCommentIcon, {}) });
+};
+var HighlightedCommentIcon_default = HighlightedCommentIcon;
+//# sourceMappingURL=HighlightedCommentIcon.cjs.map

package/dist/legacy/visualBuilder/components/HighlightedCommentIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/HighlightedCommentIcon.tsx"],"sourcesContent":["import { h } from \"preact\";\nimport { VNode } from \"preact\";\nimport { HighlightCommentIcon } from \"./icons\";\nimport React from \"preact/compat\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { IHighlightCommentData } from \"../eventManager/useHighlightCommentIcon\";\n\nconst HighlightedCommentIcon = (props: {\n    data: IHighlightCommentData;\n}): VNode => {\n    const { data } = props;\n\n    const handleCommentModal = async () => {\n        visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.OPEN_FIELD_COMMENT_MODAL,\n            {\n                fieldMetadata: data?.fieldMetadata,\n                discussion: data?.discussion,\n                fieldSchema: data?.fieldSchema,\n                absolutePath: data.absolutePath,\n            }\n        );\n    };\n    return (\n        <div onClick={handleCommentModal}>\n            <HighlightCommentIcon />\n        </div>\n    );\n};\n\nexport default HighlightedCommentIcon;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAqC;AAErC,sCAAqC;AACrC,yBAA+C;AAqBnC;AAlBZ,IAAM,yBAAyB,CAAC,UAEnB;AACT,QAAM,EAAE,KAAK,IAAI;AAEjB,QAAM,qBAAqB,YAAY;AAb3C;AAcQ,0CAAAA,YAAA,mBAA0B;AAAA,MACtB,kDAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,6BAAM;AAAA,QACrB,YAAY,6BAAM;AAAA,QAClB,aAAa,6BAAM;AAAA,QACnB,cAAc,KAAK;AAAA,MACvB;AAAA;AAAA,EAER;AACA,SACI,4CAAC,SAAI,SAAS,oBACV,sDAAC,qCAAqB,GAC1B;AAER;AAEA,IAAO,iCAAQ;","names":["visualBuilderPostMessage"]}

package/dist/legacy/visualBuilder/components/HighlightedCommentIcon.d.cts

@@ -0,0 +1,13 @@
+import { VNode } from 'preact';
+import { IHighlightCommentData } from '../eventManager/useHighlightCommentIcon.cjs';
+import '../../cslp/types/cslp.types.cjs';
+import '../utils/types/index.types.cjs';
+import '../../cms/types/contentTypeSchema.types.cjs';
+import './CommentIcon.cjs';
+import 'react/jsx-runtime';
+
+declare const HighlightedCommentIcon: (props: {
+    data: IHighlightCommentData;
+}) => VNode;
+
+export { HighlightedCommentIcon as default };

package/dist/legacy/visualBuilder/components/HighlightedCommentIcon.d.ts

@@ -0,0 +1,13 @@
+import { VNode } from 'preact';
+import { IHighlightCommentData } from '../eventManager/useHighlightCommentIcon.js';
+import '../../cslp/types/cslp.types.js';
+import '../utils/types/index.types.js';
+import '../../cms/types/contentTypeSchema.types.js';
+import './CommentIcon.js';
+import 'react/jsx-runtime';
+
+declare const HighlightedCommentIcon: (props: {
+    data: IHighlightCommentData;
+}) => VNode;
+
+export { HighlightedCommentIcon as default };

package/dist/legacy/visualBuilder/components/HighlightedCommentIcon.js

@@ -0,0 +1,28 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/HighlightedCommentIcon.tsx
+import { HighlightCommentIcon } from "./icons/index.js";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
+import { jsx } from "preact/jsx-runtime";
+var HighlightedCommentIcon = (props) => {
+  const { data } = props;
+  const handleCommentModal = async () => {
+    var _a;
+    (_a = visualBuilderPostMessage) == null ? void 0 : _a.send(
+      VisualBuilderPostMessageEvents.OPEN_FIELD_COMMENT_MODAL,
+      {
+        fieldMetadata: data == null ? void 0 : data.fieldMetadata,
+        discussion: data == null ? void 0 : data.discussion,
+        fieldSchema: data == null ? void 0 : data.fieldSchema,
+        absolutePath: data.absolutePath
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx("div", { onClick: handleCommentModal, children: /* @__PURE__ */ jsx(HighlightCommentIcon, {}) });
+};
+var HighlightedCommentIcon_default = HighlightedCommentIcon;
+export {
+  HighlightedCommentIcon_default as default
+};
+//# sourceMappingURL=HighlightedCommentIcon.js.map

package/dist/legacy/visualBuilder/components/HighlightedCommentIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/HighlightedCommentIcon.tsx"],"sourcesContent":["import { h } from \"preact\";\nimport { VNode } from \"preact\";\nimport { HighlightCommentIcon } from \"./icons\";\nimport React from \"preact/compat\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { IHighlightCommentData } from \"../eventManager/useHighlightCommentIcon\";\n\nconst HighlightedCommentIcon = (props: {\n    data: IHighlightCommentData;\n}): VNode => {\n    const { data } = props;\n\n    const handleCommentModal = async () => {\n        visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.OPEN_FIELD_COMMENT_MODAL,\n            {\n                fieldMetadata: data?.fieldMetadata,\n                discussion: data?.discussion,\n                fieldSchema: data?.fieldSchema,\n                absolutePath: data.absolutePath,\n            }\n        );\n    };\n    return (\n        <div onClick={handleCommentModal}>\n            <HighlightCommentIcon />\n        </div>\n    );\n};\n\nexport default HighlightedCommentIcon;\n"],"mappings":";;;AAEA,SAAS,4BAA4B;AAErC,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AAqBnC;AAlBZ,IAAM,yBAAyB,CAAC,UAEnB;AACT,QAAM,EAAE,KAAK,IAAI;AAEjB,QAAM,qBAAqB,YAAY;AAb3C;AAcQ,0DAA0B;AAAA,MACtB,+BAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,6BAAM;AAAA,QACrB,YAAY,6BAAM;AAAA,QAClB,aAAa,6BAAM;AAAA,QACnB,cAAc,KAAK;AAAA,MACvB;AAAA;AAAA,EAER;AACA,SACI,oBAAC,SAAI,SAAS,oBACV,8BAAC,wBAAqB,GAC1B;AAER;AAEA,IAAO,iCAAQ;","names":[]}