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
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
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
- Re-use the saved emoji as the default for future callout cards
- Introduced a localstorage util that ignores errors. Ignoring errors avoids issues with browsers that don't support localstorage
refs https://github.com/TryGhost/Team/issues/1205
- Stored in the payload as an hexadecimal (or variable) value
- chosen with a dropdown through a pre-selected list of colors (or the publication accent color)
refs https://github.com/TryGhost/Team/issues/1205
- Uses the KoenigSettingsPanel to display a toggle
- The Emoji is set to an empty string when disabled
- And arbitrarily set to 💡 by default when toggled back on
no issue
The logic for "delete if empty" was duplicated in two places:
1. when `createComponentCard` is used to register a card, this option method was used when cleaning up a post when first rendering (cards in empty state can be saved before the editor auto-removes them but we don't want to show them again)
2. inside of card's own delete-if-empty handling on certain actions such as deselection or leaving edit mode
- added an `ifEmpty` property to each card component
- used by the editor's first-render cleanup routing if the property is present
- can be re-used internally for the card's own deselect/exit-edit-mode behaviour
- updated the cleanup routine in `<KoenigEditor>`
- added a `allComponentCardsRegistered` property that will return `true` when the `.component` property is set on every card (the property is set during card component initialisation so we're at the mercy of Ember's render process so not all card components will be immediately registered)
- swapped `_cleanup` for `_cleanupTask` that will wait for `allComponentCardsRegistered` to be `true` before performing cleanup, ensuring that we always have access to the card component's `isEmpty` property even when Ember renders cards across multiple render batches
- checks for `isEmpty` being a boolean and will delete the card if it's value is `true`
- updated all cards that had delete-if-empty behaviour
- added `isEmpty` properties
- removed duplicated logic in the `createComponentCard` calls
