zmeditorjs-drag-drop

Drag and Drop feature for Editor.js

latest

Source

npm

Version: 1.1.21

Version published: 2 years ago

Maintainers: 1

Created: 2 years ago

Source

EditorJS Drag/Drop Plugin

Drag/Drop feature for Editor.js.

Installation

Install via NPM

Get the package

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

Include module at your application

import DragDrop from 'editorjs-drag-drop';

Load from CDN

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

Require this script on a page with Editor.js.

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

Usage

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

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

You can optionally provide a second parameter to customize the indicator border style. If no parameter is provided, the default border style 1px dashed #aaa is used.

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

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

Usage with React.

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.

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

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

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

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

Usage with react-editor-js.

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

........
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={....}
  />
  )
}