Añadir Readme.md
This commit is contained in:
69
Readme.md
Normal file
69
Readme.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user