Commit Graph

224 Commits

Author SHA1 Message Date
Zimo
3a26ba018e Fixing negative margins of Koenig embeds 2018-11-20 11:12:15 +01:00
Kevin Ansfield
0d08c639fe 🐛 Fixed editor undo states for card contents (#1064)
refs https://github.com/TryGhost/Ghost/issues/10049
- update `{{koenig-card}}` component to compare payload values and create a snapshot when exiting edit mode for container cards (markdown, html, code)
- update image card to trigger snapshots on image upload/selection and width change
2018-11-06 14:43:19 +00:00
Kevin Ansfield
874ae6078b Fixed 'set on destroyed object' error in tests
no issue
- we were throttling word count updates but not taking into consideration the editor components could have been destroyed by the time the throttle timeout occurred
2018-09-24 11:09:19 +01:00
Kevin Ansfield
b50e7c3b67 🐛 Fixed broken editor state when deleting a selection containing cards
closes https://github.com/TryGhost/Ghost/issues/9852
- Ember was throwing an error because we weren't using `.set` to set properties on the editor component which halted execution whilst the component cards were being re-rendered
2018-09-17 11:48:13 +01:00
Kevin Ansfield
f11f6ef9b3 🐛 Fixed ` not triggering code text expansions on German keyboards (Win/macOS only) (#1042)
closes https://github.com/TryGhost/Ghost/issues/9825
- the <code>`</code> key on German keyboard layouts is a dead key and so does not trigger the typical keyboard events our editor relies on
- added custom keyboard event listeners to watch for specific keyboard event sequences triggered by using the dead key + spacebar to insert a <code>`</code>
  - trigger text input handlers when we detect a <code>`</code> insertion
  - Linux unfortunately does not trigger events that can be used to track the sequence so this will not work there although it is easier to set up keyboard layouts without dead keys on Linux
- moved modifier key tracking into global event handlers from ember event handlers
  - reduce confusion from duplicated event handling
  - allows modifier key handlers to fire when keys are pressed without the editor element having focus
2018-09-05 17:51:57 +01:00
Kevin Ansfield
bfe985abe2 Do not allow upload of invalid images to gallery
no issue
- added `onUploadStart` action to `{{gh-uploader}}` that is triggered when individual files start uploading
  - will not be triggered for any files that fail client-side validation
- changed `{{koenig-card-gallery}}` to only add images to the local gallery display when the uploader starts an upload
2018-08-31 12:01:08 +01:00
Kevin Ansfield
a11ccccae0 Updated gallery error message copy 2018-08-31 11:10:14 +01:00
Kevin Ansfield
ee7f8516c3 Refactored gallery card
no issue
- moved all payload building into single function
  - only put fully valid images into mobiledoc
- extracted image data reading and width/height reading into a separate function
- fixed re-ordering when deleting an image
2018-08-31 10:36:19 +01:00
Kevin Ansfield
08179545ab Added gallery card to the editor
no issue
- added gallery card (initial implementation)
    - supports upto 9 images in gallery
    - max 3 images per row
- fixed gh-uploaded error handling for generic errors
- ignore jsconfig.json
2018-08-30 17:48:20 +01:00
Zimo
8f9fec3cda Adding hover state for image placeholder 2018-08-27 13:56:21 +01:00
Kevin Ansfield
9c299b973a Koenig - Fixed missing borders on some embeds
refs https://github.com/TryGhost/Ghost/issues/9724
- removed 1px white border on embed card click overlay so that it doesn't cover borders used by certain embeds such as Instagram and Facebook posts
2018-08-20 13:34:45 +01:00
Zimo
81ef283c06 Replacing Facebook embed with Spotify 2018-08-15 18:11:16 +02:00
Kevin Ansfield
09fea26f60 Fix linting 2018-08-15 16:52:06 +01:00
Kevin Ansfield
8c2ff43707 🐛 Koenig - Fixed pasting of plain text
refs https://github.com/TryGhost/Ghost/issues/9724
- `formatMarkdown` was previously changed to return a SafeString but that meant any direct usage of the helper had to account for not dealing with a basic String type
- changed `formatMarkdown` to return a basic String
- modified helper usage of `{{sanitize-html}}` to use triple-curlies
2018-08-15 16:25:02 +01:00
Zimo
a7e9697eac Koenig - Minor design refinements
refs https://github.com/TryGhost/Ghost/issues/9724
- fixed Card menu plus icon's rounded edges
- decreased link toolbar appearance delay
- changing 'H'/'h' toolbar mapping to 'H2'/'H3' and harmonized title font size
2018-08-14 14:35:13 +01:00
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