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