refactor: cleanup useTiptap hook

packages/editor/dist/es/hooks/useEditor.d.ts

@@ -1,4 +1,4 @@
 import { EditorOptions } from "@tiptap/core";
 import { DependencyList } from "react";
 import { Editor as EditorType } from "../types";
-export declare const useEditor: (options?: Partial<EditorOptions>, deps?: DependencyList) => EditorType;
+export declare const useEditor: (options?: Partial<EditorOptions>, deps?: DependencyList) => EditorType | null;

packages/editor/dist/es/hooks/useEditor.js

@@ -1,5 +1,5 @@
 import { Editor } from "@tiptap/core";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 function useForceUpdate() {
     const [, setValue] = useState(0);
     return () => setValue((value) => value + 1);
@@ -7,6 +7,7 @@ function useForceUpdate() {
 export const useEditor = (options = {}, deps = []) => {
     const [editor, setEditor] = useState(null);
     const forceUpdate = useForceUpdate();
+    const editorRef = useRef(editor);
     useEffect(() => {
         let isMounted = true;
         const instance = new Editor(options);
@@ -25,5 +26,26 @@ export const useEditor = (options = {}, deps = []) => {
             isMounted = false;
         };
     }, deps);
+    useEffect(() => {
+        editorRef.current = editor;
+        if (editor && !editor.current)
+            Object.defineProperty(editor, "current", {
+                get: () => editorRef.current,
+            });
+    }, [editor]);
+    useEffect(() => {
+        // this is required for the drag/drop to work properly
+        // in the editor.
+        function onDragEnter(event) {
+            if (!!(editor === null || editor === void 0 ? void 0 : editor.view.dragging)) {
+                event.preventDefault();
+                return true;
+            }
+        }
+        editor === null || editor === void 0 ? void 0 : editor.view.dom.addEventListener("dragenter", onDragEnter);
+        return () => {
+            editor === null || editor === void 0 ? void 0 : editor.view.dom.removeEventListener("dragenter", onDragEnter);
+        };
+    }, [editor === null || editor === void 0 ? void 0 : editor.view.dom]);
     return editor;
 };

packages/editor/dist/es/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./extensions";
 import Toolbar from "./toolbar";
 import { Theme } from "@notesnook/theme";
@@ -6,7 +5,7 @@ import { AttachmentOptions } from "./extensions/attachment";
 import { EditorOptions } from "@tiptap/core";
 declare const useTiptap: (options?: Partial<EditorOptions & AttachmentOptions & {
     theme: Theme;
-}>, deps?: import("react").DependencyList) => import("./types").Editor;
+}>, deps?: import("react").DependencyList) => import("./types").Editor | null;
 export { useTiptap, Toolbar };
 export * from "./types";
 export * from "./extensions/react";

packages/editor/dist/es/index.js

@@ -14,7 +14,7 @@ import CharacterCount from "@tiptap/extension-character-count";
 import Placeholder from "@tiptap/extension-placeholder";
 import Underline from "@tiptap/extension-underline";
 import StarterKit from "@tiptap/starter-kit";
-import { useEffect, useMemo, useRef } from "react";
+import { useMemo } from "react";
 import { EditorView } from "prosemirror-view";
 import Toolbar from "./toolbar";
 import TextAlign from "@tiptap/extension-text-align";
@@ -138,26 +138,6 @@ const useTiptap = (options = {}, deps = []) => {
         isMobile,
     ]);
     const editor = useEditor(Object.assign(Object.assign({}, defaultOptions), restOptions), deps);
-    const editorRef = useRef(editor);
-    useEffect(() => {
-        editorRef.current = editor;
-        if (editor && !editor.current)
-            Object.defineProperty(editor, "current", {
-                get: () => editorRef.current,
-            });
-    }, [editor]);
-    useEffect(() => {
-        function onDragEnter(event) {
-            if (!!(editor === null || editor === void 0 ? void 0 : editor.view.dragging)) {
-                event.preventDefault();
-                return true;
-            }
-        }
-        editor === null || editor === void 0 ? void 0 : editor.view.dom.addEventListener("dragenter", onDragEnter);
-        return () => {
-            editor === null || editor === void 0 ? void 0 : editor.view.dom.removeEventListener("dragenter", onDragEnter);
-        };
-    }, [editor === null || editor === void 0 ? void 0 : editor.view.dom]);
     return editor;
 };
 export { useTiptap, Toolbar };

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

@@ -1,5 +1,5 @@
 import { EditorOptions, Editor } from "@tiptap/core";
-import { DependencyList, useEffect, useState } from "react";
+import { DependencyList, useEffect, useRef, useState } from "react";
 import { Editor as EditorType } from "../types";
 
 function useForceUpdate() {
@@ -12,8 +12,9 @@ export const useEditor = (
   options: Partial<EditorOptions> = {},
   deps: DependencyList = []
 ) => {
-  const [editor, setEditor] = useState<Editor | null>(null);
+  const [editor, setEditor] = useState<EditorType | null>(null);
   const forceUpdate = useForceUpdate();
+  const editorRef = useRef<EditorType | null>(editor);
 
   useEffect(() => {
     let isMounted = true;
@@ -38,5 +39,30 @@ export const useEditor = (
     };
   }, deps);
 
-  return editor as EditorType;
+  useEffect(() => {
+    editorRef.current = editor;
+
+    if (editor && !editor.current)
+      Object.defineProperty(editor, "current", {
+        get: () => editorRef.current,
+      });
+  }, [editor]);
+
+  useEffect(() => {
+    // this is required for the drag/drop to work properly
+    // in the editor.
+    function onDragEnter(event: DragEvent) {
+      if (!!editor?.view.dragging) {
+        event.preventDefault();
+        return true;
+      }
+    }
+
+    editor?.view.dom.addEventListener("dragenter", onDragEnter);
+    return () => {
+      editor?.view.dom.removeEventListener("dragenter", onDragEnter);
+    };
+  }, [editor?.view.dom]);
+
+  return editor;
 };

packages/editor/src/index.ts

@@ -154,30 +154,6 @@ const useTiptap = (
     deps
   );
 
-  const editorRef = useRef(editor);
-  useEffect(() => {
-    editorRef.current = editor;
-
-    if (editor && !editor.current)
-      Object.defineProperty(editor, "current", {
-        get: () => editorRef.current,
-      });
-  }, [editor]);
-
-  useEffect(() => {
-    function onDragEnter(event: DragEvent) {
-      if (!!editor?.view.dragging) {
-        event.preventDefault();
-        return true;
-      }
-    }
-
-    editor?.view.dom.addEventListener("dragenter", onDragEnter);
-    return () => {
-      editor?.view.dom.removeEventListener("dragenter", onDragEnter);
-    };
-  }, [editor?.view.dom]);
-
   return editor;
 };
 

packages/editor/src/toolbar/stores/toolbar-store.ts

@@ -1,4 +1,3 @@
-import { Editor } from "@tiptap/core";
 import create from "zustand";
 
 export type ToolbarLocation = "top" | "bottom";