@elementor/editor-site-navigation 0.19.10 → 0.19.11

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.11](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.19.10...@elementor/editor-site-navigation@0.19.11) (2024-01-04)
+
+
+### Bug Fixes
+
+* **editor-site-navigation:** fix state between title on pages panel and recent pages [ED-13273] ([#151](https://github.com/elementor/elementor-packages/issues/151)) ([dd9aeff](https://github.com/elementor/elementor-packages/commit/dd9aeff9adebef5322c43c12f7f7bd48269a7885))
+
+
+
+
+
 ## [0.19.10](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.19.9...@elementor/editor-site-navigation@0.19.10) (2024-01-02)
 
 

package/dist/index.js

@@ -249,14 +249,7 @@ function RecentlyEdited() {
     variant: "popover",
     popupId: "elementor-v2-top-bar-recently-edited"
   });
-  const getCurrentDocumentFromRecentPosts = () => {
-    if (!document2) {
-      return null;
-    }
-    return data?.find((post) => post.id === document2.id);
-  };
-  const currentDocumentFromRecentPosts = getCurrentDocumentFromRecentPosts();
-  const documentTitle = useReverseHtmlEntities(currentDocumentFromRecentPosts ? currentDocumentFromRecentPosts.title : document2?.title);
+  const documentTitle = useReverseHtmlEntities(document2?.title);
   if (!document2) {
     return null;
   }
@@ -605,37 +598,68 @@ function CloseButton({ isLoading, closeButton }) {
   );
 }
 
+// src/components/panel/posts-list/list-items/list-item-rename.tsx
+var import_editor_documents4 = require("@elementor/editor-documents");
+
+// src/hooks/use-rename-active-document.ts
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+function getV1DocumentsManager() {
+  const documentsManager = window.elementor?.documents;
+  if (!documentsManager) {
+    throw new Error("Elementor Editor V1 documents manager not found");
+  }
+  return documentsManager;
+}
+function useRenameActiveDocument() {
+  return async (title) => {
+    const currentDocument = getV1DocumentsManager().getCurrent();
+    const container = currentDocument.container;
+    await (0, import_editor_v1_adapters.__privateRunCommand)("document/elements/settings", {
+      container,
+      settings: { post_title: title }
+    });
+  };
+}
+
 // src/components/panel/posts-list/list-items/list-item-rename.tsx
 function ListItemRename({ post }) {
   const { type, resetEditMode } = usePostListContext();
   const { updatePost } = usePostActions(type);
   const { setError } = usePostListContext();
+  const activeDocument = (0, import_editor_documents4.__useActiveDocument)();
+  const rename = useRenameActiveDocument();
+  const isActive = activeDocument?.id === post.id;
+  const title = isActive ? activeDocument?.title : post.title.rendered;
   const renamePostCallback = async (inputValue) => {
-    if (inputValue === post.title.rendered) {
+    if (inputValue === title) {
       resetEditMode();
     }
     try {
-      await updatePost.mutateAsync({
-        id: post.id,
-        title: inputValue
-      });
+      if (isActive) {
+        await rename(inputValue);
+      } else {
+        await updatePost.mutateAsync({
+          id: post.id,
+          title: inputValue
+        });
+      }
     } catch (e) {
       setError();
     } finally {
       resetEditMode();
     }
   };
-  return /* @__PURE__ */ React9.createElement(EditModeTemplate, { postTitle: post.title.rendered, isLoading: updatePost.isPending, callback: renamePostCallback });
+  return /* @__PURE__ */ React9.createElement(EditModeTemplate, { postTitle: title, isLoading: updatePost.isPending, callback: renamePostCallback });
 }
 
 // src/components/panel/posts-list/list-items/list-item-create.tsx
 var React10 = __toESM(require("react"));
 var import_i18n5 = require("@wordpress/i18n");
-var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_documents5 = require("@elementor/editor-documents");
 function ListItemCreate() {
   const { type, resetEditMode } = usePostListContext();
   const { createPost } = usePostActions(type);
-  const navigateToDocument = (0, import_editor_documents4.__useNavigateToDocument)();
+  const navigateToDocument = (0, import_editor_documents5.__useNavigateToDocument)();
   const { setError } = usePostListContext();
   const createPostCallback = async (inputValue) => {
     try {
@@ -656,10 +680,10 @@ function ListItemCreate() {
 // src/components/panel/posts-list/list-items/list-item-duplicate.tsx
 var React11 = __toESM(require("react"));
 var import_i18n6 = require("@wordpress/i18n");
-var import_editor_documents5 = require("@elementor/editor-documents");
+var import_editor_documents6 = require("@elementor/editor-documents");
 function ListItemDuplicate() {
   const { type, editMode, resetEditMode } = usePostListContext();
-  const navigateToDocument = (0, import_editor_documents5.__useNavigateToDocument)();
+  const navigateToDocument = (0, import_editor_documents6.__useNavigateToDocument)();
   const { duplicatePost } = usePostActions(type);
   const { setError } = usePostListContext();
   if ("duplicate" !== editMode.mode) {
@@ -685,7 +709,7 @@ function ListItemDuplicate() {
 var React19 = __toESM(require("react"));
 var import_ui12 = require("@elementor/ui");
 var import_icons12 = require("@elementor/icons");
-var import_editor_documents7 = require("@elementor/editor-documents");
+var import_editor_documents8 = require("@elementor/editor-documents");
 
 // src/components/shared/page-title-and-status.tsx
 var React12 = __toESM(require("react"));
@@ -728,8 +752,8 @@ var PageTitle = ({ title }) => {
     modifiedTitle
   );
 };
-function PageTitleAndStatus({ page }) {
-  return /* @__PURE__ */ React12.createElement(import_ui8.Box, { display: "flex" }, /* @__PURE__ */ React12.createElement(PageTitle, { title: page.title.rendered }), "\xA0", /* @__PURE__ */ React12.createElement(PageStatus, { status: page.status }));
+function PageTitleAndStatus({ title, status }) {
+  return /* @__PURE__ */ React12.createElement(import_ui8.Box, { display: "flex" }, /* @__PURE__ */ React12.createElement(PageTitle, { title }), "\xA0", /* @__PURE__ */ React12.createElement(PageStatus, { status }));
 }
 
 // src/components/panel/actions-menu/actions/rename.tsx
@@ -802,10 +826,10 @@ var import_icons9 = require("@elementor/icons");
 var import_i18n9 = require("@wordpress/i18n");
 var import_ui10 = require("@elementor/ui");
 var import_react6 = require("react");
-var import_editor_documents6 = require("@elementor/editor-documents");
+var import_editor_documents7 = require("@elementor/editor-documents");
 function Delete({ post }) {
   const [isDialogOpen, setIsDialogOpen] = (0, import_react6.useState)(false);
-  const activeDocument = (0, import_editor_documents6.__useActiveDocument)();
+  const activeDocument = (0, import_editor_documents7.__useActiveDocument)();
   const isPostActive = activeDocument?.id === post.id;
   return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     ActionMenuItem,
@@ -957,14 +981,16 @@ function SetHome({ post, closeMenu }) {
 // src/components/panel/posts-list/list-items/list-item-view.tsx
 var import_i18n12 = require("@wordpress/i18n");
 function ListItemView({ post }) {
-  const activeDocument = (0, import_editor_documents7.__useActiveDocument)();
-  const navigateToDocument = (0, import_editor_documents7.__useNavigateToDocument)();
+  const activeDocument = (0, import_editor_documents8.__useActiveDocument)();
+  const navigateToDocument = (0, import_editor_documents8.__useNavigateToDocument)();
   const popupState = (0, import_ui12.usePopupState)({
     variant: "popover",
     popupId: "post-actions",
     disableAutoFocus: true
   });
   const isActive = activeDocument?.id === post.id;
+  const status = isActive ? activeDocument?.status.value : post.status;
+  const title = isActive ? activeDocument?.title : post.title.rendered;
   return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
     import_ui12.ListItem,
     {
@@ -995,7 +1021,7 @@ function ListItemView({ post }) {
         {
           disableTypography: true
         },
-        /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { page: post })
+        /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { title, status })
       ),
       post.isHome && /* @__PURE__ */ React19.createElement(import_icons12.HomeIcon, { titleAccess: (0, import_i18n12.__)("Homepage", "elementor"), color: "disabled" })
     )

package/dist/index.mjs

@@ -231,14 +231,7 @@ function RecentlyEdited() {
     variant: "popover",
     popupId: "elementor-v2-top-bar-recently-edited"
   });
-  const getCurrentDocumentFromRecentPosts = () => {
-    if (!document2) {
-      return null;
-    }
-    return data?.find((post) => post.id === document2.id);
-  };
-  const currentDocumentFromRecentPosts = getCurrentDocumentFromRecentPosts();
-  const documentTitle = useReverseHtmlEntities(currentDocumentFromRecentPosts ? currentDocumentFromRecentPosts.title : document2?.title);
+  const documentTitle = useReverseHtmlEntities(document2?.title);
   if (!document2) {
     return null;
   }
@@ -594,27 +587,58 @@ function CloseButton({ isLoading, closeButton }) {
   );
 }
 
+// src/components/panel/posts-list/list-items/list-item-rename.tsx
+import { __useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
+
+// src/hooks/use-rename-active-document.ts
+import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
+function getV1DocumentsManager() {
+  const documentsManager = window.elementor?.documents;
+  if (!documentsManager) {
+    throw new Error("Elementor Editor V1 documents manager not found");
+  }
+  return documentsManager;
+}
+function useRenameActiveDocument() {
+  return async (title) => {
+    const currentDocument = getV1DocumentsManager().getCurrent();
+    const container = currentDocument.container;
+    await runCommand("document/elements/settings", {
+      container,
+      settings: { post_title: title }
+    });
+  };
+}
+
 // src/components/panel/posts-list/list-items/list-item-rename.tsx
 function ListItemRename({ post }) {
   const { type, resetEditMode } = usePostListContext();
   const { updatePost } = usePostActions(type);
   const { setError } = usePostListContext();
+  const activeDocument = useActiveDocument2();
+  const rename = useRenameActiveDocument();
+  const isActive = activeDocument?.id === post.id;
+  const title = isActive ? activeDocument?.title : post.title.rendered;
   const renamePostCallback = async (inputValue) => {
-    if (inputValue === post.title.rendered) {
+    if (inputValue === title) {
       resetEditMode();
     }
     try {
-      await updatePost.mutateAsync({
-        id: post.id,
-        title: inputValue
-      });
+      if (isActive) {
+        await rename(inputValue);
+      } else {
+        await updatePost.mutateAsync({
+          id: post.id,
+          title: inputValue
+        });
+      }
     } catch (e) {
       setError();
     } finally {
       resetEditMode();
     }
   };
-  return /* @__PURE__ */ React9.createElement(EditModeTemplate, { postTitle: post.title.rendered, isLoading: updatePost.isPending, callback: renamePostCallback });
+  return /* @__PURE__ */ React9.createElement(EditModeTemplate, { postTitle: title, isLoading: updatePost.isPending, callback: renamePostCallback });
 }
 
 // src/components/panel/posts-list/list-items/list-item-create.tsx
@@ -684,7 +708,7 @@ import {
   usePopupState as usePopupState2
 } from "@elementor/ui";
 import { DotsVerticalIcon, HomeIcon as HomeIcon2 } from "@elementor/icons";
-import { __useActiveDocument as useActiveDocument3, __useNavigateToDocument as useNavigateToDocument5 } from "@elementor/editor-documents";
+import { __useActiveDocument as useActiveDocument4, __useNavigateToDocument as useNavigateToDocument5 } from "@elementor/editor-documents";
 
 // src/components/shared/page-title-and-status.tsx
 import * as React12 from "react";
@@ -727,8 +751,8 @@ var PageTitle = ({ title }) => {
     modifiedTitle
   );
 };
-function PageTitleAndStatus({ page }) {
-  return /* @__PURE__ */ React12.createElement(Box2, { display: "flex" }, /* @__PURE__ */ React12.createElement(PageTitle, { title: page.title.rendered }), "\xA0", /* @__PURE__ */ React12.createElement(PageStatus, { status: page.status }));
+function PageTitleAndStatus({ title, status }) {
+  return /* @__PURE__ */ React12.createElement(Box2, { display: "flex" }, /* @__PURE__ */ React12.createElement(PageTitle, { title }), "\xA0", /* @__PURE__ */ React12.createElement(PageStatus, { status }));
 }
 
 // src/components/panel/actions-menu/actions/rename.tsx
@@ -814,10 +838,10 @@ import {
   Divider as Divider3
 } from "@elementor/ui";
 import { useState as useState5 } from "react";
-import { __useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
+import { __useActiveDocument as useActiveDocument3 } from "@elementor/editor-documents";
 function Delete({ post }) {
   const [isDialogOpen, setIsDialogOpen] = useState5(false);
-  const activeDocument = useActiveDocument2();
+  const activeDocument = useActiveDocument3();
   const isPostActive = activeDocument?.id === post.id;
   return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     ActionMenuItem,
@@ -969,7 +993,7 @@ function SetHome({ post, closeMenu }) {
 // src/components/panel/posts-list/list-items/list-item-view.tsx
 import { __ as __12 } from "@wordpress/i18n";
 function ListItemView({ post }) {
-  const activeDocument = useActiveDocument3();
+  const activeDocument = useActiveDocument4();
   const navigateToDocument = useNavigateToDocument5();
   const popupState = usePopupState2({
     variant: "popover",
@@ -977,6 +1001,8 @@ function ListItemView({ post }) {
     disableAutoFocus: true
   });
   const isActive = activeDocument?.id === post.id;
+  const status = isActive ? activeDocument?.status.value : post.status;
+  const title = isActive ? activeDocument?.title : post.title.rendered;
   return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
     ListItem3,
     {
@@ -1007,7 +1033,7 @@ function ListItemView({ post }) {
         {
           disableTypography: true
         },
-        /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { page: post })
+        /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { title, status })
       ),
       post.isHome && /* @__PURE__ */ React19.createElement(HomeIcon2, { titleAccess: __12("Homepage", "elementor"), color: "disabled" })
     )

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.19.10",
+	"version": "0.19.11",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -35,6 +35,7 @@
 		"@elementor/editor-app-bar": "^0.9.7",
 		"@elementor/editor-documents": "^0.10.1",
 		"@elementor/editor-panels": "^0.4.6",
+		"@elementor/editor-v1-adapters": "^0.6.0",
 		"@elementor/env": "^0.3.2",
 		"@elementor/icons": "^0.7.2",
 		"@elementor/query": "^0.1.6",
@@ -49,5 +50,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "1d0f6576302b82c0375b768ec68ab9ed896f7865"
+	"gitHead": "82b8732700123fe0b916a2e7e78d91a55f5bb7e1"
 }

package/src/components/panel/posts-list/__tests__/posts-collapsible-list.test.tsx

@@ -49,7 +49,7 @@ jest.mock( '@elementor/editor-documents', () => ( {
 describe( '@elementor/editor-site-navigation - PostsCollapsibleList', () => {
 	beforeEach( () => {
 		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( ( {
-			id: 2,
+			id: 3,
 		} ) ) );
 	} );
 

package/src/components/panel/posts-list/list-items/list-item-rename.tsx

@@ -3,6 +3,8 @@ import { usePostListContext } from '../../../../contexts/post-list-context';
 import { usePostActions } from '../../../../hooks/use-posts-actions';
 import { Post } from '../../../../types';
 import EditModeTemplate from './edit-mode-template';
+import { __useActiveDocument as useActiveDocument } from '@elementor/editor-documents';
+import useRenameActiveDocument from '../../../../hooks/use-rename-active-document';
 
 type Props = {
 	post: Post,
@@ -12,17 +14,26 @@ export default function ListItemRename( { post }: Props ) {
 	const { type, resetEditMode } = usePostListContext();
 	const { updatePost } = usePostActions( type );
 	const { setError } = usePostListContext();
+	const activeDocument = useActiveDocument();
+	const rename = useRenameActiveDocument();
+
+	const isActive = activeDocument?.id === post.id;
+	const title = isActive ? activeDocument?.title : post.title.rendered;
 
 	const renamePostCallback = async ( inputValue: string ) => {
-		if ( inputValue === post.title.rendered ) {
+		if ( inputValue === title ) {
 			resetEditMode();
 		}
 
 		try {
-			await updatePost.mutateAsync( {
-				id: post.id,
-				title: inputValue,
-			} );
+			if ( isActive ) {
+				await rename( inputValue );
+			} else {
+				await updatePost.mutateAsync( {
+					id: post.id,
+					title: inputValue,
+				} );
+			}
 		} catch ( e ) {
 			setError();
 		} finally {
@@ -31,6 +42,6 @@ export default function ListItemRename( { post }: Props ) {
 	};
 
 	return (
-		<EditModeTemplate postTitle={ post.title.rendered } isLoading={ updatePost.isPending } callback={ renamePostCallback } />
+		<EditModeTemplate postTitle={ title } isLoading={ updatePost.isPending } callback={ renamePostCallback } />
 	);
 }

package/src/components/panel/posts-list/list-items/list-item-view.tsx

@@ -32,6 +32,8 @@ export default function ListItemView( { post }: { post: Post } ) {
 	} );
 
 	const isActive = activeDocument?.id === post.id;
+	const status = isActive ? activeDocument?.status.value : post.status;
+	const title = isActive ? activeDocument?.title : post.title.rendered;
 
 	return (
 		<>
@@ -59,7 +61,7 @@ export default function ListItemView( { post }: { post: Post } ) {
 					<ListItemText
 						disableTypography={ true }
 					>
-						<PageTitleAndStatus page={ post } />
+						<PageTitleAndStatus title={ title } status={ status } />
 					</ListItemText>
 					{ post.isHome &&
 					<HomeIcon titleAccess={ __( 'Homepage', 'elementor' ) } color="disabled" />

package/src/components/shared/page-title-and-status.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Box, Typography } from '@elementor/ui';
-import { Post } from '../../types';
 import { useReverseHtmlEntities } from '../../hooks/use-reverse-html-entities';
 
 const PageStatus = ( { status }: { status: string } ) => {
@@ -43,10 +42,10 @@ const PageTitle = ( { title }: { title: string } ) => {
 	);
 };
 
-export default function PageTitleAndStatus( { page }: { page: Post } ) {
+export default function PageTitleAndStatus( { title, status }: { title: string, status: string } ) {
 	return (
 		<Box display="flex">
-			<PageTitle title={ page.title.rendered } />&nbsp;<PageStatus status={ page.status } />
+			<PageTitle title={ title } />&nbsp;<PageStatus status={ status } />
 		</Box>
 	);
 }

package/src/components/top-bar/__tests__/recently-edited.test.tsx

@@ -146,7 +146,7 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 		const isLoading = false;
 		const recentPosts: RecentPost[] = [ {
-			id: 1,
+			id: 2,
 			title: 'Test post',
 			edit_url: 'some_url',
 			type: {

package/src/components/top-bar/recently-edited.tsx

@@ -43,16 +43,7 @@ export default function RecentlyEdited() {
 		popupId: 'elementor-v2-top-bar-recently-edited',
 	} );
 
-	const getCurrentDocumentFromRecentPosts = () => {
-		if ( ! document ) {
-			return null;
-		}
-
-		return data?.find( ( post ) => post.id === document.id );
-	};
-	const currentDocumentFromRecentPosts = getCurrentDocumentFromRecentPosts();
-
-	const documentTitle = useReverseHtmlEntities( currentDocumentFromRecentPosts ? currentDocumentFromRecentPosts.title : document?.title );
+	const documentTitle = useReverseHtmlEntities( document?.title );
 
 	if ( ! document ) {
 		return null;

package/src/hooks/use-rename-active-document.ts

@@ -0,0 +1,23 @@
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+import { ExtendedWindow } from '@elementor/editor-documents';
+
+function getV1DocumentsManager() {
+	const documentsManager = ( window as unknown as ExtendedWindow ).elementor?.documents;
+
+	if ( ! documentsManager ) {
+		throw new Error( 'Elementor Editor V1 documents manager not found' );
+	}
+
+	return documentsManager;
+}
+
+export default function useRenameActiveDocument() {
+	return async ( title: string ) => {
+		const currentDocument = getV1DocumentsManager().getCurrent();
+		const container = currentDocument.container;
+		await runCommand( 'document/elements/settings', {
+			container,
+			settings: { post_title: title },
+		} );
+	};
+}