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
no issue
- when buttons and button-like links were mixed in a modal footer, the link did not inherit the expected button styles and if the link followed a button the two became smushed together because of missing left margins
no issue
- the upgrade button is a link rather than a button so was not triggering the modal's close behaviour
- added an `{{on "click" @close}}` handler to the link. `@close` does not preventDefault so the link's transition will still occur
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/1169
Previously we were only showing a confirmation dialog if a publish action would trigger an email which was inconsistent and did not instil confidence when publishing.
- replaced old `modal-confirm-email-send` modal with the newer-style `modals/editor/confirm-publish` component
- updated to handle standard publish in addition to email publish
- updated copy
- added "error" state when attempting to send email-only post to no members
- updated publish menu `save` task to open the confirm modal when going from `draft` to `published` or `scheduled`
- underlying save with email polling moved to `_saveTask` so it can be re-used across `save` task (when not publishing) and when confirming from the modal
refs https://github.com/TryGhost/Team/issues/1001
Our email newsletter preview is rendered inside of an iframe with
javascript disabled. When opening links from the preview, the new
window/tab inherits this property - which breaks links to twitter.
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
no-issue
We now calculate whether or not a flag is enabled on the server, so this
extra check is redundant. It also means that when we promote a flag to
GA on the server this check will still take places, meaning that we need
to make two commits to promote a flag to GA.
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"
}
}
```
closes https://github.com/TryGhost/Team/issues/1246
- offer screen filters out invalid tiers (without prices) in the dropdown as tiers lose their prices on stripe disconnect/reconnect
- this is a temporary user facing workaround till we start removing offer data on stripe disconnect which will solve this properly
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
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.
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/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
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
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
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
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
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
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
refs https://github.com/TryGhost/Team/issues/1225
- static outline was removed but we were still showing an outline when hovered
- added `media-card-placeholder` kg-style case that is the same as `media-card` but without the `kg-card-hover` class
