Skip to main content

DropCursorExtension

Summary​

Shows a line indicator for where the drop target will be

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 { DropCursorExtension } from 'remirror/extensions';

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

Examples​

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

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

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

const Basic: React.FC = () => {
  const { manager, state, onChange } = useRemirror({
    extensions,
    content:
      '<p>Drag-and-drop an image file, or drag the image below to view a drop cursor.</p>' +
      '<p><img src="https://dummyimage.com/200x80/479e0c/fafafa"></p>',
    stringHandler: htmlToProsemirrorNode,
  });

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

export default Basic;
Source code
import 'remirror/styles/all.css';

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

const extensions = () => [new ImageExtension(), new DropCursorExtension({ color: '#7963d2' })];

const Color: React.FC = () => {
  const { manager, state, onChange } = useRemirror({
    extensions,
    content:
      '<p>Drag-and-drop an image file, or drag the image below to view a colored drop cursor.</p>' +
      '<p><img src="https://dummyimage.com/200x80/479e0c/fafafa"></p>',
    stringHandler: htmlToProsemirrorNode,
  });

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

export default Color;

API​