feat: support import markdown (#638)

* feat: support import markdown

* feat: support html import logic

* chore: add pnpm check

package.json

@@ -11,6 +11,7 @@
     "export": "pnpm --filter @affine/app export",
     "start": "pnpm --filter @affine/app start",
     "lint": "pnpm --filter @affine/app lint",
+    "check": "pnpm lint && pnpm test",
     "test": "playwright test",
     "test:dc": "pnpm --filter @affine/data-services test",
     "test:e2e:codegen": "npx playwright codegen http://localhost:8080",

packages/app/src/components/import/index.tsx

@@ -3,14 +3,74 @@ import { StyledButtonWrapper, StyledTitle } from './styles';
 import { Button } from '@/ui/button';
 import { Wrapper, Content } from '@/ui/layout';
 import Loading from '@/components/loading';
+import { usePageHelper } from '@/hooks/use-page-helper';
+import { useAppState } from '@/providers/app-state-provider/context';
 import { useEffect, useState } from 'react';
 type ImportModalProps = {
   open: boolean;
   onClose: () => void;
 };
+type Template = {
+  name: string;
+  source: string;
+};
 export const ImportModal = ({ open, onClose }: ImportModalProps) => {
   const [status, setStatus] = useState<'unImported' | 'importing'>('importing');
+  const { openPage, createPage } = usePageHelper();
+  const { currentWorkspace } = useAppState();
+  const _applyTemplate = function (pageId: string, template: Template) {
+    const page = currentWorkspace?.getPage(pageId);
 
+    const title = template.name;
+    if (page) {
+      currentWorkspace?.setPageMeta(page.id, { title });
+      if (page && page.root === null) {
+        setTimeout(() => {
+          const editor = document.querySelector('editor-container');
+          if (editor) {
+            const groupId = page.addBlock({ flavour: 'affine:group' }, pageId);
+            // TODO blocksuite should offer a method to import markdown from store
+            editor.clipboard.importMarkdown(template.source, `${groupId}`);
+            page.resetHistory();
+            editor.requestUpdate();
+          }
+        }, 300);
+      }
+    }
+  };
+  const _handleAppleTemplate = async function (template: Template) {
+    const pageId = await createPage();
+    if (pageId) {
+      openPage(pageId);
+      _applyTemplate(pageId, template);
+    }
+  };
+  const _handleAppleTemplateFromFilePicker = async () => {
+    if (!window.showOpenFilePicker) {
+      return;
+    }
+    const arrFileHandle = await window.showOpenFilePicker({
+      types: [
+        {
+          accept: {
+            'text/markdown': ['.md'],
+            'text/html': ['.html', '.htm'],
+            'text/plain': ['.text'],
+          },
+        },
+      ],
+      multiple: false,
+    });
+    for (const fileHandle of arrFileHandle) {
+      const file = await fileHandle.getFile();
+      const text = await file.text();
+      _handleAppleTemplate({
+        name: file.name,
+        source: text,
+      });
+    }
+    onClose && onClose();
+  };
   useEffect(() => {
     if (status === 'importing') {
       setTimeout(() => {
@@ -29,14 +89,14 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
           <StyledButtonWrapper>
             <Button
               onClick={() => {
-                setStatus('importing');
+                _handleAppleTemplateFromFilePicker();
               }}
             >
               Markdown
             </Button>
             <Button
               onClick={() => {
-                setStatus('importing');
+                _handleAppleTemplateFromFilePicker();
               }}
             >
               HTML

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -70,7 +70,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
   );
 };
 export const WorkSpaceSliderBar = () => {
-  const { triggerQuickSearchModal } = useModal();
+  const { triggerQuickSearchModal, triggerImportModal } = useModal();
   const [showSubFavorite, setShowSubFavorite] = useState(true);
   const { currentWorkspaceId } = useAppState();
   const { openPage, createPage } = usePageHelper();
@@ -153,16 +153,13 @@ export const WorkSpaceSliderBar = () => {
           </StyledListItem>
           <FavoriteList showList={showSubFavorite} />
 
-          <Tooltip content="Coming soon" placement="right-start" zIndex={9999}>
-            <StyledListItem
-              disabled={true}
-              onClick={() => {
-                // triggerImportModal();
-              }}
-            >
-              <ImportIcon /> Import
-            </StyledListItem>
-          </Tooltip>
+          <StyledListItem
+            onClick={() => {
+              triggerImportModal();
+            }}
+          >
+            <ImportIcon /> Import
+          </StyledListItem>
 
           <Link href={{ pathname: paths.trash }}>
             <StyledListItem active={router.asPath === paths.trash}>

packages/app/src/pages/playground/templates.tsx

@@ -63,7 +63,7 @@ const All = () => {
       _applyTemplate(pageId, template);
     }
   };
-  const _handleAppleTemplateFromRemoteUrl = async () => {
+  const _handleAppleTemplateFromFilePicker = async () => {
     if (!window.showOpenFilePicker) {
       return;
     }
@@ -104,7 +104,7 @@ const All = () => {
         })}
         <br />
         <h2>Import Markdown</h2>
-        <Button onClick={() => _handleAppleTemplateFromRemoteUrl()}>
+        <Button onClick={() => _handleAppleTemplateFromFilePicker()}>
           <a style={{ marginLeft: '20px' }}>Select File To Import Markdown</a>
         </Button>
       </div>