Skip to content

README.md

Latest commit

 

History

History
306 lines (240 loc) · 6.74 KB

README.md

File metadata and controls

306 lines (240 loc) · 6.74 KB

Scrible ✍️

A powerful, customizable rich text editor for React - Built with Slate.js, outputs clean HTML, and offers Notion-like editing experience.

Scrible Preview

npm version License: 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

npm install scrible slate slate-react slate-history

or

yarn add scrible slate slate-react slate-history

🚀 Quick Start

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:

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

<ScribleEditor
  onChange={(html) => console.log(html)}
  placeholder="Start typing..."
/>

Minimal Editor (Only Basic Formatting)

<ScribleEditor
  features={['bold', 'italic', 'underline', 'clear']}
  onChange={(html) => console.log(html)}
  placeholder="Simple editor..."
/>

Blog Editor (No Tables)

<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

<ScribleEditor
  features={[
    'bold', 'italic', 'underline',
    'textColor', 'backgroundColor',
    'clear'
  ]}
  onChange={(html) => console.log(html)}
  placeholder="Highlight important text..."
/>

With Initial Content

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

<ScribleEditor
  initialValue={articleContent}
  readOnly={true}
/>

Check if Empty

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:

/* 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:

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

📄 License

MIT © Ayush Singhal