Commit Graph

53 Commits

Author SHA1 Message Date
Kevin Ansfield
4463f975e3 Koenig - Unsplash integration
refs https://github.com/TryGhost/Ghost/issues/9724
- standardised `{{gh-unsplash}}` actions and action arguments to better represent a generic "image source"
- added `{{gh-unsplash searchTerm="ghosts"}}` parameter
- added `payload` param to `card` definitions used for plus/slash menus so that default payload params can be passed to cards
- added a concept of "image selectors" to image card
  - if a `payload.imageSelector` param is received by the card it will look it up in it's list of known selectors and display the appropriate image selection component
  - if the card was created with an image selector param and the image selector is closed without selecting an image then the card will be removed
- delete image cards during cleanup if they were created via selector but have no src
2018-08-10 18:11:35 +01:00
Zimo
7892e4901d Koenig - Updated menu icons
- changed icons for coloured set
- added Unsplash icon
- bumped Spirit for menu-related style updates
2018-08-10 11:18:02 +01:00
Kevin Ansfield
82dbf972a9 Koenig - Fix divider card text expansion
no issue
- re-org of the text-expansions code meant that the smart hyphens expansion was being picked up before the divider card expansion and blocking it
2018-08-08 15:52:13 +01:00
Kevin Ansfield
83924194f5 Koenig - Added rich-text support to captions
refs https://github.com/TryGhost/Ghost/issues/9724
- added `{{koenig-basic-html-input}}` component
  - uses a stripped down version of Koenig
  - supports all inline formatting that Koenig supports
  - supports inline text expansions
  - supports inline key commands
  - limited to a single paragraph
  - serialises and deserialises from HTML rather than mobiledoc
- updated `{{koenig-caption-input}}` to use `{{koenig-basic-html-input}}`
- updated image and embed cards to calculate word counts correctly for html captions
- bumped Spirit dependency to fix styling of toolbars within the editor canvas
- fixed positioning in toolbar components to account for `parentElement` not necessarily being the closest element to position against
2018-08-08 13:38:41 +01:00
Kevin Ansfield
f1beff3c03 Koenig - Support /image {image url} slash menu shortcut
refs https://github.com/TryGhost/Ghost/issues/9724
- add `src` param to the `image` card for use in the slash menu
- typing `/image http://example.com/image.jpeg` then pressing <kbd>Enter</kbd> will create an image card with the src pre-set
2018-08-01 14:17:09 +01:00
Kevin Ansfield
4cf9220ef4 🐛 Koenig - Fixed duplicate images when dropping image file on an image card
refs https://github.com/TryGhost/Ghost/issues/9724
- `card.handlesDragDrop` was never accessible, it would have had to be registered through `card.koenigOptions.handlesDragDrop` when the drop handling was first added
- as of cc2e20a486 properties on card components are directly accessible so we can use `card.component.handlesDragDrop` to guard against the editor handling drops on cards that handle their own drops
2018-08-01 12:36:02 +01:00
Kevin Ansfield
fc16a8f333 🐛 Koenig - Fixed Firefox cursor getting stuck on cards when pressing Up
refs https://github.com/TryGhost/Ghost/issues/9724
- Firefox has a bug that prevents the cursor from moving from one element to another when pressing <kbd>Up</kbd> in certain circumstances
- added workaround that replicates the default behaviour that all other browsers have so that <kbd>Up</kbd> can always move to the previous section
2018-07-23 13:45:49 +01:00
Kevin Ansfield
0bfe190bb3 Koenig - Implement full set of text editing shortcuts
refs https://github.com/TryGhost/Ghost/issues/9724
- <kbd>Ctrl+Alt+1</kbd> - Togggle heading level 1
- <kbd>Ctrl+Alt+2</kbd> - Togggle heading level 2
- <kbd>Ctrl+Alt+3</kbd> - Togggle heading level 3
- <kbd>Ctrl+Alt+4</kbd> - Togggle heading level 4
- <kbd>Ctrl+Alt+5</kbd> - Togggle heading level 5
- <kbd>Ctrl+Alt+6</kbd> - Togggle heading level 6
- <kbd>Ctrl/Cmd+H</kbd> - Cycle through heading levels 2-6
- <kbd>Ctrl+Q</kbd> - Toggle blockquote
- <kbd>Ctrl+L</kbd> - Toggle unordered list
- <kbd>Ctrl/Cmd+K</kbd> - Toggle link
- <kbd>Ctrl/Cmd+B</kbd> - Toggle bold
- <kbd>Ctrl/Cmd+I</kbd> - Toggle italic
- <kbd>Ctrl/Cmd+U</kbd> - Toggle underline
- <kbd>Ctrl+Alt+U</kbd> - Toggle strikethrough
- <kbd>Ctrl/Cmd+Shift+K</kbd> - Toggle code
2018-07-20 13:24:48 +01:00
Kevin Ansfield
a6686e9cef Koenig - Ensure Enter behaviour is consistent when a card is selected
refs https://github.com/TryGhost/Ghost/issues/9623
- clicking a card a second time while it is selected can move the invisible cursor to the beginning of a section in which case <kbd>Enter</kbd> would insert a blank paragraph above the card
- when <kbd>Enter</kbd> is pressed and a card is selected, move the cursor to the end of the card section without triggering our cursor change so that the default behaviour will always add a paragraph after the card
2018-06-20 13:20:49 +01:00
Kevin Ansfield
2699671506 🎨 Koenig - Split list when pressing Enter on a blank list item
refs https://github.com/TryGhost/Ghost/issues/9623
- override <kbd>Enter</kbd> behaviour when pressed on a blank list item mid-list
2018-06-19 13:09:46 +01:00
Kevin Ansfield
7bd22a3b87 🐛 Fixed backspace deleting words and rich-text paste collapsing paragraphs
refs https://github.com/TryGhost/Ghost/issues/9623
- switch to custom `mobiledoc-kit` build
  - fixes top-level elements not being run through parser plugins (https://github.com/bustle/mobiledoc-kit/pull/627)
  - fixes <kbd>Alt</kbd> getting stuck and causing <kbd>Backspace</kbd> to delete whole words (https://github.com/bustle/mobiledoc-kit/pull/626)
  - fixes error that can occur when a paste results in blank insert (https://github.com/bustle/mobiledoc-kit/pull/620)
- add new `figureToImageCard` parser
  - replaces hacky workaround to detect an image+figcaption inside the `imgToCard` parser plugin
- remove wrapping of html in a `<div>...</div>` when pasting
  - no longer necessary now that top-level elements are parsed
  - fixes rich-text pastes where multiple paragraphs would be collapsed into a single paragraph
2018-06-18 18:48:32 +01:00
Kevin Ansfield
9e3c5876ee Koenig - Fixed dash text expansions
refs https://github.com/TryGhost/Ghost/issues/9623
- ea2a6a09dc broke dash expansions because the list toggle was matching the `- ` before the dash text expansion could be triggered
- resolved by adding the missing beginning-of-string `^`
2018-06-15 15:43:00 +01:00
Kevin Ansfield
bc97cd39a8 🐛 Koenig - Fixed cursor jumping to title when pressing Up/Left on list items
refs https://github.com/TryGhost/Ghost/issues/9623
- update "exit cursor at top" logic so it doesn't look at the parent ListSection until the cursor has reached the first ListItem in a ListSection
2018-06-15 14:21:01 +01:00
Kevin Ansfield
ea2a6a09dc Koenig - Toggle list types using MD list syntax
refs https://github.com/TryGhost/Ghost/issues/9623
- toggle the list type (unordered vs ordered) when typing `- `, `* `, `1 `, or `1. ` at the beginning of a list item
2018-06-15 14:00:00 +01:00
Kevin Ansfield
54c3e1de66 Koenig - Toggle existing paragraphs into lists using MD list syntax
refs https://github.com/TryGhost/Ghost/issues/9623
- toggle a paragraph to a list when typing `- `, `* `, `1 `, or `1. ` at the beginning of the paragraph
2018-06-15 12:12:12 +01:00
Kevin Ansfield
1eaf85e5aa 🎨 Koenig - Keep posts free of blank cards
refs https://github.com/TryGhost/Ghost/issues/9623
- add new `deleteIfEmpty` option when defining cards
- add `.cleanup()` method to `{{koenig-editor}}` that will remove any blank cards
- pass `{{koenig-editor}}` instance up to the editor controller when it is initialised
- call `.cleanup()` in the editor controller when performing full saves, when leaving the editor with a draft, and when opening the editor with a draft
2018-06-14 16:55:02 +01:00
Kevin Ansfield
940e03d3d2 🐛 Koenig - Fixed jump to bottom of story when deleting a list
refs https://github.com/TryGhost/Ghost/issues/9623
- the `BACKSPACE` key command was checking to see if the current section is the first section but failed to take into account that lists are their own section lists
2018-06-14 13:09:49 +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
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
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
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
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
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
8f135264dc Koenig - Improve link text expansion matching
refs https://github.com/TryGhost/Ghost/issues/9505
- tightens up regex to ensure we're not matching unexpected chars earlier in the paragraph
2018-04-26 17:40:38 +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
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
945e8316a7 Koenig - Fixed _emphasis_ and link text expansions not cancelling
refs https://github.com/TryGhost/Ghost/issues/9505
- the `_` emphasis and link text expansions were toggling the wrong markup on completion
2018-04-18 10:17:13 +01:00
Kevin Ansfield
d54172172d Koenig - Change ~strike~ text expansion to ~~strike~~
refs https://github.com/TryGhost/Ghost/issues/9505
2018-04-12 12:40:15 +01:00
Kevin Ansfield
d87787c47c Koenig - Fix error on SHIFT+ENTER whilst a card is selected
refs https://github.com/TryGhost/Ghost/issues/9505
- a card section isn't markerable so a guard is needed to prevent inserting the soft-break atom
2018-04-10 15:34:12 +01:00
Kevin Ansfield
2c8a28f77a Koenig - Fixed markdown expansions not capturing 1 or 2 char markups
refs https://github.com/TryGhost/Ghost/issues/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
2018-04-10 15:04:18 +01:00
Kevin Ansfield
f18a23434f Koenig - Fixed trailing-spaces when using markdown text expansions
refs https://github.com/TryGhost/Ghost/issues/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
2018-04-03 13:43:08 +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
cc083ef93f Koenig - Improve MD text expansion behaviour
refs https://github.com/TryGhost/Ghost/issues/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
2018-03-15 17:13:50 +00: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
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
521b9dbb99 Koenig - Textarea-only markdown card
refs https://github.com/TryGhost/Ghost/issues/9311
- add `{{koenig-card-markdown}}` component that renders an auto expanding textarea with the markdown card value
- add `{{card-markdown}}` that is an alias of `{{koenig-card-markdown}}` for backwards compatibility - all of our pre-1.0 alpha cards and our current markdown implementation do not have the `koenig-` prefix in their card names
2018-01-31 08:32:27 +00:00
Kevin Ansfield
d25fb1597e Koenig - Display-only image card with markdown text expansion
refs https://github.com/TryGhost/Ghost/issues/9311
- adds the `koenig-card-image` card that renders an `<img>` element
- adds text expansion to convert markdown images into the new image card
2018-01-30 20:46:03 +00:00
Kevin Ansfield
3ac59e5ba8 Koenig - HR card with markdown text expansion
refs https://github.com/TryGhost/Ghost/issues/9311
- adds the `koenig-card-hr` card that renders a `<hr>` element
- adds text expansion to convert `---` into the new HR card
2018-01-30 15:19:30 +00:00