【脱・素のtextarea】Webコンポーネントで手軽に実装できるMarkdownエディタ「Writemark」を公開しました

Markdownで文章を書くのは好きですが、プレーンなtextareaで書くのはもう限界だと感じていました。どこでも簡単に導入できるWebコンポーネントが欲しくて作ったのが「Writemark」です。使い方はとてもシンプル。以下のようにタグを置くだけです。<writemark-editor name="body"></writemark-editor>Writemarkは、書いているそばからMarkdownをプレビュー表示しつつ、保存や送信時にはしっかりとMarkdown形式を維持します。ソース編集、分割画面、プレビューモードの切り替えに加え、スラッシュコマンド、テーブル、タスクリスト、コードブロック、ネイティブフォーム対応など、必要な機能はひと通り揃えました。ランタイム依存関係や特定のフレームワーク、固定のツールバーは一切ありません。いわゆる「バイブス重視（vibecoded）」な開発スタイルで、試作と修正のサイクルを繰り返して「自分が書いていて心地よく、かつ動作も軽快なエディタ」に仕上げました。AIコード生成の実験として始まったわけではなく、純粋に「textareaから脱却したい」「巨大なエディタフレームワークを読み込まずにMarkdownエディタを導入したい」というモチベーションから生まれたツールです。まだ開発初期段階で、パーサーは手書き、コンポーネント本体も実質1つの巨大なJavaScriptファイルで構成されています。エッジケースが潜んでいる可能性は大いにあるので、もし壊しがいのあるバグを見つけたらぜひ教えてください。安全面には力を入れており、現在Chromium、Firefox、WebKitで951件のPlaywrightテストをパスしています。過酷な入力値のテストやサニタイザーのファジング、CommonMarkとの差異テストも実施済みです。個人的な欲求から生まれたツールですが、面白いものができたと思っています。ぜひ試してみてください。フィードバックは大歓迎です。- Github: https://github.com/Brostoffed/writemark - NPM: https://www.npmjs.com/package/writemark-editor

Node.jsに依存してるのに、どうして依存フリーなんて言えるんだ？

インライン編集って過小評価されてるよね。Markdownを多用するプロジェクトだと、ミスを即座に確認できるだけで、トライアンドエラー的なデバッグ作業がかなり減る。

リポジトリをクローンしなくても動かせるライブデモがあると嬉しいな。まあ、ブックマークレットで試せばいいだけかもしれないけど。

javascript:import('https://esm.sh/writemark-editor').then(() => document.body.append(document.createElement('writemark-editor')))