開始使用

安裝

安裝 plugin，以及此最小範例使用的 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>

接著建立 editor 並註冊 plugin。必須顯式 import 套件的 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，plugin 可用於一般 Milkdown 文件。

在執行時變更

保留 create() 回傳的 editor，透過 editor.action 執行匯出的 actions：

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

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

切換 mode 時會保留文件、目前選取與 undo history，並將邏輯閱讀進度帶到新的排版。

Live demo

複製上方範例前，可在此直接試用已發布的 package。