これは Hubble Advent Calendar 2024 の11日目1の記事です。
はじめに
株式会社Hubbleのフロントエンドを担当している @moneyan9 です。
突然ですが、皆さんリッチテキストエディタにはどのようなものを使用していますか？
僕はこれまで Quill を利用することが多かったのですが、Hubbleでは ProseMirror を利用しています。しかしながら、Hubbleに入社して9ヶ月…既に運用されているエディタ部分を触る機会はそれほど多くないため、ProseMirrorの理解を深める機会が少ないと感じていました。
そこで、今回はProseMirrorにAngularコンポーネントを埋め込むことを目的としながら、同時にProseMirrorの理解を深めていこうと思います。
参考
ProseMirrorの理解を進めるために役立ったリソースを紹介します。
-
公式ドキュメント
- ProseMirrorの各モジュールの詳細仕様やAPIリファレンスが記載されています
-
frederik/angular-elements-with-prosemirror
- Angular v6でProseMirrorとAngularコンポーネントを組み合わせる手法を解説したリポジトリです。現在のバージョンとは異なる箇所もありますが、全体像を理解する助けになりました
ProseMirrorのモジュール
まずは、ProseMirrorの基本的なモジュール構成から見ていきます。
公式ドキュメントにも以下のように記載されているように、ProseMirrorは複数のモジュールで構成されているため、まずどのようなモジュールがあるのかを知る必要があります。
The core library is not an easy drop-in component—we are prioritizing modularity and customizability over simplicity
まずは、コアとなる3つのモジュールについて理解します。
| モジュール | 説明 |
|---|---|
| prosemirror-model | ノードやマークといった文章の構造を定義する |
| prosemirror-state | ドキュメントの内容、選択範囲、トランザクションなどのエディタの状態の管理する |
| prosemirror-view | エディタの状態をブラウザ上に表示する |
上述の3つのモジュールによりProseMirrorを動作させることはできるのですが、これだけでは改行すらできなかったり、ノードやマークを自分で定義しないといけなかったり…と大変なので、更に利用頻度が高いと思われる3つのモジュールについても確認していきます。
| モジュール | 説明 |
|---|---|
| prosemirror-schema-basic | 見出し、段落、リスト、引用などの一般的なノードや、太字、イタリック、リンクなどの一般的なマークを提供する |
| prosemirror-commands | 一般的な編集操作（太字・リスト・ブロック変更など）を簡潔に実装するための関数を提供する |
| prosemirror-keymap | 特定のキー入力に応じて、コマンドを実行するためのマッピングを管理する |
最小構成での実装
ざっくりと各モジュールの理解をしたところで、最小の構成でProseMirrorを動かしてみたいと思います（コード全体はこちら）
- 上述の6つのモジュールを package.json に追加
- index.html で css をインポート
- editor.component.ts を作成
import { AfterViewInit, Component, ElementRef, viewChild } from '@angular/core';
import { baseKeymap } from 'prosemirror-commands';
import { keymap } from 'prosemirror-keymap';
import { Schema } from 'prosemirror-model';
import { schema } from 'prosemirror-schema-basic';
import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
@Component({
selector: 'app-editor',
standalone: true,
template: `
<div #editor style="border: solid 1px silver"></div>
<h2>editorView.state.doc</h2>
{{ editorView?.state?.doc }}
<h2>editorView.dom.innerHTML</h2>
{{ editorView?.dom?.innerHTML }}
`,
})
export class EditorComponent implements AfterViewInit {
private readonly editor =
viewChild.required<ElementRef<HTMLDivElement>>('editor');
editorView?: EditorView;
ngAfterViewInit() {
const mySchema = new Schema({
nodes: schema.spec.nodes,
marks: schema.spec.marks,
});
this.editorView = new EditorView(this.editor().nativeElement, {
state: EditorState.create({
schema: mySchema,
plugins: [keymap(baseKeymap)],
}),
});
}
}
Schemaのnodesやmarksで、きめ細やかな指定を行えるのがProseMirrorの特徴でもあるのですが、今回は prosemirror-schema-basic で用意されているスキーマ定義を利用しました。
一応、改行だけが可能なProseMirrorを動かすことができました。
keymap(baseKeymap)によってバインドされるのはEnterキーやBackspaceキーなどの基本的なキー操作のみ、キーボードショートカットによる太字や斜体については、それぞれキーマップを定義する必要があるようです。
Angularコンポーネントの埋め込み
既に色々な所が気になってはいるものの、本来の目的であるAngularコンポーネントの埋め込みを実現するため、前に進みたいと思います。（コード全体はこちら）
大まかには以下の手順でTodoを入力するためのコンポーネントをProseMirrorで表示するところまでを解説していきます。
- Todoコンポーネントを作成する
- TodoコンポーネントをCustom Element (todo-element) として利用できるようにする
- NodeViewインターフェースを実装したTodoViewでtodo-elementを描画する
- todoNodeSpecを定義し、Schmaに組み込む
Todoコンポーネントの作成
まずは埋め込むための Todoコンポーネントを作成します。
チェックボックスとTodo入力フィールドを備えたシンプルなコンポーネントです。
import { Component } from '@angular/core';
@Component({
selector: 'app-todo',
standalone: true,
template: `
<div style="display:flex; flex-align:center">
<input type="checkbox"/>
<input type="text" placeholder="Input ToDo" style="border: none;"/>
</div>
`,
})
export class TodoComponent {}
Custom Elements として利用できるようにする
続いて、Todoコンポーネントを Custom Elements として利用するために、bootstrapApplication で todo-element を定義します。Angular Elements の登場から6年が経ちましたが、初めて利用しました。宣言自体は非常に簡潔なのですね。
import { Component } from '@angular/core';
+ import { createCustomElement } from '@angular/elements';
import { bootstrapApplication } from '@angular/platform-browser';
import { EditorComponent } from './editor.component';
+ import { TodoComponent } from './todo.component';
@Component({
selector: 'app-root',
standalone: true,
template: `<app-editor />`,
imports: [EditorComponent],
})
export class App {}
- bootstrapApplication(App);
+ bootstrapApplication(App).then((app) => {
+ const todoElement = createCustomElement(TodoComponent, {
+ injector: app.injector,
+ });
+ customElements.define('todo-element', todoElement);
+ });
TodoView の作成
todo-elementを利用する準備が整ったら、続いてTodoViewを作成していきます。
NodeViewインターフェースを実装することで、ProseMirrorエディタ内でカスタムノードの表示と動作を制御することができるようになります。
ポイントとしてはコンストラクターでInjectorを注入することで、TodoView内でRenderer2を用いてDOMを生成しているところです。
import { Injector, Renderer2 } from '@angular/core';
import { Node } from 'prosemirror-model';
import { Decoration, DecorationSource, NodeView } from 'prosemirror-view';
export class TodoView implements NodeView {
private readonly renderer = this.injector.get(Renderer2);
readonly dom = this.renderer.createElement('todo-element');
action = (random: any) => '';
constructor(private injector: Injector) {
this.dom.addEventListener('result', this.action);
}
update(
node: Node,
decorations: readonly Decoration[],
innerDecorations: DecorationSource
): boolean {
return true;
}
selectNode(): void {
this.dom.setAttribute('selected', true);
}
deselectNode(): void {
this.dom.setAttribute('selected', false);
}
ignoreMutation(mutation: MutationRecord): boolean {
return true;
}
stopEvent(event: Event): boolean {
return event.target !== this.dom.children[0];
}
destroy(): void {
this.dom.removeEventListener('result', this.action);
}
}
スキーマ定義への組み込み
ようやくTodoViewをカスタムノードとして利用する準備が整ったので、スキーマ定義に組み込んでいきます。同時にメニューバーにNew Todoボタンを追加して、ボタンがクリックされたらTodoViewを表示するようにします。
import {
AfterViewInit,
Component,
ElementRef,
+ inject,
+ Injector,
viewChild,
} from '@angular/core';
import { baseKeymap } from 'prosemirror-commands';
import { keymap } from 'prosemirror-keymap';
+ import { menuBar, MenuItem } from 'prosemirror-menu';
- import { Schema } from 'prosemirror-model';
+ import { NodeSpec, Schema } from 'prosemirror-model';
import { schema } from 'prosemirror-schema-basic';
import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
+ import { TodoView } from './todo.view';
+ const todoNodeSpec: NodeSpec = {
+ todo: {
+ group: 'block',
+ toDOM() {
+ return ['div', { 'data-type': 'todo' }];
+ },
+ parseDOM: [
+ {
+ tag: 'div[data-type=todo]',
+ getAttrs() {
+ return {};
+ },
+ },
+ ],
+ },
+ };
@Component({
selector: 'app-editor',
standalone: true,
template: `
<div #editor style="border: solid 1px silver"></div>
<h2>editorView.state.doc</h2>
{{ editorView?.state?.doc }}
<h2>editorView.dom.innerHTML</h2>
{{ editorView?.dom?.innerHTML }}
`,
})
export class EditorComponent implements AfterViewInit {
+ private readonly injector = inject(Injector);
private readonly editor =
viewChild.required<ElementRef<HTMLDivElement>>('editor');
editorView?: EditorView;
ngAfterViewInit() {
const mySchema = new Schema({
- nodes: schema.spec.nodes,
+ nodes: schema.spec.nodes.append(todoNodeSpec),
marks: schema.spec.marks,
});
this.editorView = new EditorView(this.editor().nativeElement, {
state: EditorState.create({ schema: mySchema }),
nodeViews: {
todo: () => new TodoView(this.injector),
},
plugins: [
keymap(baseKeymap),
+ menuBar({
+ content: [
+ [
+ new MenuItem({
+ title: 'New Todo',
+ label: 'New Todo',
+ run: ({ tr }, dispatch) => {
+ const todoNode = mySchema.nodes['todo'].create();
+ dispatch(tr.replaceSelectionWith(todoNode).scrollIntoView());
+ return true;
+ },
+ }),
+ ],
+ ],
+ }),
],
});
}
}
一通りの手順が完了したので、NewTodoをクリックしてみるとTodoViewがちゃんと表示されました！
キャレットが消えてしまったり、ProseMirrorの挙動に馴染まない点がまだありますが、この問題はNodeView内での選択範囲の扱い方を調整することで解決できる可能性があります。詳細な解決方法については今後の課題とします。
おわりに
今回はProseMirrorにAngularコンポーネントを埋め込むことを目的としたこともあり、ProseMirror自体の解説が薄いものになってしまいましたが、ふんわりとでもProseMirrorの雰囲気を掴んでいただければ幸いです。
Quillと比較して、最初はProseMirrorの思想や各モジュールの理解が難しそうだなと感じていました。しかし、理解が進むにつれてドキュメント構造を厳密に定義でき、定義した通りに動いてくれるProseMirrorはコードを書いていて面白みがあるなと感じてきました。
リッチテキストエディターに何を利用しようか迷われている方がおられたら、是非ProseMirrorを試してみるのも良いかと思います！
明日はバックエンドエンジニアの @ktkr-wks さんです！
-
平日のみの投稿なので16日ですが、11日目の記事としています。 ↩