New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Full Koenig Editor #9311

Closed
ErisDS opened this Issue Dec 8, 2017 · 5 comments

Comments

Projects
None yet
3 participants
@ErisDS
Member

ErisDS commented Dec 8, 2017

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.

🏃 = "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.

@ErisDS ErisDS added the feature label Dec 8, 2017

@kevinansfield kevinansfield added the epic label Jan 30, 2018

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

Koenig reboot - rich text (#952)
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

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

Koenig - Added SHIFT+ENTER line break key command
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

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

Koenig - Initial card support
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

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

Koenig - HR card with markdown text expansion
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/Ghost-Admin that referenced this issue Jan 30, 2018

Koenig - Display-only image card with markdown text expansion
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

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

Koenig - Fixed jump-to-top bug when focusing editor
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

kevinansfield added a commit to TryGhost/Ghost-Admin that referenced this issue Jan 31, 2018

Koenig - Textarea-only markdown card
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

This comment has been minimized.

Show comment
Hide comment
@kevinansfield

kevinansfield Jan 31, 2018

Contributor

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.

Contributor

kevinansfield commented Jan 31, 2018

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.

kevinansfield added a commit to TryGhost/Ghost-Admin that referenced this issue Jan 31, 2018

Koenig - (+) card/list selection menu
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`

kevinansfield added a commit to TryGhost/Ghost-Admin that referenced this issue Jan 31, 2018

Koenig - Use {{inline-svg}} helper in {{koenig-plus-menu}}
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}}`

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

Koenig - Move to generic card names
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
refs #9311
- match card names to the new generic Koenig card names introduced in TryGhost/Ghost-Admin@95a0686

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

Koenig - Re-position toolbar and plus menu on window resize
refs TryGhost/Ghost#9311
- extract positioning routines into methods
- throttle positioning method calls on window resizes

kevinansfield added a commit to TryGhost/Ghost-Admin that referenced this issue Feb 2, 2018

Koenig - Show (+) button on blank paragraph mouseover
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

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

Koenig - Slash menu
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 added a commit to TryGhost/Ghost-Admin that referenced this issue Feb 3, 2018

Koenig - HTML card template
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

kevinansfield added a commit to TryGhost/Ghost-Admin that referenced this issue Feb 4, 2018

Koenig - Card selection and deletion
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

kevinansfield added a commit to TryGhost/Ghost-Admin that referenced this issue Feb 13, 2018

Koenig - Generic `{{koenig-card}}` container card component
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

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

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

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

Koenig - Fix cards being deselected when clicking in edit mode
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

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

Koenig - Close (+) menu when pressing Escape
refs TryGhost/Ghost#9311
- close menu and reset the caret position in the editor when <kbd>Esacape</kbd> is pressed whilst the (+) menu is open

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

Koenig - Hide unused elements in (+) menu
refs TryGhost/Ghost#9311
- we don't and will unlikely ever have a "Text" card
- commented out the search input and "Primary" header, it won't be used until we have many more cards

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

Koenig - Allow blank paragraphs to be deleted with Delete
refs TryGhost/Ghost#9311
- adjust our <kbd>Delete</kbd> card deletion logic to not fire if we're on a blank paragraph
- allows blank paragraphs between cards to be deleted, feels more natural

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

Koenig - Wrap HR card in {{koenig-card}} component
refs TryGhost/Ghost#9311
- makes the HR card behave like the other cards wrt hover and selection visibility

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

Koenig - Fix error when inserting cards in certain circumstances
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

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

Koenig - Fix image creation via (+) menu
refs TryGhost/Ghost#9311
- image icon was missing the appropriate action

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

Koenig - Create blank paragraph when pressing Enter in title input
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

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

Koenig - Fixed backspace not deleting empty para at beginning of doc
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

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

Koenig - Fixed formatting being lost when deleting cards
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

kevinansfield added a commit that referenced this issue Mar 14, 2018

Koenig - Output captions for image and embed cards
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

This was referenced Mar 15, 2018

kevinansfield added a commit to TryGhost/Casper that referenced this issue May 22, 2018

Applying styles for Koenig content
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

peterzimon added a commit to TryGhost/Casper that referenced this issue May 22, 2018

Applying styles for Koenig content
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 added a commit to TryGhost/Casper that referenced this issue May 22, 2018

Applying styles for Koenig content (#455)
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

This comment has been minimized.

Show comment
Hide comment
@kevinansfield

kevinansfield May 23, 2018

Contributor

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

Contributor

kevinansfield commented May 23, 2018

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

@kevinansfield kevinansfield referenced this issue Jul 9, 2018

Closed

Koenig: Final Ghost 2.0 Version #9724

26 of 27 tasks complete
@kevinansfield

This comment has been minimized.

Show comment
Hide comment
@kevinansfield

kevinansfield Jul 9, 2018

Contributor

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.

Contributor

kevinansfield commented Jul 9, 2018

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

This comment has been minimized.

Show comment
Hide comment
@kevinansfield

kevinansfield Aug 17, 2018

Contributor

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 😄

Contributor

kevinansfield commented Aug 17, 2018

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

This comment has been minimized.

Show comment
Hide comment
@zce

zce Sep 6, 2018

Contributor

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

Contributor

zce commented Sep 6, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment