Editor.js Drag and Drop Plugin

You can install the plugin via NPM or load it directly from a CDN.

Via NPM

Install the package as a dev dependency:

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

Then import it in your application:

import DragDrop from "editorjs-drag-drop";

Via CDN

Include the script tag in your HTML page containing Editor.js:

<script src="https://cdn.jsdelivr.net/npm/editorjs-drag-drop"></script>

To enable drag and drop functionality, initialize the DragDrop plugin within the onReady callback of your Editor.js configuration.

To use the plugin, select a block and drag the toolbar settings button to the desired position.

Customizing the indicator border

You can pass a second string parameter to the DragDrop constructor to define the CSS border style of the drop indicator. If no parameter is provided, it defaults to 1px dashed #aaa.

// Default usage
const editor = new EditorJS({
  onReady: () => {
    new DragDrop(editor);
  },
});

// Custom border style
const editor = new EditorJS({
  onReady: () => {
    new DragDrop(editor, "2px solid #fff");
  },
});

If you are using the editorjs-undo plugin, ensure both plugins are initialized within the onReady callback. The order of initialization typically follows the order of plugin requirements.

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

When using the react-editor-js library, use the onInitialize prop to capture the editor instance via a ref, and then use the onReady prop to initialize the DragDrop plugin using the internal _editorJS instance.

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(
  <ReactEditorJS
    onInitialize={handleInitialize}
    onReady = {handleReady}
    tools={....}
    defaultValue={....}
  />
  )
}

In a React environment, create a handler function to store the DragDrop instance. This function should be passed to the onReady prop of your Editor.js component.

Note: If using editorjs-undo, your handleReady function must initialize both plugins.

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

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

When instantiating the DragDrop class, you can pass a second argument to define the CSS border style used to indicate where a block will be dropped. This style is applied to the .ce-block__content element of the target block.

Default value: '1px dashed #aaa'

// Example with a custom border style
new DragDrop({
  configuration: { holder: 'editor' },
  blocks: editor.blocks,
  toolbar: editor.toolbar,
  save: editor.save
}, '2px solid #000');