@elementor/editor-controls 4.4.0-1085 → 4.4.0-1087

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": "4.4.0-1085",
+  "version": "4.4.0-1087",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.4.0-1085",
-    "@elementor/editor-elements": "4.4.0-1085",
-    "@elementor/editor-props": "4.4.0-1085",
-    "@elementor/editor-responsive": "4.4.0-1085",
-    "@elementor/editor-ui": "4.4.0-1085",
-    "@elementor/editor-v1-adapters": "4.4.0-1085",
-    "@elementor/env": "4.4.0-1085",
-    "@elementor/events": "4.4.0-1085",
-    "@elementor/http-client": "4.4.0-1085",
+    "@elementor/editor-current-user": "4.4.0-1087",
+    "@elementor/editor-elements": "4.4.0-1087",
+    "@elementor/editor-props": "4.4.0-1087",
+    "@elementor/editor-responsive": "4.4.0-1087",
+    "@elementor/editor-ui": "4.4.0-1087",
+    "@elementor/editor-v1-adapters": "4.4.0-1087",
+    "@elementor/env": "4.4.0-1087",
+    "@elementor/events": "4.4.0-1087",
+    "@elementor/http-client": "4.4.0-1087",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.4.0-1085",
-    "@elementor/query": "4.4.0-1085",
-    "@elementor/schema": "4.4.0-1085",
-    "@elementor/session": "4.4.0-1085",
+    "@elementor/locations": "4.4.0-1087",
+    "@elementor/query": "4.4.0-1087",
+    "@elementor/schema": "4.4.0-1087",
+    "@elementor/session": "4.4.0-1087",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.4.0-1085",
-    "@elementor/wp-media": "4.4.0-1085",
+    "@elementor/utils": "4.4.0-1087",
+    "@elementor/wp-media": "4.4.0-1087",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/controls/notice-control.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { ajax } from '@elementor/editor-v1-adapters';
+import { BulbIcon } from '@elementor/icons';
+import { Alert, AlertAction, type AlertProps, AlertTitle, styled, Typography } from '@elementor/ui';
+
+import { createControl } from '../create-control';
+
+type NoticeType = 'info' | 'success' | 'warning' | 'danger';
+
+// Elementor's `Alert` forces `.MuiAlertTitle-root { marginBottom: 0 }` via a selector scoped to the
+// Alert's own class. Repeating the `.MuiAlertTitle-root` class here matches that selector's specificity
+// so this override applies reliably regardless of stylesheet insertion order.
+const NoticeTitle = styled( AlertTitle )( {
+	'&.MuiAlertTitle-root.MuiAlertTitle-root': {
+		marginBottom: 4,
+		fontStyle: 'italic',
+	},
+} );
+
+type NoticeControlProps = {
+	noticeType?: NoticeType;
+	heading?: string;
+	content?: string;
+	dismissible?: string;
+	buttonText?: string;
+	buttonUrl?: string;
+};
+
+type ExtendedWindow = Window & {
+	elementor?: {
+		config?: {
+			user?: {
+				dismissed_editor_notices?: string[];
+			};
+		};
+	};
+};
+
+const markNoticeAsDismissedInSession = ( dismissId: string ) => {
+	const dismissedNotices = ( window as ExtendedWindow ).elementor?.config?.user?.dismissed_editor_notices;
+
+	if ( dismissedNotices && ! dismissedNotices.includes( dismissId ) ) {
+		dismissedNotices.push( dismissId );
+	}
+};
+
+export const NoticeControl = createControl(
+	( { noticeType = 'info', heading, content, dismissible, buttonText, buttonUrl }: NoticeControlProps ) => {
+		const [ isDismissed, setIsDismissed ] = useState( false );
+
+		if ( isDismissed || ! content ) {
+			return null;
+		}
+
+		const severity: AlertProps[ 'severity' ] = noticeType === 'danger' ? 'error' : noticeType;
+		const icon = noticeType === 'info' ? <BulbIcon fontSize="inherit" /> : undefined;
+
+		const handleDismiss = () => {
+			setIsDismissed( true );
+
+			if ( ! dismissible ) {
+				return;
+			}
+
+			markNoticeAsDismissedInSession( dismissible );
+
+			ajax.load( {
+				action: 'dismissed_editor_notices',
+				unique_id: `dismiss-editor-notice-${ dismissible }`,
+				data: { dismissId: dismissible },
+			} ).catch( () => {} );
+		};
+
+		const handleActionClick = () => {
+			setIsDismissed( true );
+
+			if ( dismissible ) {
+				markNoticeAsDismissedInSession( dismissible );
+			}
+		};
+
+		return (
+			<Alert variant="outlined" severity={ severity } icon={ icon } size="small" onClose={ handleDismiss }>
+				{ heading && <NoticeTitle>{ heading }</NoticeTitle> }
+				<Typography variant="caption" color="textSecondary" sx={ { fontStyle: 'italic' } }>
+					{ content }
+				</Typography>
+				{ buttonText && buttonUrl && (
+					<AlertAction
+						variant="contained"
+						color={ severity }
+						target="_blank"
+						rel="noopener noreferrer"
+						href={ buttonUrl }
+						onClick={ handleActionClick }
+						sx={ { mt: 2 } }
+					>
+						{ buttonText }
+					</AlertAction>
+				) }
+			</Alert>
+		);
+	}
+);

package/src/index.ts

@@ -51,6 +51,7 @@ export { TimeRangeControl } from './controls/time-range-control';
 export { InlineEditingControl } from './controls/inline-editing-control';
 export { EmailFormActionControl } from './controls/email-form-action-control';
 export { AttachmentTypeControl } from './controls/attachment-type-control';
+export { NoticeControl } from './controls/notice-control';
 export { UnstableSizeControl } from './controls/size-control/unstable-size-control';
 export { GridSpanControl } from './controls/grid-span-control';