hediet / browser-ext-github-monaco

This extension brings the famous Monaco editor to Github

Monaco Markdown Editor For GitHub (Chrome/Firefox)

[ Install For Chrome ] [ Install For Firefox ]

This Chrome/Firefox extension brings the famous Monaco editor to GitHub!

---

Monaco Features

• Syntax Highlighting of Markdown and Code Snippets
• Tab to indent and Shift+Tab to outdent entire selections
• Multi-Cursor Editing
• and much more

Additional Features

• Press F11 to toggle full screen (F10 for wide full screen).
• The full screen mode previews the markdown if enough space is available.

Github Features

• Autocompletion for issues, mentions and emojis.

This extension replaces all GitHub text areas for authoring markdown with a monaco editor.

Demo

Full-Screen-Mode

Building

You need nodejs and yarn. Just run these commands to produce extension.zip in the dist folder:

yarn
yarn build

browser-ext-github-monaco's Issues

Improve Completion Of Gemojis

At this cursor position, Gemoji completion should not be triggered:

foo:|

Spell check...

Is it possible to get some sort of spell check added?

I usually use this extension: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Not working with latest GitHub

Sadly, this extension seems to no longer work with Chrome v118 (Material UI refresh).

Tab title changes to "(Draft comment)" when comment box is empty

If you leave an issue or pull request page open in the background, the tab title will immediately change to "(Draft comment) ..." even if the user hasn't typed anything in the comment box.

This does not happen when the addon is disabled.

Shortcut for "Preview" doesn't work

GitHub provides a shortcut to switch to the preview tab:

Unfortunately this shortcut no longer works after installing this extension.

dead link for firefox extention

https://addons.mozilla.org/en-US/firefox/addon/monaco-markdown-github-editor/

Oops! We can’t find that page

Support for other similar sites (Trello)

I mentioned this in a HN comment but figured I should bring it here.

Trello uses a similar system for all its user-editable fields: plain browser text fields (non-monospaced font) to write markdown. This is probably my least favourite thing about it.

Example:

Adding any form of Monaco functionality, even just syntax highlighting, would be incredible.

Extension prevents Grammarly extension to autocorrect

With extension

Without extension

Additional tilde when triggering code format on a selected word

When selecting text and triggering code format, it adds an extra tilde ´ (using the inverse so it does not trigger here).

* Triggering the button before writing a word: ``
* Triggering the button on a selected word: `tmp``

Seem to happen in two steps, if I ctrl+Z the additional tilde is removed and goes back to the word being selected. Maybe related to how the cursor stops selection and goes to the right of the tilde.

I use the last version of the extension (0.5.2), chrome.

Support other websites

Would be nice to have on all stackexchange sites like stackoverflow.com.

Use Monaco editor when editing repo files

This is a bigger one!

It would be fantastic to also reuse the Monaco editor when editing files directly in the repo.

Match the dark theme with the one used by GitHub

The dark theme used in this extension is different from the one used by GitHub. It would be great if they both matched!

Also, when the dark mode is enabled, there is a white border around the editor which doesn't look good.

Support for FireFox?

If I recall correctly, it's quite easy to publish a Chrome extension to FireFox. This extension looks awesome, but as a FireFox user, I'm unable to use it...

Configurable tab stop spaces

Hi! 👋 Thanks for this great extension.

I use a lot of ruby and standard ruby formatting is two spaces for tab stops. Unfortunately, this defaults to 4 spaces, which makes it very clumsy to paste and format Ruby code. Is there or can there be a way to configure this? Thanks!

Add Support for GitHub Releases

Currently, this extension doesn't run on the "Edit release" page for GitHub releases. It'd be great to see Monaco work with the releases page.

Render Referenced Images In a View Zone

Bug: Inline Code Review Discussion

When starting an inline code review discussion, it looks like this

It seems like it tried to insert two monaco editors for whatever reason.

Not working in gist comments

Left is the gist comment box:

Also please make github gists use darkmode ;)

Allow resizing of text areas

Hello,

I've used this extension for a few minutes now, and so far I'm loving it! Great work!

When I was first playing with the extension, I quickly realized I could no longer resize text areas. I didn't realize the F11 shortcut existed until I scanned through this project's README. Some ideas:

1. Would it be difficult to add support for resizing text areas? Otherwise,
2. Consider advertising the F11 shortcut at the bottom of the editor:

Intellisense for emojis?

Eheh, I'm getting very excited with this project!

On the regular GH input box, one can type : and get emoji proposals. It would be pretty cool to keep that going in the Monaco editor, to keep the trigger memory going.

Let me know if you'd like a contribution from me, I don't mind helping out.

`Quote reply` doesn't work

Whitespace in review comments

Think this shows it clearly, there is too much whitespace

I suspect this is the culprit:

browser-ext-github-monaco/src/content-script-main/EditorWrapper.ts

Line 296 in 43766c8

: `${Math.min(300, Math.max(100, this.editorHeight + 2))}px`;

Editor height should have a soft limit

When editing a large comment post or wiki page, the editor takes the same height as its content. This is problematic because the users can't scroll inside the editor area, not can they click and drag text selection to scroll down.

I suggest to just cap the editor widget height, like GH normally does. What do you think?

Advertise the F11 shortcut at the bottom of the editor

(from #16)

Support for on premise github instances

It would be nice to support on premise instances of Github as well. Perhaps some sort of configuration option that allows users to list all URL patterns?

Thanks!

Harden Security & Automate Releases

As more and more people use this and this extension has access to github cookies, a transparent release process that does not involve my computer would be nice to have.
This would require automating the release process.
Ideally, the version in the changelog is used as ground truth.

CSS selector to change the color of the typing cursor?

It's not visible for me if I make the background color of the editor to black

Toggle enable/disable switch in extension menu?

Can we have a way to quickly toggle the plugin on and off?

Maybe we can have it at the top of the options page?

Mention autocomplete has stopped working

When I try to mention someone in a comment, no usernames show when I type @. In developer tools I see requests go out when I type @, and results come back in the response, but no results show in the UI.

support github enteprise

Is it possible to prevent autocomplete/autosuggest for plain english words?

I love this extension! But, I've noticed that it pops up autocomplete suggestions for what seem like regular words, for lack of a better term.

The README mentions "Autocompletion for issues, mentions and emojis.", so I would not expect the behavior I'm observing. Here's a gif displaying the behavior:

I didn't find any configuration options page or anything that would allow changing this.

Happy to help/provide more information however I can!

Allow for custom theme

It would be awesome if we could customize the editor to use specific colors. Currently I'm using the User CSS extension as a hacky way to accomplish this.

Thanks for making such a great extension!

Support monaco diff editor for changes view?

Not sure if this is in the cards, but I would love to see the monaco diff editor be used when looking at changes on GitHub 👍

https://microsoft.github.io/monaco-editor/playground.html#creating-the-diffeditor-hello-diff-world

Add python as language

Hello,

Can you add python as language for this monaco editor ?
Can sponsor you if you need.
thanks

Code link feautre doesn't work with c# or python only with typescript

Code link feautre doesn't work with csharp or python only with typescript. Could you add support for other languages beside typescript?

Issue with refined-github "add collapsible content" button

When using refined-github, the collapsible content button works sporadically.

https://github.com/refined-github/refined-github#writing-comments

Adds a button to insert collapsible content (via <details>).

It only works if I click another button first like "add code".

5 digit long line numbers don't show up correctly unless there are 6 digit ones too

When line numbers get 5 digit long the last two digits are rendered on top of each other:

But when they become 6 digits long this is no more the case, and even the 6 digit numbers show up correctly:

This will most probably not impact any real usecase, but I just happened to find this issue so I'm reporting it. Also, this extension is very helpful, so thanks for developing it!

The license

Thank you for implementing nice codes for this one 😃👍

There is no license file in this project.
Would you be willing to add an OSI-approved license like
the MIT, the Apache, or the GPL License to the project ?

Live markdown preview

Is there a way to get a live markdown preview? Side by side, or on the bottom?

Quote Reply doesn't work any more

Ctrl Enter to submit issue

Ctrl Enter doesn't work any more! ;)

Improve Media / Gifs / Store Presentation

I guess even the logo could be reworked.

I'd be very happy if someone could help me polishing the presentation of this extension ;)