{"id":16482716,"url":"https://github.com/jensneuse/slate-react-dnd-plugin","last_synced_at":"2025-08-01T22:33:05.198Z","repository":{"id":57362924,"uuid":"117542364","full_name":"jensneuse/slate-react-dnd-plugin","owner":"jensneuse","description":null,"archived":false,"fork":false,"pushed_at":"2019-06-06T11:38:20.000Z","size":732,"stargazers_count":36,"open_issues_count":2,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-02T15:55:16.098Z","etag":null,"topics":["dnd","drag-and-drop","react-dnd","slate","slate-react","slatejs"],"latest_commit_sha":null,"homepage":null,"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/jensneuse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-15T12:26:07.000Z","updated_at":"2023-07-03T11:33:59.000Z","dependencies_parsed_at":"2022-09-10T03:01:28.326Z","dependency_job_id":null,"html_url":"https://github.com/jensneuse/slate-react-dnd-plugin","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jensneuse%2Fslate-react-dnd-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jensneuse%2Fslate-react-dnd-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jensneuse%2Fslate-react-dnd-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jensneuse%2Fslate-react-dnd-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jensneuse","download_url":"https://codeload.github.com/jensneuse/slate-react-dnd-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228413888,"owners_count":17915914,"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":["dnd","drag-and-drop","react-dnd","slate","slate-react","slatejs"],"created_at":"2024-10-11T13:11:43.950Z","updated_at":"2024-12-06T04:57:37.799Z","avatar_url":"https://github.com/jensneuse.png","language":"JavaScript","readme":"# slate-react-dnd-plugin\n\nAdd react-dnd to slatejs.\n\n## TOS\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Contributors](#contributors)\n\n## Installation \n\n```sh\nnpm install slate-react-dnd-plugin --save\nyarn add slate-react-dnd-plugin\nbower install slate-react-dnd-plugin --save\n```\n\n## Usage\n\n```ts\nimport * as React from 'react'\nimport {Editor} from 'slate-react'\nimport {Value} from 'slate'\n\nimport {inject} from \"slate-react-dnd-plugin\"\n//import {inject} from \"../../dist/index\"\n\nconst initialValue = Value.fromJSON({\n    document: {\n        nodes: [\n            {\n                object: 'block',\n                type: 'paragraph',\n                nodes: [\n                    {\n                        object: 'text',\n                        leaves: [\n                            {\n                                text: 'A line of text in a paragraph.'\n                            }\n                        ]\n                    }\n                ]\n            }\n        ]\n    }\n});\n\nclass ParagraphNode extends React.Component {\n    render(){\n        return (\u003cp {...this.props.attributes} \u003e{this.props.children}\u003c/p\u003e)\n    }\n}\n\nconst blockStyle = {\n    border: '1px dashed gray',\n    padding: '0.5rem 1rem',\n    marginBottom: '.5rem',\n    backgroundColor: 'white',\n    cursor: 'move'\n};\n\nconst plugins = inject([\n    {\n        renderNode: (props) =\u003e {\n            switch (props.node.type) {\n                case 'paragraph':\n                    return \u003cParagraphNode {...props} /\u003e;\n                default:\n                    return null;\n            }\n        }\n    }\n],{\n    renderBlock: (isDragging,children) =\u003e {\n\n        const opacity = isDragging? 0 : 1;\n\n        return \u003cdiv style={{\n            ...blockStyle,\n            opacity\n        }}\u003e{children}\u003c/div\u003e\n    }\n});\n\nclass StoryEditor extends React.Component {\n\n    state = {\n        value: initialValue\n    };\n\n    onChange({value}){\n        this.setState({value})\n    }\n\n    render(){\n        return (\n            \u003cEditor\n                value={this.state.value}\n                plugins={plugins}\n                onChange={this.onChange.bind(this)}/\u003e\n        )\n    }\n}\n\nexport default StoryEditor;\n```\n\n```ts\nimport React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nimport StoryEditor from \"./StoryEditor\"\n\nimport {DragPreviewBlock} from \"slate-react-dnd-plugin\"\nimport {DragDropContainer} from \"slate-react-dnd-plugin\"\nimport {DropBlock} from \"slate-react-dnd-plugin\"\nimport {EditorProvider} from \"slate-react-dnd-plugin\"\n\n/*import DragPreviewBlock from \"../../dist/drag-preview-block\"\nimport DragDropContainer from \"../../dist/container\"\nimport DropBlock from \"../../dist/drop-block\"\nimport EdititorProvider from \"../../dist/editor-provider\"*/\n\nconst insertBlockFn = (hoverIndex, item, parent, change) =\u003e {\n\n  const result = change.insertNodeByKey(parent.key, hoverIndex, {\n    object: 'block',\n    type: 'paragraph',\n    nodes: [\n      {\n        object: 'text',\n        leaves: [\n          {\n            text: 'A new Block via drag\u0026drop'\n          }\n        ]\n      }\n    ]\n  });\n\n  item.key = result.value.document.nodes._tail.array[hoverIndex].key;\n\n}\n\nconst canDrop = (props, monitor) =\u003e {\n  return true;\n}\n\nconst onDrop = (item, parent, change) =\u003e {\n  console.log('onDrop', item, parent, change);\n  change.removeNodeByKey(item.key);\n};\n\nconst previewBlockStyle = {\n\tbackgroundColor: 'white',\n\tcursor: 'move',\n}\n\nconst renderPreviewBlock = (isDragging,children) =\u003e {\n  const opacity = isDragging ? 0.4 : 1\n  return \u003cdiv style={{ ...previewBlockStyle, opacity }}\u003e{children}\u003c/div\u003e\n}\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cheader className=\"App-header\"\u003e\n          \u003cimg src={logo} className=\"App-logo\" alt=\"logo\" /\u003e\n          \u003ch1 className=\"App-title\"\u003eWelcome to React\u003c/h1\u003e\n        \u003c/header\u003e\n        \u003cDragDropContainer\u003e\n          \u003cEditorProvider\u003e\n            \u003cdiv className=\"wrapper\"\u003e\n              \u003cdiv className=\"editor\"\u003e\n                \u003cStoryEditor/\u003e\n              \u003c/div\u003e\n              \u003cdiv className=\"rightMenu\"\u003e\n                \u003cDragPreviewBlock className=\"rightMenu\" onHover={insertBlockFn} renderBlock={renderPreviewBlock} \u003e\n                  \u003cdiv className=\"dragItem\"\u003e\n                    \u003cp\u003eInsert paragraph from here.\u003c/p\u003e\n                  \u003c/div\u003e\n                \u003c/DragPreviewBlock\u003e\n                \u003cDropBlock canDrop={canDrop} onDrop={onDrop}\u003e\n                  \u003cdiv className=\"dustbin\"\u003e\n                    \u003cp\u003eDrop paragraph here to delete it.\u003c/p\u003e\n                  \u003c/div\u003e\n                \u003c/DropBlock\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/EditorProvider\u003e\n        \u003c/DragDropContainer\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\n## Contributors\n\nThis plugin was initially developed and maintained by one single person:\n[Jens Neuse][jens-github].\n\nThese users are actively maintaining and/or developing this plugin as of today:\n\n- [Jens Neuse][jens-github] (Project Lead)\n- [Walialu][about-walialu] (Mostly Maintenance only as of now)\n- [Jonas Bergner][jonas-github] (Various improvements of the code)\n\n\n\n[jens-github]: https://github.com/jensneuse\n[about-walialu]: https://about.walialu.com/\n[jonas-github]: https://github.com/java-jonas\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjensneuse%2Fslate-react-dnd-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjensneuse%2Fslate-react-dnd-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjensneuse%2Fslate-react-dnd-plugin/lists"}