I created a devtool to assist in debugging

[nivekithan]

I created a devtool that can be used with slate and slate-react to help with debugging.

My first thought was to create a pull request not an issue.

But since the devtool lives inside my side project, extracting that and making sure that it works with slate's lint and other requirements is a excruciating job and I don't know even know whether you will be interested that's why I created a issue before pull request

Below I have mentioned the features and problem it solves. Please have a look at it and let me know whether you are interested or not so that I can make a pr.

Problem it solves

As a educative project I am building a text editor and I choose to use slatejs for that but debugging the code is really though since I have to look at value and operation of editor to figure out the problem.

I tried console.log({value, operation}) and chrome devtools which solved simple bugs but once the app started to become complex, the bugs are also started to become complex (isolating the bug and reproducing bug also became challenging)

Thats why I built a devtool which helps me in identifying what went wrong and where it went wrong and also helps in reproducing the error without messing with business logic.

The way how I solved it can be seen in Feature section

Features

1. DevSlate

The DevSlate component renderers the initial value from your richtext example

// Rich text example

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: "!" },
    ],
  },
  {
    type: "paragraph",
    children: [
      {
        text:
          "Since it's rich text, you can do things like turn a selection of text ",
      },
      { text: "bold", bold: true },
      {
        text:
          ", or add a semantically rendered block quote in the middle of the page, like this:",
      },
    ],
  },
  {
    type: "block-quote",
    children: [{ text: "A wise quote." }],
  },
  {
    type: "paragraph",
    children: [{ text: "Try it out for yourself!" }],
  },
];

DevSlate on its own can be only used to see the value. But using that with PropertiesEditor and RenderHistory is where it shines.

2. PropertiesEditor

PropertiesEditor can be used to edit the properties of a Node.

PropertiesEditor uses JSON. So as long as the the property is supported my JSON you can edit it.

PropertiesEditor does not support editing children but does support editing text

3. RenderHistory

RenderHistory records every single Operation that happened to the editor and allows you to see those changes and it also even allows to you to go back to that state and continue from that.

I was able to achieve this functionality by writing a custom withHistory plugin

4. ScriptEditor

It allows you write and run any valid javascript code and you can also use Transfroms to apply any operations to the editor

Disclaimer

This devtool is similar to react-query devtool not like react devtool

I created the devtool using vitejs , windicss, jotai

• vitejs instead of create-react-app
• windicss instead of tailwindcss
• jotai for state management instead of redux

By the way styling are just a prototype not final version.

---

I want to add more information about devtools but I think this is enough to make a decision about whether you are interested in this or not.

If you are not interested then you can close the issue.

If you still feel that information is not enough to make a decision or you are interested then I can make a pr and then we can discuss about other things.

Before I make a pr I just have one question

• Where I should I create the project? My plan is to create the project at packages/slate-devtools is this okay?

[ianstormtaylor]

@nivekithan this is awesome! I love the idea, and it seems like a great tool.

As a first step the best path might be to open-source the codebase in a separate repository from Slate, because it definitely seems like something a lot of folks would want to use. And if it's being used more and works well we could then incorporate it into the Slate codebase. (My only issue would be finding time for maintenance, since I'm not sure I'd have the time to maintain the extra components myself, so it would need to have some more buy-in from the community first before I'd want to take it on as part of core.)

Later, if we bring it into Slate I think we'd likely need to change the styling solution to be something CSS-in-JS-like so that there aren't external files, similar to how the small amount of styles in core work. But I haven't worked on devtools components before so I'm not totally sure on the best approach. (Something like Leva might be a good place to look for ideas.)

Either way though, it looks like a great tool, so nice work!

[nivekithan]

Understood

Within a few days I will open source the codebase and will continue to work on improving the code quality and also implement new features like (supporting multiple editors and others).

In future if the community likes it we would discuss about making it as part of slate core.

[nivekithan]

I published slate-devtools to npm you can check that here https://www.npmjs.com/package/slate-devtools and you can check repo here https://github.com/nivekithan/slate-devtools .

I tested it by installing it in a demo project it seems to work. But I am not sure.

Its night here so I am going to sleep.

Only tom I can make sure that everything is working properly.

[RavenColEvol]

Should we close this issue? @nivekithan @ianstormtaylor

[nivekithan]

Yeah, you can close it 👍

On Sun, 29 Jan 2023, 11:47 Ravi Lamkoti, @.***> wrote:

Should we close this issue? @nivekithan https://github.com/nivekithan @ianstormtaylor https://github.com/ianstormtaylor

— Reply to this email directly, view it on GitHub https://github.com/ianstormtaylor/slate/issues/4112#issuecomment-1407574003, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMREXOFUUTQRPPWY45XZ3V3WUYDQLANCNFSM4YVCLEZQ . You are receiving this because you were mentioned.Message ID: @.***>