API

type WritingMode = 'horizontal-tb' | 'vertical-rl' | 'vertical-lr';

interface VerticalWritingOptions {
  mode?: WritingMode;
  lineLength?: number;
}

verticalWriting(options)

向 Milkdown 註冊 layout plugin。它回傳 Milkdown plugin array，因此可直接傳給 editor.use。

editor.use(verticalWriting({
  mode: 'vertical-rl',
  lineLength: 40,
}));

Option	Type	Default	說明
mode	WritingMode	horizontal-tb	初始 CSS writing mode。
lineLength	正整數	不限制	每行最大推進量，以全形字元為單位。

lineLength 是實際渲染推進量，不是字數計數器。禁則處理可能讓標點落在名義邊界的前後；半形 Latin text 或 inline node 也不會各自算成一個全形字元。省略時代表不限制。

CSS 必須顯式 import：

import '@illusions-lab/milkdown-plugin-vertical-writing/style.css';

changeWritingMode(mode)

回傳一個不重新建立 editor 即可切換 writing mode 的 action：

editor.action(changeWritingMode('horizontal-tb'));
editor.action(changeWritingMode('vertical-rl'));
editor.action(changeWritingMode('vertical-lr'));

文件、選取與 undo history 會保留，plugin 會將邏輯捲動進度轉移至新的 layout。

changeLineLength(number | null)

回傳更新行長上限的 action。傳入正整數設定限制，傳入 null 移除限制：

editor.action(changeLineLength(40));
editor.action(changeLineLength(null));

開啟行長限制時，圖片只受 max-inline-size 限制。不會被強制縮放，intrinsic aspect ratio 也會保留。

WritingMode

匯出的 WritingMode 只有三個合法值：

值	Layout
horizontal-tb	橫排，行從上往下。
vertical-rl	直排，欄從右往左。
vertical-lr	直排，欄從左往右。

不合法的 mode、非正數或非整數的 line length，會在建立 plugin 或 action 時拋出 TypeError。

Live demo

可用 controls 試用上面說明的 writing mode 與 line length 行為。