✨ Koenig Editor - Beta Release

Korean type problem!
test

It’s not implemented yet but is tracked in the current dev cycle issue here: Koenig: Final Ghost 2.0 Version · Issue #9724 · TryGhost/Ghost · GitHub

This sounds like a known issue in the underlying editor library with how it handles mutation events compared to keypress events. The library maintainers are looking into it but it’s not currently on our high-priority list for the initial Koenig release.

Just a quick question (apologies if it might have been addressed somehwere, just rushing out atm): will the new editor support text alignment outside of html? (i.e. in the standard text editor) Thanks!

Definitely not in the initial version. There may be some support added later but there are no concrete plans for it right now.

For it to be possible there needs to be an update to the underlying mobiledoc format, there is some on-going discussion around decoupling the mobiledoc format from strict HTML adherence with regard to section attributes which would open up more style-related functionality like text alignment.

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
1 Like

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 ;-)

1 Like

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

Version 1.25.2

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.

2 Likes

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.

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

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

1 Like

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. :)

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

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.

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.

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?

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.

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.

1 Like

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?

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.