refs https://github.com/TryGhost/Team/issues/1249
We now want to update the element which we are observing, which means we
end up in a loop. Instead we can listen to resize events and manually
update the dimensions when images are changed.
refs https://github.com/TryGhost/Team/issues/1249
Based on the design wireframes we're not going to be using a floating
panel for settings, this moves the functionality into the toolbar
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.
no-issue
If the onUploadStart or onUploadSuccess methods error, and the error
does not contain a payload property then we recieve an opaque error
message which can be difficult to understand.
no-issue
Currently the onUploadSuccess and onUploadFailure have no way to
identify which upload has succeeded or failed other than the filename.
However the filename is not guaranteed to be unqiue, so this can cause
bugs.
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
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
refs https://github.com/TryGhost/Team/issues/1225
- when we're showing a placeholder style image selector we shouldn't show the extra green border around the browser, they should have their own borders and not look exactly like a card
refs https://github.com/TryGhost/Team/issues/1225
- updated `selector-tenor` component to use the correct passed-in action
- fixed focus moving to top of the editor after selecting a gif or unsplash image
refs https://github.com/TryGhost/Team/issues/1225
- the `imageSelector` options in the image card have been expanded to have both a `component` and a `type` property. If the `type` is set to "placeholder" the related image selector component will be rendered in place of the default upload placeholder
- updated `isEmpty()` so the card is always cleaned up if no src has been selected - prevents image selectors popping up when opening a post if it was saved whilst the image selector was open
- updated close-selector behaviour to exit back to a blank paragraph so a different image embed type can be selected easily instead of leaving an image card that you then have to delete, create a new paragraph, and choose the embed type
- added `koenig-image-card/selector-tenor` child component
- the same as `koenig-media-selector-tenor` except with the "Escape" key handling added
- added as a separate component for now to allow for easy switching until we're settled on the selector type we want
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/1225
- when opening the media selector and the bottom is cut off, scroll the whole selector into view so it's bottom is 20px away from the viewport bottom
- if the adjusted scroll would hide the top of the selector, make sure the top is 20px from the viewport top leaving the bottom cut off
refs https://github.com/TryGhost/Team/issues/1225
- if there's not enough space at the end of the editor canvas to fit the selector the browser adds extra space and pushes the scroll up making things feel janky
- added a scroll position reset as soon as the selector renders so nothing jumps around, the canvas just extends so it's possible to scroll the full selector into view
refs https://github.com/TryGhost/Team/issues/1225
Re-using the existing pattern of creating an image card and having it launch an image selector was proving to have a lot of edge cases when we wanted a more streamlined in-line image selector for gifs.
- added a new `'selector'` type to card definitions
- requires a `selectorComponent` argument that is the name of a component that renders the media and handles search
- updated card components to open the selector component when respective menu item is activated
- updated slash menu to instantly trigger the selector component when the slash command matches a card and is followed by a space so that searches continue inside the selector
- added `<KoenigMediaSelector>` component that wraps the card-definition provided component and handles escape key, clicks outside of the editor, and provides a stripped down API to the child component for selecting/closing
- added `<KoenigMediaSelectorTenor>` which mostly replicates the `<GhTenor>` component but has different styling and uses the provided media selector API
no issue
emoji-button uses focus-trap (https://www.npmjs.com/package/focus-trap) to gain/keep focus and allow clicks on the background to close the picker. Unfortunately when deactivating the focus-trap it attempts to return focus but it ends up putting the cursor back at the beginning of the post, deselecting the card and causing scroll jump.
- changed the `<div>` we were using as a button to trigger the emoji picker to `<button>` so that it's focusable meaning `focus-trap` returns focus there when the picker closes keeping focus inside the card
