Commit Graph

45 Commits

Author SHA1 Message Date
Kevin Ansfield
ab53c29aea Koenig - Initial code card with MD expansion
refs https://github.com/TryGhost/Ghost/issues/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
2018-05-15 15:26:34 +01:00
Kevin Ansfield
5e3553e039 Koenig - Strip all formatting except links when converting to a heading
refs https://github.com/TryGhost/Ghost/issues/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
2018-05-15 12:32:44 +01:00
Kevin Ansfield
505aee4dac Koenig - Fix triple-click select adding formatting to following paragraph
refs https://github.com/TryGhost/Ghost/issues/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
2018-05-14 15:13:47 +01:00
Kevin Ansfield
e545161ed3 Koenig - Extract key commands out of {{koenig-editor}}
refs https://github.com/TryGhost/Ghost/issues/9505
- standardises on a single place for key command handlers
- mark re-used methods as public API rather than private
2018-05-09 18:11:22 +01:00
Kevin Ansfield
4753f92fe1 Koenig - Fix error on backspace with heading as first section 2018-05-09 10:23:30 +01:00
Kevin Ansfield
e8fdc4ca6f Koenig - Handle deletion of last card with no other sections
refs https://github.com/TryGhost/Ghost/issues/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
2018-05-08 18:17:30 +01:00
Kevin Ansfield
9a68dca80e Remove more import Ember via module imports
refs https://github.com/TryGhost/Ghost/issues/8927
- removes usage of `Ember.testing`
- removes usage of `Ember.uuid`
- removes usage of `Ember.Debug.registerWarnHandler`
2018-05-03 17:52:39 +01:00
Kevin Ansfield
1096e8c3d2 Koenig - Remove reliance on CSS class selectors
no issue
- switch to using data attributes instead of class names to target elements to avoid problems if CSS class names change or are removed
2018-05-02 17:31:17 +01:00
Zimo
4c05d618bd Koenig - Replace custom CSS classes with Spirit
no issue
- Koenig container styles for Spirit
- Applying Spirit styles to card menu
- Applying Spirit styles to generic cards
- Replacing icon styles with Spirit
- Fix slash menu selected state
- Cleanup of unused files + fix empty HTML
2018-05-02 15:54:22 +01:00
Kevin Ansfield
135d550c8a Koenig - Switch this.get for ES5 getters
no issue
- Ember 3.1 adds support for ES5 getters to replace (mostly) the need for `this.get` - https://www.emberjs.com/blog/2018/04/13/ember-3-1-released.html#toc_es5-getters-for-computed-properties-2-of-4
- updating Koenig now because it's a fairly isolated part of Ghost-Admin and a good playground for new standards that we can migrate to in the main codebase
2018-05-01 17:13:53 +01:00
Kevin Ansfield
26e70e86ea Koenig - Sticky card icons (#1013)
refs https://github.com/TryGhost/Ghost/issues/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
2018-05-01 15:55:51 +01:00
Kevin Ansfield
8dd8257bf7 Koenig - Fixed error on Enter if card is selected
refs https://github.com/TryGhost/Ghost/issues/9505
- depending on the location of the caret around the selected card <kbd>Enter</kbd> could throw an error due to the assumption of a `tagName` property in the enter-at-start-of-header handling
2018-04-26 17:49:14 +01:00
Kevin Ansfield
1a2e345957 Koenig - Ctrl/Cmd+K shortcut has same behaviour as toolbar link button
no issue
- override mobiledoc-kit's default <kbd>Ctrl/Cmd+K</kbd> shortcut to trigger our own link editing component
2018-04-26 17:04:40 +01:00
Kevin Ansfield
f2736be430 Koenig - Fix divider card insertion
refs https://github.com/TryGhost/Ghost/issues/9505
- ensure we select the next section when inserting a card
- remove duplicated card insertion logic by passing the Koenig instance to our text expansion helpers so that they can call actions
2018-04-25 13:12:59 +01:00
Kevin Ansfield
55645e9dd5 Koenig - Increase undo depth to 50
refs https://github.com/TryGhost/Ghost/issues/9505
2018-04-25 12:46:50 +01:00
Kevin Ansfield
dcd76b5a5e Koenig - Only deselect cards on cursor changes within the doc
refs https://github.com/TryGhost/Ghost/issues/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
2018-04-20 15:43:44 +01:00
Kevin Ansfield
77fa4439de Koenig - Add card options for automatic edit/select after insert
no issue
- allows specifying Koenig-specific card options via `createComponentCard`
- respect `hasEditMode` and `selectAfterInsert` options when inserting cards via the (+) and / menus
- do not select divider card after insertion
2018-04-18 10:52:49 +01:00
Kevin Ansfield
f5fb674804 Koenig - Apply link to selected text when pasting a URL
refs https://github.com/TryGhost/Ghost/issues/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`
2018-04-13 17:53:40 +01:00
Kevin Ansfield
8d0050df67 Koenig - Enter/Backspace at beginning of heading moves heading
refs https://github.com/TryGhost/Ghost/issues/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
2018-04-13 16:15:43 +01:00
Kevin Ansfield
30a61226f8 Koenig - Backspace undoes code/strike text expansions
refs https://github.com/TryGhost/Ghost/issues/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
2018-04-12 17:20:27 +01:00
Kevin Ansfield
801c73dae6 Koenig - Disable dragging of text within the editor
refs https://github.com/TryGhost/Ghost/issues/9505
- disable all drags that start within the editor, prevents hectic behaviour when selecting and dragging text
2018-04-12 11:14:47 +01:00
Kevin Ansfield
583b2e47d8 Koenig - Link hover toolbar
refs https://github.com/TryGhost/Ghost/issues/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
2018-04-11 18:42:27 +01:00
Kevin Ansfield
d6a6fc3d7c Koenig - Fixed UP or LEFT on a blank list item jumping cursor to title
refs https://github.com/TryGhost/Ghost/issues/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
2018-04-10 11:26:22 +01:00
Kevin Ansfield
4be392ef16 Koenig - Link creation/editing via formatting toolbar
refs https://github.com/TryGhost/Ghost/issues/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
2018-04-06 17:49:16 +01:00
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