diff options
| author | Elizabeth Hunt <me@liz.coffee> | 2026-01-04 21:36:47 -0800 |
|---|---|---|
| committer | Elizabeth Hunt <me@liz.coffee> | 2026-01-04 21:36:47 -0800 |
| commit | b449f76bc3f36525f37634a5d93f405b155f86d8 (patch) | |
| tree | e19384660b513165efe57f38d31fe5b586b1e9f3 /.demo/EDITOR-README.md | |
| parent | 681a8af8b192387ada5045ad0d7db53b1ec131b6 (diff) | |
| download | adelie-b449f76bc3f36525f37634a5d93f405b155f86d8.tar.gz adelie-b449f76bc3f36525f37634a5d93f405b155f86d8.zip | |
Package editor into its own script
Diffstat (limited to '.demo/EDITOR-README.md')
| -rw-r--r-- | .demo/EDITOR-README.md | 109 |
1 files changed, 109 insertions, 0 deletions
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 +<!-- CSS (required for styling) --> +<link rel="stylesheet" href="https://beta.adelie.liz.coffee/bundle.css" /> + +<!-- Editor JS --> +<script src="https://beta.adelie.liz.coffee/adelie-editor.js"></script> +``` + +### 2. Add a container element + +```html +<div id="my-editor"></div> +``` + +### 3. Initialize the editor + +```html +<script> + adelieEditor.init('#my-editor', { + language: 'javascript', + initialCode: '// Your code here' + }); +</script> +``` + +## 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 `<html>` 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 +<!DOCTYPE html> +<html lang="en"> +<head> + <link rel="stylesheet" href="dist/bundle.css" /> +</head> +<body> + <div id="my-editor"></div> + + <script src="dist/adelie-editor.js"></script> + <script> + adelieEditor.init('#my-editor', { + language: 'javascript', + initialCode: 'console.log("Hello World!");' + }); + </script> +</body> +</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. |