Commit Graph

760 Commits

Author SHA1 Message Date
Kevin Ansfield
1be7dd1770 Ran native classes codemod for lib/koenig-editor/addon/components
refs https://github.com/TryGhost/Ghost/issues/14101

- ran native classes codemod for koenig-editor in-repo-addon components
- added `ember-classic-decorator` to addon's package.json to fix errors when importing

Some files failed to convert automatically:
```
❯ grep -rL "@classic\|default class" lib/koenig-editor/addon/components/**/*.js
lib/koenig-editor/addon/components/koenig-alt-input.js
lib/koenig-editor/addon/components/koenig-card-image.js
lib/koenig-editor/addon/components/koenig-editor.js
lib/koenig-editor/addon/components/koenig-toolbar.js
```
2022-02-03 18:57:21 +00:00
Gabriel Csapo
f22a758a3b [chore] run the no-implicit-this codemod (#2244)
refs https://github.com/TryGhost/Admin/pull/2238

Follow up to #2238, this should remove the existing no-implicit-this lint errors and any new violations should be flagged right away.

* run the no-implicit-this codemod
* updated todos
2022-02-02 17:09:02 +00:00
Kevin Ansfield
5e7c98fb46 Fixed template linting error in koenig-card-email.hbs
refs cc257f8576

- template change triggered a linting rule
- fixed and ran `yarn lint:hbs --update-todo`
2022-02-02 16:48:09 +00:00
Kevin Ansfield
cc257f8576 Fixed noreferer typos
no issue

- should be `noreferrer`, caused duplication by ember-template-lint auto fixing
2022-02-02 16:20:01 +00:00
Gabriel Csapo
beb5ae1737 [chore] adds ember-template-lint and fixes all fixable issues (#2238)
no issue

- This will help with the octane migration and you can still run the lint rules even when they are todos. (Checkout the docs at 158b119667/docs/todos.md) The good news is any new code will be checked against the recommended config.
- I fixed all the auto fixable things we could get in this PR as well
2022-02-02 16:09:43 +00:00
Kevin Ansfield
c9aa43e5a5 Added infobox to matches list for callout card
no issue

- extra term for matching the callout card so you can start typing `/infobox` and get the card you were looking for
2022-01-31 13:46:07 +00:00
Kevin Ansfield
fa4f8221d5 🎨 Made /-menu card searching case-insensitive
no issue

- allows typing "Button" to match the "button" card
- useful on mobile where words can be auto-capitalized
2022-01-31 13:37:25 +00:00
Kevin Ansfield
e0fa64a56b 🐛 Fixed editor cards not being usable by contributors
no issue

- a recent Ember upgrade has slightly changed behaviour for template conditionals meaning helpers used in the right-hand side of a conditional can be called when the conditional evaluates to falsy
- this caused an error to be thrown by the editor when creating cards as a contributor because the `{{fn}}` helper is called with a null/undefined `saveCardAsSnippetIfPossible` function which will throw an error
- wrapped the function in the `{{optional}}` helper (https://github.com/DockYard/ember-composable-helpers#optional) which will return a "noop" function allowing the template to evaluate without errors
2022-01-31 13:28:26 +00:00
Peter Zimon
3a3b2f7fb4 Remove alpha flag for Editor settings panel (#2230) 2022-01-31 13:33:59 +01:00
Kevin Ansfield
f56b52b8a1 Cleaned up headerCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals as feature is GA
2022-01-04 14:58:19 +00:00
Kevin Ansfield
8e9748131c Cleaned up fileCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals as feature is GA
2022-01-04 14:57:01 +00:00
Kevin Ansfield
6c18628b8b Cleaned up audioCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals
2022-01-04 13:08:50 +00:00
Kevin Ansfield
b8b40fafef Cleaned up productCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals
2022-01-04 13:04:26 +00:00
Kevin Ansfield
aeb0cb60e8 Cleaned up accordionCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals
2022-01-04 13:03:08 +00:00
Kevin Ansfield
a9a82107ed Cleaned up videoCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals
2022-01-04 12:57:42 +00:00
Kevin Ansfield
7a270de050 Cleaned up calloutCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals
2022-01-04 12:56:25 +00:00
Kevin Ansfield
0fcf89b1fa Cleaned up nftCard labs flag
refs https://github.com/TryGhost/Team/issues/1258

- removed labs flag and conditionals
2022-01-04 12:55:04 +00:00
Kevin Ansfield
99e2db76dc 🐛 Fixed Spotify and Soundcloud embeds having overly long containers in editor
closes https://github.com/TryGhost/Team/issues/871

- when determining the size of the iframe containing a nested iframe in the embed card we were incorrectly treating a `100%` width attribute as a `100px` attribute and ending up with a completely incorrect ratio calculation
- added a conditional to ignore %-width attributes when calculating a ratio for a nested iframe
- if we have a nested iframe with a %-width but a fixed height, use that fixed height for the outer container iframe
2022-01-04 10:00:21 +00:00
Kevin Ansfield
85ac9f0826 Removed unnecessary koenig-media-selector-tenor export file
no issue

- the associated addon component was deleted a while back but the app export file was missed
2022-01-04 09:29:24 +00:00
Thibaut Patel
5056401c13 Renamed the header styles
refs https://github.com/TryGhost/Team/issues/1253

- The naming is easier to understand for theme developers
2021-12-16 18:22:08 +01:00
Peter Zimon
b6da19df65 Updated header card placeholders 2021-12-16 16:11:50 +01:00
James Morris
dcb5d2ad0a Fixed a merge with the header card settings
refs https://github.com/TryGhost/Team/issues/1253
2021-12-16 14:39:50 +00:00
Thibaut Patel
05af5cdcd4 Removed width and alignment configuration from the header card
refs https://github.com/TryGhost/Team/issues/1253

- We're simplifying the header card from a design point of view to ease integration with themes
2021-12-16 15:10:57 +01:00
Peter Zimon
c4c728d7a1 Refined header image styles 2021-12-16 12:59:03 +01:00
Peter Zimon
c4b4a6b2a4 Put back header style options 2021-12-16 12:26:15 +01:00
Peter Zimon
9afb0c7a94 Updated style picker for header 2021-12-16 12:25:01 +01:00
Thibaut Patel
1e16b92f52 Updated the header card file selector
refs https://github.com/TryGhost/Team/issues/1253

- Selecting the `image` style opens the file selector right away
- Avoids an extra click to the user
- Moved `GhFileInput` so that it's always rendered, which enables triggering it right when selecting the `image` style
2021-12-16 11:09:14 +01:00
Peter Zimon
d33ef9944e Added 'upload' term to file card menu access 2021-12-16 10:08:44 +01:00
Sanne de Vries
21a1b3a1aa 🐛 Fixed audio file duration missing digit in editor
Closes https://github.com/TryGhost/Ghost/issues/13894
2021-12-16 09:17:45 +01:00
Naz
575623f5be Added support for additional wav MIME types
refs f882ebc58e
refs https://github.com/TryGhost/Toolbox/issues/95

- The `audio/x-wav`, `audio/wav`, and `audio/wave` are also commonly used MIME types for the .wav files.
2021-12-16 11:11:43 +04:00
James Morris
47e77ddcdc Little tweaks for header settings panel and added add icon
refs https://github.com/TryGhost/Team/issues/1253
2021-12-15 19:09:17 +00:00
djordje vlaisavljevic
ffc22f520a Updated before/after card editor template
refs https://github.com/TryGhost/Team/issues/1249
2021-12-15 20:06:00 +01:00
djordje vlaisavljevic
2a19d3bb74 Updated before/after card editor template
refs https://github.com/TryGhost/Team/issues/1249
2021-12-15 20:03:03 +01:00
Fabien egg O'Carroll
ee410a08c1 Updated slider for before/after to match frontend
refs https://github.com/TryGhost/Team/issues/1249

Adds a new element to use as the slider handle to match how we're doing
it in the frontend
2021-12-15 20:27:39 +02:00
Thibaut Patel
6d8fc32d77 Updated the header card
refs https://github.com/TryGhost/Team/issues/1253

- added a default `cardWidth`
2021-12-15 18:28:41 +01:00
Thibaut Patel
1db6e175fd Updated the header card
refs https://github.com/TryGhost/Team/issues/1253

- removed the accent class in the edit mode
2021-12-15 18:26:47 +01:00
Thibaut Patel
1194a553e8 Updated the header card
refs https://github.com/TryGhost/Team/issues/1253

- added the card width back (only regular or full options)
- removed the accent class from the button
- fixed a bug happening when the subheader was empty
2021-12-15 18:25:05 +01:00
Peter Zimon
4f005f0ef5 Updated file card Koenig styles 2021-12-15 17:45:04 +01:00
djordje vlaisavljevic
49df6dde1b Added icon for before/after card
refs https://github.com/TryGhost/Team/issues/1249
2021-12-15 16:23:35 +01:00
djordje vlaisavljevic
ac33996c08 Updated editor styles for before/after card
refs https://github.com/TryGhost/Team/issues/1249
2021-12-15 11:10:05 +01:00
Fabien egg O'Carroll
cb24aa1914 Added replace image functionality
refs https://github.com/TryGhost/Team/issues/1249

This can resuse the image selection as after a successful upload the
image is replaced.
2021-12-15 12:06:46 +02:00
Thibaut Patel
e1bbc63bb3 Updated header card class names
refs https://github.com/TryGhost/Team/issues/1253
2021-12-15 10:02:17 +01:00
Fabien egg O'Carroll
804da37926 Removed requirement for matchign aspect ratio
refs https://github.com/TryGhost/Team/issues/1249

Based on design feedback so that users are able to use the card with
less friciton.
2021-12-15 10:35:38 +02:00
djordje vlaisavljevic
1d19f74ba8 Updated editor styles for before/after card
refs https://github.com/TryGhost/Team/issues/1249
2021-12-15 09:32:09 +01:00
Sanne de Vries
b640a023f7 Refined video card in editor
Refs https://github.com/TryGhost/Team/issues/1229

- Fixed glitch on load
- Fixed error state
- Hid custom thumbnail when video is looped
2021-12-14 19:49:29 +01:00
Peter Zimon
526c92bad7 Refined file Koenig styles 2021-12-14 17:55:27 +01:00
Peter Zimon
09b221543f Updated file upload Koenig styles 2021-12-14 17:41:41 +01:00
Fabien egg O'Carroll
1a772b13c1 Removed option & logic for setting orientation
refs https://github.com/TryGhost/Team/issues/1249

Based on design feedback from Djordje & Zimo.
2021-12-14 18:39:28 +02:00
Thibaut Patel
3742502f2d Updated the header card based
refs https://github.com/TryGhost/Team/issues/1253

- follows the latest design
2021-12-14 16:00:59 +01:00
Fabien egg O'Carroll
7d7d856e77 Removed edit option from toolbar
https://github.com/TryGhost/Team/issues/1249

We have no floating settings now so we can remove the menu item and
display the toolbar always when the card is selected
2021-12-14 16:40:51 +02:00
Fabien egg O'Carroll
1338ddd12b Removed usage of MutationObserver
refs https://github.com/TryGhost/Team/issues/1249

We now want to update the element which we are observing, which means we
end up in a loop. Instead we can listen to resize events and manually
update the dimensions when images are changed.
2021-12-14 16:40:51 +02:00
Fabien egg O'Carroll
d3ee36e45d Moved image upload and slider settings into card
refs https://github.com/TryGhost/Team/issues/1249

Based on design wirefames
2021-12-14 16:40:51 +02:00
Fabien egg O'Carroll
993fdf9a10 Moved layout and orientation settings to toolbar
refs https://github.com/TryGhost/Team/issues/1249

Based on the design wireframes we're not going to be using a floating
panel for settings, this moves the functionality into the toolbar
2021-12-14 16:40:51 +02:00
Fabien egg O'Carroll
d18e6006f9 Removed unused wordCount
refs https://github.com/TryGhost/Team/issues/1249

This isn't used anywhere at the moment.
2021-12-14 16:40:46 +02:00
Rishabh
324e6e95d0 Added duration data in video card
refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 16:42:56 +05:30
Thibaut Patel
06a83f81b7 Updated the header card width selector
refs https://github.com/TryGhost/Team/issues/1253

- Follows the same pattern as the video card
2021-12-14 12:02:05 +01:00
Sanne de Vries
69aa98f9ca Updated video card and media player classes
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 11:49:33 +01:00
Sanne de Vries
a011ee2d97 Updated video card settings panel
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-14 09:37:45 +01:00
Thibaut Patel
f8caa3adce Added a first pass of the header card
refs https://github.com/TryGhost/Team/issues/1253
2021-12-13 19:31:23 +01:00
Sanne de Vries
6df5708c7f Refined audio and bookmark cards in editor
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 19:09:00 +01:00
Rishabh
c9c602f839 Fixed settings panel behavior for video card thumbnail replace
refs https://github.com/TryGhost/Team/issues/1229
2021-12-13 21:46:09 +05:30
Sanne de Vries
06cb582fc0 Refined audio cards in editor
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 16:18:32 +01:00
Fabien egg O'Carroll
12582c6cf4 Added initial Before/After card UI
refs https://github.com/TryGhost/Team/issues/1249

This adds a WIP for the Before/After card UI - behind an alpha flag.
It's completely missing design input and is intented to serve as a base
to work from.
2021-12-13 15:57:29 +02:00
Sanne de Vries
f788cd6dfa Removed unnecessary hidden audio player buttons
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 14:09:39 +01:00
Sanne de Vries
828786212c Fixed audio card error state
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-13 12:36:38 +01:00
Thibaut Patel
a879beb09d Hid the product card button fields when button is disabled
refs https://github.com/TryGhost/Team/issues/1245
2021-12-13 11:48:21 +01:00
Sanne de Vries
26265b6a11 Updated video card in editor
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-13 11:43:11 +01:00
Rishabh
48e64a47be Updated thumbnail replace for audio card with thumbnail delete option
refs https://github.com/TryGhost/Team/issues/1230

- allowing users to delete the thumbnail and upload another is a better flow as it allows removing a thumbnail as well if not needed
2021-12-13 16:10:29 +05:30
Rishabh
c3cb7dde47 Updated card edit flow for audio and file cards
refs https://github.com/TryGhost/Team/issues/1230

- Updated the audio and file card to follow - 1st click → select, 2nd click → edit pattern, which is consistent with other cards
2021-12-13 15:58:25 +05:30
Kevin Ansfield
59def266de Fixed video card aspect ration change when uploading custom thumbnail
refs https://github.com/TryGhost/Team/issues/1229

- changed the video card image so it uses an aspect-ratio box set to the aspect ratio of the video, with the image using `object-fit: cover` to match the background image behavior in the front-end
2021-12-10 19:48:28 +00:00
Peter Zimon
6800a3fdb4 Updated file card styles in Koenig (#2175)
Added styles for file card in editor
2021-12-10 19:17:11 +01:00
Rishabh
0fb7a04bae Refined file upload card
refs https://github.com/TryGhost/Team/issues/1231

- updated upload endpoint for files
- cleanup
2021-12-10 18:01:25 +05:30
Rishabh
ee639625ad Cleaned up audio card file
refs https://github.com/TryGhost/Team/issues/1230
2021-12-10 17:25:55 +05:30
djordje vlaisavljevic
7b9c0319a6 Updated settings panel placeholders for product card
https://github.com/TryGhost/Team/issues/1245
2021-12-10 11:26:53 +01:00
Rishabh
dd8e770692 Updated audio card allowed extensions and payload
refs https://github.com/TryGhost/Team/issues/1230

- cleans up allowed payload attributes for audio card
2021-12-10 01:22:05 +05:30
Kevin Ansfield
c7925e6915 Fixed video card with adjustment not changing editor size
refs 00d9d200f7

- `concat` helper had been accidentally removed so width classes weren't being output correctly
2021-12-09 16:49:38 +00:00
Kevin Ansfield
e04422221f Switched to images API for video thumbnails with custom thumbnail override behaviour
refs https://github.com/TryGhost/Team/issues/1229

- using the images API lets us separate the auto-generated thumbnail and custom thumbnail
- added `customThumbnailSrc` to video card payload and switched settings panel uploader to store upload result there
- switched image display to fallback from custom thumbnail to auto-generated thumbnail
2021-12-09 16:38:05 +00:00
Sanne de Vries
00d9d200f7 Added static player UI to video card
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-09 16:22:58 +00:00
James Morris
25807c9490 Added temporary icons for header card alignment
refs https://github.com/TryGhost/Team/issues/1253
2021-12-09 15:06:25 +00:00
Rishabh
49aab60795 Added first version for new file card
refs https://github.com/TryGhost/Team/issues/1231
2021-12-09 20:30:28 +05:30
Rishabh
997862cf58 Allowed creating audio card directly on file drop in editor
refs https://github.com/TryGhost/Team/issues/1230
2021-12-09 20:30:28 +05:30
Kevin Ansfield
192c983975 First pass at custom thumbnail upload for video card
refs https://github.com/TryGhost/Team/issues/1229

- adds uploader to setting panel
- currently replaces the single/auto-generated thumbnail image
2021-12-09 14:58:28 +00:00
Thibaut Patel
7e48fcd06d Fixed a visual bug in the cards using KoenigBasicHtmlInput
refs https://github.com/TryGhost/Team/issues/1245

- When pressing backspace on an empty `KoenigBasicHtmlInput` that don't use `p` as the default tag, an empty paragraph was created by e21bde39e1/lib/koenig-editor/addon/options/key-commands.js (L171-L176), messing with the style while in edit mode.
- This was fixed by normalizing the tag to be the `defaultTag` in the `didUpdatePost` hook
- Because of this new normalization, we could remove the same normalization from `handlePaste`
2021-12-09 14:08:17 +01:00
djordje vlaisavljevic
24eeaf68ff Updated the product card menu icon
refs https://github.com/TryGhost/Team/issues/1209
2021-12-09 10:18:19 +01:00
Rishabh
f37c0f91d4 Added metadata extraction for audio file in card
refs https://github.com/TryGhost/Team/issues/1230

- extracts audio duration and mimeType metadata for uploaded file
2021-12-09 13:12:45 +05:30
Rishabh
4df58bb022 Fixed thumbnail replace not working on drop for audio cards
refs https://github.com/TryGhost/Team/issues/1230
2021-12-09 00:08:43 +05:30
djordje vlaisavljevic
e9c2942de5 Updated editor styles and template for product card
refs https://github.com/TryGhost/Team/issues/1209
2021-12-08 19:33:55 +01:00
Sanne de Vries
049fe97e7e Updated video card
Refs https://github.com/TryGhost/Team/issues/1229
2021-12-08 17:29:22 +00:00
Thibaut Patel
16d242f763 Added image drag and drop to the product card
refs https://github.com/TryGhost/Team/issues/1245

- followed the pattern from the video card as the image card uses an older ember syntax
2021-12-08 18:28:42 +01:00
Thibaut Patel
b1d0c33c09 Added hover-over on product card stars in edit mode
refs https://github.com/TryGhost/Team/issues/1245

- Used onmouseover because a CSS-only approach wouldn't work
- CSS can only highligh next siblings on hover, while we want to highlight previous sibling in our case
- This adds a hover class on mouseover to the right stars and removes it onmouseout
2021-12-08 17:18:45 +01:00
Sanne de Vries
ed3b5e462f Updated audio card
Refs https://github.com/TryGhost/Team/issues/1230
2021-12-08 15:34:25 +00:00
Kevin Ansfield
9218c72b86 Added an additional blockquote style
refs https://github.com/TryGhost/Team/issues/1239

Repeatedly clicking the quote icon in the editor toolbar or using the <kbd>Ctrl+Q</kbd> keyboard shortcut will cycle through standard-blockquote -> alternative-blockquot -> standard paragraph.
2021-12-08 15:19:39 +00:00
Kevin Ansfield
e21bde39e1 Updated CTRL+Q blockquote keyboard shortcut to cycle through alt style
refs https://github.com/TryGhost/Team/issues/1239

- updates keyboard shortcut behavior to match the quote icon behavior where it cycles through blockquote->aside->p
2021-12-08 15:19:39 +00:00
Thibaut Patel
811ca6d08e Allow multiple paragraphs in the product card description
refs https://github.com/TryGhost/Team/issues/1245
2021-12-08 16:00:49 +01:00
Thibaut Patel
b157bf7c34 Added enter/tab support to the product card title field
refs https://github.com/TryGhost/Team/issues/1245

- Enables keyboard-only title+description input
2021-12-08 15:08:40 +01:00
Thibaut Patel
120deae9b1 Allowed line-breaks in product card description
refs https://github.com/TryGhost/Team/issues/1245
2021-12-08 14:42:00 +01:00
Thibaut Patel
b03f72c59e 🐛 Fixed pasting html into a KoenigBasicHtmlInput
refs https://github.com/TryGhost/Team/issues/1245

- Several inputs where dismissing the content when pasting HTML without the expected input tag
- The inputs where: the caption of the feature image; the email footer; the caption in the bookmark, code, embed, gallery, image, video cards; the callout card title; the product card header and description; the toggle header
- This makes sure the wrapper html tag is the expected one.

Co-authored-by:
- Kevin Ansfield (@kevinansfield)
2021-12-08 14:22:33 +01:00
djordje vlaisavljevic
50516e47d5 Updated editor template and styles for product card
refs https://github.com/TryGhost/Team/issues/1245
2021-12-08 13:55:18 +01:00
Rishabh
e2db69d265 Updated file name handling for audio card
refs https://github.com/TryGhost/Team/issues/1230

- adds a method to prettify filename from the audio file
- cleanup
2021-12-08 17:17:47 +05:30
Thibaut Patel
52530c2949 Updated the product card button in the editor
refs https://github.com/TryGhost/Team/issues/1245

- Disabled the button link to avoid leaving the editor
- Added disabled states when the button is incomplete
2021-12-08 12:07:46 +01:00