tiptap-japanese

Japanese writing extensions for TipTap 3. Provides ruby (furigana), emphasis dots, tate-chu-yoko, auto-indentation, and more — built for Japanese novel and long-form writing.

日本語の説明はこちら

Features

| Extension | Description | |-----------|-------------| | Ruby | Furigana annotations — |漢字《かんじ》 input rule, paste support, WYSIWYG / notation modes | | EmphasisDot | Bouton (傍点) — 《《text》》 input rule, paste support | | Annotation | Inline editorial annotations with ID + comment | | TateChuYoko | Horizontal-in-vertical text — ^AB^ input rule, paste support | | AutoTateChuYoko | Auto-detects 1-2 digit numbers for tate-chu-yoko decoration | | AutoIndent | Japanese-aware first-line indentation (skips dialogue, dashes, bullets) |

Converters

• htmlToContent(html) — Parse HTML into plain text + markup annotations
• contentToHtml(text, markups) — Convert plain text + markups back to HTML
• serializeMarkups(markups) / parseMarkups(json) — JSON serialization

Installation

npm install tiptap-japanese @tiptap/core @tiptap/pm

@tiptap/core and @tiptap/pm (v3+) are peer dependencies.

Quick Start

import { useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import {
  Ruby,
  EmphasisDot,
  AutoIndent,
} from 'tiptap-japanese'

const editor = useEditor({
  extensions: [
    StarterKit,
    Ruby.configure({ displayMode: 'wysiwyg' }),
    EmphasisDot.configure({ displayMode: 'wysiwyg' }),
    AutoIndent.configure({ enabled: true }),
  ],
})

Extension Reference

Ruby

Adds furigana (振り仮名) annotations to text.

Ruby.configure({
  displayMode: 'wysiwyg', // 'wysiwyg' | 'notation'
  notationClass: 'ruby-notation',
})

// Commands
editor.commands.setRuby('かんじ')
editor.commands.unsetRuby()
editor.commands.toggleRuby('かんじ')

Input rule: Type |漢字《かんじ》 to create ruby inline.

HTML output (WYSIWYG): <ruby><rb>漢字</rb><rt>かんじ</rt></ruby>

EmphasisDot

Adds emphasis dots (傍点) above characters.

EmphasisDot.configure({
  displayMode: 'wysiwyg',
  emphasisDotClass: 'emphasis-dot',
  notationClass: 'emphasis-dot-notation',
})

editor.commands.setEmphasisDot()
editor.commands.unsetEmphasisDot()
editor.commands.toggleEmphasisDot()

Input rule: Type 《《重要》》 to apply emphasis dots.

CSS example:

.emphasis-dot {
  text-emphasis: filled sesame;
  text-emphasis-position: over right;
  -webkit-text-emphasis: filled sesame;
  -webkit-text-emphasis-position: over right;
}

Annotation

Inline editorial annotations with ID and comment.

Annotation.configure({
  annotationClass: 'annotation-mark',
})

editor.commands.setAnnotation({ id: 'note-1', comment: 'Check this' })
editor.commands.updateAnnotationComment('note-1', 'Updated')
editor.commands.removeAnnotationById('note-1')
editor.commands.unsetAnnotation()

TateChuYoko

Horizontal-in-vertical text (縦中横) for numbers and abbreviations.

TateChuYoko.configure({
  tateChuYokoClass: 'tate-chu-yoko',
})

editor.commands.setTateChuYoko()
editor.commands.unsetTateChuYoko()
editor.commands.toggleTateChuYoko()

Input rule: Type ^42^ to apply tate-chu-yoko (1-4 alphanumeric characters).

CSS example:

.tate-chu-yoko {
  text-combine-upright: all;
  -webkit-text-combine: horizontal;
}

AutoTateChuYoko

Decoration-only. Automatically highlights 1-2 digit numbers for tate-chu-yoko display.

AutoTateChuYoko.configure({
  enabled: true,
  decorationClass: 'auto-tate-chu-yoko',
})

AutoIndent

Decoration-only. Adds a CSS class to paragraphs that should have first-line indentation.

Skips paragraphs starting with dialogue markers (「, 『), dashes, bullets, and whitespace.

AutoIndent.configure({
  enabled: true,
  indentClass: 'auto-indent',
})

.auto-indent { text-indent: 1em; }

Content Converters

Convert between HTML and a plain text + markup representation:

import { htmlToContent, contentToHtml } from 'tiptap-japanese'

// HTML → plain text + markups
const { text, markups } = htmlToContent(
  '<p>今日は<span data-ruby="てんき">天気</span>がいい</p>'
)
// text: "今日は天気がいい"
// markups: [{ type: "ruby", start: 3, end: 5, ruby: "てんき" }]

// Plain text + markups → HTML
const html = contentToHtml(text, markups)
// '<p>今日は<span data-ruby="てんき">天気</span>がいい</p>'

Requirements

• TipTap 3.x (@tiptap/core and @tiptap/pm)
• Browser environment with DOMParser (for converters)

License

MIT

日本語

TipTap 3 向けの日本語組版拡張ライブラリです。小説やエッセイなど長文執筆に必要なルビ（振り仮名）、傍点、縦中横、自動字下げなどの機能を提供します。

主な機能

• ルビ — |漢字《かんじ》 と入力するだけで振り仮名を追加
• 傍点 — 《《重要》》 と入力するだけで傍点を追加
• 注釈 — テキスト範囲に ID 付きコメントを添付
• 縦中横 — ^42^ と入力するだけで縦中横を適用
• 自動縦中横 — 1-2 桁の数字を自動検出して縦中横表示
• 自動字下げ — 会話文（「」）やダッシュで始まる段落を除外した自動字下げ

インストール

npm install tiptap-japanese @tiptap/core @tiptap/pm

詳しい使い方は英語セクションをご覧ください。