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

package/dist/index.d.mts

@@ -288,6 +288,12 @@ declare const transitionsItemsList: {
 
 declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;
 
+type CssEditorProps = {
+    value: string;
+    onChange: (value: string) => void;
+};
+declare const CssEditor: ({ value, onChange }: CssEditorProps) => React$1.JSX.Element;
+
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
 type ControlComponent<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {
@@ -403,4 +409,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UnstableTransformRepeaterControl, UrlControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };
+export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UnstableTransformRepeaterControl, UrlControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };

package/dist/index.d.ts

@@ -288,6 +288,12 @@ declare const transitionsItemsList: {
 
 declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;
 
+type CssEditorProps = {
+    value: string;
+    onChange: (value: string) => void;
+};
+declare const CssEditor: ({ value, onChange }: CssEditorProps) => React$1.JSX.Element;
+
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
 type ControlComponent<TComponent extends AnyComponentType = AnyComponentType> = TComponent & {
@@ -403,4 +409,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UnstableTransformRepeaterControl, UrlControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };
+export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, CssEditor, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, type FontCategory, FontFamilyControl, GapControl, ImageControl, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, RepeatableControl, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransitionRepeaterControl, type Unit, UnstableTransformRepeaterControl, UrlControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterHeaderActions, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };

package/dist/index.js

@@ -40,6 +40,7 @@ __export(index_exports, {
   ControlFormLabel: () => ControlFormLabel,
   ControlReplacementsProvider: () => ControlReplacementsProvider,
   ControlToggleButtonGroup: () => ControlToggleButtonGroup,
+  CssEditor: () => CssEditor,
   EqualUnequalSizesControl: () => EqualUnequalSizesControl,
   FilterRepeaterControl: () => FilterRepeaterControl,
   FontFamilyControl: () => FontFamilyControl,
@@ -214,13 +215,13 @@ var usePropKeyContext = () => {
 var import_react3 = require("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) {
@@ -243,7 +244,7 @@ function useBoundProp(propTypeUtil) {
 }
 var useValidation = (propType) => {
   const [isValid, setIsValid] = (0, import_react3.useState)(true);
-  const validate = (value) => {
+  const validate2 = (value) => {
     let valid = true;
     if (propType.settings.required && value === null) {
       valid = false;
@@ -255,7 +256,7 @@ var useValidation = (propType) => {
   return {
     isValid,
     setIsValid,
-    validate,
+    validate: validate2,
     restoreValue
   };
 };
@@ -4315,7 +4316,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);
@@ -4345,7 +4346,7 @@ var KeyValueControl = createControl((props = {}) => {
       ...prev,
       [fieldType]: extractedValue
     }));
-    if (extractedValue && validate(extractedValue, fieldType)) {
+    if (extractedValue && validate2(extractedValue, fieldType)) {
       setValue({
         ...value,
         [fieldType]: newChangedValue
@@ -4995,6 +4996,287 @@ var UnstableTransformRepeaterControl = createControl(() => {
     /* @__PURE__ */ React82.createElement(RemoveItemAction, null)
   )));
 });
+
+// src/components/css-code-editor/css-editor.tsx
+var React84 = __toESM(require("react"));
+var import_editor_responsive2 = require("@elementor/editor-responsive");
+var import_ui72 = require("@elementor/ui");
+var import_react46 = require("@monaco-editor/react");
+
+// src/components/css-code-editor/css-editor.styles.ts
+var import_ui71 = require("@elementor/ui");
+var EditorWrapper = (0, import_ui71.styled)(import_ui71.Box)`
+	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 = (0, import_ui71.styled)(import_ui71.Button)`
+	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
+var import_i18n42 = require("@wordpress/i18n");
+var forbiddenPatterns = [
+  {
+    pattern: ":hover",
+    message: (0, import_i18n42.__)(
+      "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: (0, import_i18n42.__)(
+      "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: (0, import_i18n42.__)(
+      "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
+var React83 = __toESM(require("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 = (0, import_ui72.useTheme)();
+  const containerRef = React84.useRef(null);
+  const editorRef = React84.useRef(null);
+  const monacoRef = React84.useRef(null);
+  const debounceTimer = React84.useRef(null);
+  const activeBreakpoint = (0, import_editor_responsive2.useActiveBreakpoint)();
+  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(
+    import_react46.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
+    }
+  ));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AspectRatioControl,
@@ -5007,6 +5289,7 @@ var UnstableTransformRepeaterControl = createControl(() => {
   ControlFormLabel,
   ControlReplacementsProvider,
   ControlToggleButtonGroup,
+  CssEditor,
   EqualUnequalSizesControl,
   FilterRepeaterControl,
   FontFamilyControl,