README
Project is in development
You can try the slate-devtools
in your project by
npm i -D slate-devtools
Once you installed you can use devtools in your project
import {Devtools, withDevtools} from "slate-devtools"
const Editor = () => {
const [value, setValue] = useState(initialValue);
const editor = useMemo(() => withDevtools(withReact(createEditor())), []);
return (
<div>
<div>
<Slate value={value} editor={editor} onChange={setValue}>
<Editable>
</Slate>
</div>
<Devtools value={value} editor={editor} />
</div>
)
}
The props for Devtools
are
type DevtoolsProps = {
value: Node[]; // NodeList value to show in devtools
editor: ReactEditor; // Corresponding editor
module?: {
[index: string]: unknown;
};
open?: boolean;
height?: string;
style?: CSSProperties;
type?: string;
};
value
value
takes Node[]
which you pass to editor
editor
editor
takes ReactEditor
of the value
you passed
module
The module
takes an object whose value
will be exposed by their keys
in ScriptEditor
open
Setting open
to true
will make the Devtools
to open by default.
By default it is set to false
height
Set the height of the Devtools
by default it is 325px
style
Use it to change the position of the Open Button
type
It sets what key the devtools should check in an Element to get the type of node.
By default the value of type is type
.
This example element stores the type of element in key value
const initialValue = [
{
value: "paragraph",
children: [
{ text: "This is editable " },
{ text: "rich", bold: true },
{ text: " text, " },
{ text: "much", italic: true },
{ text: " better than a " },
{ text: "<textarea>", code: true },
{ text: "!" },
],
},
];
This example element stores the type of element in key type
const initialValue = [
{
type: "paragraph",
children: [
{ text: "This is editable " },
{ text: "rich", bold: true },
{ text: " text, " },
{ text: "much", italic: true },
{ text: " better than a " },
{ text: "<textarea>", code: true },
{ text: "!" },
],
},
];
Disclaimer
The project is in super early life of its development as a result I still didnt implement any animations, visual feedback is not good enough, its not responsive, styling can be improved a lot, RenderHistory
does not provide a lot of useful information and it is filled with unnecessary information.
I am working on fixing these as soon as possible