scrible 1.0.4 → 1.0.6

package/README.md

@@ -1,306 +1,306 @@
-# Scrible ✍️
-
-**A powerful, customizable rich text editor for React** - Built with Slate.js, outputs clean HTML, and offers Notion-like editing experience.
-
-![Scrible Preview](https://res.cloudinary.com/dm3it5tld/image/upload/v1765117113/scrible_preview_ulzrpn.png)
-
-[![npm version](https://img.shields.io/npm/v/scrible.svg)](https://www.npmjs.com/package/scrible)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-
-## ✨ Features
-
-- 🎨 **Fully Customizable** - Choose which features to include
-- 📝 **Rich Text Formatting** - Bold, italic, underline, strikethrough
-- 🎨 **Color Customization** - Text and background color pickers with 24 preset colors
-- 📑 **Multiple Heading Levels** - H1, H2, H3 with semantic markup
-- 📋 **Lists** - Bulleted and numbered lists
-- 📊 **Tables** - Full table support with easy insertion
-- 🖼️ **Images** - Upload and resize images with drag handles
-- 🔗 **Links** - Automatic link detection and manual insertion
-- ↔️ **Text Alignment** - Left, center, right, justify
-- 📏 **Font Sizes** - Multiple size options
-- 💾 **Clean HTML Output** - Semantic HTML like Quill.js
-- ⌨️ **Keyboard Shortcuts** - Standard shortcuts (Ctrl+B, Ctrl+I, etc.)
-- 📱 **Responsive** - Works great on desktop and mobile
-- 🎯 **TypeScript Ready** - Full type support
-
-## 📦 Installation
-
-```bash
-npm install scrible slate slate-react slate-history
-```
-
-or
-
-```bash
-yarn add scrible slate slate-react slate-history
-```
-
-## 🚀 Quick Start
-
-```jsx
-import React, { useState } from 'react';
-import ScribleEditor from 'scrible';
-import 'scrible/dist/scrible.css';
-
-function App() {
-  const [content, setContent] = useState('');
-
-  const handleChange = (htmlContent, slateValue) => {
-    setContent(htmlContent);
-  };
-
-  return (
-    <ScribleEditor
-      onChange={handleChange}
-      placeholder="Start writing..."
-    />
-  );
-}
-```
-
-**Important:** Don't forget to import the CSS file!
-
-## 🎛️ Customizable Toolbar
-
-Choose which features to include in your editor:
-
-```jsx
-import ScribleEditor from 'scrible';
-import 'scrible/dist/scrible.css';
-
-function CustomEditor() {
-  const [content, setContent] = useState('');
-
-  // Only include the features you need
-  const features = [
-    'bold',
-    'italic',
-    'underline',
-    'headings',
-    'lists',
-    'link',
-    'image'
-  ];
-
-  return (
-    <ScribleEditor
-      features={features}
-      onChange={(html) => setContent(html)}
-      placeholder="Minimal editor..."
-    />
-  );
-}
-```
-
-### Available Features
-
-| Feature | Description |
-|---------|-------------|
-| `bold` | Bold text formatting |
-| `italic` | Italic text formatting |
-| `underline` | Underline text formatting |
-| `strikethrough` | Strikethrough text formatting |
-| `headings` | H1, H2, H3, blockquote |
-| `lists` | Bulleted and numbered lists |
-| `alignment` | Text alignment (left, center, right, justify) |
-| `fontSize` | Font size options |
-| `textColor` | Text color picker with presets and custom colors |
-| `backgroundColor` | Background/highlight color picker |
-| `link` | Insert and edit links |
-| `image` | Upload and resize images |
-| `table` | Insert and manage tables |
-| `clear` | Clear all content button |
-
-## 📖 Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `Node[]` | `null` | Controlled Slate.js value |
-| `onChange` | `(html: string, value: Node[]) => void` | `undefined` | Called when content changes |
-| `placeholder` | `string` | `"Enter some text..."` | Placeholder text |
-| `readOnly` | `boolean` | `false` | Make editor read-only |
-| `className` | `string` | `""` | Additional CSS class |
-| `initialValue` | `string \| Node[]` | `null` | Initial content (HTML string or Slate value) |
-| `features` | `string[]` | All features | Array of features to include |
-
-## 💡 Examples
-
-### Basic Editor
-
-```jsx
-<ScribleEditor
-  onChange={(html) => console.log(html)}
-  placeholder="Start typing..."
-/>
-```
-
-### Minimal Editor (Only Basic Formatting)
-
-```jsx
-<ScribleEditor
-  features={['bold', 'italic', 'underline', 'clear']}
-  onChange={(html) => console.log(html)}
-  placeholder="Simple editor..."
-/>
-```
-
-### Blog Editor (No Tables)
-
-```jsx
-<ScribleEditor
-  features={[
-    'bold', 'italic', 'underline', 'strikethrough',
-    'headings', 'lists', 'alignment',
-    'textColor', 'backgroundColor',
-    'link', 'image', 'clear'
-  ]}
-  onChange={(html) => console.log(html)}
-  placeholder="Write your blog post..."
-/>
-```
-
-### Editor with Color Highlighting
-
-```jsx
-<ScribleEditor
-  features={[
-    'bold', 'italic', 'underline',
-    'textColor', 'backgroundColor',
-    'clear'
-  ]}
-  onChange={(html) => console.log(html)}
-  placeholder="Highlight important text..."
-/>
-```
-
-### With Initial Content
-
-```jsx
-const initialContent = `
-  <h1>Welcome to Scrible</h1>
-  <p>This is a <strong>powerful</strong> editor!</p>
-`;
-
-<ScribleEditor
-  initialValue={initialContent}
-  onChange={(html) => console.log(html)}
-/>
-```
-
-### Read-Only Mode
-
-```jsx
-<ScribleEditor
-  initialValue={articleContent}
-  readOnly={true}
-/>
-```
-
-### Check if Empty
-
-```jsx
-function MyEditor() {
-  const [editorValue, setEditorValue] = useState([]);
-
-  const handleChange = (html, slateValue) => {
-    setEditorValue(slateValue);
-  };
-
-  const isEmpty = editorValue.length === 0;
-
-  return (
-    <div>
-      <ScribleEditor onChange={handleChange} />
-      {isEmpty && <p>Editor is empty!</p>}
-    </div>
-  );
-}
-```
-
-## 🎨 Custom Styling
-
-Scrible comes with default styles, but you can customize the appearance:
-
-```css
-/* Customize the editor container */
-.scrible-editor {
-  border: 2px solid #3b82f6;
-  border-radius: 12px;
-}
-
-/* Customize the toolbar */
-.toolbar {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-/* Customize the editing area */
-.editor-content {
-  min-height: 300px;
-  font-family: 'Georgia', serif;
-  font-size: 16px;
-}
-```
-
-## ⌨️ Keyboard Shortcuts
-
-- `Ctrl+B` - Bold
-- `Ctrl+I` - Italic
-- `Ctrl+U` - Underline
-- `Ctrl+Z` - Undo
-- `Ctrl+Shift+Z` - Redo
-
-## 🔧 HTML Output
-
-Scrible outputs clean, semantic HTML:
-
-```html
-<h1>Heading</h1>
-<p>This is a <strong>bold</strong> paragraph with <em>italic</em> text.</p>
-<ul>
-  <li>List item 1</li>
-  <li>List item 2</li>
-</ul>
-<table border="1">
-  <tr>
-    <th>Header 1</th>
-    <th>Header 2</th>
-  </tr>
-  <tr>
-    <td>Cell 1</td>
-    <td>Cell 2</td>
-  </tr>
-</table>
-```
-<!--
-## 🛠️ Development
-
-```bash
-# Install dependencies
-npm install
-
-# Start development server
-npm run dev
-
-# Build for production
-npm run build
-
-# Build library for npm
-npm run build:lib
-```-->
-
-## 📄 License
-
-MIT © Ayush Singhal
-
-<!--## 🤝 Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
-
-## 🌟 Show Your Support
-
-Give a ⭐️ if this project helped you!
-
----
-
-**Made with ❤️ by developers, for developers**-->
+# Scrible ✍️
+
+**A powerful, customizable rich text editor for React** - Built with Slate.js, outputs clean HTML, and offers Notion-like editing experience.
+
+![Scrible Preview](https://res.cloudinary.com/dm3it5tld/image/upload/v1765117113/scrible_preview_ulzrpn.png)
+
+[![npm version](https://img.shields.io/npm/v/scrible.svg)](https://www.npmjs.com/package/scrible)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+## ✨ Features
+
+- 🎨 **Fully Customizable** - Choose which features to include
+- 📝 **Rich Text Formatting** - Bold, italic, underline, strikethrough
+- 🎨 **Color Customization** - Text and background color pickers with 24 preset colors
+- 📑 **Multiple Heading Levels** - H1, H2, H3 with semantic markup
+- 📋 **Lists** - Bulleted and numbered lists
+- 📊 **Tables** - Full table support with easy insertion
+- 🖼️ **Images** - Upload and resize images with drag handles
+- 🔗 **Links** - Automatic link detection and manual insertion
+- ↔️ **Text Alignment** - Left, center, right, justify
+- 📏 **Font Sizes** - Multiple size options
+- 💾 **Clean HTML Output** - Semantic HTML like Quill.js
+- ⌨️ **Keyboard Shortcuts** - Standard shortcuts (Ctrl+B, Ctrl+I, etc.)
+- 📱 **Responsive** - Works great on desktop and mobile
+- 🎯 **TypeScript Ready** - Full type support
+
+## 📦 Installation
+
+```bash
+npm install scrible slate slate-react slate-history
+```
+
+or
+
+```bash
+yarn add scrible slate slate-react slate-history
+```
+
+## 🚀 Quick Start
+
+```jsx
+import React, { useState } from 'react';
+import ScribleEditor from 'scrible';
+import 'scrible/dist/scrible.css';
+
+function App() {
+  const [content, setContent] = useState('');
+
+  const handleChange = (htmlContent, slateValue) => {
+    setContent(htmlContent);
+  };
+
+  return (
+    <ScribleEditor
+      onChange={handleChange}
+      placeholder="Start writing..."
+    />
+  );
+}
+```
+
+**Important:** Don't forget to import the CSS file!
+
+## 🎛️ Customizable Toolbar
+
+Choose which features to include in your editor:
+
+```jsx
+import ScribleEditor from 'scrible';
+import 'scrible/dist/scrible.css';
+
+function CustomEditor() {
+  const [content, setContent] = useState('');
+
+  // Only include the features you need
+  const features = [
+    'bold',
+    'italic',
+    'underline',
+    'headings',
+    'lists',
+    'link',
+    'image'
+  ];
+
+  return (
+    <ScribleEditor
+      features={features}
+      onChange={(html) => setContent(html)}
+      placeholder="Minimal editor..."
+    />
+  );
+}
+```
+
+### Available Features
+
+| Feature | Description |
+|---------|-------------|
+| `bold` | Bold text formatting |
+| `italic` | Italic text formatting |
+| `underline` | Underline text formatting |
+| `strikethrough` | Strikethrough text formatting |
+| `headings` | H1, H2, H3, blockquote |
+| `lists` | Bulleted and numbered lists |
+| `alignment` | Text alignment (left, center, right, justify) |
+| `fontSize` | Font size options |
+| `textColor` | Text color picker with presets and custom colors |
+| `backgroundColor` | Background/highlight color picker |
+| `link` | Insert and edit links |
+| `image` | Upload and resize images |
+| `table` | Insert and manage tables |
+| `clear` | Clear all content button |
+
+## 📖 Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `Node[]` | `null` | Controlled Slate.js value |
+| `onChange` | `(html: string, value: Node[]) => void` | `undefined` | Called when content changes |
+| `placeholder` | `string` | `"Enter some text..."` | Placeholder text |
+| `readOnly` | `boolean` | `false` | Make editor read-only |
+| `className` | `string` | `""` | Additional CSS class |
+| `initialValue` | `string \| Node[]` | `null` | Initial content (HTML string or Slate value) |
+| `features` | `string[]` | All features | Array of features to include |
+
+## 💡 Examples
+
+### Basic Editor
+
+```jsx
+<ScribleEditor
+  onChange={(html) => console.log(html)}
+  placeholder="Start typing..."
+/>
+```
+
+### Minimal Editor (Only Basic Formatting)
+
+```jsx
+<ScribleEditor
+  features={['bold', 'italic', 'underline', 'clear']}
+  onChange={(html) => console.log(html)}
+  placeholder="Simple editor..."
+/>
+```
+
+### Blog Editor (No Tables)
+
+```jsx
+<ScribleEditor
+  features={[
+    'bold', 'italic', 'underline', 'strikethrough',
+    'headings', 'lists', 'alignment',
+    'textColor', 'backgroundColor',
+    'link', 'image', 'clear'
+  ]}
+  onChange={(html) => console.log(html)}
+  placeholder="Write your blog post..."
+/>
+```
+
+### Editor with Color Highlighting
+
+```jsx
+<ScribleEditor
+  features={[
+    'bold', 'italic', 'underline',
+    'textColor', 'backgroundColor',
+    'clear'
+  ]}
+  onChange={(html) => console.log(html)}
+  placeholder="Highlight important text..."
+/>
+```
+
+### With Initial Content
+
+```jsx
+const initialContent = `
+  <h1>Welcome to Scrible</h1>
+  <p>This is a <strong>powerful</strong> editor!</p>
+`;
+
+<ScribleEditor
+  initialValue={initialContent}
+  onChange={(html) => console.log(html)}
+/>
+```
+
+### Read-Only Mode
+
+```jsx
+<ScribleEditor
+  initialValue={articleContent}
+  readOnly={true}
+/>
+```
+
+### Check if Empty
+
+```jsx
+function MyEditor() {
+  const [editorValue, setEditorValue] = useState([]);
+
+  const handleChange = (html, slateValue) => {
+    setEditorValue(slateValue);
+  };
+
+  const isEmpty = editorValue.length === 0;
+
+  return (
+    <div>
+      <ScribleEditor onChange={handleChange} />
+      {isEmpty && <p>Editor is empty!</p>}
+    </div>
+  );
+}
+```
+
+## 🎨 Custom Styling
+
+Scrible comes with default styles, but you can customize the appearance:
+
+```css
+/* Customize the editor container */
+.scrible-editor {
+  border: 2px solid #3b82f6;
+  border-radius: 12px;
+}
+
+/* Customize the toolbar */
+.toolbar {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+/* Customize the editing area */
+.editor-content {
+  min-height: 300px;
+  font-family: 'Georgia', serif;
+  font-size: 16px;
+}
+```
+
+## ⌨️ Keyboard Shortcuts
+
+- `Ctrl+B` - Bold
+- `Ctrl+I` - Italic
+- `Ctrl+U` - Underline
+- `Ctrl+Z` - Undo
+- `Ctrl+Shift+Z` - Redo
+
+## 🔧 HTML Output
+
+Scrible outputs clean, semantic HTML:
+
+```html
+<h1>Heading</h1>
+<p>This is a <strong>bold</strong> paragraph with <em>italic</em> text.</p>
+<ul>
+  <li>List item 1</li>
+  <li>List item 2</li>
+</ul>
+<table border="1">
+  <tr>
+    <th>Header 1</th>
+    <th>Header 2</th>
+  </tr>
+  <tr>
+    <td>Cell 1</td>
+    <td>Cell 2</td>
+  </tr>
+</table>
+```
+<!--
+## 🛠️ Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Build library for npm
+npm run build:lib
+```-->
+
+## 📄 License
+
+MIT © Ayush Singhal
+
+<!--## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 🌟 Show Your Support
+
+Give a ⭐️ if this project helped you!
+
+---
+
+**Made with ❤️ by developers, for developers**-->