![\"Carbon](\"https://user-images.githubusercontent.com/3901764/57545698-ce5f2380-7320-11e9-8682-903df232d7b0.png\")
\n \n\n \n \n \n
Start typing...
';\n\n// Listen for changes\neditor.addEventListener('content-change', (e) => {\n console.log('Content:', e.detail.content);\n});\n```\n\n### HTML\n\n```html\nNew content
');\n\n// Execute commands\neditorInstance.chain().focus().toggleBold().run();\n```\n\n## Extension Details\n\n### History\n\nProvides undo/redo functionality with keyboard shortcuts.\n\n**Keyboard Shortcuts:**\n\n- `Ctrl+Z` / `Cmd+Z` - Undo\n- `Ctrl+Shift+Z` / `Cmd+Shift+Z` - Redo\n\n### TextFormatting\n\nBasic text formatting options.\n\n**Features:**\n\n- Bold (`Ctrl+B` / `Cmd+B`)\n- Italic (`Ctrl+I` / `Cmd+I`)\n- Underline (`Ctrl+U` / `Cmd+U`)\n- Strikethrough\n- Inline code\n\n### Typography\n\nHeading levels and paragraph formatting.\n\n**Features:**\n\n- Heading 1-6\n- Paragraph\n- Dropdown selector\n\n### Lists\n\nList formatting with nesting support.\n\n**Features:**\n\n- Bullet lists\n- Numbered lists\n- Task lists (checkboxes)\n- Indent/outdent\n\n### Tables\n\nComplete table editing capabilities.\n\n**Features:**\n\n- Insert tables\n- Add/delete rows and columns\n- Merge/split cells\n- Resizable columns\n\n### Alignment\n\nText alignment options.\n\n**Features:**\n\n- Left align\n- Center align\n- Right align\n- Justify\n\n### TextColor\n\nText colors and highlighting using Carbon tokens.\n\n**Features:**\n\n- Primary/secondary text colors\n- Link colors\n- Status colors (success, error, warning, info)\n- Text highlighting\n- Semantic marks (insert, delete)\n\n### Search\n\nReal-time search within the editor.\n\n**Features:**\n\n- Live search as you type\n- Match highlighting\n- Match count display\n- Case-insensitive\n\n### Html\n\nHTML source editing mode.\n\n**Features:**\n\n- Toggle to HTML view\n- Syntax formatting\n- Direct HTML editing\n\n### Markdown\n\nMarkdown editing mode.\n\n**Features:**\n\n- Toggle to Markdown view\n- Full Markdown syntax support\n- Converts between Markdown and HTML\n\n### Blocks\n\nCode blocks and blockquotes.\n\n**Features:**\n\n- Code blocks with syntax preservation\n- Blockquotes\n- Citation support\n\n### Insert\n\nInsert links and images.\n\n**Features:**\n\n- Link insertion and editing\n- Image insertion by URL\n- Image resizing with drag handles\n- Link validation\n\n### Typeface\n\nFont family selection.\n\n**Features:**\n\n- IBM Plex Sans (default)\n- IBM Plex Serif\n- IBM Plex Mono\n- Common system fonts\n\n## Creating Custom Extensions\n\nYou can create custom extensions using TipTap's extension API:\n\n```javascript\nimport { Extension, Mark } from '@tiptap/core';\nimport { html } from 'lit';\n\n// Create a custom mark\nconst HighlightMark = Mark.create({\n name: 'highlight',\n\n parseHTML() {\n return [{ tag: 'mark' }];\n },\n\n renderHTML({ HTMLAttributes }) {\n return ['mark', HTMLAttributes, 0];\n },\n});\n\n// Create extension\nconst HighlightExtension = Extension.create({\n name: 'highlightExtension',\n addExtensions: () => [HighlightMark],\n});\n\n// Add toolbar UI\nHighlightExtension.toolbarRender = (editor, toolbarSize) => {\n return html`\n \n `;\n};\n\n// Use it\neditor.extensions = [HighlightExtension, ...otherExtensions];\n```\n\n## Styling\n\nThe editor uses Carbon Design System tokens. You can customize appearance using\nCSS custom properties:\n\n```css\nclabs-wysiwyg {\n /* Override Carbon tokens */\n --cds-layer-01: #f4f4f4;\n --cds-text-primary: #161616;\n --cds-border-strong: #8d8d8d;\n}\n```\n\n## Accessibility\n\nThe editor is built with accessibility in mind:\n\n- ✅ Keyboard navigation for all controls\n- ✅ ARIA labels on interactive elements\n- ✅ Descriptive tooltips\n- ✅ Proper focus management\n- ✅ Screen reader support\n- ✅ Semantic HTML output\n\n## Browser Support\n\n- Chrome/Edge (latest)\n- Firefox (latest)\n- Safari (latest)\n- Mobile browsers (iOS Safari, Chrome Mobile)\n\n## Performance Tips\n\nFor optimal performance with large documents:\n\n1. Use only the extensions you need\n2. Consider pagination for very long documents\n3. Disable real-time search for documents >10,000 words\n4. Limit history depth if needed\n\n## Examples\n\n### Minimal Editor\n\n```javascript\nimport '@carbon-labs/wc-wysiwyg/es/index.js';\nimport {\n History,\n TextFormatting,\n Typography,\n} from '@carbon-labs/wc-wysiwyg/es/index.js';\n\neditor.extensions = [History, TextFormatting, Typography];\n```\n\n### Full-Featured Editor\n\n```javascript\nimport '@carbon-labs/wc-wysiwyg/es/index.js';\nimport {\n History,\n TextFormatting,\n Typography,\n Lists,\n Tables,\n Alignment,\n TextColor,\n Search,\n Html,\n Markdown,\n Blocks,\n Insert,\n} from '@carbon-labs/wc-wysiwyg/es/index.js';\n\neditor.extensions = [\n History,\n TextFormatting,\n Typography,\n Lists,\n Tables,\n Alignment,\n TextColor,\n Search,\n Html,\n Markdown,\n Blocks,\n Insert,\n];\n```\n\n### With Event Handling\n\n```javascript\nconst editor = document.querySelector('clabs-wysiwyg');\n\neditor.addEventListener('content-change', (e) => {\n // Auto-save\n localStorage.setItem('draft', e.detail.content);\n\n // Update character count\n const text = e.detail.content.replace(/<[^>]*>/g, '');\n document.getElementById('char-count').textContent = text.length;\n});\n```\n\n## Storybook\n\nYou can view the current state of the component in our\n[Storybook](https://labs.carbondesignsystem.com/web-components/).\n\n## Contributing\n\nWe welcome contributions! Please see our\n[contributing guidelines](https://github.com/carbon-design-system/carbon-labs/blob/main/CONTRIBUTING.md).\n\n## 📝 License\n\nLicensed under the\n[Apache 2.0 License](https://github.com/carbon-design-system/carbon-labs/blob/main/LICENSE).\n\n##![\"IBM](\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg\")