Koenig: Beta version #9505

kevinansfield · 2018-03-15T10:37:04Z

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

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

refs TryGhost/Ghost#9505 - remove unordered and bullet list icons from the (+) and / menus - add unordered and bullet list icons to the formatting toolbar - reorder toolbar icons to match latest design specs - remove now-unused `replaceWithListItem` actions

refs TryGhost/Ghost#9505 - implements similar `mousemove` event handling in `{{koenig-toolbar}}` as we use in `{{koenig-card}}` to not show the toolbar until we are sure there's mouse interaction

refs TryGhost/Ghost#9505 - fix overzealous matching of inline formatting - ensure the match starts with a space or the start of the paragraph - ensure the start matched chars are not followed by a space - ensure the end matched chars are not preceded by a space - avoid matching more MD chars than expected - allow text expansions to work when editing text in the middle of a paragraph - do not add a trailing space after reformatting in this case

refs TryGhost/Ghost#9505 - switch toolbar `I` button to toggle `<em>` instead of `<i>`, this standardises it with the <kbd>Meta+I</kbd> shortcut - if the active markup is `<i>` instead of `<em>` then highlight the `I` button and allow it to be toggled off to prevent confusion

refs TryGhost/Ghost#9505 - add `deleteCard` action to `{{koenig-editor}}` component and pass it through to the component cards - required modifying the `_deleteCard` behaviour so that it doesn't always try to move the cursor - use `onLeaveEdit` action from `{{koenig-card}}` in the markdown and html cards to check if their payload is empty and remove the card when exiting edit mode - fixed `onLeaveEdit` action firing when card first rendered

refs TryGhost/Ghost#9505 - previous attempts at toggling the markup state failed because mobiledoc-kit was automatically setting the activeMarkupState after we made the replacement - by scheduling the toggle we change the active markup state after mobiledoc has done it's thing so you can continue typing without the markdown markup being applied and without needing to insert an unexpected space

refs TryGhost/Ghost#9505 - switch `{{koenig-toolbar}}` to use Spirit classes and icons - wrap the toolbar `<ul>` in an absolutely positioned `<div>` rather than positioning the toolbar directly to improve animation behaviour - remove old/unused Koenig SVG icons

refs TryGhost/Ghost#9505 - use Spirit classes for card context menu - add button and icon class options for context menu items - add ability to have icon+text for context menu items - add "Edit" context menu item to markdown and html cards

refs TryGhost/Ghost#9505 - wire up the link button in the toolbar to set a `linkRange` property on `{{koenig-editor}}` - add `{{koenig-link-input}}` that is shown when `{{koenig-editor}}` has a `linkRange` set - <kbd>Escape</kbd> will cancel the link input - clicking outside the input will cancel the link input - previously selected text will be re-selected on cancel - if an existing link was selected (or partially selected) then pre-fill the link input with the `href` - `X` is shown when there's a href value and clicking will clear the input - <kbd>Enter</kbd> *with* a href value will remove all links from text that is touched by the selection and create a new link across only the selected text - <kbd>Enter</kbd> *with no* href value will remove all links touched by the selection - fixed toolbar tick positioning that was 8px off after change to Spirit classes

refs TryGhost/Ghost#9505 - ListItem sections have a parent rather than a prev section so we need to look for a section before the parent section when determining if the cursor is at the beginning of the doc for <kbd>Up</kbd> and <kbd>Left</kbd> key handling

refs TryGhost/Ghost#9505 - adjusted regexes to match a non-space group separately to a spaced group to deal with 1 or 2 chars of markup - fixed `matchStrongStar` always triggering a markup toggle because the toggle was outside of the match conditional

refs TryGhost/Ghost#9505 - a card section isn't markerable so a guard is needed to prevent inserting the soft-break atom

refs TryGhost/Ghost#9505 - ensure we disable `pointer-events` on context menus when hidden so that hidden menus do not interact with the mouse - add z-index to context menus so that they sit on top of any editor content - add `relative` positioning to the html card content so the click overlay div doesn't expand outside of the content area

refs TryGhost/Ghost#9505 - add image style buttons to the image card context menu - still requires Spirit styles for image classes to work correctly

refs TryGhost/Ghost#9505

refs TryGhost/Ghost#9505 - disable `mobiledoc-kit`'s built-in link tooltip - add `{{koenig-link-toolbar}}` component - shows toolbar above a link when it is hovered with the mouse - hides toolbar when a link isn't hovered - has a clickable link with the URL, opens in a new tab - edit button switches display to the link input toolbar - delete button removes link markup from the link

refs TryGhost/Ghost#9505 - disable all drags that start within the editor, prevents hectic behaviour when selecting and dragging text

refs TryGhost/Ghost#9505

refs TryGhost/Ghost#9505 - prevent typing at the end of a `code` or ~strike~ markup continuing the format - if <kbd>Backspace</kbd> is pressed at the end of a `code` or ~strike~ markup then undo the text expansion and remove the last char

refs TryGhost/Ghost#9505 - use `ENTER` and `BACKSPACE` key commands to intercept <kbd>Enter</kbd> and <kbd>Backspace</kbd> to insert/remove blank paragraphs rather than splitting the heading when the cursor is at the beginning of a heading

refs TryGhost/Ghost#9505

refs TryGhost/Ghost#9505 - add a `paste` event handler to the editor element so that we can override the default mobiledoc-kit paste handling when required - detect a paste when we have a plain text selection and if it's a valid url convert the selection to a link using the pasted url as the `href`

refs TryGhost/Ghost#9505 - the `_` emphasis and link text expansions were toggling the wrong markup on completion

refs TryGhost/Ghost#9505 - prevents clicks outside of the document canvas from exiting edit mode - useful for cards that include modals because previously any click on a modal would exit edit mode and usually remove the modal from view

refs TryGhost/Ghost#9505 - use `ember-sticky-element` to stick card icons in top left when scrolling - pass an `headerOffset` down from the `{{gh-editor}}` component through Koenig and the card components so that it can be used for adjustments where necessary - calculate `headerHeight` in `{{gh-editor}}` any time we change the header class

refs TryGhost/Ghost#9505 - sticky positioning was correct on the first post load but leaving the editor then coming back never took the editor header height into account - store a reference to the header element in `{{gh-editor}}` so that we can more reliably grab the height to pass through

refs TryGhost#9505 - updates mobiledoc converter's `render` method to accept a `version` argument - `1` === Ghost 1.0's markdown-only renderer output - `2` === Koenig's full mobiledoc renderer output - switch between mobiledoc renderer versions in Post model's `onSaving` hook - version 1 by default - version 2 if Koenig is enabled (currently behind dev experiments config + labs flag) - version 2 if the post's mobiledoc is not compatible with the markdown-only renderer - "version 2" full-Koenig mobiledoc renderer output - wraps content in a `.kg-post` div - removes wrapper around markdown and html card output - adds classes to image card output including selected image size/style - standardises es6 usage across mobiledoc related files

refs #9505 - updates mobiledoc converter's `render` method to accept a `version` argument - `1` === Ghost 1.0's markdown-only renderer output - `2` === Koenig's full mobiledoc renderer output - switch between mobiledoc renderer versions in Post model's `onSaving` hook - version 1 by default - version 2 if Koenig is enabled (currently behind dev experiments config + labs flag) - version 2 if the post's mobiledoc is not compatible with the markdown-only renderer - "version 2" full-Koenig mobiledoc renderer output - wraps content in a `.kg-post` div - removes wrapper around markdown and html card output - adds classes to image card output including selected image size/style - standardises es6 usage across mobiledoc related files

refs TryGhost/Ghost#9505 - use `ui` service to adjust full-width image styles then the side nav is open

refs TryGhost/Ghost#9505 - Card menu style refinements - Toolbar style refinements - Unifying toolbar, link tooltip and link toolbar size and position - Making link input the same size as text toolbar - Fix single element position in toolbar - Making toolbars darker

refs TryGhost/Ghost#9505 - if there is only a single card in a document and no other text then deleting it would throw an error because we assumed there's another section to move the cursor to - handle the situation of not having a position to move to by creating a new blank paragraph and placing the cursor inside

refs TryGhost/Ghost#9505 - card menu style refinements - fix tick color and adding appear animation to toolbar - bump Spirit dependency

refs TryGhost/Ghost#9505 - standardises on a single place for key command handlers - mark re-used methods as public API rather than private

kevinansfield · 2018-05-14T13:10:33Z

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.

refs TryGhost/Ghost#9505 - Koenig is entering beta so we no longer want to hide the checkbox behind a developer experiments flag

refs #9505 - remove requirement for the `enableDeveloperExperiments` flag to be able to use Koenig - it's now possible to enable as a standard Labs beta feature

refs TryGhost#9505 - remove requirement for the `enableDeveloperExperiments` flag to be able to use Koenig - it's now possible to enable as a standard Labs beta feature

refs TryGhost/Ghost#9505 - see https://forum.ghost.org/t/koenig-beta-release/1284 for full details - moved Koenig editor checkbox from experimental to Beta - added info message support in editor screen - removed alert when opening markdown-incompatible post with Koenig disabled

refs #9505

refs #9505 - update tests to match loose BEM image style classes

refs TryGhost/Ghost#9505

refs TryGhost/Ghost#9505 - when cursor changes through the normal `cursorDidChange` or through certain programmatic changes we trigger a check to see if the cursor is out of the viewport and scroll it into view if necessary

kevinansfield · 2018-05-23T17:34:30Z

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

refs TryGhost/Ghost#9505 - when cursor changes through the normal `cursorDidChange` or through certain programmatic changes we trigger a check to see if the cursor is out of the viewport and scroll it into view if necessary - disable our scroll-into-view routine if the mouse button or shift key is down so that we don't interfere with default browser behaviour which works well in that situation

refs TryGhost/Ghost#9505 - when cursor changes through the normal `cursorDidChange` or through certain programmatic changes we trigger a check to see if the cursor is out of the viewport and scroll it into view if necessary - disable our scroll-into-view routine if the mouse button or shift key is down so that we don't interfere with default browser behaviour which works well in that situation - for scroll-into-view at the bottom there are two slightly different methods - if the cursor is near the bottom of the document we scroll so that the bottom padding of the editor is visible - if the cursor is mid-document then we scroll just enough to bring the cursor into the viewport

…1012) refs TryGhost/Ghost#9505 - when cursor changes through the normal `cursorDidChange` or through certain programmatic changes we trigger a check to see if the cursor is out of the viewport and scroll it into view if necessary - disable our scroll-into-view routine if the mouse button or shift key is down so that we don't interfere with default browser behaviour which works well in that situation - for scroll-into-view at the bottom there are two slightly different methods - if the cursor is near the bottom of the document we scroll so that the bottom padding of the editor is visible - if the cursor is mid-document then we scroll just enough to bring the cursor into the viewport

refs TryGhost/Ghost#9505 - updates mobiledoc converter's `render` method to accept a `version` argument - `1` === Ghost 1.0's markdown-only renderer output - `2` === Koenig's full mobiledoc renderer output - switch between mobiledoc renderer versions in Post model's `onSaving` hook - version 1 by default - version 2 if Koenig is enabled (currently behind dev experiments config + labs flag) - version 2 if the post's mobiledoc is not compatible with the markdown-only renderer - "version 2" full-Koenig mobiledoc renderer output - wraps content in a `.kg-post` div - removes wrapper around markdown and html card output - adds classes to image card output including selected image size/style - standardises es6 usage across mobiledoc related files

refs TryGhost/Ghost#9505

refs TryGhost/Ghost#9505 - update tests to match loose BEM image style classes

refs TryGhost/Ghost#9505 - updates mobiledoc converter's `render` method to accept a `version` argument - `1` === Ghost 1.0's markdown-only renderer output - `2` === Koenig's full mobiledoc renderer output - switch between mobiledoc renderer versions in Post model's `onSaving` hook - version 1 by default - version 2 if Koenig is enabled (currently behind dev experiments config + labs flag) - version 2 if the post's mobiledoc is not compatible with the markdown-only renderer - "version 2" full-Koenig mobiledoc renderer output - wraps content in a `.kg-post` div - removes wrapper around markdown and html card output - adds classes to image card output including selected image size/style - standardises es6 usage across mobiledoc related files

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

kevinansfield self-assigned this Mar 15, 2018

ErisDS mentioned this issue Mar 15, 2018

Feature: Full Koenig Editor #9311

Closed

4 tasks

kevinansfield assigned peterzimon Mar 15, 2018

kevinansfield added a commit to TryGhost/Admin that referenced this issue Apr 10, 2018

Koenig - Fix error on SHIFT+ENTER whilst a card is selected

ac49240

refs TryGhost/Ghost#9505 - a card section isn't markerable so a guard is needed to prevent inserting the soft-break atom

kevinansfield added a commit to TryGhost/Admin that referenced this issue Apr 10, 2018

Koenig - First pass at image width styles

28509c6

refs TryGhost/Ghost#9505 - add image style buttons to the image card context menu - still requires Spirit styles for image classes to work correctly

kevinansfield added a commit to TryGhost/Admin that referenced this issue Apr 11, 2018

Koenig - Update icons, add divider support to card context toolbars

2f6132e

refs TryGhost/Ghost#9505

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

Koenig - Disable dragging of text within the editor

d9c5697

refs TryGhost/Ghost#9505 - disable all drags that start within the editor, prevents hectic behaviour when selecting and dragging text

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

Koenig - Change ~strike~ text expansion to ~~strike~~

1a58551

refs TryGhost/Ghost#9505

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

Koenig - Fixed error when pasting text with a whole paragraph selected

2ba0126

refs TryGhost/Ghost#9505

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

Koenig - Fixed _emphasis_ and link text expansions not cancelling

2f5f3ce

refs TryGhost/Ghost#9505 - the `_` emphasis and link text expansions were toggling the wrong markup on completion

kevinansfield pushed a commit to TryGhost/Admin that referenced this issue May 8, 2018

Koenig - Made full width images work with closed sidebar (#1014)

d7b096b

refs TryGhost/Ghost#9505 - use `ui` service to adjust full-width image styles then the side nav is open

kevinansfield pushed a commit to TryGhost/Admin that referenced this issue May 9, 2018

Koenig - Refine card menu and fix toolbar tick color

03d0f11

refs TryGhost/Ghost#9505 - card menu style refinements - fix tick color and adding appear animation to toolbar - bump Spirit dependency

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

Koenig - Extract key commands out of {{koenig-editor}}

e49989b

refs TryGhost/Ghost#9505 - standardises on a single place for key command handlers - mark re-used methods as public API rather than private

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

Koenig - Remove dev experiments flag requirement in admin

5f92a9b

refs TryGhost/Ghost#9505 - Koenig is entering beta so we no longer want to hide the checkbox behind a developer experiments flag

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

Koenig - Remove developer experiments flag requirement

bd75d75

refs #9505 - remove requirement for the `enableDeveloperExperiments` flag to be able to use Koenig - it's now possible to enable as a standard Labs beta feature

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

Koenig - Use loose BEM naming for image style classes

c50f60f

refs #9505

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

Koenig - Fix broken image card tests

ee31157

refs #9505 - update tests to match loose BEM image style classes

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

Koenig - Fixed error on Cmd+K with no selection

af5ac2a

refs TryGhost/Ghost#9505

kevinansfield closed this as completed May 23, 2018

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

Koenig - Use loose BEM naming for image style classes

0131a9c

refs TryGhost/Ghost#9505

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

Koenig - Fix broken image card tests

78041fb

refs TryGhost/Ghost#9505 - update tests to match loose BEM image style classes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Koenig: Beta version #9505

Koenig: Beta version #9505

kevinansfield commented Mar 15, 2018 •

edited

Loading

kevinansfield commented May 14, 2018

kevinansfield commented May 23, 2018

Koenig: Beta version #9505

Koenig: Beta version #9505

Comments

kevinansfield commented Mar 15, 2018 • edited Loading

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

Sprint tasks

General editing

Server-side rendering

Text expansions (markdown formatting)

Markdown card

HTML card

Image card

Card menu

Bugs

Fixed bugs

kevinansfield commented May 14, 2018

kevinansfield commented May 23, 2018

kevinansfield commented Mar 15, 2018 •

edited

Loading