deserialize too slow

[weiquabit]

Description

const data  = ['string',.....]  ( length >=1500 )
const value = data.join('\n')

  const editor = usePlateEditor({
    plugins: EditorKit,
    value: (editor) => {
      const nodes = editor.getApi(MarkdownPlugin).markdown.deserialize(value);
      return nodes;
    },
  });

It took about 20 seconds too slow when the data is large.
what is a way to quickly deserialize?
Do I still need to deserialize my string if it is markdown syntax?

Reproduction URL

No response

Reproduction steps

const data  = ['string',.....]  ( length >=1500 )
const value = data.join('\n')

  const editor = usePlateEditor({
    plugins: EditorKit,
    value: (editor) => {
      const nodes = editor.getApi(MarkdownPlugin).markdown.deserialize(value);
      return nodes;
    },
  });
`
It took about 20 seconds too slow when the data is large.
what is a way to quickly deserialize?
Do I still need to deserialize my string if it is markdown syntax?

Plate version

51.0.0

Slate React version

19.2.0

Screenshots

Logs

Browsers

No response

[dosubot]

Hi @weiquabit! I'm Dosu and I’m helping the plate team.

Deserialization is required—Plate needs to convert your markdown string into structured nodes for the editor to work. The process is slow for large inputs because it parses the entire markdown string and runs it through remark plugins and conversion rules, which can be heavy, especially with lots of plugins or complex content docs.

To speed things up: try reducing the number of remark plugins, simplify your conversion rules, or only allow the node types you actually need (using allowedNodes or disallowedNodes). If your markdown content doesn't change often, consider memoizing the result or doing the conversion server-side and passing the Slate value to the client. Debouncing input changes can also help avoid repeated deserialization docs.

Raw markdown strings can't be used directly as editor content—deserialization is always needed to get editable nodes docs.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[weiquabit]

thanks
There is one more question.

 const editor = usePlateEditor({
    plugins: EditorKit,
    value: [],
  });

  useEffect(() => {
    if (value && editor) {
      try {
        const nodes = editor.getApi(MarkdownPlugin).markdown.deserialize(value);

        editor.tf.setValue(nodes); // setValue failed

        setTimeout(() => {
          editor.tf.setValue(nodes); // setValue success
        }, 0);

      } catch (error) {
        console.log(error);
      }
    }
  }, [editor]);

setValue failed but settimout setValue success
Why is it like this?

[dosubot]

This happens because the Plate editor isn't always fully initialized when your useEffect runs—especially with async plugins or large documents. If you call editor.tf.setValue too early, the editor's internal state may not be ready, so the update fails. Using setTimeout defers the call to the next event loop tick, giving React and Plate time to finish setup, which makes setValue work docs.

A better way is to use the onReady callback from usePlateEditor, which fires when the editor is ready for mutations. You can also use shouldInitialize: false and manually call editor.tf.init when your data is ready for more control docs.

Example with onReady:

const editor = usePlateEditor({
  plugins: EditorKit,
  value: [],
  onReady: ({ editor }) => {
    const nodes = editor.getApi(MarkdownPlugin).markdown.deserialize(value);
    editor.tf.setValue(nodes); // safe to call here
  },
});

This avoids timing issues and is more robust than setTimeout.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[weiquabit]

How can I insert a suggestion via the API?

[dosubot]

To insert a suggestion via the API, make sure you have the SuggestionPlugin (or SuggestionKit) enabled. Then, create a suggestion node and insert it using editor transforms.

For an inline (text) suggestion, create a TSuggestionText node like:

const suggestionId = 'unique-id';
const suggestionData = {
  id: suggestionId,
  userId: 'user-123',
  createdAt: Date.now(),
  type: 'insert', // or 'remove', 'update'
};

const node = {
  text: 'suggested text',
  [`suggestion_${suggestionId}`]: suggestionData,
  suggestion: true,
};

editor.tf.insertNode(node); // or insertNodes([node])

For a block suggestion, use TSuggestionElement:

const blockSuggestion = {
  type: 'p',
  children: [{ text: 'suggested paragraph' }],
  suggestion: {
    id: suggestionId,
    userId: 'user-123',
    createdAt: Date.now(),
    type: 'insert', // or 'remove'
  },
};

editor.tf.insertNode(blockSuggestion);

You can toggle suggestion mode programmatically with:

editor.setOption(SuggestionPlugin, 'isSuggesting', true);

The SuggestionPlugin API is available via editor.getApi(SuggestionPlugin).suggestion for more advanced operations. See the official docs for details and node structure.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[weiquabit]

hi
Why is it that when I add it this way, the suggestion popup or icon does not appear on the right side?

const suggestionId = 'unique-id';
const suggestionData = {
  id: suggestionId,
  userId: 'user-123',
  createdAt: Date.now(),
  type: 'insert', // or 'remove', 'update'
};

const node = {
  text: 'suggested text',
  [`suggestion_${suggestionId}`]: suggestionData,
  suggestion: true,
};

editor.tf.insertNode(node); // or insertNodes([node])

[dosubot]

The suggestion popup or icon doesn't appear just by inserting a suggestion node—Plate's UI only shows these when the editor is in suggestion mode and the suggestion is "active". To make the UI appear right after inserting, you need to:

1. Enable suggestion mode:

   editor.setOption(SuggestionPlugin, 'isSuggesting', true);

2. Set the active suggestion to your new node's ID:

   editor.setOption(SuggestionPlugin, 'activeId', suggestionId);

This tells Plate to treat your node as an active suggestion and triggers the popup/icon UI.
See more in the docs and plugin code.

So after you insert the node, run:

editor.setOption(SuggestionPlugin, 'isSuggesting', true);
editor.setOption(SuggestionPlugin, 'activeId', suggestionId);

Now the UI should show up as expected.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}