WYSIWYG Editor - Clean & Centered Design

A feature-rich WYSIWYG (What You See Is What You Get) text editor built with Slate, React, and TypeScript. Clean, centered design with HTML export capabilities.

✨ Features

📝 Text Formatting

• Bold, Italic, Underline, ~~Strikethrough~~
• Superscript (x²) and Subscript (x₂)
• Inline code formatting

📐 Block Formatting

• Multiple heading levels (H1-H6)
• Paragraphs and blockquotes
• Code blocks
• Bulleted and numbered lists

🎯 Advanced Features

• Text alignment (left, center, right, justify)
• Font family selection (10+ fonts)
• Font size control (8px - 72px)
• Text color picker
• Background color picker
• Link insertion and management
• Image embedding via URL
• 📁 File upload - Upload images directly from your computer
• 🔤 HTML Export - Get clean HTML output of your content
• Undo/Redo functionality
• Keyboard shortcuts

🎨 Design

• Clean, centered layout
• Minimalist toolbar
• Professional appearance
• Responsive design
• Full TypeScript support

🚀 Quick Start

Installation

npm install @react/texteditor-shiv

Peer Dependencies

npm install react react-dom

Basic Usage

import { OpenTextEditor } from "@react/texteditor-shiv";
import "@react/texteditor-shiv/styles";

function App() {
  return (
    <div style={{ padding: 40 }}>
      <OpenTextEditor />
    </div>
  );
}

export default App;

📦 New Features

1. File Upload 📁

Upload images directly from your computer:

• Click the 📁 button in the toolbar
• Select an image file
• Image is inserted into the editor

2. HTML Export 🔤

Get clean HTML output of your content:

• Click "Show HTML" button at the bottom
• View the generated HTML
• Click "Copy HTML" to copy to clipboard
• Use the HTML in your applications

import { serializeToHTML } from "@yourusername/wysiwyg-editor";

const html = serializeToHTML(editorContent);
// Output: <p>Your <strong>formatted</strong> content...</p>

3. Centered Design

The editor is now:

• Centered on the page
• Maximum width for readability
• Clean, minimal appearance
• No distracting headers or footers

⌨️ Keyboard Shortcuts

| Shortcut | Action | | --------------- | ----------- | | Ctrl/Cmd + B | Bold | | Ctrl/Cmd + I | Italic | | Ctrl/Cmd + U | Underline | | `Ctrl/Cmd + `` | Inline code |

🎨 Toolbar Layout

Row 1: Text Formatting

B, I, U, S • x², x₂ • Block type • Font size • Font family

Row 2: Advanced Controls

Lists • Indent • Alignment • Colors • Links • Images • File Upload • Emoji • Undo/Redo

💻 Development

npm install
npm install -D vite-plugin-dts
npm run dev

🔧 API Reference

serializeToHTML(nodes): string

Convert Slate content to HTML

deserializeFromHTML(html): nodes

Convert HTML to Slate content

📁 Project Structure

src/
├── components/      # Editor & Toolbar
├── types/          # TypeScript definitions
├── utils/          # Editor logic & HTML conversion
└── styles/         # CSS styling

📦 Publishing

npm run build:lib
npm publish --access public

🆕 Changelog

v1.1.0 (Latest)

• ✨ File upload functionality
• ✨ HTML export/copy
• ✨ Centered design
• ✨ Improved UX

📄 License

MIT

Made with using React, Slate, and TypeScript