Skip to main content

ImageExtension

Summary

The image extension for placing images into your editor.

Usage

Installation

This extension is installed for you when you install the main remirror package.

You can use the imports in the following way:

import { ImageExtension } from 'remirror/extensions';

The extension is provided by the @remirror/extension-image package.

Examples

Here is a basic image example. You can see a grean image below.

Source code
import 'remirror/styles/all.css';

import { ImageExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';

const extensions = () => [new ImageExtension()];

const Basic = ({ delaySeconds = 1 }: { delaySeconds: number }): JSX.Element => {
const imageSrc = 'https://dummyimage.com/2000x800/479e0c/fafafa';
const proxySrc = `https://deelay.me/${delaySeconds * 1000}/${imageSrc}`;

const { manager, state, onChange } = useRemirror({
extensions,
content: {
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{
type: 'image',
attrs: {
height: 160,
width: 400,
src: proxySrc,
},
},
],
},
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'You can see a green image above.',
},
],
},
],
},
});

return (
<ThemeProvider>
<Remirror
manager={manager}
autoFocus
onChange={onChange}
initialContent={state}
autoRender='end'
/>
</ThemeProvider>
);
};

export default Basic;

You can also make an image resizable by using enableResizing option.

Source code
import 'remirror/styles/all.css';

import { ImageExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';

const extensions = () => [new ImageExtension({ enableResizing: true })];

const Resizable = ({ delaySeconds = 1 }: { delaySeconds: number }): JSX.Element => {
const imageSrc = 'https://dummyimage.com/2000x800/479e0c/fafafa';
const proxySrc = `https://deelay.me/${delaySeconds * 1000}/${imageSrc}`;

const { manager, state, onChange } = useRemirror({
extensions,
content: {
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{
type: 'image',
attrs: {
height: 160,
width: 400,
src: proxySrc,
},
},
],
},
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'You can see a resizable image above. Move your mouse over the image and drag the resizing handler to resize it.',
},
],
},
],
},
});

return (
<ThemeProvider>
<Remirror
manager={manager}
autoFocus
onChange={onChange}
initialContent={state}
autoRender='end'
/>
</ThemeProvider>
);
};

export default Resizable;

You can further customize ImageExtension by extending it. For example, using a <figure> element to wrap the image and adding a <figcaption> element.

Source code
import 'remirror/styles/all.css';

import { ApplySchemaAttributes, NodeExtensionSpec, NodeSpecOverride } from 'remirror';
import { ImageExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';

class FigcaptionExtension extends ImageExtension {
createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
const spec = super.createNodeSpec(extra, override);

return {
...spec,
attrs: {
...spec.attrs,
figcaptionText: { default: '' },
},
toDOM: (node) => [
'figure',
{
style: 'border: 2px solid #479e0c; padding: 8px; margin: 8px; text-align: center;',
},
spec.toDOM!(node),
[
'figcaption',
{ style: 'background-color: #3d3d3d; color: #f1f1f1; padding: 8px;' },
node.attrs.figcaptionText,
],
],
};
}
}

const extensions = () => [new FigcaptionExtension()];

const WithFigcaption = (): JSX.Element => {
const imageSrc = 'https://dummyimage.com/2000x800/479e0c/fafafa';

const { manager, state, onChange } = useRemirror({
extensions,
content: {
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{
type: 'image',
attrs: {
height: 160,
width: 400,
src: imageSrc,
figcaptionText: 'This is a <figcaption> element',
},
},
],
},
],
},
});

return (
<ThemeProvider>
<Remirror
manager={manager}
autoFocus
onChange={onChange}
initialContent={state}
autoRender='end'
/>
</ThemeProvider>
);
};

export default WithFigcaption;

API