Koenig: Beta version

[kevinansfield]

This issue captures the tasks that we'll be working on for the second 6-week Koenig sprint. All work will take place on master and will be available in the weekly releases behind a dev+labs flag for anyone wanting to help test. We will aim to announce "Beta" status and make Koenig available without the developer config flag early-May.

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"

General editing

Primary

• move list creation from card menu to toolbar
• link creation and editing via toolbar
• link hover toolbar
• reassign Cmd+K to trigger our link editing rather than mobiledoc-kit's
• full Spirit (our new style guide) styling for the editor canvas
• implement context menu design

Secondary / Bug fixes

• do not show popup toolbar until mousemove if selection made via keyboard
• hitting Enter at the beginning of a heading moves the text down and removes the formatting leaving a blank heading above - Enter at the beginning of the heading should keep formatting and insert a blank paragraph above
  • opened an upstream issue Enter/Backspace with cursor at beginning of heading loses formatting bustle/mobiledoc-kit#615
• at the bottom of any card there's about 40px dead space which should be removed
• text selection and drag works hectic: after clicking and holding the mouse for a second over a selected text it's possible to drag the text around in the editor - expected behavior: it's not possible to drag text at all (low prio)
• pasting a URL whilst text is selected should convert that text to a link using the pasted URL as the href
• increase undo stack depth (mobiledoc's default is 5)

Server-side rendering

• default stylesheet injection with theme overrides dropped in favour of documentation and examples
• apply styles to all element pairs to enable full control over vertical rhythm dropped in favour of documentation and examples

Text expansions (markdown formatting)

• text expansions add a trailing space - this is so that formatting is reset but can be unexpected, can we reset the formatting without adding a trailing space?
• change ~strike~ to ~~strike~~ to match design specs
• code and strike handling
  • pressing Backspace at the end of a special formatting block should undo the text expansion
  • typing with the cursor at the end of a special formatting block should not continue the formatting
• typing an _ can pick up an _ in an earlier code block and switch everything between them to italic removing the _s in the process
• markdown link regex for text expansion can be a bit overzealous, needs to be adapted to not pick up unrelated chars earlier in the paragraph

Markdown card

• use our existing markdown editor
• fix markdown editor styles
• sticky toolbar
• implement context menu design
• fine tune md card visual design (remove double borders etc.)
• all empty MD editors should be removed on exiting edit mode

HTML card

• turn on word-wrapping for edit
• implement context menu
• implement typography for embed editor
• fine tune embed card visuals (both in view and edit mode)
• all empty embed editors should be removed on exiting edit mode

Image card

Primary

• apply size & positioning styles to images
  • editor context menu buttons and option storage
• server-side rendering
  • output size classes
  • default front-end styles

Card menu

Primary

• implement card dropdown design
• remove search (for Beta)

Secondary / Bug fixes

• image button from (+) dropdown doesn't work when clicking (works when using the / menu though)
• ESC should always hide the (+) dropdown

Bugs

Issues found during the sprint, to be populated as they are found...

High prio

• focus should be in markdown / HTML editor when entering card edit mode (w/ CMD+Enter) so that it's possible to write without clicking inside it (currently it selects the card instead)
• enter markdown editor > enter some text > hit space > the cursor is not moved accordingly > enter some text > the cursor is moved by the previously hit space
• card context menus are sometimes misplaced
• opening the / menu and then clicking on a card in the editor canvas throws an error

Fixed bugs

• italic text created via markdown text expansions cannot be toggled via the toolbar because one is using <em> while the other is using <i>
• slash menu doesn't work on the very first line of a post
• Shift+Enter whilst a card is selected will error
• one or two-letter text expansions don't work
• ** text expansion can apply bold formatting immediately without replacing content
• pressing Up or Left whilst the cursor is on a blank list item will cause the cursor to jump to the title
• when inserting a divider via the (+) menu the card should not be automatically selected and the
• _text_ does not correctly cancel italics when the expansion is completed
• pasting text whilst all text in a section is selected throws an error from {{koenig-plus-menu}}
• copy + paste keeps style somewhat...
• divider insertion via --- does not move cursor to next section if no trailing paragraph was created
  • after creating a --- with text expansion, cursor is blinking in front of --- but after pressing ->, it's positioned at the very end of the post
• deletion of the last card in a doc with no other sections throws an error
• if first section is a heading, pressing backspace when caret is at the beginning of the section throws an error

[kevinansfield]

All incomplete bugs/features from this cycle have been moved to the Release Candidate issue.

Beta release is planned to go out in next week's release of Ghost.

[kevinansfield]

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

Work is continuing on the Koenig RC issue