prosemirror-view

What is prosemirror-view?

The prosemirror-view package is part of the ProseMirror ecosystem, which provides a toolkit for building rich-text editors. This particular package is responsible for rendering the document model into a DOM structure and handling user interactions. It allows developers to create custom views, handle input from users, and manage the editor's state.

What are prosemirror-view's main functionalities?

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
}

Other packages similar to prosemirror-view

quill

Quill is a powerful, rich text editor that offers similar functionality to ProseMirror. It provides a modular architecture, allowing developers to customize it extensively. Compared to prosemirror-view, Quill might be easier to use for simple use cases but offers less flexibility for complex customizations.

draft-js

Draft.js is a framework for building rich text editors in React, backed by an immutable model. It provides a high level of customization and control over the content and its presentation. While Draft.js integrates well with React applications, ProseMirror offers a more framework-agnostic approach and might be preferred for non-React projects.

slate

Slate is a completely customizable framework for building rich text editors. It's similar to ProseMirror in terms of the level of control it offers over the content and its presentation. Slate is built on top of React and Immutable.js, making it a good choice for React-based projects looking for deep customization similar to what ProseMirror-view offers.

README

prosemirror-view

[ WEBSITE | ISSUES | FORUM | GITTER | CHANGELOG ]

ProseMirror is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas.

This module exports the editor view, which renders the current document in the browser, and handles user events.

The project page has more information, a number of demos and the documentation.

NOTE: This project is in BETA stage. It isn't thoroughly tested, and the API might still change across 0.x releases. You are welcome to use it, but don't expect it to be very stable yet.

This code is released under an MIT license. There's a forum for general discussion and support requests, and the Github bug tracker is the place to report issues.

Changelog

0.15.0 (2016-12-10)

Breaking changes

The editor view no longer wraps its editable DOM element in a wrapper element. The ProseMirror CSS class now applies directly to the editable element. The ProseMirror-content CSS class is still present for ease of upgrading but will be dropped in the next release.

The editor view no longer draws a drop cursor when dragging content over the editor. The new prosemirror-dropcursor module implements this as a plugin.

Bug fixes

Simple typing and backspacing now gets handled by the browser without ProseMirror redrawing the touched nodes, making spell-checking and various platform-specific input tricks (long-press on OS X, double space on iOS) work in the editor.

Improve tracking of DOM nodes that have been touched by user changes, so that updateState can reliably fix them.

Changes to the document that happen while dragging editor content no longer break moving of the content.

Adding or removing a mark directly in the DOM (for example with the bold/italic buttons in iOS' context menu) now produces mark steps, rather than replace steps.

Pressing backspace at the start of a paragraph on Android now allows key handlers for backspace to fire.

Toggling a mark when there is no selection now works better on mobile platforms.

New features

Introduces an endOfTextblock method on views, which can be used to find out in a bidi- and layout-aware way whether the selection is on the edge of a textblock.