Koenig: Release Candidate version

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 <kbd>Shift+Enter</kbd>
• --- 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 <kbd>Up/Down</kbd> 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 (https://github.com/bustle/mobiledoc-kit/issues/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 <kbd>Left</kbd> 6 times to move the cursor from one side to the other and <kbd>Backspace</kbd> 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 <kbd>Up</kbd> and <kbd>Down</kbd> 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

• keep cursor on screen whilst typing
• clicking below the editor does not place the cursor at the bottom of the doc
• triple-click to select a paragraph then applying formatting can also affect the next paragraph
• double soft-tap via trackpad to select text does not always show the toolbar immediately
• clicking outside of the editor canvas does not exit card edit mode
  • (this behaviour was added as a quick workaround for cards losing edit mode when interacting with external elements such as the Unsplash popup)
• switching to a heading should remove additional formatting (bold, italic etc. - not links)
• turning on ‘Quote’ or a heading should not deselect text (reversibility)
• empty HTML cards output undefined in the rendered output
• error is thrown from the plus menu mousemove handler when drag-selecting text
• ~characters can be lost in the new->edit transition~ (unable to reproduce)
• opening the / menu then deleting the / doesn’t close the menu
• difficult to remove blockquote and especially heading formatting from the first section using the keyboard
• using the keyboard to exit the top of a doc that has a card as the first section will leave the card selected
• using <kbd>Escape</kbd> to exit edit mode of a container card with a trailing card does not correctly select the card
• long URLs can cause the editor to become very wide (directly in the editor or through MD rendered mode)
• deselect cards when clicking outside of the editor
• PSM’s meta/twitter/facebook previews currently expect a single markdown card as the first card and will throw an error if that’s not present
• <kbd>Enter</kbd> in title when first section is a list throws an error
• <kbd>Backspace</kbd> to delete a list jumps cursor to bottom and creates empty paragraph
• save the post while an empty markdown card is in edit mode > navigate away from the editor > reopen the post for editing > an empty markdown card is left in the editor
• <kbd>Up</kbd> when cursor is at the beginning of a list item of a list section at the top of a post moves cursor to the title
• <kbd>Backspace</kbd> can start deleting whole words instead of individual characters
  • one reliable reproduction case is having <kbd>Alt+Space</kbd> mapped to Dash. The browser losing focus whilst the <kbd>Alt</kbd> key is pressed causes mobiledoc-kit to get stuck thinking the key is pressed so every <kbd>Backspace</kbd> is treated as <kbd>Alt+Backspace</kbd>
  • mobiledoc-kit issue + PR
• <kbd>Enter</kbd> on a blank list item should split the list the same way <kbd>Backspace</kbd> does
• links within markdown content should not be clickable (prevents accidentally leaving the editor)
• if mouse is used to select text and button is released outside the editor canvas at the bottom the selection is lost
• <kbd>Enter</kbd> behaviour is not always consistent when a card is selected depending on where the caret was placed with the mouse.
• lazy double click on cards should execute on mouse up (not mouse down)
• keyboard cursor movement should be disabled when the (+) menu is open or the cursor movement should close the menu

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 <kbd>Backspace</kbd> 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

• embed card
  • text field in “blank”/edit state
  • oembed URL lookup and API request to fetch embed HTML
  • loading spinner
  • error handling
  • caption support
• add embed card entries to (+) and /-menus
• /embed {url} support
• FB video embed doesn’t render in the editor if one already exists
• auto-focus in the URL field after a new Embed card is added

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

• investigate + fix undo stack problem with cards
  • our cursorDidChange is somehow causing the edit stack to break when a card gets selected after a paste that creates cards. A workaround is in place to avoid immediate breakage when the last section pasted is a card by inserting a blank paragraph at the end, however the undo stack still breaks as soon as a card gets selected
• pasting inside a container card (eg, markdown) will trigger our paste handler and insert content twice, once inside the container and once outside the container
• parse plaintext pastes with our markdown renderer before passing off to our HTML paste handling then mobiledoc-kit’s default paste behaviour
• standardise HTML on paste
  • <b> -> <strong>
  • <i> -> <em>
• convert <img>'s to image cards
  • mobiledoc-kit throws error when pasting certain copied images - https://github.com/bustle/mobiledoc-kit/issues/619
  • convert <figure> to image card with extracted caption
    • this is only partially implemented, full support requires a fix in mobiledoc, see https://github.com/bustle/mobiledoc-kit/issues/494
• convert <hr>'s to divider cards
  • parserPlugin for this is ready but does not currently work because mobiledoc-kit does not pass the <hr /> element through to the plugins. Related issue here https://github.com/bustle/mobiledoc-kit/issues/494
• convert <pre><code> to code cards
• convert <br>'s to soft-break atoms
• convert unknown HTML into a HTML card this isn’t particularly feasible with mobiledoc-kit as it stands. We should investigate specific instances where we want to create an HTML card to see if we can cater for those
• copy/pasting top-level <p> tags bunches text
  • this is a result of us wrapping any rich-text pastes in <div>...</div> before passing to mobiledoc-kit’s parsers
  • mobiledoc-kit issue + PR

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 <kbd>Up/Down</kbd> arrow keys whilst an image card is selected can add “ArrowUp/Down” to the caption

[kevinansfield]

1.24.0 has been released and includes a couple of new Koenig features:

• ✨ Drag & drop image files onto the editor to create image cards + upload
• ✨ ^superscript^ and ~subscript~ text expansion support

[kevinansfield]

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 <kbd>Up/Left</kbd> on list items