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

package/dist/index.mjs

@@ -197,8 +197,8 @@ import { AppBar as BaseAppBar, Box as Box3, Divider as Divider2, Grid, ThemeProv
 // src/constants.ts
 var MIN_APP_BAR_WIDTH = 800;
 var DEFAULT_MAX_TOOLBAR_ACTIONS = {
-  tools: 5,
-  utilities: 4
+  tools: 6,
+  utilities: 5
 };
 
 // src/contexts/app-bar-size-context.tsx
@@ -512,7 +512,7 @@ function AngieGuideLocation() {
         ]
       }
     },
-    /* @__PURE__ */ React16.createElement("span", null)
+    /* @__PURE__ */ React16.createElement("span", { style: { display: "contents" } })
   ));
 }
 
@@ -730,10 +730,10 @@ var { useMenuItems: useMenuItems4 } = utilitiesMenu;
 function UtilitiesMenuLocation() {
   const menuItems = useMenuItems4();
   const { utilities: maxToolbarActions } = useMaxToolbarActions();
-  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 /* @__PURE__ */ React22.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React22.createElement(Fragment4, { key: id }, /* @__PURE__ */ React22.createElement(MenuItem2, null))), popoverMenuItems.length > 0 && /* @__PURE__ */ React22.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-utilities-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React22.createElement(MenuItem2, { key: id }))));
+  return /* @__PURE__ */ React22.createElement(ToolbarMenu, null, popoverMenuItems.length > 0 && /* @__PURE__ */ React22.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-utilities-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React22.createElement(MenuItem2, { key: id }))), toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React22.createElement(Fragment4, { key: id }, /* @__PURE__ */ React22.createElement(MenuItem2, null))));
 }
 
 // src/components/app-bar.tsx
@@ -766,15 +766,44 @@ function AppBar() {
 }
 
 // src/extensions/angie/hooks/use-action-props.ts
-import { useEffect as useEffect5 } from "react";
-import { isAngieAvailable } from "@elementor/editor-mcp";
+import { useEffect as useEffect6 } from "react";
 import { trackEvent } from "@elementor/events";
 import { AngieIcon } from "@elementor/icons";
 import { __ as __7 } from "@wordpress/i18n";
+
+// src/hooks/use-is-angie-available.ts
+import { useEffect as useEffect5, useState as useState5 } from "react";
+import { isAngieAvailable } from "@elementor/editor-mcp";
+function useIsAngieAvailable() {
+  const [available, setAvailable] = useState5(() => isAngieAvailable());
+  useEffect5(() => {
+    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;
+}
+
+// src/extensions/angie/hooks/use-action-props.ts
 function useActionProps() {
-  const hasAngieInstalled = isAngieAvailable();
+  const hasAngieInstalled = useIsAngieAvailable();
   const visible = !hasAngieInstalled;
-  useEffect5(() => {
+  useEffect6(() => {
     if (!visible) {
       return;
     }
@@ -1287,7 +1316,7 @@ function useActionProps3() {
 function init5() {
   toolsMenu.registerToggleAction({
     id: "document-settings-button",
-    priority: 3,
+    priority: 5,
     useProps: useActionProps3
   });
 }
@@ -1304,6 +1333,7 @@ function useActionProps4() {
   return {
     title: __16("Add Element", "elementor"),
     icon: PlusIcon,
+    id: "ele-add-element",
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementorCommon?.eventsManager?.config;
@@ -1423,25 +1453,43 @@ function init8() {
 }
 
 // src/extensions/help/hooks/use-action-props.ts
+import { isAngieAvailable as isAngieAvailable2, openAngieInAskMode } from "@elementor/editor-mcp";
 import { HelpIcon } from "@elementor/icons";
 import { __ as __20 } from "@wordpress/i18n";
+var HELP_CENTER_URL = "https://go.elementor.com/editor-top-bar-learn/";
+var HELP_CENTER_ANGIE_PROMPT = `${__20("Help me with", "elementor")} `;
+var dispatchHelpClickEvent = () => {
+  const extendedWindow = window;
+  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
+    });
+  }
+};
 function useActionProps6() {
+  const hasAngieActive = isAngieAvailable2();
+  if (hasAngieActive) {
+    return {
+      title: __20("Help Center", "elementor"),
+      icon: HelpIcon,
+      onClick: (event) => {
+        event.preventDefault();
+        dispatchHelpClickEvent();
+        openAngieInAskMode(HELP_CENTER_ANGIE_PROMPT);
+      }
+    };
+  }
   return {
     title: __20("Help Center", "elementor"),
-    href: "https://go.elementor.com/editor-top-bar-learn/",
+    href: HELP_CENTER_URL,
     icon: HelpIcon,
     target: "_blank",
     onClick: () => {
-      const extendedWindow = window;
-      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();
     }
   };
 }
@@ -1490,7 +1538,7 @@ function useActionProps7() {
 function init10() {
   toolsMenu.registerToggleAction({
     id: "open-history",
-    priority: 15,
+    priority: 3,
     useProps: useActionProps7
   });
 }