docs: update the Guides in Chinese

.prettierignore

@@ -6,4 +6,8 @@ node_modules
 yarn.lock
 coverage
 storybook-static
-docs/api
+docs/api
+website/build
+website/docs/api
+website/.docusaurus
+website/node_modules

README.md

@@ -21,7 +21,12 @@
 
 The **Molecule** is a lightweight **Web IDE UI** Framework built with React.js，and inspired by the VSCode. We also provide the Extension APIs the seem like VSCode, to help developers extend the Workbench easily. The Molecule integrates with React.js applications is simple. It has applied to many [DTStack](https://www.dtstack.com/) inner projects.
 
+<<<<<<< HEAD
 [Online Preview](https://github.com/DTStack/molecule-examples)
+=======
+[Online Preview]((https://github.com/DTStack/molecule-examples)
+
+> > > > > > > docs: update the introduction
 
 ## Features
 

build/preinstall.js

@@ -2,14 +2,11 @@ let err = false;
 
 const majorNodeVersion = parseInt(/^(\d+)\./.exec(process.versions.node)[1]);
 
-if (majorNodeVersion < 10 || majorNodeVersion > 14) {
-    console.error('\033[1;31m*** Please use node >=10 and <=14.\033[0;0m');
+if (majorNodeVersion < 10) {
+    console.error('\033[1;31m*** Please use node >=10.\033[0;0m\n');
     err = true;
 }
 
-const cp = require('child_process');
-
 if (err) {
-    console.error('');
     process.exit(1);
 }

src/components/menu/__tests__/__snapshots__/menu.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
 >
   <li
     className="mo-menu__item"
+    data-mode="vertical"
     data-submenu={true}
     id="File"
   >
@@ -76,6 +77,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
   </li>
   <li
     className="mo-menu__item"
+    data-mode="vertical"
     data-submenu={true}
     id="Edit"
   >
@@ -137,6 +139,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
   </li>
   <li
     className="mo-menu__item"
+    data-mode="vertical"
     data-submenu={true}
     id="Selection"
   >
@@ -198,6 +201,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
   </li>
   <li
     className="mo-menu__item"
+    data-mode="vertical"
     data-submenu={true}
     id="View"
   >
@@ -257,6 +261,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
       </li>
       <li
         className="mo-menu__item"
+        data-mode="vertical"
         data-submenu={true}
         id="Appearance"
       >
@@ -364,6 +369,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
   </li>
   <li
     className="mo-menu__item"
+    data-mode="vertical"
     data-submenu={true}
     id="Run"
   >
@@ -409,6 +415,7 @@ exports[`Test the Menu Component Match the List snapshot 1`] = `
   </li>
   <li
     className="mo-menu__item"
+    data-mode="vertical"
     data-submenu={true}
     id="Help"
   >

src/components/menu/menu.tsx

@@ -1,20 +1,21 @@
 import React, { useEffect, useCallback, useRef } from 'react';
 import { classNames } from 'mo/common/className';
-import { MenuItem } from './menuItem';
-import { isHorizontal, ISubMenuProps, MenuMode, SubMenu } from './subMenu';
 import { debounce } from 'lodash';
+import { mergeFunctions } from 'mo/common/utils';
+import { cloneReactChildren } from 'mo/react';
+import { em2Px } from 'mo/common/css';
+import { getRelativePosition, triggerEvent } from 'mo/common/dom';
+
 import {
     activeClassName,
     defaultMenuClassName,
     defaultSubMenuClassName,
     horizontalMenuClassName,
     verticalMenuClassName,
 } from './base';
-import { mergeFunctions } from 'mo/common/utils';
-import { cloneReactChildren } from 'mo/react';
-import { em2Px } from 'mo/common/css';
-import { getRelativePosition, triggerEvent } from 'mo/common/dom';
 import { Divider } from './divider';
+import { MenuItem } from './menuItem';
+import { isHorizontal, ISubMenuProps, MenuMode, SubMenu } from './subMenu';
 
 export type IMenuProps = ISubMenuProps;
 
@@ -64,13 +65,14 @@ export function Menu(props: React.PropsWithChildren<IMenuProps>) {
         onClick,
         trigger = 'hover',
         title,
-        ...custom
+        ...restProps
     } = props;
     const menuRef = useRef<HTMLUListElement>(null);
     const isMouseInMenu = useRef(false);
     let content = cloneReactChildren(children, { onClick });
     // Only when the trigger is hover need to set the delay
     const delay = trigger === 'hover' ? 200 : 0;
+
     const modeClassName =
         mode === MenuMode.Horizontal
             ? horizontalMenuClassName
@@ -81,12 +83,13 @@ export function Menu(props: React.PropsWithChildren<IMenuProps>) {
         const renderMenusByData = (menus: IMenuProps[]) => {
             return menus.map((item: IMenuProps) => {
                 if (item.type === 'divider') return <Divider />;
+
                 const handleClick = mergeFunctions(onClick, item.onClick);
                 if (item.data && item.data.length > 0) {
                     return (
                         <SubMenu
                             key={item.id}
-                            mode={mode}
+                            mode={item.mode || mode}
                             {...item}
                             onClick={handleClick}
                         >
@@ -140,7 +143,12 @@ export function Menu(props: React.PropsWithChildren<IMenuProps>) {
             }
             visibleMenuItem(liDom);
             const subMenu = liDom?.querySelector('ul') || undefined;
-            setPositionForSubMenu(liDom, subMenu, isHorizontal(mode));
+            const subMenuMode = liDom?.dataset.mode || mode;
+            setPositionForSubMenu(
+                liDom,
+                subMenu,
+                isHorizontal(subMenuMode as MenuMode)
+            );
         }
     }, delay);
 
@@ -199,7 +207,7 @@ export function Menu(props: React.PropsWithChildren<IMenuProps>) {
             // prevent JSX render in HTMLElement
             {...(typeof title === 'string' ? { title } : {})}
             {...getEventListener()}
-            {...custom}
+            {...restProps}
         >
             {content}
         </ul>

src/components/menu/menuItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { classNames } from 'mo/common/className';
-import { Icon } from '../icon';
+import type { HTMLElementProps, UniqueId } from 'mo/common/types';
+
 import {
     checkClassName,
     disabledClassName,
@@ -9,7 +10,7 @@ import {
     labelClassName,
     menuContentClassName,
 } from './base';
-import type { HTMLElementProps, UniqueId } from 'mo/common/types';
+import { Icon } from '../icon';
 
 export interface IMenuItemProps extends HTMLElementProps {
     id: UniqueId;
@@ -52,7 +53,8 @@ export function MenuItem(
         name,
         title,
         id,
-        ...custom
+        sortIndex,
+        ...restProps
     } = props;
 
     const events = {
@@ -69,10 +71,11 @@ export function MenuItem(
                 disabled ? disabledClassName : null
             )}
             id={id?.toString()}
+            data-sort={sortIndex}
             // prevent render JSX title in HTMLElement
             {...(typeof title === 'string' ? { title } : {})}
             {...events}
-            {...custom}
+            {...restProps}
         >
             <div className={menuContentClassName}>
                 <Icon type={icon} className={checkClassName} />

src/components/menu/subMenu.tsx

@@ -50,7 +50,8 @@ export function SubMenu(props: React.PropsWithChildren<ISubMenuProps>) {
         children,
         onClick,
         title,
-        ...custom
+        sortIndex,
+        ...restProps
     } = props;
     const cNames = classNames(defaultSubMenuClassName, className);
     const isAlignHorizontal = isHorizontal(mode);
@@ -63,7 +64,7 @@ export function SubMenu(props: React.PropsWithChildren<ISubMenuProps>) {
                 style={{ opacity: '0', pointerEvents: 'none' }}
                 data={data}
                 onClick={onClick}
-                {...custom}
+                {...restProps}
             />
         ) : (
             <Menu
@@ -82,9 +83,11 @@ export function SubMenu(props: React.PropsWithChildren<ISubMenuProps>) {
                 disabled ? disabledClassName : null
             )}
             data-submenu
+            data-mode={mode}
+            data-sort={sortIndex}
             // prevent render JSX title in HTMLElement
             {...(typeof title === 'string' ? { title } : {})}
-            {...custom}
+            {...restProps}
         >
             <div className={menuContentClassName}>
                 {typeof icon === 'string' ? (

src/controller/__tests__/notification.test.ts

@@ -13,12 +13,6 @@ const notificationService = container.resolve(NotificationService);
 const statusBarService = container.resolve(StatusBarService);
 const builtinService = container.resolve(BuiltinService);
 
-jest.mock('react-dom', () => {
-    return {
-        render: jest.fn(),
-    };
-});
-
 describe('The notification controller', () => {
     test('Should support initialize the service', () => {
         notificationController.initView();
@@ -94,34 +88,23 @@ describe('The notification controller', () => {
         expect(notificationService.getState().data).toHaveLength(0);
     });
 
-    test('Should support to toggleNotifications', () => {
-        expect(
-            (notificationController as any)._notificationPane
-        ).toBeUndefined();
-        expect(notificationService.getState().showNotifications).toBeFalsy();
-        notificationController.toggleNotifications();
-
-        expect(
-            (notificationController as any)._notificationPane
-        ).not.toBeUndefined();
-        expect(notificationService.getState().showNotifications).toBeTruthy();
-    });
-
     test('Should support to execute onClick', () => {
-        expect(notificationService.getState().showNotifications).toBeTruthy();
+        expect(notificationService.getState().showNotifications).toBeFalsy();
 
         notificationController.onClick({} as any, { id: 'test' });
 
-        expect(notificationService.getState().showNotifications).toBeFalsy();
+        expect(notificationService.getState().showNotifications).toBeTruthy();
     });
 
     test('Should support to execute onActionBarClick', () => {
-        expect(notificationService.getState().showNotifications).toBeFalsy();
+        notificationService.add([{ id: 1, value: 'test' }]);
+        expect(notificationService.getState().data).toHaveLength(1);
         notificationController.onActionBarClick({} as any, {
             id: constants.NOTIFICATION_CLEAR_ALL_ID,
         });
-        expect(notificationService.getState().showNotifications).toBeTruthy();
+        expect(notificationService.getState().data).toHaveLength(0);
 
+        expect(notificationService.getState().showNotifications).toBeTruthy();
         notificationController.onActionBarClick({} as any, {
             id: constants.NOTIFICATION_HIDE_ID,
         });

src/controller/explorer/folderTree.tsx

@@ -18,7 +18,7 @@ import {
 import type { UniqueId } from 'mo/common/types';
 
 export interface IFolderTreeController extends Partial<Controller> {
-    readonly createTreeNode?: (type: FileType) => void;
+    readonly createTreeNode?: (type: FileType, id?: UniqueId) => void;
     readonly onClickContextMenu?: (
         contextMenu: IMenuItemProps,
         treeNode?: IFolderTreeNodeProps
@@ -102,14 +102,19 @@ export class FolderTreeController
         });
     }
 
-    public createTreeNode = (type: FileType) => {
-        const folderTreeState = this.folderTreeService.getState();
-        const { data, current } = folderTreeState?.folderTree || {};
-        // The current selected node id or the first root node
-        const nodeId =
-            typeof current?.id === 'undefined' ? data?.[0]?.id : current?.id;
-
-        this.emit(FolderTreeEvent.onCreate, type, nodeId);
+    public createTreeNode = (type: FileType, id?: UniqueId) => {
+        if (typeof id === 'undefined') {
+            const folderTreeState = this.folderTreeService.getState();
+            const { data, current } = folderTreeState?.folderTree || {};
+            // The current selected node id or the first root node
+            const nodeId =
+                typeof current?.id === 'undefined'
+                    ? data?.[0]?.id
+                    : current?.id;
+            this.emit(FolderTreeEvent.onCreate, type, nodeId);
+        } else {
+            this.emit(FolderTreeEvent.onCreate, type, id);
+        }
     };
 
     public readonly onClickContextMenu = (
@@ -136,11 +141,13 @@ export class FolderTreeController
                 break;
             }
             case NEW_FILE_COMMAND_ID: {
-                this.createTreeNode(FileTypes.File);
+                const { id } = treeNode!;
+                this.createTreeNode(FileTypes.File, id);
                 break;
             }
             case NEW_FOLDER_COMMAND_ID: {
-                this.createTreeNode(FileTypes.Folder);
+                const { id } = treeNode!;
+                this.createTreeNode(FileTypes.Folder, id);
                 break;
             }
             case OPEN_TO_SIDE_COMMAND_ID: {