overtype 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -52,18 +52,18 @@ We overlap an invisible textarea on top of styled output, giving the illusion of
|
|
|
52
52
|
## Installation
|
|
53
53
|
|
|
54
54
|
### NPM
|
|
55
|
-
```
|
|
55
|
+
```bash
|
|
56
56
|
npm install overtype
|
|
57
57
|
```
|
|
58
58
|
|
|
59
59
|
### CDN
|
|
60
|
-
```
|
|
60
|
+
```html
|
|
61
61
|
<script src="https://unpkg.com/overtype/dist/overtype.min.js"></script>
|
|
62
62
|
```
|
|
63
63
|
|
|
64
64
|
## Quick Start
|
|
65
65
|
|
|
66
|
-
```
|
|
66
|
+
```javascript
|
|
67
67
|
// Create a single editor
|
|
68
68
|
const [editor] = new OverType('#editor', {
|
|
69
69
|
value: '# Hello World',
|
|
@@ -82,7 +82,7 @@ editor.setTheme('cave');
|
|
|
82
82
|
|
|
83
83
|
### Basic Editor
|
|
84
84
|
|
|
85
|
-
```
|
|
85
|
+
```html
|
|
86
86
|
<div id="editor" style="height: 400px;"></div>
|
|
87
87
|
|
|
88
88
|
<script>
|
|
@@ -98,7 +98,7 @@ editor.setTheme('cave');
|
|
|
98
98
|
|
|
99
99
|
### Toolbar
|
|
100
100
|
|
|
101
|
-
```
|
|
101
|
+
```javascript
|
|
102
102
|
// Enable the toolbar
|
|
103
103
|
const [editor] = new OverType('#editor', {
|
|
104
104
|
toolbar: true, // Enables the toolbar
|
|
@@ -127,7 +127,7 @@ All shortcuts preserve text selection, allowing you to apply multiple formats qu
|
|
|
127
127
|
|
|
128
128
|
### Multiple Editors
|
|
129
129
|
|
|
130
|
-
```
|
|
130
|
+
```javascript
|
|
131
131
|
// Initialize multiple editors at once
|
|
132
132
|
const editors = OverType.init('.markdown-editor', {
|
|
133
133
|
theme: 'cave',
|
|
@@ -142,7 +142,7 @@ editors.forEach((editor, index) => {
|
|
|
142
142
|
|
|
143
143
|
### Custom Theme
|
|
144
144
|
|
|
145
|
-
```
|
|
145
|
+
```javascript
|
|
146
146
|
const [editor] = new OverType('#editor', {
|
|
147
147
|
theme: {
|
|
148
148
|
name: 'my-theme',
|
|
@@ -172,7 +172,7 @@ const [editor] = new OverType('#editor', {
|
|
|
172
172
|
|
|
173
173
|
Enable a built-in stats bar that shows character, word, and line counts:
|
|
174
174
|
|
|
175
|
-
```
|
|
175
|
+
```javascript
|
|
176
176
|
// Enable stats bar on initialization
|
|
177
177
|
const [editor] = new OverType('#editor', {
|
|
178
178
|
showStats: true
|
|
@@ -199,7 +199,7 @@ The stats bar automatically adapts to your theme colors using CSS variables.
|
|
|
199
199
|
|
|
200
200
|
### React Component
|
|
201
201
|
|
|
202
|
-
```
|
|
202
|
+
```jsx
|
|
203
203
|
function MarkdownEditor({ value, onChange }) {
|
|
204
204
|
const ref = useRef();
|
|
205
205
|
const editorRef = useRef();
|
|
@@ -228,7 +228,7 @@ function MarkdownEditor({ value, onChange }) {
|
|
|
228
228
|
|
|
229
229
|
### Constructor
|
|
230
230
|
|
|
231
|
-
```
|
|
231
|
+
```javascript
|
|
232
232
|
new OverType(target, options)
|
|
233
233
|
```
|
|
234
234
|
|
|
@@ -240,7 +240,7 @@ new OverType(target, options)
|
|
|
240
240
|
|
|
241
241
|
### Options
|
|
242
242
|
|
|
243
|
-
```
|
|
243
|
+
```javascript
|
|
244
244
|
{
|
|
245
245
|
// Typography
|
|
246
246
|
fontSize: '14px',
|
|
@@ -284,7 +284,7 @@ new OverType(target, options)
|
|
|
284
284
|
|
|
285
285
|
### Instance Methods
|
|
286
286
|
|
|
287
|
-
```
|
|
287
|
+
```javascript
|
|
288
288
|
// Get current markdown content
|
|
289
289
|
editor.getValue()
|
|
290
290
|
|
|
@@ -315,7 +315,7 @@ editor.destroy()
|
|
|
315
315
|
|
|
316
316
|
### Static Methods
|
|
317
317
|
|
|
318
|
-
```
|
|
318
|
+
```javascript
|
|
319
319
|
// Set global theme (affects all instances)
|
|
320
320
|
OverType.setTheme('cave') // Built-in theme
|
|
321
321
|
OverType.setTheme(customTheme) // Custom theme object
|
|
@@ -363,7 +363,7 @@ Note: Markdown syntax remains visible but styled (e.g., `**bold**` shows with st
|
|
|
363
363
|
|
|
364
364
|
OverType is designed to work with platforms that persist DOM across page loads (like HyperClay):
|
|
365
365
|
|
|
366
|
-
```
|
|
366
|
+
```javascript
|
|
367
367
|
// Safe to call multiple times - will recover existing editors
|
|
368
368
|
OverType.init('.editor');
|
|
369
369
|
|
|
@@ -385,7 +385,7 @@ Check the `examples` folder for complete examples:
|
|
|
385
385
|
|
|
386
386
|
## Development
|
|
387
387
|
|
|
388
|
-
```
|
|
388
|
+
```bash
|
|
389
389
|
# Install dependencies
|
|
390
390
|
npm install
|
|
391
391
|
|
package/package.json
CHANGED