@elementor/editor-controls 3.33.0-97 → 3.33.0-98

package/dist/index.d.mts

@@ -317,7 +317,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

@@ -317,7 +317,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

@@ -5333,8 +5333,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)`
@@ -5425,6 +5432,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"));
@@ -5471,6 +5488,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();
@@ -5484,44 +5555,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) => {
   return (editor, monaco) => {
     editorRef.current = editor;
     monacoRef.current = monaco;
-    preventChangeOnVisualContent(editor, monaco);
+    preventChangeOnVisualContent(editor);
     setCustomSyntaxRules(editor, monaco);
+    monaco.editor.onDidChangeMarkers(() => {
+      setTimeout(() => clearMarkersFromVisualContent(editor, monaco), 0);
+    });
+    editor.setPosition({ lineNumber: 2, column: (editor.getModel()?.getLineContent(2).length ?? 0) + 1 });
     editor.onDidChangeModelContent(() => {
       const code = editor.getModel()?.getValue() ?? "";
       const userContent = getActual(code);
@@ -5535,9 +5578,7 @@ var createEditorDidMountHandler = (editorRef, monacoRef, debounceTimer, onChange
           return;
         }
         const hasNoErrors = validate(editorRef.current, monacoRef.current);
-        if (hasNoErrors) {
-          onChange(userContent);
-        }
+        onChange(userContent, hasNoErrors);
       }, 500);
       debounceTimer.current = newTimer;
     });
@@ -5575,18 +5616,23 @@ var CssEditor = ({ value, onChange }) => {
       height: "100%",
       language: "css",
       theme: theme.palette.mode === "dark" ? "vs-dark" : "vs",
-      defaultValue: setVisualContent(value),
+      value: setVisualContent(value),
       onMount: handleEditorDidMount,
       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(