TypeScript · Vanilla JS · ContentEditable · Plugin Architecture · Zero Dependencies
\r\n\r\n [](https://www.npmjs.com/package/@aminulidev/tinytext)\r\n [](https://opensource.org/licenses/MIT)\r\n [](https://www.typescriptlang.org/)\r\nHello, world!
');\r\n```\r\n\r\n### Or use the factory function\r\n\r\n```ts\r\nimport { createEditor } from '@aminulidev/tinytext';\r\n\r\nconst editor = createEditor({ selector: '#editor' });\r\n```\r\n\r\n---\r\n\r\n## ⚙️ Configuration\r\n\r\n```ts\r\nconst editor = new TinyTextEditor({\r\n // Required\r\n selector: '#editor', // CSS selector or HTMLElement\r\n\r\n // Toolbar\r\n toolbar: 'full', // 'full' | 'minimal' | 'none' | ToolbarItem[]\r\n\r\n // Content\r\n content: 'Initial content
',\r\n placeholder: 'Start writing...',\r\n\r\n // Behavior\r\n readOnly: false,\r\n sanitize: true, // Sanitize HTML input/output\r\n markdownMode: false,\r\n\r\n // Appearance\r\n darkMode: 'auto', // true | false | 'auto'\r\n theme: 'default',\r\n minHeight: '200px',\r\n maxHeight: '600px',\r\n\r\n // Features\r\n charCounter: true, // Show word/char count\r\n maxLength: 0, // 0 = unlimited\r\n autoSave: {\r\n interval: 30000, // ms\r\n key: 'my_editor_save', // localStorage key\r\n },\r\n\r\n // Plugins\r\n plugins: [TablePlugin, MarkdownPlugin],\r\n\r\n // Events\r\n onChange: (html, text) => console.log('Changed:', html),\r\n onFocus: (e) => console.log('Focused'),\r\n onBlur: (e) => console.log('Blurred'),\r\n onReady: (editor) => console.log('Ready!', editor),\r\n});\r\n```\r\n\r\n---\r\n\r\n## 🛠 Custom Toolbar\r\n\r\n```ts\r\nimport { TinyTextEditor } from '@aminulidev/tinytext';\r\n\r\nconst editor = new TinyTextEditor({\r\n selector: '#editor',\r\n toolbar: [\r\n 'bold', 'italic', 'underline', 'strikethrough', 'separator',\r\n 'h1', 'h2', 'h3', 'separator',\r\n 'align-left', 'align-center', 'align-right', 'separator',\r\n 'unordered-list', 'ordered-list', 'blockquote', 'separator',\r\n 'link', 'image', 'table', 'separator',\r\n 'undo', 'redo',\r\n ],\r\n});\r\n```\r\n\r\n**All available toolbar items:** \r\n`bold` `italic` `underline` `strikethrough` `h1`–`h6` `paragraph` \r\n`align-left` `align-center` `align-right` `align-justify` \r\n`ordered-list` `unordered-list` `blockquote` `code-block` \r\n`link` `image` `table` `undo` `redo` `forecolor` `hilitecolor` `separator`\r\n\r\n---\r\n\r\n## 🧩 Plugin System\r\n\r\n```ts\r\nimport type { PluginDefinition } from '@aminulidev/tinytext';\r\n\r\nconst MyPlugin: PluginDefinition = {\r\n name: 'my-plugin',\r\n version: '1.0.0',\r\n\r\n init(ctx) {\r\n // ctx.editor — Editor instance\r\n // ctx.toolbar — Toolbar API\r\n // ctx.events — EventBus API\r\n // ctx.commands — Command API\r\n\r\n // Register a custom command\r\n ctx.commands.register({\r\n id: 'my-command',\r\n execute: () => console.log('Executed!'),\r\n isActive: () => false,\r\n isEnabled: () => true,\r\n });\r\n\r\n // Add a toolbar button\r\n ctx.toolbar.addButton('my-btn', {\r\n icon: '',\r\n label: 'My Button',\r\n command: 'my-command',\r\n });\r\n\r\n // Listen to events\r\n ctx.events.on('change', ({ html, text }) => {\r\n console.log('Content changed:', text.length, 'chars');\r\n });\r\n\r\n // Register a keyboard shortcut\r\n ctx.editor.addShortcut('ctrl+shift+m', () => {\r\n ctx.editor.execCommand('my-command');\r\n });\r\n },\r\n\r\n destroy() {\r\n // Cleanup\r\n },\r\n};\r\n\r\n// Use it\r\nconst editor = new TinyTextEditor({\r\n selector: '#editor',\r\n plugins: [MyPlugin],\r\n});\r\n```\r\n\r\n---\r\n\r\n## 📡 Event System\r\n\r\n```ts\r\neditor.on('change', ({ html, text }) => {\r\n console.log('New content:', html);\r\n});\r\n\r\neditor.on('focus', ({ event }) => {});\r\neditor.on('blur', ({ event }) => {});\r\neditor.on('selection-change', ({ selection }) => {});\r\neditor.on('history:undo', () => {});\r\neditor.on('history:redo', () => {});\r\neditor.on('autosave', ({ html }) => {});\r\neditor.on('ready', ({ editor }) => {});\r\neditor.on('plugin:registered', ({ name }) => {});\r\n\r\n// Remove listener\r\neditor.off('change', myHandler);\r\n```\r\n\r\n---\r\n\r\n## 🔌 Built-in Plugins\r\n\r\n### TablePlugin\r\nAdds right-click context menu to tables: \r\nInsert/delete rows and columns, Tab navigation, keyboard shortcuts.\r\n\r\n```ts\r\nimport { TinyTextEditor, TablePlugin } from '@aminulidev/tinytext';\r\n\r\nconst editor = new TinyTextEditor({\r\n selector: '#editor',\r\n plugins: [TablePlugin],\r\n});\r\n```\r\n\r\n### MarkdownPlugin\r\n- Live Markdown shortcut conversion (type `## ` for headings, `` ``` `` for code blocks, etc.)\r\n- Export HTML as `.md` file\r\n- Import `.md` files\r\n\r\n```ts\r\nimport { TinyTextEditor, MarkdownPlugin } from '@aminulidev/tinytext';\r\n\r\nconst editor = new TinyTextEditor({\r\n selector: '#editor',\r\n plugins: [MarkdownPlugin],\r\n});\r\n```\r\n\r\n---\r\n\r\n## 🎨 Theming\r\n\r\nTinyText uses CSS custom properties — override any token:\r\n\r\n```css\r\n#my-editor .tt-editor {\r\n --tt-accent: #10b981; /* Green theme */\r\n --tt-border-focus: #10b981;\r\n --tt-btn-active-bg: #10b981;\r\n --tt-blockquote-border: #10b981;\r\n --tt-font: 'Georgia', serif;\r\n --tt-radius: 4px; /* Sharper corners */\r\n}\r\n```\r\n\r\n**Dark mode** is applied by adding `data-theme=\"dark\"` to the container:\r\n\r\n```ts\r\neditor.enableDarkMode(); // Enable\r\neditor.disableDarkMode(); // Disable\r\neditor.toggleDarkMode(); // Toggle\r\n// Or: darkMode: 'auto' — respects prefers-color-scheme\r\n```\r\n\r\n---\r\n\r\n## ⌨️ Keyboard Shortcuts\r\n\r\n| Shortcut | Action |\r\n|----------------------|---------------------|\r\n| `Ctrl+B` | Bold |\r\n| `Ctrl+I` | Italic |\r\n| `Ctrl+U` | Underline |\r\n| `Ctrl+Shift+S` | Strikethrough |\r\n| `Ctrl+Z` | Undo |\r\n| `Ctrl+Y` / `Ctrl+Shift+Z` | Redo |\r\n| `Ctrl+Shift+L` | Align Left |\r\n| `Ctrl+Shift+E` | Align Center |\r\n| `Ctrl+Shift+R` | Align Right |\r\n| `Ctrl+Shift+J` | Justify |\r\n| `` Ctrl+` `` | Code Block |\r\n| `Ctrl+Shift+.` | Blockquote |\r\n| `Ctrl+Shift+7` | Ordered List |\r\n| `Ctrl+Shift+8` | Unordered List |\r\n| `Ctrl+A` | Select All |\r\n\r\n---\r\n\r\n## 📐 Project Structure\r\n\r\n```\r\ntinytext/\r\n├── src/\r\n│ ├── core/\r\n│ │ ├── types.ts # All TypeScript types\r\n│ │ ├── Editor.ts # Core Editor class\r\n│ │ ├── EventBus.ts # Type-safe event system\r\n│ │ ├── SelectionManager.ts # Selection API wrapper\r\n│ │ ├── CommandManager.ts # Command registry\r\n│ │ ├── HistoryManager.ts # Undo/redo stack\r\n│ │ ├── PluginManager.ts # Plugin lifecycle\r\n│ │ ├── SchemaValidator.ts # HTML sanitizer\r\n│ │ └── commands.ts # Built-in command registrations\r\n│ ├── ui/\r\n│ │ ├── Toolbar.ts # Toolbar renderer + icons\r\n│ │ └── modals/\r\n│ │ ├── BaseModal.ts # Modal base class\r\n│ │ ├── LinkModal.ts # Link insert/edit modal\r\n│ │ ├── ImageModal.ts # Image modal (URL + upload)\r\n│ │ └── TableModal.ts # Table insert modal\r\n│ ├── plugins/\r\n│ │ ├── TablePlugin.ts # Table context menu + tab nav\r\n│ │ └── MarkdownPlugin.ts # Markdown mode + import/export\r\n│ ├── themes/\r\n│ │ └── tinytext.css # Complete editor stylesheet\r\n│ ├── utils/\r\n│ │ ├── dom.ts # DOM helpers\r\n│ │ └── markdown.ts # MD ↔ HTML converter\r\n│ └── index.ts # Package entry point\r\n├── examples/\r\n│ └── WordCountPlugin.ts # Example custom plugin\r\n├── demo/\r\n│ └── index.html # Interactive demo page\r\n├── rollup.config.js\r\n├── tsconfig.json\r\n├── package.json\r\n└── README.md\r\n```\r\n\r\n---\r\n\r\n## 🔨 Building from Source\r\n\r\n```bash\r\n# Install dependencies\r\nnpm install\r\n\r\n# Development (watch mode)\r\nnpm run dev\r\n\r\n# Production build\r\nnpm run build\r\n\r\n# Generate type declarations only\r\nnpm run build:types\r\n```\r\n\r\n---\r\n\r\n## 📤 Publishing to npm\r\n\r\n```bash\r\n# 1. Build the package\r\nnpm run build\r\n\r\n# 2. Check what will be published\r\nnpm pack --dry-run\r\n\r\n# 3. Login to npm\r\nnpm login\r\n\r\n# 4. Publish\r\nnpm publish --access public\r\n```\r\n\r\n---\r\n\r\n## 📄 License\r\n\r\nMIT © [aminulidev](https://www.npmjs.com/~aminulidev)\r\n","readmeFilename":"README.md"}