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.
prosemirror-view
[ WEBSITE | ISSUES | FORUM | GITTER | CHANGELOG ]
This is a core module of ProseMirror.
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 examples and the
documentation.
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.
We aim to be an inclusive, welcoming community. To make that explicit,
we have a code of
conduct that applies
to communication around the project.
1.2.0 (2018-03-14)
Bug fixes
Fix a problem where updating the state of a non-editable view would not set the selection, causing problems when the DOM was updated in a way that disrupted the DOM selection.
Fix an issue where, on IE and Chrome, starting a drag selection in a position that required a cursor wrapper (on a mark boundary) would sometimes fail to work.
Fix crash in key handling when the editor is focused but there is no DOM selection.
Fixes a bug that prevented decorations inside node views with a contentDOM
property from being drawn.
Fixes an issue where, on Firefox, depending on a race condition, the skipping over insignificant DOM nodes done at keypress was canceled again before the keypress took effect.
Fixes an issue where an :after
pseudo-element on a non-inclusive mark could block the cursor, making it impossible to arrow past it.
New features
The DOM structure for marks is no longer constrained to a single node. Mark views can have a contentDOM
property, and mark spec toDOM
methods can return structures with holes.
Widget decorations are now wrapped in the marks of the node after them when their side
option is >= 0.
Widget decorations may now specify a marks
option to set the precise set of marks they should be wrapped in.