{"id":13602412,"url":"https://github.com/kommitters/editorjs-drag-drop","last_synced_at":"2025-04-04T09:08:17.907Z","repository":{"id":38334454,"uuid":"272760205","full_name":"kommitters/editorjs-drag-drop","owner":"kommitters","description":"Drag and Drop feature for Editor.js","archived":false,"fork":false,"pushed_at":"2024-04-08T17:48:16.000Z","size":425,"stargazers_count":164,"open_issues_count":4,"forks_count":20,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-04-13T20:30:25.526Z","etag":null,"topics":["drag-and-drop","editorjs","editorjs-plugin","hacktoberfest","javascript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/editorjs-drag-drop","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kommitters.png","metadata":{"funding":{"github":["kommitters"]},"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-06-16T16:35:45.000Z","updated_at":"2024-04-15T14:36:26.876Z","dependencies_parsed_at":"2023-10-23T16:25:27.117Z","dependency_job_id":"52eede92-16cd-4353-a458-e79ea0d62533","html_url":"https://github.com/kommitters/editorjs-drag-drop","commit_stats":{"total_commits":78,"total_committers":18,"mean_commits":4.333333333333333,"dds":0.8076923076923077,"last_synced_commit":"552a52f01ef127e274cabb7c79d6ca460de627cd"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-drag-drop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-drag-drop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-drag-drop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kommitters%2Feditorjs-drag-drop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kommitters","download_url":"https://codeload.github.com/kommitters/editorjs-drag-drop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247149501,"owners_count":20891954,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag-and-drop","editorjs","editorjs-plugin","hacktoberfest","javascript"],"created_at":"2024-08-01T18:01:22.546Z","updated_at":"2025-04-04T09:08:17.876Z","avatar_url":"https://github.com/kommitters.png","language":"JavaScript","funding_links":["https://github.com/sponsors/kommitters"],"categories":["Tools","JavaScript"],"sub_categories":["Plugins"],"readme":"# EditorJS Drag/Drop Plugin\n\n![Stability Badge](https://img.shields.io/badge/stability-stable-green.svg)\n![](https://badgen.net/badge/Editor.js/v2.0/blue)\n[![Coverage Status](https://coveralls.io/repos/github/kommitters/editorjs-drag-drop/badge.svg)](https://coveralls.io/github/kommitters/editorjs-drag-drop)\n[![OpenSSF Best Practices](https://bestpractices.coreinfrastructure.org/projects/6468/badge)](https://bestpractices.coreinfrastructure.org/projects/6468)\n[![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/kommitters/editorjs-drag-drop/badge)](https://api.securityscorecards.dev/projects/github.com/kommitters/editorjs-drag-drop)\n\nDrag/Drop feature for [Editor.js](https://editorjs.io).\n\n![](assets/demo.gif)\n\n## Installation\n\n### Install via NPM\n\nGet the package\n\n```shell\n$ npm i --save-dev editorjs-drag-drop\n```\n\nInclude module at your application\n\n```javascript\nimport DragDrop from \"editorjs-drag-drop\";\n```\n\n### Load from CDN\n\nYou can load a specific version of the package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/editorjs-drag-drop).\n\nRequire this script on a page with Editor.js.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/editorjs-drag-drop\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nAdd the plugin to the onReady property of the Editor.js configuration to initialize it:\n\n```javascript\nconst editor = new EditorJS({\n  onReady: () =\u003e {\n    new DragDrop(editor);\n  },\n});\n```\n\nYou can customize the indicator border style by passing a second parameter to the plugin constructor:\n\n```javascript\nconst editor = new EditorJS({\n  onReady: () =\u003e {\n    new DragDrop(editor, \"2px solid #fff\");\n  },\n});\n```\n\nIf no parameter is provided, the default border style `1px dashed #aaa` is used.\n\nSelect the block, drag the toolbar settings button, and drop it at the desired position.\n\n### Integration with editorjs-undo\n\nIf you're already using [editorjs-undo](https://github.com/kommitters/editorjs-undo), your code might look like this:\n\n```javascript\nconst editor = new EditorJS({\n  onReady: () =\u003e {\n    new Undo({ editor });\n    new DragDrop(editor);\n  },\n});\n```\n\n### Usage with React.\n\nIf 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.\n\n```javascript\nconst handleReady = (editor) =\u003e {\n  new DragDrop(editor);\n};\n\nclass ReactEditor extends Component {\n  render() {\n    return (\n      \u003cEditorJs\n        onReady = { handleReady }\n        tools = { ... }\n      /\u003e\n    )\n  }\n}\n```\n\n**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.\n\n```javascript\nconst handleReady = (editor) =\u003e {\n  new Undo({ editor });\n  new DragDrop(editor);\n};\n```\n\n### Usage with [react-editor-js](https://github.com/Jungwoo-An/react-editor-js).\n\nIf 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:\n\n```javascript\n........\nexport const ReactEditor = () =\u003e {\n  const editorCore = React.useRef(null)\n\n  const handleInitialize = React.useCallback((instance) =\u003e {\n    editorCore.current = instance\n  }, [])\n\n  const handleReady = () =\u003e {\n    const editor = editorCore.current._editorJS;\n    new Undo({ editor })\n    new DragDrop(editor);\n  };\n\n  const ReactEditorJS = createReactEditorJS()\n  return(\n  \u003cReactEditorJS\n    onInitialize={handleInitialize}\n    onReady = {handleReady}\n    tools={....}\n    defaultValue={....}\n  /\u003e\n  )\n}\n```\n\n## Development\n\n**Development mode**\n\n```shell\n$ yarn build:dev\n```\n\n**Production release**\n\n1. Create a production bundle\n\n```shell\n$ yarn build\n```\n\n2. Commit `dist/bundle.js`\n\n**Run tests**\n\n```shell\n$ yarn test\n```\n\n## Code of conduct\n\nWe welcome everyone to contribute. Make sure you have read the [CODE_OF_CONDUCT][coc] before.\n\n## Contributing\n\nFor information on how to contribute, please refer to our [CONTRIBUTING][contributing] guide.\n\n## Changelog\n\nFeatures and bug fixes are listed in the [CHANGELOG][changelog] file.\n\n## License\n\nThis library is licensed under an MIT license. See [LICENSE][license] for details.\n\n## Acknowledgements\n\nMade with 💙 by [kommitters Open Source](https://kommit.co)\n\n[license]: https://github.com/kommitters/editorjs-drag-drop/blob/master/LICENSE\n[coc]: https://github.com/kommitters/editorjs-drag-drop/blob/master/CODE_OF_CONDUCT.md\n[changelog]: https://github.com/kommitters/editorjs-drag-drop/blob/master/CHANGELOG.md\n[contributing]: https://github.com/kommitters/editorjs-drag-drop/blob/master/CONTRIBUTING.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkommitters%2Feditorjs-drag-drop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkommitters%2Feditorjs-drag-drop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkommitters%2Feditorjs-drag-drop/lists"}