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

npm install sigpro-editor

Quick Start

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`
`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