Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
prosemirror-view
Advanced tools
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.
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
}
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 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 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.
[ WEBSITE | ISSUES | FORUM | 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.36.0 (2024-11-05)
Don't recreated TrustedTypePolicy
objects for every paste.
Add support for a destroy
method on custom mark views. Add MarkView to the doc template
FAQs
ProseMirror's view component
The npm package prosemirror-view receives a total of 1,428,772 weekly downloads. As such, prosemirror-view popularity was classified as popular.
We found that prosemirror-view demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.