Editor

[ije]

Architecture

The editor is a plugable system for the File component. It provides:

• Text Editing
• Selection management
• History (undo, redo)
• Search
• Quick Edit
• Automatic Indentation

The editor adds the contenteditable property to the code line element, that supports native web selection and editing features on mobile phone.

const contentEl = fileContainer.shadowRoot.querySelector("[data-content]")
contentEl.contentEditable = true
contentEl.addEventListener("beforeInput", handleInput)

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

Vanilla JS:

import { VirtualizedFile } from "@pierre/diffs"
import { Editor } from "@pierre/diffs/editor"

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

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

lazy import (recommended):

import { VirtualizedFile } from "@pierre/diffs"

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

const edit = async (file: File) => {
  const { Editor } = await import("@pierre/diffs/editor")
  const editor = new Editor({
    onChange: (file, lineAnnotations) => console.log("change", file.name, file.contents)
  })
  return editor.edit(file)
}

// click to edit (lazy importing the editor.js)
button.addEventListener("click", () => void edit(fileInstance))

React:

import { Editor } from "@pierre/diffs"
import {
  type FileContents,
  File,
  EditorProvider,
} from '@pierre/diffs/react';

const file: FileContents = {
  name: 'example.ts',
  contents: `function greet(name: string) {
  console.log(\`Hello, \${name}!\`);
}

export { greet };`,
};

const editor = new Editor({
  onChange: (file, lineAnnotations) => console.log("change", file.name, file.contents)
})

export function EditCodeFile() {
  const [editable, setEditable] = useState(true)
  return (
    <EditorProvider editor={editor}>
      <File
        file={file}
        options={{
          theme: { dark: 'pierre-dark', light: 'pierre-light' },
        }}
        editable={editable}
      />
    </EditorProvider>
  );
}

TODOS

• Basic editing
• Selection & cursor
• Multiple cursors (Pressing ⌘)
• History(undo/redo)
• Search
• Quick Edit
• Automatic indentation
• Shortcuts
  • 'selectAll' ⌘ + A
  • 'copy' ⌘ + C
  • 'cut' ⌘ + X
  • 'paste' ⌘ + V/Y
  • 'findNextMatch' ⌘ + D
  • 'indent' Tab
  • 'outdent' Shift + Tab
  • 'moveCursorToDocStart' ⌘ + ↑
  • 'moveCursorToDocEnd' ⌘ + ↓
  • 'expandSelectionDocStart' ⌘ + Shift + ↑
  • 'expandSelectionDocEnd' ⌘ + Shift + ↓
  • 'undo' ⌘ + Z
  • 'redo' ⌘ + Shift + Z
• Browser compatibility
  • Chrome
  • Firefox
  • Safari
  • Android Chrome
  • iOS Safari (has input bug)
• LSP next version

[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)
pierre-docs-diffshub	Ready	Preview	May 29, 2026 7:39pm
pierre-docs-trees	Ready	Preview	May 29, 2026 7:39pm
pierrejs-diff-demo	Ready	Preview	May 29, 2026 7:39pm
pierrejs-docs	Ready	Preview	May 29, 2026 7:39pm

[amadeus]

Why this change?

[ije]

yeah i think this is slower to initialize and read, but can reduce memory usage. this aligns to the text buffer. however i can change it back it string[].

[amadeus]

Can you explain a bit about the architecture for isDirty? What does it serve, how is it used?

[ije]

when editing a file, the editor will update the code of the render cache. mark it as dirty to purge the render cache in workerpool when call cleanUp. this avoid file.render({...}) gets polluted code lines.

[amadeus]

Perhaps just leave a quick comment on it there for future context?

[amadeus]

So I've mostly just looked over the changes to existing diffs library. I do have a couple concerns about some potential behavior changes, but there also might be some prior context I am not aware of on how things have changed.

Also chatted a bit with the team, what I will do here shortly is create a new specialized branch for the beta/alpha of editor, and then you can target that branch with this PR, and we can cut beta releases from that

[amadeus]

How come this iteration change?

[ije]

again, related to lines to lineOffsets change. maybe i should not touch this part lol we don't use iterateOverFile since the editor could change the line count of the file

[amadeus]

So there's a bunch of changes to VirtualizedFile, but no changes to VirtualizedFileDiff. Is that just work that still needs to happen? or was there something that needed to change about VirtualizedFile that wasn't applicable to VirtualizedFileDiff?

[ije]

when editing a file instance, add/delete lines will cause the scroll height change. for file diff instance we just call rerender

[amadeus]

I don't know if i fully understand, couldn't diffs also change scroll height too?

[amadeus]

A bit worried about the performance of this, iterating over every character vs before when we were just doing splits on lines

[ije]

yes, lineOffsets is slower than lines: []string on init/read. this is come from the pieceTable. for large file, store lineOffsets can reduce memory. I can revert the change on File component, but the pieceTable still needs this funtion.

[ije]

reverted to lines

[amadeus]

yeah, not necessarily opposed to this stuff, just trying to be diligent about tradeoffs. It's probably fine to get something merged for beta, and I/we can conduct some tests with stuff to really understand impacts.

[amadeus]

Is there a way we can fix the types here so we don't need to use as?

[ije]

because useContext(EditorContext) returns Editor<unknown>

[amadeus]

Yeah i get that, but i'm wondering if we can fix the context itself to take a type we can pass through is all

[amadeus]

Created the new target branch for this stuff:

#749

beta-1.3

[ije]

@amadeus lineOffsets has been change back to lines, but the iterateOverFile.ts file is not reverted, it can be replaced with for loop safely. we do not use it now since the editor could change the line count of the file.

can you please take a look again thanks 💚