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.
refs https://github.com/TryGhost/Team/issues/1211
- the outline and snippet availability were toggled on `payload.html` presence which isn't set for nft embeds. Switched to toggling on `payload.type` instead as per the main rendered/blank slate conditional
refs https://github.com/TryGhost/Team/issues/1211
Using `type` rather than `card_type` since that's been replaced in the
API.
Moves the rendering of the card in the template so that we get
access to the caption editor, and selectable card (rather than the
anchor tag redirecting us to OpenSea)
Updates the `isEmpty` property to take into account NFT cards.
