Koenig: Release Candidate version #9623

kevinansfield · 2018-05-10T13:19:54Z

This issue captures the tasks that we'll be working on for the third 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. We will aim to announce "RC" status early July.

part of #9311 (Feature: Full Koenig editor)

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

See the instructions here.

Sprint tasks

🏃 = "in progress"
🚢 = "ready for next release" (releases are every Tuesday)

High Priority

Embed card

supported sources popup / help page

Mid priority

General editing

word and line delete doesn't work as expected (macOS)
- option + backspace delete only until the first letter with accent (mobiledoc-kit issue)
- cmd + backspace doesn't delete the line (mobiledoc-kit issue)
selecting all text in link then typing to replace it only applies the link to the first typed character
- mobiledoc-kit issue
word count / reading time display

Text expansions

text expansions do not work reliably if they wrap a soft break atom (inserted via Shift+Enter
--- divider text expansion between two image cards will select the next image card and add a trailing - to the caption

Embed card

🏃 lookup URL and create embed when pasting in blank section

Code card

language input/selection
- expand text expansion to support language as per MD spec

Markdown card

stay in edit mode until any image uploads finish
- or show upload progress placeholder in rendered mode

Image card

paste URL whilst selected = set src attribute
/image {url} support

Copy/paste

pasting text whilst some text is selected adds two undos to the undo stack, 1 that removes the selected text and a second that inserts the pasted text
- mobiledoc-kit issue

Low priority

General editing

context menu could "hang" out from the left/right hard edges of the editor
mouseout of link hover tooltip could be refined so it's harder to accidentally lose the tooltip
🏃 use the '/' menu to make the card dropdown appear > choose a card with left-right arrows > mouseover on any of the non-selected cards > issue: two card types are 'hovered'
triple-click select causes toolbar to jump, it shows in the double-click select position before jumping to the final selection position
selecting a card whilst the (+) menu is open can place the (+) icon next to the card
after editing (or cancelling an edit of) a link the formatting toolbar doesn't re-appear until moving the mouse
changing the first section to a blockquote doesn't play well with the placeholder

Embed card

embed size toolbar

Code card

add info message to use a Gist embed or similar over a certain number of lines

Image card

double click should place the focus in the Caption input field
show insert position indicator when drag & dropping images

Copy/paste

copy + paste on start of a blockquote (>) removes the blockquote

Stretch goals 💪

Embed card

opengraph embed fallback

X-Browser Issues

Firefox Up/Down arrow keys jump to top/bottom of doc when hitting a section boundary
Safari scrolls to the bottom when interacting with the link toolbar
Edge throws error when clicking outside of a card in edit mode
- Unable to get property 'find' of undefined or null reference
Edge throws error when pasting images
- Array.from: argument is not an Object
- Unable to get property 'isBlank' of undefined or null reference
Edge does not stick MD card toolbar correctly
Safari shows double cursors at times
Safari has icon wiggle when hovering the toolbar

Known issues

These are issues that are related to underlying mobiledoc-kit or browser behaviour rather than our implementation. They are currently lower priority due to the cost/benefit for fixing but will likely be picked up in later cycles.

mobiledoc-kit

OS/browser spell checking underlines flicker whilst typing (Spellcheck underlines flicker when typing bustle/mobiledoc-kit#621)
undo causes the whole editor canvas to re-draw resulting in cards being torn down and recreated which can cause a lot of content height jumping with embed cards that reload their content
indentation doesn't work on lists
- support for nested lists is a long-standing issue in mobiledoc-kit requiring a format update to add support
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
Edge Up and Down keys only allow movement within the current section
- possibly a general contenteditable problem or something in mobiledoc-kit, same behaviour is visible on mobiledoc-kit demo
- mobiledoc-kit issue
Grammarly causes high CPU usage
- Grammarly is currently disabled in Koenig for this reason

Browser behaviour

text gets deselected when the link input field appears
- NOTE: this is due to standard browser behaviour; as soon as the input field has focus it removes any other selection. Medium and Dropbox Paper have the same issue. Workaround could be to temporarily highlight the selected text some other way whilst the input is open but it could be tricky/brittle
text selection indicator is too tall
- browsers do not offer any control over this so we'll need to live with it for now

Completed tasks

General editing

Text expansions (markdown formatting)

> can not be used at the beginning of an existing paragraph to convert it to a block quote
heading text expansions should be possible for existing text by adding #s at the beginning of the paragraph followed by a space
- if existing text is already a heading then the heading type (eg, h3->h1) should be changed
-- within text should expand to ndash (–)
--- within text should expand to mdash (—)
super/sub-script is allowed (it can be added via copy/paste) but there is no markdown or keyboard shortcut for it
- superscript expansion = 19^th^ (19^th)
- subscript expansion = H~2~O (H₂O)
- expansions will work similarly to inline code and strikethrough where Backspace at the end of the format will undo the expansion
typing - , * or 1. at the beginning of a paragraph with text in it should convert it to the corresponding list
typing - , * or 1. at the beginning of a list item of the alternate type should toggle the type of list

Embed card

Code card

CodeMirror based text input
triple-backtick expansion
remove from card menu

Image card

create image cards for dropped images
create image cards for pasted images
- browser support for this varies (tested on macOS):
  - Chrome: will only paste the first image file
  - Firefox: won't paste any image files
  - Safari: will paste all image files
hide size buttons until an image is uploaded
caption placeholder should be removed if the focus is put in it
place dropped images in the cursor position
support drag-n-drop to upload image in empty state
replace image if an image is dropped on an existing image card

Copy/paste

General design

Night Shift support
toolbar ▼ is mis-aligned in Night Shift

x-Browser support

Firefox/Safari don't allow text in image captions or the embed input to be selected or the caret to be moved within the caption input using arrow keys
- setting contenteditable="false" on the editor element allows arrow keys to work in both browsers and Safari allows full text input and selection
- user-select: none styling on the input fields is the remaining issue in FF
Safari throws IndexSizeError: The index is not in the allowed range. from the _scrollCursorIntoView method when typing with an image card selected
Firefox Up/Down arrow keys whilst an image card is selected can add "ArrowUp/Down" to the caption

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

refs TryGhost/Ghost#9623 - keep a truthy "skip mouse move" flag around across re-triggers within the 50ms restart window to cater for slightly different mouse/selection event orders - add a couple of guards to avoid triggering the toggle task unnecessarily

…raph refs TryGhost/Ghost#9623 - triple-click select will by default end the selection at position 0 of the following paragraph which means section-level formatting such as headers or quotes will affect the apparently unselected following paragraph - add a guard to check for that selection situation and ensure the selection is constrained to the visibly selected text

refs TryGhost/Ghost#9623

…toolbar refs TryGhost/Ghost#9623 - maintains easy reversibility by keeping text selected and toolbar shown in the same position to avoid jumping buttons when font size or other formatting changes

refs TryGhost/Ghost#9623 - match `--` and `---` and convert if followed by a space or any character respectively - include guards to ensure that expansion doesn't occur inside code blocks

refs TryGhost/Ghost#9623 - disable the default mobiledoc-kit heading text expansion and replace with our own that matches heading markdown at the beginning of existing text and will change the heading level of the existing text

refs #9623 - add tests for undefined payloads in container cards - add guard for undefined payload in html card

refs TryGhost/Ghost#9623 - disable the default mobiledoc-kit heading text expansion and replace with our own that matches heading markdown at the beginning of existing text and will change the heading level of the existing text

refs TryGhost/Ghost#9623 - adds `toggleHeaderSection` action to have a central place for logic - adds `_performEdit()` so that we can avoid nested runloops in actions - update text expansion and toolbar to use the new `toggleHeaderSection` action

refs TryGhost/Ghost#9623 - `code` card that uses CodeMirror for the edit view and outputs `<pre><code>...</code></pre>` for the rendered view - adds triple-backtick text expansion for creating code cards

refs #9623 - add support for `code` card that renders into `<pre><code>...</code></pre>` - render language class if one is provided

refs TryGhost/Ghost#9623 - fixes the broken click handling and expands it - trigger for clicks on the container rather than only the editor canvas - trigger only if the click is below the editor canvas - create an empty paragraph if the last section in the doc is a card

refs TryGhost#9623 - add support for `code` card that renders into `<pre><code>...</code></pre>` - render language class if one is provided

refs TryGhost/Ghost#9623 - plain text that's pasted will be run through our markdown parser then mobiledoc-kit will perform it's usual rich-text paste handling on the resulting HTML - add a <kbd>Cmd/Ctrl+V+Shift</kbd> escape valve that will skip markdown parsing so mobiledoc-kit's default plain text parsing is invoked - will not work with IE or Edge <= 16 due to missing browser support for distinguishing plain text vs html pastes

…ting refs TryGhost/Ghost#9623 - fixes `Maximum call stack size exceeded` error when you paste content containing `<code>` elements and then place the cursor at the end of one of those elements - this was occurring because the code in `inputModeDidChange()` was triggering another `inputModeDidChange() call - use the private mobiledoc-kit methods to toggle editor state because we don't want to trigger `inputModeDidChange()` callbacks - look at the editor state directly rather than going by what we _think_ the editor state should be based on the markers around the cursor - fixes another subtle issue where after pasting if you placed the cursor at the end of the code format and started typing it would still be formatted as code - mobiledoc-kit has an odd behaviour where duplicate edit states for the markup are present so we have to loop over them rather than relying on a single `toggleMarkupState()` call

refs TryGhost/Ghost#9623

refs TryGhost/Ghost#9623 - added code block card to (+) and / menus - changed card row length to 3 - swapped html icon for code icon and added new html icon

refs TryGhost/Ghost#9623 - catches and ignores `editor.positionAtPoint` TypeError due to not having a correct node value whilst dragging with a selection - fixes error thrown from the triple-click handling which expected a value to always be present

refs TryGhost/Ghost#9623 - use our paste handler to perform a replacement on any pasted HTML - `<b>` -> `<strong>` - `<i>` -> `<em>`

refs TryGhost/Ghost#9623 - header text expansion skip for headers with the same level didn't take into account that the toolbar should actually toggle the heading on/off

refs TryGhost/Ghost#9623 - adds `parserPlugins` option with array of parser plugins that read node values and convert them when pasting - converts `<br>` to a soft-break atom for line breaks - removes leading newlines from text nodes to avoid leading spaces in the render output (common when pasting MD with line breaks)

refs TryGhost/Ghost#9623 - use our custom paste event to intercept and modify pasted HTML before passing to mobiledoc - wrap the html in a `<div>` so that all elements get parsed by mobiledoc-kit - when pasting results in the last pasted section being a card, insert a blank paragraph - fixes immediate breaking of the undo stack

refs TryGhost/Ghost#9623 - add parser plugin to match a `<pre>` with a nested `<code>` as it's first child and transform it into a code card

refs TryGhost/Ghost#9623 - toggle the list type (unordered vs ordered) when typing `- `, `* `, `1 `, or `1. ` at the beginning of a list item

…t items refs TryGhost/Ghost#9623 - update "exit cursor at top" logic so it doesn't look at the parent ListSection until the cursor has reached the first ListItem in a ListSection

refs TryGhost/Ghost#9623 - bump Ghost-Spirit dependency

refs TryGhost/Ghost#9623 - 3978894 broke dash expansions because the list toggle was matching the `- ` before the dash text expansion could be triggered - resolved by adding the missing beginning-of-string `^`

…raphs refs TryGhost/Ghost#9623 - switch to custom `mobiledoc-kit` build - fixes top-level elements not being run through parser plugins (bustle/mobiledoc-kit#627) - fixes <kbd>Alt</kbd> getting stuck and causing <kbd>Backspace</kbd> to delete whole words (bustle/mobiledoc-kit#626) - fixes error that can occur when a paste results in blank insert (bustle/mobiledoc-kit#620) - add new `figureToImageCard` parser - replaces hacky workaround to detect an image+figcaption inside the `imgToCard` parser plugin - remove wrapping of html in a `<div>...</div>` when pasting - no longer necessary now that top-level elements are parsed - fixes rich-text pastes where multiple paragraphs would be collapsed into a single paragraph

refs TryGhost/Ghost#9623 - override <kbd>Enter</kbd> behaviour when pressed on a blank list item mid-list

refs TryGhost/Ghost#9623 - ensure images are placed where the cursor is when dropping or pasting images - fixed errors when dropping/pasting images into a list

kevinansfield · 2018-06-19T15:41:43Z

1.24.5 has been released containing new Koenig features and bug fixes:

✨ Toggle list types using MD list syntax
- type -, *, 1, or 1. followed by a space at the beginning of any list item to change the type of list
✨ Toggle existing paragraphs into lists using MD list syntax
- type -, *, 1, or 1. followed by a space at the beginning of a paragraph to convert it to a list item
🎨 Split list when pressing Enter on a blank list item
🐛 Fixed placement of dropped images
🐛 Fixed backspace deleting words
🐛 Fixed collapsed paragraphs when pasting rich-text (eg, copy/paste content from a website)
🐛 Fixed cursor jumping to title when pressing Up/Left on list items

refs TryGhost/Ghost#9623 - do not process drop in `{{koenig-editor}}` if the drop happened on a card and the card's `handlesDragDrop` property is true - allow `dragover` events on cards to bubble up to Ember's event handler in `{{koenig-editor}}` - handle drag/drop in `{{koenig-card-image}}` - show different overlays when dragging files over the card to indicate an upload or replace action - start upload when a file is dropped on the card

refs TryGhost/Ghost#9623 - add an overlay to the rendered MD card so that links aren't clickable

…electing refs TryGhost/Ghost#9623 - track the `mousedown` position and switch the `click` handler to a `mouseup` handler - only trigger the editor focus event if both the `mousedown` and `mouseup` events occur below the editor canvas

refs TryGhost/Ghost#9623 - clicking a card a second time while it is selected can move the invisible cursor to the beginning of a section in which case <kbd>Enter</kbd> would insert a blank paragraph above the card - when <kbd>Enter</kbd> is pressed and a card is selected, move the cursor to the end of the card section without triggering our cursor change so that the default behaviour will always add a paragraph after the card

refs TryGhost/Ghost#9623 - move lazy-click handling to a mouseup handler instead of mousedown in `{{koenig-card}}` - ensure that we don't trigger edit mode on the initial mouseup after a mousedown event has selected the card

refs TryGhost/Ghost#9623 - close menu if it's open and the cursor position changes within the document - closes when you start typing rather than hiding text behind the menu - watch for arrow keys and close the menu if pressed - closes when <kbd>Up</kbd> is pressed and the title is selected rather than the cursor being moved within the document

refs TryGhost/Ghost#9623 - clicks near the HR card when it was selected would trigger immediate deselection putting the cursor into a position where it was not possible to type - update the guard in the click-to-deselect event handler to match any element contained by the editor rather than only clicks that are directly on the editor element

refs TryGhost/Ghost#9623 - only Chrome exposes `MouseEvent.path` so use `MouseEvent.composedPath()` for Safari/FF support

refs TryGhost/Ghost#9623 - disable `contenteditable` on the main editor element when a card is selected - Firefox and Safari both choke on inputs inside a `contenteditable` element - remove `user-select: none` styling from `.form-text` for text inputs

refs TryGhost/Ghost#9623 - disable `contenteditable` on the main editor element when an input in a card gains focus - Firefox chokes on inputs inside a `contenteditable` element - use a MutationObserver inside `{{koenig-card}}` to automatically add event handlers for focus/blur events so that each card is not required to set up handlers and enable/disable content editable manually - bump Spirit dependency - remove `user-select: none` styling from `.form-text` for text inputs - fixes captions and embed inputs in Safari and improves behaviour in Firefox - add a guard around `getSelection(0)` in the `_scrollCursorIntoView()` method to avoid Safari throwing errors

refs TryGhost/Ghost#9623 - Firefox unlike other browsers triggers `keypress` events for non-printable characters - use mobiledoc-kit's `Key` class to guard against adding non-printable key values to captions

refs TryGhost#9623 - added `DomModifier` class to walk a SimpleDom document and modify as needed - adds `id` attributes to `h1`, `h2`, etc heading tags - converts H* tag content to a dasherized string for the id attribute (dasherized id's are different to the smushed ids that are generated by our markdown converted but there are no backwards-compatibility concerns here) - if a duplicate id is detected then add a `-1`, `-2`, etc suffix to the id - use `DomModifier` after converting mobiledoc to SimpleDom but before serialising to html - switched top-level var declarations to es6

kevinansfield · 2018-07-09T08:53:16Z

The RC phase of Koenig development has drawn to a close, we're now pushing for final release.

On the Koenig final issue you can see the tasks that have been prioritised for the initial release. We'll be picking up any other unfinished tasks from this issue after the final release and will move them to new issues as appropriate.

refs #9623 - added `DomModifier` class to walk a SimpleDom document and modify as needed - adds `id` attributes to `h1`, `h2`, etc heading tags - converts H* tag content to a dasherized string for the id attribute (dasherized id's are different to the smushed ids that are generated by our markdown converted but there are no backwards-compatibility concerns here) - if a duplicate id is detected then add a `-1`, `-2`, etc suffix to the id - use `DomModifier` after converting mobiledoc to SimpleDom but before serialising to html - switched top-level var declarations to es6

refs TryGhost/Ghost#9623 - add tests for undefined payloads in container cards - add guard for undefined payload in html card

refs TryGhost/Ghost#9623 - add support for `code` card that renders into `<pre><code>...</code></pre>` - render language class if one is provided

refs TryGhost/Ghost#9623 - add `embed` card renderer

refs TryGhost/Ghost#9623 - blank images may be used in the editor as placeholders, don't render them on the front-end

kevinansfield assigned kevinansfield and peterzimon May 10, 2018

ErisDS mentioned this issue May 10, 2018

Feature: Full Koenig Editor #9311

Closed

4 tasks

kevinansfield added affects:editor Work relating to the Koenig Editor affects:admin Anything relating to Ghost Admin labels May 10, 2018

kevinansfield mentioned this issue May 14, 2018

Koenig: Beta version #9505

Closed

59 tasks

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

Koenig - Fixed deletion of / not closing the /-menu

3caa78d

refs TryGhost/Ghost#9623

kevinansfield added a commit that referenced this issue May 15, 2018

Koenig - Fixed empty HTML card rendering undefined

367c5b9

refs #9623 - add tests for undefined payloads in container cards - add guard for undefined payload in html card

kevinansfield added a commit that referenced this issue May 15, 2018

Koenig - Code card server-side rendering

f54db75

refs #9623 - add support for `code` card that renders into `<pre><code>...</code></pre>` - render language class if one is provided

ololoken pushed a commit to ololoken/Ghost that referenced this issue May 16, 2018

Koenig - Code card server-side rendering

36c9f41

refs TryGhost#9623 - add support for `code` card that renders into `<pre><code>...</code></pre>` - render language class if one is provided

kevinansfield added a commit to TryGhost/Admin that referenced this issue May 17, 2018

Koenig - Remove duplication in special format edit state toggling

db00d89

refs TryGhost/Ghost#9623

kevinansfield added a commit to TryGhost/Admin that referenced this issue May 17, 2018

Koenig - Standardise <b> and <i> elements when pasting

914c50b

refs TryGhost/Ghost#9623 - use our paste handler to perform a replacement on any pasted HTML - `<b>` -> `<strong>` - `<i>` -> `<em>`

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

Koenig - Convert <pre><code> to code card

306a099

refs TryGhost/Ghost#9623 - add parser plugin to match a `<pre>` with a nested `<code>` as it's first child and transform it into a code card

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

✨ Koenig - Toggle list types using MD list syntax

3978894

refs TryGhost/Ghost#9623 - toggle the list type (unordered vs ordered) when typing `- `, `* `, `1 `, or `1. ` at the beginning of a list item

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

Koenig - Fix list margins

a9c8db2

refs TryGhost/Ghost#9623 - bump Ghost-Spirit dependency

kevinansfield added a commit to TryGhost/Admin that referenced this issue Jun 19, 2018

🎨 Koenig - Split list when pressing Enter on a blank list item

5ba6067

refs TryGhost/Ghost#9623 - override <kbd>Enter</kbd> behaviour when pressed on a blank list item mid-list

kevinansfield added a commit to TryGhost/Admin that referenced this issue Jun 20, 2018

Koenig - Prevent rendered MD links being clickable

9d5ab48

refs TryGhost/Ghost#9623 - add an overlay to the rendered MD card so that links aren't clickable

kevinansfield added a commit to TryGhost/Admin that referenced this issue Jun 20, 2018

🐛 Koenig - Fixed card click-to-deselect in Safari/Firefox

5b369a9

refs TryGhost/Ghost#9623 - only Chrome exposes `MouseEvent.path` so use `MouseEvent.composedPath()` for Safari/FF support

kevinansfield mentioned this issue Jul 5, 2018

🎨 Koenig - Add ID attributes to heading tags when rendering #9720

Merged

kevinansfield closed this as completed Jul 9, 2018

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

Koenig - Fixed empty HTML card rendering undefined

fc2a79a

refs TryGhost/Ghost#9623 - add tests for undefined payloads in container cards - add guard for undefined payload in html card

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

Koenig - Code card server-side rendering

15e22ca

refs TryGhost/Ghost#9623 - add support for `code` card that renders into `<pre><code>...</code></pre>` - render language class if one is provided

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

Koenig - Embed card renderer

1a8d4a1

refs TryGhost/Ghost#9623 - add `embed` card renderer

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

Koenig - Do not render image cards with no src on the front-end

f63f710

refs TryGhost/Ghost#9623 - blank images may be used in the editor as placeholders, don't render them on the front-end

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Koenig: Release Candidate version #9623

Koenig: Release Candidate version #9623

kevinansfield commented May 10, 2018 •

edited

Loading

kevinansfield commented Jun 19, 2018

kevinansfield commented Jul 9, 2018

Koenig: Release Candidate version #9623

Koenig: Release Candidate version #9623

Comments

kevinansfield commented May 10, 2018 • edited Loading

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

Sprint tasks

High Priority

Mid priority

Low priority

Stretch goals 💪

X-Browser Issues

Known issues

mobiledoc-kit

Browser behaviour

Completed tasks

kevinansfield commented Jun 19, 2018

kevinansfield commented Jul 9, 2018

kevinansfield commented May 10, 2018 •

edited

Loading