@elementor/editor-site-navigation 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.2](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.4.1...@elementor/editor-site-navigation@0.4.2) (2023-05-30)
+
+**Note:** Version bump only for package @elementor/editor-site-navigation
+
+
+
+
+
+## [0.4.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.4.0...@elementor/editor-site-navigation@0.4.1) (2023-05-23)
+
+
+### Bug Fixes
+
+* **site-navigation:** render special chars [ED-10809] ([#42](https://github.com/elementor/elementor-packages/issues/42)) ([a276cf3](https://github.com/elementor/elementor-packages/commit/a276cf36e4f428da3b109f0bcd4e83ca3501e793))
+
+
+
+
+
 # [0.4.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.3.0...@elementor/editor-site-navigation@0.4.0) (2023-05-21)
 
 

package/dist/index.js

@@ -138,12 +138,27 @@ function DocTypeChip({ postType, docType, label }) {
 var import_ui3 = require("@elementor/ui");
 var React3 = __toESM(require("react"));
 var import_editor_documents = require("@elementor/editor-documents");
+
+// src/hooks/use-reverse-html-entities.ts
+var import_react2 = require("react");
+function useReverseHtmlEntities(escapedHTML = "") {
+  return (0, import_react2.useMemo)(() => {
+    const textarea = document.createElement("textarea");
+    textarea.innerHTML = escapedHTML;
+    const { value } = textarea;
+    textarea.remove();
+    return value;
+  }, [escapedHTML]);
+}
+
+// src/components/top-bar/post-list-item.tsx
 function PostListItem({ post, closePopup }) {
   const navigateToDocument = (0, import_editor_documents.useNavigateToDocument)();
+  const postTitle = useReverseHtmlEntities(post.title);
   return /* @__PURE__ */ React3.createElement(import_ui3.MenuItem, { dense: true, sx: { width: "100%" }, onClick: () => {
     closePopup();
     navigateToDocument(post.id);
-  } }, post.title, /* @__PURE__ */ React3.createElement(DocTypeChip, { postType: post.type.post_type, docType: post.type.doc_type, label: post.type.label }));
+  } }, postTitle, /* @__PURE__ */ React3.createElement(DocTypeChip, { postType: post.type.post_type, docType: post.type.doc_type, label: post.type.label }));
 }
 
 // src/components/top-bar/create-post-list-item.tsx
@@ -152,10 +167,10 @@ var React4 = __toESM(require("react"));
 
 // src/hooks/use-create-page.ts
 var import_api_fetch2 = __toESM(require("@wordpress/api-fetch"));
-var import_react2 = require("react");
+var import_react3 = require("react");
 var endpointPath2 = "/elementor/v1/site-navigation/add-new-post";
 function useCreatePage() {
-  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
   return {
     create: () => {
       setIsLoading(true);
@@ -190,13 +205,14 @@ function CreatePostListItem({ closePopup }) {
 function RecentlyEdited() {
   const activeDocument = (0, import_editor_documents3.useActiveDocument)();
   const hostDocument = (0, import_editor_documents3.useHostDocument)();
-  const document = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
-  const { recentPosts } = useRecentPosts(document?.id);
+  const document2 = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
+  const { recentPosts } = useRecentPosts(document2?.id);
   const popupState = (0, import_ui5.usePopupState)({
     variant: "popover",
     popupId: "elementor-v2-top-bar-recently-edited"
   });
-  if (!document) {
+  const documentTitle = useReverseHtmlEntities(document2?.title);
+  if (!document2) {
     return null;
   }
   return /* @__PURE__ */ React5.createElement(import_ui5.Box, { sx: { cursor: "default" } }, /* @__PURE__ */ React5.createElement(
@@ -210,8 +226,8 @@ function RecentlyEdited() {
     /* @__PURE__ */ React5.createElement(
       Indicator,
       {
-        title: document.title,
-        status: document.status
+        title: documentTitle,
+        status: document2.status
       }
     )
   ), /* @__PURE__ */ React5.createElement(

package/dist/index.mjs

@@ -120,12 +120,27 @@ function DocTypeChip({ postType, docType, label }) {
 import { MenuItem } from "@elementor/ui";
 import * as React3 from "react";
 import { useNavigateToDocument } from "@elementor/editor-documents";
+
+// src/hooks/use-reverse-html-entities.ts
+import { useMemo } from "react";
+function useReverseHtmlEntities(escapedHTML = "") {
+  return useMemo(() => {
+    const textarea = document.createElement("textarea");
+    textarea.innerHTML = escapedHTML;
+    const { value } = textarea;
+    textarea.remove();
+    return value;
+  }, [escapedHTML]);
+}
+
+// src/components/top-bar/post-list-item.tsx
 function PostListItem({ post, closePopup }) {
   const navigateToDocument = useNavigateToDocument();
+  const postTitle = useReverseHtmlEntities(post.title);
   return /* @__PURE__ */ React3.createElement(MenuItem, { dense: true, sx: { width: "100%" }, onClick: () => {
     closePopup();
     navigateToDocument(post.id);
-  } }, post.title, /* @__PURE__ */ React3.createElement(DocTypeChip, { postType: post.type.post_type, docType: post.type.doc_type, label: post.type.label }));
+  } }, postTitle, /* @__PURE__ */ React3.createElement(DocTypeChip, { postType: post.type.post_type, docType: post.type.doc_type, label: post.type.label }));
 }
 
 // src/components/top-bar/create-post-list-item.tsx
@@ -172,13 +187,14 @@ function CreatePostListItem({ closePopup }) {
 function RecentlyEdited() {
   const activeDocument = useActiveDocument();
   const hostDocument = useHostDocument();
-  const document = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
-  const { recentPosts } = useRecentPosts(document?.id);
+  const document2 = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
+  const { recentPosts } = useRecentPosts(document2?.id);
   const popupState = usePopupState({
     variant: "popover",
     popupId: "elementor-v2-top-bar-recently-edited"
   });
-  if (!document) {
+  const documentTitle = useReverseHtmlEntities(document2?.title);
+  if (!document2) {
     return null;
   }
   return /* @__PURE__ */ React5.createElement(Box, { sx: { cursor: "default" } }, /* @__PURE__ */ React5.createElement(
@@ -192,8 +208,8 @@ function RecentlyEdited() {
     /* @__PURE__ */ React5.createElement(
       Indicator,
       {
-        title: document.title,
-        status: document.status
+        title: documentTitle,
+        status: document2.status
       }
     )
   ), /* @__PURE__ */ React5.createElement(

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.4.0",
+	"version": "0.4.2",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,8 +32,8 @@
 		"dev": "tsup src/index.ts --format esm --clean"
 	},
 	"dependencies": {
-		"@elementor/editor-app-bar": "^0.4.0",
-		"@elementor/editor-documents": "^0.4.0",
+		"@elementor/editor-app-bar": "^0.4.1",
+		"@elementor/editor-documents": "^0.5.0",
 		"@elementor/icons": "^0.2.1",
 		"@elementor/ui": "^1.4.50",
 		"@wordpress/api-fetch": "^6.27.0",
@@ -46,5 +46,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "45afd449fda346eea0f8a431ebca7d6c1d518dd1"
+	"gitHead": "2299a390624d60ea9d1e35e7d8dcc4208816d555"
 }

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

@@ -177,6 +177,61 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 		expect( getByText( 'Test post' ) ).toBeInTheDocument();
 	} );
 
+	it( 'should render titles with HTML entities', () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockImplementation( () =>
+			createMockDocument( {
+				id: 1,
+				title: 'Header title with special char ¥',
+				type: {
+					value: 'header',
+					label: 'Header',
+				},
+			} )
+		);
+
+		const isLoading = false;
+		const recentPosts: Post[] = [
+			{
+				id: 1,
+				title: 'Post title with <h1>HTML</h1>',
+				edit_url: 'some_url',
+				type: {
+					post_type: 'post',
+					doc_type: 'wp-post',
+					label: 'Post',
+				},
+				date_modified: 123,
+			},
+			{
+				id: 2,
+				title: 'Post title with &lt;HTML entities&gt;',
+				edit_url: 'some_url_2',
+				type: {
+					post_type: 'post',
+					doc_type: 'wp-post',
+					label: 'Post 2',
+				},
+				date_modified: 1234,
+			},
+		];
+
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
+
+		// Act.
+		const { getByText, getByRole } = render( <RecentlyEdited /> );
+
+		// Assert - the document title should be rendered with the HTML entity.
+		expect( getByText( 'Header title with special char ¥' ) ).toBeInTheDocument();
+
+		// Open the posts list.
+		getByRole( 'button' ).click();
+
+		// Assert - the post title should be rendered with the HTML entity.
+		expect( getByText( 'Post title with <h1>HTML</h1>' ) ).toBeInTheDocument();
+		expect( getByText( 'Post title with <HTML entities>' ) ).toBeInTheDocument();
+	} );
+
 	it( 'should navigate to document on click', () => {
 		// Arrange.
 		const navigateToDocument = jest.fn();

package/src/components/top-bar/post-list-item.tsx

@@ -3,6 +3,7 @@ import { MenuItem, MenuItemProps } from '@elementor/ui';
 import * as React from 'react';
 import { Post } from '../../hooks/use-recent-posts';
 import { useNavigateToDocument } from '@elementor/editor-documents';
+import { useReverseHtmlEntities } from '../../hooks/use-reverse-html-entities';
 
 type Props = MenuItemProps & {
 	post: Post;
@@ -11,13 +12,14 @@ type Props = MenuItemProps & {
 
 export function PostListItem( { post, closePopup }: Props ) {
 	const navigateToDocument = useNavigateToDocument();
+	const postTitle = useReverseHtmlEntities( post.title );
 
 	return (
 		<MenuItem dense sx={ { width: '100%' } } onClick={ () => {
 			closePopup();
 			navigateToDocument( post.id );
 		} }>
-			{ post.title }
+			{ postTitle }
 			<DocTypeChip postType={ post.type.post_type } docType={ post.type.doc_type } label={ post.type.label } />
 		</MenuItem>
 	);

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

@@ -17,6 +17,7 @@ import useRecentPosts from '../../hooks/use-recent-posts';
 import { __ } from '@wordpress/i18n';
 import { PostListItem } from './post-list-item';
 import { CreatePostListItem } from './create-post-list-item';
+import { useReverseHtmlEntities } from '../../hooks/use-reverse-html-entities';
 
 export default function RecentlyEdited() {
 	const activeDocument = useActiveDocument();
@@ -32,6 +33,8 @@ export default function RecentlyEdited() {
 		popupId: 'elementor-v2-top-bar-recently-edited',
 	} );
 
+	const documentTitle = useReverseHtmlEntities( document?.title );
+
 	if ( ! document ) {
 		return null;
 	}
@@ -45,7 +48,7 @@ export default function RecentlyEdited() {
 				{ ...bindTrigger( popupState ) }
 			>
 				<Indicator
-					title={ document.title }
+					title={ documentTitle }
 					status={ document.status }
 				/>
 			</Button>

package/src/hooks/use-reverse-html-entities.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+
+export function useReverseHtmlEntities( escapedHTML = '' ) {
+	return useMemo( () => {
+		const textarea = document.createElement( 'textarea' );
+		textarea.innerHTML = escapedHTML;
+
+		const { value } = textarea;
+
+		textarea.remove();
+
+		return value;
+	}, [ escapedHTML ] );
+}