pref(editor): Introduce postponeBackgroundTokenizeToNextFrame method for the DiffsEditor

[ije]

when doing re-render(selection/code) postpone the background tokenizing to next frame. this can avoid UI freezing for a large file editing.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
pierre-docs-diffshub	Ready	Preview	Jun 3, 2026 7:16am
pierre-docs-trees	Ready	Preview	Jun 3, 2026 7:16am
pierrejs-diff-demo	Ready	Preview	Jun 3, 2026 7:16am
pierrejs-docs	Ready	Preview	Jun 3, 2026 7:16am

[Copilot]

Pull request overview

This PR aims to reduce UI freezes during editor-driven rerenders (selection updates, scrolling, and component renders) by deferring/pacing background tokenization work to the next animation frame and tightening the tokenizer’s background scheduling.

Changes:

• Added postponeBackgroundTokenizeToNextFrame() to the DiffsEditor API and invoked it during render and selection/scroll operations.
• Enhanced EditorTokenizer background processing with pause/resume support and message listener lifecycle management, plus added tests for these behaviors.
• Updated syncWithRender to use an explicit componentType ('file' | 'file-diff') instead of an edit mode flag.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/diffs/test/editorTokenizer.test.ts	Adds coverage for background-tokenization listener lifecycle, pause/resume, and message validation.
packages/diffs/src/types.ts	Extends DiffsEditor with componentType and the new postpone method.
packages/diffs/src/editor/tokenzier.ts	Implements pause/resume, safer message parsing, and attaches the message listener only while background tokenization runs.
packages/diffs/src/editor/editor.ts	Stores component type, adds postponeBackgroundTokenizeToNextFrame(), and calls it during selection/scroll handling.
packages/diffs/src/components/FileDiff.ts	Uses componentType 'file-diff' and postpones background tokenization during render.
packages/diffs/src/components/File.ts	Uses componentType 'file' and postpones background tokenization during render.
apps/demo/src/main.ts	Enables editor debug logging in the demo for easier validation of scheduling changes.

Comments suppressed due to low confidence (2)

packages/diffs/src/components/File.ts:481

• syncWithRender is called with this.lineAnnotations (a LineAnnotation[]), but the editor/tokenizer pipeline expects diff-style annotations (DiffLineAnnotation with a side). Provide a default side when passing annotations to the editor (e.g. treat file annotations as additions) so the types and downstream editor helpers stay consistent.

        editor.syncWithRender(
          'file',
          highlighter,
          fileContainer,
          file,
          this.lineAnnotations,
          this.renderRange
        );

packages/diffs/src/components/File.ts:670

• Same issue as the other syncWithRender call: this.lineAnnotations lacks a side but the editor expects DiffLineAnnotation. Add a default side when forwarding annotations so the editor can safely track and update them across edits.

          editor.syncWithRender(
            'file',
            highlighter,
            fileContainer,
            file,
            this.lineAnnotations,
            this.renderRange
          );

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.