feat: the UI of importing Html/Markdown/Notion (#2533)

Co-authored-by: Himself65 <himself65@outlook.com>

apps/web/src/components/blocksuite/block-suite-page-list/index.tsx

@@ -70,7 +70,7 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
     permanentlyDeletePage,
     cancelPublicPage,
   } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
-  const { createPage, createEdgeless, isPreferredEdgeless } =
+  const { createPage, createEdgeless, importFile, isPreferredEdgeless } =
     usePageHelper(blockSuiteWorkspace);
   const t = useAFFiNEI18N();
   const list = useMemo(
@@ -155,6 +155,7 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
     <PageList
       onCreateNewPage={createPage}
       onCreateNewEdgeless={createEdgeless}
+      onImportFile={importFile}
       isPublicWorkspace={isPublic}
       list={pageList}
     />

apps/web/src/components/blocksuite/block-suite-page-list/utils.tsx

@@ -23,9 +23,14 @@ export const usePageHelper = (blockSuiteWorkspace: BlockSuiteWorkspace) => {
     setPreferredMode(page.id, 'edgeless');
     openPage(blockSuiteWorkspace.id, page.id);
   };
+  const importFileAndOpen = async () => {
+    const { showImportModal } = await import('@blocksuite/blocks');
+    showImportModal({ workspace: blockSuiteWorkspace });
+  };
   return {
     createPage: createPageAndOpen,
     createEdgeless: createEdgelessAndOpen,
+    importFile: importFileAndOpen,
     isPreferredEdgeless: isPreferredEdgeless,
   };
 };

packages/component/src/components/page-list/all-page.tsx

@@ -26,11 +26,13 @@ const AllPagesHead = ({
   sorter,
   createNewPage,
   createNewEdgeless,
+  importFile,
 }: {
   isPublicWorkspace: boolean;
   sorter: ReturnType<typeof useSorter<ListData>>;
   createNewPage: () => void;
   createNewEdgeless: () => void;
+  importFile: () => void;
 }) => {
   const t = useAFFiNEI18N();
   const titleList = [
@@ -56,6 +58,7 @@ const AllPagesHead = ({
         <NewPageButton
           createNewPage={createNewPage}
           createNewEdgeless={createNewEdgeless}
+          importFile={importFile}
         />
       ),
       showWhen: () => !isPublicWorkspace,
@@ -109,6 +112,7 @@ export const PageList = ({
   list,
   onCreateNewPage,
   onCreateNewEdgeless,
+  onImportFile,
 }: PageListProps) => {
   const sorter = useSorter<ListData>({
     data: list,
@@ -124,6 +128,7 @@ export const PageList = ({
         isPublicWorkspace={isPublicWorkspace}
         createNewPage={onCreateNewPage}
         createNewEdgeless={onCreateNewEdgeless}
+        importFile={onImportFile}
         list={sorter.data}
       />
     );
@@ -145,6 +150,7 @@ export const PageList = ({
           sorter={sorter}
           createNewPage={onCreateNewPage}
           createNewEdgeless={onCreateNewEdgeless}
+          importFile={onImportFile}
         />
         <AllPagesBody
           isPublicWorkspace={isPublicWorkspace}

packages/component/src/components/page-list/components/new-page-buttton.tsx

@@ -1,5 +1,5 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
+import { EdgelessIcon, ImportIcon, PageIcon } from '@blocksuite/icons';
 import { useState } from 'react';
 
 import { DropdownButton } from '../../../ui/button/dropdown';
@@ -9,11 +9,13 @@ import { BlockCard } from '../../card/block-card';
 type NewPageButtonProps = {
   createNewPage: () => void;
   createNewEdgeless: () => void;
+  importFile: () => void;
 };
 
 export const CreateNewPagePopup = ({
   createNewPage,
   createNewEdgeless,
+  importFile,
 }: NewPageButtonProps) => {
   const t = useAFFiNEI18N();
   return (
@@ -37,6 +39,12 @@ export const CreateNewPagePopup = ({
         right={<EdgelessIcon width={20} height={20} />}
         onClick={createNewEdgeless}
       />
+      <BlockCard
+        title={t['com.affine.new_import']()}
+        desc={t['com.affine.import_file']()}
+        right={<ImportIcon width={20} height={20} />}
+        onClick={importFile}
+      />
       {/* TODO Import */}
     </div>
   );
@@ -45,6 +53,7 @@ export const CreateNewPagePopup = ({
 export const NewPageButton = ({
   createNewPage,
   createNewEdgeless,
+  importFile,
 }: NewPageButtonProps) => {
   const t = useAFFiNEI18N();
   const [open, setOpen] = useState(false);
@@ -68,6 +77,10 @@ export const NewPageButton = ({
             createNewEdgeless();
             setOpen(false);
           }}
+          importFile={() => {
+            importFile();
+            setOpen(false);
+          }}
         />
       }
     >

packages/component/src/components/page-list/mobile.tsx

@@ -21,10 +21,12 @@ const MobileHead = ({
   isPublicWorkspace,
   createNewPage,
   createNewEdgeless,
+  importFile,
 }: {
   isPublicWorkspace: boolean;
   createNewPage: () => void;
   createNewEdgeless: () => void;
+  importFile: () => void;
 }) => {
   const t = useAFFiNEI18N();
   return (
@@ -43,6 +45,7 @@ const MobileHead = ({
               <NewPageButton
                 createNewPage={createNewPage}
                 createNewEdgeless={createNewEdgeless}
+                importFile={importFile}
               />
             </div>
           </TableCell>
@@ -57,11 +60,13 @@ export const AllPageListMobileView = ({
   isPublicWorkspace,
   createNewPage,
   createNewEdgeless,
+  importFile,
 }: {
   isPublicWorkspace: boolean;
   list: ListData[];
   createNewPage: () => void;
   createNewEdgeless: () => void;
+  importFile: () => void;
 }) => {
   return (
     <StyledTableContainer>
@@ -70,6 +75,7 @@ export const AllPageListMobileView = ({
           isPublicWorkspace={isPublicWorkspace}
           createNewPage={createNewPage}
           createNewEdgeless={createNewEdgeless}
+          importFile={importFile}
         />
         <AllPagesBody
           isPublicWorkspace={isPublicWorkspace}

packages/component/src/components/page-list/type.ts

@@ -41,4 +41,5 @@ export type PageListProps = {
   list: ListData[];
   onCreateNewPage: () => void;
   onCreateNewEdgeless: () => void;
+  onImportFile: () => void;
 };

packages/component/src/stories/page-list.stories.tsx

@@ -63,6 +63,7 @@ AffineAllPageList.args = {
   isPublicWorkspace: false,
   onCreateNewPage: () => toast('Create new page'),
   onCreateNewEdgeless: () => toast('Create new edgeless'),
+  onImportFile: () => toast('Import file'),
   list: [
     {
       pageId: '1',

packages/i18n/src/resources/en.json

@@ -23,6 +23,8 @@
   "com.affine.write_with_a_blank_page": "Write with a blank page",
   "com.affine.new_edgeless": "New Edgeless",
   "com.affine.draw_with_a_blank_whiteboard": "Draw with a blank whiteboard",
+  "com.affine.new_import": "Import",
+  "com.affine.import_file": "Support Markdown/Notion",
   "New Keyword Page": "New '{{query}}' page",
   "Find 0 result": "Find 0 result",
   "Find results": "Find {{number}} results",