Inspiration

The MLH family and the open-source community in general is largely dependent on Github and markdown. Github is also releasing new features that are heavily dependent on markdown (like the new profile description), Project boards, Wikis, etc. Not only GitHub, but other sites as well which are dependent on markdown for taking inputs often miss out the editor, just like Devpost (yeah, this also didn't have a markdown editor).

So to ease the daily operations of fellows, from giving daily standup and posting to teams page, to writing detailed wikis, issues, or PR bodies, this project emerged.

What it does

This allows adding a fully-fledged markdown editor to any site with just a click. All sites get the extended features of a markdown editor, with 0 configs.

How we built it

We built a chrome extension which generates a markdown editor in the chrome extension popup, and then used Google Chrome's messaging API to communicate between the content script and the popup.

The content script ensures that the markdown content is injected safely, and the popup ensures that we get a nice isolated editor, which is not affected by site stylings.

This is how it looks: ext

We also have a "minimal theme" minimal theme

Features

The editor supports:

  • auto indentation, even for nested items
  • Shortcuts for styling
  • Shortcuts for adding items
    • lists
    • bullets
    • images

Challenges we ran into

Our plan was to enable live editing, but couldn't add it. And we were planning to add some more feature for the monaco editor integration but couldn't do it.

Accomplishments that we're proud of

Working Chrome extension which can power up all components on Github.

What we learned

A lot about sockets, chrome extensions, and content security policies.

What's next

  • We are aiming to bring the experience of having a vscode type IDE in GitHub itself. Not for coding, just for writing content.

  • ide_btn

  • You get

  • ide

  • In this, we are using Monaco Editor which supports syntax highlighting, better navigation, and also supports custom commands, custom language service using LSP, and many more.

  • Option to inject HTML in place of markdown for editors that take HTML input but not markdown

Live Collaborating

This a major feature and this is quite a complex feature to have it upon the extension. So we thought of doing a workaround for this.

We have created a separate node server that supports socket connections and created a react client. React client will connect the sockets with our node and then it will validate the connection.

Using “Collaborate Live” button

live collaborate btn

A page will open and there will be an option to invite collaborators to do live collaboration and editing on that page.

invite

collaboration page

There will be a GitHub bot that will listen for the event in the collaboration frontend and our react client will emit events and GitHub bot with those events will sync the content in the real placeholder in the GitHub like either in the GitHub comments, wikis, etc.

This feature is still in Work in progress and we are aiming to bring this soon.

Built With

Share this project:

Updates