core

@openblock/core

Framework-agnostic core for the OpenBlock rich text editor.

Key Features

• Public API - All ProseMirror internals are accessible via editor.pm.*
• Block-based - JSON document format similar to BlockNote
• Extensible - Add custom blocks, marks, and plugins
• TypeScript - Full type safety

Installation

npm install @openblock/core
# or
pnpm add @openblock/core

Quick Start

import { OpenBlockEditor } from '@openblock/core';
import '@openblock/core/styles/editor.css';

const editor = new OpenBlockEditor({
  element: document.getElementById('editor'),
  initialContent: [
    {
      type: 'heading',
      props: { level: 1 },
      content: [{ type: 'text', text: 'Hello World', styles: {} }],
    },
    {
      type: 'paragraph',
      content: [{ type: 'text', text: 'Start editing...', styles: {} }],
    },
  ],
});

// Access document
const blocks = editor.getDocument();

// Listen to changes
editor.on('change', ({ blocks }) => {
  console.log('Document changed:', blocks);
});

ProseMirror Access

Unlike other editors, OpenBlock exposes the full ProseMirror API:

// Direct access to ProseMirror view and state
editor.pm.view;        // EditorView
editor.pm.state;       // EditorState
editor.pm.doc;         // Document node

// Create and dispatch transactions
const tr = editor.pm.createTransaction();
tr.insertText('Hello');
editor.pm.dispatch(tr);

// Modify node attributes
editor.pm.setNodeAttrs(pos, { level: 2 });

// Toggle marks
editor.pm.toggleMark('bold');

// Add plugins at runtime
editor.pm.addPlugin(myPlugin);

Styling

Import the default styles, which use CSS variables compatible with shadcn/ui:

import '@openblock/core/styles/editor.css';

Or create your own styles targeting .openblock-editor and .ProseMirror.

API Reference

OpenBlockEditor

The main editor class.

// Constructor
new OpenBlockEditor(config?: EditorConfig)

// Document operations
editor.getDocument(): Block[]
editor.setDocument(blocks: Block[]): void
editor.getBlock(id: string): Block | undefined
editor.getSelectedBlocks(): Block[]

// Block operations
editor.insertBlocks(blocks, referenceBlock, placement): void
editor.updateBlock(block, update): void
editor.removeBlocks(blocks): void

// Formatting
editor.toggleBold(): boolean
editor.toggleItalic(): boolean
editor.toggleUnderline(): boolean
editor.toggleStrikethrough(): boolean
editor.toggleCode(): boolean
editor.setLink(href, title?): void
editor.removeLink(): void

// Focus
editor.focus(position?): void
editor.blur(): void
editor.hasFocus: boolean

// Serialization
editor.toJSON(): Block[]
editor.fromJSON(blocks): void

// Lifecycle
editor.mount(element): void
editor.destroy(): void
editor.isDestroyed: boolean
editor.isEditable: boolean
editor.setEditable(editable): void

// Events
editor.on(event, handler): () => void
editor.off(event, handler): void

ProseMirrorAPI

Public access to all ProseMirror functionality via editor.pm.

See ProseMirrorAPI.ts for the full API.

License

Apache-2.0