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
no issue
- Glimmer components do not have a `.element` property so we need to set it manually because the editor currently reaches into card components to calculate the element's rect for selection when creating snippets
refs https://github.com/TryGhost/Team/issues/992
- added "Link to this post" option that uses the preview URL as it's currently the only guaranteed URL that we know before a post is published
- added "Free email signup" option
- added "Paid subscription" and "Upgrade or change plan" options that are only shown when Stripe is connected
refs https://github.com/TryGhost/Team/issues/992
- within cards we sometimes want access to the `post` record so that UI or copy can be changed based on what is currently being edited
- added ability to pass `@cardOptions` through to the editor components
- fixed KoenigEditor not correctly assigning the `cardOptions` object to the `options` object that gets passed to every card when they are rendered
refs https://github.com/TryGhost/Team/issues/973
- added `@showCreate` option to `<GhInputWithSelect>` that enables the create option without having to pass a function in `@showCreateWhen`
- fixed autofocus not focusing input element in `<GhInputWithSelect>` when `autofocus="true"` isn't enough by itself
- updated `selectOrCreate` in `<GhInputWithSelect>` to trigger `onChange` if it's passed in rather than `onInput`
- swapped input in labs snippet input to `<GhInputWithSelect>`
- added actions for updating a snippet when an existing snippet is selected
- added action to editor control for saving an updated snippet
refs https://github.com/TryGhost/Team/issues/992
- swapped input element for `<GhInputWithSelect>`
- added `config.getSiteUrl()` method for generating front-end URLs including subdomain
- added example suggested URLs to email-cta card to pass as options to button url input
Refs https://github.com/TryGhost/Team/issues/928
- Added icons for top and bottom border
- Updated spacing for hr element when not in edit mode
- Got rid of hr element when in edit mode
- Got rid of left border for email, html and markdown cards and feature image
refs https://github.com/TryGhost/Team/issues/928
- added btn group for selecting left/center alignment of CTA button
- updated rendered view to center the button when center alignment is selected
refs https://github.com/TryGhost/Team/issues/928
- two toggle buttons is cleaner than 4 buttons to achieve the same thing
- adjusted payload to have `dividerTop` and `dividerBottom` attributes rather
refs https://github.com/TryGhost/Team/issues/928
- adds 4 buttons to email-cta toolbar for changing border setting to `none`, `top`, `bottom`, and `both`
- output `<hr>` elements at top and bottom of email-cta card contents when set
- fixed clicks on non-edit-mode toolbar items switching cards into edit mode
refs https://github.com/TryGhost/Team/issues/928
- it's possible to set a button with no content in the CTA card but the auto-removal when exiting edit mode was only checking for presence of content
- updated to only remove the card when no content, button text, or button url has been set
refs https://github.com/TryGhost/Team/issues/927
- button should be visible when not editing if both text and url are set
- added container for the content section so other links aren't clickable
- added tooltip to button so button url can be checked without having to go into edit mode
refs https://github.com/TryGhost/Team/issues/927
- added CTA `button and url inputs to email-cta card
- added `textColorForBackgroundColor` color util and used it to add a white/black text color variable that can be used when the accent color is used as a background color
- added `{{hex-adjust}}` helper for modifying lightness and saturation of a hex color
- adjusted inline power-select dropdown styling
refs https://github.com/TryGhost/Team/issues/927
- allows for more information about a card to be shown when hovering over the indicator to the left of the card's section in the editor
