refactor: remove react-hook-form

packages/editor/core/src/hooks/use-editor.tsx

@@ -12,12 +12,17 @@ import { insertContentAtSavedSelection } from "src/helpers/insert-content-at-cur
 import { EditorMenuItemNames, getEditorMenuItems } from "src/ui/menus/menu-items";
 import { EditorRefApi } from "src/types/editor-ref-api";
 import { IMarking, scrollSummary } from "src/helpers/scroll-to-node";
+
+export type TFileHandler = {
+  cancel: () => void;
+  delete: DeleteImage;
+  upload: UploadImage;
+  restore: RestoreImage;
+};
+
 export interface CustomEditorProps {
   id?: string;
-  uploadFile: UploadImage;
+  fileHandler: TFileHandler;
-  restoreFile: RestoreImage;
-  deleteFile: DeleteImage;
-  cancelUploadImage?: () => void;
   initialValue?: string;
   editorClassName: string;
   // undefined when prop is not passed, null if intentionally passed to stop
@@ -37,19 +42,16 @@ export interface CustomEditorProps {
 }
 
 export const useEditor = ({
-  uploadFile,
   id = "",
-  deleteFile,
-  cancelUploadImage,
   editorProps = {},
   initialValue,
   editorClassName,
   value,
   extensions = [],
+  fileHandler,
   onChange,
   forwardedRef,
   tabIndex,
-  restoreFile,
   handleEditorReady,
   mentionHandler,
   placeholder,
@@ -66,10 +68,10 @@ export const useEditor = ({
           mentionHighlights: mentionHandler.highlights ?? [],
         },
         fileConfig: {
-          deleteFile,
+          uploadFile: fileHandler.upload,
-          restoreFile,
+          deleteFile: fileHandler.delete,
-          cancelUploadImage,
+          restoreFile: fileHandler.restore,
-          uploadFile,
+          cancelUploadImage: fileHandler.cancel,
         },
         placeholder,
         tabIndex,
@@ -138,7 +140,7 @@ export const useEditor = ({
         }
       },
       executeMenuItemCommand: (itemName: EditorMenuItemNames) => {
-        const editorItems = getEditorMenuItems(editorRef.current, uploadFile);
+        const editorItems = getEditorMenuItems(editorRef.current, fileHandler.upload);
 
         const getEditorMenuItem = (itemName: EditorMenuItemNames) => editorItems.find((item) => item.key === itemName);
 
@@ -154,7 +156,7 @@ export const useEditor = ({
         }
       },
       isMenuItemActive: (itemName: EditorMenuItemNames): boolean => {
-        const editorItems = getEditorMenuItems(editorRef.current, uploadFile);
+        const editorItems = getEditorMenuItems(editorRef.current, fileHandler.upload);
 
         const getEditorMenuItem = (itemName: EditorMenuItemNames) => editorItems.find((item) => item.key === itemName);
         const item = getEditorMenuItem(itemName);
@@ -198,7 +200,7 @@ export const useEditor = ({
         }
       },
     }),
-    [editorRef, savedSelection, uploadFile]
+    [editorRef, savedSelection, fileHandler.upload]
   );
 
   if (!editor) {

packages/editor/core/src/index.ts

@@ -24,7 +24,7 @@ export * from "src/ui/menus/menu-items";
 export * from "src/lib/editor-commands";
 
 // types
-export type { CustomEditorProps } from "src/hooks/use-editor";
+export type { CustomEditorProps, TFileHandler } from "src/hooks/use-editor";
 export type { DeleteImage } from "src/types/delete-image";
 export type { UploadImage } from "src/types/upload-image";
 export type { EditorRefApi, EditorReadOnlyRefApi } from "src/types/editor-ref-api";

packages/editor/document-editor/src/hooks/use-document-editor.ts

@@ -1,25 +1,17 @@
 import { useLayoutEffect, useMemo } from "react";
-import {
-  DeleteImage,
-  EditorRefApi,
-  IMentionHighlight,
-  IMentionSuggestion,
-  RestoreImage,
-  UploadImage,
-  useEditor,
-} from "@plane/editor-core";
-import * as Y from "yjs";
-import { CollaborationProvider } from "src/providers/collaboration-provider";
-import { DocumentEditorExtensions } from "src/ui/extensions";
-import { IndexeddbPersistence } from "y-indexeddb";
 import { EditorProps } from "@tiptap/pm/view";
+import { IndexeddbPersistence } from "y-indexeddb";
+import * as Y from "yjs";
+// editor-core
+import { EditorRefApi, IMentionHighlight, IMentionSuggestion, TFileHandler, useEditor } from "@plane/editor-core";
+// custom provider
+import { CollaborationProvider } from "src/providers/collaboration-provider";
+// extensions
+import { DocumentEditorExtensions } from "src/ui/extensions";
 
 type DocumentEditorProps = {
   id?: string;
-  uploadFile: UploadImage;
+  fileHandler: TFileHandler;
-  restoreFile: RestoreImage;
-  deleteFile: DeleteImage;
-  cancelUploadImage?: () => void;
   value: Uint8Array;
   editorClassName: string;
   onChange: (binaryString: string, html: string) => void;
@@ -37,17 +29,14 @@ type DocumentEditorProps = {
 };
 
 export const useDocumentEditor = ({
-  uploadFile,
   id = "",
-  deleteFile,
-  cancelUploadImage,
   editorProps = {},
   value,
   editorClassName,
+  fileHandler,
   onChange,
   forwardedRef,
   tabIndex,
-  restoreFile,
   handleEditorReady,
   mentionHandler,
   placeholder,
@@ -81,15 +70,12 @@ export const useDocumentEditor = ({
     id,
     editorProps,
     editorClassName,
-    restoreFile,
+    fileHandler,
-    uploadFile,
-    deleteFile,
-    cancelUploadImage,
     handleEditorReady,
     forwardedRef,
     mentionHandler,
     extensions: DocumentEditorExtensions({
-      uploadFile,
+      uploadFile: fileHandler.upload,
       setHideDragHandle: setHideDragHandleFunction,
       provider,
     }),

packages/editor/document-editor/src/providers/collaboration-provider.ts

@@ -26,11 +26,7 @@ export class CollaborationProvider {
     onChange: () => {},
   };
 
-  intervals: any = {
+  timeoutId: NodeJS.Timeout | null;
-    forceSync: null,
-  };
-
-  timeoutId: any;
 
   constructor(configuration: CollaborationProviderConfiguration) {
     this.setConfiguration(configuration);
@@ -53,6 +49,7 @@ export class CollaborationProvider {
   }
 
   documentUpdateHandler(update: Uint8Array, origin: any) {
+    // return if the update is from the provider itself
     if (origin === this) return;
 
     // debounce onChange call

packages/editor/document-editor/src/ui/index.tsx

@@ -1,25 +1,21 @@
 import React, { useState } from "react";
+// editor-core
 import {
-  UploadImage,
-  DeleteImage,
-  RestoreImage,
   getEditorClassNames,
   EditorRefApi,
   IMentionHighlight,
   IMentionSuggestion,
+  TFileHandler,
 } from "@plane/editor-core";
+// components
 import { PageRenderer } from "src/ui/components/page-renderer";
+// hooks
 import { useDocumentEditor } from "src/hooks/use-document-editor";
 
 interface IDocumentEditor {
   id: string;
   value: Uint8Array;
-  fileHandler: {
+  fileHandler: TFileHandler;
-    cancel: () => void;
-    delete: DeleteImage;
-    upload: UploadImage;
-    restore: RestoreImage;
-  };
   handleEditorReady?: (value: boolean) => void;
   containerClassName?: string;
   editorClassName?: string;
@@ -61,10 +57,7 @@ const DocumentEditor = (props: IDocumentEditor) => {
   const editor = useDocumentEditor({
     id,
     editorClassName,
-    restoreFile: fileHandler.restore,
+    fileHandler,
-    uploadFile: fileHandler.upload,
-    deleteFile: fileHandler.delete,
-    cancelUploadImage: fileHandler.cancel,
     value,
     onChange,
     handleEditorReady,

packages/editor/lite-text-editor/src/ui/index.tsx

@@ -1,27 +1,22 @@
 import * as React from "react";
+// editor-core
 import {
-  UploadImage,
-  DeleteImage,
   IMentionSuggestion,
-  RestoreImage,
   EditorContainer,
   EditorContentWrapper,
   getEditorClassNames,
   useEditor,
   IMentionHighlight,
   EditorRefApi,
+  TFileHandler,
 } from "@plane/editor-core";
+// extensions
 import { LiteTextEditorExtensions } from "src/ui/extensions";
 
 export interface ILiteTextEditor {
   initialValue: string;
   value?: string | null;
-  fileHandler: {
+  fileHandler: TFileHandler;
-    cancel: () => void;
-    delete: DeleteImage;
-    upload: UploadImage;
-    restore: RestoreImage;
-  };
   containerClassName?: string;
   editorClassName?: string;
   onChange?: (json: object, html: string) => void;
@@ -58,10 +53,7 @@ const LiteTextEditor = (props: ILiteTextEditor) => {
     value,
     id,
     editorClassName,
-    restoreFile: fileHandler.restore,
+    fileHandler,
-    uploadFile: fileHandler.upload,
-    deleteFile: fileHandler.delete,
-    cancelUploadImage: fileHandler.cancel,
     forwardedRef,
     extensions: LiteTextEditorExtensions(onEnterKeyPress),
     mentionHandler,

packages/editor/rich-text-editor/src/ui/index.tsx

@@ -1,30 +1,26 @@
 "use client";
+import * as React from "react";
+// editor-core
 import {
-  DeleteImage,
   EditorContainer,
   EditorContentWrapper,
   getEditorClassNames,
   IMentionHighlight,
   IMentionSuggestion,
-  RestoreImage,
-  UploadImage,
   useEditor,
   EditorRefApi,
+  TFileHandler,
 } from "@plane/editor-core";
-import * as React from "react";
+// extensions
 import { RichTextEditorExtensions } from "src/ui/extensions";
+// components
 import { EditorBubbleMenu } from "src/ui/menus/bubble-menu";
 
 export type IRichTextEditor = {
   initialValue: string;
   value?: string | null;
   dragDropEnabled?: boolean;
-  fileHandler: {
+  fileHandler: TFileHandler;
-    cancel: () => void;
-    delete: DeleteImage;
-    upload: UploadImage;
-    restore: RestoreImage;
-  };
   id?: string;
   containerClassName?: string;
   editorClassName?: string;
@@ -67,10 +63,7 @@ const RichTextEditor = (props: IRichTextEditor) => {
   const editor = useEditor({
     id,
     editorClassName,
-    restoreFile: fileHandler.restore,
+    fileHandler,
-    uploadFile: fileHandler.upload,
-    deleteFile: fileHandler.delete,
-    cancelUploadImage: fileHandler.cancel,
     onChange,
     initialValue,
     value,

web/components/pages/editor/editor-body.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
-import { Control, Controller } from "react-hook-form";
 import useSWR from "swr";
 // document editor
 import {
@@ -12,7 +11,7 @@ import {
   IMarking,
 } from "@plane/document-editor";
 // types
-import { IUserLite, TPage } from "@plane/types";
+import { IUserLite } from "@plane/types";
 // components
 import { PageContentBrowser, PageContentLoader, PageEditorTitle } from "@/components/pages";
 // helpers
@@ -31,7 +30,6 @@ import { IPageStore } from "@/store/pages/page.store";
 const fileService = new FileService();
 
 type Props = {
-  control: Control<TPage, any>;
   editorRef: React.RefObject<EditorRefApi>;
   readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
   handleDescriptionUpdate: (binaryString: string, descriptionHTML: string) => Promise<void>;
@@ -45,7 +43,6 @@ type Props = {
 
 export const PageEditorBody: React.FC<Props> = observer((props) => {
   const {
-    control,
     handleReadOnlyEditorReady,
     handleDescriptionUpdate,
     handleEditorReady,
@@ -135,30 +132,24 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
             />
           </div>
           {isContentEditable ? (
-            <Controller
+            <DocumentEditorWithRef
-              name="description_html"
+              id={pageId}
-              control={control}
+              fileHandler={{
-              render={() => (
+                cancel: fileService.cancelUpload,
-                <DocumentEditorWithRef
+                delete: fileService.getDeleteImageFunction(workspaceId),
-                  id={pageId}
+                restore: fileService.getRestoreImageFunction(workspaceId),
-                  fileHandler={{
+                upload: fileService.getUploadFileFunction(workspaceSlug as string, setIsSubmitting),
-                    cancel: fileService.cancelUpload,
+              }}
-                    delete: fileService.getDeleteImageFunction(workspaceId),
+              handleEditorReady={handleEditorReady}
-                    restore: fileService.getRestoreImageFunction(workspaceId),
+              value={pageDescriptionYJS}
-                    upload: fileService.getUploadFileFunction(workspaceSlug as string, setIsSubmitting),
+              ref={editorRef}
-                  }}
+              containerClassName="p-0 pb-64"
-                  handleEditorReady={handleEditorReady}
+              editorClassName="pl-10"
-                  value={pageDescriptionYJS}
+              onChange={handleDescriptionUpdate}
-                  ref={editorRef}
+              mentionHandler={{
-                  containerClassName="p-0 pb-64"
+                highlights: mentionHighlights,
-                  editorClassName="lg:px-10 pl-8"
+                suggestions: mentionSuggestions,
-                  onChange={handleDescriptionUpdate}
+              }}
-                  mentionHandler={{
-                    highlights: mentionHighlights,
-                    suggestions: mentionSuggestions,
-                  }}
-                />
-              )}
             />
           ) : (
             <DocumentReadOnlyEditorWithRef
@@ -166,7 +157,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
               initialValue={pageDescription ?? "<p></p>"}
               handleEditorReady={handleReadOnlyEditorReady}
               containerClassName="p-0 pb-64 border-none"
-              editorClassName="lg:px-10 pl-8"
+              editorClassName="pl-10"
               mentionHandler={{
                 highlights: mentionHighlights,
               }}

web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -2,7 +2,6 @@ import { ReactElement, useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useForm } from "react-hook-form";
 import useSWR from "swr";
 // document-editor
 import { EditorRefApi, useEditorMarkings } from "@plane/document-editor";
@@ -41,15 +40,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
   const { description_html, id, name, setIsSubmitting, updateDescription } = pageStore;
   // editor markings hook
   const { markings, updateMarkings } = useEditorMarkings();
-  // form info
+  // fetch page details
-  const { getValues, control } = useForm<TPage>({
-    defaultValues: {
-      name: "",
-      description_html: "",
-    },
-  });
-
-  // fetching page details
   const { error: pageDetailsError } = useSWR(
     pageId ? `PAGE_DETAILS_${pageId}` : null,
     pageId ? () => getPageById(pageId.toString()) : null,
@@ -70,7 +61,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
 
   if ((!pageStore || !id) && !pageDetailsError)
     return (
-      <div className="h-full w-full grid place-items-center">
+      <div className="size-full grid place-items-center">
         <Spinner />
       </div>
     );
@@ -94,13 +85,9 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
   const handleCreatePage = async (payload: Partial<TPage>) => await createPage(payload);
 
   const handleDuplicatePage = async () => {
-    const currentPageValues = getValues();
-
-    if (!currentPageValues?.description_html) currentPageValues.description_html = description_html;
-
     const formData: Partial<TPage> = {
       name: "Copy of " + name,
-      description_html: currentPageValues.description_html,
+      description_html: description_html ?? "<p></p>",
     };
 
     await handleCreatePage(formData)
@@ -134,7 +121,6 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
             />
           )}
           <PageEditorBody
-            control={control}
             editorRef={editorRef}
             handleEditorReady={(val) => setEditorReady(val)}
             readOnlyEditorRef={readOnlyEditorRef}