Commit Graph

241 Commits

Author SHA1 Message Date
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
Peter Zimon
b4ea1a59e2 Koenig - Design refinements (#1032)
refs https://github.com/TryGhost/Ghost/issues/9724
- made floating header and footer elements in Koenig opaque
- switched to filled toolbar icons + icon cleanup
- fixed Koenig placeholder image size in Firefox
- increased "wide" image width on smaller screens
- refined divider card margins
- fixed long links not wrapping
2018-08-08 13:14:02 +01:00
Kevin Ansfield
7b09fedae2 Koenig - Do not select embed card when auto-converting pasted URL
refs https://github.com/TryGhost/Ghost/issues/9724
- selecting the embed card as soon as it's created causes problems with the caption input grabbing focus which interferes with being able to continue typing
- if content exists after the paste move the cursor to the beginning of the next section, otherwise create a blank paragraph and move the cursor into that
2018-08-02 15:10:00 +01:00
Kevin Ansfield
d1ea14ab8d Koenig - Fixed embeds cards
no issue
- `set` call to remove `linkOnError` from the embed card payload was malformed
2018-08-02 14:39:31 +01:00
Kevin Ansfield
54cc17707f Koenig - Auto-convert URLs pasted on blank lines to embed cards
refs https://github.com/TryGhost/Ghost/issues/9724
- if a URL is pasted in a blank paragraph, insert an embed card configured to switch immediately to a link if the embed fails
- if <kbd>Shift</kbd> is pressed when pasting insert a linked URL with no auto-embed
- added `payload.linkOnError` handling to the embed card
  - if that option is set, immediately convert the embed card section to a linked URL on embed failure
  - skip adding an undo step when auto-converting to a URL so that no undo loop is created. Without this an undo would convert from link to embed card which would automatically look up the url then convert back to a link meaning it's impossible to undo back past the URL paste
  - ensure that the cursor position doesn't jump if the user has continued writing whilst the oembed lookup is in progress
2018-08-02 13:09:32 +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
f4a21bd1f6 🐛 Koenig - Fixed error when dropping an image before the editor has focus
refs https://github.com/TryGhost/Ghost/issues/9724
- adjust `insertImageCards()` to handle the editor not having an active section
- add `jumpToCard` option to `_scrollCursorIntoView()` so that we can scroll to a card when appropriate
- call `_scrollCursorIntoView()` after dropping images and creating cards
2018-08-01 10:00:05 +01:00
Peter Zimon
3bd8a1b3da Koenig - Design refinements (#1031)
refs https://github.com/TryGhost/Ghost/issues/9724
- fixed image card background colour
- made placeholder illustration for image cards work with Night Shift
- added viewbox prop to `summer.svg` illustration
- bumped ghost-spirit dependency
  - fixed link discoverability when spellcheck is on
  - fixed list spacing after headings 3-6 and refined list line heights
  - added quick transition to format toolbar chiclet
  - removed minimum width for image caption
  - fixed wide image width in Safari
2018-07-31 10:57:58 +01:00
Kevin Ansfield
821a5d38ab 🐛 Koenig - Fixed numpad Enter key not behaving like normal Enter key
refs https://github.com/TryGhost/Ghost/issues/9724
- `event.code` represents physical key location rather than the associated key value. Eg, `event.code` could be `NumpadEnter` rather than the expected `Enter` value
- ensure we use `event.key` anywhere that we are acting on the key value so that re-mapped or virtual keys still work as expected
2018-07-30 14:40:00 +01:00
Kevin Ansfield
f321f0c07b Koenig - Fixed error from plus menu when leaving editor
refs https://github.com/TryGhost/Ghost/issues/9724
- leaving the editor could result in the plus menu being removed from DOM before teardown has fully cleared up the event handlers resulting in an error being thrown in the mousemove handler where we assumed the element is present
2018-07-25 15:48:44 +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
fb6bf6b97d Koenig - Rename image card payload.imageStyle to payload.cardWidth (#1028)
requires https://github.com/TryGhost/Ghost/pull/9741
- using `payload.cardWidth` so that it's more generic than having separate width attributes for every card
2018-07-23 12:21:32 +01:00
Kevin Ansfield
cc2e20a486 Koenig - Added reading time and word count display
refs https://github.com/TryGhost/Ghost/issues/9724
- add `registerComponent` hook to cards so that `{{koenig-editor}}` can fetch properties from card components directly
- add word count and reading time utilities
- add throttled word count update routine to `{{koenig-editor}}` that walks all sections and counts text words or fetches word/image counts from card components
- add `wordCountDidChange` hook to `{{koenig-editor}}` so that word count + reading time can be exposed
- modify editor controller to update it's own word count property when koenig triggers it's action
- modified the editor template to show reading time + word count next to the post status
2018-07-20 15:53:21 +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
cc41f07213 🎨 Koenig - Allow Ctrl/Cmd+Enter to exit card edit mode
refs https://github.com/TryGhost/Ghost/issues/9724
- <kbd>Ctrl/Cmd+Enter</kbd> is the shortcut to enter edit mode of a card that has it
- adds <kbd>Ctrl/Cmd+Enter</kbd> as a shortcut to exit edit mode as an addition to <kbd>Escape</kbd> for easier toggling in/out of edit mode
2018-07-18 15:15:07 +01:00
Kevin Ansfield
235d71d6a0 🐛 Koenig - Fixed required double-click on (+) when cursor is not in same paragraph
refs https://github.com/TryGhost/Ghost/issues/9724
- ignore the range change which would otherwise close the menu when clicking a (+) next to a different paragraph then the one the cursor is currently on
2018-07-18 15:04:02 +01:00
Kevin Ansfield
e659dcdec7 🐛 Koenig - Prevent double-clicks to enter MD edit mode triggering toolbar buttons
refs https://github.com/TryGhost/Ghost/issues/9724
- add an overlay to the markdown card for 500ms when entering edit mode to stop extra clicks accidentally triggering toolbar buttons
2018-07-18 14:34:11 +01:00
Kevin Ansfield
0c35edd372 🐛 Koenig - Fixed Safari scrolling to bottom of post when using link input
refs https://github.com/TryGhost/Ghost/issues/9724
- `autofocus="true"` in Safari was overriding the custom focus method which keeps the scroll position locked
2018-07-18 12:54:09 +01:00
Kevin Ansfield
075037cadb Koenig - Fixed /-menu Enter card creation
refs https://github.com/TryGhost/Ghost/issues/9724
- eb865f841f introduced a bug because it expected an event param that is only available when clicking
- add guard to check for `event` presence before attempting to stop propagation
2018-07-18 11:41:01 +01:00
Kevin Ansfield
eb865f841f 🐛 Koenig - Fixed clicking certain icons in /-menu not creating cards
refs https://github.com/TryGhost/Ghost/issues/9724
- the click event from clicking on the /-menu items continued propagating after the card was initialised which meant it was picked up by the card as a "click off the card" so certain cards such as the Markdown/HTML cards would then remove themselves as if they were deselected with empty content
- changed the icon click handler to use the DOM `onclick` syntax so that the click can be captured immediately rather than waiting for it to bubble up to Ember's global event handler
- updated the /-menu `itemClicked` action to use the now-accessible MouseEvent to stop it propagating any further and triggering unwanted card behaviour
2018-07-17 17:22:28 +01:00
Kevin Ansfield
62d626a9fd 🐛 Koenig - Fixed "Retry" link in embed card error message
refs https://github.com/TryGhost/Ghost/issues/9724
- `element.contains(target)` was not reliably picking up the `<span>` inside the `<button>` element
- added a fallback that searches the event path for the card component's ID
2018-07-17 17:02:36 +01:00
Kevin Ansfield
8a76e5346a 🐛 Koenig - Fixed error when clicking embed icons in /-menu
refs https://github.com/TryGhost/Ghost/issues/9724
- `{{koenig-menu-content}}` does not pass any params through when an item is clicked
- move the `params` fetching via the query string from `_performAction()` to `actions.itemClicked` so that it works for both <kbd>Enter</kbd> and icon clicks
2018-07-17 14:32:49 +01:00
Kevin Ansfield
1027f85a68 🐛 Koenig - Fixed up/down cursor movement in Firefox and Edge
refs https://github.com/TryGhost/Ghost/issues/9724
- update Spirit so that we're not using `display: flex` on the `contenteditable` element
2018-07-12 16:42:14 +01:00
Kevin Ansfield
beab7a7a4f 🐛 Koenig - Fixed /-menu not working after the editor is reloaded
refs https://github.com/TryGhost/Ghost/issues/9724
- if the editor was reloaded by changing the post model either through clicking "New story" or using the search from the editor screen the /-menu would stop working
- keep track of the last seen `editor` instance inside `{{koenig-slash-menu}}` and register the `/` text input handler on the new editor instance if it changes
2018-07-11 15:08:51 +01:00
Kevin Ansfield
821696a7d7 🐛 Koenig - Fix Firefox adding "ArrowUp" or similar to caption fields
refs https://github.com/TryGhost/Ghost/issues/9623
- Firefox unlike other browsers triggers `keypress` events for non-printable characters
- use mobiledoc-kit's `Key` class to guard against adding non-printable key values to captions
2018-06-21 17:57:45 +01:00
Kevin Ansfield
06e6f42224 🐛 Koenig - Fixed caption/embed inputs in Firefox & Safari
refs https://github.com/TryGhost/Ghost/issues/9623
- disable `contenteditable` on the main editor element when an input in a card gains focus
    - Firefox chokes on inputs inside a `contenteditable` element
    - use a MutationObserver inside `{{koenig-card}}` to automatically add event handlers for focus/blur events so that each card is not required to set up handlers and enable/disable content editable manually
- bump Spirit dependency
    - remove `user-select: none` styling from `.form-text` for text inputs
    - fixes captions and embed inputs in Safari and improves behaviour in Firefox
- add a guard around `getSelection(0)` in the `_scrollCursorIntoView()` method to avoid Safari throwing errors
2018-06-21 15:47:50 +01:00
Kevin Ansfield
749839a8e1 🐛 Koenig - Fixed card click-to-deselect in Safari/Firefox
refs https://github.com/TryGhost/Ghost/issues/9623
- only Chrome exposes `MouseEvent.path` so use `MouseEvent.composedPath()` for Safari/FF support
2018-06-20 17:34:50 +01:00
Kevin Ansfield
e4dca1cb70 Koenig - Fixed HR card selection when clicking
refs https://github.com/TryGhost/Ghost/issues/9623
- clicks near the HR card when it was selected would trigger immediate deselection putting the cursor into a position where it was not possible to type
- update the guard in the click-to-deselect event handler to match any element contained by the editor rather than only clicks that are directly on the editor element
2018-06-20 16:54:43 +01:00
Kevin Ansfield
e79120c339 Koenig - Improved closing of (+) menu when cursor moves
refs https://github.com/TryGhost/Ghost/issues/9623
- close menu if it's open and the cursor position changes within the document
  - closes when you start typing rather than hiding text behind the menu
- watch for arrow keys and close the menu if pressed
  - closes when <kbd>Up</kbd> is pressed and the title is selected rather than the cursor being moved within the document
2018-06-20 15:45:43 +01:00
Kevin Ansfield
7ae1df7c8d Koenig - Lazy-click to edit on mouseup not mousedown
refs https://github.com/TryGhost/Ghost/issues/9623
- move lazy-click handling to a mouseup handler instead of mousedown in `{{koenig-card}}`
- ensure that we don't trigger edit mode on the initial mouseup after a mousedown event has selected the card
2018-06-20 15:00:07 +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
2fd9b79102 Koenig - Prevent rendered MD links being clickable
refs https://github.com/TryGhost/Ghost/issues/9623
- add an overlay to the rendered MD card so that links aren't clickable
2018-06-20 12:43:51 +01:00
Kevin Ansfield
bd27295ede Koenig - Added drag-n-drop upload/replace support in image card
refs https://github.com/TryGhost/Ghost/issues/9623
- do not process drop in `{{koenig-editor}}` if the drop happened on a card and the card's  `handlesDragDrop` property is true
- allow `dragover` events on cards to bubble up to Ember's event handler in `{{koenig-editor}}`
- handle drag/drop in `{{koenig-card-image}}`
    - show different overlays when dragging files over the card to indicate an upload or replace action
    - start upload when a file is dropped on the card
2018-06-20 12:34:30 +01:00
Kevin Ansfield
d030e7462c 🐛 Koenig - Fixed placement of dropped images
refs https://github.com/TryGhost/Ghost/issues/9623
- ensure images are placed where the cursor is when dropping or pasting images
- fixed errors when dropping/pasting images into a list
2018-06-19 14:42:24 +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
cf572e3508 Koenig - Fix misaligned toolbar arrow in Night Shift
refs https://github.com/TryGhost/Ghost/issues/9623
2018-06-15 10:35:31 +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
1133370568 Koenig - Deselect cards when a click happens outside of the editor canvas
refs https://github.com/TryGhost/Ghost/issues/9623
- move click handler registration from `onEnterEdit` to `onSelect`
- add guard against deselecting for clicks on the editor canvas
  - prevents card being deselected when the click would have placed the cursor in a position that selected the card
  - requires editor instance to be passed through to `{{koenig-card}}` in all card components
2018-06-14 12:21:22 +01:00
Kevin Ansfield
36b4727371 🐛 Koenig - Fix embedding of multiple FB Videos
refs https://github.com/TryGhost/Ghost/issues/9623
- wrap all embeds in an `<iframe>` so that their scripts are isolated (fixes FB Video)
- add `MutationObserver` implementation to adjust iframe height as embed's content is loaded
- add `noframe.js` to resize embedded iframes such as YouTube videos
2018-06-13 17:13:33 +01:00
Kevin Ansfield
49d2ed2fb4 🎨 Koenig - Focus URL input after creating embed card
refs https://github.com/TryGhost/Ghost/issues/9623
2018-06-13 11:14:34 +01:00
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
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
Kevin Ansfield
5adbb9b665 Koenig - Fixed HTML card init error
no issue
- `payload.set` is not always a method because mobiledoc-kit can give us POJOs
2018-05-07 15:40:11 +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