From b449f76bc3f36525f37634a5d93f405b155f86d8 Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Sun, 4 Jan 2026 21:36:47 -0800 Subject: Package editor into its own script --- .demo/EDITOR-README.md | 109 ++++++++++++++++++++++++++++++++++++++++++++++ .demo/example-editor.html | 58 ++++++++++++++++++++++++ 2 files changed, 167 insertions(+) create mode 100644 .demo/EDITOR-README.md create mode 100644 .demo/example-editor.html (limited to '.demo') diff --git a/.demo/EDITOR-README.md b/.demo/EDITOR-README.md new file mode 100644 index 0000000..9195fe2 --- /dev/null +++ b/.demo/EDITOR-README.md @@ -0,0 +1,109 @@ +# Adelie Editor - Standalone Usage + +The Adelie Editor is a vim-enabled CodeMirror editor with a retro aesthetic, syntax highlighting, and theme support. + +## Quick Start + +### 1. Include the files + +```html + + + + + +``` + +### 2. Add a container element + +```html +

+``` + +### 3. Initialize the editor + +```html + +``` + +## API Reference + +### `adelieEditor.init(element, options)` + +Initialize an editor in the specified element. + +**Parameters:** +- `element` (string | HTMLElement) - Container element or CSS selector +- `options` (optional): + - `language` ('javascript' | 'css' | 'html') - Programming language (default: 'javascript') + - `initialCode` (string) - Initial code content (default: '') + - `theme` ('light' | 'dark') - Color theme (default: auto-detected from `data-theme` attribute) + +**Returns:** EditorView instance + +**Example:** +```javascript +const editor = adelieEditor.init('#my-editor', { + language: 'css', + initialCode: '.my-class { color: red; }' +}); +``` + +### Theme Switching + +The editor automatically detects theme changes on the `` element: + +```javascript +// Switch to dark mode +document.documentElement.setAttribute('data-theme', 'dark'); + +// Switch to light mode +document.documentElement.removeAttribute('data-theme'); +``` + +The editor will automatically update its theme when the `data-theme` attribute changes. + +## Features + +- **Vim Mode**: Full vim keybindings (enabled by default) +- **Relative Line Numbers**: Vim-style relative numbering +- **Auto-closing Brackets**: Automatically closes `()`, `{}`, `[]`, `""`, `''` +- **Whitespace Indicators**: Shows dots for spaces/tabs when text is selected +- **Syntax Highlighting**: Matches Prism.js colors for consistency +- **Theme Support**: Light and dark themes with retro styling + +## Complete Example + +See `example-editor.html` for a working example: + +```html + + + + + + +

+ + + + + +``` + +## File Size + +- **bundle.css**: ~23 KB (minified) +- **adelie-editor.js**: ~596 KB (minified, includes CodeMirror + vim mode) + +The editor bundle is self-contained and includes all dependencies. diff --git a/.demo/example-editor.html b/.demo/example-editor.html new file mode 100644 index 0000000..f6505bc --- /dev/null +++ b/.demo/example-editor.html @@ -0,0 +1,58 @@ + + + + + + Adelie Editor - Standalone Example + + + +

Adelie Editor Standalone Example

+ +

Simple Usage

+ +

With Options

+ + + + + + + -- cgit v1.2.3-70-g09d2