Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
editorjs-drag-drop
Advanced tools
Drag/Drop feature for Editor.js.
Get the package
$ npm i --save-dev editorjs-drag-drop
Include module at your application
import DragDrop from 'editorjs-drag-drop';
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>
const editor = new EditorJS({
onReady: () => {
new DragDrop(editor);
},
});
Select the block, drag the toolbar settings button and drop it at the desired position.
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);
},
});
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);
};
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={....}
/>
)
}
Development mode
$ yarn build:dev
Production release
$ yarn build
dist/bundle.js
Run tests
$ yarn test
We welcome everyone to contribute. Make sure you have read the CODE_OF_CONDUCT before.
For information on how to contribute, please refer to our CONTRIBUTING guide.
Features and bug fixes are listed in the CHANGELOG file.
This library is licensed under an MIT license. See LICENSE for details.
Made with 💙 by kommitters Open Source
1.1.7 (12.09.2022)
FAQs
Drag and Drop feature for Editor.js
The npm package editorjs-drag-drop receives a total of 17,347 weekly downloads. As such, editorjs-drag-drop popularity was classified as popular.
We found that editorjs-drag-drop demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.