@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
37 lines (36 loc) • 1.54 kB
JavaScript
import { mediaInline } from '@atlaskit/adf-schema';
import { getMediaAttrs } from './toDOMAttrs';
const skeletonStyling = `background: ${"var(--ds-background-neutral, #0515240F)"};`;
// Matches media
const fallbackAspectRatio = 1.25;
// @nodeSpecException:toDOM patch
export const mediaInlineSpecWithFixedToDOM = () => {
return {
...mediaInline,
toDOM: node => {
const dataAttrs = getMediaAttrs('mediaInline', node);
if (node.attrs.type === 'image') {
const aspectRatio = node.attrs.width && node.attrs.height ? node.attrs.width / node.attrs.height : fallbackAspectRatio;
return ['span', {
...dataAttrs,
style: 'display: inline-block; transform: translateY(6px)',
class: 'media-inline-image-wrapper'
}, ['span', {
height: '100%',
width: '100%',
// Transparent image workaround to control styling
src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
style: `display: inline-block; aspect-ratio: ${aspectRatio}; height: 100%; width: 100%; border-radius: ${"var(--ds-radius-small, 3px)"}; ${skeletonStyling}`
}]];
} else {
return ['span', {
...dataAttrs,
style: `display: inline-block; transform: translateY(6px); ${skeletonStyling}`,
class: 'media-inline-image-wrapper'
}, ['span', {
style: `display: inline-block; height: 100%; width: 100%; aspect-ratio: ${fallbackAspectRatio};`
}]];
}
}
};
};