\n\n\n\n```\n\n## ๐ API Reference\n\n### Attributes/Properties\n\n| Attribute | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `modelValue` | `string` | `\"\"` | Initial HTML content of the editor |\n| `placeholder` | `string` | `\"Write something amazing...\"` | Placeholder text shown when editor is empty |\n| `disabled` | `boolean` | `false` | Whether the editor is disabled |\n| `className` | `string` | `\"\"` | Additional CSS classes for styling |\n| `minHeight` | `string` | `\"400px\"` | Minimum height of the editor |\n| `maxWidth` | `string` | `\"full\"` | Maximum width of the editor container |\n| `preset` | `\"prompt\" \\| \"document\"` | `\"document\"` | Editor preset configuration |\n| `asText` | `boolean` | `false` | Whether to return plain text instead of HTML |\n| `hasTags` | `boolean` | `false` | Enable tag functionality |\n| `hasSnippets` | `boolean` | `false` | Enable snippet functionality |\n| `errors` | `string` | `\"\"` | Error messages to display |\n\n### Events\n\n| Event | Type | Description |\n|-------|------|-------------|\n| `emitChanges` | `(content: string) => void` | Fired when editor content changes (debounced by 1 second) |\n\n### Methods\n\nThe component exposes standard HTML element methods. You can interact with it using standard DOM APIs:\n\n```javascript\nconst editor = document.querySelector('sp-web-app');\n\n// Set content programmatically\neditor.modelValue = '
New content
';\n\n// Get current content\nconsole.log(editor.modelValue);\n\n// Disable/enable editor\neditor.disabled = true;\n```\n\n## ๐จ Styling\n\nThe component uses Tailwind CSS for styling and supports custom CSS classes:\n\n```html\n\n\n```\n\n### CSS Custom Properties\n\nYou can customize the editor appearance using CSS custom properties:\n\n```css\nsp-web-app {\n --editor-bg: #ffffff;\n --editor-border: #e5e7eb;\n --editor-text: #1f2937;\n --toolbar-bg: #f9fafb;\n --button-hover: #f3f4f6;\n}\n```\n\n## ๐ฑ Mobile Support\n\nThe component automatically adapts to mobile devices:\n\n- **Desktop**: Toolbar positioned at the top\n- **Mobile**: Toolbar positioned at the bottom for better thumb accessibility\n- **Touch-friendly**: Larger tap targets and improved spacing on mobile\n\n## ๐ง Advanced Usage\n\n### Handling Content Changes\n\nThe `emitChanges` callback is debounced by 1 second to prevent excessive calls:\n\n```javascript\nconst editor = document.querySelector('sp-web-app');\n\neditor.emitChanges = (content) => {\n // This will only fire 1 second after the user stops typing\n \n // Save to localStorage\n localStorage.setItem('editorContent', content);\n \n // Or save to your backend\n fetch('/api/save-content', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ content })\n });\n};\n```\n\n### Error Handling\n\n```javascript\neditor.emitChanges = (content) => {\n try {\n // Your content processing logic\n processContent(content);\n } catch (error) {\n console.error('Error processing content:', error);\n // The component will log errors automatically\n }\n};\n```\n\n## ๐งช Development\n\n### Prerequisites\n\n- Node.js (>=18.0.0)\n- pnpm (recommended) or npm/yarn\n\n### Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/Snack-Prompt/sp-web-component-template.git\ncd sp-web-component-template\n\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n\n# Build for production\npnpm build\n\n# Run tests\npnpm test\n```\n\n### Project Structure\n\n```\nโโโ src/\nโ โโโ App.tsx # Main editor component\nโ โโโ main.tsx # Web component definition\nโ โโโ components/\nโ โ โโโ toolbar/ # Editor toolbar components\nโ โโโ lib/\nโ โ โโโ pasteUtils.ts # Content processing utilities\nโ โโโ index.css # Global styles\nโโโ dist/ # Built files\nโโโ package.json\nโโโ README.md\n```\n\n## ๐งช Testing\n\nThe component includes comprehensive tests:\n\n```bash\n# Run unit tests\npnpm test\n\n# Run tests in watch mode\npnpm test --watch\n\n# Run tests with coverage\npnpm test --coverage\n```\n\n## ๐ Browser Support\n\n- Chrome/Edge (latest)\n- Firefox (latest)\n- Safari (latest)\n- Mobile browsers (iOS Safari, Chrome Mobile)\n\n## ๐ค Contributing\n\nContributions are welcome! Please read our contributing guidelines:\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## ๐ License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## ๐ Links\n\n- [NPM Package](https://www.npmjs.com/package/sp-editor-wc)\n- [GitHub Repository](https://github.com/Snack-Prompt/sp-web-component-template)\n- [Documentation](https://github.com/Snack-Prompt/sp-web-component-template#readme)\n- [Issues](https://github.com/Snack-Prompt/sp-web-component-template/issues)\n\n## ๐ฅ Credits\n\nBuilt with โค๏ธ by the [SnackPrompt](https://snackprompt.com) team.\n\n### Technology Stack\n\n- [React 19](https://reactjs.org/) - UI library\n- [TipTap](https://tiptap.dev/) - Rich text editor\n- [Tailwind CSS](https://tailwindcss.com/) - Styling\n- [Vite](https://vitejs.dev/) - Build tool\n- [@r2wc/react-to-web-component](https://github.com/bitovi/react-to-web-component) - React to Web Component converter\n","readmeFilename":"README.md"}