✨ Koenig Editor - Beta Release

News
91

Found a couple things!

  • Slash menu doesn’t work when navigating to new story - I checked both RC and final issue takslists, but didn’t see this

    1. Create a new story. I created an empty markdown card, but I don’t think the bug is related to content
    2. Create another new story. Attempt to create a new card using the slash menu, it doesn’t work.
    3. Refresh the page. Attempt to create a new card - it works

  • Something I find myself doing a lot (and this is probably because of tab-completion in code editors) is trying to use the tab key to select a card - i.e. /md{tab} - adding support for this would be pretty cool :fire:

OS: Win10
Browsers: Chrome 68.0.3440.42 (I know it’s dev; tested in other browsers :slight_smile:), Opera 54.0.2952.51 and Firefox 61.01
Errors: None
Ghost Version: 1.24.8

1 Like
92

Drag and drop for images to HTML card doesn’t work. This would be really helpful for making things such as a image gallery.

93

@Reedyn that’s not expected to work at the moment, the HTML card is only a basic code editor right now.

We’ll be looking at expanding the default card behaviour in the future to provide a more substantial and easy to use API for card extension authors. I imagine drag-n-drop upload behaviour will be added as a standard feature which all cards can opt in to, once the first iteration of that is in place we can circle back and use that functionality in the HTML card.

94

@Kevin Okay, good to know. Keep the great work up!

95

Regarding the image card. How come there is no option for entering an image URL? To me it seems that option should be fairly simple to add and it is an option that used to be available across the board (It also disappeared from the Post Settings for cover image)

96

@Reedyn for now you can insert images using a URL with markdown expansions. ![](http://somesite.com/image.jpg) will create an image card that is linked directly to the URL.

We have plans for an extensible image selection system, likely including Local File, Unsplash, and URL to start but having the ability to add custom file stores that we can re-use across the admin. Unfortunately it’s unlikely to make it into the first version of Koenig due to time constraints but it is definitely on our radar.

One of the big questions still outstanding is how such a system would tie in with a thumbnailing/resizing service so that we don’t end up with inconsistent behaviour depending on where an image is sourced from.

97

For me the word counter is very important, with the new editor, I do not see it :disappointed_relieved:

98

Korean type problem!
test

99

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.

100

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!

101

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.

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

1 Like
104

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

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.

2 Likes
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.

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

110

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