Reprose

A configurable editor for React, based on ProseMirror and written in TypeScript.

Provides tools and patterns that simplify rendering a document to HTML in headless environments (e.g., Node or Electron main process) where global window object is unavailable, and for creating a rich editor React component.

The editor component provides an onChange() handler, outputting data serialized as ProseMirror document structure.

Features

Reprose’s functionality is contained in features. A feature can provide schema aspects (nodes, marks), and authoring aspects (key bindings, menu items, ProseMirror plugins).

A few features come bundled with Reprose (work in progress).

Example usage

Note	Rendering example to be added.

Obtaining a schema:

schema.ts

import paragraph from '@riboseinc/reprose/features/paragraph/schema';
import lists from '@riboseinc/reprose/features/lists/schema';

import featuresToSchema from '@riboseinc/reprose/schema';

const schema = featuresToSchema([paragraph, lists]);

export default schema;

Obtaining an editor:

editor.tsx

import blocky from '@riboseinc/reprose/features/blocky/author';
import paragraph from '@riboseinc/reprose/features/paragraph/author';
import lists from '@riboseinc/reprose/features/lists/author';

import featuresToEditorProps from '@riboseinc/reprose/author';
import Editor from '@riboseinc/reprose/author/editor';

import schema from './schema';

const editorProps = featuresToEditorProps([blocky, paragraph, lists], schema);

export default editor = (
  <Editor
    onChange={...}
    initialDoc={...}
    logger={log}
    {...editorProps}
  />
)