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;