@elementor/editor-controls 3.32.0-94 → 3.33.0-100

package/dist/index.mjs

@@ -1186,6 +1186,42 @@ import { __ as __5, sprintf } from "@wordpress/i18n";
 import * as React24 from "react";
 import { createContext as createContext6, useState as useState6 } from "react";
 import { usePopupState as usePopupState3 } from "@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 = createContext6(null);
 var EMPTY_OPEN_ITEM = -1;
 var useRepeaterContext = () => {
@@ -1234,9 +1270,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)];
@@ -5068,6 +5111,29 @@ var transitionsItemsList = transitionProperties.map((category) => ({
   items: category.properties.map((property) => property.label)
 }));
 
+// src/controls/transition-control/trainsition-events.ts
+import { getSelectedElements } from "@elementor/editor-elements";
+import { sendMixpanelEvent } from "@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 = getSelectedElements();
+    const widgetType = selectedElements[0]?.type ?? null;
+    sendMixpanelEvent({
+      transition_type: value ?? "unknown",
+      ...transitionRepeaterMixpanelEvent,
+      widget_type: widgetType
+    });
+  });
+}
+
 // src/controls/transition-control/transition-selector.tsx
 import * as React89 from "react";
 import { useRef as useRef23 } from "react";
@@ -5225,6 +5291,7 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React90.createElement(
   /* @__PURE__ */ React90.createElement(AlertTitle2, null, __47("Transitions", "elementor")),
   /* @__PURE__ */ React90.createElement(Box18, { component: "span" }, /* @__PURE__ */ React90.createElement(Typography6, { variant: "body2" }, __47("Switch to 'Normal' state to add a transition.", "elementor")))
 );
+subscribeToTransitionEvent();
 var TransitionRepeaterControl = createControl(
   ({
     recentlyUsedListGetter,
@@ -5272,8 +5339,15 @@ var EditorWrapper = styled9(Box19)`
 	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 = styled9(Button5)`
@@ -5364,6 +5438,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
 import * as React91 from "react";
@@ -5410,6 +5494,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();
@@ -5423,63 +5561,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 }) => {
@@ -5497,7 +5588,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 () => {
@@ -5514,18 +5625,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(