Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
prosemirror-inputrules
Advanced tools
The prosemirror-inputrules package provides a way to define input rules for ProseMirror editors. These rules can automatically transform text as the user types, such as converting markdown-like syntax into rich text formatting.
Basic Input Rule
This code demonstrates how to create a basic input rule that transforms a markdown-like bullet list syntax into a bullet list node in a ProseMirror editor.
const { inputRules, wrappingInputRule } = require('prosemirror-inputrules');
const { Schema } = require('prosemirror-model');
const { EditorState } = require('prosemirror-state');
const { EditorView } = require('prosemirror-view');
// Define a schema
const schema = new Schema({
nodes: {
doc: { content: 'block+' },
paragraph: { content: 'inline*', group: 'block' },
text: { group: 'inline' }
},
marks: {}
});
// Define an input rule
const bulletListRule = wrappingInputRule(/^\s*([-+*])\s$/, schema.nodes.bullet_list);
// Create an editor state with the input rule plugin
const state = EditorState.create({
schema,
plugins: [inputRules({ rules: [bulletListRule] })]
});
// Create an editor view
const view = new EditorView(document.querySelector('#editor'), {
state
});
Custom Input Rule
This code demonstrates how to create a custom input rule that transforms a markdown-like heading syntax into a heading node in a ProseMirror editor.
const { inputRules, textblockTypeInputRule } = require('prosemirror-inputrules');
const { Schema } = require('prosemirror-model');
const { EditorState } = require('prosemirror-state');
const { EditorView } = require('prosemirror-view');
// Define a schema
const schema = new Schema({
nodes: {
doc: { content: 'block+' },
heading: { content: 'inline*', group: 'block', attrs: { level: { default: 1 } } },
text: { group: 'inline' }
},
marks: {}
});
// Define a custom input rule
const headingRule = textblockTypeInputRule(/^#\s$/, schema.nodes.heading, { level: 1 });
// Create an editor state with the input rule plugin
const state = EditorState.create({
schema,
plugins: [inputRules({ rules: [headingRule] })]
});
// Create an editor view
const view = new EditorView(document.querySelector('#editor'), {
state
});
Quill is a modern WYSIWYG editor built for compatibility and extensibility. It provides a rich API for customizing the editor's behavior and appearance. Unlike prosemirror-inputrules, Quill comes with built-in support for various input transformations and does not require additional plugins for basic input rules.
Draft.js is a framework for building rich text editors in React. It provides a set of tools for managing editor state and handling input transformations. Similar to prosemirror-inputrules, Draft.js allows developers to define custom input rules, but it is more tightly integrated with the React ecosystem.
Slate is a completely customizable framework for building rich text editors. It provides a set of primitives for defining the editor's behavior and appearance. Like prosemirror-inputrules, Slate allows developers to define custom input rules, but it offers more flexibility and control over the editor's behavior.
[ 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 a plugin that can be used to define input rules, things that should happen when input matching a given pattern is typed, along with a number of predefined rules.
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.1.3 (2020-09-16)
Fix crash when undoing input rules when the rule was triggered without inserting text.
FAQs
Automatic transforms on text input for ProseMirror
The npm package prosemirror-inputrules receives a total of 0 weekly downloads. As such, prosemirror-inputrules popularity was classified as not popular.
We found that prosemirror-inputrules 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.