Commit Graph

21 Commits

Author SHA1 Message Date
Kevin Ansfield
25bc402f72 Koenig - Remove markdown/embed card if it's empty when leaving edit mode
refs https://github.com/TryGhost/Ghost/issues/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
2018-03-15 17:54:15 +00:00
Kevin Ansfield
3ef3ebfd6b Koenig - Move list creation from card menus to toolbar
refs https://github.com/TryGhost/Ghost/issues/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
2018-03-15 14:35:39 +00:00
Kevin Ansfield
b0ef0409df Fix linting error 2018-03-15 11:10:12 +00:00
Kevin Ansfield
49ff6ad6b6 Koenig - Fixed formatting being lost when deleting cards
refs https://github.com/TryGhost/Ghost/issues/9311
- when using <kbd>Backspace</kbd> to delete a card the formatting (eg, heading format) on the following section would be lost
- switched to using `editor.removeSection` and a cursor change to avoid the range style deletion stripping the formatting
2018-03-14 16:30:28 +00:00
Kevin Ansfield
6e5710364e Koenig - Fixed backspace not deleting empty para at beginning of doc
refs https://github.com/TryGhost/Ghost/issues/9311
- something that became apparent after adding the "<kbd>Enter</kbd> in post title adds blank paragraph" feature was that using that feature left you in a position where Backspace doesn't do what you expect - it does nothing rather than deleting the blank paragraph
- added logic to the `handleBackspaceKey` handler in `{{koenig-editor}}` to detect when backspace is pressed on a blank paragraph at the start of the doc so that we remove it then focus the title
2018-03-14 16:13:33 +00:00
Kevin Ansfield
a20f4080f6 Koenig - Fix error when inserting cards in certain circumstances
refs https://github.com/TryGhost/Ghost/issues/9311
- the card selection in `cursorDidChange` would sometimes fail because the selection would be attempted before the newly inserted card had been pushed on to the `componentCards` array. This was reliably triggered by adding a card to a blank header section via the /-menu
- scheduling the section `afterRender` ensures that the `willRender` hook has fired and populated the `componentCards` array before the selection occurs
2018-03-14 12:13:54 +00:00
Kevin Ansfield
1a673cfe99 Koenig - Allow blank paragraphs to be deleted with Delete
refs https://github.com/TryGhost/Ghost/issues/9311
- adjust our <kbd>Delete</kbd> card deletion logic to not fire if we're on a blank paragraph
- allows blank paragraphs between cards to be deleted, feels more natural
2018-03-14 11:01:28 +00:00
Kevin Ansfield
5d552202f6 Koenig - Image card
refs https://github.com/TryGhost/Ghost/issues/9311
- add actions for cursor movement and pass through to card components
    - `moveCursorToNextSection` deselects card and places cursor at beginning of next section, useful for caption inputs where <kbd>down arrow</kbd> or <kbd>right arrow</kbd> should move the cursor out of the input & card. Also creates an empty paragraph before moving the cursor if for some reason an empty paragraph doesn't exist after the last card in the doc
    - `moveCursorToPrevSection` deselects card and places cursor at end of previous section, useful for caption inputs where <kbd>up arrow</kbd> or <kbd>left arrow</kbd> should move the cursor out of the input & card
    - `addParagraphAfterCard` deselects card, creates a new paragraph after the card and moves the cursor to it. Useful for caption inputs where <kbd>enter</kbd> should have the same behaviour as if it was pressed whilst the card is selected
- modify `{{gh-uploader}}` so that it passes the FileList to it's `onStart` closure action. Useful for displaying previews when uploading images
- modify `{{koenig-card}}` toolbar display so that it can display text as well as icon buttons
- update `{{koenig-card-image}}` so that it has a full image uploader and caption input
2018-02-22 20:41:40 +00:00
Kevin Ansfield
fecbbd518c Koenig - Fixed more keyboard card selection bugs
refs https://github.com/TryGhost/Ghost/issues/9311
- removed most of the hairy logic in `cursorDidChange` around the cursor positioning changing between head and tail within a selected card in favour of ignoring all head/tail flip flops within a selected card section and a little extra logic in our <kbd>left arrow</kbd> key handler
2018-02-21 22:48:45 +00:00
Kevin Ansfield
5fa1b28a53 Koenig - Another fix for cards being deselected when clicking in edit mode
refs https://github.com/TryGhost/Ghost/issues/9311
- we added a guard for the caret moving from end to beginning of a card when clicking on a card whilst in edit mode in 26dd4ffb4a but it's also possible for clicks to cause the caret to move in the opposite direction
- update the guard in `cursorDidChange` to ignore the caret moving in either direction whilst a card is in edit mode
2018-02-20 15:34:09 +00:00
Kevin Ansfield
e2daf96014 Koenig - Allow blank paragraphs to be deleted with Backspace
refs https://github.com/TryGhost/Ghost/issues/9311
- adjust our backspace card deletion logic to not fire if we're on a blank paragraph
- allows blank paragraphs to be deleted, feels more natural
2018-02-15 16:31:51 +00:00
Kevin Ansfield
26dd4ffb4a Koenig - Fix cards being deselected when clicking in edit mode
refs https://github.com/TryGhost/Ghost/issues/9311
- there was an issue where clicking inside a card whilst it was in edit mode would cause the cursor position in the editor to change from the end of a card to the beginning which would re-run our card selection routine and de-selecting the card
- add a guard to the `cursorDidChange` method that looks for an end-to-beginning move whilst a card is in edit mode and ignores it
2018-02-15 15:52:08 +00:00
Kevin Ansfield
b3b07e488f Koenig - Fix sticky (+) button when clicking to select card
no issue
- if the (+) button was visible and you clicked on a card to select it the cursor moved but the (+) button remained because we weren't updating the `selectedRange` property
2018-02-15 15:02:37 +00:00
Kevin Ansfield
2e4990093f Koenig - Generic {{koenig-card}} container card component
refs https://github.com/TryGhost/Ghost/issues/9311
- initial CSS for container card outline, selection state, toolbar, etc
- adds `{{#koenig-card}}` component to be used inside of component card templates to handle the default card container HTML, mouse interactions, etc
- update `{{koenig-card-markdown}}` to use the new `{{koenig-card}}` component
  - add render/edit mode views
  - focus the textarea when entering edit mode
- updated `{{koenig-editor}}`
  - add <kbd>Cmd+Enter</kbd> command to put a selected card into edit mode
  - when inserting new cards put them into edit mode immediately
  - move edit/select methods out of actions and into normal methods so that timing is easier to reason about
  - skip `cursorDidChange` process when cursor changes as a result of a card selection, fixes issues with `selectCard` being triggered multiple times unexpectedly
2018-02-13 18:00:54 +00:00
Kevin Ansfield
4381c17216 Koenig - Card selection and deletion
refs https://github.com/TryGhost/Ghost/issues/9311
- cursor based card selection
- handling of delete/backspace when cards are involved
- add `cursorDidExitAtTop` closure action to `{{koenig-editor}}` to consolidate editor cursor behaviour in the editor
  - added extra behaviour for LEFT in editor and RIGHT in title to switch focus between title and editor
- fixed incorrect icon in the slash menu
2018-02-04 20:35:44 +01:00
Kevin Ansfield
6d4d6cbc51 Koenig - HTML card template
refs https://github.com/TryGhost/Ghost/issues/9311
- add a basic HTML card that renders a CodeMirror editor
- adjust styles so that CodeMirror styles for the markdown editor don't affect CodeMirror instances inside Koenig
2018-02-03 19:20:50 +01:00
Kevin Ansfield
d0ca47892a Koenig - Move list/card replacement actions into {{koenig-editor}} 2018-02-03 17:54:57 +01:00
Kevin Ansfield
2cef2a4f1e Koenig - Move to generic card names
refs https://github.com/TryGhost/Ghost/issues/9311
- use `hr`, `image`, and `markdown` as card names instead of codifying the `koenig-card-` prefix into the mobiledoc
2018-02-01 12:26:24 +01:00
Kevin Ansfield
07d6aee326 Koenig - Initial card support
refs https://github.com/TryGhost/Ghost/issues/9311
- use a similar approach as used in `ember-mobiledoc-editor` to render a div into the editor canvas then use Ember's `{{-in-element}}` helper as a wormhole to render an ember component card into the new div
- adds a `createComponentCard` util for setting up the necessary rendering boilerplate for Ember component cards
2018-01-30 15:18:08 +00:00
Kevin Ansfield
dec1250bbf Koenig - Added SHIFT+ENTER line break key command
refs https://github.com/TryGhost/Ghost/issues/9311
- pressing <kbd>Shift+Enter</kbd> will create a `soft-return` atom that adds a `<br>` element to the doc
- emulates many rich-text editors that have a similar functionality where it's desirable to add line breaks rather than starting new paragraphs
2018-01-30 10:58:28 +00:00
Kevin Ansfield
61cf4d46db Koenig reboot - rich text (#952)
refs https://github.com/TryGhost/Ghost/issues/9311

Koenig is being fully rebooted, first port of call is to focus on getting the rich-text only aspect of mobiledoc-kit working with our popup toolbar.

- renames old koenig implementation (used for reference, will eventually be deleted)
- new `{{koenig-editor}}` mobiledoc-kit component implementation based on ember-mobiledoc-editor
  - markdown text expansions
- new `{{gh-koenig-edtor}}` that wraps our title+editor and handles keyboard navigation between the two
  - clicks below content will focus the editor
- new `{{koenig-toolbar}}` component for the popup formatting toolbar with improved behaviour and simplified code
2018-01-30 10:01:07 +00:00