diff --git a/app/[docs_id]/markdown.tsx b/app/[docs_id]/markdown.tsx index 8c6c252..80d99f3 100644 --- a/app/[docs_id]/markdown.tsx +++ b/app/[docs_id]/markdown.tsx @@ -3,7 +3,7 @@ import remarkGfm from "remark-gfm"; import SyntaxHighlighter from "react-syntax-highlighter"; import { PythonEmbeddedTerminal } from "../terminal/python/embedded"; import { Heading } from "./section"; -import { AceLang, EditorComponent } from "../terminal/editor"; +import { type AceLang, EditorComponent } from "../terminal/editor"; import { ExecFile, ExecLang } from "../terminal/exec"; import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/hljs"; diff --git a/app/[docs_id]/page.tsx b/app/[docs_id]/page.tsx index f70c950..44b182d 100644 --- a/app/[docs_id]/page.tsx +++ b/app/[docs_id]/page.tsx @@ -4,7 +4,7 @@ import { readFile } from "node:fs/promises"; import { join } from "node:path"; import { MarkdownSection, splitMarkdown } from "./splitMarkdown"; import { Section } from "./section"; -import * as pyodideLock from "pyodide/pyodide-lock.json"; +import pyodideLock from "pyodide/pyodide-lock.json"; export default async function Page({ params, @@ -22,9 +22,14 @@ export default async function Page({ ); } else { const cfAssets = getCloudflareContext().env.ASSETS; - mdContent = await cfAssets! - .fetch(`https://assets.local/docs/${docs_id}.md`) - .then((res) => res.text()); + const mdRes = await cfAssets!.fetch( + `https://assets.local/docs/${docs_id}.md` + ); + if (mdRes.ok) { + mdContent = await mdRes.text(); + } else { + notFound(); + } } } catch (error) { console.error(error); diff --git a/app/terminal/editor.tsx b/app/terminal/editor.tsx index 92e6e98..e6e68a8 100644 --- a/app/terminal/editor.tsx +++ b/app/terminal/editor.tsx @@ -1,18 +1,23 @@ "use client"; -import { useFile } from "./file"; -import AceEditor from "react-ace"; +import dynamic from "next/dynamic"; +// https://github.com/securingsincity/react-ace/issues/27 により普通のimportができない +const AceEditor = dynamic(async () => { + const ace = await import("react-ace"); + // テーマは色分けが今のTerminal側のハイライト(highlight.js)の実装に近いものを適当に選んだ + await import("ace-builds/src-min-noconflict/theme-tomorrow"); + await import("ace-builds/src-min-noconflict/theme-twilight"); + await import("ace-builds/src-min-noconflict/ext-language_tools"); + await import("ace-builds/src-min-noconflict/ext-searchbox"); + await import("ace-builds/src-min-noconflict/mode-python"); + await import("ace-builds/src-min-noconflict/mode-c_cpp"); + await import("ace-builds/src-min-noconflict/mode-json"); + await import("ace-builds/src-min-noconflict/mode-csv"); + await import("ace-builds/src-min-noconflict/mode-text"); + return ace; +}, { ssr: false }); import "./editor.css"; -// テーマは色分けが今のTerminal側のハイライト(highlight.js)の実装に近いものを適当に選んだ -import "ace-builds/src-min-noconflict/theme-tomorrow"; -import "ace-builds/src-min-noconflict/theme-twilight"; -import "ace-builds/src-min-noconflict/ext-language_tools"; -import "ace-builds/src-min-noconflict/ext-searchbox"; -import "ace-builds/src-min-noconflict/mode-python"; -import "ace-builds/src-min-noconflict/mode-c_cpp"; -import "ace-builds/src-min-noconflict/mode-json"; -import "ace-builds/src-min-noconflict/mode-csv"; -import "ace-builds/src-min-noconflict/mode-text"; +import { useFile } from "./file"; import { useEffect } from "react"; import { useSectionCode } from "../[docs_id]/section"; import clsx from "clsx"; @@ -38,13 +43,7 @@ export function EditorComponent(props: EditorProps) { writeFile(props.filename, props.initContent); } addSectionFile?.(props.filename); - }, [ - files, - props.filename, - props.initContent, - writeFile, - addSectionFile, - ]); + }, [files, props.filename, props.initContent, writeFile, addSectionFile]); return (