🔥
リッチテキストエディタ→Markdown変換ツールを作ってみた
はじめに
今回は、Next.jsとBlockNoteを組み合わせて開発した、NotionライクなリッチテキストエディタからMarkdown形式で記事を出力できるツールについて紹介します。
Markdownによる技術記事執筆を、より直感的で快適にすることを目的としたアプリケーションです。
使用した技術
- Next.js
- Tailwind CSS
- Block Note
- supabase
- shadcn/ui
ほか
プロジェクトについて
本プロジェクトは、BlockNoteで作成したリッチテキストを、Markdown形式に変換・出力できるツールです。
- Notionのような操作性を持つBlockNoteエディタで、快適に記事を執筆できます。
- 作成した記事は、BlockNote標準のMarkdown変換機能を活用し、QiitaやZennといった技術投稿メディア向けに出力可能です。
作成の動機
私はエンジニアとして成長するために積極的に技術情報を発信し、多くのフィードバックを得たいと考えています。 QiitaやZennなどの技術投稿メディアは、記事の作成にMarkdownを使用します。 しかし、Markdownのみの執筆環境よりも、Notionのような直感的でリッチなエディタで記事を作成できたら、より効率的かつ快適に技術発信ができると考え、このアプリケーションを開発しました。
Block Noteとは
Reactで実装されたブロックベースのテキストエディタのライブラリです。
Notionのように、文章を「ブロック単位」で構造化し、視覚的かつ直感的に操作することができます。
特徴
- デフォルトでNotionと遜色ないUXが設定されている。
- カスタムブロックの追加が可能
- 簡単に実装できる。
※※画像アップロードや埋め込みリンクなど一部機能は、独自にAPI連携などの実装が必要です。
実装方法（抜粋）
インストール
npm install @blocknote/core @blocknote/react @blocknote/mantine
Editor コンポーネントの作成（editor.tsx）
"use client"
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";
export default function App() {
// Creates a new editor instance.
const editor = useCreateBlockNote();
// Renders the editor instance using a React component.
return <BlockNoteView editor={editor} />;
}
クライアントサイドレンダリング（editor-csr.tsx）
"use client";
import dynamic from "next/dynamic";
export const Editor = dynamic(() => import("./Editor"), { ssr: false });
表示（page.tsx）
import { Editor } from "../components/DynamicEditor";
function App() {
return (
<div>
<Editor />
</div>
);
}
Markdownの取得
editor.blocksToMarkdownLossy()
この関数でMarkdownを取得し、画面右側にリアルタイムで表示しています。
その他の実装
- 埋め込みリンク
カスタムブロックとして自作追加 - 画像アップロード
Supabaseストレージを使用して実装
詳細はgithubをご参照ください。
最後に
BlockNoteを用いることで、Notionライクな直感的インターフェースを持つエディタを簡単に構築できました。
今後はこのツールを活用して、より積極的に技術記事を発信していきたいと考えています。
ここまで読んでいただきありがとうございました。
参照リンク
- BlockNote
https://www.blocknotejs.org/
Discussion