Skip to content

pawelkorus/gdrive-markdown-editor

Repository files navigation

gdrive-markdown-editor

Markdown editor that integrates with your Google Drive.

Generic directives

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 like a)
  • directives with prefix :: denote leaf block directives (something like p)
  • directives with prefix ::: denote container block directives (something like div)

Custom tags

Embed file from google drive

This tag will load file from your google drive and embed it into document as image.

::gdrive{src="googleFileId"}

Embed youtube videos

This tag will create embed with youtube video.

::youtube{src="videoId"}

Link referencing Gdrive file

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"}

Developer notes

Check all scopes that will be requested by this app

See toScope method in src/google/authorization.ts.

Google Authentication & Authorization

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.

Google picker api

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.

GDrive UI Integration

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)

GDrive 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 vs Vitest

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.

Set content dynamically in milkdown editor

See this milkdown Q&A

What is the difference between $node and $nodeSchema in Milkdown

It is not very clear what it is the main difference. See this milkdown Q&A for some additional explanations.

Patterns for extending Milkdown

Just adding some additional html attributes to nodes

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.

References

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published