Editor

[ije]

Architecture

The editor is a plugable system for the File and FileDiff components. It provides:

• Text Editing
• Selection management
• History (undo, redo)

The editor is using a hidden textarea element as the input controller, 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")
// make the textarea element invisible
textarea.style.opacity = '0'
// when change text
textarea.addEventListener("input", syncTextareState)
// moving caret
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 composedRanges = selectionRaw?.getComposedRanges({
    shadowRoots: [fileContainerShadowRoot],
  });
  const selection = convertSelection(composedRanges);
  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, File } from "@pierre/diffs"

// render a file
const fileInstance = new File({ ... });
fileInstance.render({ ... });

// make the file editable
const editor = new Editor()
editor.edit(fileInstance, {
  onChange: file => console.log("change", file.name, file.contents)
})

TODOS

• Basic editing
• Selection & cursor
• Multiple cursors (Pressing ⌘)
• History(undo/redo)
• Shortcuts
  • 'copy' ⌘ + C
  • 'cut' ⌘ + X
  • 'paste' ⌘ + V/Y
  • 'indent' Tab
  • 'outdent' Shift + Tab
  • 'documentStart' ⌘ + ↑
  • 'documentEnd' ⌘ + ↓
  • 'undo' ⌘ + Z
  • 'redo' ⌘ + Shift + Z
  • 'selectAll' ⌘ + A
• Browser compatibility
  • Chrome
  • Firefox
  • Safari
  • Mobile phone
• 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 28, 2026 3:16am
pierrejs-docs	Ready	Preview	Apr 28, 2026 3:16am