refactor(editor): improve functionality and optimize performance (#10)

* Update README.md * chore: update env example variable * chore(web): remove unwanted files * chore(web): remove console log in production mode * chore(web): remove landing page * chore: update dockerfile (#5) * feat(editor): add prosekit editor * feat(editor): add holder * feat: editor demo * feat(web): change text field to password input (#6) * feat: added github actions (#7) * feat: add github action * fix: github action * feat: cache the pnpm store action * fix: production deployment * fix: check current org before deletion and switch to Personal account (#8) * fix: check current org before deletion and switch to Personal account * chore: add funding-manifest-urls for Floss * chore: update readme * chore: rename setting up status with draft (#9) * feat: add hard break extension * feat: add markdown export * feat: add list item extension * feat: add text highlight extension * chore: update editor * refactor(editor): editor * feat(editor): insert block content * refactor(editor): misc update * refactor(editor): misc update * fix: hard break * fix(editor): table handle * refactor: editor * chore: disable placeholder edit option in content view mode
wraft · Dec 12, 2024 · 5b5fde6 · 5b5fde6
1 parent b72f18d
commit 5b5fde6
Show file tree

Hide file tree

Showing 103 changed files with 4,821 additions and 23,162 deletions.
diff --git a/apps/web/.tool-versions b/apps/web/.tool-versions
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -11,6 +11,7 @@ module.exports = withImages({
     SELF_HOST: process.env.NEXT_PUBLIC_SELF_HOST,
     GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
     GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
+    NEXT_PUBLIC_WEBSOCKET_URL: process.env.NEXT_PUBLIC_WEBSOCKET_URL,
   },
   async rewrites() {
     return [

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -38,7 +38,7 @@
     "@theme-ui/color": "^0.16.1",
     "@uiw/react-color-chrome": "^2.3.0",
     "@vercel/analytics": "^1.3.1",
-    "@wraft/editor": "workspace:^",
+    "@wraft/editor": "*",
     "@wraft/icon": "*",
     "@wraft/ui": "*",
     "@xyflow/react": "^12.2.0",
@@ -62,7 +62,7 @@
     "react-autosuggest": "^10.0.2",
     "react-content-loader": "^6.2.0",
     "react-day-picker": "7.4.8",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.0",
     "react-dropzone": "^14.2.3",
     "react-easy-crop": "^3.2.0",
     "react-hook-form": "^7.53.0",
@@ -72,7 +72,7 @@
     "react-pdf": "9.1.0",
     "react-select": "^5.8.0",
     "react-table": "^7.0.4",
-    "react": "18.2.0",
+    "react": "18.3.0",
     "theme-ui": "^0.16.1",
     "typesafe-actions": "^5.1.0",
     "use-immer": "^0.9.0",
@@ -114,15 +114,11 @@
     "husky": "^8.0.3",
     "jest": "^29.6.2",
     "prettier": "^3.1.1",
-    "react-test-renderer": "^18.2.0",
     "redux-mock-store": "^1.5.4",
     "typescript": "^5.4.5"
   },
   "cacheDirectories": [
     "node_modules/",
     ".next/cache/"
-  ],
-  "engines": {
-    "node": "18.x"
-  }
+  ]
 }
diff --git a/apps/web/src/components/BlockTemplateForm.tsx b/apps/web/src/components/BlockTemplateForm.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import Router, { useRouter } from 'next/router';
 import { useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
@@ -10,30 +10,16 @@ import { BlockTemplates } from 'utils/types';
 import { postAPI, putAPI, fetchAPI } from 'utils/models';
 
 import Editor from './common/Editor';
-import FieldText from './FieldText';
-
-const EMPTY_MARKDOWN_NODE = {
-  type: 'doc',
-  content: [
-    {
-      type: 'paragraph',
-      content: [
-        {
-          type: 'text',
-          text: 'Write here',
-        },
-      ],
-    },
-  ],
-};
 
 const Form = () => {
   const [addAsset, setAddAsset] = useState<boolean>(false);
   const [dataTemplate, setDataTemplate] = useState<BlockTemplates>();
-  const [def, setDef] = useState<any>();
+  const [content, setContent] = useState<any>();
   const [loading, setLoading] = useState<boolean>(false);
   const [saved, setSaved] = useState<boolean>(false);
 
+  const editorRef = useRef<any>();
+
   const {
     register,
     handleSubmit,
@@ -50,30 +36,41 @@ const Form = () => {
   const onSubmit = (data: any) => {
     setLoading(true);
 
+    const jsonContent = editorRef.current?.helpers?.getJSON();
+    const markdownContent = editorRef.current?.helpers?.getMarkdown();
+
     const formValues = {
       title: data.title,
-      body: data.body,
-      serialized: data.serialized,
+      body: markdownContent,
+      serialized: JSON.stringify(jsonContent),
     };
 
     if (cId) {
-      putAPI(`block_templates/${cId}`, formValues).then(() => {
-        toast.success('Saved Successfully', {
-          duration: 1000,
-          position: 'top-right',
+      putAPI(`block_templates/${cId}`, formValues)
+        .then(() => {
+          toast.success('Saved Successfully', {
+            duration: 1000,
+            position: 'top-right',
+          });
+          setLoading(false);
+          setSaved(true);
+        })
+        .catch(() => {
+          setLoading(false);
         });
-        setLoading(false);
-        setSaved(true);
-      });
     } else {
-      postAPI(`block_templates`, formValues).then(() => {
-        toast.success('Saved Successfully', {
-          duration: 1000,
-          position: 'top-right',
+      postAPI(`block_templates`, formValues)
+        .then(() => {
+          toast.success('Saved Successfully', {
+            duration: 1000,
+            position: 'top-right',
+          });
+          setLoading(false);
+          setSaved(true);
+        })
+        .catch(() => {
+          setLoading(false);
         });
-        setLoading(false);
-        setSaved(true);
-      });
     }
   };
 
@@ -83,16 +80,11 @@ const Form = () => {
     });
   };
 
-  const doUpdate = (state: any) => {
-    setValue('serialized', JSON.stringify(state.json));
-    setValue('body', state.md);
-  };
-
   useEffect(() => {
     if (dataTemplate) {
       setValue('title', dataTemplate.title);
       const contentBody = JSON.parse(dataTemplate.serialized);
-      setDef(contentBody);
+      setContent(contentBody);
     }
   }, [dataTemplate]);
 
@@ -103,9 +95,6 @@ const Form = () => {
   }, [saved]);
 
   useEffect(() => {
-    if (!cId) {
-      setDef(EMPTY_MARKDOWN_NODE);
-    }
     if (cId) {
       loadTemplate(cId);
     }
@@ -126,9 +115,6 @@ const Form = () => {
   //   }
   // };
 
-  const onceInserted = () => {};
-  const tokens: any = [];
-
   return (
     <Box
       as="form"
@@ -156,29 +142,11 @@ const Form = () => {
                   register={register}
                 />
               </Box>
-              <Box variant="hidden" sx={{ display: 'none' }}>
-                <Field
-                  name="body"
-                  label="Body"
-                  defaultValue={''}
-                  register={register}
-                />
-              </Box>
-              <Box variant="hidden" sx={{ display: 'none' }}>
-                <FieldText
-                  name="serialized"
-                  label="Serialized"
-                  defaultValue={'{}'}
-                  register={register}
-                />
-              </Box>
+
               <Editor
-                editable
-                defaultValue={def}
-                onUpdate={doUpdate}
-                tokens={tokens}
-                insertable={undefined}
-                onceInserted={onceInserted}
+                defaultContent={content}
+                isReadonly={false}
+                ref={editorRef}
               />
             </Box>
           </Box>

diff --git a/apps/web/src/components/CommentCard.tsx b/apps/web/src/components/CommentCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Flex, Text } from 'theme-ui';
 
-import { ProfileCard } from './ContentDetail';
+import { ProfileCard } from 'common/ProfileCard';
 
 export interface Comment {
   updated_at: string;