block-text

Block Text

A powerful, Notion-like block editor library for React with rich text formatting, syntax highlighting, and LaTeX support.

Features

• 🧱 Block-based Architecture: Everything is a block (paragraphs, headings, images, etc.)
• ✨ Rich Text Formatting: Bold, italic, underline, code, and links
• 🎨 Syntax Highlighting: Code blocks with Prism.js support
• 📐 LaTeX Support: Mathematical formulas with KaTeX
• 🌙 Dark Mode: Built-in dark/light theme support
• 📱 Responsive: Works on desktop and mobile
• 🎯 TypeScript: Full TypeScript support
• 🎨 Customizable: Easy to style and extend

Installation

npm install block-text

Quick Start

import React, { useState } from "react";
import { BlockEditor, BlockRenderer, Block, createBlock } from "block-text";

function App() {
  const [blocks, setBlocks] = useState<Block[]>([
    createBlock("heading1", "Welcome to Block Editor"),
    createBlock("paragraph", "Start typing your content here..."),
  ]);

  return (
    <div>
      <BlockEditor blocks={blocks} onChange={setBlocks} isDarkMode={false} />
      <BlockRenderer blocks={blocks} />
    </div>
  );
}

Block Types

Text Blocks

• Paragraph: Multi-line text with formatting
• Heading 1, 2, 3: Different heading levels
• Quote: Styled quote blocks

Special Blocks

• Code Block: Syntax-highlighted code with language support
• Formula: LaTeX mathematical expressions
• Image: Image blocks with alt text and captions
• Callout: Highlighted information blocks
• Divider: Visual separators

List Blocks

• Bullet List: Unordered lists with nested items
• Numbered List: Ordered lists with nested items

API Reference

Components

BlockEditor

Main editor component for creating and editing blocks.

<BlockEditor
  blocks={Block[]}
  onChange={(blocks: Block[]) => void}
  isDarkMode?: boolean
  className?: string
/>

BlockRenderer

Component for rendering blocks in read-only mode.

<BlockRenderer
  blocks={Block[]}
  className?: string
/>

Utility Functions

createBlock

Creates a new block with the specified type and content.

createBlock(
  type: Block["type"],
  content?: string,
  metadata?: any
): Block

createTextSegment

Creates a text segment with formatting.

createTextSegment(
  text: string,
  formats: Format[] = []
): TextSegment

Keyboard Shortcuts

• Enter: New line (in paragraphs)
• Shift+Enter: New block
• Ctrl/Cmd+B: Bold
• Ctrl/Cmd+I: Italic
• Ctrl/Cmd+U: Underline
• Ctrl/Cmd+K: Code formatting

Styling

The library uses Tailwind CSS classes. You can customize the appearance by:

• Overriding CSS classes
• Using the className prop on components
• Modifying the dark mode implementation

Supported Languages (Code Blocks)

• JavaScript, TypeScript
• Python, Java, C#, C, C++
• HTML, CSS, JSON, YAML
• SQL, Bash, Markdown
• And many more via Prism.js

LaTeX Examples

E = mc^2
\frac{1}{2}mv^2
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Development

# Install dependencies
npm install

# Build library
npm run build

# Watch mode for development
npm run dev

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.