Commit Graph

292 Commits

Author SHA1 Message Date
Kevin Ansfield
39bcc841a6 🎨 Koenig - Added paste-url-over-selection link creation to caption inputs
refs https://github.com/TryGhost/Ghost/issues/9724
- the "paste url on a selection to make it a link" feature from the main editor was missing in caption inputs
- copied functionality across (shared functionality needs extracting at some point)
2018-08-13 10:59:13 +01:00
Kevin Ansfield
22d07c9692 🐛 Koenig - Fixed pasting of rich-text image captions losing formatting
refs https://github.com/TryGhost/Ghost/issues/9724
- caption payload changed from `textContent` to a cleaned `innerHTML` in our `figureToImageCard` parser plugin
2018-08-13 10:41:01 +01:00
Kevin Ansfield
e082d40d56 🐛 Koenig - Fixed rich-text captions sometimes losing spaces
refs https://github.com/TryGhost/Ghost/issues/9724
- `clean-basic-html` was being overzealous with it's empty element removal, often contenteditable (especially when pasting) will result in HTML such as `<span>&nbsp;</span>` which was being completely removed
- if an empty element has any spaces in it, replace the element with a textNode containing a single space
2018-08-13 10:37:45 +01:00
Kevin Ansfield
61ad09cbc4 🐛 Koenig - Fixed missing alt/title attributes when pasting markdown or HTML
refs https://github.com/TryGhost/Ghost/issues/9724
- capture the `alt` and `title` attributes in our figure and image parser plugins
2018-08-13 09:50:56 +01:00
Kevin Ansfield
cb7a038b08 Koenig - Fixed backspace not removing card after inserting Unsplash image
refs https://github.com/TryGhost/Ghost/issues/9724
- focus was not being returned to the editor after the Unsplash modal was closed so although the image card looked selected the editor was not responding to any key commands
2018-08-11 18:30:59 +01:00
Kevin Ansfield
c33a0c23bc Koenig - Prevent "Enter" being inserted into captions
refs https://github.com/TryGhost/Ghost/issues/9724
- mobiledoc-kit's `key.isPrintable()` returns true for <kbd>Enter</kbd> but in this instance we don't want to capture newlines as printable chars
- swapped insertion of `event.key` for `key.toString()` for better handling of named keys that output characters (eg. when `event.key` === `Enter` which prints `\n`)
2018-08-11 18:26:30 +01:00
Kevin Ansfield
6943e1d27a Koenig - Fixed .cleanup when called during editor initialisation
refs https://github.com/TryGhost/Ghost/issues/9724
- we call `koenig.cleanup` when setting a post in the editor controller but the call will happen before `componentCards` has been populated so none of our "delete if empty" routines were being run
- calls to `.cleanup` now schedule the cleanup after the next editor render which should mean cards are populated before we try to remove them
2018-08-10 18:11:35 +01:00
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
359fcb0756 Koenig - Pass html card content through sanitiser
refs https://github.com/TryGhost/Ghost/issues/9724
- extract html sanitisation into a Koenig helper `{{sanitise-html}}` (all markdown handling will eventually move into Koenig too)
- render sanitised html in the html card
2018-08-09 14:59:03 +01:00
Kevin Ansfield
9832414374 Fixed linting 2018-08-09 10:18:45 +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
fe13a46273 Koenig - Allow clicks on rich-text captions to place cursor immediately
refs https://github.com/TryGhost/Ghost/issues/9724
- add a `data-kg-allow-clickthrough` attribute so that it's possible to explicitly allow non-input elements to be clicked immediately when clicking on a card
2018-08-08 15:48:31 +01:00
Kevin Ansfield
fbcc320f54 Koenig - Fixed broken styles
no issue
- bump `ghost-spirit` version to fix selectors
2018-08-08 14:45:45 +01:00
Zimo
115a9ce554 Fixing icon style for text toolbar 2018-08-08 15:29:33 +02:00
Kevin Ansfield
cff6789a35 Koenig - Fixed error in {{clean-basic-html}} when passed null/undefined
no issue
- default param was not protecting against null value being passed via helper params
2018-08-08 13:50:42 +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
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