@elementor/editor-app-bar 4.3.0-999 → 4.3.0-beta2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-app-bar",
   "description": "App Bar extension for @elementor/editor",
-  "version": "4.3.0-999",
+  "version": "4.3.0-beta2",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,18 +40,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.3.0-999",
-    "@elementor/editor-ui": "4.3.0-999",
-    "@elementor/http-client": "4.3.0-999",
-    "@elementor/editor": "4.3.0-999",
-    "@elementor/editor-documents": "4.3.0-999",
-    "@elementor/editor-mcp": "4.3.0-999",
-    "@elementor/editor-responsive": "4.3.0-999",
-    "@elementor/editor-v1-adapters": "4.3.0-999",
+    "@elementor/editor-current-user": "4.3.0-beta2",
+    "@elementor/editor-ui": "4.3.0-beta2",
+    "@elementor/http-client": "4.3.0-beta2",
+    "@elementor/editor": "4.3.0-beta2",
+    "@elementor/editor-documents": "4.3.0-beta2",
+    "@elementor/editor-mcp": "4.3.0-beta2",
+    "@elementor/editor-responsive": "4.3.0-beta2",
+    "@elementor/editor-v1-adapters": "4.3.0-beta2",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.3.0-999",
-    "@elementor/menus": "4.3.0-999",
-    "@elementor/events": "4.3.0-999",
+    "@elementor/locations": "4.3.0-beta2",
+    "@elementor/menus": "4.3.0-beta2",
+    "@elementor/events": "4.3.0-beta2",
     "@elementor/ui": "1.37.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/actions/toggle-action.tsx

@@ -8,6 +8,7 @@ import ToolbarMenuToggleItem from '../ui/toolbar-menu-toggle-item';
 export type Props = {
 	title: string;
 	icon: ElementType;
+	id?: string;
 	selected?: boolean;
 	disabled?: boolean;
 	visible?: boolean;

package/src/components/locations/utilities-menu-location.tsx

@@ -14,18 +14,13 @@ export default function UtilitiesMenuLocation() {
 
 	// If there are more items than the allowed max, show the max inline and the rest in the popover.
 	// Otherwise, display all items inline.
-	const shouldUsePopover = menuItems.default.length > maxToolbarActions + 1;
+	const shouldUsePopover = menuItems.default.length > maxToolbarActions;
 
 	const toolbarMenuItems = shouldUsePopover ? menuItems.default.slice( 0, maxToolbarActions ) : menuItems.default;
 	const popoverMenuItems = shouldUsePopover ? menuItems.default.slice( maxToolbarActions ) : [];
 
 	return (
 		<ToolbarMenu>
-			{ toolbarMenuItems.map( ( { MenuItem, id } ) => (
-				<Fragment key={ id }>
-					<MenuItem />
-				</Fragment>
-			) ) }
 			{ popoverMenuItems.length > 0 && (
 				<ToolbarMenuMore id="elementor-editor-app-bar-utilities-more">
 					{ popoverMenuItems.map( ( { MenuItem, id } ) => (
@@ -33,6 +28,11 @@ export default function UtilitiesMenuLocation() {
 					) ) }
 				</ToolbarMenuMore>
 			) }
+			{ toolbarMenuItems.map( ( { MenuItem, id } ) => (
+				<Fragment key={ id }>
+					<MenuItem />
+				</Fragment>
+			) ) }
 		</ToolbarMenu>
 	);
 }

package/src/constants.ts

@@ -9,6 +9,6 @@ export type MaxToolbarActions = {
 };
 
 export const DEFAULT_MAX_TOOLBAR_ACTIONS: MaxToolbarActions = {
-	tools: 5,
-	utilities: 4,
+	tools: 6,
+	utilities: 5,
 };

package/src/extensions/angie/components/angie-guide-location.tsx

@@ -84,7 +84,7 @@ export function AngieGuideLocation() {
 					],
 				} }
 			>
-				<span />
+				<span style={ { display: 'contents' } } />
 			</Infotip>
 		</ThemeProvider>
 	);

package/src/extensions/angie/hooks/use-action-props.ts

@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
-import { isAngieAvailable } from '@elementor/editor-mcp';
 import { trackEvent } from '@elementor/events';
 import { AngieIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
+import { useIsAngieAvailable } from '../../../hooks/use-is-angie-available';
 import { AI_WIDGET_CTA_VIEWED_EVENT, ANGIE_GUIDE_TOGGLE_EVENT } from '../angie-consts';
 
 export function useActionProps() {
-	const hasAngieInstalled = isAngieAvailable();
+	const hasAngieInstalled = useIsAngieAvailable();
 	const visible = ! hasAngieInstalled;
 
 	useEffect( () => {

package/src/extensions/documents-settings/index.ts

@@ -4,7 +4,7 @@ import useActionProps from './hooks/use-action-props';
 export function init() {
 	toolsMenu.registerToggleAction( {
 		id: 'document-settings-button',
-		priority: 3,
+		priority: 5,
 		useProps: useActionProps,
 	} );
 }

package/src/extensions/elements/hooks/use-action-props.ts

@@ -13,6 +13,7 @@ export default function useActionProps() {
 	return {
 		title: __( 'Add Element', 'elementor' ),
 		icon: PlusIcon,
+		id: 'ele-add-element',
 		onClick: () => {
 			const extendedWindow = window as unknown as ExtendedWindow;
 			const config = extendedWindow?.elementorCommon?.eventsManager?.config;

package/src/extensions/help/hooks/use-action-props.ts

@@ -1,26 +1,48 @@
+import { isAngieAvailable, openAngieInAskMode } from '@elementor/editor-mcp';
 import { HelpIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
 import { type ExtendedWindow } from '../../../types';
 
+const HELP_CENTER_URL = 'https://go.elementor.com/editor-top-bar-learn/';
+const HELP_CENTER_ANGIE_PROMPT = `${ __( 'Help me with', 'elementor' ) } `;
+
+const dispatchHelpClickEvent = () => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+	const config = extendedWindow?.elementorCommon?.eventsManager?.config;
+
+	if ( config ) {
+		extendedWindow.elementorCommon.eventsManager.dispatchEvent( config.names.topBar.help, {
+			location: config.locations.topBar,
+			secondaryLocation: config.secondaryLocations.help,
+			trigger: config.triggers.click,
+			element: config.elements.buttonIcon,
+		} );
+	}
+};
+
 export default function useActionProps() {
+	const hasAngieActive = isAngieAvailable();
+
+	if ( hasAngieActive ) {
+		return {
+			title: __( 'Help Center', 'elementor' ),
+			icon: HelpIcon,
+			onClick: ( event: React.MouseEvent ) => {
+				event.preventDefault();
+				dispatchHelpClickEvent();
+				openAngieInAskMode( HELP_CENTER_ANGIE_PROMPT );
+			},
+		};
+	}
+
 	return {
 		title: __( 'Help Center', 'elementor' ),
-		href: 'https://go.elementor.com/editor-top-bar-learn/',
+		href: HELP_CENTER_URL,
 		icon: HelpIcon,
 		target: '_blank',
 		onClick: () => {
-			const extendedWindow = window as unknown as ExtendedWindow;
-			const config = extendedWindow?.elementorCommon?.eventsManager?.config;
-
-			if ( config ) {
-				extendedWindow.elementorCommon.eventsManager.dispatchEvent( config.names.topBar.help, {
-					location: config.locations.topBar,
-					secondaryLocation: config.secondaryLocations.help,
-					trigger: config.triggers.click,
-					element: config.elements.buttonIcon,
-				} );
-			}
+			dispatchHelpClickEvent();
 		},
 	};
 }

package/src/extensions/history/index.ts

@@ -4,7 +4,7 @@ import useActionProps from './hooks/use-action-props';
 export function init() {
 	toolsMenu.registerToggleAction( {
 		id: 'open-history',
-		priority: 15,
+		priority: 3,
 		useProps: useActionProps,
 	} );
 }

package/src/hooks/use-is-angie-available.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { isAngieAvailable } from '@elementor/editor-mcp';
+
+export function useIsAngieAvailable(): boolean {
+	const [ available, setAvailable ] = useState( () => isAngieAvailable() );
+
+	useEffect( () => {
+		if ( available ) {
+			return;
+		}
+
+		if ( isAngieAvailable() ) {
+			setAvailable( true );
+			return;
+		}
+
+		const observer = new MutationObserver( () => {
+			if ( isAngieAvailable() ) {
+				observer.disconnect();
+				setAvailable( true );
+			}
+		} );
+
+		observer.observe( document.body, {
+			childList: true,
+			subtree: true,
+		} );
+
+		return () => observer.disconnect();
+	}, [ available ] );
+
+	return available;
+}