sigpro-editor/Readme.md

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