Koenig: Final Ghost 2.0 Version #9724

kevinansfield · 2018-07-09T08:35:29Z

This issue captures the tasks that we'll be working on for the fourth 6-week Koenig sprint. All work will take place on master and will be available in the weekly releases behind a labs flag for anyone wanting to help test. The plan is to replace Ghost's current editor with Koenig at the end of the cycle.

part of #9311 (Feature: Full Koenig editor)

I want to help test! How do I get started?

See the instructions here.

🏃 in-progress
🚢 ready for next release (typically every Tuesday)

Release blockers

✨ supported sources popup / help page for embed card
✨ unsupported browser / mobile editing communication
- basic implementation in TryGhost/Admin@b2a9e4c

Released:

Stretch goals

✨ hide sidebar on editor screen
✨ support /image https://example.com/image.jpeg slash menu shortcut
✨ create an embed card when pasting a URL in a blank section if it matches a known provider
✨ rich-text captions
✨ 🚢 Unsplash image selection for image card
✨ 🚢 general docs and help popup / link
✨ create an embed card based on opengraph data if there's no direct oembed provider
✨ warn if leaving whilst an upload is in progress
🐛 emoji's do not play nicely with the cursor. With 🤷🏻‍♂️ for example you need to press Left 6 times to move the cursor from one side to the other and Backspace will cycle through various forms of the emoji until it's finally deleted and doesn't always play nicely with the undo stack
- Dropbox Paper converts all emoji's into an "atom" type element
- Medium has similar struggles except it also doesn't render correctly
- mobiledoc-kit issue

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

refs TryGhost#9724 - adjust the "base url" regex in the oembed endpoint to strip schemaless scheme `//` as well as `https?://`

refs #9724 - adjust the "base url" regex in the oembed endpoint to strip schemaless scheme `//` as well as `https?://`

refs TryGhost/Ghost#9724 - add `ember-useragent` package so that we can check the user agent screen for known-incompatible browsers/devices - show alerts for Edge, mobile browsers, and IE11 when accessing the editor with Koenig enabled

refs TryGhost/Ghost#9724 - if the editor was reloaded by changing the post model either through clicking "New story" or using the search from the editor screen the /-menu would stop working - keep track of the last seen `editor` instance inside `{{koenig-slash-menu}}` and register the `/` text input handler on the new editor instance if it changes

refs TryGhost/Ghost#9724 - update Spirit so that we're not using `display: flex` on the `contenteditable` element

refs TryGhost/Ghost#9724 - `{{koenig-menu-content}}` does not pass any params through when an item is clicked - move the `params` fetching via the query string from `_performAction()` to `actions.itemClicked` so that it works for both <kbd>Enter</kbd> and icon clicks

refs TryGhost/Ghost#9724 - `element.contains(target)` was not reliably picking up the `<span>` inside the `<button>` element - added a fallback that searches the event path for the card component's ID

refs TryGhost/Ghost#9724 - the click event from clicking on the /-menu items continued propagating after the card was initialised which meant it was picked up by the card as a "click off the card" so certain cards such as the Markdown/HTML cards would then remove themselves as if they were deselected with empty content - changed the icon click handler to use the DOM `onclick` syntax so that the click can be captured immediately rather than waiting for it to bubble up to Ember's global event handler - updated the /-menu `itemClicked` action to use the now-accessible MouseEvent to stop it propagating any further and triggering unwanted card behaviour

…click behaviour refs TryGhost/Ghost#9724 - bump to custom build of mobiledoc-kit that includes unreleased fixes - cmd+backspace stopping on special chars: bustle/mobiledoc-kit#632 - Firefox triple-click then typing not replacing content: bustle/mobiledoc-kit#593

refs TryGhost/Ghost#9724 - bump `ghost-spirit` - has position fix for placeholder now that we're not using flexbox

refs TryGhost/Ghost#9724 - e16a300 introduced a bug because it expected an event param that is only available when clicking - add guard to check for `event` presence before attempting to stop propagation

…nput refs TryGhost/Ghost#9724 - `autofocus="true"` in Safari was overriding the custom focus method which keeps the scroll position locked

…lbar buttons refs TryGhost/Ghost#9724 - add an overlay to the markdown card for 500ms when entering edit mode to stop extra clicks accidentally triggering toolbar buttons

…ame paragraph refs TryGhost/Ghost#9724 - ignore the range change which would otherwise close the menu when clicking a (+) next to a different paragraph then the one the cursor is currently on

refs TryGhost/Ghost#9724 - <kbd>Ctrl/Cmd+Enter</kbd> is the shortcut to enter edit mode of a card that has it - adds <kbd>Ctrl/Cmd+Enter</kbd> as a shortcut to exit edit mode as an addition to <kbd>Escape</kbd> for easier toggling in/out of edit mode

refs TryGhost/Ghost#9724 - <kbd>Ctrl+Alt+1</kbd> - Togggle heading level 1 - <kbd>Ctrl+Alt+2</kbd> - Togggle heading level 2 - <kbd>Ctrl+Alt+3</kbd> - Togggle heading level 3 - <kbd>Ctrl+Alt+4</kbd> - Togggle heading level 4 - <kbd>Ctrl+Alt+5</kbd> - Togggle heading level 5 - <kbd>Ctrl+Alt+6</kbd> - Togggle heading level 6 - <kbd>Ctrl/Cmd+H</kbd> - Cycle through heading levels 2-6 - <kbd>Ctrl+Q</kbd> - Toggle blockquote - <kbd>Ctrl+L</kbd> - Toggle unordered list - <kbd>Ctrl/Cmd+K</kbd> - Toggle link - <kbd>Ctrl/Cmd+B</kbd> - Toggle bold - <kbd>Ctrl/Cmd+I</kbd> - Toggle italic - <kbd>Ctrl/Cmd+U</kbd> - Toggle underline - <kbd>Ctrl+Alt+U</kbd> - Toggle strikethrough - <kbd>Ctrl/Cmd+Shift+K</kbd> - Toggle code

refs TryGhost/Ghost#9724 - add `registerComponent` hook to cards so that `{{koenig-editor}}` can fetch properties from card components directly - add word count and reading time utilities - add throttled word count update routine to `{{koenig-editor}}` that walks all sections and counts text words or fetches word/image counts from card components - add `wordCountDidChange` hook to `{{koenig-editor}}` so that word count + reading time can be exposed - modify editor controller to update it's own word count property when koenig triggers it's action - modified the editor template to show reading time + word count next to the post status

refs TryGhost/Ghost#9724 - display word count/reading time in the top-left when the opaque top bar is present otherwise use the bottom-right

refs TryGhost/Ghost#9724 - Firefox has a bug that prevents the cursor from moving from one element to another when pressing <kbd>Up</kbd> in certain circumstances - added workaround that replicates the default behaviour that all other browsers have so that <kbd>Up</kbd> can always move to the previous section

refs TryGhost/Ghost#9724 - removed reading time from word count display, it will be added back later as part of a more comprehensive stats interface - added background to the bottom right word count so it's still visible when above a full-width image

refs TryGhost/Ghost#9724 - just an extra text

refs TryGhost/Ghost#9724 - four...

refs TryGhost/Ghost#9724 - word count is displayed in the bottom right of the screen regardless of screen size - for smaller screen sizes the word count display is adjusted - minor visual tweaks and refinements

refs TryGhost/Ghost#9724 - bump `ghost-spirit` version to pull in styling fix

refs #9742, refs #9724 - handle König Editor format for 2.0 - adapted importer to be able to import 1.0 and 2.0 exports - added migration scripts - remove labs flag for Koenig - migrate all old editor posts to new editor format - ensure we protect the code against mobiledoc or html field being null - ensure we create a blank mobiledoc structure if mobiledoc field is null (model layer) - ensure you can fully rollback 2.0 to 1.0 - keep mobiledoc/markdown version 1 logic to be able to rollback (deprecated code)

refs TryGhost/Ghost#9724 - standardised `{{gh-unsplash}}` actions and action arguments to better represent a generic "image source" - added `{{gh-unsplash searchTerm="ghosts"}}` parameter - added `payload` param to `card` definitions used for plus/slash menus so that default payload params can be passed to cards - added a concept of "image selectors" to image card - if a `payload.imageSelector` param is received by the card it will look it up in it's list of known selectors and display the appropriate image selection component - if the card was created with an image selector param and the image selector is closed without selecting an image then the card will be removed - delete image cards during cleanup if they were created via selector but have no src

refs TryGhost/Ghost#9724 - we call `koenig.cleanup` when setting a post in the editor controller but the call will happen before `componentCards` has been populated so none of our "delete if empty" routines were being run - calls to `.cleanup` now schedule the cleanup after the next editor render which should mean cards are populated before we try to remove them

refs #9742, refs #9724 - handle König Editor format for 2.0 - adapted importer to be able to import 1.0 and 2.0 exports - added migration scripts - remove labs flag for Koenig - migrate all old editor posts to new editor format - ensure we protect the code against mobiledoc or html field being null - ensure we create a blank mobiledoc structure if mobiledoc field is null (model layer) - ensure you can fully rollback 2.0 to 1.0 - keep mobiledoc/markdown version 1 logic to be able to rollback (deprecated code)

refs TryGhost/Ghost#9724 - mobiledoc-kit's `key.isPrintable()` returns true for <kbd>Enter</kbd> but in this instance we don't want to capture newlines as printable chars - swapped insertion of `event.key` for `key.toString()` for better handling of named keys that output characters (eg. when `event.key` === `Enter` which prints `\n`)

…mage refs TryGhost/Ghost#9724 - focus was not being returned to the editor after the Unsplash modal was closed so although the image card looked selected the editor was not responding to any key commands

refs TryGhost#9724 - perform a HEAD request on a url if we don't find a matching provider, following any redirects until we hit success response before looking up providers for the resulting url

refs #9724 - perform a HEAD request on a url if we don't find a matching provider, following any redirects until we hit success response before looking up providers for the resulting url

refs #9742, refs #9724 - handle König Editor format for 2.0 - adapted importer to be able to import 1.0 and 2.0 exports - added migration scripts - remove labs flag for Koenig - migrate all old editor posts to new editor format - ensure we protect the code against mobiledoc or html field being null - ensure we create a blank mobiledoc structure if mobiledoc field is null (model layer) - ensure you can fully rollback 2.0 to 1.0 - keep mobiledoc/markdown version 1 logic to be able to rollback (deprecated code)

refs #9724 - `<img>` elements can have both `alt ` and `title` attributes, ensure we render both of them

…r HTML refs TryGhost/Ghost#9724 - capture the `alt` and `title` attributes in our figure and image parser plugins

refs TryGhost/Ghost#9724 - `clean-basic-html` was being overzealous with it's empty element removal, often contenteditable (especially when pasting) will result in HTML such as `<span> </span>` which was being completely removed - if an empty element has any spaces in it, replace the element with a textNode containing a single space

refs TryGhost/Ghost#9724 - caption payload changed from `textContent` to a cleaned `innerHTML` in our `figureToImageCard` parser plugin

…puts refs TryGhost/Ghost#9724 - the "paste url on a selection to make it a link" feature from the main editor was missing in caption inputs - copied functionality across (shared functionality needs extracting at some point)

refs #9742, refs #9724 - handle König Editor format for 2.0 - adapted importer to be able to import 1.0 and 2.0 exports - added migration scripts - remove labs flag for Koenig - migrate all old editor posts to new editor format - ensure we protect the code against mobiledoc or html field being null - ensure we create a blank mobiledoc structure if mobiledoc field is null (model layer) - ensure you can fully rollback 2.0 to 1.0 - keep mobiledoc/markdown version 1 logic to be able to rollback (deprecated code)

refs TryGhost/Ghost#9724 - fixed Card menu plus icon's rounded edges - decreased link toolbar appearance delay - changing 'H'/'h' toolbar mapping to 'H2'/'H3' and harmonized title font size

refs #9742, refs #9724 - handle König Editor format for 2.0 - adapted importer to be able to import 1.0 and 2.0 exports - added migration scripts - remove labs flag for Koenig - migrate all old editor posts to new editor format - ensure we protect the code against mobiledoc or html field being null - ensure we create a blank mobiledoc structure if mobiledoc field is null (model layer) - ensure you can fully rollback 2.0 to 1.0 - keep mobiledoc/markdown version 1 logic to be able to rollback (deprecated code)

refs TryGhost/Ghost#9724 - `formatMarkdown` was previously changed to return a SafeString but that meant any direct usage of the helper had to account for not dealing with a basic String type - changed `formatMarkdown` to return a basic String - modified helper usage of `{{sanitize-html}}` to use triple-curlies

refs #9742, refs #9724 - handle König Editor format for 2.0 - adapted importer to be able to import 1.0 and 2.0 exports - added migration scripts - remove labs flag for Koenig - migrate all old editor posts to new editor format - ensure we protect the code against mobiledoc or html field being null - ensure we create a blank mobiledoc structure if mobiledoc field is null (model layer) - ensure you can fully rollback 2.0 to 1.0 - keep mobiledoc/markdown version 1 logic to be able to rollback (deprecated code)

kevinansfield · 2018-08-17T11:06:04Z

2.0 has been cut, any outstanding Koenig bugs or features will be opened as separate issues.

The embed card loading bug referenced in the comments above has been opened #9796

refs TryGhost/Ghost#9724 - removed 1px white border on embed card click overlay so that it doesn't cover borders used by certain embeds such as Instagram and Facebook posts

refs TryGhost/Ghost#9724 - render `alt` attribute if the image card payload has an `alt` property

refs TryGhost/Ghost#9724 - captions can have HTML so we need to render as HTML rather than as a text node so special chars don't get escaped

refs TryGhost/Ghost#9724 - `<img>` elements can have both `alt ` and `title` attributes, ensure we render both of them

kevinansfield assigned kevinansfield and peterzimon Jul 9, 2018

kevinansfield added a commit to kevinansfield/Ghost that referenced this issue Jul 9, 2018

🐛 Koenig - Support schema-less URLs in embed card

69efdba

refs TryGhost#9724 - adjust the "base url" regex in the oembed endpoint to strip schemaless scheme `//` as well as `https?://`

ErisDS mentioned this issue Jul 9, 2018

Feature: Full Koenig Editor #9311

Closed

4 tasks

kevinansfield mentioned this issue Jul 9, 2018

🐛 Koenig - Support schema-less URLs in embed card #9725

Merged

kevinansfield added a commit that referenced this issue Jul 9, 2018

🐛 Koenig - Support schema-less URLs in embed card (#9725)

865acec

refs #9724 - adjust the "base url" regex in the oembed endpoint to strip schemaless scheme `//` as well as `https?://`

kevinansfield added a commit to TryGhost/Admin that referenced this issue Jul 12, 2018

🐛 Koenig - Fixed up/down cursor movement in Firefox and Edge

70f8d37

refs TryGhost/Ghost#9724 - update Spirit so that we're not using `display: flex` on the `contenteditable` element

kevinansfield added a commit to TryGhost/Admin that referenced this issue Jul 18, 2018

Koenig - Fixed placeholder position

055a39a

refs TryGhost/Ghost#9724 - bump `ghost-spirit` - has position fix for placeholder now that we're not using flexbox

kirrg001 mentioned this issue Jul 19, 2018

2.0 is coming 🎡👻💥 #9742

Closed

kirrg001 mentioned this issue Jul 20, 2018

CLI support for Ghost 2.0 TryGhost/Ghost-CLI#759

Closed

kevinansfield added a commit to TryGhost/Admin that referenced this issue Jul 23, 2018

Koenig - Avoid word count overlap with content

5b7b47c

refs TryGhost/Ghost#9724 - display word count/reading time in the top-left when the opaque top bar is present otherwise use the bottom-right

peterzimon added a commit to peterzimon/playground that referenced this issue Jul 24, 2018

A third commit

aac6ff6

refs TryGhost/Ghost#9724 - just an extra text

peterzimon added a commit to peterzimon/playground that referenced this issue Jul 24, 2018

A fourth commit

b86901c

refs TryGhost/Ghost#9724 - four...

kevinansfield added a commit to TryGhost/Admin that referenced this issue Jul 24, 2018

Koenig - Fixed incorrect editor padding at mobile sizes

978b385

refs TryGhost/Ghost#9724 - bump `ghost-spirit` version to pull in styling fix

kevinansfield mentioned this issue Aug 11, 2018

🎨 Koenig - Added support for shortened URLs in embed card #9781

Merged

kevinansfield added a commit that referenced this issue Aug 13, 2018

Koenig - Render image title attribute if present

66fb095

refs #9724 - `<img>` elements can have both `alt ` and `title` attributes, ensure we render both of them

kevinansfield added a commit to TryGhost/Admin that referenced this issue Aug 13, 2018

🐛 Koenig - Fixed missing alt/title attributes when pasting markdown o…

46129ac

…r HTML refs TryGhost/Ghost#9724 - capture the `alt` and `title` attributes in our figure and image parser plugins

kirrg001 mentioned this issue Aug 15, 2018

Editor: Resolve more oembed URLs (e.g. Facebook posts) #9786

Closed

2 tasks

kevinansfield closed this as completed Aug 17, 2018

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

🐛 Koenig - Fixed missing alt text on images

02f5606

refs TryGhost/Ghost#9724 - render `alt` attribute if the image card payload has an `alt` property

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

Koenig - Added rich-text caption support

a86759c

refs TryGhost/Ghost#9724 - captions can have HTML so we need to render as HTML rather than as a text node so special chars don't get escaped

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

Koenig - Render image title attribute if present

3a80422

refs TryGhost/Ghost#9724 - `<img>` elements can have both `alt ` and `title` attributes, ensure we render both of them

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Koenig: Final Ghost 2.0 Version #9724

Koenig: Final Ghost 2.0 Version #9724

kevinansfield commented Jul 9, 2018 •

edited

Loading

kevinansfield commented Aug 17, 2018

Koenig: Final Ghost 2.0 Version #9724

Koenig: Final Ghost 2.0 Version #9724

Comments

kevinansfield commented Jul 9, 2018 • edited Loading

I want to help test! How do I get started?

Release blockers

Stretch goals

kevinansfield commented Aug 17, 2018

kevinansfield commented Jul 9, 2018 •

edited

Loading