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
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/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
refs https://github.com/TryGhost/Team/issues/1206
Clicking inside the emoji picker was causing focus to be lost which then deselected the card causing an annoying jump between rendered/edit mode whilst working on the card's content. A secondary issue was the picker sticking around after you intentionally clicked elsewhere in the document to leave edit mode.
- before initiating the emoji-button instance, create a container that's appended at the bottom of the document body and that prevents any click events on elements inside the container from bubbling up and causing focus changes. Updated the emoji-button instance to render the picker inside that container
- added a call to hide the picker any time the card leaves edit mode
refs https://github.com/TryGhost/Team/issues/1206
- added `@allowBr` argument to `<KoenigBasicHtmlInput>` and used it in the callout card
- when enabled, adds `soft-break` atom and parser, enables `<br>` support in `cleanBasicHtml()`
no issue
- we had some code in `<KoenigEditor>` that was automatically saving a card when exiting edit mode based on some flawed logic, this meant we were making multiple editor updates simultaneously resulting in usage+change of the upstream `post` model within the same render loop (add paragraph code deselected the card, starts adding new paragraph, the deselection triggered the exit-edit mode which then caused a simultaneous post update)
- passed card env through to `<KoenigEditor>` so that it can compare current payload state against the "saved" payload state to determine if it should save when leaving edit mode
- renamed `_textReplacementEditor` to `_calloutTextEditor` to better match it's usage
- removed unnecessary `onNewline` handling, it wasn't being called because we overrode `ENTER` key
no issue
- switching to `<KoenigBasicHtmlInput>` means that the payload is no longer wrapped in `<p>` tags because the callout should not be a multi-paragraph input
refs https://github.com/TryGhost/Team/issues/1206
- The KoenigBasicHtmlTextarea wasn't an option as the `Enter` key was binded to a line return. And we want to use the `Enter` key to switch to the next paragraph outside of the callout card.
no issue
- text-replacement-input text expansions were customised to not use backticks for code and to have special format handling for `{}`
- switched to it's own set of text expansions that cover the standard expansions used in the main editor except for headings and card replacements
no issue
- the component was still using the text-replacement component's key commands which didn't include code formatting because code in text-replacement component is re-purposed for replacement string highlights
refs https://github.com/TryGhost/Team/issues/1206
- Store the latest emoji locally in the component
- Create a defaultEmoji method to ease retrieving the right emoji
- Use the default emoji when toggling the emoji back on in the card
- Still use 💡 as the default callout emoji
refs https://github.com/TryGhost/Team/issues/1206
- Because we allow <br> in the editor, the editor placeholder was remaining when editing (<p><br></p>). This clean the editor placeholder.
