EditorJS Drag/Drop Plugin

!Stability Badge

Drag/Drop feature for Editor.js.


Installation

$3

Get the package

``shell
$ npm i --save-dev editorjs-drag-drop
`

Include module at your application

`javascript
import DragDrop from "editorjs-drag-drop";
`

$3

You can load a specific version of the package from jsDelivr CDN.

Require this script on a page with Editor.js.

`html

`

Usage

Add the plugin to the onReady property of the Editor.js configuration to initialize it:

`javascript
const editor = new EditorJS({
onReady: () => {
new DragDrop(editor);
},
});
`

You can customize the indicator border style by passing a second parameter to the plugin constructor:

`javascript
const editor = new EditorJS({
onReady: () => {
new DragDrop(editor, "2px solid #fff");
},
});
`

If no parameter is provided, the default border style 1px dashed #aaa is used.

Select the block, drag the toolbar settings button, and drop it at the desired position.

$3

If you're already using editorjs-undo, your code might look like this:

`javascript
const editor = new EditorJS({
onReady: () => {
new Undo({ editor });
new DragDrop(editor);
},
});
`

$3

If you are using React, you could create a function to handle the onReady property, the function will store the DragDrop instance. Then, you must call the function in onReady in the editorJS instance.

`javascript
const handleReady = (editor) => {
new DragDrop(editor);
};

class ReactEditor extends Component {
render() {
return (
onReady = { handleReady }
tools = { ... }
/>
)
}
}
`

Note: If you are also using editorjs-undo your handleReady function must have the editorjs-undo instance as well.

`javascript
const handleReady = (editor) => {
new Undo({ editor });
new DragDrop(editor);
};
`

$3

If you are using react-editor-js, you should use the 'onInitialize' prop in the ReactEditorJS component to obtain the abstract editorjs as follow:

`javascript
........
export const ReactEditor = () => {
const editorCore = React.useRef(null)

const handleInitialize = React.useCallback((instance) => {
editorCore.current = instance
}, [])

const handleReady = () => {
const editor = editorCore.current._editorJS;
new Undo({ editor })
new DragDrop(editor);
};

const ReactEditorJS = createReactEditorJS()
return(
onInitialize={handleInitialize}
onReady = {handleReady}
tools={....}
defaultValue={....}
/>
)
}
`

Development

Development mode

`shell
$ yarn build:dev
`

Production release

1. Create a production bundle

`shell
$ yarn build
`

2. Commit dist/bundle.js

Run tests

`shell
$ yarn test
``

Code of conduct

We welcome everyone to contribute. Make sure you have read the [CODE_OF_CONDUCT][coc] before.

Contributing

For information on how to contribute, please refer to our [CONTRIBUTING][contributing] guide.

Changelog

Features and bug fixes are listed in the [CHANGELOG][changelog] file.

License

This library is licensed under an MIT license. See [LICENSE][license] for details.

Acknowledgements

Made with 💙 by kommitters Open Source

[license]: https://github.com/kommitters/editorjs-drag-drop/blob/master/LICENSE
[coc]: https://github.com/kommitters/editorjs-drag-drop/blob/master/CODE_OF_CONDUCT.md
[changelog]: https://github.com/kommitters/editorjs-drag-drop/blob/master/CHANGELOG.md
[contributing]: https://github.com/kommitters/editorjs-drag-drop/blob/master/CONTRIBUTING.md