Ghost/ghost/admin/lib/koenig-editor/addon/options/cards.js
Kevin Ansfield a04adae8d2 Koenig - Embed card
refs https://github.com/TryGhost/Ghost/issues/9623
requires https://github.com/TryGhost/Ghost/pull/9666
- `{{koenig-card-embed}}`
    - URL input
    - perform oembed lookup & fetch on <kbd>Enter</kbd>
    - remove card if enter pressed with empty URL
    - show error message on server error
        - "retry" returns to input bar
        - "paste as link" removes card and outputs link
        - "X" removes card
    - force embedded <script> tags to run
    - wrap embed html with `.koenig-embed-{video,photo,rich}` class
- add embed cards to the (+) and /-menus
    - "section" support in the card menus
    - refactor to use single card menu map and content component for both menus
    - update /-menu keyboard movement to handle sections
- add parameter support to /-menu commands
  - `/embed {url}` will insert embed card and automatically fetch oembed for supplied url
2018-06-12 14:07:50 +01:00

97 lines
2.5 KiB
JavaScript

import createComponentCard from '../utils/create-component-card';
export default [
createComponentCard('hr', {hasEditMode: false, selectAfterInsert: false}),
createComponentCard('image', {hasEditMode: false}),
createComponentCard('markdown'),
createComponentCard('card-markdown'), // backwards-compat with markdown editor
createComponentCard('html'),
createComponentCard('code'),
createComponentCard('embed', {hasEditMode: false})
];
export const CARD_MENU = [
{
title: 'Basic',
items: [{
label: 'Image',
icon: 'koenig/image',
matches: ['image', 'img'],
type: 'card',
replaceArg: 'image'
},
{
label: 'Markdown',
icon: 'koenig/markdown',
matches: ['markdown', 'md'],
type: 'card',
replaceArg: 'markdown'
},
{
label: 'HTML',
icon: 'koenig/html',
matches: ['html'],
type: 'card',
replaceArg: 'html'
},
{
label: 'Divider',
icon: 'koenig/divider',
matches: ['divider', 'horizontal-rule', 'hr'],
type: 'card',
replaceArg: 'hr'
}]
},
{
title: 'Embed',
items: [{
label: 'YouTube',
icon: 'koenig/youtube',
matches: ['youtube'],
type: 'card',
replaceArg: 'embed',
params: ['url']
},
{
label: 'Twitter',
icon: 'koenig/twitter',
matches: ['twitter'],
type: 'card',
replaceArg: 'embed',
params: ['url']
},
{
label: 'Facebook',
icon: 'koenig/facebook',
matches: ['facebook'],
type: 'card',
replaceArg: 'embed',
params: ['url']
},
{
label: 'SoundCloud',
icon: 'koenig/soundcloud',
matches: ['soundcloud'],
type: 'card',
replaceArg: 'embed',
params: ['url']
},
{
label: 'CodePen',
icon: 'koenig/codepen',
matches: ['codepen'],
type: 'card',
replaceArg: 'embed',
params: ['url']
},
{
label: 'Other...',
icon: 'koenig/code-block',
matches: ['embed'],
type: 'card',
replaceArg: 'embed',
params: ['url']
}]
}
];