@tiptap/extension-typography

What is @tiptap/extension-typography?

@tiptap/extension-typography is an extension for the Tiptap editor that provides advanced typography features. It enhances the text editing experience by automatically transforming certain text patterns into their typographically correct forms.

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

Smart Quotes

Automatically converts straight quotes to smart quotes. For example, typing '"Hello"' will be transformed into '“Hello”'.

import Typography from '@tiptap/extension-typography';
import { Editor } from '@tiptap/core';

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

// Typing '"Hello"' in the editor will automatically convert to '“Hello”'.

Ellipsis

Automatically converts three consecutive dots '...' into an ellipsis '…'.

import Typography from '@tiptap/extension-typography';
import { Editor } from '@tiptap/core';

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

// Typing '...' in the editor will automatically convert to '…'.

En Dash and Em Dash

Automatically converts double hyphens '--' to en dashes '–' and triple hyphens '---' to em dashes '—'.

import Typography from '@tiptap/extension-typography';
import { Editor } from '@tiptap/core';

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

// Typing '--' in the editor will automatically convert to '–' (en dash).
// Typing '---' in the editor will automatically convert to '—' (em dash).

Other packages similar to @tiptap/extension-typography

typogr

Typogr is a JavaScript library that provides similar typography enhancements by transforming text into typographically correct forms. It focuses on smart quotes, ellipses, and dashes, much like @tiptap/extension-typography, but it is not specifically designed for integration with rich text editors.

typography

Typography.js is a library that helps you design beautiful typography for your website. While it offers a broader range of typography-related features, including font scaling and rhythm, it does not provide the same automatic text transformation features as @tiptap/extension-typography.

smartypants

Smartypants is a library that converts plain ASCII punctuation characters into 'smart' typographic punctuation HTML entities. It offers similar functionality to @tiptap/extension-typography but is more focused on static text transformation rather than integration with a rich text editor.

README

@tiptap/extension-typography

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.