Skip to content
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 · 7 comments
Closed

Feature: Full Koenig Editor #9311

ErisDS opened this issue Dec 8, 2017 · 7 comments
Assignees
Labels

Comments

@ErisDS
Copy link
Member

@ErisDS 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
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
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
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
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
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
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
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
Copy link
Contributor

@kevinansfield 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
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
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
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
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
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
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
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
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
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
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
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
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 Feb 15, 2018
…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
kevinansfield added a commit to TryGhost/Ghost-Admin that referenced this issue Feb 15, 2018
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
kevinansfield added a commit to kevinansfield/Ghost-Admin that referenced this issue Feb 15, 2018
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
kevinansfield added a commit to TryGhost/Ghost-Admin that referenced this issue Feb 20, 2018
… 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
kevinansfield added a commit to TryGhost/Ghost-Admin that referenced this issue Mar 14, 2018
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
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
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
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
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
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
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
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
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
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
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
Copy link
Contributor

@kevinansfield 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 mentioned this issue Jul 9, 2018
26 of 27 tasks complete
@kevinansfield
Copy link
Contributor

@kevinansfield 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
Copy link
Contributor

@kevinansfield 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
Copy link
Contributor

@zce zce commented Sep 6, 2018

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

@gustawdaniel
Copy link

@gustawdaniel gustawdaniel commented Jan 19, 2019

@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
Copy link

@gustawdaniel gustawdaniel commented Jan 21, 2019

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.

kevinansfield added a commit to kevinansfield/Koenig that referenced this issue Mar 20, 2020
refs TryGhost/Ghost#9311
- match card names to the new generic Koenig card names introduced in TryGhost/Ghost-Admin@95a0686
kevinansfield added a commit to kevinansfield/Koenig that referenced this issue Mar 20, 2020
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.