βοΈThe richtext markdown editor from the future.
MIT License
Editure is a richtext markdown editor built on top of Slate, with out-of-the-box support for markdown shortcuts, hotkeys, serialization. It aims to provide editing experience on par with Typora or Yuque.
Warning: Editure is currently experimental. DO NOT USE IT IN PRODUCTION!
Ctrl+B
or Cmd+B
Marks: bold, italic, underline, strikethrough and link.
Blocks: paragraphs, headings, blockquotes, code blocks, note blocks, bulleted lists, numbered lists, images, and horizontal lines.
npm install editure editure-react
# or if you prefer yarn:
yarn add editure editure-react
A quick demo:
import Editure from 'editure-react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { value: [] };
}
handleChange = (value) => {
this.setState({ value });
};
render() {
return <Editure value={this.state.value} onChange={this.handleChange} />;
}
}
Or, if you prefer Hooks:
import Editure from 'editure-react';
function MyComponent() {
const [value, setValue] = useState([]);
return <Editure value={value} onChange={setValue} />;
}
As in Slate, the value
prop is a plain JavaScript object. You can perform serialization with JSON
global object:
// serialize to JSON
const serialized = JSON.stringify(value);
// parse from JSON
const value = JSON.stringify(serialized);
Moreover, Editure provides serialization support for HTML and Markdown, for example:
import { toHtml, toMarkdown, parseHtml, parseMarkdown } from 'editure';
// serialize to HTML
const htmlString = toHtml(value);
// parse from HTML
const value = parseHtml(htmlString);
// serialize to Markdown
const markdownString = toMarkdown(value);
// parse from Markdown
const value = parseMarkdown(markdownString);
editure
The editure
package provides low-level utilities to work with Slate.
editure-react
Here is a full list of props from Editure
component:
value
: the current value of the editoronChange
: handler called after the content changedplaceholder
: placeholder string for the editorreadOnly
: if true
, the editor won't allow changing its contents.MIT.