diff --git a/samples/index.html b/samples/index.html index f4fe9935..7164351d 100644 --- a/samples/index.html +++ b/samples/index.html @@ -5,6 +5,12 @@ buffee - Examples + @@ -18,32 +24,33 @@

Examples

Core

- - -

Combinators

- + + + + + +
recommendedRecommended setup with StatusLine and History
basicSimple editable text editor
gutter-statusGutter and status bar options
sizingEditor sizing with character units

Fun Examples

- + + + + +
movieStar Wars ASCII animation player
matrixMatrix digital rain effect
conwayConway's Game of Life
+ +

Combinators

+ + + + + + + + + + + +
historyUndo/redo with history combinator
undotreeTree-based undo with branch navigation
syntaxRegex-based syntax highlighting
elementalsLayer-based UI elements (DOM nodes)
tuiTUI elements via text manipulation
loaderLoad files with millions/billions of lines
readonlyRead-only mode (TUI and UHC)
iosiOS touch and keyboard support
sanitizeTab and Unicode sanitization
vimmotionVimMotion combinator
diff --git a/samples/sample-elementals.html b/samples/sample-elementals.html index fa8612e1..626aa9a9 100644 --- a/samples/sample-elementals.html +++ b/samples/sample-elementals.html @@ -52,6 +52,13 @@

home / samples / Elementals

Elementals - Layer-based UI

+

combinators/elementals.js

+ 
<script src="buffe.js"></script>
+<script src="buffee.js"></script>
+<script src="combinators/elementals.js"></script>
+ 
const editor = BuffeeElementals(Buffee(container, config))
+editor.Elementals.addButton({ row: 1, col: 5, label: 'OK' })
+editor.Elementals.enabled = true

Unlike tui-legacy which manipulates text content, Elementals creates actual DOM elements in a layer above the text.

Press Tab to navigate, Enter to activate

diff --git a/samples/sample-history.html b/samples/sample-history.html index ae733268..17719ee6 100644 --- a/samples/sample-history.html +++ b/samples/sample-history.html @@ -22,6 +22,14 @@

home / samples / History Combinator

History Combinator (Undo/Redo)

+

combinators/history.js

+ 
<script src="buffe.js"></script>
+<script src="buffee.js"></script>
+<script src="combinators/history.js"></script>
+ 
BuffeeHistory(editor)
+editor.History.undo()
+editor.History.redo()
+editor.History.clear()

History tracking is opt-in. By default, editors have no undo/redo.

Without History

diff --git a/samples/sample-ios.html b/samples/sample-ios.html index 586e4de1..e4af281d 100644 --- a/samples/sample-ios.html +++ b/samples/sample-ios.html @@ -22,6 +22,16 @@

home / samples / iOS Support

iOS Support

+

combinators/ios.js

+ 
<script src="buffe.js"></script>
+<script src="buffee.js"></script>
+<script src="combinators/ios.js"></script>
+ 
let editor = Buffee(container, config)
+if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
+  editor = BuffeeIOS(editor)
+}
+editor.iOS.focus()   // Show keyboard
+editor.iOS.destroy() // Cleanup

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

JavaScript

diff --git a/samples/sample-loader.html b/samples/sample-loader.html index 62625cdc..40992cd5 100644 --- a/samples/sample-loader.html +++ b/samples/sample-loader.html @@ -47,6 +47,21 @@

home / samples / Ultra High Capacity

Ultra High Capacity

+

combinators/fileloader.js | combinators/ultrahighcapacity.js

+ 
<script src="buffe.js"></script>
+<script src="buffee.js"></script>
+<script src="combinators/fileloader.js"></script>
+<script src="combinators/ultrahighcapacity.js"></script>
+ 
// FileLoader - multiple loading strategies
+const editor = BuffeeFileLoader(BuffeeSanitize(Buffee(container, config)))
+await editor.FileLoader.naiveLoad(file)           // <10M lines
+await editor.FileLoader.chunkedBlobLoad(file)     // <70M lines
+await editor.FileLoader.streamLoad(file)
+
+// UltraHighCapacity - gzip-compressed for 1B+ lines
+const editor = BuffeeUltraHighCapacity(Buffee(container, config))
+editor.UltraHighCapacity.activate(50000)
+await editor.UltraHighCapacity.appendLines(lines)

Load and display files with millions or billions of lines using various loading strategies.