@tiptap/extension-code

What is @tiptap/extension-code?

@tiptap/extension-code is an extension for the Tiptap editor that allows you to add and manage inline code snippets within your rich text editor. It provides functionality to format text as code, making it useful for documentation, technical writing, and any other use case where inline code representation is needed.

What are @tiptap/extension-code's main functionalities?

Add Inline Code

This feature allows you to add inline code snippets within your text. The code sample demonstrates how to initialize the Tiptap editor with the Code extension and include inline code in the content.

import { Code } from '@tiptap/extension-code';
import { Editor } from '@tiptap/core';

const editor = new Editor({
  extensions: [
    Code,
  ],
  content: '<p>This is <code>inline code</code> in a paragraph.</p>',
});

Toggle Code Formatting

This feature allows you to toggle code formatting for the selected text. The code sample shows how to initialize the Tiptap editor with the Code extension and toggle code formatting using the chainable command API.

import { Code } from '@tiptap/extension-code';
import { Editor } from '@tiptap/core';

const editor = new Editor({
  extensions: [
    Code,
  ],
});

// Toggle code formatting for the selected text
editor.chain().focus().toggleCode().run();

Other packages similar to @tiptap/extension-code

prosemirror-example-setup

The prosemirror-example-setup package provides a set of example configurations for ProseMirror, including code formatting. It is more of a general-purpose setup for ProseMirror and may require more customization compared to @tiptap/extension-code, which is specifically designed for Tiptap.

slate

Slate is a completely customizable framework for building rich text editors. It offers more flexibility and control over the editor's behavior and appearance, but it requires more setup and configuration compared to the straightforward integration of @tiptap/extension-code.

draft-js

Draft.js is a framework for building rich text editors in React. It provides a set of tools for managing text content and formatting, including code blocks. However, it is more React-centric and may not be as easily integrated into non-React projects as @tiptap/extension-code.

README

@tiptap/extension-code

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.1.12 (2023-10-11)

Bug Fixes

• link: restore pasteHandler and add existing url check (#4523) (1a7b428)