Zenn
Open5

fresh (Deno) で Monaco Editor を使う

Deno
nikogolinikogoli

0. モチベ

fresh 上で Monaco を動かしている実装例が全然見つからないので、とりあえず動くものを記録する

nikogolinikogoli

とりあえず、islands 以下のファイルに↓のようにインポートすると動く

./islands/xxx.tsx
import { Editor } from "https://pax.deno.dev/nikogoli/monaco-fresh/src/mod.ts"

export default function Monaco() {
  return (
    <>
      <Editor
        height="90vh"
        defaultLanguage="javascript"
        defaultValue={"function hello() {\n\talert('Hello world!');\n}"}
      />
    </>
  )
}
  • 注意点1：エディタ挿入のためにuseEffectを呼び出す必要があるので、routes 以下のファイルに直接インポートすると動かない
  • 注意点2：defaultValueの値は{}で囲わないとエスケープシーケンスが正しく評価されない
nikogolinikogoli

2. @monaco-editor/loader を直接使うタイプ

@monaco-editor/react のドキュメントの "Create your own editor" に記載されている手法

./ilands/Monaco.tsx
import { useRef, useEffect } from "preact/hooks"
import loader from "https://esm.sh/@monaco-editor/loader@1.3.2"

export default function Monaco() {
  const editorRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (editorRef.current){
      const elem = editorRef.current

      loader.init().then(monaco => {
        const properties = {
          value: "function hello() {\n\talert(\"Hello world!\");\n}",
          language:  "javascript",
        }
        elem.style.height = "60vh"
        monaco.editor.create(elem, properties);
      })
    }
  })
    
  return (
    <div ref={editorRef} class="w-full h-full"></div>
  )
}