@elementor/editor-controls 3.32.0-23 → 3.32.0-24

package/dist/index.mjs

@@ -130,13 +130,13 @@ var usePropKeyContext = () => {
 import { useState } from "react";
 function useBoundProp(propTypeUtil) {
   const propKeyContext = usePropKeyContext();
-  const { isValid, validate, restoreValue } = useValidation(propKeyContext.propType);
+  const { isValid, validate: validate2, restoreValue } = useValidation(propKeyContext.propType);
   const disabled = propKeyContext.isDisabled?.(propKeyContext.propType);
   if (!propTypeUtil) {
     return { ...propKeyContext, disabled };
   }
   function setValue(value2, options, meta) {
-    if (!validate(value2)) {
+    if (!validate2(value2)) {
       return;
     }
     if (value2 === null) {
@@ -159,7 +159,7 @@ function useBoundProp(propTypeUtil) {
 }
 var useValidation = (propType) => {
   const [isValid, setIsValid] = useState(true);
-  const validate = (value) => {
+  const validate2 = (value) => {
     let valid = true;
     if (propType.settings.required && value === null) {
       valid = false;
@@ -171,7 +171,7 @@ var useValidation = (propType) => {
   return {
     isValid,
     setIsValid,
-    validate,
+    validate: validate2,
     restoreValue
   };
 };
@@ -4318,7 +4318,7 @@ var KeyValueControl = createControl((props = {}) => {
     ],
     [props.regexKey, props.regexValue, props.validationErrorMessage]
   );
-  const validate = (newValue, fieldType) => {
+  const validate2 = (newValue, fieldType) => {
     if (fieldType === "key" && keyRegex) {
       const isValid = keyRegex.test(newValue);
       setKeyError(isValid ? "" : errMsg);
@@ -4348,7 +4348,7 @@ var KeyValueControl = createControl((props = {}) => {
       ...prev,
       [fieldType]: extractedValue
     }));
-    if (extractedValue && validate(extractedValue, fieldType)) {
+    if (extractedValue && validate2(extractedValue, fieldType)) {
       setValue({
         ...value,
         [fieldType]: newChangedValue
@@ -5008,6 +5008,287 @@ var UnstableTransformRepeaterControl = createControl(() => {
     /* @__PURE__ */ React82.createElement(RemoveItemAction, null)
   )));
 });
+
+// src/components/css-code-editor/css-editor.tsx
+import * as React84 from "react";
+import { useActiveBreakpoint as useActiveBreakpoint2 } from "@elementor/editor-responsive";
+import { useTheme as useTheme2 } from "@elementor/ui";
+import { Editor } from "@monaco-editor/react";
+
+// src/components/css-code-editor/css-editor.styles.ts
+import { Box as Box14, Button as Button5, styled as styled7 } from "@elementor/ui";
+var EditorWrapper = styled7(Box14)`
+	border: 1px solid var( --e-a-border-color );
+	border-radius: 8px;
+	padding: 10px 12px;
+	position: relative;
+	height: 200px;
+
+	.monaco-editor .colorpicker-widget {
+		z-index: 99999999 !important;
+	}
+`;
+var ResizeHandle = styled7(Button5)`
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 6px;
+	cursor: ns-resize;
+	background: transparent;
+	border: none;
+	padding: 0;
+
+	&:hover {
+		background: rgba( 0, 0, 0, 0.05 );
+	}
+
+	&:active {
+		background: rgba( 0, 0, 0, 0.1 );
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% );
+		width: 30px;
+		height: 2px;
+		background: var( --e-a-border-color );
+		border-radius: 1px;
+	}
+`;
+
+// src/components/css-code-editor/css-validation.ts
+import { __ as __42 } from "@wordpress/i18n";
+var forbiddenPatterns = [
+  {
+    pattern: ":hover",
+    message: __42(
+      "The use of pseudo-states is not permitted. Instead, switch to the desired pseudo state and add your custom code there.",
+      "elementor"
+    )
+  },
+  {
+    pattern: ":active",
+    message: __42(
+      "The use of pseudo-states is not permitted. Instead, switch to the desired pseudo state and add your custom code there.",
+      "elementor"
+    )
+  },
+  {
+    pattern: "@media",
+    message: __42(
+      "The use of @media is not permitted. Instead, switch to the desired breakpoint and add your custom code there.",
+      "elementor"
+    )
+  }
+];
+function setCustomSyntaxRules(editor, monaco) {
+  const model = editor.getModel();
+  if (!model) {
+    return true;
+  }
+  const customMarkers = [];
+  forbiddenPatterns.forEach((rule) => {
+    const matches = model.findMatches(rule.pattern, true, false, true, null, true);
+    matches.forEach((match) => {
+      customMarkers.push({
+        severity: monaco.MarkerSeverity.Error,
+        message: rule.message,
+        startLineNumber: match.range.startLineNumber,
+        startColumn: match.range.startColumn,
+        endLineNumber: match.range.endLineNumber,
+        endColumn: match.range.endColumn,
+        source: "custom-css-rules"
+      });
+    });
+  });
+  monaco.editor.setModelMarkers(model, "custom-css-rules", customMarkers);
+  return customMarkers.length === 0;
+}
+function validate(editor, monaco) {
+  const model = editor.getModel();
+  if (!model) {
+    return true;
+  }
+  const allMarkers = monaco.editor.getModelMarkers({ resource: model.uri });
+  return allMarkers.filter((marker) => marker.severity === monaco.MarkerSeverity.Error).length === 0;
+}
+
+// src/components/css-code-editor/resize-handle.tsx
+import * as React83 from "react";
+var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
+  const handleResizeMove = React83.useCallback(
+    (e) => {
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      const containerRect = container.getBoundingClientRect();
+      const newHeight = Math.max(100, e.clientY - containerRect.top);
+      onHeightChange?.(newHeight);
+      onResize(newHeight);
+    },
+    [containerRef, onResize, onHeightChange]
+  );
+  const handleResizeEnd = React83.useCallback(() => {
+    document.removeEventListener("mousemove", handleResizeMove);
+    document.removeEventListener("mouseup", handleResizeEnd);
+  }, [handleResizeMove]);
+  const handleResizeStart = React83.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      document.addEventListener("mousemove", handleResizeMove);
+      document.addEventListener("mouseup", handleResizeEnd);
+    },
+    [handleResizeMove, handleResizeEnd]
+  );
+  React83.useEffect(() => {
+    return () => {
+      document.removeEventListener("mousemove", handleResizeMove);
+      document.removeEventListener("mouseup", handleResizeEnd);
+    };
+  }, [handleResizeMove, handleResizeEnd]);
+  return /* @__PURE__ */ React83.createElement(
+    ResizeHandle,
+    {
+      onMouseDown: handleResizeStart,
+      "aria-label": "Resize editor height",
+      title: "Drag to resize editor height"
+    }
+  );
+};
+
+// src/components/css-code-editor/css-editor.tsx
+var setVisualContent = (value) => {
+  const trimmed = value.trim();
+  return `element.style {
+${trimmed ? "  " + trimmed.replace(/\n/g, "\n  ") + "\n" : "  \n"}}`;
+};
+var getActual = (value) => {
+  const lines = value.split("\n");
+  if (lines.length < 2) {
+    return "";
+  }
+  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);
+    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;
+    });
+  };
+};
+var CssEditor = ({ value, onChange }) => {
+  const theme = useTheme2();
+  const containerRef = React84.useRef(null);
+  const editorRef = React84.useRef(null);
+  const monacoRef = React84.useRef(null);
+  const debounceTimer = React84.useRef(null);
+  const activeBreakpoint = useActiveBreakpoint2();
+  const handleResize = React84.useCallback(() => {
+    editorRef.current?.layout();
+  }, []);
+  const handleHeightChange = React84.useCallback((height) => {
+    if (containerRef.current) {
+      containerRef.current.style.height = `${height}px`;
+    }
+  }, []);
+  const handleEditorDidMount = createEditorDidMountHandler(editorRef, monacoRef, debounceTimer, onChange);
+  React84.useEffect(() => {
+    const timerRef = debounceTimer;
+    return () => {
+      const timer = timerRef.current;
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ React84.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React84.createElement(
+    Editor,
+    {
+      key: activeBreakpoint,
+      height: "100%",
+      language: "css",
+      theme: theme.palette.mode === "dark" ? "vs-dark" : "vs",
+      defaultValue: setVisualContent(value),
+      onMount: handleEditorDidMount,
+      options: {
+        lineNumbers: "off",
+        folding: false,
+        showFoldingControls: "never",
+        minimap: { enabled: false },
+        fontFamily: "Roboto, Arial, Helvetica, Verdana, sans-serif",
+        fontSize: 12,
+        renderLineHighlight: "none",
+        hideCursorInOverviewRuler: true,
+        fixedOverflowWidgets: true
+      }
+    }
+  ), /* @__PURE__ */ React84.createElement(
+    ResizeHandleComponent,
+    {
+      onResize: handleResize,
+      containerRef,
+      onHeightChange: handleHeightChange
+    }
+  ));
+};
 export {
   AspectRatioControl,
   BackgroundControl,
@@ -5019,6 +5300,7 @@ export {
   ControlFormLabel,
   ControlReplacementsProvider,
   ControlToggleButtonGroup,
+  CssEditor,
   EqualUnequalSizesControl,
   FilterRepeaterControl,
   FontFamilyControl,