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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "3.32.0-22",
+  "version": "3.32.0-24",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,24 +40,26 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.32.0-22",
-    "@elementor/editor-elements": "3.32.0-22",
-    "@elementor/editor-props": "3.32.0-22",
-    "@elementor/editor-responsive": "3.32.0-22",
-    "@elementor/editor-ui": "3.32.0-22",
-    "@elementor/editor-v1-adapters": "3.32.0-22",
-    "@elementor/env": "3.32.0-22",
-    "@elementor/http-client": "3.32.0-22",
+    "@elementor/editor-current-user": "3.32.0-24",
+    "@elementor/editor-elements": "3.32.0-24",
+    "@elementor/editor-props": "3.32.0-24",
+    "@elementor/editor-responsive": "3.32.0-24",
+    "@elementor/editor-ui": "3.32.0-24",
+    "@elementor/editor-v1-adapters": "3.32.0-24",
+    "@elementor/env": "3.32.0-24",
+    "@elementor/http-client": "3.32.0-24",
     "@elementor/icons": "^1.51.1",
-    "@elementor/locations": "3.32.0-22",
-    "@elementor/query": "3.32.0-22",
-    "@elementor/session": "3.32.0-22",
+    "@elementor/locations": "3.32.0-24",
+    "@elementor/query": "3.32.0-24",
+    "@elementor/session": "3.32.0-24",
     "@elementor/ui": "1.36.2",
-    "@elementor/utils": "3.32.0-22",
-    "@elementor/wp-media": "3.32.0-22",
-    "@wordpress/i18n": "^5.13.0"
+    "@elementor/utils": "3.32.0-24",
+    "@elementor/wp-media": "3.32.0-24",
+    "@wordpress/i18n": "^5.13.0",
+    "@monaco-editor/react": "^4.7.0"
   },
   "devDependencies": {
+    "monaco-types": "^0.1.0",
     "tsup": "^8.3.5"
   },
   "peerDependencies": {

package/src/components/css-code-editor/css-editor.styles.ts

@@ -0,0 +1,45 @@
+import { Box, Button, styled } from '@elementor/ui';
+
+export const EditorWrapper = styled( 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;
+	}
+`;
+
+export const ResizeHandle = styled( 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;
+	}
+`;

package/src/components/css-code-editor/css-editor.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import type { editor, MonacoEditor } from 'monaco-types';
+import { useActiveBreakpoint } from '@elementor/editor-responsive';
+import { useTheme } from '@elementor/ui';
+import { Editor } from '@monaco-editor/react';
+
+import { EditorWrapper } from './css-editor.styles';
+import { setCustomSyntaxRules, validate } from './css-validation';
+import { ResizeHandleComponent } from './resize-handle';
+
+type CssEditorProps = {
+	value: string;
+	onChange: ( value: string ) => void;
+};
+
+const setVisualContent = ( value: string ): string => {
+	const trimmed = value.trim();
+	return `element.style {\n${ trimmed ? '  ' + trimmed.replace( /\n/g, '\n  ' ) + '\n' : '  \n' }}`;
+};
+
+const getActual = ( value: string ): string => {
+	const lines = value.split( '\n' );
+	if ( lines.length < 2 ) {
+		return '';
+	}
+	return lines
+		.slice( 1, -1 )
+		.map( ( line ) => line.replace( /^ {2}/, '' ) )
+		.join( '\n' );
+};
+
+const preventChangeOnVisualContent = ( editor: editor.IStandaloneCodeEditor, monaco: MonacoEditor ) => {
+	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();
+			}
+		}
+	} );
+};
+
+const createEditorDidMountHandler = (
+	editorRef: React.MutableRefObject< editor.IStandaloneCodeEditor | null >,
+	monacoRef: React.MutableRefObject< MonacoEditor | null >,
+	debounceTimer: React.MutableRefObject< NodeJS.Timeout | null >,
+	onChange: ( value: string ) => void
+) => {
+	return ( editor: editor.IStandaloneCodeEditor, monaco: MonacoEditor ) => {
+		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;
+		} );
+	};
+};
+
+export const CssEditor = ( { value, onChange }: CssEditorProps ) => {
+	const theme = useTheme();
+	const containerRef = React.useRef< HTMLDivElement >( null );
+	const editorRef = React.useRef< editor.IStandaloneCodeEditor | null >( null );
+	const monacoRef = React.useRef< MonacoEditor | null >( null );
+	const debounceTimer = React.useRef< NodeJS.Timeout | null >( null );
+	const activeBreakpoint = useActiveBreakpoint();
+
+	const handleResize = React.useCallback( () => {
+		editorRef.current?.layout();
+	}, [] );
+
+	const handleHeightChange = React.useCallback( ( height: number ) => {
+		if ( containerRef.current ) {
+			containerRef.current.style.height = `${ height }px`;
+		}
+	}, [] );
+
+	const handleEditorDidMount = createEditorDidMountHandler( editorRef, monacoRef, debounceTimer, onChange );
+
+	React.useEffect( () => {
+		const timerRef = debounceTimer;
+		return () => {
+			const timer = timerRef.current;
+			if ( timer ) {
+				clearTimeout( timer );
+			}
+		};
+	}, [] );
+
+	return (
+		<EditorWrapper ref={ containerRef }>
+			<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,
+				} }
+			/>
+			<ResizeHandleComponent
+				onResize={ handleResize }
+				containerRef={ containerRef }
+				onHeightChange={ handleHeightChange }
+			/>
+		</EditorWrapper>
+	);
+};

package/src/components/css-code-editor/css-validation.ts

@@ -0,0 +1,62 @@
+import type { editor, MonacoEditor } from 'monaco-types';
+import { __ } from '@wordpress/i18n';
+
+const forbiddenPatterns = [
+	{
+		pattern: ':hover',
+		message: __(
+			'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: __(
+			'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: __(
+			'The use of @media is not permitted. Instead, switch to the desired breakpoint and add your custom code there.',
+			'elementor'
+		),
+	},
+];
+
+export function setCustomSyntaxRules( editor: editor.IStandaloneCodeEditor, monaco: MonacoEditor ): boolean {
+	const model = editor.getModel();
+	if ( ! model ) {
+		return true;
+	}
+
+	const customMarkers: editor.IMarkerData[] = [];
+
+	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;
+}
+
+export function validate( editor: editor.IStandaloneCodeEditor, monaco: MonacoEditor ): boolean {
+	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;
+}

package/src/components/css-code-editor/resize-handle.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { ResizeHandle } from './css-editor.styles';
+
+type ResizeHandleProps = {
+	onResize: ( height: number ) => void;
+	containerRef: React.RefObject< HTMLDivElement >;
+	onHeightChange?: ( height: number ) => void;
+};
+
+export const ResizeHandleComponent = ( { onResize, containerRef, onHeightChange }: ResizeHandleProps ) => {
+	const handleResizeMove = React.useCallback(
+		( e: MouseEvent ) => {
+			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 = React.useCallback( () => {
+		document.removeEventListener( 'mousemove', handleResizeMove );
+		document.removeEventListener( 'mouseup', handleResizeEnd );
+	}, [ handleResizeMove ] );
+
+	const handleResizeStart = React.useCallback(
+		( e: React.MouseEvent ) => {
+			e.preventDefault();
+			e.stopPropagation();
+			document.addEventListener( 'mousemove', handleResizeMove );
+			document.addEventListener( 'mouseup', handleResizeEnd );
+		},
+		[ handleResizeMove, handleResizeEnd ]
+	);
+
+	React.useEffect( () => {
+		return () => {
+			document.removeEventListener( 'mousemove', handleResizeMove );
+			document.removeEventListener( 'mouseup', handleResizeEnd );
+		};
+	}, [ handleResizeMove, handleResizeEnd ] );
+
+	return (
+		<ResizeHandle
+			onMouseDown={ handleResizeStart }
+			aria-label="Resize editor height"
+			title="Drag to resize editor height"
+		/>
+	);
+};

package/src/index.ts

@@ -34,6 +34,7 @@ export { transitionProperties, transitionsItemsList } from './controls/transitio
 // components
 export { ControlFormLabel } from './components/control-form-label';
 export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
+export { CssEditor } from './components/css-code-editor/css-editor';
 
 // types
 export type { ControlComponent } from './create-control';