Changing the selected area during AI writing will cause misalignment of the inserted results.

[Laxy317]

Description

Example：

2025-11-07.17.00.42.mov

Reproduction URL

https://platejs.org/docs/examples/ai

Reproduction steps

1. Select some text，and try AI writing
2. Click other text block while AI thinking or writing

Plate version

latest

Slate React version

latest

Screenshots

Logs

Browsers

No response

[dosubot]

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

This happens because Plate's AI writing plugins (AIPlugin/AIChatPlugin) capture the insertion point at the start of streaming, but do not lock or restore the selection if you change it while AI is still writing. The AI output keeps streaming to the original path, so if you click elsewhere, the results can appear misaligned or in the wrong place. There’s no built-in selection lock or prevention for this right now see source.

To work around this, you could capture the selection or block path at the start of AI writing and restore it before each chunk insert, or temporarily disable selection changes in your UI while streaming. If you need real-time selection tracking, use the onSelectionChange prop on <Plate> to monitor and possibly revert user selection changes during streaming see workaround.

If you want to go further, you can add custom logic to detect and restore the original insertion point, or block user selection changes until AI writing finishes. This would prevent the misalignment until a more robust solution is built into the plugin.

To reply, just mention @dosu.

---

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

[Laxy317]

How to disable the selection change functionality? @dosu

[dosubot]

Plate doesn’t have a built-in way to fully block selection changes, but you can intercept and revert them during AI writing. Use the onSelectionChange prop on your <Plate> component to detect when the selection changes. If AI writing is active, immediately restore the original selection using Slate’s Transforms.select(editor, originalSelection) API. Here’s a simple pattern:

import { Plate } from 'platejs/react';
import { Transforms } from 'slate';

function MyEditor({ editor, isAIStreaming, originalSelection }) {
  return (
    <Plate
      editor={editor}
      onSelectionChange={({ editor, selection }) => {
        if (isAIStreaming && selection && originalSelection) {
          Transforms.select(editor, originalSelection);
        }
      }}
    >
      {/* ...editor UI */}
    </Plate>
  );
}

Alternatively, you can set the readOnly prop to true during streaming, but this will block all editing, not just selection changes see docs.

To reply, just mention @dosu.

---

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