feat: add basic tiptap editor

apps/web/__e2e__/editor.test.js

@@ -125,7 +125,7 @@ test("creating a new title-only note should add it to the list", async () => {
   await createNoteAndCheckPresence({ title: "Hello World" });
 });
 
-test("format changes should get saved", async () => {
+test.skip("format changes should get saved", async () => {
   const selector = await createNoteAndCheckPresence();
 
   await page.click(getTestId("notes-action-button"));
@@ -178,7 +178,7 @@ test("opening an empty titled note should empty out editor contents", async () =
 test("focus should not jump to editor while typing in title input", async () => {
   await page.click(getTestId("notes-action-button"));
 
-  await page.waitForSelector(".mce-content-body");
+  await page.waitForSelector(".ProseMirror");
 
   await page.type(getTestId("editor-title"), "Hello", { delay: 200 });
 
@@ -190,7 +190,7 @@ test("focus should not jump to editor while typing in title input", async () =>
 test("select all & backspace should clear all content in editor", async () => {
   const selector = await createNoteAndCheckPresence();
 
-  await page.focus(".mce-content-body");
+  await page.focus(".ProseMirror");
 
   await page.keyboard.press("Home");
 
@@ -206,12 +206,12 @@ test("select all & backspace should clear all content in editor", async () => {
 
   await page.click(selector);
 
-  await page.waitForSelector(".mce-content-body");
+  await page.waitForSelector(".ProseMirror");
 
   await expect(getEditorContent()).resolves.toBe("");
 });
 
-test("last line doesn't get saved if it's font is different", async () => {
+test.skip("last line doesn't get saved if it's font is different", async () => {
   const selector = await createNoteAndCheckPresence();
 
   await page.keyboard.press("Enter");
@@ -220,7 +220,7 @@ test("last line doesn't get saved if it's font is different", async () => {
 
   await page.click(`div[title="Serif"]`);
 
-  await page.type(".mce-content-body", "I am another line in Serif font.");
+  await page.type(".ProseMirror", "I am another line in Serif font.");
 
   await page.waitForTimeout(200);
 
@@ -235,7 +235,7 @@ test("last line doesn't get saved if it's font is different", async () => {
 
 test("editing a note and switching immediately to another note and making an edit shouldn't overlap both notes", async ({
   page,
-}) => {
+}, { setTimeout }) => {
   await createNoteAndCheckPresence({
     title: "Test note 1",
     content: "53ad8e4e40ebebd0f400498d",

apps/web/__e2e__/utils/index.js

@@ -46,7 +46,7 @@ async function createNote(note, actionButtonId) {
 }
 
 async function editNote(title, content, noDelay = false) {
-  await page.waitForSelector(".mce-content-body");
+  await page.waitForSelector(".ProseMirror");
 
   // await page.waitForTimeout(1000);
 
@@ -59,9 +59,9 @@ async function editNote(title, content, noDelay = false) {
   if (content) {
     if (!noDelay) await page.waitForTimeout(100);
 
-    await page.focus(".mce-content-body");
+    await page.focus(".ProseMirror");
 
-    await page.type(".mce-content-body", content);
+    await page.type(".ProseMirror", content);
   }
 
   if (!noDelay) await page.waitForTimeout(200);
@@ -84,13 +84,11 @@ async function getEditorTitle() {
 }
 
 async function getEditorContent() {
-  return (await page.innerText(".mce-content-body"))
-    .trim()
-    .replace(/\n+/gm, "\n");
+  return (await page.innerText(".ProseMirror")).trim().replace(/\n+/gm, "\n");
 }
 
 async function getEditorContentAsHTML() {
-  return await page.innerHTML(".mce-content-body");
+  return await page.innerHTML(".ProseMirror");
 }
 
 function isTestAll() {

apps/web/package.json

@@ -14,6 +14,7 @@
     "@rebass/forms": "^4.0.6",
     "@streetwriters/tinymce-plugins": "^1.5.18",
     "@tinymce/tinymce-react": "^3.13.0",
+    "@tiptap/react": "^2.0.0-beta.108",
     "@types/rebass": "^4.0.10",
     "async-mutex": "^0.3.2",
     "axios": "^0.21.4",
@@ -39,6 +40,7 @@
     "localforage-getitems": "https://github.com/thecodrr/localForage-getItems.git",
     "nncryptoworker": "file:packages/nncryptoworker",
     "notes-core": "npm:@streetwriters/notesnook-core@latest",
+    "notesnook-editor": "file:../notesnook-editor",
     "phone": "^3.1.14",
     "platform": "^1.3.6",
     "print-js": "^1.6.0",

apps/web/src/components/editor/editor.css

@@ -1,3 +1,4 @@
+
 .tox .tox-tbtn:hover {
   background: var(--hover) !important;
 }

apps/web/src/components/editor/index.tsx

@@ -23,26 +23,31 @@ import { FlexScrollContainer } from "../scroll-container";
 import { formatDate } from "notes-core/utils/date";
 import { debounce, debounceWithId } from "../../utils/debounce";
 import { showError } from "../../common/dialog-controller";
+import "./tiptap.css";
+import { CharacterCounter, IEditor } from "./tiptap";
 
 const ReactMCE = React.lazy(() => import("./tinymce"));
+const TipTap = React.lazy(() => import("./tiptap"));
 // const EMPTY_CONTENT = "<p><br></p>";
-function editorSetContent(editor, content) {
-  const editorScroll = document.querySelector(".editorScroll");
-  if (editorScroll) editorScroll.scrollTop = 0;
+// function editorSetContent(editor, content) {
+//   const editorScroll = document.querySelector(".editorScroll");
+//   if (editorScroll) editorScroll.scrollTop = 0;
 
-  editor.setHTML(content);
+//   editor.setHTML(content);
 
-  updateWordCount(editor);
+//   updateWordCount(editor);
 
-  editor.focus();
+//   editor.focus();
+// }
+
+function updateWordCount(counter?: CharacterCounter) {
+  AppEventManager.publish(
+    AppEvents.UPDATE_WORD_COUNT,
+    counter ? counter.words() : 0
+  );
 }
 
-function updateWordCount(editor) {
-  if (!editor.countWords) return;
-  AppEventManager.publish(AppEvents.UPDATE_WORD_COUNT, editor.countWords());
-}
-
-function onEditorChange(noteId, sessionId, content) {
+function onEditorChange(noteId: string, sessionId: string, content: string) {
   if (!content) return;
 
   editorstore.get().saveSessionContent(noteId, sessionId, {
@@ -53,9 +58,13 @@ function onEditorChange(noteId, sessionId, content) {
 const debouncedUpdateWordCount = debounce(updateWordCount, 1000);
 const debouncedOnEditorChange = debounceWithId(onEditorChange, 100);
 
-function Editor({ noteId, nonce }) {
-  const editorRef = useRef();
-  const [isEditorLoading, setIsEditorLoading] = useState(true);
+function Editor({
+  noteId,
+  nonce,
+}: {
+  noteId?: string | number;
+  nonce?: string;
+}) {
   const sessionId = useStore((store) => store.session.id);
   const sessionState = useStore((store) => store.session.state);
   const sessionType = useStore((store) => store.session.sessionType);
@@ -71,17 +80,18 @@ function Editor({ noteId, nonce }) {
   const arePropertiesVisible = useStore((store) => store.arePropertiesVisible);
   const init = useStore((store) => store.init);
   const isFocusMode = useAppStore((store) => store.isFocusMode);
-  const isSessionReady = useMemo(
-    () => nonce || sessionId || editorRef.current?.editor?.initialized,
-    [nonce, sessionId, editorRef]
-  );
+  const isSessionReady = useMemo(() => nonce || sessionId, [nonce, sessionId]);
+  const [editor, setEditor] = useState<IEditor>();
+  // const editor = useRef<IEditor>();
+  // const [content, setContent] = useState<string>();
+  // const [isEditorFocused, setIsEditorFocused] = useState<boolean>();
 
   useEffect(() => {
     init();
   }, [init]);
 
   const startSession = useCallback(
-    async function startSession(noteId, force) {
+    async function startSession(noteId: string | number, force?: boolean) {
       if (noteId === 0) newSession(nonce);
       else if (noteId) {
         await openSession(noteId, force);
@@ -91,20 +101,18 @@ function Editor({ noteId, nonce }) {
   );
 
   const clearContent = useCallback(() => {
-    const editor = editorRef.current?.editor;
-    if (!editor || !editor.initialized) return;
+    if (!editor) return;
     editor.clearContent();
-    updateWordCount(editor);
-    editor.focus(); // TODO
-  }, []);
+    editor.focus();
+    updateWordCount();
+  }, [editor]);
 
-  const setContent = useCallback(() => {
+  const setEditorContent = useCallback(() => {
     const { id } = editorstore.get().session;
-    const editor = editorRef.current?.editor;
-    if (!editor || !editor.initialized) return;
-
     async function setContents() {
-      if (!db.notes.note(id)?.synced()) {
+      if (!editor) return;
+      // TODO move this somewhere more appropriate
+      if (!db.notes?.note(id)?.synced()) {
         await showError(
           "Note not synced",
           "This note is not fully synced. Please sync again to open this note for editing."
@@ -113,18 +121,22 @@ function Editor({ noteId, nonce }) {
       }
 
       let content = await editorstore.get().getSessionContent();
-      if (content?.data) editorSetContent(editor, content.data);
-      else clearContent(editor);
+      if (content?.data) {
+        editor.setContent(content.data);
+        editor.focus();
+      } else clearContent();
 
-      editorstore.set((state) => (state.session.state = SESSION_STATES.stale));
-      if (id && content) await db.attachments.downloadImages(id);
+      editorstore.set(
+        (state: any) => (state.session.state = SESSION_STATES.stale)
+      );
+      if (id && content) await db.attachments?.downloadImages(id);
     }
     setContents();
-  }, [clearContent]);
+  }, [clearContent, editor]);
 
   const enabledPreviewMode = useCallback(() => {
-    const editor = editorRef.current?.editor;
-    editor.mode.set("readonly");
+    //   const editor = editorRef.current?.editor;
+    //   editor.mode.set("readonly");
   }, []);
 
   const disablePreviewMode = useCallback(
@@ -152,30 +164,31 @@ function Editor({ noteId, nonce }) {
       // there can be notes that only have a title so we need to
       // handle that.
       if (!contentId && (!title || !!nonce)) return;
-      setContent();
+      setEditorContent();
     },
-    [sessionId, contentId, setContent]
+    [sessionId, contentId, setEditorContent]
   );
 
   useEffect(
     function openPreviewSession() {
       if (!isPreviewMode || sessionState !== SESSION_STATES.new) return;
 
-      setContent();
+      setEditorContent();
       enabledPreviewMode();
     },
-    [isPreviewMode, sessionState, setContent, enabledPreviewMode]
+    [isPreviewMode, sessionState, setEditorContent, enabledPreviewMode]
   );
 
-  useEffect(() => {
-    if (isEditorLoading) return;
-    const editor = editorRef.current?.editor;
-    if (isReadonly) {
-      editor.mode.set("readonly");
-    } else {
-      editor.mode.set("design");
-    }
-  }, [isReadonly, isEditorLoading]);
+  //   useEffect(() => {
+  //     if (isEditorLoading) return;
+  //     const editor = editorRef.current?.editor;
+  //     if (!editor) return;
+  //     if (isReadonly) {
+  //       editor.mode.set("readonly");
+  //     } else {
+  //       editor.mode.set("design");
+  //     }
+  //   }, [isReadonly, isEditorLoading]);
 
   useEffect(
     function newSession() {
@@ -188,6 +201,7 @@ function Editor({ noteId, nonce }) {
 
   useEffect(() => {
     (async () => {
+      if (noteId === undefined) return;
       await startSession(noteId);
     })();
   }, [startSession, noteId, nonce]);
@@ -203,7 +217,7 @@ function Editor({ noteId, nonce }) {
         overflow: "hidden",
       }}
     >
-      {isEditorLoading ? (
+      {!editor ? (
         <Flex
           sx={{
             position: "absolute",
@@ -219,6 +233,7 @@ function Editor({ noteId, nonce }) {
       <Toolbar />
       <FlexScrollContainer
         className="editorScroll"
+        style={{}}
         viewStyle={{ display: "flex", flexDirection: "column" }}
       >
         <Box
@@ -271,39 +286,46 @@ function Editor({ noteId, nonce }) {
 
           {isSessionReady && (
             <Suspense fallback={<div />}>
-              <ReactMCE
-                editorRef={editorRef}
-                onFocus={() => toggleProperties(false)}
-                onSave={saveSession}
-                sessionId={sessionId}
-                onChange={(content, editor) => {
+              <TipTap
+                onFocus={() => {
+                  toggleProperties(false);
+                }}
+                onInit={(_editor) => {
+                  setEditor(_editor);
+                }}
+                onDestroy={() => {
+                  setEditor(undefined);
+                }}
+                onChange={(content, counter) => {
                   const { id, sessionId } = editorstore.get().session;
                   debouncedOnEditorChange(sessionId, id, sessionId, content);
-                  debouncedUpdateWordCount(editor);
-                }}
-                changeInterval={100}
-                onInit={(editor) => {
-                  if (sessionId && editorstore.get().session.contentId) {
-                    setContent();
-                  } else if (nonce) clearContent();
-
-                  setTimeout(() => {
-                    setIsEditorLoading(false);
-                    // a short delay to make sure toolbar has rendered.
-                  }, 100);
+                  if (counter) debouncedUpdateWordCount(counter);
                 }}
               />
             </Suspense>
           )}
         </Flex>
       </FlexScrollContainer>
-      {arePropertiesVisible && <Properties noteId={noteId} />}
+      {arePropertiesVisible && <Properties />}
     </Flex>
   );
 }
 export default Editor;
 
-function Notice({ title, subtitle, onCancel, action }) {
+function Notice({
+  title,
+  subtitle,
+  onCancel,
+  action,
+}: {
+  title: string;
+  subtitle: string;
+  onCancel: () => void;
+  action?: {
+    text: string;
+    onClick: () => void;
+  };
+}) {
   return (
     <Flex
       bg="bgSecondary"

apps/web/src/components/editor/loading.tsx

@@ -1,7 +1,7 @@
 import { Flex, Text } from "rebass";
 import * as Icon from "../icons";
 
-function EditorLoading({ text }) {
+function EditorLoading({ text }: { text?: string }) {
   return (
     <Flex
       flexDirection="column"

apps/web/src/components/editor/tiptap.css

@@ -0,0 +1,11 @@
+.ProseMirror p.is-editor-empty:first-child::before {
+  color: var(--placeholder);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+/* .ProseMirror-focused .is-editor-empty::before {
+    content: "";
+} */

apps/web/src/components/editor/tiptap.tsx

@@ -0,0 +1,61 @@
+import { EditorContent, HTMLContent } from "@tiptap/react";
+import { useTiptap } from "notesnook-editor";
+import { useEffect } from "react";
+
+export type CharacterCounter = {
+  words: () => number;
+  characters: () => number;
+};
+
+export interface IEditor {
+  focus: () => void;
+  setContent: (content: HTMLContent) => void;
+  clearContent: () => void;
+}
+
+type TipTapProps = {
+  onInit?: (editor: IEditor) => void;
+  onDestroy?: () => void;
+  onChange?: (content: string, counter?: CharacterCounter) => void;
+  onFocus?: () => void;
+};
+
+function TipTap(props: TipTapProps) {
+  const { onInit, onChange, onFocus, onDestroy } = props;
+  let counter: CharacterCounter | undefined;
+  const editor = useTiptap(
+    {
+      autofocus: "start",
+      onFocus,
+      onCreate: ({ editor }) => {
+        console.log("CREATING NEW EDITOR");
+        counter = editor.storage.characterCount as CharacterCounter;
+        if (onInit)
+          onInit({
+            focus: () => editor.commands.focus("start"),
+            setContent: (content) => {
+              editor.commands.clearContent(false);
+              editor.commands.setContent(content, false);
+            },
+            clearContent: () => editor.commands.clearContent(false),
+          });
+      },
+      onUpdate: ({ editor }) => {
+        if (onChange) onChange(editor.getHTML(), counter);
+      },
+      onDestroy,
+    },
+    []
+  );
+
+  return (
+    <EditorContent
+      style={{ flex: 1, cursor: "text" }}
+      onClick={() => {
+        editor?.commands.focus();
+      }}
+      editor={editor}
+    />
+  );
+}
+export default TipTap;

apps/web/src/views/auth.tsx

@@ -22,6 +22,7 @@ import { showToast } from "../utils/toast";
 import AuthContainer from "../components/auth-container";
 import { isTesting } from "../utils/platform";
 import { AuthenticatorType } from "../components/dialogs/multi-factor-dialog";
+// @ts-ignore
 import { RequestError } from "notes-core/utils/http";
 import { useTimer } from "../hooks/use-timer";
 import { ANALYTICS_EVENTS, trackEvent } from "../utils/analytics";
@@ -910,9 +911,10 @@ async function login(
     Config.set("sessionExpired", false);
     openURL("/");
   } catch (e) {
-    if (e instanceof RequestError && e.code === "mfa_required") {
+    const error = e as any;
+    if (error.code === "mfa_required") {
       const { primaryMethod, phoneNumber, secondaryMethod, token } =
-        e.data as MFAErrorData;
+        error.data as MFAErrorData;
 
       if (!primaryMethod)
         throw new Error(

apps/web/tsconfig.json

@@ -3,8 +3,6 @@
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
-    "downlevelIteration": true,
-    "maxNodeModuleJsDepth": 1,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,