https://github.com/AppFlowy-IO/AppFlowy/pull/3146 Not yet its still being worked on

annie_appflowy · June 26, 2024, 6:04am

Quoted:
Do you guys do import from notion

Message:

github.com/AppFlowy-IO/AppFlowy

feat: added import a page from notion feature

AppFlowy-IO:main ← Mukund-Tandon:import_notion_page_from_zip_file

opened 10:34AM - 08 Aug 23 UTC

Mukund-Tandon

+1299 -31

Fixes: #2911 ### Feature Preview https://github.com/AppFlowy-IO/AppFlowy/assets/71614009/89eca69a-81b3-449a-b162-8652c71f18ce This PR is related to https://github.com/AppFlowy-IO/AppFlowy/pull/2981  ---  # How This feature is implemented - ### What does a page look like when exported from Notion- We get a zip file containing the the main page markdown and a folder containing assets of the main page and also markdown files of subpages of the main page and folders containing the assets of the subpages and the sub-sub pages markdown files and so on. <img width="465" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/71614009/ddf32214-5ef6-49ab-9343-ea5cf99edb98"> ### How our main page markdown file look We can see on line 5,6 we have two images inside the round brackets is the path where images are located and on line 19 ,21,23 are subpages ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/71614009/a6b68b74-6e8c-4da4-88bc-e344b559c60b) ### Markdown file of subpage Here we have to look at the image path it starts with AppFlowy Subpage 1 instead of instead of AppFlowy Test which is the parent folder. This is because it’s asset lies in AppFlowy Sub 1 folder which is at the same level where the subpage markdown file is . This fact will be used late while importing. ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/71614009/d09bb597-cdce-4b9a-bb3e-6b133db54fee) <img width="1036" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/71614009/c50093b6-ea43-4f5f-ad39-94e5eac5f27a"> ### How is the Importing working - First we iterate through the unzipfiles list and store all files and assets in there respective level in the `levels` list - Next step will be importing all the pages present starting from the last level.we are importing from the last level to handle the case of subpages . For parent page to show `MentionBlock` of the subpage it requires the SubPage viewID which can only be generated once it is imported so we import the lowest level sub page first and then go up storing each page viewID in a map (**nameToID**) which has key as the page name and value as the page viewID. - Next once we have all page imported we would move them under their respective parent ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/71614009/4e54a584-0990-4933-95e4-439ba9af58b7) This class contains details of each page to be imported and the parent of that page which will be used for moving the page under correct parent in later steps ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/71614009/8ab013d4-9fa2-4715-854f-f7c46a973a8f) This class contains details of each level of the files. Like For example the main page will be level one , if it has a subpage it will be level 2 and if that subpage will have another subpage that would belong to level 3 <img width="939" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/71614009/eebc8b57-588f-4ec7-a6b1-fa3f7fc7809b"> ### When we are importing a markdown page how are we dealing with images - To deal with images we take all contents of a markdown file and pass it through `_preProcessMarkdownFile` function which returns us a string which is the contents of the markdown file but with changes. The changes this function performs are related to images . It will iterate through each line and if it finds something like `![name](path)` this is how a image is represented in markdown . When we get this line is detected we get the path from this this path is actually the file name of image from the above list of unzip images so with the help of path we will get the image file and save it locally and change the current path to the path where the image is saved locally - Now the problem we can see here is as discussed before the path name in a sub page starts with AppFlowy Sub page instead of Appflowy test which is the root . In the above list also you can see that all the file name are starting from AppFlowy Test so if we directly pass this list to `_preProcessMarkdownFile` it wont be able find the image file.So this issue was solve by only passing the assets of a particular level to the _preProcessMarkdownFile function instead of all the assets and also during the process of adding files/assets in the levels list if a file is not added in the particular level then the first part(parent) from it name would be removed ### How does Subpages are handled while importing a page ? <img width="570" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/71614009/aa503f27-c736-4b19-b7a8-8a2a36235d79"> We are imported from level 3 to level 1. This is done because to handle the subpages . We use `markdownToDocument` function of appflowy-editor package to chick we pass the markdown contents of our page and it return us a Document. We also pass a custom-parser to this function which handles our subpage. Whenever it detects a subpage it replace the part with a `MentionBlock`(It contains the pageID of the page that is being Mentioned) . This is reason we are importing the lower level page first . We will import them and store their viewID in a map where the key is pageName and value is the pageID. When above level are being imported and there contents are passed through `_preProcessMarkdownFile` function this map(nameToId) is also passed in the function , whenever it finds a subpage which looks like [name](path) to `{{AppFlowy-Subpage}}{$subpageName}{$subPageID} `, this pattern is used in custom parser to detect the subpage part and convert it to mention block. We have stored the pageIds with name as key so we can easily get the pageID of subpage by using name from [name](page) . #### PR Checklist - [X] My code adheres to the [AppFlowy Style Guide](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/style-guides) - [X] I've listed at least one issue that this PR fixes in the description above. - [X] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [X] All existing tests are passing.

Not yet its still being worked on.

Timestamp:
2024-06-26T06:03:16.570000+00:00

Attachment:

Discord Message ID:
1255402987879137371