diff --git a/README.md b/README.md index 7a9aaed..730abe2 100644 --- a/README.md +++ b/README.md @@ -334,23 +334,23 @@ The stats bar automatically adapts to your theme colors using CSS variables. function MarkdownEditor({ value, onChange }) { const ref = useRef(); const editorRef = useRef(); - + useEffect(() => { const [instance] = OverType.init(ref.current, { value, onChange }); editorRef.current = instance; - + return () => editorRef.current?.destroy(); }, []); - + useEffect(() => { if (editorRef.current && value !== editorRef.current.getValue()) { editorRef.current.setValue(value); } }, [value]); - + return
; } ``` @@ -417,34 +417,34 @@ new OverType(target, options) lineHeight: 1.6, fontFamily: 'monospace', padding: '16px', - + // Theme - 'solar', 'cave', or custom theme object theme: 'solar', - + // Custom colors (override theme colors) colors: { h1: '#e63946', h2: '#457b9d', // ... any color variable }, - + // Mobile styles (applied at <= 640px) mobile: { fontSize: '16px', padding: '12px', lineHeight: 1.5 }, - + // Behavior autofocus: false, placeholder: 'Start typing...', value: '', - + // Auto-resize autoResize: false, // Auto-expand height with content minHeight: '100px', // Minimum height when autoResize is enabled maxHeight: null, // Maximum height (null = unlimited) - + // Native textarea properties textareaProps: { required: true, @@ -452,7 +452,7 @@ new OverType(target, options) name: 'content', // Any HTML textarea attribute }, - + // Toolbar toolbar: false, // Enable/disable toolbar toolbarButtons: [], // Custom button array (v2.0) @@ -464,13 +464,13 @@ new OverType(target, options) // Smart lists smartLists: true, // Enable GitHub-style list continuation on Enter - + // Stats bar showStats: false, // Enable/disable stats bar statsFormatter: (stats) => { // Custom stats format return `${stats.chars} chars | ${stats.words} words`; }, - + // Callbacks onChange: (value, instance) => {}, onKeydown: (event, instance) => {} @@ -511,6 +511,9 @@ editor.showPreviewMode() // Switch to preview mode editor.focus() editor.blur() +// Perform actions. Equivalent to clicking on the corresponding toolbar button. +editor.performAction('toggleBold') + // Show or hide stats bar editor.showStats(true) // Show stats editor.showStats(false) // Hide stats @@ -809,7 +812,7 @@ Contributions are welcome! Please feel free to submit a Pull Request. Built with the radical idea that sometimes dumb ideas work. -**Ready for another radical idea?** +**Ready for another radical idea?** Let's remove every layer of the web application stack. ### Hyperclay diff --git a/dist/overtype.d.ts b/dist/overtype.d.ts index 7263a50..05ff436 100644 --- a/dist/overtype.d.ts +++ b/dist/overtype.d.ts @@ -172,6 +172,7 @@ export interface OverTypeInstance { setTheme(theme: string | Theme): this; setCodeHighlighter(highlighter: ((code: string, language: string) => string) | null): void; updatePreview(): void; + performAction(actionId: string, event?: Event | null): Promise; // HTML output methods getRenderedHTML(options?: RenderOptions): string; diff --git a/scripts/generate-types.js b/scripts/generate-types.js index 90043ad..a632d74 100755 --- a/scripts/generate-types.js +++ b/scripts/generate-types.js @@ -247,6 +247,7 @@ export interface OverTypeInstance { setTheme(theme: string | Theme): this; setCodeHighlighter(highlighter: ((code: string, language: string) => string) | null): void; updatePreview(): void; + performAction(actionId: string, event?: Event | null): Promise; // HTML output methods getRenderedHTML(options?: RenderOptions): string; diff --git a/src/overtype.d.ts b/src/overtype.d.ts index 7263a50..05ff436 100644 --- a/src/overtype.d.ts +++ b/src/overtype.d.ts @@ -172,6 +172,7 @@ export interface OverTypeInstance { setTheme(theme: string | Theme): this; setCodeHighlighter(highlighter: ((code: string, language: string) => string) | null): void; updatePreview(): void; + performAction(actionId: string, event?: Event | null): Promise; // HTML output methods getRenderedHTML(options?: RenderOptions): string; diff --git a/test/test-types.ts b/test/test-types.ts index 93d9768..19cb1eb 100644 --- a/test/test-types.ts +++ b/test/test-types.ts @@ -66,6 +66,8 @@ if (editorsWithOptions.length > 0) { instance.focus(); instance.blur(); instance.updatePreview(); + const actionResult: Promise = instance.performAction('toggleBold'); + console.log(actionResult); instance.showStats(true); instance.setTheme('cave'); instance.reinit({ fontSize: '18px' });