Extensions

Optional modules for buffee. Load independently.

History

extensions/history.js

Undo/redo support with operation coalescing. Without this extension, editors have no history.

BuffeeHistory(editor)
editor.History.undo()
editor.History.redo()
editor.History.clear()

Demo →

UndoTree

extensions/undotree.js

Tree-based undo/redo that preserves all branches. When you undo and make a new edit, you create a new branch instead of losing history.

BuffeeUndoTree(editor)
editor.UndoTree.undo()
editor.UndoTree.redo()         // Follow most recent branch
editor.UndoTree.redo(0)        // Follow specific branch
editor.UndoTree.branches()     // Get available branches
editor.UndoTree.goToNode(id)   // Jump to any node
editor.UndoTree.getTree()      // Get tree for visualization

Demo →

Syntax

extensions/syntax.js

Regex-based syntax highlighting with incremental state caching. Ships with JavaScript, HTML, CSS, JSON, and Python.

const editor = BuffeeSyntax(Buffee(container, config))
editor.Syntax.setLanguage('javascript')
editor.Syntax.enabled = true

Demo →

Elementals

extensions/elementals.js

DOM-based UI elements in a layer above text. Buttons, inputs, labels with character-unit positioning.

const editor = BuffeeElementals(Buffee(container, config))
editor.Elementals.addButton({ row: 1, col: 5, label: 'OK' })
editor.Elementals.enabled = true

Demo →

TUI Legacy

extensions/tui.js

Terminal UI via text manipulation. Buttons, prompts, scrollboxes using box-drawing characters.

const editor = BuffeeTUI(Buffee(container, config))
editor.TUI.addButton({ row: 1, col: 2, label: 'OK', border: true })
editor.TUI.enabled = true

Demo →

FileLoader

extensions/fileloader.js

Multiple file loading strategies optimized for different file sizes. Choose the right loader based on your file size and memory constraints.

const editor = BuffeeFileLoader(Buffee(container, config))
await editor.FileLoader.naiveLoad(file)           // <10M lines
await editor.FileLoader.chunkedBlobLoad(file)     // <70M lines
await editor.FileLoader.chunkedFileReaderLoad(file)
await editor.FileLoader.streamLoad(file)
await editor.FileLoader.streamMaterializedLoad(file) // <75M lines
await editor.FileLoader.streamGcHintsLoad(file)   // <90M lines

Demo →

UltraHighCapacity

extensions/ultrahighcapacity.js

Gzip-compressed chunked storage for massive files (1B+ lines). Decompress on scroll. Forces editor into navigation-only mode.

const editor = BuffeeUltraHighCapacity(Buffee(container, config))
editor.UltraHighCapacity.activate(50000)
await editor.UltraHighCapacity.appendLines(lines)

Demo →

iOS

extensions/ios.js

Touch interactions and on-screen keyboard input for iOS devices.

let editor = Buffee(container, config)
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  editor = BuffeeIOS(editor)
}
editor.iOS.focus()   // Show keyboard
editor.iOS.destroy() // Cleanup

Demo →

StatusLine

extensions/statusline.js

Updates status bar elements (row, col, line count, spaces) on each render. Looks for elements with classes .buffee-head-row, .buffee-head-col, .buffee-linecount, .buffee-spaces.

const editor = BuffeeStatusLine(new Buffee(container, config))

Demo →

Using Multiple Extensions

Compose extensions using the decorator pattern.

const editor = BuffeeElementals(
  BuffeeSyntax(
    Buffee(container, config)
  )
)

editor.Syntax.setLanguage('javascript')
editor.Syntax.enabled = true

editor.Elementals.addButton({
  row: 0, col: 40,
  label: 'Run',
  onActivate: () => console.log('Running...')
})
editor.Elementals.enabled = true

Syntactic Sugar: reduce

For many extensions, use reduce to avoid deep nesting:

const extensions = [BuffeeHistory, BuffeeSyntax, BuffeeElementals]

const editor = extensions.reduce(
  (ed, ext) => ext(ed),
  new Buffee(container, config)
)

Syntactic Sugar: pipe

A pipe helper reads left-to-right:

const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x)

const editor = pipe(
  BuffeeHistory,
  BuffeeSyntax,
  BuffeeElementals
)(new Buffee(container, config))