A Slate JS 0.5+ and React based WYSIWYG editor.
MIT License
LIVE DEMO: mio-editor
A Slate JS 0.5+ and React based WYSIWYG editor. It's a ready-to-use react component that provides an interface to edit documents and get them as a JSON.
Just import MioEditor. Editor's value is handled by value
and onValueChange
props.
import MioEditor from 'mio-editor';
const App = () => {
const [value, setValue] = useState(null);
const onValueChange = value => {
setValue(value);
// ...
};
return (
<MioEditor
value={value}
onValueChange={onValueChange}
/>
);
};
In this example, it will render an empty page ready to be edited. Everytime an edition occur, onValueChange
will be called with a JSON representing new content. The content JSON looks like:
{
"type":"header",
"children":[
{
"text":"This is an editable rich text."
}
]
},
{
"type":"paragraph",
"children":[
{
"text":"We have marks like "
},
{
"text":"bold",
"bold":true
},
{
"text":", "
},
{
"text":"italic",
"italic":true
},
{
"text":", "
},
{
"text":"underline",
"underline":true
},
{
"text":" and "
},
{
"text":"strikethrough.",
"strikethrough":true
}
]
},
{
"type":"math",
"children":[
{
"text":"sum_(i=1)^n i^3=((n(n+1))/2)^2"
}
]
},
{
"type":"code",
"children":[
{
"text":"function getIntoAnArgument(...args) {\n args.forEach(arg => console.log(arg));\n}"
}
]
},
];
Which represents the following visual content:
It is possible to pass an initial value to editor. Just pass it to useState
, where initialValue is a JSON like the one above. You can get more examples looking in the examples folder.
const App = () => {
const [value, setValue] = useState(initialValue);
//...
}
React 16.X.X
npm install mio-editor --save