Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (block-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.