refs https://github.com/TryGhost/Team/issues/1249
This adds a WIP for the Before/After card UI - behind an alpha flag.
It's completely missing design input and is intented to serve as a base
to work from.
refs https://github.com/TryGhost/Team/issues/1230
- allowing users to delete the thumbnail and upload another is a better flow as it allows removing a thumbnail as well if not needed
refs https://github.com/TryGhost/Team/issues/1230
- Updated the audio and file card to follow - 1st click → select, 2nd click → edit pattern, which is consistent with other cards
refs https://github.com/TryGhost/Team/issues/1229
- changed the video card image so it uses an aspect-ratio box set to the aspect ratio of the video, with the image using `object-fit: cover` to match the background image behavior in the front-end
refs https://github.com/TryGhost/Team/issues/1229
- using the images API lets us separate the auto-generated thumbnail and custom thumbnail
- added `customThumbnailSrc` to video card payload and switched settings panel uploader to store upload result there
- switched image display to fallback from custom thumbnail to auto-generated thumbnail
refs https://github.com/TryGhost/Team/issues/1245
- When pressing backspace on an empty `KoenigBasicHtmlInput` that don't use `p` as the default tag, an empty paragraph was created by e21bde39e1/lib/koenig-editor/addon/options/key-commands.js (L171-L176), messing with the style while in edit mode.
- This was fixed by normalizing the tag to be the `defaultTag` in the `didUpdatePost` hook
- Because of this new normalization, we could remove the same normalization from `handlePaste`
refs https://github.com/TryGhost/Team/issues/1245
- Used onmouseover because a CSS-only approach wouldn't work
- CSS can only highligh next siblings on hover, while we want to highlight previous sibling in our case
- This adds a hover class on mouseover to the right stars and removes it onmouseout
refs https://github.com/TryGhost/Team/issues/1239
Repeatedly clicking the quote icon in the editor toolbar or using the <kbd>Ctrl+Q</kbd> keyboard shortcut will cycle through standard-blockquote -> alternative-blockquot -> standard paragraph.
refs https://github.com/TryGhost/Team/issues/1245
- Several inputs where dismissing the content when pasting HTML without the expected input tag
- The inputs where: the caption of the feature image; the email footer; the caption in the bookmark, code, embed, gallery, image, video cards; the callout card title; the product card header and description; the toggle header
- This makes sure the wrapper html tag is the expected one.
Co-authored-by:
- Kevin Ansfield (@kevinansfield)
closes https://github.com/TryGhost/Team/issues/1254
- when switching over to a more generic file paste handling the prevention of the default paste behaviour was missed meaning an additional image element was added to the contenteditable area which was not rendered on the front-end and disappeared when reloading the post
no issue
- pasted URLs that are converted into an embed card were triggering the `convertUrl` task twice, once on insertion and then again on the immediate deselection that happens whilst the caret is adjusted
- a change in browsers or in Twitter's script meant that the double-fetch and iframe population started to become unreliable with the script not triggering, or the iframe contents being replaced interfering with script timing, resulting in un-styled Twitter embeds immediately after pasting a URL
- added `.drop()` to the `convertUrl` task so the second deselection call is ignored whilst the first call is still in progress
refs https://github.com/TryGhost/Team/issues/1230
- when updating a thumbnail for audio card, the thumbnail url doesn't change as its tied to the audio src. this can cause the old thumbnail to show in frontend due to browser caching
- this change adds a cache busting param at the end of url for each thumbnail upload, thus bypassing cache and showing the right thumbnail
refs https://github.com/TryGhost/Team/issues/1245
- Moved away from using only checkboxes and css because we need to use SVGs to display the stars
- Made it simple to keep CSS to the minimum and enable flexibility
refs https://github.com/TryGhost/Team/issues/1209
- updates tab/enter behavior for toggle heading -> content to use editor keyboard commands instead of overriding html input component
refs https://github.com/TryGhost/Team/issues/1225
When inserted opens a searchable gif selector, creating an image card when a gif is chosen.
Includes keyboard navigation once open:
- `Tab`/`Shift+Tab` cycles highlighted gif through search result order
- `Up` / `Down` / `Left` / `Right` moves highlight in the respective direction
- `Enter` inserts highlighted gif
For the gifs card to be activated it's necessary to add a Tenor API key (obtained freely from https://tenor.com/gifapi) via your config.production.json file:
```
...
"tenor": {
"publicReadOnlyApiKey": "YOUR_KEY"
}
}
```
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
