Disclaimer: Project still in early stages - API subject to frequent change, use at your own risk.
Right now we only have the packages core
and react
, you'll need those to get started.
yarn add @zettel/core @zettel/react
Now that you have them installed, here's a basic example of a plaintext editor:
import * as React from 'react';
import { useState } from 'react'
import { EditorState } from '@zettel/core'
import Editor from '@zettel/react'
const text = `[One ๐
Line][And another line of text][And another line]`
const App = () => {
const [editorState, setEditorState] = useState(() => EditorState.fromJSON({
text,
ranges: [],
entityMap: {}
}))
return (
<Editor
htmlAttrs={{ spellCheck: false, autoFocus: true, className: 'editor'}}
onChange={setEditorState}
editorState={editorState}
/>
);
}
export default App;
For more examples have a look here
This changes a lot. To focus as much as possible I'll keep this small.
This project wouldn't have come this far without the influence of open source projects such as: