@elementor/editor-controls 3.33.0-113 → 3.33.0-115

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.33.0-113",
+  "version": "3.33.0-115",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,21 +40,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.33.0-113",
-    "@elementor/editor-elements": "3.33.0-113",
-    "@elementor/editor-props": "3.33.0-113",
-    "@elementor/editor-responsive": "3.33.0-113",
-    "@elementor/editor-ui": "3.33.0-113",
-    "@elementor/editor-v1-adapters": "3.33.0-113",
-    "@elementor/env": "3.33.0-113",
-    "@elementor/http-client": "3.33.0-113",
+    "@elementor/editor-current-user": "3.33.0-115",
+    "@elementor/editor-elements": "3.33.0-115",
+    "@elementor/editor-props": "3.33.0-115",
+    "@elementor/editor-responsive": "3.33.0-115",
+    "@elementor/editor-ui": "3.33.0-115",
+    "@elementor/editor-v1-adapters": "3.33.0-115",
+    "@elementor/env": "3.33.0-115",
+    "@elementor/http-client": "3.33.0-115",
     "@elementor/icons": "^1.51.1",
-    "@elementor/locations": "3.33.0-113",
-    "@elementor/query": "3.33.0-113",
-    "@elementor/session": "3.33.0-113",
+    "@elementor/locations": "3.33.0-115",
+    "@elementor/query": "3.33.0-115",
+    "@elementor/session": "3.33.0-115",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-113",
-    "@elementor/wp-media": "3.33.0-113",
+    "@elementor/utils": "3.33.0-115",
+    "@elementor/wp-media": "3.33.0-115",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0"
   },

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

@@ -10,6 +10,7 @@ export const EditorWrapper = styled( Box )`
 	.monaco-editor .suggest-widget {
 		width: 220px !important;
 		max-width: 220px !important;
+		z-index: 1001;
 	}
 
 	.visual-content-dimmed {

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

@@ -3,7 +3,10 @@ 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 { __ } from '@wordpress/i18n';
 
+import { FloatingActionsBar } from '../floating-bar';
+import { ClearIconButton } from '../icon-buttons/clear-icon-button';
 import { EditorWrapper } from './css-editor.styles';
 import { clearMarkersFromVisualContent, setCustomSyntaxRules, validate } from './css-validation';
 import { ResizeHandleComponent } from './resize-handle';
@@ -32,7 +35,8 @@ const getActual = ( value: string ): string => {
 
 const createEditorDidMountHandler = (
 	editorRef: React.MutableRefObject< editor.IStandaloneCodeEditor | null >,
-	monacoRef: React.MutableRefObject< MonacoEditor | null >
+	monacoRef: React.MutableRefObject< MonacoEditor | null >,
+	onUserContentChange: ( value: string ) => void
 ) => {
 	return ( editor: editor.IStandaloneCodeEditor, monaco: MonacoEditor ) => {
 		editorRef.current = editor;
@@ -42,6 +46,11 @@ const createEditorDidMountHandler = (
 
 		setCustomSyntaxRules( editor, monaco );
 
+		const initialCode = editor.getModel()?.getValue() ?? '';
+		const initialUserContent = getActual( initialCode );
+
+		onUserContentChange( initialUserContent );
+
 		monaco.editor.onDidChangeMarkers( () => {
 			setTimeout( () => clearMarkersFromVisualContent( editor, monaco ), 0 );
 		} );
@@ -57,6 +66,11 @@ export const CssEditor = ( { value, onChange }: CssEditorProps ) => {
 	const monacoRef = React.useRef< MonacoEditor | null >( null );
 	const debounceTimer = React.useRef< NodeJS.Timeout | null >( null );
 	const activeBreakpoint = useActiveBreakpoint();
+	const [ hasContent, setHasContent ] = React.useState( value.trim() !== '' );
+
+	const handleUserContentChange = React.useCallback( ( newValue: string ) => {
+		setHasContent( newValue.trim() !== '' );
+	}, [] );
 
 	const handleResize = React.useCallback( () => {
 		editorRef.current?.layout();
@@ -76,6 +90,8 @@ export const CssEditor = ( { value, onChange }: CssEditorProps ) => {
 		const code = editorRef.current?.getModel()?.getValue() ?? '';
 		const userContent = getActual( code );
 
+		setHasContent( userContent.trim() !== '' );
+
 		setCustomSyntaxRules( editorRef?.current, monacoRef.current );
 
 		const currentTimer = debounceTimer.current;
@@ -96,7 +112,9 @@ export const CssEditor = ( { value, onChange }: CssEditorProps ) => {
 		debounceTimer.current = newTimer;
 	};
 
-	const handleEditorDidMount = createEditorDidMountHandler( editorRef, monacoRef );
+	const handleEditorDidMount = createEditorDidMountHandler( editorRef, monacoRef, handleUserContentChange );
+
+	const handleReset = () => editorRef.current?.getModel()?.setValue( setVisualContent( '' ) );
 
 	React.useEffect( () => {
 		const timerRef = debounceTimer;
@@ -109,37 +127,51 @@ export const CssEditor = ( { value, onChange }: CssEditorProps ) => {
 	}, [] );
 
 	return (
-		<EditorWrapper ref={ containerRef }>
-			<Editor
-				key={ activeBreakpoint }
-				height="100%"
-				language="css"
-				theme={ theme.palette.mode === 'dark' ? 'vs-dark' : 'vs' }
-				value={ setVisualContent( value ) }
-				onMount={ handleEditorDidMount }
-				onChange={ handleEditorChange }
-				options={ {
-					lineNumbers: 'on',
-					folding: true,
-					minimap: { enabled: false },
-					fontFamily: 'Roboto, Arial, Helvetica, Verdana, sans-serif',
-					fontSize: 12,
-					renderLineHighlight: 'none',
-					hideCursorInOverviewRuler: true,
-					fixedOverflowWidgets: true,
-					suggestFontSize: 10,
-					suggestLineHeight: 14,
-					stickyScroll: {
-						enabled: false,
-					},
-					lineDecorationsWidth: 2,
-				} }
-			/>
-			<ResizeHandleComponent
-				onResize={ handleResize }
-				containerRef={ containerRef }
-				onHeightChange={ handleHeightChange }
-			/>
-		</EditorWrapper>
+		<FloatingActionsBar
+			actions={
+				hasContent
+					? [
+							<ClearIconButton
+								key="clear"
+								tooltipText={ __( 'Clear', 'elementor' ) }
+								onClick={ handleReset }
+							/>,
+					  ]
+					: []
+			}
+		>
+			<EditorWrapper ref={ containerRef }>
+				<Editor
+					key={ activeBreakpoint }
+					height="100%"
+					language="css"
+					theme={ theme.palette.mode === 'dark' ? 'vs-dark' : 'vs' }
+					value={ setVisualContent( value ) }
+					onMount={ handleEditorDidMount }
+					onChange={ handleEditorChange }
+					options={ {
+						lineNumbers: 'on',
+						folding: true,
+						minimap: { enabled: false },
+						fontFamily: 'Roboto, Arial, Helvetica, Verdana, sans-serif',
+						fontSize: 12,
+						renderLineHighlight: 'none',
+						hideCursorInOverviewRuler: true,
+						fixedOverflowWidgets: true,
+						suggestFontSize: 10,
+						suggestLineHeight: 14,
+						stickyScroll: {
+							enabled: false,
+						},
+						lineDecorationsWidth: 2,
+					} }
+				/>
+				<ResizeHandleComponent
+					onResize={ handleResize }
+					containerRef={ containerRef }
+					onHeightChange={ handleHeightChange }
+				/>
+			</EditorWrapper>
+		</FloatingActionsBar>
 	);
 };

package/src/components/icon-buttons/clear-icon-button.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { BrushBigIcon } from '@elementor/icons';
+import { IconButton, styled, Tooltip } from '@elementor/ui';
+
+type ClearIconButtonProps = {
+	onClick?: () => void;
+	tooltipText: React.ReactNode;
+	disabled?: boolean;
+	size?: 'tiny' | 'small' | 'medium' | 'large';
+};
+
+const CustomIconButton = styled( IconButton )( ( { theme } ) => ( {
+	width: theme.spacing( 2.5 ),
+	height: theme.spacing( 2.5 ),
+} ) );
+
+export const ClearIconButton = ( { tooltipText, onClick, disabled, size = 'tiny' }: ClearIconButtonProps ) => (
+	<Tooltip title={ tooltipText } placement="top" disableInteractive>
+		<CustomIconButton aria-label={ tooltipText } size={ size } onClick={ onClick } disabled={ disabled }>
+			<BrushBigIcon fontSize={ size } />
+		</CustomIconButton>
+	</Tooltip>
+);

package/src/index.ts

@@ -35,6 +35,7 @@ export { transitionProperties, transitionsItemsList } from './controls/transitio
 export { ControlFormLabel } from './components/control-form-label';
 export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
 export { CssEditor } from './components/css-code-editor/css-editor';
+export { ClearIconButton } from './components/icon-buttons/clear-icon-button';
 export { Repeater } from './components/repeater';
 
 // types