Feature: Full Koenig Editor #9311

ErisDS · 2017-12-08T19:47:32Z

As described in https://blog.ghost.org/1-0/#aneweditor, the current editor in Ghost 1.0 is a limited view of the full editor functionality we're in the process of building. We highly recommend reading that blog post to understand the Koenig editor project.

What we have currently, is purely the markdown card, which uses SimpleMDE (built on CodeMirror) to provide syntax highlighting and a nice experience writing markdown.

There are a few downsides to this setup - the biggest being that the spellcheck isn't great and is limited to English.

We're still working away on this feature. This issue serves mostly as a placeholder to track the overall progress. The first thing we will be doing is making the editor available behind a flag so that developing it becomes easier.

The beta is now available in Labs! - Please read the beta announcement for details on all the features. Test it out, and reply there on the forum if you run into any issues 😄

Koenig development cycle

We are working in 6-week sprints with 2-week gaps between them, during each sprint we are aiming to improve Koenig's features and writing experience to a point where we can bump the version and increase it's availability to Ghost blog owners.

Alpha - Available behind a dev+labs flag
Beta - Available behind a labs flag, not recommended for production (read the beta announcement)
RC (release candidate) - Available behind a labs flag
Final - Default editor in Ghost 2.0

🏃 = "in progress"

How to help test the Koenig Beta version

First, please read the beta announcement

Ensure your you're on the most recent release (1.23.0 is the first version with Koenig on the labs screen) or your local development version is up to date (grunt master will help there).

Load the "Labs" screen in your blog admin and you will see a Koenig Editor checkbox to enable/disable the Koenig editor. Enable it and any post you start or edit will be using Koenig, disable it and you're back to the markdown editor.

⚠️ Posts that have been edited with Koenig will only be editable with Koenig, even if you disable Koenig via labs. The only exception to this is posts that contain a single markdown card and no rich-text, they will open in the default Ghost 1.x editor when the labs flag is disabled.

The text was updated successfully, but these errors were encountered:

refs TryGhost/Ghost#9311 Koenig is being fully rebooted, first port of call is to focus on getting the rich-text only aspect of mobiledoc-kit working with our popup toolbar. - renames old koenig implementation (used for reference, will eventually be deleted) - new `{{koenig-editor}}` mobiledoc-kit component implementation based on ember-mobiledoc-editor - markdown text expansions - new `{{gh-koenig-edtor}}` that wraps our title+editor and handles keyboard navigation between the two - clicks below content will focus the editor - new `{{koenig-toolbar}}` component for the popup formatting toolbar with improved behaviour and simplified code

refs TryGhost/Ghost#9311 - pressing <kbd>Shift+Enter</kbd> will create a `soft-return` atom that adds a `<br>` element to the doc - emulates many rich-text editors that have a similar functionality where it's desirable to add line breaks rather than starting new paragraphs

refs TryGhost/Ghost#9311 - use a similar approach as used in `ember-mobiledoc-editor` to render a div into the editor canvas then use Ember's `{{-in-element}}` helper as a wormhole to render an ember component card into the new div - adds a `createComponentCard` util for setting up the necessary rendering boilerplate for Ember component cards

refs TryGhost/Ghost#9311 - adds the `koenig-card-hr` card that renders a `<hr>` element - adds text expansion to convert `---` into the new HR card

refs TryGhost/Ghost#9311 - adds the `koenig-card-image` card that renders an `<img>` element - adds text expansion to convert markdown images into the new image card

refs TryGhost/Ghost#9311 - the editor was being focused and the cursor placed properly but the act of focusing also reset the scroll position - pulled the `.gh-koenig-editor` class into the component rather than leaving it in the template so that the component has access to `this.element` - ensure the `.gh-koenig-editor` container is scrolled all the way to the bottom after focusing the editor

refs TryGhost/Ghost#9311 - add `{{koenig-card-markdown}}` component that renders an auto expanding textarea with the markdown card value - add `{{card-markdown}}` that is an alias of `{{koenig-card-markdown}}` for backwards compatibility - all of our pre-1.0 alpha cards and our current markdown implementation do not have the `koenig-` prefix in their card names

kevinansfield · 2018-01-31T08:38:25Z

We have an inconsistency with card names, in the reboot I've named the cards with koenig- prefix so that the component names were more easily identifiable as editor related (koenig-card-markdown, koenig-card-image, etc). However the pre-1.0 alpha and our current markdown card do not have a koenig- prefix in the card names (card-markdown, card-image, etc).

I've "aliased" card-markdown to koenig-card-markdown for now but I think it could still do with some more thought around how we want to name cards.

I'm wondering if it will be easier to use basic card names for the built-in cards (markdown, image, etc) so that they can be more easily overridden by user-supplied custom cards later on. We could extend our createComponentCard utility to accept the card name as well as the component name so that we avoid the tight ties between card names and components that has led us into the current naming problems.

refs TryGhost/Ghost#9311 - re-implement the (+) card/list selection menu from the old Koenig alpha with improved positioning and event handling - buttons work for the currently available cards - `<hr>` and `markdown`

refs TryGhost/Ghost#9311 - use the `{{inline-svg}}` helper instead of having SVGs inlined manually in the component template - rename the koenig icons directory - add the koenig icons directory to the list of locations used by `{{inline-svg}}`

refs TryGhost/Ghost#9311 - use `hr`, `image`, and `markdown` as card names instead of codifying the `koenig-card-` prefix into the mobiledoc

refs #9311 - match card names to the new generic Koenig card names introduced in TryGhost/Admin@95a0686

refs TryGhost/Ghost#9311 - extract positioning routines into methods - throttle positioning method calls on window resizes

refs TryGhost/Ghost#9311 - add a mousemove event handler that shows the (+) next to blank paragraphs when the pointer is over them - fix sticky button when adding a card mid-document by hiding it, we get another `didReceiveAttrs` call with the new range when adding a blank paragraph so it's still shown in that situation - fix the incorrect button position when adding a card at the bottom of the doc by re-positioning in the next runloop. Problem seems to stem from the component card being rendered after we get the new range so our position calculations are out of sync

refs TryGhost/Ghost#9311 - adds `{{koenig-slash-menu}}` component that renders a quick-access card/block menu when typing `/` at the beginning of a new paragraph

refs TryGhost/Ghost#9311 - add a basic HTML card that renders a CodeMirror editor - adjust styles so that CodeMirror styles for the markdown editor don't affect CodeMirror instances inside Koenig

refs TryGhost/Ghost#9311 - cursor based card selection - handling of delete/backspace when cards are involved - add `cursorDidExitAtTop` closure action to `{{koenig-editor}}` to consolidate editor cursor behaviour in the editor - added extra behaviour for LEFT in editor and RIGHT in title to switch focus between title and editor - fixed incorrect icon in the slash menu

refs TryGhost/Ghost#9311 - initial CSS for container card outline, selection state, toolbar, etc - adds `{{#koenig-card}}` component to be used inside of component card templates to handle the default card container HTML, mouse interactions, etc - update `{{koenig-card-markdown}}` to use the new `{{koenig-card}}` component - add render/edit mode views - focus the textarea when entering edit mode - updated `{{koenig-editor}}` - add <kbd>Cmd+Enter</kbd> command to put a selected card into edit mode - when inserting new cards put them into edit mode immediately - move edit/select methods out of actions and into normal methods so that timing is easier to reason about - skip `cursorDidChange` process when cursor changes as a result of a card selection, fixes issues with `selectCard` being triggered multiple times unexpectedly

refs TryGhost/Ghost#9311 - old code is no longer needed for reference so cleaning up

refs TryGhost/Ghost#9311 - there was an issue where clicking inside a card whilst it was in edit mode would cause the cursor position in the editor to change from the end of a card to the beginning which would re-run our card selection routine and de-selecting the card - add a guard to the `cursorDidChange` method that looks for an end-to-beginning move whilst a card is in edit mode and ignores it

…iner refs TryGhost/Ghost#9311 - wraps embed card in same container as the markdown card to handle mouse selection/edit toggles etc - add render mode to embed card - autofocus CodeMirror editor when switching to edit mode - fix incorrect pointer on cards

refs TryGhost/Ghost#9311 - adjust our backspace card deletion logic to not fire if we're on a blank paragraph - allows blank paragraphs to be deleted, feels more natural

refs TryGhost/Ghost#9311 - adds an overlay element to the embed card so that clicks do not interact with any embedded iframes so that you can lazy click to enter edit mode

… mode refs TryGhost/Ghost#9311 - we added a guard for the caret moving from end to beginning of a card when clicking on a card whilst in edit mode in 453636d but it's also possible for clicks to cause the caret to move in the opposite direction - update the guard in `cursorDidChange` to ignore the caret moving in either direction whilst a card is in edit mode

refs TryGhost/Ghost#9311 - makes the HR card behave like the other cards wrt hover and selection visibility

refs TryGhost/Ghost#9311 - the card selection in `cursorDidChange` would sometimes fail because the selection would be attempted before the newly inserted card had been pushed on to the `componentCards` array. This was reliably triggered by adding a card to a blank header section via the /-menu - scheduling the section `afterRender` ensures that the `willRender` hook has fired and populated the `componentCards` array before the selection occurs

refs TryGhost/Ghost#9311 - image icon was missing the appropriate action

refs TryGhost/Ghost#9311 - adds a solution to the problem of not being able to add text above a card if that card is the first section in the mobiledoc

refs TryGhost/Ghost#9311 - something that became apparent after adding the "<kbd>Enter</kbd> in post title adds blank paragraph" feature was that using that feature left you in a position where Backspace doesn't do what you expect - it does nothing rather than deleting the blank paragraph - added logic to the `handleBackspaceKey` handler in `{{koenig-editor}}` to detect when backspace is pressed on a blank paragraph at the start of the doc so that we remove it then focus the title

refs TryGhost/Ghost#9311 - when using <kbd>Backspace</kbd> to delete a card the formatting (eg, heading format) on the following section would be lost - switched to using `editor.removeSection` and a cursor change to avoid the range style deletion stripping the formatting

refs #9311 - very basic implementation, still needs proper classes and default stylesheet implementation - change image card output to a `<figure>` with optional `<figcaption>` - add optional `<p>` caption output to the html card

refs TryGhost/Ghost#9311 - move `.kg-card-markdown` styles and add deprecation notice - add support for new `.kg-post` wrapper - add support for `.kg-image` and `.kg-image-wide/full` image variants - add support for image captions

kevinansfield · 2018-05-23T08:28:31Z

Koenig is now available in beta behind a Labs flag in Ghost 1.23.0. Please read the beta announcement for full details 😄

kevinansfield · 2018-07-09T08:49:30Z

Koenig is now in the final stretch before becoming Ghost 2.0's editor.

Please read the beta announcement, try using it as your primary editor, and post all feedback on the forum topic so that we can catch any remaining issues before this thing ships! 🤗

Note on browser support - due to time constraints we've had to limit the browser support for the initial Koenig release:

Microsoft Edge will not be supported
Mobile editing will not be supported

Both of the above may work in limited capacities but will have known and unknown issues. Mobile editing will be more of a focus post-release, it requires further design work to deliver a good small-screen experience.

kevinansfield · 2018-08-17T11:17:21Z

Koenig is now out of beta and has replaced the old markdown editor in Ghost 2.0. Any bugs or features from this point will be tracked in separate issues.

Thanks for all the feedback during the beta period 😄

zce · 2018-09-06T06:03:16Z

@kevinansfield How to set code card language in Ghost Editor? 😄

gustawdaniel · 2019-01-19T20:19:16Z

@kevinansfield In prism plugins properties can be defined by data attribute in pre tag, but a language is defined by class language-xxxx

https://prismjs.com/#languages-list

I now using html card no pre, but ealier In jekyll I used to applying syntax

```lang
code
code
code
\```  <-  without this "\"

It would be nice if both data attributes and classes will be albe to define after typing "```" in koenig editor.
Also nice feature would be simpler integration with mathjs

Especially because of

https://help.ghost.org/article/89-mathjax

does not works and redirects to

https://docs.ghost.org/integrations/

gustawdaniel · 2019-01-21T22:48:33Z

Update. Syntax

```lang
code
code
code
\```  <-  without this "\"

works with the prism in markdown card. But if you are not inside of markdown card typing

```

you create new not configurable card called code, but without proper highlight configuration, it is useless.

refs TryGhost/Ghost#9311 - match card names to the new generic Koenig card names introduced in TryGhost/Admin@95a0686

refs TryGhost/Ghost#9311 - very basic implementation, still needs proper classes and default stylesheet implementation - change image card output to a `<figure>` with optional `<figcaption>` - add optional `<p>` caption output to the html card

ErisDS added the feature [triage] New features we're planning or working on label Dec 8, 2017

kevinansfield mentioned this issue Jan 15, 2018

Unable to type story body using Gboard autocomplete / swiping on iOS #9398

Closed

This was referenced Jan 27, 2018

Koenig reboot - rich text TryGhost/Admin#952

Merged

Disable spell-check by default #8566

Closed

kevinansfield added the epic label Jan 30, 2018

kevinansfield added a commit to TryGhost/Admin that referenced this issue Jan 30, 2018

Koenig - HR card with markdown text expansion

2093b34

refs TryGhost/Ghost#9311 - adds the `koenig-card-hr` card that renders a `<hr>` element - adds text expansion to convert `---` into the new HR card

kevinansfield added a commit to TryGhost/Admin that referenced this issue Feb 1, 2018

Koenig - Move to generic card names

95a0686

refs TryGhost/Ghost#9311 - use `hr`, `image`, and `markdown` as card names instead of codifying the `koenig-card-` prefix into the mobiledoc

kevinansfield added a commit that referenced this issue Feb 1, 2018

Koenig - Rename server-side cards

0833b28

refs #9311 - match card names to the new generic Koenig card names introduced in TryGhost/Admin@95a0686

kevinansfield added a commit to TryGhost/Admin that referenced this issue Feb 1, 2018

Koenig - Re-position toolbar and plus menu on window resize

60a1a78

refs TryGhost/Ghost#9311 - extract positioning routines into methods - throttle positioning method calls on window resizes

kevinansfield added a commit to TryGhost/Admin that referenced this issue Feb 3, 2018

Koenig - Slash menu

2d95392

refs TryGhost/Ghost#9311 - adds `{{koenig-slash-menu}}` component that renders a quick-access card/block menu when typing `/` at the beginning of a new paragraph

kevinansfield mentioned this issue Feb 15, 2018

Inline HTML elements containing empty lines may be processed as Markdown #9451

Closed

kevinansfield added a commit to TryGhost/Admin that referenced this issue Feb 15, 2018

Koenig - Remove old Koenig alpha code

ae79640

refs TryGhost/Ghost#9311 - old code is no longer needed for reference so cleaning up

kevinansfield added a commit to TryGhost/Admin that referenced this issue Mar 14, 2018

Koenig - Wrap HR card in {{koenig-card}} component

55a99cb

refs TryGhost/Ghost#9311 - makes the HR card behave like the other cards wrt hover and selection visibility

kevinansfield added a commit to TryGhost/Admin that referenced this issue Mar 14, 2018

Koenig - Fix image creation via (+) menu

5f8ca5c

refs TryGhost/Ghost#9311 - image icon was missing the appropriate action

This was referenced Mar 15, 2018

Koenig: Alpha version #9504

Closed

Koenig: Beta version #9505

Closed

kevinansfield added the affects:editor Work relating to the Koenig Editor label Mar 28, 2018

This was referenced Apr 9, 2018

Feature: Paste image from clipboard in editor #4753

Closed

Markdown for url without hyperlink #9566

Closed

This was referenced May 9, 2018

ALT-C, ALT-L, ALT-E problems #9618

Closed

Koenig: Release Candidate version #9623

Closed

л typed in editor shows ц instead #9630

Closed

peterzimon mentioned this issue May 22, 2018

✨ Add styles for Koenig Beta support TryGhost/Casper#455

Merged

kevinansfield mentioned this issue Jul 9, 2018

Koenig: Final Ghost 2.0 Version #9724

Closed

27 tasks

kevinansfield closed this as completed Aug 17, 2018

kevinansfield added a commit to kevinansfield/Koenig that referenced this issue Mar 20, 2020

Koenig - Rename server-side cards

bed8cd4

refs TryGhost/Ghost#9311 - match card names to the new generic Koenig card names introduced in TryGhost/Admin@95a0686

andybraren mentioned this issue Dec 10, 2022

Choose a better frontend editor thinkerbit/acorn#52

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: Full Koenig Editor #9311

Feature: Full Koenig Editor #9311

ErisDS commented Dec 8, 2017 •

edited by kevinansfield

Loading

kevinansfield commented Jan 31, 2018

kevinansfield commented May 23, 2018

kevinansfield commented Jul 9, 2018

kevinansfield commented Aug 17, 2018

zce commented Sep 6, 2018 •

edited

Loading

gustawdaniel commented Jan 19, 2019

gustawdaniel commented Jan 21, 2019 •

edited

Loading

Feature: Full Koenig Editor #9311

Feature: Full Koenig Editor #9311

Comments

ErisDS commented Dec 8, 2017 • edited by kevinansfield Loading

Koenig development cycle

How to help test the Koenig Beta version

kevinansfield commented Jan 31, 2018

kevinansfield commented May 23, 2018

kevinansfield commented Jul 9, 2018

kevinansfield commented Aug 17, 2018

zce commented Sep 6, 2018 • edited Loading

gustawdaniel commented Jan 19, 2019

gustawdaniel commented Jan 21, 2019 • edited Loading

ErisDS commented Dec 8, 2017 •

edited by kevinansfield

Loading

zce commented Sep 6, 2018 •

edited

Loading

gustawdaniel commented Jan 21, 2019 •

edited

Loading