====== 在 Next.js 中使用 React-Ace ======

  * https://github.com/securingsincity/react-ace
  * https://9to5tutorial.com/notes-on-using-react-ace-in-next-js

安装 react-ace
<code bash>
npm install --save react-ace ace-builds
</code>

定义 AceEditor 组件
<code javascript>
"use client";

import React from "react";
import dynamic from "next/dynamic";

const AceEditor = dynamic(
  async () => {
    const ace = await import("react-ace");
    await import("ace-builds/src-noconflict/mode-java");
    await import("ace-builds/src-noconflict/theme-github");
    await import("ace-builds/src-noconflict/ext-language_tools");
    return ace;
  },
  { ssr: false }
);
</code>

使用组件

<code javascript>
export default function Home() {
  function onChange(newValue: string) {
    console.log("change", newValue);
  }
  return (
    <AceEditor
      mode="java"
      theme="github"
      onChange={onChange}
      name="UNIQUE_ID_OF_DIV"
      width="100%"
      editorProps={{ $blockScrolling: true }}
    />
  );
}
</code>

{{tag>blog nextjs react ace}}