Added "Gifs" card to the editor

refs https://github.com/TryGhost/Team/issues/1225

When inserted opens a searchable gif selector, creating an image card when a gif is chosen.

Includes keyboard navigation once open:
- `Tab`/`Shift+Tab` cycles highlighted gif through search result order
- `Up` / `Down` / `Left` / `Right` moves highlight in the respective direction
- `Enter` inserts highlighted gif

For the gifs card to be activated it's necessary to add a Tenor API key (obtained freely from https://tenor.com/gifapi) via your config.production.json file:

```
  ...
  "tenor": {
    "publicReadOnlyApiKey": "YOUR_KEY"
  }
}
```
This commit is contained in:
Kevin Ansfield 2021-12-01 12:18:55 +00:00
parent 466a779d74
commit a7cf374566
3 changed files with 1 additions and 15 deletions

View File

@ -63,7 +63,6 @@ export default Service.extend({
calloutCard: feature('calloutCard', {developer: true}), calloutCard: feature('calloutCard', {developer: true}),
nftCard: feature('nftCard', {developer: true}), nftCard: feature('nftCard', {developer: true}),
accordionCard: feature('accordionCard', {developer: true}), accordionCard: feature('accordionCard', {developer: true}),
gifsCard: feature('gifsCard', {developer: true}),
fileCard: feature('fileCard', {developer: true}), fileCard: feature('fileCard', {developer: true}),
audioCard: feature('audioCard', {developer: true}), audioCard: feature('audioCard', {developer: true}),
videoCard: feature('videoCard', {developer: true}), videoCard: feature('videoCard', {developer: true}),

View File

@ -378,19 +378,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Cardmageddon - Gifs</h4>
<p class="gh-expandable-description">
Adds a gif selector using Tenor for the image card
</p>
</div>
<div class="for-switch">
<GhFeatureFlag @flag="gifsCard" />
</div>
</div>
</div>
<div class="gh-expandable-block"> <div class="gh-expandable-block">
<div class="gh-expandable-header"> <div class="gh-expandable-header">
<div> <div>

View File

@ -190,7 +190,7 @@ export const CARD_MENU = [
payload: { payload: {
imageSelector: 'tenor' imageSelector: 'tenor'
}, },
isAvailable: ['feature.gifsCard', 'config.tenor.publicReadOnlyApiKey'] isAvailable: 'config.tenor.publicReadOnlyApiKey'
}, },
{ {
label: 'Toggle', label: 'Toggle',