/prosemirror-to-html

Takes ProseMirror JSON and renders HTML.

Primary LanguageJavaScript

ProseMirror to HTML (JS)

(This package is based on prosemirror-to-html, which was originally written for PHP.)

Takes ProseMirror JSON and outputs HTML.

Installation

NPM

yarn add @eteu-technologies/prosemirror-to-html-js

Deno

See Skypack

Usage

//const { Renderer } = require("@eteu-technologies/prosemirror-to-html-js");
import { Renderer } from 'https://cdn.skypack.dev/@eteu-technologies/prosemirror-to-html-js';

const renderer = new Renderer();

console.log(renderer.render({
    'type': 'doc',
    'content': [
        {
            'type': 'paragraph',
            'content': [
                {
                    'type': 'text',
                    'text': 'Example Paragraph',
                },
            ],
        },
    ],
}));

// Outputs `<p>Example Text</p>`

Supported Nodes

  • Blockquote
  • BulletList
  • CodeBlock
  • Heading
  • ListItem
  • OrderedList
  • Paragraph

Supported Marks

  • Bold
  • Code
  • Italic
  • Link

Custom Nodes

Define your node as a class -

//const { Node } = require("@eteu-technologies/prosemirror-to-html-js");
import { Node } from 'https://cdn.skypack.dev/@eteu-technologies/prosemirror-to-html-js';

class CustomNode extends Node {
    matching() {
        return this.node.type === 'custom_node';
    }

    tag() {
        return 'cnode';
    }
}

Feed it to renderer instance -

renderer.addNode(CustomNode);