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 | |
| parent | 681a8af8b192387ada5045ad0d7db53b1ec131b6 (diff) | |
| download | adelie-b449f76bc3f36525f37634a5d93f405b155f86d8.tar.gz adelie-b449f76bc3f36525f37634a5d93f405b155f86d8.zip | |
Package editor into its own script
Diffstat (limited to '.demo')
| -rw-r--r-- | .demo/EDITOR-README.md | 109 | ||||
| -rw-r--r-- | .demo/example-editor.html | 58 |
2 files changed, 167 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. 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 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Adelie Editor - Standalone Example</title> + <link rel="stylesheet" href="dist/bundle.css" /> +</head> +<body> + <header> + <h1>Adelie Editor Standalone Example</h1> + <input type="checkbox" id="theme-toggle" class="toggle" aria-label="Toggle dark mode" /> + </header> + + <main style="max-width: 1000px; margin: 0 auto; padding: 2rem;"> + <article> + <h2>Simple Usage</h2> + <div id="my-editor"></div> + </article> + + <article style="margin-top: 3rem;"> + <h2>With Options</h2> + <div id="css-editor"></div> + </article> + </main> + + <!-- Load the standalone editor bundle --> + <script src="dist/adelie-editor.js"></script> + + <script> + // Simple initialization + const editor1 = adelieEditor.init('#my-editor', { + language: 'javascript', + initialCode: `// Type your code here +function hello() { + console.log("Hello from Adelie Editor!"); +}` + }); + + // With custom options + const editor2 = adelieEditor.init('#css-editor', { + language: 'css', + initialCode: `/* Adelie Editor with CSS */ +.my-class { + color: var(--primary); + background: var(--surface); +}` + }); + + // Theme toggle + const toggle = document.getElementById('theme-toggle'); + toggle.addEventListener('change', () => { + const theme = toggle.checked ? 'dark' : 'light'; + document.documentElement.setAttribute('data-theme', theme); + }); + </script> +</body> +</html> |