change tiptap

one-pager-maker/package.json

@@ -25,6 +25,9 @@
     "@reduxjs/toolkit": "^2.2.3",
     "@tanstack/react-query": "^5.37.1",
     "@testing-library/react": "^14.2.2",
+    "@tiptap/pm": "^2.4.0",
+    "@tiptap/react": "^2.4.0",
+    "@tiptap/starter-kit": "^2.4.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "firebase": "^10.8.0",
@@ -41,6 +44,7 @@
     "result-type-ts": "^2.1.3",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "tiptap": "^1.32.2",
     "tsyringe": "^4.8.0",
     "zod": "^3.22.4"
   },

one-pager-maker/src/components/tiptap.tsx

@@ -0,0 +1,38 @@
+import { useEditor, EditorContent } from '@tiptap/react'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import HardBreak from '@tiptap/extension-hard-break'
+
+interface MyEditorProps {
+    content: string;
+    onUpdate: (content: string, markdownText: string) => void;
+}
+
+export const Tiptap: React.FC<MyEditorProps> = ({ content, onUpdate }) => {
+  const editor = useEditor({
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      HardBreak,
+    ],
+    content: content,
+    editorProps: {
+      attributes: {
+        class: "p-1",
+      },
+    },
+    onUpdate: ({ editor }) => {
+      if (typeof onUpdate !== 'function') return;
+
+      // TODO: The same procedure is required if you copy
+      onUpdate(editor.getText({blockSeparator: '\n'}), editor.getText());
+    }
+  })
+  return (
+    <div>
+      <EditorContent editor={editor} />
+    </div>
+  )
+}

one-pager-maker/src/index.css

@@ -6,18 +6,6 @@
     @apply text-gray-900 leading-normal break-words;
 }
 
-.markdown > * + * {
-    @apply mt-0 mb-4;
-}
-
-.markdown li + li {
-    @apply mt-1;
-}
-
-.markdown li > p + p {
-    @apply mt-6;
-}
-
 .markdown strong {
     @apply font-semibold;
 }

one-pager-maker/src/model/ContentConverter.ts

@@ -0,0 +1,7 @@
+export class ContentConverter {
+static toHtml = (content: string): string => 
+    content.split(/\n/).map(line => `<p>${line}</p>`).join('');
+
+static toMarkdownText = (content: string): string =>
+    content.split(/\n/).map(line => `${line}\n\n`).join('');    
+}

one-pager-maker/src/pages/Edit.tsx

@@ -12,6 +12,8 @@ import {viewHistoryApi} from "@/api/viewHistoryApi.ts";
 import {userApi} from "@/api/userApi.ts";
 import {selectUser} from "@/redux/user/selector.ts";
 import {useAppSelector} from "@/redux/hooks.ts";
+import {Tiptap} from "../components/tiptap.tsx";
+import {ContentConverter} from '../model/ContentConverter.ts'
 
 function Edit() {
   const {uid, documentId} = useParams<{ uid: string, documentId: string }>();
@@ -26,8 +28,8 @@ function Edit() {
   const documentResult = documentApi.useGetDocumentQuery({ uid, documentId});
   const document = documentResult.data?.value;
   const [documentData, setDocumentData] = useState(document);
+  const [markdownText, setMarkdownText] = useState(ContentConverter.toMarkdownText(document?.contents ?? ''));
   const updateDocument = documentApi.useUpdateDocumentMutation();
-
   const editHistoryMutation = viewHistoryApi.useSetEditHistoryMutation();
   const reviewHistoryMutation = viewHistoryApi.useSetReviewHistoryMutation();
 
@@ -40,7 +42,10 @@ function Edit() {
     setDocumentData(prev => prev === undefined ? prev : ({ ...prev, [key]: val }))
   }
   const onChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => updateDocumentState("title", e.target.value);
-  const onChangeContents = (e: React.ChangeEvent<HTMLTextAreaElement>) => updateDocumentState("contents", e.target.value);
+  const onChangeContents = (content: string, markdownText: string) => {
+    updateDocumentState("contents", content);
+    setMarkdownText(markdownText);
+  }
   const onChangeStatus = (e: React.ChangeEvent<HTMLSelectElement>) => updateDocumentState("status", e.target.value as Status);
   const onChangeContributors = (e: React.ChangeEvent<HTMLInputElement>) => updateDocumentState("contributors", e.target.value.split(','));
   const onChangeReviewers = (e: React.ChangeEvent<HTMLInputElement>) => updateDocumentState("reviewers", e.target.value.split(','));
@@ -61,7 +66,6 @@ function Edit() {
 
     try {
       const result = await updateDocument.mutateAsync({ uid, document: documentData });
-
       // 更新したときに閲覧履歴を設定
       const mutationArgs = {uid: userQuery.data.id, documentId: documentData.id, document: result };
       if (documentData.status === 'reviewed') {
@@ -117,14 +121,11 @@ function Edit() {
           </span>
         </div>
         <div className="flex p-1 w-full h-svh">
-          <textarea
-            className="border w-1/2 p-1"
-            value={documentData?.contents}
-            onChange={onChangeContents}
-            placeholder="Enter Markdown here"
-          />
+          <div className="border w-1/2">
+            <Tiptap content={ContentConverter.toHtml(document?.contents ?? '')} onUpdate={onChangeContents} />
+          </div>
           <div className="border w-1/2 p-1 overflow-scroll overflow-visible overflow-x-hidden">
-            <Markdown className='markdown'>{documentData?.contents}</Markdown>
+            <Markdown className='markdown'>{markdownText}</Markdown>
           </div>
         </div>
       </div>

one-pager-maker/tests/unit/ContentConverter.test.ts

@@ -0,0 +1,23 @@
+import { expect, test } from "vitest";
+import {ContentConverter} from "../../src/model/ContentConverter";
+
+test("Html", () => {
+    expect(ContentConverter.toHtml(`a
+b
+c
+d`)).toEqual("<p>a</p><p>b</p><p>c</p><p>d</p>")});
+
+
+test("MarkdownText", () => {
+    expect(ContentConverter.toMarkdownText(`a
+b
+c
+d`)).toEqual(`a
+
+b
+
+c
+
+d
+
+`)});