slate-devtools v0.0.15

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