https://github.com/jensneuse/slate-react-dnd-plugin
https://github.com/jensneuse/slate-react-dnd-plugin
dnd drag-and-drop react-dnd slate slate-react slatejs
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jensneuse/slate-react-dnd-plugin
- Owner: jensneuse
- License: mit
- Created: 2018-01-15T12:26:07.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-06T11:38:20.000Z (over 6 years ago)
- Last Synced: 2024-12-02T15:55:16.098Z (10 months ago)
- Topics: dnd, drag-and-drop, react-dnd, slate, slate-react, slatejs
- Language: JavaScript
- Size: 715 KB
- Stars: 36
- Watchers: 5
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# slate-react-dnd-plugin
Add react-dnd to slatejs.
## TOS
- [Installation](#installation)
- [Usage](#usage)
- [Contributors](#contributors)
## Installation
```sh
npm install slate-react-dnd-plugin --save
yarn add slate-react-dnd-plugin
bower install slate-react-dnd-plugin --save
```
## Usage
```ts
import * as React from 'react'
import {Editor} from 'slate-react'
import {Value} from 'slate'
import {inject} from "slate-react-dnd-plugin"
//import {inject} from "../../dist/index"
const initialValue = Value.fromJSON({
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
nodes: [
{
object: 'text',
leaves: [
{
text: 'A line of text in a paragraph.'
}
]
}
]
}
]
}
});
class ParagraphNode extends React.Component {
render(){
return (
{this.props.children}
)
}
}
const blockStyle = {
border: '1px dashed gray',
padding: '0.5rem 1rem',
marginBottom: '.5rem',
backgroundColor: 'white',
cursor: 'move'
};
const plugins = inject([
{
renderNode: (props) => {
switch (props.node.type) {
case 'paragraph':
return ;
default:
return null;
}
}
}
],{
renderBlock: (isDragging,children) => {
const opacity = isDragging? 0 : 1;
return
{children}
}
});
class StoryEditor extends React.Component {
state = {
value: initialValue
};
onChange({value}){
this.setState({value})
}
render(){
return (
)
}
}
export default StoryEditor;
```
```ts
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import StoryEditor from "./StoryEditor"
import {DragPreviewBlock} from "slate-react-dnd-plugin"
import {DragDropContainer} from "slate-react-dnd-plugin"
import {DropBlock} from "slate-react-dnd-plugin"
import {EditorProvider} from "slate-react-dnd-plugin"
/*import DragPreviewBlock from "../../dist/drag-preview-block"
import DragDropContainer from "../../dist/container"
import DropBlock from "../../dist/drop-block"
import EdititorProvider from "../../dist/editor-provider"*/
const insertBlockFn = (hoverIndex, item, parent, change) => {
const result = change.insertNodeByKey(parent.key, hoverIndex, {
object: 'block',
type: 'paragraph',
nodes: [
{
object: 'text',
leaves: [
{
text: 'A new Block via drag&drop'
}
]
}
]
});
item.key = result.value.document.nodes._tail.array[hoverIndex].key;
}
const canDrop = (props, monitor) => {
return true;
}
const onDrop = (item, parent, change) => {
console.log('onDrop', item, parent, change);
change.removeNodeByKey(item.key);
};
const previewBlockStyle = {
backgroundColor: 'white',
cursor: 'move',
}
const renderPreviewBlock = (isDragging,children) => {
const opacity = isDragging ? 0.4 : 1
return
{children}
}
class App extends Component {
render() {
return (
Welcome to React
Insert paragraph from here.
Drop paragraph here to delete it.
);
}
}
export default App;
```
## Contributors
This plugin was initially developed and maintained by one single person:
[Jens Neuse][jens-github].
These users are actively maintaining and/or developing this plugin as of today:
- [Jens Neuse][jens-github] (Project Lead)
- [Walialu][about-walialu] (Mostly Maintenance only as of now)
- [Jonas Bergner][jonas-github] (Various improvements of the code)
[jens-github]: https://github.com/jensneuse
[about-walialu]: https://about.walialu.com/
[jonas-github]: https://github.com/java-jonas