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 React from 'react';
import { DropCursorExtension, ImageExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';

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

const Basic = (): 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,
              },
            },
          ],
        },
        {
          type: 'paragraph',
          content: [
            {
              type: 'text',
              text: 'You can see a green image above.',
            },
          ],
        },
        {
          type: 'paragraph',
          content: [
            {
              type: 'text',
              text: 'Drag and drop an image file to editor to insert it.',
            },
          ],
        },
      ],
    },
  });

  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 React from 'react';
import { DropCursorExtension, ImageExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';

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

const Resizable = (): 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,
              },
            },
          ],
        },
        {
          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.',
            },
          ],
        },
        {
          type: 'paragraph',
          content: [
            {
              type: 'text',
              text: 'Drag and drop an image file to editor to insert 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 React from 'react';
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

• ImageExtension