feat: added import a page from notion feature

[Mukund-Tandon]

Fixes: #2911

Feature Preview

Screen.Recording.2023-08-30.at.10.30.13.AM.mov

This PR is related to #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.

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

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.

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

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

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

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 ?

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 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 .

PR Checklist

• My code adheres to the AppFlowy Style Guide
• I've listed at least one issue that this PR fixes in the description above.
• I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
• All existing tests are passing.

[LucasXu0]

@Mukund-Tandon Please include a brief description here to explain how you implemented this feature.

[codecov]

Codecov Report

Attention: Patch coverage is 99.00990% with 2 lines in your changes are missing coverage. Please review.

Project coverage is 69.64%. Comparing base (94f9349) to head (00b3304).
Report is 436 commits behind head on main.

❗ Current head 00b3304 differs from pull request most recent head f1001d5. Consider uploading reports for the commit f1001d5 to get more accurate results

Files	Patch %	Lines
.../menu/sidebar/import/importer/notion_importer.dart	98.11%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##            main    #3146       +/-   ##
==========================================
+ Coverage   9.70%   69.64%   +59.94%     
==========================================
  Files        685      454      -231     
  Lines      31812    21475    -10337     
==========================================
+ Hits        3086    14957    +11871     
+ Misses     28726     6518    -22208     

Flag	Coverage Δ
appflowy_flutter_integrateion_test	67.44% <99.00%> (?)
appflowy_flutter_unit_test	12.73% <0.00%> (+3.03%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Mukund-Tandon]

Screen.Recording.2023-08-30.at.10.30.13.AM.mov

I have implemented the importing of the subpages along with the main page,I have also updated the description of the PR with its working explanation @LucasXu0 , please can you take a look at it.

[Mukund-Tandon]

I will fix the issues , I was not active for a while because got busy with college exams ,now I will continue working on this feature.

[SimonBiggs]

@Mukund-Tandon this is some absolutely amazing work!

Thank you for all the effort you're going to here!