Commit Graph

229 Commits

Author SHA1 Message Date
Kevin Ansfield
2dc916299b Koenig - Extract card caption input into component
refs https://github.com/TryGhost/Ghost/issues/9623
- add new `{{koenig-caption-input}}` component
- yield koenig-caption-input instance from the `{{koenig-card}}` component
- remove duplicated caption logic from image and embed cards
- remove placeholder when caption input has focus
2018-06-12 18:10:23 +01:00
Kevin Ansfield
a04adae8d2 Koenig - Embed card
refs https://github.com/TryGhost/Ghost/issues/9623
requires https://github.com/TryGhost/Ghost/pull/9666
- `{{koenig-card-embed}}`
    - URL input
    - perform oembed lookup & fetch on <kbd>Enter</kbd>
    - remove card if enter pressed with empty URL
    - show error message on server error
        - "retry" returns to input bar
        - "paste as link" removes card and outputs link
        - "X" removes card
    - force embedded <script> tags to run
    - wrap embed html with `.koenig-embed-{video,photo,rich}` class
- add embed cards to the (+) and /-menus
    - "section" support in the card menus
    - refactor to use single card menu map and content component for both menus
    - update /-menu keyboard movement to handle sections
- add parameter support to /-menu commands
  - `/embed {url}` will insert embed card and automatically fetch oembed for supplied url
2018-06-12 14:07:50 +01:00
Kevin Ansfield
4d27cdb3e9 🐛 Koenig - Disable Grammarly to fix high CPU usage
refs https://github.com/TryGhost/Ghost/issues/9623
- see mobiledoc-kit [caveats](https://github.com/bustle/mobiledoc-kit#caveats) and [associated grammarly issue](https://github.com/bustle/mobiledoc-kit/issues/422)
2018-06-11 18:48:43 +01:00
Zimo
de4d1420d6 Adding placeholder illustration for Koenig image empty state 2018-06-11 13:29:39 +02:00
Zimo
474ccaf51a Koenig - Night Shift support
refs https://github.com/TryGhost/Ghost/issues/9623
- bump `ghost-spirit` dependency to include dark mode support
- import Spirit's dark mode file in `app-dark.css`
2018-06-07 09:48:27 +01:00
Kevin Ansfield
5030b193eb 🐛 Koenig - Fixed scroll jump when card is selected
refs https://github.com/TryGhost/Ghost/issues/9623
- if a card is selected, skip the "keep cursor in view" routine
2018-06-06 14:51:52 +01:00
Zimo
2203834861 Adding embed card icons 2018-06-05 13:08:05 +02:00
Kevin Ansfield
ab5267ab87 Remove errant console.log 2018-06-01 18:17:09 +01:00
Kevin Ansfield
dc6064b567 Koenig - ^superscript^ and ~subscript~ text expansion support
refs https://github.com/TryGhost/Ghost/issues/9623
- added additional text expansions for `^sup^` and `~sub~` that also work inside of words
- added sub and sub expansions to the special formats list so that <kbd>Backspace</kbd> undoes the expansion
2018-06-01 17:53:15 +01:00
Kevin Ansfield
1ebdfac55d Koenig - Do not show image toolbar until image is uploaded
refs https://github.com/TryGhost/Ghost/issues/9623
- update `{{koenig-card}}` to show the toolbar immediately if it has changed
- update `{{koenig-card-image}}` to only add toolbar items when an image is present
2018-05-31 09:45:58 +01:00
Kevin Ansfield
dc2e85a6e0 Koenig - Drag & drop image card creation + upload
refs https://github.com/TryGhost/Ghost/issues/9623
- add `dropTargetSelector` property so that `{{koenig-editor}}` can attach drag/drop events to a larger area
- add drag/drop event handlers to `{{koenig-editor}}`
    - ignore drops that occur on cards in edit mode (cards should handle drop events themselves if required)
    - extract image files from the drop event and use them to create image cards
- extract image card creation from image files into a helper function
2018-05-30 17:14:39 +01:00
Kevin Ansfield
032a8def9e Koenig - Create image cards when pasting image files
refs https://github.com/TryGhost/Ghost/issues/9623
- detect pastes that contain image files and insert a card for each, setting `payload.files` to the `File` instance grabbed from the clipboard
- update the `addComponent` hook to ensure the `payload.files` array is preserved, browsers do not allow `File` instances to be copied
- update `{{koenig-card-image}}` to look for a `payload.files` value to auto-upload it via it's internal `{{gh-uploader}}`
- NOTE: browser support for accessing image files on paste varies:
    - Safari: will paste all images
    - Chrome: will only paste the first image
    - Firefox: will not paste any images
2018-05-29 15:23:50 +01:00
Kevin Ansfield
b0d778a5dc Koenig - Fixed "set on destroyed object" error
refs https://github.com/TryGhost/Ghost/issues/9623
- the `{{koenig-toolbar}} `didReceiveAttrs` hook was triggering an async action when the component was being destroyed so a guard is needed around the call to `set` in the `_hideToolbar` method
2018-05-28 16:54:16 +01:00
Kevin Ansfield
7846192ac3 🐛 Koenig - Fixed pasting content into a container card (HTML, markdown, code)
refs https://github.com/TryGhost/Ghost/issues/9623
- pasting inside a container card such as markdown or HTML would paste content into the card and duplicate that content outside of the card, exiting the card's edit mode in the process
- use the same "addressable" check that mobiledoc-kit's event manager uses
2018-05-28 11:28:25 +01:00
Kevin Ansfield
e68ec9d1df Koenig - Keep cursor on screen when typing or moving via keyboard (#1012)
refs https://github.com/TryGhost/Ghost/issues/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
2018-05-24 13:30:50 +01:00
Kevin Ansfield
d1ad53c149 Koenig - Allow > expansion to convert existing text to blockquotes
refs https://github.com/TryGhost/Ghost/issues/9623
- match `> ` behaviour to `# ` behaviour so entering it at the beginning of an existing paragraph will convert that paragraph to a blockquote
2018-05-23 16:49:18 +01:00
Kevin Ansfield
ebf43cc2f0 🎨 Koenig - Ease removal of formatting on first section
refs https://github.com/TryGhost/Ghost/issues/9623
- pressing <kbd>Backspace</kbd> on an empty paragraph when it is the first and only section will now remove any heading or blockquote formatting that paragraph had
2018-05-23 15:45:10 +01:00
Kevin Ansfield
7df4817447 Koenig - Fix card selection after exiting blank container card
refs https://github.com/TryGhost/Ghost/issues/9623
- it's necessary to pass a cursor movement to `deleteCard` for card selection after the delete to work
- default to `CURSOR_AFTER` as it's the more typical direction compared to `NO_CURSOR_MOVEMENT`
2018-05-23 15:12:30 +01:00
Kevin Ansfield
f9a1342d01 Koenig - Fixed card deselection when cursor exits top of doc
refs https://github.com/TryGhost/Ghost/issues/9623
- add a `exitCursorAtTop` action to `{{koenig-editor}}` that will deselect any cards before calling the closure action
- check if the we're on a card section when pressing UP or LEFT so that the cursor being before/after the card doesn't trip up the logic
2018-05-23 14:49:39 +01:00
Kevin Ansfield
15d3bafce0 Koenig - Remove trailing paragraph on paste workaround
refs https://github.com/TryGhost/Ghost/issues/9623
- now that we're not creating unnecessary undo states, pasting cards with an immediate Cmd+Z works fine so we don't need to create a trailing paragraph as a partial workaround
2018-05-23 14:25:54 +01:00
Kevin Ansfield
559dd29ba3 🐛 Koenig - Fixed creation of unnecessary undo states
refs https://github.com/TryGhost/Ghost/issues/9623
- only use `editor.run` calls when performing edits, do not use them when only moving the cursor/selection
2018-05-23 14:20:03 +01:00
Kevin Ansfield
56499cae5d Koenig - Fixed card creation from plus menu
refs 569a6942cd
- perform a check for a click originating on the plus menu in `{{koenig-card}}` to avoid an immediate deselection as soon as an editable card is created
- removed unnecessary `.koenig-plus-menu` class in favour of `[data-kg="plus-menu"]` selector
2018-05-23 14:11:42 +01:00
Kevin Ansfield
37abd3be15 Koenig - Fix card tests (missing action placeholders) 2018-05-23 11:59:20 +01:00
Kevin Ansfield
569a6942cd 🎨 Koenig - Exit edit mode of a card when clicking outside the card
refs https://github.com/TryGhost/Ghost/issues/9623
- register window click handler in `{{koenig-card}}` whilst card is in edit mode
  - deselect card when a click is registered
  - ignore any clicks inside the card
  - ignore any clicks that originate inside of a modal
- pass our `deselectCard` action through to all cards
2018-05-23 11:38:30 +01:00
Kevin Ansfield
bc3356051d Koenig - Fixed error on Cmd+K with no selection
refs https://github.com/TryGhost/Ghost/issues/9505
2018-05-22 14:01:03 +01:00
Kevin Ansfield
ac870e43bd Koenig - Grab image caption from <img><figcaption> when pasting
refs https://github.com/TryGhost/Ghost/issues/9623
- workaround to grab a `<figcaption>` for use in an image card in some cases
- will only work when an `<img>` tag is immediately followed by a `<figcaption>` tag in the parsed html
2018-05-18 14:26:26 +01:00
Kevin Ansfield
631edbe60a Koenig - Convert <pre><code> to code card
refs https://github.com/TryGhost/Ghost/issues/9623
- add parser plugin to match a `<pre>` with a nested `<code>` as it's first child and transform it into a code card
2018-05-18 14:06:35 +01:00
Kevin Ansfield
fb226ac956 Koenig - Convert pasted <img> and <hr> elements to cards
refs https://github.com/TryGhost/Ghost/issues/9623
- use our custom paste event to intercept and modify pasted HTML before passing to mobiledoc
  - wrap the html in a `<div>` so that all elements get parsed by mobiledoc-kit
- when pasting results in the last pasted section being a card, insert a blank paragraph
  - fixes immediate breaking of the undo stack
2018-05-18 13:55:46 +01:00
Kevin Ansfield
0fa0068f6a Koenig - Convert <br>s to soft-break atoms on paste
refs https://github.com/TryGhost/Ghost/issues/9623
- adds `parserPlugins` option with array of parser plugins that read node values and convert them when pasting
- converts `<br>` to a soft-break atom for line breaks
- removes leading newlines from text nodes to avoid leading spaces in the render output (common when pasting MD with line breaks)
2018-05-17 16:46:25 +01:00
Kevin Ansfield
e34c6a14c4 Koenig - Fixed header toggle via toolbar
refs https://github.com/TryGhost/Ghost/issues/9623
- header text expansion skip for headers with the same level didn't take into account that the toolbar should actually toggle the heading on/off
2018-05-17 15:00:43 +01:00
Kevin Ansfield
b9c81ac219 Koenig - Standardise <b> and <i> elements when pasting
refs https://github.com/TryGhost/Ghost/issues/9623
- use our paste handler to perform a replacement on any pasted HTML
  - `<b>` -> `<strong>`
  - `<i>` -> `<em>`
2018-05-17 14:42:20 +01:00
Kevin Ansfield
823f6afa80 Koenig - Fixed errors when dragging selection
refs https://github.com/TryGhost/Ghost/issues/9623
- catches and ignores `editor.positionAtPoint` TypeError due to not having a correct node value whilst dragging with a selection
- fixes error thrown from the triple-click handling which expected a value to always be present
2018-05-17 13:56:37 +01:00
Zimo
4909e6c2b3 Koenig - Added Code Block card to (+) and / menus
refs https://github.com/TryGhost/Ghost/issues/9623
- added code block card to (+) and / menus
- changed card row length to 3
- swapped html icon for code icon and added new html icon
2018-05-17 12:20:02 +01:00
Kevin Ansfield
a539f291d8 Koenig - Remove duplication in special format edit state toggling
refs https://github.com/TryGhost/Ghost/issues/9623
2018-05-17 10:47:44 +01:00
Kevin Ansfield
4c2dcc5354 Koenig - Fixed error when placing cursor on special formats after pasting
refs https://github.com/TryGhost/Ghost/issues/9623
- fixes `Maximum call stack size exceeded` error when you paste content containing `<code>` elements and then place the cursor at the end of one of those elements
  - this was occurring because the code in `inputModeDidChange()` was triggering another `inputModeDidChange() call
- use the private mobiledoc-kit methods to toggle editor state because we don't want to trigger `inputModeDidChange()` callbacks
- look at the editor state directly rather than going by what we _think_ the editor state should be based on the markers around the cursor
- fixes another subtle issue where after pasting if you placed the cursor at the end of the code format and started typing it would still be formatted as code - mobiledoc-kit has an odd behaviour where duplicate edit states for the markup are present so we have to loop over them rather than relying on a single `toggleMarkupState()` call
2018-05-16 17:21:34 +01:00
Kevin Ansfield
772675d294 Koenig - Parse pasted plain text as markdown
refs https://github.com/TryGhost/Ghost/issues/9623
- plain text that's pasted will be run through our markdown parser then mobiledoc-kit will perform it's usual rich-text paste handling on the resulting HTML
- add a <kbd>Cmd/Ctrl+V+Shift</kbd> escape valve that will skip markdown parsing so mobiledoc-kit's default plain text parsing is invoked
- will not work with IE or Edge <= 16 due to missing browser support for distinguishing plain text vs html pastes
2018-05-16 13:08:11 +01:00
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
8e2a622169 Koenig - Allow heading levels to be changed via markdown expansion
refs https://github.com/TryGhost/Ghost/issues/9623
- disable the default mobiledoc-kit heading text expansion and replace with our own that matches heading markdown at the beginning of existing text and will change the heading level of the existing text
2018-05-14 18:29:54 +01:00
Kevin Ansfield
1b02a63848 Koenig - Expand -- to en dash and --- to em dash
refs https://github.com/TryGhost/Ghost/issues/9623
- match `--` and `---` and convert if followed by a space or any character respectively
- include guards to ensure that expansion doesn't occur inside code blocks
2018-05-14 17:29:49 +01:00
Kevin Ansfield
d760e5633c Koenig - Fixed text deselection when toggling section formatting via toolbar
refs https://github.com/TryGhost/Ghost/issues/9623
- maintains easy reversibility by keeping text selected and toolbar shown in the same position to avoid jumping buttons when font size or other formatting changes
2018-05-14 15:53:34 +01:00
Kevin Ansfield
e9ead57da5 Koenig - Fixed deletion of / not closing the /-menu
refs https://github.com/TryGhost/Ghost/issues/9623
2018-05-14 15:48:29 +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
f03954679e Koenig - Fixed double-tap to select not immediately showing toolbar
refs https://github.com/TryGhost/Ghost/issues/9623
- keep a truthy "skip mouse move" flag around across re-triggers within the 50ms restart window to cater for slightly different mouse/selection event orders
- add a couple of guards to avoid triggering the toggle task unnecessarily
2018-05-14 14:52:40 +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
Zimo
f079ed15af Koenig - Refine card menu and fix toolbar tick color
refs https://github.com/TryGhost/Ghost/issues/9505
- card menu style refinements
- fix tick color and adding appear animation to toolbar
- bump Spirit dependency
2018-05-09 16:48:13 +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
Zimo
b4b85fba99 Koenig - Style refinements for card menu, toolbar, and link input
refs https://github.com/TryGhost/Ghost/issues/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
2018-05-08 18:04:56 +01:00
Peter Zimon
26aa2770ed Koenig - Made full width images work with closed sidebar (#1014)
refs https://github.com/TryGhost/Ghost/issues/9505
- use `ui` service to adjust full-width image styles then the side nav is open
2018-05-08 10:26:46 +01:00