How to map the editor state to a different shape?

[tom-sherman]

My use case is an input that when typing "hello @world!" I produce a structure similar to this:

[
  { "type": "text", "value": "hello " },
  { "type": "attribute", "value": "world" },
  { "type": "text", "value": "!" }
]

The UI will work very similarly to this slate demo: https://www.slatejs.org/examples/mentions

It looks like I can JSON.parse(JSON.stringify(editorState)) but this doesn't seem like the recommend way as the produced structure appears to have only internal properties prefixed with _.

I think this may be related to a more general question: How do I traverse the editor state?

[trueadm]

What are you looking to do? I'm a bit lost. Are you looking to implement mentions? We have mentions working on the playground and that might help you there.

As for serializing and parsing editor states, you can do:

const stringifiedEditorState = JSON.stringify(editorState);
const editorState = editor.parseEditorState(stringifiedEditorState);
editor.setEditorState(editorState)

[tom-sherman]

It's probably easiest to just share the demo I'm working on: https://codesandbox.io/s/loving-hooks-z7vixx?file=/src/App.tsx

You can define a template like "hello #userName" and then a schema like [{"name": "userName", "type": "string"}] and you'll get a preview.

We're going to need to store these templates and I was thinking about mapping them to a more minimal structure for use in other systems eg. rendering the template. However now I'm thinking it's probably easiest to just store the full EditorState on the backend. This couples us to the data model of lexical though which isn't ideal.

Note in the actual system I'll probably make the template variables decorator nodes, and support other operations like simple transformations of variables via other decorators.

[zurfyx]

Oh, I presume you're referring to server-side content. At Meta, where we store old Draft.js based documents in a particular JSON-like format, we just run a $dfs to perform the conversion

const nodes = $dfs();
const res = [];
for (const node of nodes) {
  if ($isParagraphNode(node)) {
    res.push({ type: 'paragraph', text: node.getTextContent());
  }
}

The example above is oversimplified, it will get hairer than that, that's why @trueadm recommended JSON.stringify(editor.getEditorState()) when possible. Also, you don't necessarily have to use $dfs, you can do your own tree traversal starting from $getRoot().

For real-time side-to-side rendering see #1825

[tom-sherman]

@zurfyx This was the answer I was looking for, $dfs looks good I think. If I need to traverse the tree myself I can always look at the implementation, thanks!

(unfortunately I can't mark a reply as an answer, feel free to repost at the top level and I'll mark it)

[zurfyx]

Oh, I presume you're referring to server-side content. At Meta, where we store old Draft.js based documents in a particular JSON-like format, we just run a $dfs to perform the conversion

const nodes = $dfs();
const res = [];
for (const node of nodes) {
  if ($isParagraphNode(node)) {
    res.push({ type: 'paragraph', text: node.getTextContent());
  }
}

The example above is oversimplified, it will get hairer than that, that's why @trueadm recommended JSON.stringify(editor.getEditorState()) when possible. Also, you don't necessarily have to use $dfs, you can do your own tree traversal starting from $getRoot().

For real-time side-to-side rendering see #1825