ckeditor/github-writer

GitHub Writer - WYSIWYG Rich-Text Editor for GitHub, powered by CKEditor.

GitHub WYSIWYG Rich-Text Editor

GitHub Writer is a WYSIWYG rich-text editor for GitHub. The extension is available when creating or commenting on issues, reviews, pull requests, and wikis. 

It provides all the features available in the GitHub plain-text editor, including Markdown input. For features like tables, it offers a much easier experience in comparison to plain-text Markdown and allows users to be more productive. 

It is powered by CKEditor 5, a modern JavaScript rich-text editor.

Installation

The extension can be found at the following directories for an easy one click installation:

• GitHub Writer at Chrome Web Store
• GitHub Writer at Firefox Add-ons

Features

One of the goals of this extension is to provide all the typical features available in the GitHub plain-text editor, including Markdown support. The following is the list of GitHub features, with the ones checked already available in GitHub Writer:

• Inline formatting
  • Bold
  • Italic
  • Strikethrough
  • Inline code
• Structure
  • Paragraphs (Enter)
  • Soft line-break (Shift+Enter)
  • Headings
  • Horizontal line separator
• Blocks
  • Quotation
  • Code block
    • Language selection
• Lists
  • Bulleted list
  • Numbered list
  • Task/To-do list
• Links
  • On text
  • Auto-link URLs on pasting.
  • Auto-link URLs on typing.
• Media
  • Image upload (including Wiki)
    • Drag-and-drop
    • Paste
    • Open file dialog
• Mermaid diagrams
• Auto-complete
  • People (list when typing "@")
  • Issues and PRs (list when typing "#")
• Other
  • Emoji
    • OS, Unicode characters
    • Auto-complete (list when typing ":")
  • Escape Markdown in text
  • Tables
  • Quote selection (r key)
  • PR code suggestions
  • Saved replies

Pages enabled

GitHub Writer should be enabled in all places where the original Markdown editor is available. The following are currently implemented:

• Issues
  • New
  • Editing
  • Comment
    • Editing
• Pull requests
  • Create
  • Comment
    • Editing
  • Review
  • Code comments
    • Editing
• Commits
  • Comment
  • Line comment
• Wiki pages
• Releases
• Milestones
• Settings > Saved Replies

Developer information

The source code contains additional readme files with technical details about the project:

• Development (setup, build, run).
• Tests (architecture, configuration, run).
• Architecture (source code, API).

---

Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.

GitHub is a trademark of GitHub, Inc.

github-writer's Issues

Empty paragraph between code and quote

1. In the markdown editor, paste the following:

```plaintext
Code
```

> Quote

2. Click "Preview" to check that there is no empty paragraph between the code and the quote.

3. Go back to RTE => Issue: there will be an empty paragraph between the code and the quote.

Editor in a review comment breaks onchange actions

I guess the "Add single comment" button is disabled because GH thinks it's an empty comment.

Editor should remember unsaved text between sessions

Something that I miss a lot compared to the builtin GH editor is text retention between sessions.

For instance I can open issue X, type something in comment without saving it, refresh the page, and my comment draft is still there.

This should also work for review comments, review summary.

After pasting link the caret should be moved outside of the link

It's an upstream issue, but it really annoys me so I'm reporting the issue here as well 😄 

Ref: ckeditor/ckeditor5#6053.

Ctrl+shift+p key causes screen to scroll top

This is a hotkey used for preview in native GH. With GH RTE it brings up print dialog (not that useful imho, but not a big deal) but it also scrolls the screen to top, which is bad if you're working on a comment in a middle of a long topic.

No way to move forward from pasted inline code when at the end of the line

TC

1. Write something in issue comment.
2. Copy and paste inline code (e.g. from previous comments) or write code, step out and go back with the cursor at the end of the code.
3. Try to move cursor after that inline code to write some more, regular text.

Expected: right arrow would step-out of the inline code to regular formatting.

Current: right arrow does nothing, cursor is stuck at the end of the inline code.

Strange behavior of ENTER after inline code

TC 1

1. Enter some text with inline code at the end.
2. Press ENTER.
3. Start typing.

Expected: typing inside inline code in a new line.

Current: cursor goes back to the previous line.

---

TC 2

1. Enter some text with inline code at the end.
2. Press ENTER.
3. Start typing (you will be typing as in TC 1).
4. Hit BACKSPACE and ENTER again.

Expected: typing inside inline code in a new line.

Current: cursor goes two lines down with new inline code started, leaving one empty line between.

---

Screencast

Grammarly integration does not work

It looks that Grammarly only works in the original markdown editor. 

However, I don't know whether it is a bug or some kind of missing feature ;)

Block autoformat could work in all kind of blocks

This is actually upstream: ckeditor/ckeditor5#6170:

So, right now when you're in at the beginning of a heading 2 and type ### it is not going to change it to a heading 3. It's only possible to turn a paragraph into other types of blocks.

This means that you can't easily toggle between block types. Also, if you made a mistake, you need to get back to a paragraph (e.g. by undoing) and only then you can use autoformatting.

I think we should change this.

One example of an application where you can always switch between block types is Notion and I use this quite a lot. Especially when I'm changing heading levels (cause I'm reorganizing a document)

I think it'd be good to track it here because it actually became apparent how painful this is when we started using GHRTE. Also, I know that @fredck implemented the Tab heading toggler and perhaps that wouldn't be needed if we had better autoformat.

cc @jodator

Pressing "R" should not steal focus to the main editor

There are cases when there are multiple editors on the page. E.g. in a PR you have editors for comments and the main comment thread. If you select piece of text in a comment and want to reply in that thread, you press <kbd>R</kbd> and GitHub moves focus to the editor in that thread.

GitHub RTE steals this focus and moves it to the main editor.

Editor should remember unsaved text between sessions

Something that I miss a lot compared to the builtin GH editor is text retention between sessions.

For instance I can open issue X, type something in comment without saving it, refresh the page, and my comment draft is still there.

Review summary should also contain RTE

When making a review you can include a review summary.

The editor should also be included there.

It's related to #11 but it's in a different place of GH so I wanted to make sure that we track this.

Make it easier to switch to markdown

Whenever I hit some limitations of the editor it annoys me that in order to switch to the markdown mode, I have to click two times. Also it's unnatural for me to look for a way to turn off the editor among the list of other buttons that actually provide some editor functionality.
 

There's plenty of space on top where such a toggle could be available. Also it seems a bit more natural on GitHub to use the tabs to switch between modes than to use the editor button.

Alternatively, if there is any other location where such a editor->markdown toggle could be located I could be fine with it too.

HTML entities are not handled correctly

I just created a broken issue, because I did not wrap an HTML tag with the code tag. Typing as plain text the content below:

Writing some code tags: <h1>, <h2>, <h3>... 

results in...

Writing some code tags:

,

,

...

---

In theory, this is how the default text input in GitHub works. This is however slightly counterintuitive as in WYSIWYG editors whatever is typed by the user in the editing area is treated as "plain text" and converted to entities. Not sure what should be the correct behavior.

An opt-in to share errors statistics

CKE5 GH editor is bleeding into console from time to time with some errors. I believe it would be valuable for us to allow automated data collection on errors.

Now, I know that it is a very delicate think to ask for data collection (that's a telemetry after all, and I'm usually not feeling comfortable with it) but in this particular case I'd be happy to enable it (as long as telemetry bits are fully open source).

It could be as an opt-in configuration somewhere or a separate build to give peace of mind to regular users.

What type of data should be processed?

Also one needs to think whether error messages / traces give enough value. It tells how many users face a given error, but leave us clueless as to what leads to this error.

At the same time IMO storing and eventually sending detailed interactions with the editor is a little too much to ask.

Disable autolinking inside code

Although kinda cool, the autolinking feature should be disabled inside inline code and code blocks because GitHub has no support for it there.

Ctrl+(shift+)enter key combination should not be blocked

Currently the editor takes over two important hotkeys from GH:

ctrl+enter	Commit the comment (or issue)
ctrl+shift+enter	Commit the comment and close current issue.

Both hotkeys are currently handled by the editor, but prevented from being handled by GH.

As a workaround you need to tab out of the editor, but it's a little bit troublesome to do it each time.

Add support for issue links in different repo/org

When manually adding links to an issue in another repository in a form of <organization>/<repo>#<number> I typically use ctrl+shift+p hotkey to display preview and verify generated link.

As noted in #23 this hotkey has now a different purpose and I think it might have been a deliberate decision not to support preview feature, since GH RTE is meant to show the content as it should be rendered - so there's no need for a preview the way as "native GH" textarea has.

But this means I'd like to see another option to allow me to verify links in cases like this.

Strange behavior of ENTER after inline code

TC 1

1. Enter some text with inline code at the end.
2. Press ENTER
3. Start typing.

Expected: typing inside inline code in a new line

Current: cursor goes back to the previous line

---

TC 2

1. Enter some text with inline code at the end.
2. Press ENTER
3. Start typing (you will be typing as in TC 1)
4. Hit BACKSPACE and ENTER again

Expected: typing inside inline code in a new line

Current: cursor goes two lines down with new inline code started, leaving one empty line between

---

Screencast

Add some credits to the extension menu

E.g. something similar to what we have in HangHub:

Editor should remember unsaved text between sessions

Something that I miss a lot compared to the builtin GH editor is text retention between sessions.

For instance I can open issue X, type something in comment without saving it, refresh the page, and my comment draft is still there.

Error "Cannot read property 'name' of undefined" thrown by the editor

I was just writing an issue and at some point editor started to work in a buggy way, e.g. I couldn't backspace a collapsed range.

Definitely looks like an upstream, but I'm having a hard time telling what precisely I did for this error to happen.

What I know that I created a new issue and started to write into a clean editor (repo had no issue template).

Here's the content that I made:

Unfortunately I don't know at what exact point the editor started to bleed. Here are the exceptions:

Uncaught TypeError: Cannot read property 'name' of undefined
    at oa.getModelLength (github-rte.js:321)
    at oa._findPositionIn (github-rte.js:321)
    at oa.on.priority (github-rte.js:321)
    at oa.fire (github-rte.js:39)
    at oa.toViewPosition (github-rte.js:321)
    at sa.Va.downcastDispatcher.on.priority (github-rte.js:359)
    at sa.fire (github-rte.js:39)
    at sa.convertRemove (github-rte.js:330)
    at sa.convertChanges (github-rte.js:330)
    at github-rte.js:359

And there was a second exception:

Uncaught CKEditorError: model-nodelist-offset-out-of-bounds: Given offset cannot be found in the node list. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-model-nodelist-offset-out-of-bounds
 {"offset":32,"nodeList":[{"data":"List of currently implemented a"}]}
    at Qs.offsetToIndex (chrome-extension://diilnnhpcdjhhkjcbdljaonhmhapadap/github-rte.js:301:834)
    at Xs.offsetToIndex (chrome-extension://diilnnhpcdjhhkjcbdljaonhmhapadap/github-rte.js:305:629)
    at ea.get index [as index] (chrome-extension://diilnnhpcdjhhkjcbdljaonhmhapadap/github-rte.js:313:856)
    at ea.get textNode [as textNode] (chrome-extension://diilnnhpcdjhhkjcbdljaonhmhapadap/github-rte.js:313:932)
    at $c (chrome-extension://diilnnhpcdjhhkjcbdljaonhmhapadap/github-rte.js:474:2626)
    at Hc._validateSelectionRange (chrome-extension://diilnnhpcdjhhkjcbdljaonhmhapadap/github-rte.js:474:2462)
    at wa.<anonymous> (chrome-extension://diilnnhpcdjhhkjcbdljaonhmhapadap/github-rte.js:343:2775)
    at wa.fire (chrome-extension://diilnnhpcdjhhkjcbdljaonhmhapadap/github-rte.js:39:1581)
    at wa._setRanges (chrome-extension://diilnnhpcdjhhkjcbdljaonhmhapadap/github-rte.js:334:2552)
    at wa.setTo (chrome-extension://diilnnhpcdjhhkjcbdljaonhmhapadap/github-rte.js:334:1411)

Make auto-link clicable with ctrl/cmd+click

Hitting ctrl/cmd+click on an auto-link should open it in a new tab.

<kbd> does not work

Because < and > are escaped when getting data, <kbd>Tab</kbd> does not work when using our editor on GH. You just get <kbd>Tab<Kbd>.

I think we'd need a feature for that :(.

Allow for blockquotes and mixed blocks inside lists

Sometimes, when creating complex lists some text should go to the new line, but visually connected to the list item.

Parse pasted markdown content

It would be nice to be able to parse pasted markdown content instead treating it as a plain text.

So that if I paste content like:

Foo **bar** baz.

Foo [bar](/foo.html) baz.

Expected

Actual

This one might be tricky, due to the fact that sometimes it's impossible to determine whether pasted content is markup or not.

Avoid having vertical scrollbars

The fact that GHRTE removes vertical scrollbars in most cases is one of the best thing about it. Unfortunately, sometimes the vertical scrollbar remains. 

Placeholder doesn't disappear

Not sure what triggers this, but from time to time (in ~5% of cases I think) the placeholder doesn't disappear:

When I start typing weird things begin to happen. Not sure if this is CKE5 related, but I didn't see this issue anywhere outside GHRTE.

Save Page buttons disabled in Wiki pages

In a new wiki page, if the title is left blank and something is typed inside the page body, the "Save Page" button doesn't get enabled when the title is input later. The button gets stuck.

Lack of support for nested quotes

For me it's a common case that when referencing to other comments I use blockquote to include part of that comment. Sometimes the included part already has a blockqute and then one needs support for nested quotes:

ATM it's not supported so I need to switch to markdown editor.

Bring back the "Attach files by..." button

I mean this bar:

I often use it to quickly add images to the content. I do not use DnD because I always have the browser full-size.

The other option is adding the image button to the main toolbar (the one that's constantly visible).

The editor placeholder feels non-native and laggy

As discussed in ckeditor/ckeditor5#6129.

I'm reporting it here because it affects GHRTE quite badly, IMO.

Multiple editor instances inserted for review multiline comment

See below:

It should be possible to set alternative text for the image

It should be possible to to set image's alt attribute to make the content accessible.

The submit button should be blocked while image upload is in progress

I've just managed to click it before an upload finished.

Mentions: click is not working

Clicking with the mouse in one of the mentions entries is doing nothing.

Header column option styling is broken

Mentions tooltip stuck when typed too quickly

It seems that often mentions will stuck and not notice the fact that I already done typing my issue number - it cause the editing layer to prevent space insertion.

I faced this issue more and more recently and it impacts editing experience when you have just a quick comment. It was tricky for me at first to see exactly what was going on, but here it is.

In both cases what I did was:

1. Make sure that only GH-RTE extension is active (so that other extensions do not interfere).
2. Make sure you have 5880 (plain) text copied into your clipboard.
3. Open ckeditor/ckeditor5#6068
4. Focus the editor at the bottom.
5. Type "this issue is blocked by # ".

For some reasons it can break with two slightly different outcomes:

Case 1

Sticking mention tooltip, allows for typing but does not allow for spaces etc.

screencast: https://drive.google.com/file/d/1TG84-XwqIKBiqQJZ5ObVwVtZW-tZDJhT/view?usp=sharing

Case 2

Mention tooltip sticks to the very top of the page, thus at first I was unaware what is going on and I thought that I simply can't type space at all.

screencast: https://drive.google.com/file/d/1GhStGqwS8ADZ6lsYqIGVDzSDmGfc4xe2/view?usp=sharing

Mentions throw

This is a comment under ckeditor/ckeditor5-engine#1811 if that matters. It throws when you type @ml.

Implement some kind of browser "back button" protection

It would be great if the entered content wasn't lost after accidentally going back in the browser tab.

Editor should remember unsaved text between sessions

Something that I miss a lot compared to the builtin GH editor is text retention between sessions.

For instance I can open issue X, type something in comment without saving it, refresh the page, and my comment draft is still there.

Triple ticks (```) break code blocks

Creating a code block like the following creates wrong markdown:

// The following is the syntax of a code block in markdown.
```
Code goes here
```

Current output:

```plaintext
// The following is the syntax of a code block in markdown.
```
Code goes here
```
```

Expected output:

````plaintext
// The following is the syntax of a code block in markdown.
```
Code goes here
```
````

The code block should be marked with 4 ticks, instead of 3. Actually, it should use any number of ticks which are not in use inside the code block itself.

Render emojis instead of their code

When typing a emoji code, like :smile:, the RTE should replace it with the rendered emoji but, in any case, still output its code.

Currently we see just the code:

Expected:

Ideally it should also convert unicode emojis (inserted with native OS features) to their code, on output.

Autocomplete should not work in <code>

It makes typing a #prop nearly impossible.

There are actually similar issues on CKE5 side too:

• ckeditor/ckeditor5#5962
• ckeditor/ckeditor5#5958

But it may be just faster to change the feed function in GH RTE so it returns an empty search list when the selection is in a <code>.

Horizontal Line: empty paragraph left when inserting line

When inserting a horizontal line, by typing "---", an empty paragraph is created before the line itself. That paragraph should not be created.

Mentions: enable toolbar buttons

The default GH editor presents two buttons for mentions:

The behave in the same way:

• If there is no characters before the selection, it just "types" the mention marker (# or @) and shows the list.
• If there are characters before the selection (or selected text) it adds the marker before the characters (or the selection), leaving the selection as is, and shows the list.

Add a link to report an issue

Once the repo is public, it would be great to add the possibility to report easily an issue (bug/enhancement) straight from the extension menu.

Avoid editor "blinking" on page load

The default markdown editor shows up briefly when loading the page and then replaced by a CKEditor. It give a buggy sensation, although nothing bad happens because of it.

Typing second underscore in a paragraph makes italic from the first one

TC

1. Start typing in a paragraph with some underscore inside the text, like:

   Just a test variable: VARIABLE_NAME and another variable

2. Continue typing something with _ inside.

Expected: nothing changes.
Current: the whole part from the first _ get italic until the second one, the underscore disappears:

Commenting in PR

GitHub RTE does not work in PR (commenting)