Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
@tiptap/vue-3
Advanced tools
@tiptap/vue-3 is a rich-text editor framework for Vue 3, built on top of ProseMirror. It provides a highly customizable and extensible editor experience, allowing developers to create complex text editing interfaces with ease.
Basic Editor Setup
This code sets up a basic editor using @tiptap/vue-3 with the StarterKit extension, which includes common features like bold, italic, and lists.
```json
{
"template": "<editor-content :editor=\"editor\" />",
"setup": "import { EditorContent, useEditor } from '@tiptap/vue-3';
import StarterKit from '@tiptap/starter-kit';
export default {
components: {
EditorContent,
},
setup() {
const editor = useEditor({
extensions: [StarterKit],
content: '<p>Hello World!</p>',
});
return {
editor,
};
},
};"
}
```
Custom Extensions
This code demonstrates how to create a custom extension for @tiptap/vue-3, allowing you to add custom commands and functionality to the editor.
```json
{
"template": "<editor-content :editor=\"editor\" />",
"setup": "import { EditorContent, useEditor } from '@tiptap/vue-3';
import { Extension } from '@tiptap/core';
const CustomExtension = Extension.create({
name: 'custom',
addCommands() {
return {
setCustom: () => ({ commands }) => {
return commands.insertContent('<p>Custom Content</p>');
},
};
},
});
export default {
components: {
EditorContent,
},
setup() {
const editor = useEditor({
extensions: [CustomExtension],
content: '<p>Initial Content</p>',
});
return {
editor,
};
},
};"
}
```
Collaboration
This code sets up a collaborative editor using @tiptap/vue-3 and the y-webrtc provider, allowing multiple users to edit the same document in real-time.
```json
{
"template": "<editor-content :editor=\"editor\" />",
"setup": "import { EditorContent, useEditor } from '@tiptap/vue-3';
import Collaboration from '@tiptap/extension-collaboration';
import { WebrtcProvider } from 'y-webrtc';
import * as Y from 'yjs';
const ydoc = new Y.Doc();
const provider = new WebrtcProvider('your-room-name', ydoc);
export default {
components: {
EditorContent,
},
setup() {
const editor = useEditor({
extensions: [
Collaboration.configure({
document: ydoc,
}),
],
content: '<p>Collaborative Content</p>',
});
return {
editor,
};
},
};"
}
```
Quill is a modern WYSIWYG editor built for compatibility and extensibility. It provides a simple API and a rich set of features, but it is less customizable compared to @tiptap/vue-3.
Slate is a completely customizable framework for building rich text editors. It offers more control over the editor's behavior and appearance, but requires more effort to set up compared to @tiptap/vue-3.
Draft.js is a framework for building rich text editors in React, developed by Facebook. It provides a lot of flexibility and control, but it is more complex to use and less feature-rich out of the box compared to @tiptap/vue-3.
tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.
Documentation can be found on the tiptap website.
tiptap is open-sourced software licensed under the MIT license.
FAQs
Vue components for tiptap
The npm package @tiptap/vue-3 receives a total of 144,350 weekly downloads. As such, @tiptap/vue-3 popularity was classified as popular.
We found that @tiptap/vue-3 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers 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
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.