テキストエディタの実装

package.json

@@ -11,12 +11,20 @@
     "stylelint": "stylelint \"./src/**/*.css\" --fix"
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@mantine/core": "^7.15.1",
     "@mantine/hooks": "^7.15.1",
     "@mantine/modals": "^7.15.1",
     "@mantine/spotlight": "^7.15.1",
+    "@mantine/tiptap": "^7.15.1",
     "@prisma/client": "^6.1.0",
     "@tabler/icons-react": "^3.24.0",
+    "@tiptap/extension-link": "^2.10.3",
+    "@tiptap/pm": "^2.10.3",
+    "@tiptap/react": "^2.10.3",
+    "@tiptap/starter-kit": "^2.10.3",
+    "emoji-mart": "^5.6.0",
     "next": "15.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

src/app/_components/AppShell.tsx

@@ -7,6 +7,8 @@ import { useDisclosure } from "@mantine/hooks";
 
 import Sidebar from "./Sidebar";
 
+import TextEditor from "#/components/TextEditor";
+
 type AppShellProps = {
   children: React.ReactNode;
 };
@@ -36,7 +38,17 @@ const AppShell: React.FC<AppShellProps> = ({ children }) => {
       <Sidebar />
       <MantineAppShell.Main>{children}</MantineAppShell.Main>
       <MantineAppShell.Aside p="md">Aside</MantineAppShell.Aside>
-      <MantineAppShell.Footer p="md">Footer</MantineAppShell.Footer>
+      <MantineAppShell.Footer p="xs" h="auto" withBorder={false}>
+        <TextEditor
+          value="aaa"
+          onChange={() => {
+            return 0;
+          }}
+          onSend={() => {
+            return 0;
+          }}
+        />
+      </MantineAppShell.Footer>
     </MantineAppShell>
   );
 };

src/app/api/fetch-ogp/route.ts

@@ -17,6 +17,7 @@ export async function GET(request: Request) {
   try {
     new URL(url);
   } catch (e) {
+    console.log(e);
     return NextResponse.json(
       {
         status: "error",

src/app/lab/page.tsx

@@ -1,6 +1,7 @@
-import LinkCard from "#/components/LinkCard";
 import { Stack, Title } from "@mantine/core";
 
+import LinkCard from "#/components/LinkCard";
+
 const LabPage = () => {
   return (
     <div>

src/components/EmojiPicker.module.css

@@ -0,0 +1,28 @@
+.PopoverDropdown {
+  --popover-shadow: none;
+
+  padding: 0;
+  background: none;
+  border: none;
+}
+
+.DrawerContent {
+  height: 435px;
+  padding: 0;
+  background: none;
+
+  em-emoji-picker {
+    --border-radius: 0;
+
+    width: 100%;
+    border-radius: 0;
+  }
+
+  section {
+    border-radius: 0;
+  }
+}
+
+.DrawerBody {
+  padding: 0;
+}

src/components/EmojiPickerControl.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+import { Drawer, Popover } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import {
+  RichTextEditorControl,
+  useRichTextEditorContext,
+} from "@mantine/tiptap";
+import { IconMoodSmile } from "@tabler/icons-react";
+
+import styles from "./EmojiPicker.module.css";
+
+import { EmojiData } from "#/types/emoji";
+
+const EmojiPickerControl = () => {
+  const { editor } = useRichTextEditorContext();
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const [drawerOpened, setDrawerOpened] = useState(false);
+
+  const handleEmojiSelect = (emoji: EmojiData) => {
+    editor?.chain().focus().insertContent(emoji.native).run();
+    if (isDesktop) {
+      setDrawerOpened(false);
+    }
+  };
+
+  if (isDesktop) {
+    return (
+      <Popover position="bottom">
+        <Popover.Target>
+          <RichTextEditorControl
+            title="絵文字を入力する"
+            aria-label="絵文字を入力する"
+          >
+            <IconMoodSmile stroke={1.5} size="1rem" />
+          </RichTextEditorControl>
+        </Popover.Target>
+        <Popover.Dropdown className={styles.PopoverDropdown}>
+          <Picker theme="light" data={data} onEmojiSelect={handleEmojiSelect} />
+        </Popover.Dropdown>
+      </Popover>
+    );
+  } else {
+    return (
+      <>
+        <RichTextEditorControl
+          title="Insert emoji"
+          aria-label="Insert emoji"
+          onClick={() => setDrawerOpened(true)}
+        >
+          <IconMoodSmile stroke={1.5} size="1rem" />
+        </RichTextEditorControl>
+        <Drawer
+          classNames={{
+            content: styles.DrawerContent,
+            body: styles.DrawerBody,
+          }}
+          withCloseButton={false}
+          position="bottom"
+          opened={drawerOpened}
+          onClose={() => setDrawerOpened(false)}
+        >
+          <Picker
+            style={{
+              width: "100%",
+            }}
+            dynamicWidth
+            theme="light"
+            data={data}
+            onEmojiSelect={handleEmojiSelect}
+          />
+        </Drawer>
+      </>
+    );
+  }
+};
+
+export default EmojiPickerControl;

src/components/FileUploadControl.tsx

@@ -0,0 +1,29 @@
+import { ActionIcon, FileButton } from "@mantine/core";
+import { IconCloudUpload } from "@tabler/icons-react";
+
+/*
+- アップロード可能なフォーマットはDiscordを参考にした
+  - https://www.reddit.com/r/discordapp/comments/f2kt5r/guide_file_formats_discord_can_embed/
+- これに`image/webp`, `image/avif`を追加
+*/
+
+const FileUploadControl = () => {
+  const setFile = (payload: File[]) => {
+    console.log(payload);
+  };
+  return (
+    <FileButton
+      onChange={setFile}
+      accept="image/jpeg,image/png,image/gif,video/webm,video/mp4,audio/wav,audio/mp3,audio/ogg,image/webp,image/avif"
+      multiple
+    >
+      {(props) => (
+        <ActionIcon variant="light" color="gray" {...props}>
+          <IconCloudUpload stroke={1.5} />
+        </ActionIcon>
+      )}
+    </FileButton>
+  );
+};
+
+export default FileUploadControl;

src/components/LinkCard.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import { Card, Image, Skeleton, Text } from "@mantine/core";
 import { useEffect, useState } from "react";
 
-import { fetchOGPData } from "#/libs/fetch-ogp";
+import { Card, Image, Skeleton, Text } from "@mantine/core";
+
 import styles from "./LinkCard.module.css";
 
+import { fetchOGPData } from "#/libs/fetch-ogp";
+
 type OGPData = {
   title: string;
   description: string;

src/components/TextEditor.css

@@ -0,0 +1,3 @@
+.ProseMirror {
+  padding: 0 !important;
+}

src/components/TextEditor.module.css

@@ -0,0 +1,26 @@
+.Editor {
+  margin-top: 0;
+  border: 2px solid var(--mantine-color-gray-3);
+
+  &:hover {
+    border-color: var(--mantine-color-gray-4);
+  }
+
+  &:focus-within {
+    border-color: var(--mantine-color-gray-5);
+  }
+}
+
+.Content {
+  max-height: 50vh;
+  padding: 0.5rem;
+  padding-bottom: 0;
+  overflow-y: scroll;
+}
+
+.Toolbar {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem;
+  border: none;
+}

src/components/TextEditor.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import React from "react";
+
+import { ActionIcon } from "@mantine/core";
+import { Link, RichTextEditor } from "@mantine/tiptap";
+import { IconSend2 } from "@tabler/icons-react";
+import { useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+
+import "@mantine/tiptap/styles.css";
+import EmojiPickerControl from "./EmojiPickerControl";
+import FileUploadControl from "./FileUploadControl";
+import "./TextEditor.css";
+import styles from "./TextEditor.module.css";
+
+type TextEditorProps = {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: () => void;
+};
+
+const TextEditor: React.FC<TextEditorProps> = ({ value, onChange }) => {
+  const editor = useEditor({
+    extensions: [StarterKit, Link],
+    content: value,
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML());
+    },
+    immediatelyRender: false,
+  });
+
+  return (
+    <RichTextEditor editor={editor} className={styles.Editor}>
+      <RichTextEditor.Toolbar className={styles.Toolbar}>
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Bold />
+          <RichTextEditor.Italic />
+          <RichTextEditor.H1 />
+          <RichTextEditor.H2 />
+          <RichTextEditor.H3 />
+          <RichTextEditor.BulletList />
+          <RichTextEditor.OrderedList />
+          <RichTextEditor.Strikethrough />
+          <RichTextEditor.Code />
+          <EmojiPickerControl />
+        </RichTextEditor.ControlsGroup>
+      </RichTextEditor.Toolbar>
+      <RichTextEditor.Content className={styles.Content} />
+      <RichTextEditor.Toolbar className={styles.Toolbar}>
+        <RichTextEditor.ControlsGroup>
+          <FileUploadControl />
+        </RichTextEditor.ControlsGroup>
+        <ActionIcon w="3rem" disabled={value.trim() === ""}>
+          <IconSend2 />
+        </ActionIcon>
+      </RichTextEditor.Toolbar>
+    </RichTextEditor>
+  );
+};
+
+export default TextEditor;

src/types/emoji.ts

@@ -0,0 +1,13 @@
+/*
+@types/emoji-martは更新が行われておらず、型定義エラーが発生するため、独自に型定義を記述
+*/
+export interface EmojiData {
+  id: string;
+  name: string;
+  native: string;
+  unified: string;
+  keywords: string[];
+  shortcodes: string;
+  skin: number;
+  aliases: string[];
+}

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,9 +23,17 @@
       }
     ],
     "paths": {
-      "#/*": ["./src/*"]
+      "#/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "src/**/*"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "src/**/*",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }