Editor

[ije]

Architecture

The editor is based on the Shiki's textmeta tokenizer which also powers diffs components. This PR introduces ZERO dependency.

const highlighter = await getSharedHighlighter();
const grammar = highlighter.getLanguage(languageId);
const result = grammar.tokenizeLine2(lineText, ruleStack);
const tokens = result.tokens; // use the tokens to create color span & selection mark

The editing feature is using a hidden textarea element, which allows you to use UNIX system key binding(control + F/B/A/E/etc...), emoji/non-ascii input without implement them from scratch.

const textarea = document.createElement("textarea")
textarea.style.opacity = '0' // make the textarea element invisible
textarea.addEventListener("input", syncTextareState)
textarea.addEventListener("selectionchange", syncTextareState)

Selections are created via the native web selection API, multiple cursors has been supported.

document.addEventListener('selectionchange', () => {
  const selectionRaw = document.getSelection();
  const selection = convertSelection(selectionRaw);
  if (selection) {
    // Text in the editor has been selected.
    // You can now get the `start.line`, `start.column`, `end.line` and `end.column` from the selection
  }
})

API

import { Editor } from "@pierre/diffs"

const editor = new Editor({ theme: DEMO_THEME });
editor.render({ editorContainer: document.getElementById('editor') });
editor.setThemeType('dark');
editor.setText(tsContent, 'ts');
editor.cleanUp();

Performance matters

Fast UI response means sound UX. To make the editing smooth, we should consider:

• Use virtual scroll view instead of render all lines
• Cache the result of grammar.tokenizeLine2(lineText, ruleStack)
• Define theme colors in scoped CSS instead of inline style, this avoids re-render when switch theme

TODOS

• Highlighting
• Basic editing
• Selection & cursor
• Multiple cursors (Pressing ⌘)
• History(undo/redo)
• Respect --diffs-font-family, --diffs-font-size, --diffs-line-height and --diffs-tab-size CSS properties
• Shortcuts
  • 'copy' ⌘ + C
  • 'cut' ⌘ + X
  • 'paste' ⌘ + V/Y
  • 'indent' Tab
  • 'outdent' Shift + Tab
  • 'documentStart' ⌘ + ↑
  • 'documentEnd' ⌘ + ↓
  • 'undo' ⌘ + Z
  • 'redo' ⌘ + Shift + Z
  • 'selectAll' ⌘ + A
• Fold using tm foldingStartMarker and foldingStopMarker
• Virtual view rendering for large file
• Support FileContents input
• React component
• Browser compatibility
  • Chrome
  • Firefox
  • Safari
• Mobile support
• LSP next version

ps, should have many bugs :)

[vercel]

@ije is attempting to deploy a commit to the Pierre Computer Company Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
pierrejs-diff-demo	Ready	Preview	Apr 23, 2026 5:53pm
pierrejs-docs	Ready	Preview	Apr 23, 2026 5:53pm