69 lines
1.6 KiB
Markdown
69 lines
1.6 KiB
Markdown
# SigPro Editor
|
|
|
|
A minimalist, ultra-lightweight WYSIWYG editor for SigPro.
|
|
|
|
## Features
|
|
|
|
* **Tiny footprint** - No heavy dependencies (only SigPro).
|
|
* **Reactive** - Built-in support for SigPro signals.
|
|
* **Media Support** - Drag & drop images and file attachments.
|
|
* **Code View** - Toggle between rich text and raw HTML.
|
|
* **DaisyUI Ready** - Styled with Tailwind CSS and DaisyUI classes.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install sigpro-editor
|
|
|
|
```
|
|
|
|
## Quick Start
|
|
|
|
```javascript
|
|
import { $ } from "sigpro";
|
|
import { Editor } from "sigpro-editor";
|
|
|
|
const content = $("<p>Hello <b>World</b></p>");
|
|
|
|
const myApp = () => div([
|
|
Editor({
|
|
value: content,
|
|
onchange: (html) => content(html),
|
|
class: "my-4 shadow-lg"
|
|
})
|
|
]);
|
|
|
|
```
|
|
|
|
## API
|
|
|
|
### Props
|
|
|
|
| Prop | Type | Description |
|
|
| --- | --- | --- |
|
|
| `value` | `string | Signal<string>` | Initial content or reactive signal. |
|
|
| `onchange` | `(html: string) => void` | Callback triggered on every edit. |
|
|
| `class` | `string` | Custom CSS classes for the container. |
|
|
|
|
## Keyboard Shortcuts
|
|
|
|
* **Tab**: Indent text.
|
|
* **Formatting**: Supports standard `execCommand` shortcuts (Ctrl+B, Ctrl+I, etc. depending on browser).
|
|
|
|
## Features Included
|
|
|
|
* **Basic Styles**: Bold, Italic, Underline, Color Picker.
|
|
* **Alignment**: Left, Center, Right.
|
|
* **Lists**: Ordered and Unordered lists.
|
|
* **Blocks**: Blockquotes and Indentation.
|
|
* **Media**:
|
|
* **Images**: Resizable with a built-in fullscreen lightbox on click.
|
|
* **Attachments**: Clean UI for non-image file downloads.
|
|
|
|
|
|
* **Links**: Prompt-based link insertion.
|
|
* **Emojis**: Built-in quick picker.
|
|
|
|
## License
|
|
|
|
MIT |