シンタックスハイライト

Draft-jsは、Facebook（現 Meta）が開発したリッチテキストエディタフレームワークです。この記事では、Draft-jsを使用して、シンタックスハイライト機能を持つ簡易的なSQLエディタをReactで作成する方法を紹介します。

前提条件

このプロジェクトを始める前に、以下のものがインストールされていることを確認してください。

• Node.js
• npmまたはyarn

また、Reactの基本的な知識があるとスムーズに進められます。

プロジェクトのセットアップ

新しいReactプロジェクトを作成し、Draft-jsをインストールします。

npx create-react-app draft-js-syntax-highlight
cd draft-js-syntax-highlight
npm install draft-js

エディタコンポーネントの作成

Draft-jsを使ってエディタコンポーネントを作成し、CSSを適用します。

エディタのスタイル設定

Draft-jsのデフォルトスタイルを適用するために、CSSをインポートします。

import 'draft-js/dist/Draft.css';

シンタックスハイライト用のデコレータの作成

SQLキーワードをハイライトするためのデコレータを定義します。キーワードは正規表現を用いてテキストから見つけ出し、特定のスタイルを適用します。

const SQL_KEYWORDS = ['SELECT', 'FROM', 'WHERE', 'INSERT', 'UPDATE', 'DELETE', 'JOIN'];

const findWithRegex = (regex, contentBlock, callback) => {
    const text = contentBlock.getText();
    let matchArr, start;
    while ((matchArr = regex.exec(text)) !== null) {
        start = matchArr.index;
        callback(start, start + matchArr[0].length);
    }
};

const sqlKeywordsDecorator = new CompositeDecorator([
    {
        strategy: (contentBlock, callback, contentState) => {
            SQL_KEYWORDS.forEach(keyword => {
                findWithRegex(new RegExp(`\\b${keyword}\\b`, 'gi'), contentBlock, callback);
            });
        },
        component: (props) => (
            <span style={{ color: 'blue' }}>{props.children}</span>
        ),
    },
]);

エディタコンポーネントの定義

ReactのuseStateとuseEffectを使用してエディタの状態を管理し、作成したデコレータをエディタに適用します。

import React, { useEffect, useState } from 'react';
import { Editor, EditorState, CompositeDecorator } from 'draft-js';

function SqlEditor() {
    const [editorState, setEditorState] = useState<EditorState>();

    useEffect(() => {
        setEditorState(EditorState.createEmpty(sqlKeywordsDecorator));
    }, []);

    return (
        <div className="editor" style={{ height: "100%", overflow: "auto" }}>
            {editorState && (<Editor editorState={editorState} onChange={setEditorState} />)}
        </div>
    );
}

export default SqlEditor;

まとめ

Draft-jsを使用して、シンタックスハイライト機能を持つエディタを簡単に作成できます。
今回は、SQLキーワードを青色でハイライトしましたが、そのほかにも背景色を変更したりするなど、さまざまな装飾が可能です。