https://github.com/riboseinc/reprose
Configurable ProseMirror instance as a React component
https://github.com/riboseinc/reprose
Last synced: about 1 month ago
JSON representation
Configurable ProseMirror instance as a React component
- Host: GitHub
- URL: https://github.com/riboseinc/reprose
- Owner: riboseinc
- Created: 2020-10-04T05:14:33.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-28T08:43:38.000Z (over 1 year ago)
- Last Synced: 2025-04-11T03:47:02.487Z (about 1 month ago)
- Language: TypeScript
- Size: 412 KB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.adoc
Awesome Lists containing this project
README
= 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
[source,typescript]
----
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
[source,typescript]
----
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 = (
)
----
image::/docs/screenshot.png?raw=true[Editor screenshot]