diff --git a/README.md b/README.md index 3d2a5dc..4cfb305 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ $ npm i --save-dev editorjs-drag-drop Include module at your application ```javascript -import DragDrop from 'editorjs-drag-drop'; +import DragDrop from "editorjs-drag-drop"; ``` ### Load from CDN @@ -38,6 +38,8 @@ Require this script on a page with Editor.js. ## Usage +Add the plugin to the onReady property of the Editor.js configuration to initialize it: + ```javascript const editor = new EditorJS({ onReady: () => { @@ -46,11 +48,23 @@ const editor = new EditorJS({ }); ``` +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. -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. +### Integration with editorjs-undo -If you're already using [editorjs-undo](https://github.com/kommitters/editorjs-undo), then your code will look somewhat like this: +If you're already using [editorjs-undo](https://github.com/kommitters/editorjs-undo), your code might look like this: ```javascript const editor = new EditorJS({ @@ -60,6 +74,7 @@ const editor = new EditorJS({ }, }); ``` + ### 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. @@ -80,15 +95,16 @@ class ReactEditor extends Component { } } ``` -**Note:** If you are already using [editorjs-undo](https://github.com/kommitters/editorjs-undo) your handleReady function must have the editorjs-undo instance. + +**Note:** If you are also using [editorjs-undo](https://github.com/kommitters/editorjs-undo) your handleReady function must have the editorjs-undo instance as well. ```javascript const handleReady = (editor) => { new Undo({ editor }); new DragDrop(editor); }; - ``` + ### Usage with [react-editor-js](https://github.com/Jungwoo-An/react-editor-js). If you are using [react-editor-js](https://github.com/Jungwoo-An/react-editor-js), you should use the 'onInitialize' prop in the ReactEditorJS component to obtain the abstract editorjs as follow: @@ -145,18 +161,23 @@ $ 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](https://kommit.co) [license]: https://github.com/kommitters/editorjs-drag-drop/blob/master/LICENSE