Getting started

Install

Install the plugin and the Milkdown packages used below:

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

@milkdown/theme-nord is only an example theme. You may use another Milkdown theme.

Create an editor

Create a mount element:

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

Create the editor and register the plugin. You must explicitly import the package stylesheet; it supplies the writing-mode and logical-layout rules.

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, '# Vertical writing');
  })
  .config(nord)
  .use(commonmark)
  .use(verticalWriting({ mode: 'vertical-rl', lineLength: 40 }))
  .create();

verticalWriting accepts horizontal-tb, vertical-rl, and vertical-lr. Omit lineLength, or set it to null, when no maximum line length is wanted.

The plugin does not require MDI and does not add Markdown syntax. It works with ordinary Milkdown documents.

Change presentation at runtime

Keep the editor returned by create() and run the exported actions with editor.action:

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

editor.action(changeWritingMode('vertical-lr'));
editor.action(changeLineLength(32));
editor.action(changeLineLength(null)); // Remove the limit.

Mode changes preserve the document, current selection, and undo history. The plugin transfers the logical reading progress to the new layout.

Live demo

Try the published package here before copying the example above: