@elementor/editor-controls 3.32.0-95 → 3.33.0-101

package/dist/index.d.mts

@@ -179,6 +179,7 @@ declare const FontFamilyControl: ControlComponent<({ fontFamilies, sectionWidth
 type SelectableItem = {
     type: 'item' | 'category';
     value: string;
+    disabled?: boolean;
 };
 
 type Category = {
@@ -197,8 +198,9 @@ type ItemSelectorProps = {
     icon: React$1.ElementType<{
         fontSize: string;
     }>;
+    disabledItems?: string[];
 };
-declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, }: ItemSelectorProps) => React$1.JSX.Element;
+declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, disabledItems, }: ItemSelectorProps) => React$1.JSX.Element;
 
 declare const UrlControl: ControlComponent<({ placeholder }: {
     placeholder?: string;
@@ -317,7 +319,7 @@ declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;
 
 type CssEditorProps = {
     value: string;
-    onChange: (value: string) => void;
+    onChange: (value: string, isValid: boolean) => void;
 };
 declare const CssEditor: ({ value, onChange }: CssEditorProps) => React$1.JSX.Element;
 

package/dist/index.d.ts

@@ -179,6 +179,7 @@ declare const FontFamilyControl: ControlComponent<({ fontFamilies, sectionWidth
 type SelectableItem = {
     type: 'item' | 'category';
     value: string;
+    disabled?: boolean;
 };
 
 type Category = {
@@ -197,8 +198,9 @@ type ItemSelectorProps = {
     icon: React$1.ElementType<{
         fontSize: string;
     }>;
+    disabledItems?: string[];
 };
-declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, }: ItemSelectorProps) => React$1.JSX.Element;
+declare const ItemSelector: ({ itemsList, selectedItem, onItemChange, onClose, sectionWidth, title, itemStyle, onDebounce, icon, disabledItems, }: ItemSelectorProps) => React$1.JSX.Element;
 
 declare const UrlControl: ControlComponent<({ placeholder }: {
     placeholder?: string;
@@ -317,7 +319,7 @@ declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;
 
 type CssEditorProps = {
     value: string;
-    onChange: (value: string) => void;
+    onChange: (value: string, isValid: boolean) => void;
 };
 declare const CssEditor: ({ value, onChange }: CssEditorProps) => React$1.JSX.Element;
 

package/dist/index.js

@@ -1264,6 +1264,42 @@ var import_i18n5 = require("@wordpress/i18n");
 var React24 = __toESM(require("react"));
 var import_react16 = require("react");
 var import_ui19 = require("@elementor/ui");
+
+// src/services/event-bus.ts
+var EventBus = class {
+  listeners = /* @__PURE__ */ new Map();
+  subscribe(eventName, callback) {
+    if (!this.listeners.has(eventName)) {
+      this.listeners.set(eventName, /* @__PURE__ */ new Set());
+    }
+    const eventListeners = this.listeners.get(eventName);
+    if (eventListeners) {
+      eventListeners.add(callback);
+    }
+  }
+  unsubscribe(eventName, callback) {
+    const eventListeners = this.listeners.get(eventName);
+    if (!eventListeners) {
+      return;
+    }
+    eventListeners.delete(callback);
+    if (eventListeners.size === 0) {
+      this.listeners.delete(eventName);
+    }
+  }
+  emit(eventName, data) {
+    const eventListeners = this.listeners.get(eventName);
+    if (eventListeners) {
+      eventListeners.forEach((callback) => callback(data));
+    }
+  }
+  clearAll() {
+    this.listeners.clear();
+  }
+};
+var eventBus = new EventBus();
+
+// src/components/unstable-repeater/context/repeater-context.tsx
 var RepeaterContext = (0, import_react16.createContext)(null);
 var EMPTY_OPEN_ITEM = -1;
 var useRepeaterContext = () => {
@@ -1312,9 +1348,16 @@ var RepeaterContextProvider = ({
     setItems(newItems);
     setOpenItemIndex(newIndex);
     popoverState.open(rowRef ?? ev);
+    eventBus.emit(`${propTypeUtil.key}-item-added`, {
+      itemValue: initial.value
+    });
   };
   const removeItem = (index) => {
+    const itemToRemove = items2[index];
     setItems(items2.filter((_, pos) => pos !== index));
+    eventBus.emit(`${propTypeUtil.key}-item-removed`, {
+      itemValue: itemToRemove?.value
+    });
   };
   const updateItem = (updatedItem, index) => {
     const newItems = [...items2.slice(0, index), updatedItem, ...items2.slice(index + 1)];
@@ -2713,7 +2756,7 @@ var import_utils3 = require("@elementor/utils");
 var import_i18n19 = require("@wordpress/i18n");
 
 // src/hooks/use-filtered-items-list.ts
-var useFilteredItemsList = (itemsList, searchValue) => {
+var useFilteredItemsList = (itemsList, searchValue, disabledItems) => {
   return itemsList.reduce((acc, category) => {
     const filteredItems = category.items.filter(
       (item) => item.toLowerCase().includes(searchValue.toLowerCase())
@@ -2721,7 +2764,7 @@ var useFilteredItemsList = (itemsList, searchValue) => {
     if (filteredItems.length) {
       acc.push({ type: "category", value: category.label });
       filteredItems.forEach((item) => {
-        acc.push({ type: "item", value: item });
+        acc.push({ type: "item", value: item, disabled: disabledItems?.includes(item) ?? false });
       });
     }
     return acc;
@@ -2739,10 +2782,11 @@ var ItemSelector = ({
   itemStyle = () => ({}),
   onDebounce = () => {
   },
-  icon
+  icon,
+  disabledItems
 }) => {
   const [searchValue, setSearchValue] = (0, import_react25.useState)("");
-  const filteredItemsList = useFilteredItemsList(itemsList, searchValue);
+  const filteredItemsList = useFilteredItemsList(itemsList, searchValue, disabledItems);
   const IconComponent = icon;
   const handleSearch = (value) => {
     setSearchValue(value);
@@ -5062,6 +5106,29 @@ var transitionsItemsList = transitionProperties.map((category) => ({
   items: category.properties.map((property) => property.label)
 }));
 
+// src/controls/transition-control/trainsition-events.ts
+var import_editor_elements3 = require("@elementor/editor-elements");
+var import_utils5 = require("@elementor/utils");
+var transitionRepeaterMixpanelEvent = {
+  eventName: "click_added_transition",
+  location: "V4 Style Tab",
+  secondaryLocation: "Transition control",
+  trigger: "click"
+};
+function subscribeToTransitionEvent() {
+  eventBus.subscribe("transition-item-added", (data) => {
+    const payload = data;
+    const value = payload?.itemValue?.selection?.value?.value?.value;
+    const selectedElements = (0, import_editor_elements3.getSelectedElements)();
+    const widgetType = selectedElements[0]?.type ?? null;
+    (0, import_utils5.sendMixpanelEvent)({
+      transition_type: value ?? "unknown",
+      ...transitionRepeaterMixpanelEvent,
+      widget_type: widgetType
+    });
+  });
+}
+
 // src/controls/transition-control/transition-selector.tsx
 var React89 = __toESM(require("react"));
 var import_react45 = require("react");
@@ -5089,7 +5156,10 @@ var findByValue = (value) => {
     }
   }
 };
-var TransitionSelector = ({ recentlyUsedList = [] }) => {
+var TransitionSelector = ({
+  recentlyUsedList = [],
+  disabledItems = []
+}) => {
   const { value, setValue } = useBoundProp(import_editor_props46.keyValuePropTypeUtil);
   const {
     key: { value: transitionLabel }
@@ -5164,7 +5234,8 @@ var TransitionSelector = ({ recentlyUsedList = [] }) => {
         onClose: popoverState.close,
         sectionWidth: 268,
         title: (0, import_i18n46.__)("Transition Property", "elementor"),
-        icon: import_icons30.VariationsIcon
+        icon: import_icons30.VariationsIcon,
+        disabledItems
       }
     )
   ));
@@ -5176,14 +5247,15 @@ var DURATION_CONFIG = {
   units: ["s", "ms"],
   defaultUnit: "ms"
 };
-var getSelectionSizeProps = (recentlyUsedList) => {
+var getSelectionSizeProps = (recentlyUsedList, disabledItems) => {
   return {
     selectionLabel: (0, import_i18n47.__)("Type", "elementor"),
     sizeLabel: (0, import_i18n47.__)("Duration", "elementor"),
     selectionConfig: {
       component: TransitionSelector,
       props: {
-        recentlyUsedList
+        recentlyUsedList,
+        disabledItems
       }
     },
     sizeConfigMap: {
@@ -5199,11 +5271,11 @@ var getSelectionSizeProps = (recentlyUsedList) => {
     }
   };
 };
-function getChildControlConfig(recentlyUsedList) {
+function getChildControlConfig(recentlyUsedList, disabledItems) {
   return {
     propTypeUtil: import_editor_props47.selectionSizePropTypeUtil,
     component: SelectionSizeControl,
-    props: getSelectionSizeProps(recentlyUsedList)
+    props: getSelectionSizeProps(recentlyUsedList, disabledItems)
   };
 }
 var disableAddItemTooltipContent = /* @__PURE__ */ React90.createElement(
@@ -5219,6 +5291,13 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React90.createElement(
   /* @__PURE__ */ React90.createElement(import_ui78.AlertTitle, null, (0, import_i18n47.__)("Transitions", "elementor")),
   /* @__PURE__ */ React90.createElement(import_ui78.Box, { component: "span" }, /* @__PURE__ */ React90.createElement(import_ui78.Typography, { variant: "body2" }, (0, import_i18n47.__)("Switch to 'Normal' state to add a transition.", "elementor")))
 );
+subscribeToTransitionEvent();
+var getTransitionLabel = (item) => {
+  return item.value.selection.value?.key?.value ?? "";
+};
+var getDisabledItems = (value) => {
+  return value?.map(getTransitionLabel) ?? [];
+};
 var TransitionRepeaterControl = createControl(
   ({
     recentlyUsedListGetter,
@@ -5226,6 +5305,12 @@ var TransitionRepeaterControl = createControl(
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
     const [recentlyUsedList, setRecentlyUsedList] = (0, import_react46.useState)([]);
+    const childArrayPropTypeUtil = (0, import_react46.useMemo)(
+      () => (0, import_editor_props47.createArrayPropUtils)(import_editor_props47.selectionSizePropTypeUtil.key, import_editor_props47.selectionSizePropTypeUtil.schema, "transition"),
+      []
+    );
+    const { value } = useBoundProp(childArrayPropTypeUtil);
+    const disabledItems = (0, import_react46.useMemo)(() => getDisabledItems(value), [value]);
     (0, import_react46.useEffect)(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
@@ -5239,7 +5324,7 @@ var TransitionRepeaterControl = createControl(
         showDuplicate: false,
         showToggle: true,
         initialValues: initialTransitionValue,
-        childControlConfig: getChildControlConfig(recentlyUsedList),
+        childControlConfig: getChildControlConfig(recentlyUsedList, disabledItems),
         propKey: "transition",
         addItemTooltipProps: {
           disabled: !currentStyleIsNormal,
@@ -5266,8 +5351,15 @@ var EditorWrapper = (0, import_ui79.styled)(import_ui79.Box)`
 	position: relative;
 	height: 200px;
 
-	.monaco-editor .colorpicker-widget {
-		z-index: 99999999 !important;
+	.monaco-editor .suggest-widget {
+		width: 220px !important;
+		max-width: 220px !important;
+	}
+
+	.visual-content-dimmed {
+		opacity: 0.6;
+		color: #aaa !important;
+		pointer-events: none;
 	}
 `;
 var ResizeHandle = (0, import_ui79.styled)(import_ui79.Button)`
@@ -5358,6 +5450,16 @@ function validate(editor, monaco) {
   const allMarkers = monaco.editor.getModelMarkers({ resource: model.uri });
   return allMarkers.filter((marker) => marker.severity === monaco.MarkerSeverity.Error).length === 0;
 }
+function clearMarkersFromVisualContent(editor, monaco) {
+  const model = editor.getModel();
+  if (!model) {
+    return;
+  }
+  const allMarkers = monaco.editor.getModelMarkers({ resource: model.uri });
+  const filteredMarkers = allMarkers.filter((marker) => marker.startLineNumber !== 1);
+  const nonCustomMarkers = filteredMarkers.filter((m) => m.source !== "custom-css-rules");
+  monaco.editor.setModelMarkers(model, "css", nonCustomMarkers);
+}
 
 // src/components/css-code-editor/resize-handle.tsx
 var React91 = __toESM(require("react"));
@@ -5404,6 +5506,60 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
   );
 };
 
+// src/components/css-code-editor/visual-content-change-protection.ts
+var preventChangeOnVisualContent = (editor) => {
+  const model = editor.getModel();
+  if (!model) {
+    return;
+  }
+  const decorationsCollection = editor.createDecorationsCollection();
+  const applyVisualContentStyling = () => {
+    const totalLines = model.getLineCount();
+    const decorations = [];
+    decorations.push({
+      range: {
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: 1,
+        endColumn: model.getLineContent(1).length + 1
+      },
+      options: {
+        inlineClassName: "visual-content-dimmed",
+        isWholeLine: false
+      }
+    });
+    if (totalLines > 1) {
+      decorations.push({
+        range: {
+          startLineNumber: totalLines,
+          startColumn: 1,
+          endLineNumber: totalLines,
+          endColumn: model.getLineContent(totalLines).length + 1
+        },
+        options: {
+          inlineClassName: "visual-content-dimmed",
+          isWholeLine: false
+        }
+      });
+    }
+    decorationsCollection.set(decorations);
+  };
+  applyVisualContentStyling();
+  model.onDidChangeContent(() => {
+    applyVisualContentStyling();
+  });
+  const originalPushEditOperations = model.pushEditOperations;
+  model.pushEditOperations = function(beforeCursorState, editOperations, cursorStateComputer) {
+    const totalLines = model.getLineCount();
+    const filteredOperations = editOperations.filter((operation) => {
+      const range = operation.range;
+      const affectsProtectedLine = range.startLineNumber === 1 || range.endLineNumber === 1 || range.startLineNumber === totalLines || range.endLineNumber === totalLines;
+      return !affectsProtectedLine;
+    });
+    return originalPushEditOperations.call(this, beforeCursorState, filteredOperations, cursorStateComputer);
+  };
+};
+
 // src/components/css-code-editor/css-editor.tsx
 var setVisualContent = (value) => {
   const trimmed = value.trim();
@@ -5417,63 +5573,16 @@ var getActual = (value) => {
   }
   return lines.slice(1, -1).map((line) => line.replace(/^ {2}/, "")).join("\n");
 };
-var preventChangeOnVisualContent = (editor, monaco) => {
-  const model = editor.getModel();
-  if (!model) {
-    return;
-  }
-  editor.onKeyDown((e) => {
-    const position = editor.getPosition();
-    if (!position) {
-      return;
-    }
-    const totalLines = model.getLineCount();
-    const isInProtectedRange = position.lineNumber === 1 || position.lineNumber === totalLines;
-    if (isInProtectedRange) {
-      const allowedKeys = [
-        monaco.KeyCode.UpArrow,
-        monaco.KeyCode.DownArrow,
-        monaco.KeyCode.LeftArrow,
-        monaco.KeyCode.RightArrow,
-        monaco.KeyCode.Home,
-        monaco.KeyCode.End,
-        monaco.KeyCode.PageUp,
-        monaco.KeyCode.PageDown,
-        monaco.KeyCode.Tab,
-        monaco.KeyCode.Escape
-      ];
-      if (!allowedKeys.includes(e.keyCode)) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    }
-  });
-};
-var createEditorDidMountHandler = (editorRef, monacoRef, debounceTimer, onChange) => {
+var createEditorDidMountHandler = (editorRef, monacoRef) => {
   return (editor, monaco) => {
     editorRef.current = editor;
     monacoRef.current = monaco;
-    preventChangeOnVisualContent(editor, monaco);
+    preventChangeOnVisualContent(editor);
     setCustomSyntaxRules(editor, monaco);
-    editor.onDidChangeModelContent(() => {
-      const code = editor.getModel()?.getValue() ?? "";
-      const userContent = getActual(code);
-      setCustomSyntaxRules(editor, monaco);
-      const currentTimer = debounceTimer.current;
-      if (currentTimer) {
-        clearTimeout(currentTimer);
-      }
-      const newTimer = setTimeout(() => {
-        if (!editorRef.current || !monacoRef.current) {
-          return;
-        }
-        const hasNoErrors = validate(editorRef.current, monacoRef.current);
-        if (hasNoErrors) {
-          onChange(userContent);
-        }
-      }, 500);
-      debounceTimer.current = newTimer;
+    monaco.editor.onDidChangeMarkers(() => {
+      setTimeout(() => clearMarkersFromVisualContent(editor, monaco), 0);
     });
+    editor.setPosition({ lineNumber: 2, column: (editor.getModel()?.getLineContent(2).length ?? 0) + 1 });
   };
 };
 var CssEditor = ({ value, onChange }) => {
@@ -5491,7 +5600,27 @@ var CssEditor = ({ value, onChange }) => {
       containerRef.current.style.height = `${height}px`;
     }
   }, []);
-  const handleEditorDidMount = createEditorDidMountHandler(editorRef, monacoRef, debounceTimer, onChange);
+  const handleEditorChange = () => {
+    if (!editorRef.current || !monacoRef.current) {
+      return;
+    }
+    const code = editorRef.current?.getModel()?.getValue() ?? "";
+    const userContent = getActual(code);
+    setCustomSyntaxRules(editorRef?.current, monacoRef.current);
+    const currentTimer = debounceTimer.current;
+    if (currentTimer) {
+      clearTimeout(currentTimer);
+    }
+    const newTimer = setTimeout(() => {
+      if (!editorRef.current || !monacoRef.current) {
+        return;
+      }
+      const hasNoErrors = validate(editorRef.current, monacoRef.current);
+      onChange(userContent, hasNoErrors);
+    }, 500);
+    debounceTimer.current = newTimer;
+  };
+  const handleEditorDidMount = createEditorDidMountHandler(editorRef, monacoRef);
   React92.useEffect(() => {
     const timerRef = debounceTimer;
     return () => {
@@ -5508,18 +5637,24 @@ var CssEditor = ({ value, onChange }) => {
       height: "100%",
       language: "css",
       theme: theme.palette.mode === "dark" ? "vs-dark" : "vs",
-      defaultValue: setVisualContent(value),
+      value: setVisualContent(value),
       onMount: handleEditorDidMount,
+      onChange: handleEditorChange,
       options: {
-        lineNumbers: "off",
-        folding: false,
-        showFoldingControls: "never",
+        lineNumbers: "on",
+        folding: true,
         minimap: { enabled: false },
         fontFamily: "Roboto, Arial, Helvetica, Verdana, sans-serif",
         fontSize: 12,
         renderLineHighlight: "none",
         hideCursorInOverviewRuler: true,
-        fixedOverflowWidgets: true
+        fixedOverflowWidgets: true,
+        suggestFontSize: 10,
+        suggestLineHeight: 14,
+        stickyScroll: {
+          enabled: false
+        },
+        lineDecorationsWidth: 2
       }
     }
   ), /* @__PURE__ */ React92.createElement(