はじめに

インストール

プラグインと、この最小例で使う Milkdown パッケージをインストールします。

npm install @illusions-lab/milkdown-plugin-vertical-writing @milkdown/core @milkdown/preset-commonmark @milkdown/theme-nord

@milkdown/theme-nord は例として使う theme です。アプリケーションでは別の Milkdown theme を選べます。

エディターを作成する

まずマウント要素を用意します。

<div id="editor"></div>

次にエディターを作成してプラグインを登録します。パッケージの CSS は必ず明示的に import してください。 JavaScript だけでは writing-mode と logical layout のルールは読み込まれません。

import { Editor, rootCtx, defaultValueCtx } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { nord } from '@milkdown/theme-nord';
import { verticalWriting } from '@illusions-lab/milkdown-plugin-vertical-writing';
import '@illusions-lab/milkdown-plugin-vertical-writing/style.css';

await Editor.make()
  .config((ctx) => {
    ctx.set(rootCtx, '#editor');
    ctx.set(defaultValueCtx, '# 縦書き');
  })
  .config(nord)
  .use(commonmark)
  .use(verticalWriting({ mode: 'vertical-rl', lineLength: 40 }))
  .create();

mode には horizontal-tb、vertical-rl、vertical-lr を指定できます。行長を制限しない場合は lineLength を省略するか null を指定します。MDI は不要で、通常の Milkdown 文書で使えます。

実行時に変更する

create() が返す editor に対して、editor.action で action を実行します。

import {
  changeLineLength,
  changeWritingMode,
} from '@illusions-lab/milkdown-plugin-vertical-writing';

editor.action(changeWritingMode('vertical-lr'));
editor.action(changeLineLength(32));
editor.action(changeLineLength(null)); // 制限を解除

writing mode の変更では文書、選択、undo history を保持し、新しい組版でも論理的な読書位置を復元します。

Live demo

上の例をコピーする前に、公開済み package をここで試せます。