Merge pull request #100 from givery-bootcamp/feature/markdown

Feature/markdown
givery-bootcamp · Jun 28, 2024 · 17585e5 · 17585e5
2 parents 753cd10 + adf9bac
commit 17585e5
Show file tree

Hide file tree

Showing 6 changed files with 12,842 additions and 6,619 deletions.
diff --git a/frontend/app/components/markdown.tsx b/frontend/app/components/markdown.tsx
@@ -0,0 +1,121 @@
+import {
+	headingsPlugin,
+	listsPlugin,
+	quotePlugin,
+	thematicBreakPlugin,
+	markdownShortcutPlugin,
+	linkPlugin,
+	linkDialogPlugin,
+	codeBlockPlugin,
+	sandpackPlugin,
+	codeMirrorPlugin,
+	MDXEditor,
+	toolbarPlugin,
+	UndoRedo,
+	BoldItalicUnderlineToggles,
+	BlockTypeSelect,
+	CodeToggle,
+	CreateLink,
+	InsertCodeBlock,
+	ListsToggle,
+	ChangeCodeMirrorLanguage,
+	ShowSandpackInfo,
+	InsertSandpack,
+	ConditionalContents,
+	type SandpackConfig,
+} from "@mdxeditor/editor";
+import "@mdxeditor/editor/style.css";
+import { ClientOnly } from "remix-utils/client-only";
+
+export default function Markdown({
+	markdown,
+	onChange,
+}: { markdown: string; onChange?: (markdown: string) => void }) {
+	const readOnly = onChange === undefined;
+	const defaultSnippetContent = `
+        export default function App() {
+        return (
+            <div className="App">
+            <h1>Hello CodeSandbox</h1>
+            <h2>Start editing to see some magic happen!</h2>
+            </div>
+        );
+        }
+        `.trim();
+	const simpleSandpackConfig: SandpackConfig = {
+		defaultPreset: "react",
+		presets: [
+			{
+				label: "React",
+				name: "react",
+				meta: "live react",
+				sandpackTemplate: "react",
+				sandpackTheme: "light",
+				snippetFileName: "/App.js",
+				snippetLanguage: "jsx",
+				initialSnippetContent: defaultSnippetContent,
+			},
+		],
+	};
+
+	return (
+		<ClientOnly fallback={<p>Loading...</p>}>
+			{() => (
+				<MDXEditor
+					plugins={[
+						headingsPlugin(),
+						listsPlugin(),
+						quotePlugin(),
+						thematicBreakPlugin(),
+						markdownShortcutPlugin(),
+						linkPlugin(),
+						linkDialogPlugin(),
+						codeBlockPlugin({ defaultCodeBlockLanguage: "js" }),
+						sandpackPlugin({ sandpackConfig: simpleSandpackConfig }),
+						codeMirrorPlugin({
+							codeBlockLanguages: { js: "JavaScript", css: "CSS" },
+						}),
+						toolbarPlugin({
+							toolbarContents: () =>
+								!readOnly && (
+									<>
+										{" "}
+										<UndoRedo />
+										<BoldItalicUnderlineToggles />
+										<BlockTypeSelect />
+										<CodeToggle />
+										<CreateLink />
+										<ListsToggle />
+										<ConditionalContents
+											options={[
+												{
+													when: (editor) => editor?.editorType === "codeblock",
+													contents: () => <ChangeCodeMirrorLanguage />,
+												},
+												{
+													when: (editor) => editor?.editorType === "sandpack",
+													contents: () => <ShowSandpackInfo />,
+												},
+												{
+													fallback: () => (
+														<>
+															<InsertCodeBlock />
+															<InsertSandpack />
+														</>
+													),
+												},
+											]}
+										/>
+									</>
+								),
+						}),
+					]}
+					contentEditableClassName="prose"
+					markdown={markdown}
+					onChange={onChange}
+					readOnly={readOnly}
+				/>
+			)}
+		</ClientOnly>
+	);
+}
diff --git a/frontend/app/components/postForm.tsx b/frontend/app/components/postForm.tsx
@@ -1,8 +1,11 @@
 import { Form, useNavigate } from "@remix-run/react";
 import classNames from "classnames";
 import type { PostErrorType } from "~/routes/posts.new";
+import "@mdxeditor/editor/style.css";
 import Button from "./button";
 import SubmitButton from "./submitButton";
+import { useState } from "react";
+import Markdown from "./markdown";
 
 export default function PostForm({
 	title,
@@ -16,6 +19,7 @@ export default function PostForm({
 	submitText: string;
 }) {
 	const navigate = useNavigate();
+	const [contentState, setContentState] = useState(content);
 	return (
 		<Form method="post" className={classNames("p-2")}>
 			<label htmlFor="title" className={classNames("block")}>
@@ -37,17 +41,10 @@ export default function PostForm({
 			<label htmlFor="content" className={classNames("block", "w-full")}>
 				内容
 			</label>
-			<textarea
-				name="content"
-				id="content"
-				defaultValue={content}
-				className={classNames(
-					"block",
-					"border",
-					"border-gray-400",
-					"w-full",
-					"mb-4",
-				)}
+			<textarea id="content" name="content" value={contentState} hidden />
+			<Markdown
+				markdown={contentState ?? ""}
+				onChange={(e) => setContentState(e)}
 			/>
 			<div className={classNames("flex", "justify-end", "gap-4")}>
 				<SubmitButton color="primary" text={submitText} />

diff --git a/frontend/app/routes/posts.$postId.tsx b/frontend/app/routes/posts.$postId.tsx
@@ -13,12 +13,14 @@ import {
 	useParams,
 } from "@remix-run/react";
 import classNames from "classnames";
-import { useState } from "react";
 import formatDate from "utils/formatDate";
+import "@mdxeditor/editor/style.css";
+import Markdown from "~/components/markdown";
 import apiClient, { API_BASE_URL } from "~/apiClient/apiClient";
 import Button from "~/components/button";
 import { useDialog } from "~/components/dialog";
 import SubmitButton from "~/components/submitButton";
+import { useState } from "react";
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
 	const LIMIT = 100;
@@ -124,7 +126,7 @@ export default function PostsDetails() {
 				{TimeTopic("更新日時", post.updated_at)}
 			</div>
 			<hr className={classNames("my-3")} />
-			<pre>{post.body}</pre>
+			<Markdown markdown={post.body} />
 			<p
 				className={classNames(
 					"bg-blue-200",