@tiptap/core

What is @tiptap/core?

@tiptap/core is a headless, framework-agnostic, and highly customizable rich-text editor built on top of ProseMirror. It provides a flexible and extensible API to create and manage rich-text content, making it suitable for a wide range of applications from simple text editors to complex content management systems.

What are @tiptap/core's main functionalities?

Creating an Editor

This code demonstrates how to create a basic editor instance with initial content and an update handler that logs the current HTML content to the console.

const { Editor } = require('@tiptap/core');
const editor = new Editor({
  content: '<p>Hello World!</p>',
  onUpdate: ({ editor }) => {
    console.log(editor.getHTML());
  },
});

Adding Extensions

This code shows how to add extensions to the editor. The `StarterKit` extension provides a set of basic functionalities like bold, italic, and bullet lists.

const { Editor } = require('@tiptap/core');
const { StarterKit } = require('@tiptap/starter-kit');
const editor = new Editor({
  extensions: [StarterKit],
  content: '<p>Hello World!</p>',
});

Custom Extensions

This code demonstrates how to create a custom node extension. The `CustomNode` is defined with specific parsing and rendering rules, and then added to the editor.

const { Node, mergeAttributes } = require('@tiptap/core');
const CustomNode = Node.create({
  name: 'customNode',
  group: 'block',
  content: 'inline*',
  parseHTML() {
    return [{ tag: 'custom-node' }];
  },
  renderHTML({ HTMLAttributes }) {
    return ['custom-node', mergeAttributes(HTMLAttributes), 0];
  },
});
const editor = new Editor({
  extensions: [CustomNode],
  content: '<custom-node>Hello World!</custom-node>',
});

Other packages similar to @tiptap/core

prosemirror

ProseMirror is a toolkit for building rich-text editors. It provides a lot of flexibility and control over the editor's behavior and appearance. @tiptap/core is built on top of ProseMirror, making it easier to use and extend.

slate

Slate is another highly customizable framework for building rich-text editors. It offers a more React-centric approach compared to @tiptap/core, which is framework-agnostic.

draft-js

Draft.js is a rich-text editor framework built by Facebook. It is highly extensible and provides a lot of control over the editor's state and behavior. However, it is more tightly coupled with React compared to @tiptap/core.

README

@tiptap/core

Introduction

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.

Official Documentation

Documentation can be found on the Tiptap website.

License

Tiptap is open sourced software licensed under the MIT license.

Changelog

2.3.2 (2024-05-08)

Bug Fixes

• NodePos querySelectorAll function (#5094) (4900a27)