Commit Graph

466 Commits

Author SHA1 Message Date
Kevin Ansfield
6853b964f8 First iteration of gifs image selector + card
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
2021-11-12 16:10:26 +00:00
Rishabh
b4415830e6 Refined design for toggle card in edit mode
refs https://github.com/TryGhost/Team/issues/1209
2021-11-12 16:31:39 +05:30
Rishabh
5e01b94bb1 Fixed default tag override not working on edits for html input component
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
2021-11-12 16:31:39 +05:30
Rishabh
57b318de52 Added new html textarea 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
2021-11-12 16:31:39 +05:30
Sanne de Vries
549f89084f Updated callout-card color picker
Refs https://github.com/TryGhost/Team/issues/1206

- Replaced select component for color palette picker
- Added support for brand color
2021-11-11 15:48:14 +01:00
djordje vlaisavljevic
8f73a4e39b Updated Accordion card container and styles 2021-11-11 15:18:29 +01:00
Fabien O'Carroll
8e29e8de79 Added support for no-iframed embeds
refs https://github.com/TryGhost/Team/issues/1211

This is to allow us to style the NFT embed card in the Admin
2021-11-11 13:46:26 +02:00
Rishabh
d3cfa14498 Allowed custom default tag for html input component
no refs

- allows custom html tag to be passed in to basic html input component
- updates accordion heading input to use basic html input with h4 tag
2021-11-11 16:49:04 +05:30
Rishabh
697420957c Refined toggle card design in edit mode
refs https://github.com/TryGhost/Team/issues/1209
2021-11-11 16:49:04 +05:30
Peter Zimon
6a8976a683 Updated copy for Button card tooltip 2021-11-11 12:05:36 +01:00
Kevin Ansfield
49d32c4ca4 Added "incomplete" state for button card
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
2021-11-11 09:24:20 +00:00
Thibaut Patel
276841a523 Added background color config for the callout card
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)
2021-11-10 18:31:00 +01:00
Thibaut Patel
075d529e65 Added an emoji toggle for the callout card
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
2021-11-10 15:51:16 +01:00
Kevin Ansfield
e51bcec5f1 Fixed email-cta card not auto-deleting when button is disabled but has content
no issue

- if the `showButton` property is `false`, auto-delete the card when leaving edit mode if the card has no rich-text content
2021-11-10 14:50:02 +00:00
Kevin Ansfield
2625199fb2 Removed duplication of "delete if empty" card logic
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
2021-11-10 14:46:00 +00:00
Peter Zimon
13b9145a01 Set audience capitalized in Email CTA options 2021-11-10 15:44:21 +01:00
Peter Zimon
68d599f4a9 Updated link styles in Button and Email CTA cards 2021-11-10 15:42:35 +01:00
Peter Zimon
091e44a562 Adjusted button card Koenig styles 2021-11-10 14:46:23 +01:00
Rishabh
f3c8f1cac8 Updated edit mode design for accordion card
refs https://github.com/TryGhost/Team/issues/1209

- adds inline content and heading editing as html input
- refines style
2021-11-10 13:44:03 +05:30
Rishabh
da4641f9b3 Added first version for accordion card
refs https://github.com/TryGhost/Team/issues/1209

Added first version for toggle cards with heading and content input and basic rendering in Editor
2021-11-10 13:44:03 +05:30
Sanne de Vries
93d16dfe56 Fixed action toolbar not working in callout-card 2021-11-09 15:29:13 +01:00
Sanne de Vries
347bd47f77 Fixed callout placeholder not taking full width 2021-11-09 15:17:36 +01:00
Sanne de Vries
ff39c776b2 Added basic styling to callout-card
Refs https://github.com/TryGhost/Team/issues/1205
2021-11-09 15:09:28 +01:00
Peter Zimon
5183ea41ca Added empty NFT component 2021-11-09 13:56:24 +01:00
Thibaut Patel
7441f8df07 Added first pass of callout card
refs https://github.com/TryGhost/Team/issues/1205

- adds card that contains a static emoji and configurable text
2021-11-09 10:39:51 +01:00
Kevin Ansfield
794ed83032 Added first pass of button card
no issue

- adds card that contains a single button with alignment options and configurable text and url
2021-11-08 15:50:05 +00:00
Kevin Ansfield
c6f1bbc918 Removed unused @style args from email+email-cta cards
no issue

- the `@style` arguments passed to `<KoenigCard>` in these components doesn't exist
2021-11-08 13:53:57 +00:00
Kevin Ansfield
085ef1646c Converted hr card component to glimmer syntax
no issue

- switching to Ember "Octane" patterns
2021-11-08 13:10:39 +00:00
Kevin Ansfield
0b360c3383 Converted paywall component to glimmer syntax
no issue

- switching to Ember "Octane" patterns
2021-11-08 13:08:58 +00:00
Kevin Ansfield
aae6e32494 Added basic drag-to-move handling to card setting panels
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
2021-11-03 16:51:24 +00:00
Kevin Ansfield
999d69af4d Switched back to explicit edit mode for settings panel prototype
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
2021-11-03 14:52:05 +00:00
Kevin Ansfield
ed4efdb0c0 Fixed linting
refs f4c50fb3a5

- removed errant console.log
2021-11-02 16:29:58 +00:00
Kevin Ansfield
f4c50fb3a5 First prototype for card settings panel
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
2021-11-02 16:25:54 +00:00
Rishabh
1b25dfbd67 Updated offers list in email cta to include only active
closes https://github.com/TryGhost/Team/issues/1134

- filters offer urls available on email cta card to only include active offers
2021-10-18 14:48:01 +05:30
Rishabh
aefc762a20 Added offer urls to email cta card
refs https://github.com/TryGhost/Team/issues/1134

- allows site owners to easily include offer URLs in their email CTA
- will be updated to include active offers only
2021-10-12 17:03:45 +05:30
Kevin Ansfield
8b5c18d6e5 Hid email specific cards from card menus when editing pages
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`
2021-09-10 09:24:38 +01:00
Kevin Ansfield
c97e06751e Added additional logging for Sentry issue.id:2451728694
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
2021-09-09 12:58:38 +01:00
Kevin Ansfield
f9d97bdc35 Added group heading to existing snippets in dropdown
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
2021-09-08 09:54:06 +01:00
Kevin Ansfield
a5fc45d169 🐛 Fixed crash when newly created images are dragged into a gallery
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
2021-09-06 14:30:13 +01:00
Kevin Ansfield
9993f02ffa 🎨 Added ability to drop an image card onto an empty gallery
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
2021-09-06 11:57:42 +01:00
Kevin Ansfield
e9a8361687 Fixed errors when pasting non-markup into basic html fields
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
2021-09-03 10:51:45 +01:00
Peter Zimon
0b7d1b1946 Fixed gallery delete icon color bug 2021-09-03 11:45:29 +02:00
Kevin Ansfield
5eb817373f 🐛 Fixed captions becoming uneditable when they have a trailing space
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
2021-09-03 09:00:14 +01:00
Kevin Ansfield
922c304e3b Added "Email call to action" card for an email-only CTA targeting free or paid members (#2080)
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`
2021-09-02 13:11:15 +01:00
Kevin Ansfield
233e57071f Fixed email-cta card button input placeholder disappearing on focus
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
2021-09-02 07:42:36 +01:00
Kevin Ansfield
4e30da6c70 Added ability to update snippet contents (#2073)
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
2021-09-01 09:09:40 +01:00
Kevin Ansfield
b5f43a7e9d Added autofocus of button text input in email-cta card after enabling button
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)
2021-08-25 15:41:30 +01:00
Sanne de Vries
debb081c61 Updated email CTA toolbar
Refs https://github.com/TryGhost/Team/issues/1007
2021-08-25 11:55:10 +02:00
Kevin Ansfield
a6ca133915 Renamed buttonAlignment to alignment in email-cta payload
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`
2021-08-24 17:53:34 +01:00
Kevin Ansfield
dff28b3ca6 Removed "Link to this post" option from email-cta suggested URLs
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
2021-08-24 16:52:13 +01:00
Kevin Ansfield
8309904fcc Fixed clicking on existing snippets in dropdown having no effect
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
2021-08-24 16:04:49 +01:00
Kevin Ansfield
e6e08ab70a Fixed button showing in email-cta rendered mode when it's disabled
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
2021-08-24 11:44:53 +01:00
Sanne de Vries
6198019de1 Updated snippet replacement dropdown 2021-08-24 12:28:07 +02:00
Kevin Ansfield
e979e45fdb Linked up divider toggle button in email-cta card toolbar
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
2021-08-24 10:50:25 +01:00
Kevin Ansfield
0dab21e604 Linked up email-cta button toggle
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
2021-08-24 10:50:25 +01:00
Sanne de Vries
f59fae71eb Updated snippet replacement dropdown 2021-08-24 11:21:47 +02:00
Kevin Ansfield
de480234e9 Fixed snippet creation from email-cta card's toolbar
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
2021-08-24 10:12:52 +01:00
Kevin Ansfield
29095ffba1 Updated suggested URLs list in the email-cta card
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
2021-08-23 18:46:00 +01:00
Kevin Ansfield
ddf6360ae2 Passed post as a card option through to editor cards
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
2021-08-23 18:42:14 +01:00
Kevin Ansfield
4184543307 Added confirmation modal when updating an existing snippet
refs https://github.com/TryGhost/Team/issues/973

- show confirmation modal instead of immediately replacing content of the existing snippet
2021-08-23 17:12:26 +01:00
Kevin Ansfield
daa7f2e781 Added ability to update snippet contents
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
2021-08-23 16:00:01 +01:00
Sanne de Vries
11cc53c4d0 Added divider button to email CTA card toolbar
Refs https://github.com/TryGhost/Team/issues/1007
2021-08-23 16:22:56 +02:00
Sanne de Vries
c4e54c92ae Updated email CTA card
Refs https://github.com/TryGhost/Team/issues/1007

- Changed text and button to auto-update alignment in and outside of edit mode
- Updated icons
- Added titles on hover
2021-08-23 15:04:11 +02:00
Sanne de Vries
60e14a3dfa Added toolbar to email CTA card
Refs https://github.com/TryGhost/Team/issues/1007
2021-08-23 14:10:33 +02:00
Kevin Ansfield
8f21f0d4fa Added pre-filled options to email-cta card's button url input
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
2021-08-20 14:33:30 +01:00
Kevin Ansfield
77fa802c73 Added snippet input labs component
refs https://github.com/TryGhost/Team/issues/973

- preparation for swapping the text field input for a power-select input behind the `snippetReplacements` labs flag
2021-08-16 10:52:50 +01:00
Sanne de Vries
6dc901993c Updated email CTA card
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
2021-08-03 18:21:54 +02:00
Kevin Ansfield
d3d186664f Added button alignment selection to email-cta card
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
2021-08-02 15:01:15 +01:00
Kevin Ansfield
43aff32dc6 Switched to top/bottom toggles for email-cta dividers
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
2021-08-02 14:48:14 +01:00
Kevin Ansfield
1f24c09c5f Fixed linter error 2021-08-02 14:31:05 +01:00
Kevin Ansfield
0e5a7cd2a9 Added none/top/both/bottom divider toolbar buttons to email-cta card
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
2021-08-02 14:24:28 +01:00
Sanne de Vries
8db674191d Fixed typo in email CTA card 2021-07-29 15:56:14 +02:00
Kevin Ansfield
2cf55cb307 Fixed email-cta card being auto-deleted when no content is set
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
2021-07-28 18:00:01 +01:00
Sanne de Vries
8f6aa37e97 Got rid of pre-populated content in email CTA card and updated placeholder copy 2021-07-28 16:38:11 +02:00
Sanne de Vries
65db0843a1 Deleted tooltip on email CTA indicator icon 2021-07-28 13:47:58 +02:00
Sanne de Vries
ff33128be5 Updated email CTA card in editor 2021-07-28 13:25:26 +02:00
Kevin Ansfield
35ac6abd6a Added CTA button display when not in edit mode
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
2021-07-26 21:17:10 +01:00
Kevin Ansfield
4e0473a93e Added CTA button and URL input to email-cta card
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
2021-07-26 17:03:17 +01:00
Kevin Ansfield
209f4361f4 Added support for tooltips on card type indicators
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
2021-07-26 17:03:17 +01:00
Kevin Ansfield
c019ef5cb0 Removed prototype button atom
refs https://github.com/TryGhost/Team/issues/931

- prototype button has served it's purpose in answering questions and is no longer being used
- groundwork is left in place for future component-based atoms
2021-07-23 09:21:03 +01:00
Kevin Ansfield
07d89262f1 Prototyped component based atoms in the editor
refs https://github.com/TryGhost/Team/issues/931

- adds handling for component atoms
- add prototype button atom to test atom behaviour
- add `Cmd+Shift+B` keyboard shortcut to create a dummy button atom when the `emailCardSegments` feature is enabled
2021-07-22 18:54:46 +01:00
Kevin Ansfield
3e82a19791 Fixed linter error 2021-07-21 20:34:30 +01:00
Kevin Ansfield
5b09cd5bef Added segment selection to email-cta card
refs https://github.com/TryGhost/Team/issues/926

- updated `<KoenigEditor>` so it creates default card payloads as TrackedObject instances so that getters in glimmer component based cards can track changes to payload properties
- added dropdown free/paid selector to email-cta card that sets the `segment` payload property to the respective filter
- updated design to show the footer outside of edit mode too so that the selected segment is always visible
2021-07-21 18:39:33 +01:00
Kevin Ansfield
84581e9109 Converted <KoenigCardEmailCta> to native class glimmer component
no issue

- switched to native class syntax
- updated to glimmer/octane syntax
- fixed infinite render issue from `<KoenigTextReplacementHtmlInput>`'s `didReceiveAttrs()` lifecycle hook
2021-07-20 18:33:39 +01:00
Kevin Ansfield
463c610e70 Duplicated email card as email-cta
refs https://github.com/TryGhost/Team/issues/910

- readying the foundation for adding segment selection and CTA config to the `email-cta` card
- will only be available to select from card menus when the `emailCardSegments` feature flag is enabled
2021-07-20 10:54:19 +01:00
Kevin Ansfield
10f83ebd45 Added support for feature-gated editor cards
refs https://github.com/TryGhost/Team/issues/910

- added `card-is-available` helper that handles the previous `card.developerExperiment` and the new `card.feature` options
- updated `<KoenigMenuContent>` to use the `card-is-available` helper in the conditional when adding cards to the list

Cards can be gated by feature when specifying them in `cards.js`, in the card definition object you can add `feature: 'flagName'` which will mean the card is only available when that feature is enabled.
2021-07-20 10:48:41 +01:00
Kevin Ansfield
1ad2c05d37 Bumped eslint-plugin-ghost and fixed linter errors
no issue

- new linting rules that needed fixing:
   - calling `super` in lifecycle hooks
   - no usage of String prototype extensions
2021-07-15 15:27:29 +01:00
Kevin Ansfield
b3b5ac6cef Fixed error when resizing browser after pasting embed link
closes https://github.com/TryGhost/Team/issues/749

- resize event listener is created twice when converting a link to an embed card, if we don't clear the older resize event handler before creating a new one then it persists after the component is torn down and the iframe no longer exists
2021-07-14 14:50:59 +01:00
Sanne de Vries
33d86c5dd5 Updated feature image design in editor 2021-06-21 12:03:40 +02:00
Kevin Ansfield
79d14082c2 🎨 Enabled use of Grammarly extension in the editor
no issue

- Grammarly have indicated their extension is now compatible with the underlying editor technology used in Ghost
- removed html attributes that explicitly disabled the extension on our editor fields
2021-06-03 13:22:07 +01:00
Kevin Ansfield
e584569914 Switch deprecated htmlSafe imports from @ember/string to @ember/template
no issue

See https://deprecations.emberjs.com/v3.x#toc_ember-string-htmlsafe-ishtmlsafe
2021-05-12 12:33:40 +01:00
Kevin Ansfield
f24f6e5d0d Fixed editor drag/drop getting stuck
no issue

- sometimes it was possible for a drop target element to not have a child which would cause an error and cause drag/drop to get stuck with the dragged element sticking to the cursor with no action occurring on mouseup, requiring an `Esc` press but all further drags also being broken
- added a guard so we can handle `element.firstChild` not existing
2021-03-09 17:56:38 +00:00
Peter Zimon
059f8cfd0e Fixed card border color in Koenig
- changed Koenig border color to green
- changed snippet input border to green
2021-03-09 12:51:35 +01:00
Peter Zimon
3d4e1a2bf2 Koenig action bar color fixes
- changed highlighted icons to green
- updated action bar background in dark mode for better contrast
- udpated link input border to green
2021-03-09 12:45:18 +01:00
Peter Zimon
c65b1b02d5 Fixed separator color in Koenig menu 2021-03-09 09:12:24 +01:00
Sanne de Vries
4263cc7343 Changed public preview divider symbols color 2021-03-02 20:50:27 +01:00
Sanne de Vries
80102bc916 Changed copy and icon for paywall card and divider 2021-02-22 17:09:27 +01:00
Kevin Ansfield
3826f39f9c Completed paywall card implementation
refs https://github.com/TryGhost/Team/issues/466
refs a657e4f092

- added paywall card component
- swapped hr for paywall for the paywall card shown in card menus
2021-02-17 14:18:12 +00:00
Kevin Ansfield
5d38d45724 Removed errant console.log 2021-02-16 22:08:04 +00:00
Kevin Ansfield
d2fb2c8518 Added ability to make image cards links
refs https://github.com/TryGhost/Team/issues/465

- modifies `<KoenigLinkInput>` to add a "direct" mode that is not tied to editor selection
- adds link toolbar icon to image card toolbar
- adds link editing mode to image card that replaces toolbar with link input
- stores url in `href` attribute in card payload
2021-02-16 22:02:04 +00:00
Kevin Ansfield
3995e65edf Fixed separator color in card toolbars 2021-02-16 19:21:33 +00:00
Kevin Ansfield
184912fd5d Set mobiledoc.ghostVersion on blank docs and persist across updates
refs https://github.com/TryGhost/Ghost/issues/12646

- ensures new content is created with the 4.0 ghost version so the renderer will use latest output
- re-applies ghost version to mobiledoc each time we get a newly serialized mobiledoc document from mobiledoc-kit because mobiledoc-kit is not aware of our custom properties and won't pass them through the deserialise->serialise process
2021-02-15 18:05:26 +00:00
Aileen Nowak
abc38ab375 Updated links to ghost.org sites
no issue

Follow-up task of the updated Ghost Docs structure. Updated links reflecting the new structure to prevent unnecessary 404s and redirects.
2021-01-19 13:18:59 +13:00
Rish
439b877744 🐛 Fixed email design settings not opening
closes https://github.com/TryGhost/Ghost/issues/12459

- Email design settings don't open in some cases when footer html is set as null, specifically on import
- Patches html cleanup to use empty string in case of null footer value
2020-12-08 15:01:38 +05:30
Kevin Ansfield
d5d0eafb47 Fixed email cards missing an edit icon in the toolbar
no issue

- email cards a block cards so have a distinct edit mode, that type of card should always have an edit icon in the toolbar for consistency and ease of use when the double-click or cmd+enter shortcuts aren't known
2020-12-03 10:26:28 +00:00
Sanne de Vries
c71413b0f7 Added descriptive line to each menu item in cardmenu 2020-11-16 17:34:40 +01:00
Fabien 'egg' O'Carroll
96f096a839 Added support for basic HTML newsletter footer (#1765)
no-issue

This allows users to use basic HTML to customise their newsletter
footer, meaning they can use links, and bold/italic text.
2020-11-16 10:29:32 +00:00
Kevin Ansfield
81ec6729c8 Fixed error when creating a block-editable card in the editor
no issue

The toolbar display/positioning logic was recently changed so that the toolbar is shown when a `saveAsSnippet` action is passed in. However the `_setToolbarProperties` method wasn't taking into account the toolbar element not being present when in editing mode such as when a block-editable card (markdown, html, code) is created.

- remove conditional logic that may change over time and replace it with checks for the toolbar element existing
2020-11-06 18:13:32 +00:00
Kevin Ansfield
3b87c951c0 🐛 Fixed snippet icon showing in card toolbar for authors/contributors
no issue

- authors/contributors do not have permission to create snippets so the icon should not be displayed
2020-11-03 13:57:11 +00:00
Sanne de Vries
64e1f74033 Adjusted cardmenu styling for dark mode
No issue

- Changed snippet icon fill
- Changed section border color
- Deleted white corners on bookmark icon
2020-10-28 14:55:34 +01:00
Kevin Ansfield
348ffc7d05 Changed slash menu filter to match any part of a snippet title
no issue

- extracted item matching into a separate function
- modified item matching to work with arrays (existing exact match behaviour) or functions which can be defined per-item
- changed snippet item `matches` to a function that does a naive match or the typed query to any part of the snippet's title
2020-10-28 08:37:04 +00:00
Kevin Ansfield
f98f5000df Fixed error when clicking snippet icon from card toolbar 2020-10-27 18:32:20 +00:00
Kevin Ansfield
8f91bb2083 Fixed toolbar showing when block cards are in edit mode 2020-10-27 18:23:56 +00:00
Kevin Ansfield
ad2d6bcf52 Fixed squashed card menu display in Safari 2020-10-27 16:28:24 +00:00
Kevin Ansfield
79d9179289 Added scroll-into-view behaviour for slash menu selection
no issue

- when selecting items with arrow keys in the slash menu, scroll the selected item into view if it's not visible
2020-10-27 16:15:58 +00:00
Kevin Ansfield
1e639c2504 Added snippets feature to editor
no issue

Snippets are pieces of saved content that are given a name and made available for easy and quick insertion when editing posts or pages. They can contain rich text, cards, or a combination of both making it faster and less error-prone to re-use pieces of content across multiple posts. Snippet length is not constrained meaning they can also stand in as post type templates alleviating the need to keep drafts around as templates and copy/pasting each time they are used.

Feature changes:
- added "create snippet" icon to selection and card toolbars
- added "Snippets" section to the plus and slash menus
  - for the slash menu, continuing to type after opening the menu will filter by snippet name
- all saved snippets are available to all staff users
- snippets can be deleted by clicking the trash can icon when hovering the mouse over a snippet entry in the plus or slash menus
- creation/deletion of snippets is available to staff users with the owner, admin, or editor role

This commit:
- removed developer experiments guard around snippet UI
2020-10-27 15:01:35 +00:00
Kevin Ansfield
581b195e12 Truncated long card menu labels 2020-10-27 14:48:39 +00:00
Kevin Ansfield
c6753a0efd Hid snippet management UI from staff users without permissions
no issue

- snippets can only be created and deleted by owners/admins/editors
- added a property in the editor controller to determine if the logged in user has sufficient permissions, then only pass the appropriate save/delete snippet actions to the editor component if the check is passed
- updates koenig menus and toolbars to skip rendering of buttons if the associated action function is not available
2020-10-27 14:42:59 +00:00
Kevin Ansfield
38fa62001a Fixed card menus closing when clicking on modal background
no issue

- when deleting a snippet we display a confirmation modal, if the background is clicked to dismiss the modal then the menus closed too which is a different behaviour to clicking the close/cancel button inside the dialog
- adjusted the "ignore click" selector in the menus to include all fullscreen modal elements
2020-10-27 08:43:46 +00:00
Kevin Ansfield
1bd4b5cda7 Added delete button with confirmation to snippets in card menus
no issue

- show a delete icon when a snippet is hovered in plus/slash menus
- show a confirmation dialog when the delete icon is clicked
- keep menus open whilst displaying the delete confirmation dialog
2020-10-26 17:09:39 +00:00
Kevin Ansfield
b392313df1 Changed snippet icon in menus based on snippet contents
no issue

- vary the snippet icon based on the snippet contents: text only, text and cards, cards only
2020-10-23 10:56:32 +01:00
Sanne de Vries
36dbb35eb5 Styled new row layout of the cardmenu
No issue

- Adjusted menu width and height
- Improved spacing cards
- Changed font styling
- Added snippet icons
2020-10-23 10:36:31 +02:00
Kevin Ansfield
5ae27247f7 Prevented card toolbar showing for embed/bookmark cards in input state
no issue

- it doesn't make sense to create snippets of bookmark/embed cards before they contain any content so we avoid passing the save snippet function through until content exists and the card has left it's input state
2020-10-21 18:27:26 +01:00
Kevin Ansfield
09368c2966 Changed card/plus menu layout from grid to rows
no issue

- with the addition of snippets the card menu contents height and potential label width are both growing considerably making the grid layout unworkable
2020-10-21 12:34:05 +01:00
Kevin Ansfield
489f45155d Added "Create snippet" toolbar icon when cards are selected
no issue

- show the toolbar icon for any `<KoenigCard>` instance that has the `saveAsSnippet` action passed to it
  - currently that's all cards except the HR card because that's a primitive element rather than containing any user-defined content
- add `koenigUi.inputHasFocus` so that card toolbars can be hidden when the snippet input is displayed
2020-10-21 12:16:04 +01:00
Kevin Ansfield
14755425c2 Fixed error when clicking on snippets in card menu
no issue

- click event was clearing the editor range so it's necessary to reposition the cursor before replacing with the post
2020-10-20 18:10:25 +01:00
Kevin Ansfield
3efeeac6a1 Swapped toolbar snippet icon for the new design 2020-10-19 09:55:26 +01:00
Kevin Ansfield
7e169a2a86 Renamed snippet.title to snippet.name for consistency
no issue

- all of our models which allow users to name something use `name` as the field descriptor rather than `title` so `snippet.title` was renamed for consistency
- also fixes typo in the plus-menu component that stopped clicking on snippets from working
2020-10-16 10:15:07 +01:00
Kevin Ansfield
b590ce1b95 Implemented first iteration of content snippets
closes https://github.com/TryGhost/Team/issues/411

- adds "Create snippet" icon to the editor toolbar
- uses the same link input component design for specifying snippet titles
- snippets are loaded in the background when the editor is accessed
- snippets are listed at the bottom of the card menus of the + and / menus
- clicking a snippet inserts the snippet's contents in place of the current blank section
2020-10-15 18:03:35 +01:00
Kevin Ansfield
a8f63f9343 Fixed usage of {{enable-developer-experiments}} without sub-expression syntax 2020-10-09 15:52:23 +01:00
Kevin Ansfield
235d5f1b8b Added {{enable-developer-experiments}} helper
no issue

- removes the need to have component backing classes with the `config` service injected
2020-10-09 11:10:39 +01:00
Kevin Ansfield
44b9b0fc94 Resolved "already declared in upper scope" linting warnings
no issue

- fixed all `no-shadow` linter warnings
- changed `no-shadow` eslint rule from `warn` to `error` so we don't re-introduce shadowed variables in the future
2020-10-05 09:56:21 +01:00
Kevin Ansfield
db68f0248b Update dependency ember-in-viewport to v3.8.0
no issue

- now that we no longer have the `ember-sticky-element` dependency we're free to upgrade `ember-in-viewport`
- remove package.json resolution so latest version gets installed
- remove ember-in-viewport from renovate ignore config
- update `<GhScrollTrigger>` to match latest `ember-in-viewport` usage and convert to a glimmer component
  - ensure `scrollableArea` is always set so that the trigger doesn't stop working after the first trigger
2020-10-01 10:06:53 +01:00
Kevin Ansfield
c0149ee997 Removed ember-sticky-element in favour of native position: sticky
no issue

- native `position: sticky` support is now good enough across the board of our supported browser versions to use in place of a JS version for our use cases
- `ember-sticky-element` is preventing the dependency update of `ember-in-viewport` so removing it will allow a lot of our sub-dependencies to be updated
2020-10-01 10:02:27 +01:00
Peter Zimon
b9bd4fb505 Fixed image caption design bugs in Koenig
no refs.
- added side padding for alt and caption input fields
- fixed text color bug of alt toggle button
2020-08-27 15:21:11 +02:00
Sanne de Vries
e271486c8b Changed order and font color of author and publisher on bookmark card 2020-08-21 11:40:52 +02:00
Kevin Ansfield
fd91b593a5 Added number formatting to all pluralized counts
closes https://github.com/TryGhost/Ghost/issues/12110

- adds `{{gh-pluralize}}` helper that wraps the `{{pluralize}}` helper from `ember-inflector` but formats the number using our `{{format-number}}` helper
- updates all uses of `{{pluralize}}` to `{{gh-pluralize}}`
2020-08-10 11:16:03 +01:00
Kevin Ansfield
8824888ce7 Switched over to public {{in-element}} API
no issue

- Ember 3.20.0 introduced `{{in-element}}` as a public API in place of the now-deprecated `{{-in-element}}` private API
- replaced our usage of the private API with the public API
2020-07-20 12:10:17 +01:00
Kevin Ansfield
37de63e8cd Updated image card to store original width/height in payload
no issue

- extract width/height from selected local image when uploading and store in the payload with `src` once upload finishes
- capture width/height from Unsplash and store in the payload after selecting an image
2020-06-15 13:16:37 +01:00
Kevin Ansfield
c8839bb0a2 Added display of server-side error message when bookmark request fails
closes https://github.com/TryGhost/Ghost/issues/11212

- store error message that is received from the server and remove the url from the context string for cleaner display
2020-06-08 17:40:33 +01:00
Kevin Ansfield
93515f3008 Display original url in bookmark card
refs https://github.com/TryGhost/Ghost/issues/11212
credit @devaman https://github.com/TryGhost/Ghost-Admin/pull/1478

- display the original url rather than the fetched url in order to preserve query params and redirects (useful for affiliate links)
2020-06-08 08:21:34 +01:00
Marco Zehe
adb7828003 Various A11y post screen fixes (#1584)
refs #11863

* 🐛 Gave various buttons accessible labels

Hidden span elements are not rendered to assistive technologies, so duplicate the text in an aria-label on the button element.

* 🐛 Fixed various accessibility issues in the editor

* Made menus menus and menu item menuitems.
* Added labels to buttons where there were only hidden spans, or no text at all.
* Made separators show up for screen readers.
2020-05-28 16:01:09 +01:00
Kevin Ansfield
09435ecf76 Co-located component template files
no issue

Keeps component JS backing files and template files in the same directory which avoids hunting across directories when working with components. Also lets you see all components when looking at one directory, whereas previously template-only or js-only components may not have been obvious without looking at both directories.

- ran [codemod](https://github.com/ember-codemods/ember-component-template-colocation-migrator/) for app-level components
- manually moved in-repo-addon component templates in `lib/koenig-editor`
- removed all explicit `layout` imports as JS/template associations are now made at build-time removing the need for them
- updated `.embercli` to default to new flat component structure
2020-05-18 13:14:08 +01:00
Kevin Ansfield
9582b9ea2f Fixed embed card sizing for Vimeo embeds with larger thumbnails
no issue

- we're adjusting the oembed endpoint to fetch larger thumbnails if possible and that results in Vimeo embed iframes being larger than the editor width which created large blank spaces above/below the video due to the iframe height not adjusting correctly
- in the embed card's resize routine, if we look for an embedded iframe and find a width/height attribute then we can use the aspect ratio to assign the correct height for the outer and inner iframes
2020-04-30 09:07:04 +01:00
Kevin Ansfield
4ba1bb0e16 Added oembed metadata to embed card payloads
refs https://github.com/TryGhost/Ghost/issues/11756

- we'd like to render fallbacks for embed cards in constrained environments such as emails where the `html` contents may not be suitable
- oembed gives us data to be able to create fallbacks this such as a `thumbnail_url`, author information, and sizing but we were not storing it
- this change removes the `html` and `type` data from the response object as the existing top-level payload properties then stores the remainder of the response under a `metadata` property
2020-04-29 10:43:03 +01:00
Kevin Ansfield
625dd9a471 Added help text to email card
no issue

- show help at bottom of email card in edit mode with text explaining that the email card will only be included in emails
- set default content of the email card that includes the `{first_name}` replacement string
- changed behaviour to place cursor at end of the card contents when entering edit mode
2020-04-23 12:11:23 +01:00
Peter Zimon
20b113909c Fixed slash menu positioning bug
no refs.

- fixed visual bug that made Slash menu appear on top of the text
2020-04-21 11:12:47 +02:00
Kevin Ansfield
4a596d232e Fixed formatting only being applied to first replacement string in email card
no issue
2020-04-20 12:15:11 +01:00
Kevin Ansfield
06849869a2 Fixed linting 2020-04-17 17:59:08 +01:00
Kevin Ansfield
abcb9da445 Prevent {} text replacements from receiving any formatting
no issue

- we don't want to allow text replacement strings to be split in half by html tags so we disallow any formats to be applied to them
- in the `<KoenigTextReplacementHtmlInput>`'s mobiledoc editor's `didUpdatePost` hook handler we loop over all markers in the post and if they have a code markup (we use this to represent replacement strings) then we strip any other markups
2020-04-17 17:49:16 +01:00