✨ Koenig Editor - Beta Release


#102

Some recently encountered issues:

  • In night mode the cursor is almost impossible to see
  • click, shift-click doesn’t create a text selection
  • (+) button mid-article, type html enter doesn’t insert the HTML card, but jumps to the next card in the aricle.
  • Insert an empty picture card, then paste a graphic inserts the same picture twice.
  • Pages of type “post” don’t get a “publishedDate” in the Structured Data. Looks like Google disagrees with that.

Feature requests:

  • Offer float-left/right for figures so text can flow around it
  • Add option to add link and copyright details to images (license type (CC) + attribution + link). I use a lot of Creative Commons images from Flickr and other sources that offer Creative Commons.
  • Offer code in image descriptions
  • Inline <script type="application/ld+json"> card editor for courses, events and books

#103

Ghost 1.25.0 has been released and includes word count display, keyboard shortcuts, and a number of bug fixes for Koenig.

:warning: Breaking changes, please read:

  • The HTML output of Koenig beta posts has changed
  • Themes will require updates to be compatible!
  • See the themes changelog for specific changes in this version if your theme is already Koenig compatible
  • See the Ghost 2.0 Theme Compatibility forum topic if your theme is not yet Koenig compatible

Keyboard shortcuts in Koenig are as follows:

  • Ctrl+Alt+1 - Toggle heading level 1
  • Ctrl+Alt+2 - Toggle heading level 2
  • Ctrl+Alt+3 - Toggle heading level 3
  • Ctrl+Alt+4 - Toggle heading level 4
  • Ctrl+Alt+5 - Toggle heading level 5
  • Ctrl+Alt+6 - Toggle heading level 6
  • Ctrl/Cmd+H - Cycle through heading levels 2-6
  • Ctrl+Q - Toggle blockquote
  • Ctrl+L - Toggle unordered list
  • Ctrl/Cmd+K - Toggle link
  • Ctrl/Cmd+B - Toggle bold
  • Ctrl/Cmd+I - Toggle italic
  • Ctrl/Cmd+U - Toggle underline
  • Ctrl+Alt+U - Toggle strikethrough
  • Ctrl/Cmd+Shift+K - Toggle code
  • Ctrl/Cmd+Enter - Enter/exit “edit” mode of a card when it’s selected and has an edit mode (ie. markdown, html, and code cards)
  • Shift+Enter - Insert a <br> or “soft break” to break a line without creating a new paragraph

As always, please report any issues you run into, we’re getting close to Ghost 2.0 where Koenig will replace the current editor. We want to make sure all major issues are found and fixed before then :wink:


#104

why there’s no code block card in my koenig editor

Version 1.25.2


#105

Just poked at Koenig for the first time (1.25.2) and it looks great! I ran into the following issues, using Firefox Nightly on Linux.

Personal blockers:

  • I don’t see any way to set alt text on images for people using screen readers or other assistive technology.
  • Word deletion (Ctrl-Backspace) doesn’t work in Koenig, and instead deletes individual characters.
  • I don’t see any way to set the language attribute on code blocks. Pasting such Markdown into Koenig works, but strips that attribute and breaks some client-side syntax highlighting libraries.

Papercuts:

  • Typing feels sluggish
  • I was surprised when I created an HTML block containing only inline elements (<kbd>example</kbd>), that the content was not wrapped inside a block-level <p> or similar when published.
  • I found dragging-and-dropping images to be unreliable, mainly due to the lack of visible feedback. Placeholders respond to images being dragged over them, but there’s no visual response when dragging into body text.

Slash Menu:

  • The slash menu is un-discoverable, yet really useful.
  • The “Other…” option in the slash menu does not appear when filtering on /other (it does on /embed). Every other entry is findable based on its label text.
  • There is no feedback when all entries are filtered out (/foo), just an empty box.
  • When triggered at the bottom of the page, much of the slash menu is invisible, running off the bottom of the viewport.

Good luck with 2.0.


#106

You can add a code card using markdown, if you type ``` in a blank paragraph then a code card will be inserted.

There’s a bit of a bug here, the front-end rendering isn’t currently outputting supplied alt text but that will be fixed in tomorrow’s release. In the current version of Koenig you can use markdown syntax to create an image card with alt text, eg:

![my alt text]()

After Ghost 2.0 is released we have plans to add a settings panel for cards so that things like alt and title text are more easily accessible/editable.

Word deletion (Ctrl-Backspace) doesn’t work in Koenig, and instead deletes individual characters.

Hmm, this sounds like it’s a Linux-specific issue. Do you see the same behaviour in the mobiledoc-kit demo?

I don’t see any way to set the language attribute on code blocks.

Correct, that’s not implemented. Current workaround if you need syntax highlighting would be to use the markdown or html card to output the specific HTML that you need.

Typing feels sluggish

Interesting, what spec computer are you using for reference?

I don’t know if it’s the cause but there is no testing done outside of mainline browser releases so beta/canary/nightly browser versions are not supported and may have issues. It would be useful to know if you feel the same sluggishness using the latest mainline version of Firefox.

I was surprised when I created an HTML block containing only inline elements (<kbd>example</kbd>), that the content was not wrapped inside a block-level <p> or similar when published.

The HTML card is a full escape to HTML unlike the pseudo-escape to HTML that markdown gives you where you have to be very careful with blank lines and having to deal with unwanted <p> tags messing with your intended markup. This is why there are separate HTML and Markdown cards rather than only having a Markdown card.

If you want wrapping <p> tags around individual HTML lines maybe using the markdown card would make more sense? It sounds like you’re expecting markdown behaviour.


#107

so what’s the reason for its not appearing in the cards?


#108

The card menu and formatting bar is being left intentionally minimal to focus on primary use-cases for writers rather than developers.


#109

Glad to know that card settings are in the backlog; sounds like that’s well under control, and escaping to Markdown for that (and code blocks that need explicit language metadata) is a reasonable workaround for now.

Word deletion (Ctrl-Backspace) doesn’t work in Koenig, and instead deletes individual characters.

Hmm, this sounds like it’s a Linux-specific issue. Do you see the same behaviour in the mobiledoc-kit demo?

Huh, I do! I see the same in both Firefox and Chrome on Linux, but not macOS or Windows. I wonder what’s going on to have platform-specific (but not browser-specific) bugs like that. Strange.

Interesting, what spec computer are you using for reference?

I’m using a relatively well-spec’d 2017 ThinkPad X1 Carbon (5th Generation) with an i7-7600U CPU, and I see the same thing in release versions of both Firefox and Chrome.

In particular, FPS occasionally dips quite a bit during the keypress event handler. I see it exceed 60ms in a few instances, with the overall framerate dipping below 4 fps at times. The profiler adds its own overhead, so real-world performance isn’t that bad, but it’s just enough to where I can feel some latency between keydown and paint.

Not a blocker at all, but maybe something to profile and look into once the dust settles from 2.0.

If you want wrapping <p> tags around individual HTML lines maybe using the markdown card would make more sense? It sounds like you’re expecting markdown behaviour.

Yep! I’m not sure what could’ve been done to make that more obvious / intuitive to me, but probably not worth worrying about beyond noting that one user had an “oh, that’s how that works? Ok.” reaction to the HTML block. :slight_smile:


#110

As writer developer I’d love to be able to customize which cards to show.


#111

Another small issue:

  • When editing links (click the chain-link icon) the link won’t be updated when using the numpad-enter-key instead of the main-enter-key.

#112

Unfortunately due to browser differences (especially historic ones) there’s generally a lot of manual reimplementation of OS-provided keyboard interaction that is needed when building a web-based editor :weary: In this case Ctrl+Backspace was only being picked up on Windows. Fix should be in tomorrow’s release.

We’re definitely thinking about future customisation, especially once the number of cards grows and it’s possible to install 3rd party cards.

When editing links (click the chain-link icon) the link won’t be updated when using the numpad-enter-key instead of the main-enter-key.

Good catch, fix is in master and should go out in tomorrow’s release.


#113

I’m missing the point about moving to the “card paradigm”.

What’s the benefit from a writer perspective (not a geek)? I was hoping to be able to structure my article in multiple sections using several text blocks and be able to move cards around, inserting new blocks etc… It seems that this is not an option…

Could you please clarify?


#114

Please read topics before responding, Kevin literally wrote 2,000 words here, at the very start of this exact page, explaining the purpose and the power of cards and what they are for.

Everything you listed is already possible, with the exception of dragging and dropping cards. As the post title says: The editor is in beta.


#116

When writing in Ghost, I typically draft outside in Markdown and then paste the complete article into Ghost. Following advice from @John I tried copying the HTML representation of MD. Overall, the result is pretty good. Except for code blocks (```), that are replaced with an empty code card, everything seems to be working. Initially I missed the MD expansions and wondered how I’d go about adding inline code snippet or H3 but @John clarified it and it seems to be working.


#117

Nice. Might need more specific info I think, I just tried copying this:

from https://demo.ghost.io/advanced-markdown/ - into Koenig:

and it seemed to work ok!

Do you have a specific bit of HTML with a codeblock that consistently doesn’t work?


#118

My bad @John. It turns out I was using Safari, which leads to the experience I mentioned earlier. In Chrome, which you guys recommend, everything is working just as you mentioned. Sorry for the trouble.


#119

Thanks for the report @waldek! I’ll look into that. Never ceases to amaze how many small oddities in behaviour there are between browsers


#120

There’s a bit of a bug here, the front-end rendering isn’t currently outputting supplied alt text but that will be fixed in tomorrow’s release.

Is this fix available on ghost.org already? I’m using the MD syntax, but alt isn’t rendered in the front-end. Am I missing something?


#121

any idea when the beta ends?


#122

From what I understand, it will be shipped as the default editor when ghost 2.0 releases. Ghost 2.0 will be released “when it’s ready”