tiptap深掘り

メモ

• ProseMirror使ってる
• WYSIWYG editors
  • What You See Is What You Get
• extension

初期化

• element
  • editorをbindする要素
  • elementを除いて初期化もできる。domが準備できてから改めて渡せる
• extensions
• content
  • editorの内容の初期値。HTMLかJSON形式
• editable
• autofocus
• enableInputRules
  • マークダウン系の記号など特定の入力があった際に変換する。extensionを渡す
• enablePasteRules
  • paste版
• injectCSS
  • デフォルトで効いているCSSのon/off
• injectNonce
  • CSPで使用するnonceを埋め込む(どこに埋め込まれるのか不明)
• editorProps
  • ProseMirror絡み
• parseOptions
  • ProseMirror絡み

Methods

editorインスタンスが持つメソッド。別でcommandsという概念がありそっちはeditor自体の設定値を変更する関数

• can
  • comanndやcommand chain(下記参照)が実行可能かを返す
• chain
  • commandを一度に実行できるcommand chainを定義する
• destroy
  • editorインスタンスの停止とイベントのバインド解除(removeListener的な？
• getHTML
• getJSON
  • そのまま
• getText
  • そのまま
  • optionある
• getAttributes
  • 返り値のイメージわかず
• isActive
  • activeとは？
    • 選択したテキストに既に何か(太字、イタリックなど)が適用されているか
    • 使い方よくわからん(https://tiptap.dev/docs/editor/getting-started/style-editor/custom-menus#the-active-state)
• registerPlugin
• unregisterPlugin
  • ProseMirro絡み
• setOptions
  • optionあったっけ
• setEditable
  • editable
    • そのまま
  • emitUpdate
    • onUpdateが発火するかどうか
• $node
  • 謎

Properties

• isEditable
• isEmpty
• isFocused
• isDestroyed
  • ライフサイクル知りたい
• isCapturingTransaction
  • capturing a transaction...?

Configure extensions

extension自体の設定も可能

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Heading from '@tiptap/extension-heading'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    Document,
    Paragraph,
    Text,
    Heading.configure({
      levels: [1, 2, 3],
    }),
  ],
})

Styling

メニュー

後回し

Core Concepts

の前に、、、

Prose Mirror

リッチテキストエディタの一つ。tiptapの本体(？)
model, state, viewの3つのライブラリから構成される

Model
入力値をどのように表示するのかを定義する

State
エディターの状態を保持する

View
ModelとStateの内容を合わせてDOMに出力する