@elementor/editor-controls 3.33.0-113 → 3.33.0-115

package/dist/index.mjs

@@ -5364,14 +5364,25 @@ var TransitionRepeaterControl = createControl(
 );
 
 // src/components/css-code-editor/css-editor.tsx
-import * as React92 from "react";
+import * as React93 from "react";
 import { useActiveBreakpoint as useActiveBreakpoint2 } from "@elementor/editor-responsive";
 import { useTheme as useTheme2 } from "@elementor/ui";
 import { Editor } from "@monaco-editor/react";
+import { __ as __49 } from "@wordpress/i18n";
+
+// src/components/icon-buttons/clear-icon-button.tsx
+import * as React91 from "react";
+import { BrushBigIcon } from "@elementor/icons";
+import { IconButton as IconButton8, styled as styled9, Tooltip as Tooltip8 } from "@elementor/ui";
+var CustomIconButton = styled9(IconButton8)(({ theme }) => ({
+  width: theme.spacing(2.5),
+  height: theme.spacing(2.5)
+}));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React91.createElement(Tooltip8, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React91.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React91.createElement(BrushBigIcon, { fontSize: size })));
 
 // src/components/css-code-editor/css-editor.styles.ts
-import { Box as Box19, Button as Button5, styled as styled9 } from "@elementor/ui";
-var EditorWrapper = styled9(Box19)`
+import { Box as Box19, Button as Button5, styled as styled10 } from "@elementor/ui";
+var EditorWrapper = styled10(Box19)`
 	border: 1px solid var( --e-a-border-color );
 	border-radius: 8px;
 	padding: 10px 12px;
@@ -5381,6 +5392,7 @@ var EditorWrapper = styled9(Box19)`
 	.monaco-editor .suggest-widget {
 		width: 220px !important;
 		max-width: 220px !important;
+		z-index: 1001;
 	}
 
 	.visual-content-dimmed {
@@ -5389,7 +5401,7 @@ var EditorWrapper = styled9(Box19)`
 		pointer-events: none;
 	}
 `;
-var ResizeHandle = styled9(Button5)`
+var ResizeHandle = styled10(Button5)`
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -5489,9 +5501,9 @@ function clearMarkersFromVisualContent(editor, monaco) {
 }
 
 // src/components/css-code-editor/resize-handle.tsx
-import * as React91 from "react";
+import * as React92 from "react";
 var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
-  const handleResizeMove = React91.useCallback(
+  const handleResizeMove = React92.useCallback(
     (e) => {
       const container = containerRef.current;
       if (!container) {
@@ -5504,11 +5516,11 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
     },
     [containerRef, onResize, onHeightChange]
   );
-  const handleResizeEnd = React91.useCallback(() => {
+  const handleResizeEnd = React92.useCallback(() => {
     document.removeEventListener("mousemove", handleResizeMove);
     document.removeEventListener("mouseup", handleResizeEnd);
   }, [handleResizeMove]);
-  const handleResizeStart = React91.useCallback(
+  const handleResizeStart = React92.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -5517,13 +5529,13 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
     },
     [handleResizeMove, handleResizeEnd]
   );
-  React91.useEffect(() => {
+  React92.useEffect(() => {
     return () => {
       document.removeEventListener("mousemove", handleResizeMove);
       document.removeEventListener("mouseup", handleResizeEnd);
     };
   }, [handleResizeMove, handleResizeEnd]);
-  return /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React92.createElement(
     ResizeHandle,
     {
       onMouseDown: handleResizeStart,
@@ -5600,12 +5612,15 @@ var getActual = (value) => {
   }
   return lines.slice(1, -1).map((line) => line.replace(/^ {2}/, "")).join("\n");
 };
-var createEditorDidMountHandler = (editorRef, monacoRef) => {
+var createEditorDidMountHandler = (editorRef, monacoRef, onUserContentChange) => {
   return (editor, monaco) => {
     editorRef.current = editor;
     monacoRef.current = monaco;
     preventChangeOnVisualContent(editor);
     setCustomSyntaxRules(editor, monaco);
+    const initialCode = editor.getModel()?.getValue() ?? "";
+    const initialUserContent = getActual(initialCode);
+    onUserContentChange(initialUserContent);
     monaco.editor.onDidChangeMarkers(() => {
       setTimeout(() => clearMarkersFromVisualContent(editor, monaco), 0);
     });
@@ -5614,15 +5629,19 @@ var createEditorDidMountHandler = (editorRef, monacoRef) => {
 };
 var CssEditor = ({ value, onChange }) => {
   const theme = useTheme2();
-  const containerRef = React92.useRef(null);
-  const editorRef = React92.useRef(null);
-  const monacoRef = React92.useRef(null);
-  const debounceTimer = React92.useRef(null);
+  const containerRef = React93.useRef(null);
+  const editorRef = React93.useRef(null);
+  const monacoRef = React93.useRef(null);
+  const debounceTimer = React93.useRef(null);
   const activeBreakpoint = useActiveBreakpoint2();
-  const handleResize = React92.useCallback(() => {
+  const [hasContent, setHasContent] = React93.useState(value.trim() !== "");
+  const handleUserContentChange = React93.useCallback((newValue) => {
+    setHasContent(newValue.trim() !== "");
+  }, []);
+  const handleResize = React93.useCallback(() => {
     editorRef.current?.layout();
   }, []);
-  const handleHeightChange = React92.useCallback((height) => {
+  const handleHeightChange = React93.useCallback((height) => {
     if (containerRef.current) {
       containerRef.current.style.height = `${height}px`;
     }
@@ -5633,6 +5652,7 @@ var CssEditor = ({ value, onChange }) => {
     }
     const code = editorRef.current?.getModel()?.getValue() ?? "";
     const userContent = getActual(code);
+    setHasContent(userContent.trim() !== "");
     setCustomSyntaxRules(editorRef?.current, monacoRef.current);
     const currentTimer = debounceTimer.current;
     if (currentTimer) {
@@ -5647,8 +5667,9 @@ var CssEditor = ({ value, onChange }) => {
     }, 500);
     debounceTimer.current = newTimer;
   };
-  const handleEditorDidMount = createEditorDidMountHandler(editorRef, monacoRef);
-  React92.useEffect(() => {
+  const handleEditorDidMount = createEditorDidMountHandler(editorRef, monacoRef, handleUserContentChange);
+  const handleReset = () => editorRef.current?.getModel()?.setValue(setVisualContent(""));
+  React93.useEffect(() => {
     const timerRef = debounceTimer;
     return () => {
       const timer = timerRef.current;
@@ -5657,60 +5678,75 @@ var CssEditor = ({ value, onChange }) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React92.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React92.createElement(
-    Editor,
+  return /* @__PURE__ */ React93.createElement(
+    FloatingActionsBar,
     {
-      key: activeBreakpoint,
-      height: "100%",
-      language: "css",
-      theme: theme.palette.mode === "dark" ? "vs-dark" : "vs",
-      value: setVisualContent(value),
-      onMount: handleEditorDidMount,
-      onChange: handleEditorChange,
-      options: {
-        lineNumbers: "on",
-        folding: true,
-        minimap: { enabled: false },
-        fontFamily: "Roboto, Arial, Helvetica, Verdana, sans-serif",
-        fontSize: 12,
-        renderLineHighlight: "none",
-        hideCursorInOverviewRuler: true,
-        fixedOverflowWidgets: true,
-        suggestFontSize: 10,
-        suggestLineHeight: 14,
-        stickyScroll: {
-          enabled: false
-        },
-        lineDecorationsWidth: 2
+      actions: hasContent ? [
+        /* @__PURE__ */ React93.createElement(
+          ClearIconButton,
+          {
+            key: "clear",
+            tooltipText: __49("Clear", "elementor"),
+            onClick: handleReset
+          }
+        )
+      ] : []
+    },
+    /* @__PURE__ */ React93.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React93.createElement(
+      Editor,
+      {
+        key: activeBreakpoint,
+        height: "100%",
+        language: "css",
+        theme: theme.palette.mode === "dark" ? "vs-dark" : "vs",
+        value: setVisualContent(value),
+        onMount: handleEditorDidMount,
+        onChange: handleEditorChange,
+        options: {
+          lineNumbers: "on",
+          folding: true,
+          minimap: { enabled: false },
+          fontFamily: "Roboto, Arial, Helvetica, Verdana, sans-serif",
+          fontSize: 12,
+          renderLineHighlight: "none",
+          hideCursorInOverviewRuler: true,
+          fixedOverflowWidgets: true,
+          suggestFontSize: 10,
+          suggestLineHeight: 14,
+          stickyScroll: {
+            enabled: false
+          },
+          lineDecorationsWidth: 2
+        }
       }
-    }
-  ), /* @__PURE__ */ React92.createElement(
-    ResizeHandleComponent,
-    {
-      onResize: handleResize,
-      containerRef,
-      onHeightChange: handleHeightChange
-    }
-  ));
+    ), /* @__PURE__ */ React93.createElement(
+      ResizeHandleComponent,
+      {
+        onResize: handleResize,
+        containerRef,
+        onHeightChange: handleHeightChange
+      }
+    ))
+  );
 };
 
 // src/components/repeater.tsx
-import * as React93 from "react";
-import { useEffect as useEffect11, useState as useState15 } from "react";
+import * as React94 from "react";
+import { useEffect as useEffect11, useState as useState16 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon3, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover7,
   bindTrigger as bindTrigger6,
   Box as Box20,
-  IconButton as IconButton8,
+  IconButton as IconButton9,
   Popover as Popover7,
   Stack as Stack16,
-  Tooltip as Tooltip8,
+  Tooltip as Tooltip9,
   Typography as Typography7,
   UnstableTag as UnstableTag4,
   usePopupState as usePopupState8
 } from "@elementor/ui";
-import { __ as __49 } from "@wordpress/i18n";
+import { __ as __50 } from "@wordpress/i18n";
 var SIZE9 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
@@ -5726,14 +5762,14 @@ var Repeater3 = ({
   isSortable = true,
   collectionPropUtil
 }) => {
-  const [openItem, setOpenItem] = useState15(EMPTY_OPEN_ITEM2);
+  const [openItem, setOpenItem] = useState16(EMPTY_OPEN_ITEM2);
   const [items2, setItems] = useSyncExternalState({
     external: repeaterValues,
     // @ts-expect-error - as long as persistWhen => true, value will never be null
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = useState15(items2.map((_, index) => index));
+  const [uniqueKeys, setUniqueKeys] = useState16(items2.map((_, index) => index));
   const generateNextKey = (source) => {
     return 1 + Math.max(0, ...source);
   };
@@ -5800,7 +5836,7 @@ var Repeater3 = ({
       { action: { type: "reorder", payload: { ...meta } } }
     );
   };
-  return /* @__PURE__ */ React93.createElement(SectionContent, null, /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React94.createElement(SectionContent, null, /* @__PURE__ */ React94.createElement(
     Stack16,
     {
       direction: "row",
@@ -5809,31 +5845,31 @@ var Repeater3 = ({
       gap: 1,
       sx: { marginInlineEnd: -0.75 }
     },
-    /* @__PURE__ */ React93.createElement(Typography7, { component: "label", variant: "caption", color: "text.secondary" }, label),
-    /* @__PURE__ */ React93.createElement(ControlAdornments, null),
-    /* @__PURE__ */ React93.createElement(
-      IconButton8,
+    /* @__PURE__ */ React94.createElement(Typography7, { component: "label", variant: "caption", color: "text.secondary" }, label),
+    /* @__PURE__ */ React94.createElement(ControlAdornments, null),
+    /* @__PURE__ */ React94.createElement(
+      IconButton9,
       {
         size: SIZE9,
         sx: { ml: "auto" },
         disabled,
         onClick: addRepeaterItem,
-        "aria-label": __49("Add item", "elementor")
+        "aria-label": __50("Add item", "elementor")
       },
-      /* @__PURE__ */ React93.createElement(PlusIcon3, { fontSize: SIZE9 })
+      /* @__PURE__ */ React94.createElement(PlusIcon3, { fontSize: SIZE9 })
     )
-  ), 0 < uniqueKeys.length && /* @__PURE__ */ React93.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
+  ), 0 < uniqueKeys.length && /* @__PURE__ */ React94.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React93.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React93.createElement(
+    return /* @__PURE__ */ React94.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React94.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React93.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React93.createElement(itemSettings.Label, { value })),
-        startIcon: /* @__PURE__ */ React93.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React93.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React94.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React94.createElement(itemSettings.Label, { value })),
+        startIcon: /* @__PURE__ */ React94.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React94.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -5843,7 +5879,7 @@ var Repeater3 = ({
         showToggle,
         collectionPropUtil
       },
-      (props) => /* @__PURE__ */ React93.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
+      (props) => /* @__PURE__ */ React94.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
     ));
   })));
 };
@@ -5862,12 +5898,12 @@ var RepeaterItem = ({
   disabled,
   collectionPropUtil
 }) => {
-  const [anchorEl, setAnchorEl] = useState15(null);
+  const [anchorEl, setAnchorEl] = useState16(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
-  const duplicateLabel = __49("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? __49("Show", "elementor") : __49("Hide", "elementor");
-  const removeLabel = __49("Remove", "elementor");
-  return /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(
+  const duplicateLabel = __50("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? __50("Show", "elementor") : __50("Hide", "elementor");
+  const removeLabel = __50("Remove", "elementor");
+  return /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(
     UnstableTag4,
     {
       disabled,
@@ -5876,12 +5912,12 @@ var RepeaterItem = ({
       fullWidth: true,
       ref: setRef,
       variant: "outlined",
-      "aria-label": __49("Open item", "elementor"),
+      "aria-label": __50("Open item", "elementor"),
       ...bindTrigger6(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React93.createElement(React93.Fragment, null, showDuplicate && /* @__PURE__ */ React93.createElement(Tooltip8, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React93.createElement(IconButton8, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React93.createElement(CopyIcon2, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React93.createElement(Tooltip8, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React93.createElement(IconButton8, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React93.createElement(EyeOffIcon2, { fontSize: SIZE9 }) : /* @__PURE__ */ React93.createElement(EyeIcon2, { fontSize: SIZE9 }))), /* @__PURE__ */ React93.createElement(Tooltip8, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React93.createElement(IconButton8, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React93.createElement(XIcon4, { fontSize: SIZE9 }))))
+      actions: /* @__PURE__ */ React94.createElement(React94.Fragment, null, showDuplicate && /* @__PURE__ */ React94.createElement(Tooltip9, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React94.createElement(IconButton9, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React94.createElement(CopyIcon2, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React94.createElement(Tooltip9, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React94.createElement(IconButton9, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React94.createElement(EyeOffIcon2, { fontSize: SIZE9 }) : /* @__PURE__ */ React94.createElement(EyeIcon2, { fontSize: SIZE9 }))), /* @__PURE__ */ React94.createElement(Tooltip9, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React94.createElement(IconButton9, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React94.createElement(XIcon4, { fontSize: SIZE9 }))))
     }
-  ), /* @__PURE__ */ React93.createElement(
+  ), /* @__PURE__ */ React94.createElement(
     Popover7,
     {
       disablePortal: true,
@@ -5895,11 +5931,11 @@ var RepeaterItem = ({
       ...popoverProps,
       anchorEl: ref
     },
-    /* @__PURE__ */ React93.createElement(Box20, null, children({ anchorEl, collectionPropUtil }))
+    /* @__PURE__ */ React94.createElement(Box20, null, children({ anchorEl, collectionPropUtil }))
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState15(null);
+  const [ref, setRef] = useState16(null);
   const popoverState = usePopupState8({ variant: "popover" });
   const popoverProps = bindPopover7(popoverState);
   useEffect11(() => {
@@ -5919,6 +5955,7 @@ export {
   AspectRatioControl,
   BackgroundControl,
   BoxShadowRepeaterControl,
+  ClearIconButton,
   ColorControl,
   ControlActionsProvider,
   ControlAdornments,