Commit Graph

8167 Commits

Author SHA1 Message Date
Kevin Ansfield
cbdf3bfa28 Added "Button" card to the editor
refs https://github.com/TryGhost/Team/issues/1210

The button card lets you add a center or left-aligned button-styled link to your posts.
2021-12-01 12:01:46 +00:00
Kevin Ansfield
84b8d1be3b Moved cmd+shift+p shortcut handling into <GhPublishmenu>
refs https://github.com/TryGhost/Team/issues/1169

We want all publish actions to trigger a confirmation modal. Currently that confirmation modal is controlled by `<GhPublishmenu>` which made it difficult to use from the route-induced publish shortcut.

- removed old shortcut mixin approach from the editor route
- added modern keyboard handler to a hidden element that is rendered any time the publish menu is present
2021-12-01 11:51:10 +00:00
Sanne de Vries
80148c64db Updated file card icon in cardmenu 2021-12-01 10:29:17 +00:00
Rishabh
e0eff4436c Updated audio card with basic upload behavior
refs https://github.com/TryGhost/Team/issues/1230

- adds thumbnail upload on audio card
- cleans up card design in edit mode
2021-12-01 14:34:40 +05:30
Rishabh
1b4c556837 Extended uploader component to take custom request method
no refs

By default, the uploader component was always using the `post` method to make upload calls for the files. Since some usecases like uploading media thumbnails need a different request method like `put`, this change allows overriding the request method used in upload.
2021-12-01 14:34:40 +05:30
Peter Zimon
fecbbdd2e7 Updated button URL suggestion copy 2021-11-30 17:10:24 -04:00
Peter Zimon
0a700cd10a Gif browser UI refinements 2021-11-30 17:07:07 -04:00
Kevin Ansfield
927a977257 Fixed focus not fully returning to editor after pressing escape in caption input
no issue

- forced card deselection+reselection so that keys such as `Enter` and `Backspace` work as expected when the card is shown as selected
2021-11-30 18:06:17 +00:00
Kevin Ansfield
ba532aa815 Reverted insertion of blank paragraph when selecting unsplash/gif image
refs e419e4e99f

- the behaviour wasn't desirable in all cases, reverting to the previous behaviour of selecting the card after image selection
2021-11-30 18:02:58 +00:00
Kevin Ansfield
024b27c8dd Fixed error when pressing enter inside a caption
refs e419e4e99f

- added an optional options param to `addParagraphAfterCard` but was missing a default value meaning the destructuring errored when the param wasn't provided
2021-11-30 18:02:58 +00:00
Thibaut Patel
1dac565dbc Fixed the product card bold/italic rendering
refs https://github.com/TryGhost/Team/issues/1233

- The content is html so it shouldn't be escaped by handlebars
2021-11-30 18:04:44 +01:00
Thibaut Patel
fc208558dd Added a star-rating input for the product card
refs https://github.com/TryGhost/Team/issues/1245

- This is a proof-of-concept as there are so many ways to implement a star-rating component
- The component is only available when editing the product card
- Uses the unicode star character: ★
- The inspiration is an old article from Lea Verou: https://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/ (minus the clever use of :not(:checked) on something that's not an input to filter-out IE)
- There is currently no way to remove the star rating as it'll get designed this week
2021-11-30 18:02:44 +01:00
djordje vlaisavljevic
f07e5b8c9c Updated product card editor look for 🛹 refs https://github.com/TryGhost/Team/issues/1233 2021-11-30 17:32:02 +01:00
Sanne de Vries
b3e84bfbd8 Updated media card icons in cardmenu 2021-11-30 16:01:40 +00:00
Kevin Ansfield
691308c34e Fixed video card settings panel position when card width changes
closes https://github.com/TryGhost/Team/issues/1244

- moved the `<KoenigSettingsPanel>` usage outside of the `<KoenigCard>` contents so it gets positioned relative to the outer card container rather than the inner card container so it's not affected by the inner card changing width/breaking out of the outer container
2021-11-30 15:32:21 +00:00
Kevin Ansfield
e419e4e99f Added blank paragraph insertion when selecting unsplash/gif image
refs https://github.com/TryGhost/Team/issues/1225

- provides a more obvious continuation point after selecting an image
- added `scrollIntoView` option to `addParagraphAfterCard()` because for large images the cursor in the new paragraph could be pushed out of the visible area
2021-11-30 15:05:41 +00:00
Kevin Ansfield
8e66f6ead5 Fixed editor not having focus after selecting an unsplash/gif image
refs https://github.com/TryGhost/Team/issues/1225

After selecting an image you were left in a state where it looked like the image card is inserted and selected but pressing Cmd+Z, Delete, Enter, etc had no effect.

- added a manual deselect/reselect of the card to make sure it's properly selected and editor has focus
- added a scrollToCard call so the newly inserted card position feels more natural
2021-11-30 13:06:57 +00:00
Kevin Ansfield
9223d0237c Added scroll-into-view behavior when opening gif selector
refs https://github.com/TryGhost/Team/issues/1225

When the gif selector is activated we want to scroll as much of the picker into view as possible.

- updated `scroll-into-view` modifier so it can work on bounding rects as well as offsets for those situations where a scroll parent is not the offset parent
  - only implemented "off bottom" behavior for now as that's all we need for this use-case
  - if the scroll adjustment would mean the top is cut off we readjust so that the top of the element is always visible
2021-11-30 12:51:56 +00:00
Kevin Ansfield
79d9ea82d9 Changed tenor config API key name
refs https://github.com/TryGhost/Team/issues/1237#issuecomment-981770688

- API key names for external services now follow a standard pattern
  - top-level key of the service name
  - public/private and read/write perms inside the name, eg. `publicReadOnlyApiKey`
- updated test to match expected API key name
2021-11-30 11:29:16 +00:00
Kevin Ansfield
506d925462 Fixed syntax error
refs 5b90fe87ad

- closing bracket was accidentally deleted in final post-push cleanup
2021-11-30 10:59:37 +00:00
Kevin Ansfield
5b90fe87ad Adjusted keyboard nav in gif selector to reduce vertical scroll jumps
refs https://github.com/TryGhost/Team/issues/1225

- `TAB` / `SHIFT+TAB` now cycle through gifs in the search return order. It means the highlight gif will not always be in the next column over but it drastically reduces the vertical scroll jumping
- `LEFT` / `RIGHT` now select the gif to the left/right that visually lines up with the top third of the currently highlighted gif and will stop at the grid edges. The result is `UP` / `DOWN` / `LEFT` / `RIGHT` act more like spatial navigation with no unexpected scroll jumps
- switching to only storing the highlighted gif and relying on indexes added to each gif by the `tenor` service when assigning to columns means that column number changes when resizing the viewport are automatically handled
2021-11-30 10:52:47 +00:00
Rishabh
a45e345a95 Added basic version for audio card UI
refs https://github.com/TryGhost/Team/issues/1230

- adds basic audio card edit mode UI with upload functionality
2021-11-30 13:52:14 +05:30
Renovate Bot
5f9d091e9a Update dependency eslint-plugin-ghost to v2.9.0 2021-11-29 20:30:16 +00:00
Kevin Ansfield
fccfcc3320 Added scroll-into-view behavior for highlighted gifs
refs https://github.com/TryGhost/Team/issues/1225

- added `scroll-into-view` modifier that will scroll an element into view putting it at the top or bottom of the viewport depending on which direction scroll is required
- used the `scroll-into-view` modifier to scroll the highlighted gif into view
2021-11-29 19:33:35 +00:00
Kevin Ansfield
66e6502cd2 Added first iteration of gif selector keyboard navigation
refs https://github.com/TryGhost/Team/issues/1225

Behaviour:
- `TAB`
  - highlights first gif if pressed whist search has focus
  - moves highlight to right, wrapping to next row, stops at final gif
- `SHIFT+TAB`
  - moves highlight to the left, wrapping to previous row
  - focuses the search bar if pressed whilst first gif is highlighted
- `ENTER`
  - highlights first gif if pressed whilst search has focus
  - inserts the highlighted gif
- `UP`
  - moves highlight up through current column
  - focuses the search bar if pressed when gif in top row is highlighted
- `DOWN`
  - highlights first gif if pressed whilst search has focus
  - moves highlight down through current column, stops at final gif in column
- `LEFT`
  - moves highlight to the left, wrapping to previous row
  - focuses the search bar if pressed whilst first gif is highlighted
- `RIGHT`
  - moves highlight to the right, wrapping to next row, stops at final gif
2021-11-29 18:28:19 +00:00
Kevin Ansfield
aa9a9c9598 Removed unused tenor components from earlier iterations
refs https://github.com/TryGhost/Team/issues/1225

- iterations of earlier approaches (modal-image-selector, and kg-media-selector) for the gif selector were kept around whilst we narrowed down the interaction patterns, we've settled on the inline-image-selector pattern introduced in 3f3b66b668 meaning the others are no longer needed
2021-11-29 18:28:19 +00:00
djordje vlaisavljevic
92165f56d2 Added initial Product card editor styles refs https://github.com/TryGhost/Team/issues/1233 2021-11-29 19:22:53 +01:00
Thibaut Patel
ad90ad0236 Updated the product card first version
refs https://github.com/TryGhost/Team/issues/1233

- added a way to remove the product image
2021-11-29 18:29:33 +01:00
Thibaut Patel
93dba3cb9a Updated the first version of the product card
refs https://github.com/TryGhost/Team/issues/1233

- Moved to in-line editing for the title/description
- Only the button is clickable. The button dissapears if the text/href isn't defined
- Added an image (the image can't be deleted for now)
2021-11-29 17:50:56 +01:00
Kevin Ansfield
09cae883a8 Added drag/drop and paste support for video files
refs https://github.com/TryGhost/Team/issues/1229

- generalized `insertImageCards()` to `insertCardsFromFiles()` and added support for video cards
- added `canInsertCardsFromFiles()` function so the editor can check before starting an editor run loop and generating an undo point
2021-11-29 13:38:31 +00:00
Kevin Ansfield
7e4a277163 Extracted insertImageCards function into utils file
no issue

- preparation for adding additional files->cards utility functions for video/audio/file cards
2021-11-29 13:13:07 +00:00
Kevin Ansfield
d3bd7e8767 Added mimeType to video metadata extraction
refs https://github.com/TryGhost/Team/issues/1229

- `mimeType` was specified in the payload but it had been missed when extracting/setting the video metadata
2021-11-29 13:09:39 +00:00
renovate[bot]
765ce05277 Update dependency ember-assign-helper to v0.4.0 (#2158)
Co-authored-by: Renovate Bot <bot@renovateapp.com>
2021-11-29 12:50:07 +00:00
renovate[bot]
16e4381e59 Update dependency @joeattardi/emoji-button to v4.6.2 (#2156)
Co-authored-by: Renovate Bot <bot@renovateapp.com>
2021-11-29 12:49:23 +00:00
renovate[bot]
6539bd4c46 Update dependency @tryghost/helpers to v1.1.54 (#2147)
Co-authored-by: Renovate Bot <bot@renovateapp.com>
2021-11-29 12:48:46 +00:00
Kevin Ansfield
01e698f42f Added copy/paste support for alternative blockquote styles
refs https://github.com/TryGhost/Team/issues/1239

- bumps `@tryghost/kg-parser-plugins` to support transforming `<blockquote class="kg-blockquote-alt">` to an `aside` section when copy/pasting from rendered front-end html
- bumped `@tryghost/kg-clean-basic-html` to avoid referencing multiple versions in yarn.lock
2021-11-29 11:46:53 +00:00
Kevin Ansfield
7bbe83786d Removed empty card test files 2021-11-29 09:42:14 +00:00
Kevin Ansfield
3231abd0ae Added beginnings of the video card
refs https://github.com/TryGhost/Team/issues/1229

- mostly mirrors image card functionality but rebuilt with more modern syntax
- when uploading a video the size and duration is extracted along with a screen capture of the video from 0.5s in, the screen capture is uploaded once the video finishes because we need to use the uploaded video url as a reference to attach it as a thumbnail via the API
- the captured screenshot is currently what's shown in the card

To be implemented:
- "incomplete" state when video has been uploaded but not a thumbnail
- uploader in settings panel to change the video thumbnail
- play button overlay _or_ switch to `<video>` so it can be previewed
2021-11-29 09:28:10 +00:00
Renovate Bot
703ee85a7c Lock file maintenance 2021-11-29 00:41:37 +00:00
Daniel Lockyer
4f184445c3 v4.24.0 2021-11-26 16:00:26 +00:00
Renovate Bot
8bfcbf1331 Update dependency eslint-plugin-ghost to v2.8.0 2021-11-25 17:15:00 +00:00
Kevin Ansfield
30b9718359 Added insertOnSpace attribute to card definitions
refs https://github.com/TryGhost/Team/issues/1225

- if set, typing `/card-name<space>` will instantly insert the card. Useful for cards that will trigger a media browser or similar where continuing to type will search with card-specific autocomplete
2021-11-25 16:13:55 +00:00
Peter Zimon
7dcb11e741 GIF browser refinements 2021-11-25 13:22:27 +01:00
Daniel Lockyer
551e26b895 Merged v4.23.0 into main
v4.23.0
2021-11-25 12:17:20 +01:00
Daniel Lockyer
68372746a6 v4.23.0 2021-11-25 11:16:29 +00:00
Rishabh
90bc78d0be Updated name validation for offer to restrict to 40 chars
refs https://github.com/TryGhost/Team/issues/1236

Stripe allows coupon names to be only upto 40 chars long, while Ghost allowed them to be 191 chars. This change updates the admin validation to restrict name to 40 chars to match Stripe limit
2021-11-25 11:37:35 +01:00
Kevin Ansfield
91191fea48 Added toggling between blockquote/aside/p via quote toolbar button
refs https://github.com/TryGhost/Team/issues/1239

- added new action for toggling quote sections that will loop through blockquote/aside/p when clicked
- copied `kg-quote.svg` to `kg-quote-2.svg` ready for alternate icon designs
2021-11-25 10:22:44 +00:00
Kevin Ansfield
7ff73753c8 🐛 Fixed /unsplash search term not including all words
no issue

- card definitions allow multiple params split by spaces in /menu commands but that meant for search terms that included spaces only the first word was being captured
- updated the param handling so the last param specified includes all remaining words in the slash command
2021-11-24 22:41:18 +00:00
Kevin Ansfield
0f517ad4e6 Added scroll-into-view behaviour for inline image selector
refs https://github.com/TryGhost/Team/issues/1225

- added `scrollToCard` action to `koenig-editor` and passed it through to all card components curried to already include the card as an argument
  - action selects the card which places the cursor on it, then triggers our existing cursor scroll-into-view behaviour with an option to allow scrolling a card into view
- updated our cursor scroll-into-view behaviour so if the cursor is large (eg, when it covers a card's height) we make sure the top of the cursor is kept in view rather than the bottom
  - ensures that on small-height screens, opening the gif selector doesn't result in it's search bar being scrolled off screen
2021-11-24 20:02:10 +00:00
Kevin Ansfield
5116c86557 Fixed error when cleaning up empty image card
refs https://github.com/TryGhost/Team/issues/1225

- deleting an empty image card in the initial cleanup phase triggers the `onDeselect` action in the card but at that point the card's section no longer exists in the editor post model which was causing errors when attempting to replace it's section with an empty paragraph
2021-11-24 19:55:40 +00:00