@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
72 lines (70 loc) • 1.99 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { Fragment, useCallback, useMemo } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { getRandomHex } from '@atlaskit/media-common';
import { useFilePreview } from '@atlaskit/media-file-preview';
import { MediaImage } from '@atlaskit/media-ui';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { InlineImageCardLoadingView } from './views/loading-view';
export const InlineImageCard = ({
dimensions,
identifier,
renderError,
alt,
isLazy,
ssr,
crop,
stretch
}) => {
// Generate unique traceId for file
const traceContext = useMemo(() => ({
traceId: getRandomHex(8)
}), []);
// Ignored via go/ees007
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
// TODO do we need to handle nonCriticalError
const {
preview,
error: previewError,
onImageError,
onImageLoad,
getSsrScriptProps,
copyNodeRef
} = useFilePreview({
identifier,
ssr,
dimensions,
traceContext
});
const memoizedOnImageLoad = useCallback(() => {
onImageLoad(preview);
}, [onImageLoad, preview]);
if (previewError) {
return renderError({
error: previewError
});
}
if (!preview) {
return jsx(InlineImageCardLoadingView, null);
}
return jsx(Fragment, null, jsx(MediaImage, {
dataURI: preview.dataURI,
alt: alt,
previewOrientation: preview.orientation,
onImageLoad: expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedOnImageLoad : () => {
onImageLoad(preview);
},
onImageError: onImageError,
loading: isLazy ? 'lazy' : undefined,
forceSyncDisplay: !!ssr,
crop: crop,
stretch: stretch,
ref: copyNodeRef
}), getSsrScriptProps &&
// eslint-disable-next-line react/jsx-props-no-spreading
jsx("script", getSsrScriptProps()));
};