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.
refs https://github.com/TryGhost/Team/issues/1217
- tenor API config is now an object that lives at `config.tenor`
- updated gifs card gating to use the new config object
- added passthrough of `contentfilter` param from config when making Tenor API requests
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/1206
- This only solves partially the line-returns being eaten by the editor. When editing a card with a line return, it will be removed.
refs https://github.com/TryGhost/Team/issues/1220
- added array support to `{{card-is-available}}` helper where every key needs to be present for the card to be available
- changed gifs card `isAvailable` property to require both the feature flag and the tenor api key to be set in config
no issue
- `{{action}}` is deprecated and is only available for backwards compatibility with action hashes in non-Glimmer components
- for event handlers we should be using the `{{on}}` modifier to use `addEventListener` on an element rather than directly attaching JS functions using `onclick=` attributes to avoid subtle DOM event ordering bugs
refs https://github.com/TryGhost/Team/issues/1206
- prevents text in curly brakets from being wrapped into a <code> tag
- updated the callout card to this generic textarea editor instead of the email-specific editor
no issue
- the number of properties that cards have in their definition was growing so it made sense to drop the single-use `feature` property in favor of the `isAvailable` property that can perform the same functionality
closes https://github.com/TryGhost/Team/issues/1223
It's possible to disable the Unsplash integration from the integration settings but when disabled the image selector was still available for post feature images and as an editor embed option.
- adds `isAvailable` property to card definitions, if it's set it should be a string that matches a config/setting that determines the card's availability
- unsplash card updated to use `'settings.unsplash'` as it's `isAvailable` property
- adds conditional to `<GhEditorFeatureImage>` so the Unsplash selector is only shown when enabled to bring it inline with the `<GhImageUploader>` component that was used previously for post feature images
refs https://github.com/TryGhost/Team/issues/1211
Since we have switched to rendering the NFT card outside of the OEmbed
response we no longer include a html property. This check would throw
for missing HTML so we've updated it to not include NFT cards
refs https://github.com/TryGhost/Team/issues/1211
We've moved the rendering of HTML outside of the OEmbed endpoint - so
the Admin needs to handle constructing the HTML from the OEmbed response
metadata.
refs https://github.com/TryGhost/Team/issues/1219
- added optional `adjustOnResize` argument to `{{movable}}` modifier
- when the movable element's size changes (based on a `ResizeObserver` event) the passed in action is called with the element and the current x/y position
- having this handled via the `{{movable}}` modifier is needed because that's what knows about any CSS translations that are present and allows the drag position to remain in sync with any resize-related adjustments
- return value of the action is expected to be a new `{x, y}` tuple
- used `adjustOnResize` in the `<KoenigSettingsPanel>` component so that any time the settings panel grows and causes part of it to be off-screen we re-position so that the whole panel is kept on-screen
refs https://github.com/TryGhost/Team/issues/1217
- adds `tenor` service that acts as a coordinator for the Tenor API similar to the `unsplash` service
- adds `<GhTenor>` component that renders an image search and select modal using the `tenor` service
- swapped the gifs card over to use the `tenor` image selector so it opens the tenor modal instead of the unsplash modal
no refs
- we added a default tag override for basic html input component, but the edit mode was still using `p` as the tag irrespective of default set, which caused switching back to p tag when editing the component
refs https://github.com/TryGhost/Team/issues/1209
- adds new `KoenigHtmlTextarea` component for entering multi line html in cards
- updates accordion card to use html text area component
refs https://github.com/TryGhost/Team/issues/1217
- behind the `gifsCard` feature flag
- currently maps to the unsplash image selector whilst we're building out an alternative selector
refs https://github.com/TryGhost/Team/issues/1210
- when rendered, show button as greyed out if either text or url is missing
- show "Add button URL" in tooltip if the url is missing
- show "Add button text" in button if the text is missing
- adds wrapper element so the tooltip is not greyed out
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
no issue
- adds `{{movable}}` render modifier that sets up basic mouse/touch event handlers that adjust the element's `translate` style when click/touched+dragged so it can be moved around the screen
no issue
- added the edit toolbar icon back to the email-cta card
- switched back to displaying the non-editable version of the card when not in edit mode
- removed unused `showSettingsPanel` property from `<KoenigCard>` component, cards can now control display of settings panel using `@isEditing`
- removed unused `@visible` argument for `<KoenigSettingsPanel>` component
no issue
UI experiment (behind the `cardSettingsPanel` labs flag) for pulling card settings out into a separate side-panel. Prototyping against the email-cta card.
- shows panel immediately when selected unless selected by keyboard in which case it will wait for mouse input
- panel position is fixed so it's always on screen
- initial position tries to be as close to centered right of the card as possible
- ensures all of the panel is on-screen, will overlap the card if there's no enough horizontal width
- re-positions after window resize
- card no longer has a separate edit mode, the text replacement field is directly editable
no issue
Pages can not be sent by email so by hiding email-specific cards when editing pages we can reduce confusion and clutter.
- added a `@postType` argument to editor components that can be passed through to sub components
- set `@postType` to `post.displayName` which is either `post` or `page`
- updated `{{card-is-available}}` helper to compare a `postType` property on card menu items to the passed in `postType`
no issue
- Sentry was showing `card` being undefined at times when attempting to select/edit a card after it's inserted in `replaceWithCardSection()` (called by card menus and text expansions) but it's not been reproducible in local environments
- it's unclear if the problem occurs due to the card render not happening in the immediate render queue or if it's some other problem
- added a retry if the card is not found after the first render plus logs to Sentry and console when the unexpected state occurs for better insight
no issue
- wrapped dropdown options in an options group so the heading can provide more context
- fixed styling so there isn't double padding around grouped options
closes https://github.com/TryGhost/Team/issues/1020
- image card payloads should have a valid `src` attribute, use that instead of relying on the associated `img` element which won't be found/have an unexpected `src` when it's newly created because the image card will still be using the blob url generated for a preview whilst uploading
closes https://github.com/TryGhost/Team/issues/1013
Image cards could be dropped into a gallery when at least one image was already present but there was no handling for image cards being dropped onto an empty gallery.
- added `data-gallery` attribute to the placeholder element so it gets picked up by the drag-and-drop container registration
- added drag enter/leave event handlers so we can show the same dropzone indicator as when a standard file is being dropped onto an empty gallery
- updated the drop handling to handle insertion when no images already exist by forcing insertion at index `0`
- updated the register or refresh handler to switch between different drag-and-drop container elements as needed and switched to `scheduleOnce` to prevent duplicate containers being created if the function is called twice before render occurs
no issue
- the editor range was getting out of sync between pasting and the subsequent `didUpdatePost` callback which cleans up content to conform to our "basic html" expectations resulting in errors in the console and potentially lost content if the paste occurred with the cursor inside existing text
- updated `handlePaste` to perform the same parse as the default paste handler but then cleanup the post before inserting so there's no mismatch of content across the editor callbacks
closes https://github.com/TryGhost/Team/issues/1023
closes https://github.com/TryGhost/Ghost/issues/11424
- we were comparing the caption editor's contenteditable inner html vs the passed in html in order to reset the editor if the bound value changed upstream, this was causing problems because the editor and external html cleaning were treating trailing whitespace slightly differently which resulted in the editor being reset every time it gained focus when a trailing space was present
- removed reliance on inspecting the editor's inner html and instead switched to comparing a changed `html` value to that which was passed in during initialisation or was last passed upstream from the editor so there's no chance of unexpected deviance
refs https://github.com/TryGhost/Team/issues/993
The new editor card allows you to add styled content along with an optional button that will only be visible to free or paid members when the post is emailed. Useful for encouraging free members to sign up to a paid account for example.
- removed labs flag and conditionals to make the feature is available by default
- cleaned up CSS that re-used the `.email-card` class or was referencing `labs`
no issue
- behaviour was from copy-pasting from a different input where the placeholder was intentionally hidden on focus, that's not desirable in this case
refs https://github.com/TryGhost/Team/issues/1008
To update a snippet, select the content in the editor that you want as your snippet text and click the snippet icon as per creating a snippet. Once the snippet name input shows, start typing the name of an existing snippet to be able to select it for update.
- replaced main snippet input component with the labs component
- removed the feature flag and associated labs screen toggle
- removed original/labs snippet input conditional in the editor
refs https://github.com/TryGhost/Team/issues/1009
- added ID generation to the component as an example of good practice to avoid problems with multiple elements having the same ID
- used `afterRender` queue to schedule the focus of the button text input element so the element actually exists (it's added to the DOM only when `showButton` is true so we have to wait for that to complete)
refs https://github.com/TryGhost/Team/issues/1007
- all contents within an email-cta card are now aligned left/center so it doesn't make sense to keep the payload attribute as `buttonAlignment`
refs https://github.com/TryGhost/Team/issues/1007
- we don't know the URL of a post until after it's published so we were using the preview URL instead as that will always redirect to the current URL
- however, it's not clear in the UI that is how the preview URL works so we're removing it to avoid any confusion
no issue
- mousedown handler in the snippet input component was automatically closing when it was detecting a mousedown event outside of the element
- the new dropdown select is rendered in a wormhole outside of the component's element so the whole component was being destroyed before the mouseup listener on an option was fired
refs https://github.com/TryGhost/Team/issues/1007
- added `@payload.showButton` to the conditional for showing the button
- `@payload.buttonText` and `@payload.buttonUrl` both kept in the conditional to match how it would behave in the email
refs https://github.com/TryGhost/Team/issues/1007
- replaced `hasTopDivider` and `hasBottomDivider` and associated payload properties for a single `showDividers` payload property
- removed divider toggles from non-edit mode card toolbar
- linked edit-mode toolbar divider to a toggle dividers action
refs https://github.com/TryGhost/Team/issues/1007
- updated card payload defaults assignment and set `showButton` to `false`
- linked up button toggle button to toggle `showButton` in card payload and show as green when enabled
- hid button, and associated text/url inputs when `showButton` is false
- added `disabled` attribute to button when there's no text (attempt to simulate "placeholder" styling) and matched the text to the button text placeholder
