Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
prosemirror-state
Advanced tools
The prosemirror-state package is a part of the ProseMirror toolkit, which is used to manage the state of a ProseMirror editor. It provides a way to represent the editor's state, including the document, selection, and any other metadata. This package is essential for creating and manipulating the state of a ProseMirror editor, allowing for complex text editing functionalities.
EditorState
The EditorState class is used to create and manage the state of the editor. This includes the document, selection, and any other metadata. The code sample demonstrates how to create an EditorState instance using a schema and a document parsed from the DOM.
const { EditorState } = require('prosemirror-state');
const { Schema, DOMParser } = require('prosemirror-model');
const schema = new Schema({
nodes: {
doc: { content: 'block+' },
paragraph: { content: 'text*', toDOM: () => ['p', 0] },
text: { inline: true }
}
});
const doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));
const state = EditorState.create({ doc });
console.log(state);
Transaction
Transactions are used to apply changes to the editor state. The code sample demonstrates how to create a transaction that inserts text into the document and then apply that transaction to the state.
const { EditorState, Transaction } = require('prosemirror-state');
const { Schema, DOMParser } = require('prosemirror-model');
const schema = new Schema({
nodes: {
doc: { content: 'block+' },
paragraph: { content: 'text*', toDOM: () => ['p', 0] },
text: { inline: true }
}
});
const doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));
let state = EditorState.create({ doc });
let tr = state.tr.insertText('Hello, world!', 1, 1);
state = state.apply(tr);
console.log(state.doc.content);
Plugin
Plugins allow you to extend the functionality of the editor. The code sample demonstrates how to create a plugin that logs keydown events and add it to the editor state.
const { EditorState, Plugin } = require('prosemirror-state');
const { Schema, DOMParser } = require('prosemirror-model');
const schema = new Schema({
nodes: {
doc: { content: 'block+' },
paragraph: { content: 'text*', toDOM: () => ['p', 0] },
text: { inline: true }
}
});
const doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));
const myPlugin = new Plugin({
props: {
handleDOMEvents: {
keydown(view, event) {
console.log('A key was pressed:', event.key);
return false;
}
}
}
});
const state = EditorState.create({ doc, plugins: [myPlugin] });
console.log(state);
Draft.js is a framework for building rich text editors in React. It provides a similar set of functionalities for managing editor state, but is more tightly integrated with React. Unlike ProseMirror, which is framework-agnostic, Draft.js is specifically designed for use with React.
Slate is another framework for building rich text editors in React. It offers a more flexible and customizable approach compared to Draft.js, allowing developers to define their own schema and plugins. Like ProseMirror, Slate provides fine-grained control over the editor state and document structure.
Quill is a powerful, free, open-source WYSIWYG editor. It provides a high-level API for managing editor state and content, but does not offer the same level of low-level control as ProseMirror. Quill is more focused on providing a ready-to-use editor with a rich set of features out of the box.
[ 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 implements the editor state, which tracks the current document and selection, and managed plugins.
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.
FAQs
ProseMirror editor state
We found that prosemirror-state demonstrated a not healthy version release cadence and project activity because the last version was released 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
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.