Merge pull request #9365 from weseek/imprv/open-page-tree-item-in-new-tab

imprv: Open the link of PageTreeItem in a new tab when the user middle click

apps/app/src/client/components/Sidebar/PageTreeItem/PageTreeItem.tsx

@@ -80,6 +80,16 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
     router.push(link);
   }, [router]);
 
+  const itemSelectedByWheelClickHandler = useCallback((page: IPageForItem) => {
+    if (page.path == null || page._id == null) {
+      return;
+    }
+
+    const url = pathUtils.returnPathForURL(page.path, page._id);
+
+    window.open(url, '_blank');
+  }, []);
+
   const [, drag] = useDrag({
     type: 'PAGE_TREE',
     item: { page },
@@ -186,6 +196,7 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
       onClick={itemSelectedHandler}
       onClickDuplicateMenuItem={props.onClickDuplicateMenuItem}
       onClickDeleteMenuItem={props.onClickDeleteMenuItem}
+      onWheelClick={itemSelectedByWheelClickHandler}
       onRenamed={props.onRenamed}
       itemRef={itemRef}
       itemClass={PageTreeItem}

apps/app/src/client/components/TreeItem/TreeItemLayout.tsx

@@ -28,7 +28,8 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
     indentSize = 10,
     itemLevel: baseItemLevel = 1,
     itemNode, targetPathOrId, isOpen: _isOpen = false,
-    onRenamed, onClick, onClickDuplicateMenuItem, onClickDeleteMenuItem, isEnableActions, isReadOnlyUser, isWipPageShown = true,
+    onRenamed, onClick, onClickDuplicateMenuItem, onClickDeleteMenuItem, onWheelClick,
+    isEnableActions, isReadOnlyUser, isWipPageShown = true,
     itemRef, itemClass,
     showAlternativeContent,
   } = props;
@@ -51,6 +52,19 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
 
   }, [onClick, page]);
 
+  const itemMouseupHandler = useCallback((e: MouseEvent) => {
+    // DO NOT handle the event when e.currentTarget and e.target is different
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+
+    if (e.button === 1) {
+      e.preventDefault();
+      onWheelClick?.(page);
+    }
+
+  }, [onWheelClick, page]);
+
 
   // descendantCount
   const { getDescCount } = usePageTreeDescCountMap();
@@ -141,6 +155,7 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
           border-0 py-0 ps-0 d-flex align-items-center rounded-1`}
         id={`grw-pagetree-list-${page._id}`}
         onClick={itemClickHandler}
+        onMouseUp={itemMouseupHandler}
         aria-current={isSelected ? true : undefined}
       >
 

apps/app/src/client/components/TreeItem/interfaces/index.ts

@@ -34,4 +34,5 @@ export type TreeItemProps = TreeItemBaseProps & {
   showAlternativeContent?: boolean,
   customAlternativeComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
   onClick?(page: IPageForItem): void,
+  onWheelClick?(page: IPageForItem): void,
 };