🍇

AceエディタをReactで使ってみた

2024/02/17に公開

React

tech

はじめに

前回の記事でCodeMirrorというライブラリを使った際のハマりポイントの解消法？の一案を出しましたが、色々調べたら他にも良さげな類似ライブラリがあります。
その中でも「Ace」というライブラリがかなり使いやすかったので紹介します。

実装手順

Step1

必要ライブラリをインストールします。
前回記事同様にReact（TypeScript）で実装するのですが、Aceをreact用カスタマイズしているライブラリがあるのでそれをインストールします。

$ npm install react-ace

次にbraceというライブラリを入れます。
これはAceエディタのbrowserify互換バージョンでエディタのモード（どのプログラミング言語のエディタにするか）やテーマ（レイアウト）の指定をすることができます。

$ npm install brace

Step2

次に実装です。
こんな感じで実装してみました。

import { memo, useState, useEffect } from 'react';
import AceEditor, { IMarker, IEditorProps } from 'react-ace';

import 'brace/mode/ruby';
import 'brace/theme/xcode';

const markers: IMarker[] = [
  {
    startRow: 3,
    startCol: 1,
    endRow: 4,
    endCol: 1,
    className: 'ruby-editor',
    type: 'text',
    inFront: true,
  },
];

export const AceRubyEditor = memo<IEditorProps>(({ useDelay = false }) => {
  const [textValue, setTextValue] = useState(`
def sample
  puts "サンプルです"
end
`);
  const handleChange = (value: string) => {
    setTextValue(value);
  };

  return (
    <>
      <style>
        {`
          .ace_gutter {
            background: #0b6bcb2c !important; /* 新しいgutterの背景色 */
          }
      `}
      </style>
      <AceEditor
        mode="ruby"
        theme="xcode"
        onChange={handleChange}
        width="100%"
        name="ace-editor"
        editorProps={{ $blockScrolling: false }}
        value={textValue}
        showGutter={true}
        highlightActiveLine={true}
        showPrintMargin={true}
        setOptions={{
          enableBasicAutocompletion: false,
          enableLiveAutocompletion: false,
          enableSnippets: false,
          showLineNumbers: true,
          tabSize: 2,
        }}
        style={{
          width: '100%',
          height: '300px',
          border: '1px solid #ddd',
          borderRadius: '8px',
        }}
        markers={markers}
      />
    </>
  );
});

上記例ではエディタに外枠線つけたり、角丸にしたりなどのスタイル調整も行なっております。

補足

エディタのモードや他諸々の設定についていちいち切り替えて確認するのが面倒である場合、以下のような比較サイトがあります。

はじめに

実装手順

Step1

Step2

補足

Discussion