はじめに

本記事では、WYSIWYG Markdownエディタ「milkdown」において、見出しや太字などの装飾機能を実装する方法をSvelteでご紹介します。

装飾コマンドとは？

milkdownに用意されている装飾機能は、inline-commandsと呼ばれるもので、Markdown上で見た目を変更するためのコマンドです。具体的には、太字、見出し、引用などがあります。これらのコマンドを使用することで、Markdown文書をより見やすく、分かりやすくすることができます。

応用

本記事で紹介したsvelteを使った装飾コマンドの実装方法は、他のJavaScriptフレームワークやライブラリでもほぼ同様に実装できます。
vue.jsやReactでも同じような方法で実装可能です。

milkdownの導入方法

milkdownの導入方法については、以下のURLから別の記事で解説しています。手順を確認してから本記事の内容を実践することをおすすめします。

装飾コマンド導入方法

1. 必要なパッケージをインストール
   まず、以下のコマンドを使用して、必要なパッケージをインストールします。

yarn add @milkdown/preset-commonmark

yarn add @milkdown/utils

1. インポートする
   次に、コマンドを使用するために、以下のようにコマンドをインポートします。
   ※ 装飾コマンドのインポートは`cmds`で一括でインポートしましたが、必要なものだけ分割で受け取ってもOKです。

// 装飾コマンド
import * as cmds from '@milkdown/preset-commonmark';
// コマンドを呼び出すためのもの
import { callCommand } from '@milkdown/utils';

装飾コマンド紹介

続いて、装飾コマンドの紹介をします。
かなりバリエーション豊富にありますので、挙動が確認できたものだけ紹介いたします。

見出しの作成(使用する際に引数に数字を指定する必要あり)
wrapInHeadingCommand

太字
toggleStrongCommand

引用
wrapInBlockquoteCommand

イタリック
toggleEmphasisCommand

imageの雛形を展開
insertImageCommand

リストの解除
liftListItemCommand

リストの追加
splitListItemCommand

バッククォートで囲む
toggleInlineCodeCommand

水平線
insertHrCommand

リスト作成
wrapInBulletListCommand

数字のリストを作成
wrapInOrderedListCommand

改行を挿入
insertHardbreakCommand

実装例

記事冒頭で紹介した、`milkdownの導入方法`で生成した `editor`の`action`メソッドを使用して、下記のように記述します。

装飾コマンドで紹介した一部になりますが、見出し実装の例です。

`callCommand`には[コマンド].keyというルールで第一引数を渡します。
見出しの実装に限ってですが、第二引数に数字を渡すことができます。

※ 注意点として、第二引数を指定しない場合はH1になります。

H2の実装

const wrapInHeading = (num) => {
  editor.action(callCommand(wrapInHeadingCommand.key, num));
};

太字の実装
こちらはすごくシンプルです。
Commandにtoggleとあるように、`toggle` が含まれるものは `太字 ⇆ 解除`のようにtoggleします。

const toggleBold = () => {
  editor.action(callCommand(toggleStrongCommand.key));
};

svelte側の記述

<!-- H2 見出し -->
<button type="button" on:click="{() => wrapInHeading(2)}">H</button>
<!-- 太字 -->
<button type="button" on:click="{toggleBold}">B</button>

実際の挙動

実際の挙動は、以下のようになります。

見出しに関しては、行にフォーカスした状態で実行すると見出しになります。文字が入力されていない状態でも、見出しモードになります。

toggle系のコマンドは、文字を選択して実行すると装飾スタイルが適用されます。

※ 注意点として、記事冒頭で紹介したmilkdownの導入方法で設定したstyleを指定していない場合、意図した見た目にならない場合があります。

最後に

本記事では、milkdownの装飾コマンドを使用したtoolbarの実装方法について解説しました。milkdownの導入方法については、以下のURLから別の記事で解説しています。ぜひ、合わせて参考にしてみてください。