Markdown editor that integrates with your Google Drive.
Custom tags might be created using Generic directives. Generic directives are implemented via remark-directive
plugin.
In short this specification introduce following syntax to denote different types of nodes:
- directives with prefix
:
denote inline directives (something likea
) - directives with prefix
::
denote leaf block directives (something likep
) - directives with prefix
:::
denote container block directives (something likediv
)
This tag will load file from your google drive and embed it into document as image.
::gdrive{src="googleFileId"}
This tag will create embed with youtube video.
::youtube{src="videoId"}
This tag will insert inline link to the file from gdrive. When link is clicked and referenced file is markdown file (mime type is text/markdown or extension is .md) then it will open in markdown editor. Otherwise it will go to gdrive.
:gdrive-ref[link name]{src="fileId"}
See toScope
method in src/google/authorization.ts
.
Google made process of authentication and authorization separate. To authenticate you can use one of the buttons documented here: https://developers.google.com/identity/gsi/web/guides/overview
Google also promotes the granular authorization. So when access to user data is needed application should request only minimal set of required permissions. For authorization library might be used that will display pop up whenever permissions are requested. This library is documented here: https://developers.google.com/identity/oauth2/web/guides/overview
Note, that if authorization is not triggered by user gesture pop up will blocked by browsers usually.
According to this SO in order to enable upload to directory you need to enable google.picker.Feature.MULTISELECT_ENABLED
feature.
Gdrive expose special scope https://www.googleapis.com/auth/drive.file
that allows to "Create new Drive files, or modify existing files, that you open with an app or that the user shares with an app while using the Google Picker API or the app's file picker.". In order to use this scope with Google Picker API you need to pass your client id when creation google picker object.
When configuring GDrive UI Integration there is an option to automatically show consent screen after user opens applicatin. This will trigger authentication code flow. After user gives consent browser will be redirected to the application with oauth flow parameters included as query parameters (code, scopes)
Google defines scope https://www.googleapis.com/auth/drive.file
which gives a limited access to files in google drive. According, to [documentation]{https://developers.google.com/drive/api/guides/api-specific-auth} this scope allows to:
Create new Drive files, or modify existing files, that you open with an app or that the user shares with an app while using the Google Picker API or the app's file picker.
This means that in some cases it won't give enough permissions. For example it won't allow to load image files that are added to markdown document manually via raw fileId
, see ::gdrive
custom tag. As cited above it will work only if file was selected via Google Picker API.
Jest was replaced with Vitest because of few issues.
It seems that milkdown is distributed as ES module and it was hard to setup jest to support ES modules and not break something else (for example jose library). Jest test were very slow. There was also problem with mocking modules which required using unstable apis.
For Vitest everything just works and is really simple to configure.
It is not very clear what it is the main difference. See this milkdown Q&A for some additional explanations.
For Milkdown provided schemas usually there is an $nodeAttr
slice defined for schema elements. This slice is then used to take html attributes inside schema toDOM
function, thus by setting value for this slice inside custom plugin you might influence attributes in final HTML dom node.