Tiptap 3

ProseMirror のアトミックノードと標準履歴を使う拡張。

導入

npm run build:integrations を実行し、エディター作成前に dist/integrations/tiptap/formulix-ui.min.js を読み込みます。dist/integrations/tiptap/index.js を ESM でインポートし、既存の extensions に追加します。配布には npm run package:integrations を使用します。アプリケーションと同じ Tiptap を使用してください。実行確認は 3.32.0 です。

設定

import Formulix from './formulix/index.js';
Formulix.configure({
  servidor: 'https://api.formulix.example',
  chave: 'YOUR_PUBLIC_KEY',
  idioma: 'ja',
  upload: uploadPng
});
editor.commands.openFormulix('formula'); // conta, grafico, quimica

アプリケーションに uploadPng(blob) を実装し、PNG を送って URL を返す Promise を返してください。グラフと図には upload が必須です。メディアサーバー側で利用者認証、PNG、サイズ、権限を検証します。

API / 公開キー

運営者から提供された HTTPS API URL とアカウントの公開キーを設定し、管理画面にエディターのドメインを登録します。サブドメインも対象です。https://api.formulix.example と YOUR_PUBLIC_KEY は説明用のプレースホルダーで、実在する接続先やキーではありません。

プレビューと挿入の内容は API に送信されます。ブラウザーにはドメインに紐づく公開キーだけを設定し、管理用・SMTP・Mercado Pago の認証情報は入れないでください。

API · プライバシー — 翻訳草案

保存と制限

openFormulix の引数は formula / conta / grafico / quimica。ダブルクリックで再編集します。formulixInline と formulixBloco はアトミックなノードで、サニタイズ済み HTML を保持します。editor.getJSON() または editor.getHTML() を保存し、サーバー側でも MathML・表・data-* を保持してください。ダイアログ表示中も選択位置はトランザクションに追従します。応答前に対象が削除されると更新を拒否し、読み取り専用では変更を許可しません。Yjs による共同編集は未検証です。3.32.0 で4種類、JSON/HTML、履歴、選択位置、サニタイズ、読み取り専用を検証済みです。

Word の OMML/RTF クリップボード処理は TinyMCE 固有です。Alpha アダプターの同等機能、複数言語の同時使用、Firefox/WebKit、モバイル端末は検証が必要です。