prosemirror-view

Rendering the document model

This code initializes an editor view in the body of the HTML document using a basic schema. It demonstrates how to render the document model into the DOM.

const {EditorView} = require('prosemirror-view');
const {EditorState} = require('prosemirror-state');
const {schema} = require('prosemirror-schema-basic');

let state = EditorState.create({schema});
let view = new EditorView(document.body, {state});

Handling user input

This code snippet shows how to listen for and handle key down events within the editor. It's a simple way to start building custom interactions.

view.setProps({
  handleKeyDown(view, event) {
    console.log('Key down:', event);
    return false; // Return true if the event was handled
  }
});

Custom node views

This demonstrates how to extend the NodeView class to create custom renderings for nodes in the document. It's a powerful feature for customizing the appearance and behavior of content.

const {NodeView} = require('prosemirror-view');

class CustomNodeView extends NodeView {
  // Implementation of a custom node view
}