What does the slate dom module do? I didn't see any introduction.

[xhc-code]

Hello, what is the usage of slate dom? What area is responsible for? I want to learn the development of slate. There is no introduction or usage instructions for this module in the official documentation of Slatejs.

It's impossible for me to open it. Possible regional issues.
https://join.slack.com/t/slate-js/shared_invite/zt-f8t986ip-7dA1DyiqPpzootz1snKXkw

[12joan]

The slate-dom package was historically part of slate-react, but was refactored out "to make it easier for library authors to incorporate Slate without having to rewrite all of the DOM utils."

[xhc-code]

The slate-dom package was historically part of slate-react, but was refactored out "to make it easier for library authors to incorporate Slate without having to rewrite all of the DOM utils."

ok，Excuse me, does learning source code start with examples under site/examples? These examples refer to the contents of the pre built dist directory. Although there is a source.map, it is not intuitive to interrupt and look at it in the browser. Is this my way of debugging the source code incorrect?

[xhc-code]

I don't know where to start.

If possible, please provide some guidance. I want to learn about secondary development based on Slate without using React.

[12joan]

Stepping through the code using a debugger is an interesting way of getting familiar with the source code, and one that I haven't tried before. Debuggers tend to work best if you're investigating a single, specific path through the code, and unfortunately they don't work well with React components like <Element {...props} /> at all due to how React works.

Since you're interested specifically in the non-React parts of Slate (the core slate package), I recommend starting by reading the Concepts section of the documentation, which describe important concepts like node types, location types, operations and normalisation that are necessary to understand and work with Slate's code.

Once you're familiar with the basics, you could start investigating how Slate works internally. The interface objects in packages/slate/src/interfaces might be a good place to start. These are global objects like Editor, Node and Path that you can call methods on like Editor.nodes, Node.get and Path.next. They're typically the main entrypoints when working with core Slate.

Adding debugger statements in the browser before each of these interface methods might be a good way to investigate how they work. I created a tool called Slate Transforms Explorer that you might find useful for this. It's still the built version of the code, but if you skip over the arguments loops, it's pretty much the same as the original source code.

recording.mp4

Alternatively, if your code editor supports debugging Node, you could potentially do this by adding debugger statements to Slate's unit tests, although I haven't tried this since my code editor doesn't support debugging, so I don't know how well this would work.

[xhc-code]

Okay, thank you very much. I have read all the key chapters of the official documentation except for the React section. However, I am currently unable to organize a complete process in my mind. What I am referring to is what is executed during the editor initialization, what is registered, and how the Slate editor and HTML5 DOM synchronize with each other. That's why I want to debug and debug to see what is executed at each step and where the parameters came from at the time of execution.

Looking at your approach, it's great that there's no related React code interference.

I personally think that the official examples of Slate are strongly bound to React, which can make debugging difficult because they inexplicably enter the React level code. If it is a basic JS+HTML version, it can be easily understood and referenced.

[12joan]

I see the confusion. Slate doesn't currently have an officially supported front-end built without React. People have created third-party front-ends, particularly for Vue, but I'm not aware of any third-party front-end that works directly with HTML without going through a library like React or Vue. The slate-dom utils could potentially be used as part of a third-party solution like this, but you would need to do the bulk of the work yourself.

If your goal is to integrate Slate into an app that doesn't use React, my advice is to use React only for the editor. https://react.dev/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page

[xhc-code]

okay, thank you.

[12joan]

how the Slate editor and HTML5 DOM synchronize with each other

This happens directly through React. When the user presses a key, Slate intercepts the DOM event and converts it to a Slate operation. This results in a new Slate value, which is given to the Editable React component. This component then produces a JSX value matching the intended state of the HTML, which React then reconciles with the DOM automatically.

[xhc-code]

Finally, how did you debug and learn Slatejs when you first started learning it? I would like to refer to your learning style.

Unit testing is aimed at testing specific functions. Without sufficient understanding of the project itself, it is impossible to comprehend the entire work status and process through unit testing. This is my own belief.

[12joan]

My way of learning was a little unusual. I actually started with Plate, which lets you get started with Slate without needing to understand much of how it works, since Plate gives you a working editor with a rich feature set out of the box. Plate also has a wrapper API on top of Slate, so I didn't work directly with Slate's API at all at first.

After a while, I started contributing to Plate, which let me learn bits and pieces of Slate's API as and when I needed to, without needing to understand all of it at once like I would need to if I had built my first editor without Plate. Then I became a regular contributor and later a maintainer of Plate, and as part of that work I often had to deeply investigate parts of Slate's source code to understand how they worked and fix bugs in them. Over time, I became familiar with almost all of Slate's code in this way.

[xhc-code]

Okay, impressive, you're too powerful. I think I should start using Slatejs on the React framework.