From cb3898b96914b0f48621f9151a6f42a5e3b9353d Mon Sep 17 00:00:00 2001
From: liqingwei <liqingwei@shimo.im>
Date: Sun, 5 Sep 2021 16:02:26 +0800
Subject: [PATCH 1/7] feat: binding yjs

---
 components/container/edit-container.tsx |  9 ++-
 components/editor/editor.tsx            |  6 +-
 components/editor/extensions/index.ts   |  3 +-
 components/editor/extensions/y-sync.ts  | 25 +++++++
 components/note-nav.tsx                 | 10 +--
 libs/server/note.ts                     |  4 +-
 libs/server/store/providers/base.ts     |  2 +-
 libs/server/store/providers/s3.ts       |  2 +-
 libs/shared/note.ts                     |  1 +
 libs/shared/str.ts                      |  7 +-
 libs/shared/y-doc.ts                    | 20 ++++++
 libs/web/api/note.ts                    |  2 +-
 libs/web/editor/y-doc.ts                | 96 +++++++++++++++++++++++++
 libs/web/state/editor.ts                | 45 +++++++++++-
 package.json                            |  6 +-
 pages/api/notes/[id]/index.ts           | 36 ++++++----
 yarn.lock                               | 33 +++++++++
 17 files changed, 269 insertions(+), 38 deletions(-)
 create mode 100644 components/editor/extensions/y-sync.ts
 create mode 100644 libs/shared/y-doc.ts
 create mode 100644 libs/web/editor/y-doc.ts

diff --git a/components/container/edit-container.tsx b/components/container/edit-container.tsx
index 8e59a4af8..0dbf6be33 100644
--- a/components/container/edit-container.tsx
+++ b/components/container/edit-container.tsx
@@ -55,9 +55,11 @@ export const EditContainer = () => {
             return
           }
         } catch (msg) {
-          if (msg.name !== 'AbortError') {
-            toast(msg.message, 'error')
-            router.push('/', undefined, { shallow: true })
+          if (msg instanceof Error) {
+            if (msg.name !== 'AbortError') {
+              toast(msg.message, 'error')
+              router.push('/', undefined, { shallow: true })
+            }
           }
         }
       } else {
@@ -73,6 +75,7 @@ export const EditContainer = () => {
       }
 
       if (!isNew && id !== 'new') {
+        // todo: store in localStorage
         mutateSettings({
           last_visit: `/${id}`,
         })
diff --git a/components/editor/editor.tsx b/components/editor/editor.tsx
index 5fa5733ec..165bc5708 100644
--- a/components/editor/editor.tsx
+++ b/components/editor/editor.tsx
@@ -2,7 +2,6 @@ import { FC, useEffect, useState } from 'react'
 import { use100vh } from 'react-div-100vh'
 import MarkdownEditor, { Props } from 'rich-markdown-editor'
 import { useEditorTheme } from './theme'
-import useMounted from 'libs/web/hooks/use-mounted'
 import Tooltip from './tooltip'
 import extensions from './extensions'
 import EditorState from 'libs/web/state/editor'
@@ -21,13 +20,11 @@ const Editor: FC<EditorProps> = ({ readOnly, isPreview }) => {
     onClickLink,
     onUploadImage,
     onHoverLink,
-    onEditorChange,
     backlinks,
     editorEl,
     note,
   } = EditorState.useContainer()
   const height = use100vh()
-  const mounted = useMounted()
   const editorTheme = useEditorTheme()
   const [hasMinHeight, setHasMinHeight] = useState(true)
   const toast = useToast()
@@ -44,9 +41,8 @@ const Editor: FC<EditorProps> = ({ readOnly, isPreview }) => {
       <MarkdownEditor
         readOnly={readOnly}
         id={note?.id}
+        key={note?.id}
         ref={editorEl}
-        value={mounted ? note?.content : ''}
-        onChange={onEditorChange}
         placeholder={dictionary.editorPlaceholder}
         theme={editorTheme}
         uploadImage={(file) => onUploadImage(file, note?.id)}
diff --git a/components/editor/extensions/index.ts b/components/editor/extensions/index.ts
index e2c8a934d..8b10957e9 100644
--- a/components/editor/extensions/index.ts
+++ b/components/editor/extensions/index.ts
@@ -1,6 +1,7 @@
 import { Extension } from 'rich-markdown-editor'
 import Bracket from './bracket'
+import YSync from './y-sync'
 
-const extensions: Extension[] = [new Bracket()]
+const extensions: Extension[] = [new Bracket(), new YSync()]
 
 export default extensions
diff --git a/components/editor/extensions/y-sync.ts b/components/editor/extensions/y-sync.ts
new file mode 100644
index 000000000..f6a5eb691
--- /dev/null
+++ b/components/editor/extensions/y-sync.ts
@@ -0,0 +1,25 @@
+import { Extension } from 'rich-markdown-editor'
+import { ySyncPlugin } from 'y-prosemirror'
+import * as Y from 'yjs'
+
+export default class YSync extends Extension {
+  get name() {
+    return 'y-sync'
+  }
+
+  yDoc?: Y.Doc
+
+  constructor(options?: Record<string, any>) {
+    super(options)
+  }
+
+  get plugins() {
+    if (this.yDoc) {
+      this.yDoc.destroy()
+    }
+    this.yDoc = new Y.Doc()
+    const type = this.yDoc.get('prosemirror', Y.XmlFragment)
+
+    return [ySyncPlugin(type)]
+  }
+}
diff --git a/components/note-nav.tsx b/components/note-nav.tsx
index 7ea41753a..e7b1b0aea 100644
--- a/components/note-nav.tsx
+++ b/components/note-nav.tsx
@@ -58,6 +58,8 @@ const NoteNav = () => {
     [note, menu]
   )
 
+  const getTitle = (title?: string) => title ?? t('Untitled')
+
   return (
     <nav
       className={classNames(
@@ -82,22 +84,22 @@ const NoteNav = () => {
             {getPaths(note)
               .reverse()
               .map((path) => (
-                <Tooltip key={path.id} title={path.title}>
+                <Tooltip key={path.id} title={getTitle(path.title)}>
                   <div>
                     <Link href={`/${path.id}`} shallow>
                       <a className="title block hover:bg-gray-200 px-1 py-0.5 rounded text-sm truncate">
-                        {path.title}
+                        {getTitle(path.title)}
                       </a>
                     </Link>
                   </div>
                 </Tooltip>
               ))}
-            <Tooltip title={note.title}>
+            <Tooltip title={getTitle(note.title)}>
               <span
                 className="title block text-gray-600 text-sm truncate select-none"
                 aria-current="page"
               >
-                {note.title}
+                {getTitle(note.title)}
               </span>
             </Tooltip>
           </Breadcrumbs>
diff --git a/libs/server/note.ts b/libs/server/note.ts
index 1bc1dbb58..e2026b056 100644
--- a/libs/server/note.ts
+++ b/libs/server/note.ts
@@ -5,7 +5,7 @@ import { getPathNoteById } from 'libs/server/note-path'
 import { ServerState } from './connect'
 
 export const createNote = async (note: NoteModel, state: ServerState) => {
-  const { content = '\n', ...meta } = note
+  const { updates = [], ...meta } = note
 
   if (!note.id) {
     note.id = genId()
@@ -21,7 +21,7 @@ export const createNote = async (note: NoteModel, state: ServerState) => {
   }
   const metaData = jsonToMeta(metaWithModel)
 
-  await state.store.putObject(getPathNoteById(note.id), content, {
+  await state.store.putObject(getPathNoteById(note.id), updates, {
     contentType: 'text/markdown',
     meta: metaData,
   })
diff --git a/libs/server/store/providers/base.ts b/libs/server/store/providers/base.ts
index fd13f4f51..83090ea5c 100644
--- a/libs/server/store/providers/base.ts
+++ b/libs/server/store/providers/base.ts
@@ -73,7 +73,7 @@ export abstract class StoreProvider {
    */
   abstract putObject(
     path: string,
-    raw: string | Buffer,
+    raw: string | Buffer | Array<string>,
     headers?: ObjectOptions,
     isCompressed?: boolean
   ): Promise<void>
diff --git a/libs/server/store/providers/s3.ts b/libs/server/store/providers/s3.ts
index bc5cf7bf4..daa19a0d5 100644
--- a/libs/server/store/providers/s3.ts
+++ b/libs/server/store/providers/s3.ts
@@ -162,7 +162,7 @@ export class StoreS3 extends StoreProvider {
 
   async putObject(
     path: string,
-    raw: string | Buffer,
+    raw: string | Buffer | Array<string>,
     options?: ObjectOptions,
     isCompressed?: boolean
   ) {
diff --git a/libs/shared/note.ts b/libs/shared/note.ts
index 4f9c019d6..434a37490 100644
--- a/libs/shared/note.ts
+++ b/libs/shared/note.ts
@@ -11,6 +11,7 @@ export interface NoteModel {
   shared: NOTE_SHARED
   pinned: NOTE_PINNED
   editorsize: EDITOR_SIZE | null
+  updates?: string[]
 }
 
 /**
diff --git a/libs/shared/str.ts b/libs/shared/str.ts
index 2aaf4f0f3..113c84f66 100644
--- a/libs/shared/str.ts
+++ b/libs/shared/str.ts
@@ -23,14 +23,13 @@ export function toStr(
   return deCompressed ? strDecompress(str) : str
 }
 
-export function tryJSON<T>(str?: string | null): T | null {
-  if (isNil(str)) return null
+export function tryJSON<T>(str?: string | null): T | undefined {
+  if (isNil(str)) return undefined
 
   try {
     return JSON.parse(str)
   } catch (e) {
-    console.error('parse error', str)
-    return null
+    console.log('parse error', str)
   }
 }
 
diff --git a/libs/shared/y-doc.ts b/libs/shared/y-doc.ts
new file mode 100644
index 000000000..958a3c5cb
--- /dev/null
+++ b/libs/shared/y-doc.ts
@@ -0,0 +1,20 @@
+import { fromUint8Array, toUint8Array } from 'js-base64'
+import * as Y from 'yjs'
+
+export const mergeUpdates = (updates: (string | Uint8Array)[], sv?: string) => {
+  const doc = new Y.Doc()
+
+  doc.transact(() => {
+    updates.forEach((val) =>
+      Y.applyUpdate(doc, typeof val === 'string' ? toUint8Array(val) : val)
+    )
+  })
+
+  const update = sv
+    ? Y.encodeStateAsUpdate(doc, toUint8Array(sv))
+    : Y.encodeStateAsUpdate(doc)
+
+  doc.destroy()
+
+  return fromUint8Array(update)
+}
diff --git a/libs/web/api/note.ts b/libs/web/api/note.ts
index 3861b6ae1..e7e3d78d6 100644
--- a/libs/web/api/note.ts
+++ b/libs/web/api/note.ts
@@ -31,7 +31,7 @@ export default function useNoteAPI() {
 
   const mutate = useCallback(
     async (id: string, body: Partial<NoteModel>) => {
-      const data = body.content
+      const data = body.updates
         ? await request<Partial<NoteModel>, NoteModel>(
             {
               method: 'POST',
diff --git a/libs/web/editor/y-doc.ts b/libs/web/editor/y-doc.ts
new file mode 100644
index 000000000..28f046988
--- /dev/null
+++ b/libs/web/editor/y-doc.ts
@@ -0,0 +1,96 @@
+import * as Y from 'yjs'
+import { toUint8Array, fromUint8Array } from 'js-base64'
+import { prosemirrorToYDoc } from 'y-prosemirror'
+
+const yDocMap = new Map<number, Y.Doc>()
+
+export const createYDoc = ({
+  panelId = 0,
+  editorYDoc,
+  onUpdate,
+  node,
+  noteUpdates,
+}: {
+  // XXX: May support multiple panels in the future
+  panelId?: number
+  editorYDoc?: Y.Doc
+  onUpdate?: (update: Uint8Array) => void
+  node?: Parameters<typeof prosemirrorToYDoc>[0]
+  noteUpdates?: string[]
+}) => {
+  if (!editorYDoc) {
+    return
+  }
+
+  if (yDocMap.has(panelId)) {
+    destroyYDoc({ panelId, editorYDoc })
+  }
+
+  const yDoc = node ? prosemirrorToYDoc(node) : new Y.Doc()
+
+  yDocMap.set(panelId, yDoc)
+
+  if (noteUpdates) {
+    updateYDoc({ panelId, updates: getDecodedUpdates(noteUpdates) })
+  }
+
+  const onUpdateNote = (update: Uint8Array) => {
+    onUpdate?.(update)
+    Y.applyUpdate(yDoc, update)
+  }
+  const onUpdateEditor = (update: Uint8Array) => {
+    Y.applyUpdate(editorYDoc, update)
+    // console.log(editorYDoc.getXmlFragment('prosemirror').toJSON())
+  }
+
+  Y.applyUpdate(editorYDoc, Y.encodeStateAsUpdate(yDoc))
+  editorYDoc.on('update', onUpdateNote)
+  yDoc.on('update', onUpdateEditor)
+
+  return yDoc
+}
+
+export const destroyYDoc = ({
+  panelId = 0,
+  editorYDoc,
+}: {
+  panelId?: number
+  editorYDoc?: Y.Doc
+}) => {
+  const yDoc = yDocMap.get(panelId)
+  if (yDoc) {
+    yDoc.destroy()
+    editorYDoc?.destroy()
+    yDocMap.delete(panelId)
+  }
+}
+
+export const updateYDoc = ({
+  panelId = 0,
+  updates,
+}: {
+  panelId: number
+  updates: Uint8Array[]
+}) => {
+  const yDoc = yDocMap.get(panelId)
+  if (!yDoc) {
+    return
+  }
+
+  yDoc.transact(() => {
+    updates.forEach((val) => Y.applyUpdate(yDoc, val))
+  })
+}
+
+export const getYDocUpdate = ({ panelId = 0 }: { panelId?: number }) => {
+  const yDoc = yDocMap.get(panelId)
+  if (!yDoc) {
+    return
+  }
+
+  return fromUint8Array(Y.encodeStateAsUpdate(yDoc))
+}
+
+const getDecodedUpdates = (encodedUpdates: string[]) => {
+  return encodedUpdates.map(toUint8Array)
+}
diff --git a/libs/web/state/editor.ts b/libs/web/state/editor.ts
index 1a7a50f71..a8a5f3285 100644
--- a/libs/web/state/editor.ts
+++ b/libs/web/state/editor.ts
@@ -5,6 +5,7 @@ import {
   MouseEvent as ReactMouseEvent,
   useState,
   useRef,
+  useEffect,
 } from 'react'
 import { searchNote, searchRangeText } from 'libs/web/utils/search'
 import useFetcher from 'libs/web/api/fetcher'
@@ -20,6 +21,9 @@ import { useDebouncedCallback } from 'use-debounce'
 import { ROOT_ID } from 'libs/shared/tree'
 import { has } from 'lodash'
 import UIState from './ui'
+import YSync from 'components/editor/extensions/y-sync'
+import { createYDoc, getYDocUpdate } from '../editor/y-doc'
+import { mergeUpdates } from 'libs/shared/y-doc'
 
 const onSearchLink = async (keyword: string) => {
   const list = await searchNote(keyword, NOTE_DELETED.NORMAL)
@@ -51,11 +55,20 @@ const useEditor = (initNote?: NoteModel) => {
   const { request, error } = useFetcher()
   const toast = useToast()
   const editorEl = useRef<MarkdownEditor>(null)
+  const updates = useRef<Uint8Array[]>([])
 
   const onNoteChange = useDebouncedCallback(
     async (data: Partial<NoteModel>) => {
       const isNew = has(router.query, 'new')
 
+      if (isNew) {
+        const update = getYDocUpdate({})
+        data.updates = update ? [update] : []
+      } else if (updates.current?.length > 0) {
+        data.updates = [mergeUpdates(updates.current)]
+        updates.current = []
+      }
+
       if (isNew) {
         data.pid = (router.query.pid as string) || ROOT_ID
         const item = await createNote({ ...note, ...data })
@@ -159,13 +172,43 @@ const useEditor = (initNote?: NoteModel) => {
     setBackLinks(linkNotes)
   }, [note?.id])
 
+  // Now yjs takes over the doc, skip this event during initialization
+  const firstRef = useRef(false)
   const onEditorChange = useCallback(
     (value: () => string): void => {
-      onNoteChange.callback({ content: value() })
+      const val = value()
+      if (val === '\\\n' && !firstRef.current) {
+        firstRef.current = true
+        return
+      }
+      onNoteChange.callback({ content: val })
     },
     [onNoteChange]
   )
 
+  const onEditorUpdate = (update: Uint8Array) => {
+    updates.current.push(update)
+    onNoteChange.callback({})
+  }
+
+  useEffect(() => {
+    if (!note?.id) return
+
+    const { yDoc } = editorEl.current?.extensions.extensions.find(
+      (ext) => ext.name === 'y-sync'
+    ) as YSync
+
+    createYDoc({
+      onUpdate: onEditorUpdate,
+      editorYDoc: yDoc,
+      node: note?.content
+        ? editorEl.current?.createDocument(note.content)
+        : undefined,
+      noteUpdates: note?.updates,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [note?.id])
+
   return {
     onCreateLink,
     onSearchLink,
diff --git a/package.json b/package.json
index 6bc7f0f86..d9d26b17b 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "escape-string-regexp": "^4.0.0",
     "formidable": "^1.2.2",
     "highlight.js": "^10.7.2",
+    "js-base64": "^3.6.1",
     "localforage": "^1.9.0",
     "lodash": "^4.17.21",
     "lzutf8": "^0.6.0",
@@ -71,7 +72,10 @@
     "ua-parser-js": "^0.7.24",
     "unfurl.js": "^5.3.0",
     "unstated-next": "^1.1.0",
-    "use-debounce": "^5.2.1"
+    "use-debounce": "^5.2.1",
+    "y-prosemirror": "^1.0.9",
+    "y-protocols": "^1.0.5",
+    "yjs": "^13.5.12"
   },
   "devDependencies": {
     "@heroicons/react": "^1.0.1",
diff --git a/pages/api/notes/[id]/index.ts b/pages/api/notes/[id]/index.ts
index 7bea3af72..bc5472cd4 100644
--- a/pages/api/notes/[id]/index.ts
+++ b/pages/api/notes/[id]/index.ts
@@ -6,12 +6,14 @@ import { getPathNoteById } from 'libs/server/note-path'
 import { NoteModel } from 'libs/shared/note'
 import { StoreProvider } from 'libs/server/store'
 import { API } from 'libs/server/middlewares/error'
-import { strCompress } from 'libs/shared/str'
+import { strCompress, tryJSON } from 'libs/shared/str'
 import { ROOT_ID } from 'libs/shared/tree'
+import { mergeUpdates } from 'libs/shared/y-doc'
 
 export async function getNote(
   store: StoreProvider,
-  id: string
+  id: string,
+  sv?: string
 ): Promise<NoteModel> {
   const { content, meta } = await store.getObjectAndMeta(getPathNoteById(id))
 
@@ -21,9 +23,11 @@ export async function getNote(
 
   const jsonMeta = metaToJson(meta)
 
+  const updates = tryJSON<string[]>(content) ?? []
+
   return {
     id,
-    content: content || '\n',
+    updates: [mergeUpdates(updates, sv)],
     ...jsonMeta,
   } as NoteModel
 }
@@ -44,6 +48,7 @@ export default api()
   })
   .get(async (req, res) => {
     const id = req.query.id as string
+    const sv = req.query.sv as string
 
     if (id === ROOT_ID) {
       return res.json({
@@ -51,29 +56,32 @@ export default api()
       })
     }
 
-    const note = await getNote(req.state.store, id)
+    const note = await getNote(req.state.store, id, sv)
 
     res.json(note)
   })
   .post(async (req, res) => {
     const id = req.query.id as string
-    const { content } = req.body
+    const { updates } = req.body
     const notePath = getPathNoteById(id)
-    const oldMeta = await req.state.store.getObjectMeta(notePath)
+
+    if (!updates.length) {
+      throw res.APIError.NOT_SUPPORTED.throw()
+    }
+
+    const {
+      content = '[]',
+      meta: oldMeta,
+    } = await req.state.store.getObjectAndMeta(notePath)
+    const newUpdates = tryJSON<string[]>(content) ?? []
 
     if (oldMeta) {
       oldMeta['date'] = strCompress(new Date().toISOString())
     }
 
-    // Empty content may be a misoperation
-    if (!content || content.trim() === '\\') {
-      await req.state.store.copyObject(notePath, notePath + '.bak', {
-        meta: oldMeta,
-        contentType: 'text/markdown',
-      })
-    }
+    newUpdates.push(...updates)
 
-    await req.state.store.putObject(notePath, content, {
+    await req.state.store.putObject(notePath, newUpdates, {
       contentType: 'text/markdown',
       meta: oldMeta,
     })
diff --git a/yarn.lock b/yarn.lock
index 869c1b829..3df3e5c61 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6437,6 +6437,10 @@ jest-watcher@^27.1.0:
     chalk "^4.0.0"
     jest-util "^27.1.0"
     string-length "^4.0.1"
+isomorphic.js@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/isomorphic.js/-/isomorphic.js-0.2.4.tgz#24ca374163ae54a7ce3b86ce63b701b91aa84969"
+  integrity sha512-Y4NjZceAwaPXctwsHgNsmfuPxR8lJ3f8X7QTAkhltrX4oGIv+eTlgHLXn4tWysC9zGTi929gapnPp+8F8cg7nA==
 
 jest-worker@27.0.0-next.5:
   version "27.0.0-next.5"
@@ -6473,6 +6477,10 @@ jest@^27.1.0:
     "@jest/core" "^27.1.0"
     import-local "^3.0.2"
     jest-cli "^27.1.0"
+js-base64@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.6.1.tgz#555aae398b74694b4037af1f8a5a6209d170efbe"
+  integrity sha512-Frdq2+tRRGLQUIQOgsIGSCd1VePCS2fsddTG5dTCqR0JHgltXWfsxnY0gIXPoMeRmdom6Oyq+UMOFg5suduOjQ==
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
@@ -6713,6 +6721,12 @@ levn@~0.3.0:
   dependencies:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
+lib0@^0.2.34, lib0@^0.2.41, lib0@^0.2.42:
+  version "0.2.42"
+  resolved "https://registry.yarnpkg.com/lib0/-/lib0-0.2.42.tgz#6d8bf1fb8205dec37a953c521c5ee403fd8769b0"
+  integrity sha512-8BNM4MiokEKzMvSxTOC3gnCBisJH+jL67CnSnqzHv3jli3pUvGC8wz+0DQ2YvGr4wVQdb2R2uNNPw9LEpVvJ4Q==
+  dependencies:
+    isomorphic.js "^0.2.4"
 
 lie@3.1.1:
   version "3.1.1"
@@ -10188,6 +10202,19 @@ y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+y-prosemirror@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/y-prosemirror/-/y-prosemirror-1.0.9.tgz#c0b5bf4e2c6620093ba0658c2aca52055346a683"
+  integrity sha512-OM12aPx04lwiIy1IOBidb6ONAof2KFxQE/Gww26SEsMQuA2dibrJkjaMwXwY1KnYY7yOpwbIFRdwecdNXLU9yQ==
+  dependencies:
+    lib0 "^0.2.34"
+
+y-protocols@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/y-protocols/-/y-protocols-1.0.5.tgz#91d574250060b29fcac8f8eb5e276fbad594245e"
+  integrity sha512-Wil92b7cGk712lRHDqS4T90IczF6RkcvCwAD0A2OPg+adKmOe+nOiT/N2hvpQIWS3zfjmtL4CPaH5sIW1Hkm/A==
+  dependencies:
+    lib0 "^0.2.42"
 
 yallist@^4.0.0:
   version "4.0.0"
@@ -10221,6 +10248,12 @@ yargs@^16.0.3:
     string-width "^4.2.0"
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
+yjs@^13.5.12:
+  version "13.5.12"
+  resolved "https://registry.yarnpkg.com/yjs/-/yjs-13.5.12.tgz#7a0cf3119fb368c07243825e989a55de164b3f9c"
+  integrity sha512-/buy1kh8Ls+t733Lgov9hiNxCsjHSCymTuZNahj2hsPNoGbvnSdDmCz9Z4F19Yr1eUAAXQLJF3q7fiBcvPC6Qg==
+  dependencies:
+    lib0 "^0.2.41"
 
 yocto-queue@^0.1.0:
   version "0.1.0"

From b2cdb04190613b460af48f81c11765dd5f9cc8ad Mon Sep 17 00:00:00 2001
From: liqingwei <liqingwei@shimo.im>
Date: Sun, 5 Sep 2021 16:59:10 +0800
Subject: [PATCH 2/7] feat: compatible with old data

---
 components/container/edit-container.tsx |  2 --
 libs/web/editor/y-doc.ts                |  1 -
 libs/web/state/editor.ts                |  3 ++-
 libs/web/state/note.ts                  |  3 ---
 pages/api/notes/[id]/index.ts           | 24 ++++++++++++++++--------
 5 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/components/container/edit-container.tsx b/components/container/edit-container.tsx
index 0dbf6be33..d7f3a4577 100644
--- a/components/container/edit-container.tsx
+++ b/components/container/edit-container.tsx
@@ -40,7 +40,6 @@ export const EditContainer = () => {
         findOrCreateNote(id, {
           id,
           title: id,
-          content: '\n',
           pid: settings.daily_root_id,
         })
       } else if (id === 'new') {
@@ -70,7 +69,6 @@ export const EditContainer = () => {
 
         initNote({
           id,
-          content: '\n',
         })
       }
 
diff --git a/libs/web/editor/y-doc.ts b/libs/web/editor/y-doc.ts
index 28f046988..413f321e4 100644
--- a/libs/web/editor/y-doc.ts
+++ b/libs/web/editor/y-doc.ts
@@ -40,7 +40,6 @@ export const createYDoc = ({
   }
   const onUpdateEditor = (update: Uint8Array) => {
     Y.applyUpdate(editorYDoc, update)
-    // console.log(editorYDoc.getXmlFragment('prosemirror').toJSON())
   }
 
   Y.applyUpdate(editorYDoc, Y.encodeStateAsUpdate(yDoc))
diff --git a/libs/web/state/editor.ts b/libs/web/state/editor.ts
index a8a5f3285..7f5ac1405 100644
--- a/libs/web/state/editor.ts
+++ b/libs/web/state/editor.ts
@@ -61,7 +61,8 @@ const useEditor = (initNote?: NoteModel) => {
     async (data: Partial<NoteModel>) => {
       const isNew = has(router.query, 'new')
 
-      if (isNew) {
+      // need transform to y-doc
+      if (isNew || note?.content) {
         const update = getYDocUpdate({})
         data.updates = update ? [update] : []
       } else if (updates.current?.length > 0) {
diff --git a/libs/web/state/note.ts b/libs/web/state/note.ts
index b48f0448d..5d00be655 100644
--- a/libs/web/state/note.ts
+++ b/libs/web/state/note.ts
@@ -33,7 +33,6 @@ const useNote = (initData?: NoteModel) => {
         return
       }
 
-      result.content = result.content || '\n'
       setNote(result)
       await noteCache.setItem(id, result)
 
@@ -109,7 +108,6 @@ const useNote = (initData?: NoteModel) => {
         return
       }
 
-      result.content = result.content || '\n'
       await noteCache.setItem(result.id, result)
       setNote(result)
       addItem(result)
@@ -131,7 +129,6 @@ const useNote = (initData?: NoteModel) => {
         return
       }
 
-      result.content = result.content || '\n'
       await noteCache.setItem(result.id, result)
       addItem(result)
 
diff --git a/pages/api/notes/[id]/index.ts b/pages/api/notes/[id]/index.ts
index bc5472cd4..32fea97c8 100644
--- a/pages/api/notes/[id]/index.ts
+++ b/pages/api/notes/[id]/index.ts
@@ -22,12 +22,12 @@ export async function getNote(
   }
 
   const jsonMeta = metaToJson(meta)
-
-  const updates = tryJSON<string[]>(content) ?? []
+  const updates = tryJSON<string[]>(content)
 
   return {
     id,
-    updates: [mergeUpdates(updates, sv)],
+    updates: updates ? [mergeUpdates(updates, sv)] : null,
+    content: updates ? null : content,
     ...jsonMeta,
   } as NoteModel
 }
@@ -64,24 +64,32 @@ export default api()
     const id = req.query.id as string
     const { updates } = req.body
     const notePath = getPathNoteById(id)
+    const store = req.state.store
 
     if (!updates.length) {
       throw res.APIError.NOT_SUPPORTED.throw()
     }
 
-    const {
-      content = '[]',
-      meta: oldMeta,
-    } = await req.state.store.getObjectAndMeta(notePath)
+    const { content = '[]', meta: oldMeta } = await store.getObjectAndMeta(
+      notePath
+    )
     const newUpdates = tryJSON<string[]>(content) ?? []
 
+    // backup older object
+    if (!newUpdates.length && content.length) {
+      await store.copyObject(notePath, store.getPath('backup', notePath), {
+        meta: oldMeta,
+        contentType: 'text/markdown',
+      })
+    }
+
     if (oldMeta) {
       oldMeta['date'] = strCompress(new Date().toISOString())
     }
 
     newUpdates.push(...updates)
 
-    await req.state.store.putObject(notePath, newUpdates, {
+    await store.putObject(notePath, newUpdates, {
       contentType: 'text/markdown',
       meta: oldMeta,
     })

From bb473c621346d7252155230a738125edc3ba783c Mon Sep 17 00:00:00 2001
From: liqingwei <liqingwei@shimo.im>
Date: Sun, 5 Sep 2021 23:07:51 +0800
Subject: [PATCH 3/7] feat: add note test

---
 package.json                  |  5 +++
 pages/api/notes/[id]/index.ts |  4 +--
 tests/api/note.test.ts        | 54 +++++++++++++++++++++++++++++++
 tests/api/tree.test.ts        | 20 ------------
 tests/helper.ts               | 18 -----------
 yarn.lock                     | 61 +++++++++++++++++++++++++++++++++--
 6 files changed, 120 insertions(+), 42 deletions(-)
 create mode 100644 tests/api/note.test.ts
 delete mode 100644 tests/api/tree.test.ts
 delete mode 100644 tests/helper.ts

diff --git a/package.json b/package.json
index d9d26b17b..bf94d997c 100644
--- a/package.json
+++ b/package.json
@@ -108,7 +108,12 @@
     "i18n-extract": "^0.6.7",
     "jest": "^27.1.0",
     "lint-staged": "^10.5.4",
+<<<<<<< HEAD
     "next-pwa": "^5.3.1",
+=======
+    "next-pwa": "^5.2.21",
+    "next-test-api-route-handler": "^2.2.1",
+>>>>>>> feat: add note test
     "nightwind": "^1.1.6",
     "postcss": "^8.2.6",
     "prettier": "^2.2.1",
diff --git a/pages/api/notes/[id]/index.ts b/pages/api/notes/[id]/index.ts
index 32fea97c8..f26d1421b 100644
--- a/pages/api/notes/[id]/index.ts
+++ b/pages/api/notes/[id]/index.ts
@@ -61,12 +61,12 @@ export default api()
     res.json(note)
   })
   .post(async (req, res) => {
-    const id = req.query.id as string
+    const id = (req.query ?? {}).id as string
     const { updates } = req.body
     const notePath = getPathNoteById(id)
     const store = req.state.store
 
-    if (!updates.length) {
+    if (!updates?.length) {
       throw res.APIError.NOT_SUPPORTED.throw()
     }
 
diff --git a/tests/api/note.test.ts b/tests/api/note.test.ts
new file mode 100644
index 000000000..b045952a6
--- /dev/null
+++ b/tests/api/note.test.ts
@@ -0,0 +1,54 @@
+import notesHandler from 'pages/api/notes/[id]'
+import { testApiHandler } from 'next-test-api-route-handler'
+import { API_ERROR } from 'libs/server/middlewares/error'
+import { StoreS3 } from 'libs/server/store/providers/s3'
+
+jest.mock('libs/server/store/providers/s3')
+
+describe('/api/notes', () => {
+  it('Update note with content', async () => {
+    await testApiHandler({
+      handler: notesHandler as any,
+      url: '/api/notes/1?id=1',
+      test: async ({ fetch }) => {
+        const res = await fetch({
+          method: 'post',
+          headers: {
+            'content-type': 'application/json',
+          },
+          body: JSON.stringify({ content: 'aaa' }),
+        })
+        expect(res.status).toBe(API_ERROR.NOT_SUPPORTED.status)
+      },
+    })
+  })
+
+  it('Trigger backup when updating old note', async () => {
+    jest
+      .spyOn(StoreS3.prototype, 'getObjectAndMeta')
+      .mockImplementationOnce(async () => {
+        return {
+          content: 'this is note',
+        } as any
+      })
+
+    await testApiHandler({
+      handler: notesHandler as any,
+      url: '/api/notes/1?id=1',
+      test: async ({ fetch }) => {
+        const res = await fetch({
+          method: 'post',
+          headers: {
+            'content-type': 'application/json',
+          },
+          body: JSON.stringify({ updates: ['a', 'b'] }),
+        })
+
+        expect(res.status).toBe(204)
+        expect(jest.spyOn(StoreS3.prototype, 'copyObject')).toHaveBeenCalled()
+      },
+    })
+  })
+
+  it.todo('Incremental update')
+})
diff --git a/tests/api/tree.test.ts b/tests/api/tree.test.ts
deleted file mode 100644
index 4f7c8abe6..000000000
--- a/tests/api/tree.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import treeHandler from 'pages/api/tree'
-import { mockServer } from 'tests/helper'
-
-describe('/api/tree', () => {
-  let app: mockServer
-
-  beforeEach(async () => {
-    app = mockServer(treeHandler)
-  })
-
-  afterEach(() => {
-    app.server.close()
-  })
-
-  test('fetch tree', async () => {
-    const result = await app.request.get('/api/tree').expect(200)
-
-    expect(result.body).toBeDefined()
-  })
-})
diff --git a/tests/helper.ts b/tests/helper.ts
deleted file mode 100644
index ad2b7e371..000000000
--- a/tests/helper.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createServer, IncomingMessage, ServerResponse } from 'http'
-import { ApiRequest, ApiResponse } from 'libs/server/connect'
-import { NextConnect } from 'next-connect'
-import { apiResolver } from 'next/dist/server/api-utils'
-import supertest from 'supertest'
-
-export const mockServer = (handler: NextConnect<ApiRequest, ApiResponse>) => {
-  const requestHandler = (request: IncomingMessage, response: ServerResponse) =>
-    apiResolver(request, response, undefined, handler, {} as any, true)
-  const server = createServer(requestHandler)
-
-  return {
-    server,
-    request: supertest(server),
-  }
-}
-
-export type mockServer = ReturnType<typeof mockServer>
diff --git a/yarn.lock b/yarn.lock
index 3df3e5c61..10fd40f50 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4394,7 +4394,7 @@ debug@2, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4:
+debug@4, debug@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
   integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
@@ -6004,6 +6004,19 @@ isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-unfetch@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz#87341d5f4f7b63843d468438128cb087b7c3e98f"
+  integrity sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==
+  dependencies:
+    node-fetch "^2.6.1"
+    unfetch "^4.2.0"
+
+isomorphic.js@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/isomorphic.js/-/isomorphic.js-0.2.4.tgz#24ca374163ae54a7ce3b86ce63b701b91aa84969"
+  integrity sha512-Y4NjZceAwaPXctwsHgNsmfuPxR8lJ3f8X7QTAkhltrX4oGIv+eTlgHLXn4tWysC9zGTi929gapnPp+8F8cg7nA==
+
 istanbul-lib-coverage@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
@@ -6461,6 +6474,7 @@ jest-worker@^26.2.1:
     supports-color "^7.0.0"
 
 jest-worker@^27.0.6, jest-worker@^27.1.0:
+jest-worker@^27.1.0:
   version "27.1.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.1.0.tgz#65f4a88e37148ed984ba8ca8492d6b376938c0aa"
   integrity sha512-mO4PHb2QWLn9yRXGp7rkvXLAYuxwhq1ZYUo0LoDhg8wqvv4QizP1ZWEJOeolgbEgAWZLIEU0wsku8J+lGWfBhg==
@@ -6482,6 +6496,11 @@ js-base64@^3.6.1:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.6.1.tgz#555aae398b74694b4037af1f8a5a6209d170efbe"
   integrity sha512-Frdq2+tRRGLQUIQOgsIGSCd1VePCS2fsddTG5dTCqR0JHgltXWfsxnY0gIXPoMeRmdom6Oyq+UMOFg5suduOjQ==
 
+js-base64@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.6.1.tgz#555aae398b74694b4037af1f8a5a6209d170efbe"
+  integrity sha512-Frdq2+tRRGLQUIQOgsIGSCd1VePCS2fsddTG5dTCqR0JHgltXWfsxnY0gIXPoMeRmdom6Oyq+UMOFg5suduOjQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -6728,6 +6747,13 @@ lib0@^0.2.34, lib0@^0.2.41, lib0@^0.2.42:
   dependencies:
     isomorphic.js "^0.2.4"
 
+lib0@^0.2.34, lib0@^0.2.41, lib0@^0.2.42:
+  version "0.2.42"
+  resolved "https://registry.yarnpkg.com/lib0/-/lib0-0.2.42.tgz#6d8bf1fb8205dec37a953c521c5ee403fd8769b0"
+  integrity sha512-8BNM4MiokEKzMvSxTOC3gnCBisJH+jL67CnSnqzHv3jli3pUvGC8wz+0DQ2YvGr4wVQdb2R2uNNPw9LEpVvJ4Q==
+  dependencies:
+    isomorphic.js "^0.2.4"
+
 lie@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
@@ -7216,6 +7242,15 @@ next-seo@^4.24.0:
   resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.24.0.tgz#7c0447da00b8574dcda5c6979771a7f6efd24f55"
   integrity sha512-9VQXfXAelhE+hAWzJ4azigQaW3FPX0kU0eYKFQXKsQjgY7AWtukjRGXls0oSIk8khhDJwmCt46EwsO9n5DDW6Q==
 
+next-test-api-route-handler@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/next-test-api-route-handler/-/next-test-api-route-handler-2.2.1.tgz#162e408c745e2e924ec3bae95d210ea1a3d3f927"
+  integrity sha512-IW9zTfHkNwKjeckfY2IoE0PDSzpukCOcChQZ7kiZoMJ5rUOHAp2GYJSVtvrtFmgrItq+mbtVYqusxSkXtJVGAQ==
+  dependencies:
+    debug "^4.3.2"
+    isomorphic-unfetch "^3.1.0"
+    test-listen "^1.1.0"
+
 next-themes@^0.0.14:
   version "0.0.14"
   resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.14.tgz#2b9861990bc453149e23d8e6ef1a25a119e36675"
@@ -7296,7 +7331,7 @@ node-emoji@^1.8.1:
   dependencies:
     lodash.toarray "^4.4.0"
 
-node-fetch@2.6.1:
+node-fetch@2.6.1, node-fetch@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
@@ -9425,6 +9460,11 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
+test-listen@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/test-listen/-/test-listen-1.1.0.tgz#2ba614d96c3bc9157469003027b42a495dd83b6a"
+  integrity sha512-OyEVi981C1sb9NX1xayfgZls3p8QTDRwp06EcgxSgd1kktaENBW8dO15i8v/7Fi15j0IYQctJzk5J+hyEBId2w==
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -9671,6 +9711,11 @@ unbox-primitive@^1.0.1:
     has-symbols "^1.0.2"
     which-boxed-primitive "^1.0.2"
 
+unfetch@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be"
+  integrity sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==
+
 unfurl.js@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/unfurl.js/-/unfurl.js-5.3.0.tgz#f7346ae04e664dc816484f7fe146960a1ae65235"
@@ -10216,6 +10261,11 @@ y-protocols@^1.0.5:
   dependencies:
     lib0 "^0.2.42"
 
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
@@ -10255,6 +10305,13 @@ yjs@^13.5.12:
   dependencies:
     lib0 "^0.2.41"
 
+yjs@^13.5.12:
+  version "13.5.12"
+  resolved "https://registry.yarnpkg.com/yjs/-/yjs-13.5.12.tgz#7a0cf3119fb368c07243825e989a55de164b3f9c"
+  integrity sha512-/buy1kh8Ls+t733Lgov9hiNxCsjHSCymTuZNahj2hsPNoGbvnSdDmCz9Z4F19Yr1eUAAXQLJF3q7fiBcvPC6Qg==
+  dependencies:
+    lib0 "^0.2.41"
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"

From e65693851e81ebeceaa6855f8d98efe94bc76ba0 Mon Sep 17 00:00:00 2001
From: liqingwei <liqingwei@shimo.im>
Date: Tue, 7 Sep 2021 17:05:53 +0800
Subject: [PATCH 4/7] feat: add note test

---
 libs/shared/y-doc.ts          | 46 +++++++++++++++++++++++----
 pages/api/notes/[id]/index.ts | 13 +++++---
 pages/index.tsx               | 12 ++++---
 tests/api/note.test.ts        | 60 ++++++++++++++++++++++++++++++++++-
 tests/y-doc.test.ts           | 23 ++++++++++++++
 5 files changed, 137 insertions(+), 17 deletions(-)
 create mode 100644 tests/y-doc.test.ts

diff --git a/libs/shared/y-doc.ts b/libs/shared/y-doc.ts
index 958a3c5cb..69b3e692c 100644
--- a/libs/shared/y-doc.ts
+++ b/libs/shared/y-doc.ts
@@ -2,19 +2,51 @@ import { fromUint8Array, toUint8Array } from 'js-base64'
 import * as Y from 'yjs'
 
 export const mergeUpdates = (updates: (string | Uint8Array)[], sv?: string) => {
+  // const doc = new Y.Doc()
+
+  // doc.transact(() => {
+  //   updates.forEach((val) =>
+  //     Y.applyUpdate(doc, typeof val === 'string' ? toUint8Array(val) : val)
+  //   )
+  // })
+
+  // const update = sv
+  //   ? Y.encodeStateAsUpdate(doc, toUint8Array(sv))
+  //   : Y.encodeStateAsUpdate(doc)
+
+  // doc.destroy()
+
+  const encodedUpdates = updates.map((val) =>
+    typeof val === 'string' ? toUint8Array(val) : val
+  )
+
+  const update = Y.mergeUpdates(encodedUpdates)
+
+  return fromUint8Array(update)
+}
+
+export const mergeUpdatesToLimit = (updates: string[], limit: number) => {
   const doc = new Y.Doc()
+  const curUpdates = [...updates]
 
   doc.transact(() => {
-    updates.forEach((val) =>
-      Y.applyUpdate(doc, typeof val === 'string' ? toUint8Array(val) : val)
-    )
+    while (curUpdates.length >= limit) {
+      const update = curUpdates.shift()
+
+      if (update) {
+        Y.applyUpdate(
+          doc,
+          typeof update === 'string' ? toUint8Array(update) : update
+        )
+      }
+    }
   })
 
-  const update = sv
-    ? Y.encodeStateAsUpdate(doc, toUint8Array(sv))
-    : Y.encodeStateAsUpdate(doc)
+  if (curUpdates.length < updates.length) {
+    curUpdates.unshift(fromUint8Array(Y.encodeStateAsUpdate(doc)))
+  }
 
   doc.destroy()
 
-  return fromUint8Array(update)
+  return curUpdates
 }
diff --git a/pages/api/notes/[id]/index.ts b/pages/api/notes/[id]/index.ts
index f26d1421b..b6d50b381 100644
--- a/pages/api/notes/[id]/index.ts
+++ b/pages/api/notes/[id]/index.ts
@@ -8,7 +8,7 @@ import { StoreProvider } from 'libs/server/store'
 import { API } from 'libs/server/middlewares/error'
 import { strCompress, tryJSON } from 'libs/shared/str'
 import { ROOT_ID } from 'libs/shared/tree'
-import { mergeUpdates } from 'libs/shared/y-doc'
+import { mergeUpdates, mergeUpdatesToLimit } from 'libs/shared/y-doc'
 
 export async function getNote(
   store: StoreProvider,
@@ -73,10 +73,10 @@ export default api()
     const { content = '[]', meta: oldMeta } = await store.getObjectAndMeta(
       notePath
     )
-    const newUpdates = tryJSON<string[]>(content) ?? []
+    const oldUpdates = tryJSON<string[]>(content) ?? []
 
     // backup older object
-    if (!newUpdates.length && content.length) {
+    if (!oldUpdates.length && content.length) {
       await store.copyObject(notePath, store.getPath('backup', notePath), {
         meta: oldMeta,
         contentType: 'text/markdown',
@@ -87,7 +87,12 @@ export default api()
       oldMeta['date'] = strCompress(new Date().toISOString())
     }
 
-    newUpdates.push(...updates)
+    let newUpdates = [...oldUpdates, ...updates]
+
+    // Trigger a merge every more than 100 updates, to avoid too much data
+    if (newUpdates.length >= 100) {
+      newUpdates = mergeUpdatesToLimit(newUpdates, 50)
+    }
 
     await store.putObject(notePath, newUpdates, {
       contentType: 'text/markdown',
diff --git a/pages/index.tsx b/pages/index.tsx
index 6cc4bb64d..7a5821991 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -26,11 +26,13 @@ const EditNotePage: NextPage<{ tree: TreeModel }> = ({ tree }) => {
     <LayoutMain tree={tree}>
       <div className="flex flex-col h-screen">
         <div className="m-auto text-center flex flex-col items-center">
-          <Link href="//github.com/qingwei-li/notea">
-            <a target="_blank">
-              <img className="w-60 h-60 opacity-10 -mt-40" src="/logo.svg" />
-            </a>
-          </Link>
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="//github.com/qingwei-li/notea"
+          >
+            <img className="w-60 h-60 opacity-10 -mt-40" src="/logo.svg" />
+          </a>
         </div>
       </div>
     </LayoutMain>
diff --git a/tests/api/note.test.ts b/tests/api/note.test.ts
index b045952a6..3d8e386b8 100644
--- a/tests/api/note.test.ts
+++ b/tests/api/note.test.ts
@@ -6,6 +6,10 @@ import { StoreS3 } from 'libs/server/store/providers/s3'
 jest.mock('libs/server/store/providers/s3')
 
 describe('/api/notes', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
   it('Update note with content', async () => {
     await testApiHandler({
       handler: notesHandler as any,
@@ -50,5 +54,59 @@ describe('/api/notes', () => {
     })
   })
 
-  it.todo('Incremental update')
+  it('Incremental update', async () => {
+    jest
+      .spyOn(StoreS3.prototype, 'getObjectAndMeta')
+      .mockImplementationOnce(async () => {
+        return {
+          content: JSON.stringify(['1']),
+        } as any
+      })
+
+    await testApiHandler({
+      handler: notesHandler as any,
+      url: '/api/notes/1?id=1',
+      test: async ({ fetch }) => {
+        await fetch({
+          method: 'post',
+          headers: {
+            'content-type': 'application/json',
+          },
+          body: JSON.stringify({ updates: ['2', '3'] }),
+        })
+        expect(
+          jest.spyOn(StoreS3.prototype, 'putObject').mock.calls[0][1]
+        ).toEqual(['1', '2', '3'])
+      },
+    })
+  })
+
+  it('Trigger merge when the number of updates exceeds the limit', async () => {
+    jest
+      .spyOn(StoreS3.prototype, 'getObjectAndMeta')
+      .mockImplementationOnce(async () => {
+        return {
+          content: JSON.stringify(new Array(50).fill('AAA=')),
+        } as any
+      })
+
+    await testApiHandler({
+      handler: notesHandler as any,
+      url: '/api/notes/1?id=1',
+      test: async ({ fetch }) => {
+        await fetch({
+          method: 'post',
+          headers: {
+            'content-type': 'application/json',
+          },
+          body: JSON.stringify({
+            updates: new Array(60).fill('AAA='),
+          }),
+        })
+        expect(
+          jest.spyOn(StoreS3.prototype, 'putObject').mock.calls[0][1]
+        ).toHaveLength(50)
+      },
+    })
+  })
 })
diff --git a/tests/y-doc.test.ts b/tests/y-doc.test.ts
new file mode 100644
index 000000000..be5c1072f
--- /dev/null
+++ b/tests/y-doc.test.ts
@@ -0,0 +1,23 @@
+import { mergeUpdates, mergeUpdatesToLimit } from 'libs/shared/y-doc'
+
+describe('#mergeUpdatesToLimit', () => {
+  it('should merge updates to limit', () => {
+    expect(mergeUpdatesToLimit(new Array(10).fill('AAA='), 5)).toHaveLength(5)
+  })
+
+  it(' should return the same array if there is no need to merge', () => {
+    expect(mergeUpdatesToLimit(new Array(5).fill('AAA='), 10)).toHaveLength(5)
+  })
+
+  it('should returns an array of strings', () => {
+    expect(mergeUpdatesToLimit(new Array(10).fill('AAA='), 5)).toEqual(
+      new Array(5).fill('AAA=')
+    )
+  })
+})
+
+describe('#mergeUpdates', () => {
+  it('should merge updates', () => {
+    expect(mergeUpdates(new Array(10).fill('AAA='))).toEqual('AAA=')
+  })
+})

From 4753f9e30ad87f679609a4384069e9429d904318 Mon Sep 17 00:00:00 2001
From: liqingwei <liqingwei@shimo.im>
Date: Sat, 11 Sep 2021 20:11:31 +0800
Subject: [PATCH 5/7] fix: cache and search

---
 components/editor/extensions/y-sync.ts |  3 +-
 components/portal/preview-modal.tsx    |  6 +--
 libs/shared/note.ts                    | 15 ++++++
 libs/shared/y-doc.ts                   | 26 ++++------
 libs/web/api/fetcher.ts                |  2 +-
 libs/web/api/note.ts                   |  9 +++-
 libs/web/cache/note.ts                 | 34 ++++++++-----
 libs/web/editor/y-doc.ts               | 16 +++++++
 libs/web/state/editor.ts               | 66 ++++++++++++++++++--------
 libs/web/state/note.ts                 | 11 ++++-
 libs/web/state/tree.ts                 |  6 +--
 libs/web/utils/search.ts               |  1 +
 package.json                           |  6 +--
 yarn.lock                              | 51 ++++++--------------
 14 files changed, 152 insertions(+), 100 deletions(-)

diff --git a/components/editor/extensions/y-sync.ts b/components/editor/extensions/y-sync.ts
index f6a5eb691..2ec4b05c2 100644
--- a/components/editor/extensions/y-sync.ts
+++ b/components/editor/extensions/y-sync.ts
@@ -2,6 +2,7 @@ import { Extension } from 'rich-markdown-editor'
 import { ySyncPlugin } from 'y-prosemirror'
 import * as Y from 'yjs'
 
+export const YJS_DOC_KEY = 'prosemirror'
 export default class YSync extends Extension {
   get name() {
     return 'y-sync'
@@ -18,7 +19,7 @@ export default class YSync extends Extension {
       this.yDoc.destroy()
     }
     this.yDoc = new Y.Doc()
-    const type = this.yDoc.get('prosemirror', Y.XmlFragment)
+    const type = this.yDoc.get(YJS_DOC_KEY, Y.XmlFragment)
 
     return [ySyncPlugin(type)]
   }
diff --git a/components/portal/preview-modal.tsx b/components/portal/preview-modal.tsx
index dc8983428..168427d32 100644
--- a/components/portal/preview-modal.tsx
+++ b/components/portal/preview-modal.tsx
@@ -16,14 +16,14 @@ const PreviewModal: FC = () => {
     preview: { anchor, open, close, visible, data, setAnchor },
   } = PortalState.useContainer()
   const router = useRouter()
-  const { fetch: fetchNote } = useNoteAPI()
+  const { fetch: fetchNoteAPI } = useNoteAPI()
   const [note, setNote] = useState<NoteCacheItem>()
 
   const findNote = useCallback(
     async (id: string) => {
-      setNote(await fetchNote(id))
+      setNote(await fetchNoteAPI(id))
     },
-    [fetchNote]
+    [fetchNoteAPI]
   )
 
   const gotoLink = useCallback(() => {
diff --git a/libs/shared/note.ts b/libs/shared/note.ts
index 434a37490..1a8c6e502 100644
--- a/libs/shared/note.ts
+++ b/libs/shared/note.ts
@@ -4,6 +4,9 @@ export interface NoteModel {
   id: string
   title: string
   pid?: string
+  /**
+   * @deprecated
+   */
   content?: string
   pic?: string
   date?: string
@@ -22,3 +25,15 @@ export const isNoteLink = (str: string) => {
 }
 
 export const NOTE_ID_REGEXP = '[A-Za-z0-9_-]+'
+
+export const extractNoteLink = (str: string) => {
+  const regexp = new RegExp(`href="/(${NOTE_ID_REGEXP})"`, 'g')
+  let match
+  const links = []
+
+  while ((match = regexp.exec(str)) !== null) {
+    links.push(match[1])
+  }
+
+  return links
+}
diff --git a/libs/shared/y-doc.ts b/libs/shared/y-doc.ts
index 69b3e692c..782860c5f 100644
--- a/libs/shared/y-doc.ts
+++ b/libs/shared/y-doc.ts
@@ -2,25 +2,19 @@ import { fromUint8Array, toUint8Array } from 'js-base64'
 import * as Y from 'yjs'
 
 export const mergeUpdates = (updates: (string | Uint8Array)[], sv?: string) => {
-  // const doc = new Y.Doc()
-
-  // doc.transact(() => {
-  //   updates.forEach((val) =>
-  //     Y.applyUpdate(doc, typeof val === 'string' ? toUint8Array(val) : val)
-  //   )
-  // })
-
-  // const update = sv
-  //   ? Y.encodeStateAsUpdate(doc, toUint8Array(sv))
-  //   : Y.encodeStateAsUpdate(doc)
+  const doc = new Y.Doc()
 
-  // doc.destroy()
+  doc.transact(() => {
+    updates.forEach((val) =>
+      Y.applyUpdate(doc, typeof val === 'string' ? toUint8Array(val) : val)
+    )
+  })
 
-  const encodedUpdates = updates.map((val) =>
-    typeof val === 'string' ? toUint8Array(val) : val
-  )
+  const update = sv
+    ? Y.diffUpdate(Y.encodeStateAsUpdate(doc), toUint8Array(sv))
+    : Y.encodeStateAsUpdate(doc)
 
-  const update = Y.mergeUpdates(encodedUpdates)
+  doc.destroy()
 
   return fromUint8Array(update)
 }
diff --git a/libs/web/api/fetcher.ts b/libs/web/api/fetcher.ts
index b5c58decf..06793dfc6 100644
--- a/libs/web/api/fetcher.ts
+++ b/libs/web/api/fetcher.ts
@@ -59,7 +59,7 @@ export default function useFetcher() {
         return response.json()
       } catch (e) {
         if (!controller?.signal.aborted) {
-          setError(e)
+          setError(e as any)
         }
       } finally {
         setLoading(false)
diff --git a/libs/web/api/note.ts b/libs/web/api/note.ts
index e7e3d78d6..73a769e19 100644
--- a/libs/web/api/note.ts
+++ b/libs/web/api/note.ts
@@ -1,4 +1,5 @@
 import { NoteModel } from 'libs/shared/note'
+import { encode } from 'qss'
 import { useCallback } from 'react'
 import noteCache from '../cache/note'
 import useFetcher from './fetcher'
@@ -7,10 +8,14 @@ export default function useNoteAPI() {
   const { loading, request, abort, error } = useFetcher()
 
   const find = useCallback(
-    async (id: string) => {
+    async (id: string, params?: { sv: string }) => {
+      let qs = ''
+      if (params) {
+        qs = '?' + encode(params)
+      }
       return request<null, NoteModel>({
         method: 'GET',
-        url: `/api/notes/${id}`,
+        url: `/api/notes/${id}` + qs,
       })
     },
     [request]
diff --git a/libs/web/cache/note.ts b/libs/web/cache/note.ts
index a4d8ed542..2b609e45f 100644
--- a/libs/web/cache/note.ts
+++ b/libs/web/cache/note.ts
@@ -1,9 +1,10 @@
 import { TreeModel } from 'libs/shared/tree'
 import { noteCacheInstance, NoteCacheItem } from 'libs/web/cache'
-import { isNoteLink, NoteModel } from 'libs/shared/note'
+import { extractNoteLink, NoteModel } from 'libs/shared/note'
 import { keys, pull } from 'lodash'
-import { removeMarkdown } from '../utils/markdown'
-import markdownLinkExtractor from 'markdown-link-extractor'
+import { mergeUpdates } from 'libs/shared/y-doc'
+import { getXML } from '../editor/y-doc'
+import { striptags } from 'striptags'
 
 /**
  * 清除本地存储中未使用的 note
@@ -23,18 +24,20 @@ async function getItem(id: string) {
 }
 
 async function setItem(id: string, note: NoteModel) {
-  const extractorLinks = markdownLinkExtractor(note.content ?? '', false)
-  const linkIds: string[] = []
-  if (Array.isArray(extractorLinks) && extractorLinks.length) {
-    extractorLinks.forEach((link) => {
-      if (isNoteLink(link)) {
-        linkIds.push(link.slice(1))
-      }
-    })
+  const local = await getItem(id)
+  if (local) {
+    note.updates = [
+      mergeUpdates([...(local.updates ?? []), ...(note.updates ?? [])]),
+    ]
   }
+
+  const xml = getXML(note.updates)
+  const linkIds = extractNoteLink(xml)
+  const rawContent = striptags(xml)
+
   return noteCacheInstance.setItem<NoteCacheItem>(id, {
     ...note,
-    rawContent: removeMarkdown(note.content),
+    rawContent,
     linkIds,
   })
 }
@@ -46,9 +49,16 @@ async function mutateItem(id: string, body: Partial<NoteModel>) {
     throw new Error('not found note cache:' + id)
   }
 
+  const updates = note.updates ?? []
+
+  if (body.updates) {
+    updates.push(...body.updates)
+  }
+
   await setItem(id, {
     ...note,
     ...body,
+    updates,
   })
 }
 
diff --git a/libs/web/editor/y-doc.ts b/libs/web/editor/y-doc.ts
index 413f321e4..edfe28d3b 100644
--- a/libs/web/editor/y-doc.ts
+++ b/libs/web/editor/y-doc.ts
@@ -1,6 +1,7 @@
 import * as Y from 'yjs'
 import { toUint8Array, fromUint8Array } from 'js-base64'
 import { prosemirrorToYDoc } from 'y-prosemirror'
+import { YJS_DOC_KEY } from 'components/editor/extensions/y-sync'
 
 const yDocMap = new Map<number, Y.Doc>()
 
@@ -93,3 +94,18 @@ export const getYDocUpdate = ({ panelId = 0 }: { panelId?: number }) => {
 const getDecodedUpdates = (encodedUpdates: string[]) => {
   return encodedUpdates.map(toUint8Array)
 }
+
+export const getDocStateVector = (updates: string[]) => {
+  return fromUint8Array(
+    Y.encodeStateVectorFromUpdate(Y.mergeUpdates(getDecodedUpdates(updates)))
+  )
+}
+
+export const getXML = (updates: string[] = []) => {
+  const update = Y.mergeUpdates(getDecodedUpdates(updates))
+  const doc = new Y.Doc()
+
+  Y.applyUpdate(doc, update)
+
+  return doc.getXmlFragment(YJS_DOC_KEY).toJSON() as string
+}
diff --git a/libs/web/state/editor.ts b/libs/web/state/editor.ts
index 7f5ac1405..60c232885 100644
--- a/libs/web/state/editor.ts
+++ b/libs/web/state/editor.ts
@@ -45,6 +45,8 @@ const useEditor = (initNote?: NoteModel) => {
     createNoteWithTitle,
     updateNote,
     createNote,
+    fetchNote,
+    localDocState,
     note: noteProp,
   } = NoteState.useContainer()
   const note = initNote ?? noteProp
@@ -173,31 +175,22 @@ const useEditor = (initNote?: NoteModel) => {
     setBackLinks(linkNotes)
   }, [note?.id])
 
-  // Now yjs takes over the doc, skip this event during initialization
-  const firstRef = useRef(false)
-  const onEditorChange = useCallback(
-    (value: () => string): void => {
-      const val = value()
-      if (val === '\\\n' && !firstRef.current) {
-        firstRef.current = true
-        return
-      }
-      onNoteChange.callback({ content: val })
-    },
-    [onNoteChange]
-  )
-
   const onEditorUpdate = (update: Uint8Array) => {
     updates.current.push(update)
     onNoteChange.callback({})
   }
 
-  useEffect(() => {
-    if (!note?.id) return
-
+  const getYDoc = () => {
     const { yDoc } = editorEl.current?.extensions.extensions.find(
       (ext) => ext.name === 'y-sync'
     ) as YSync
+    return yDoc
+  }
+
+  const setEditorDoc = async (note?: NoteModel, yDoc?: YSync['yDoc']) => {
+    if (!yDoc || !note) {
+      return
+    }
 
     createYDoc({
       onUpdate: onEditorUpdate,
@@ -207,8 +200,44 @@ const useEditor = (initNote?: NoteModel) => {
         : undefined,
       noteUpdates: note?.updates,
     })
+  }
+
+  const fetchCurrentNote = async () => {
+    if (!note?.id) {
+      return
+    }
+
+    const yDoc = getYDoc()
+
+    if (!yDoc) {
+      return
+    }
+
+    const newNote = await fetchNote(note.id)
+
+    setEditorDoc(newNote, yDoc)
+  }
+
+  useEffect(() => {
+    window.addEventListener('focus', fetchCurrentNote)
+    return () => {
+      window.removeEventListener('focus', fetchCurrentNote)
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [note?.id])
+  }, [])
+
+  useEffect(() => {
+    const yDoc = getYDoc()
+    createYDoc({
+      onUpdate: onEditorUpdate,
+      editorYDoc: yDoc,
+      node: note?.content
+        ? editorEl.current?.createDocument(note.content)
+        : undefined,
+      noteUpdates: localDocState,
+    })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [localDocState])
 
   return {
     onCreateLink,
@@ -217,7 +246,6 @@ const useEditor = (initNote?: NoteModel) => {
     onUploadImage,
     onHoverLink,
     getBackLinks,
-    onEditorChange,
     onNoteChange,
     backlinks,
     editorEl,
diff --git a/libs/web/state/note.ts b/libs/web/state/note.ts
index 5d00be655..9e4b9b6c5 100644
--- a/libs/web/state/note.ts
+++ b/libs/web/state/note.ts
@@ -7,8 +7,10 @@ import noteCache from '../cache/note'
 import { NoteModel } from 'libs/shared/note'
 import { useToast } from '../hooks/use-toast'
 import { isEmpty, map } from 'lodash'
+import { getDocStateVector } from '../editor/y-doc'
 
 const useNote = (initData?: NoteModel) => {
+  const [localDocState, setLocalDocState] = useState<string[]>()
   const [note, setNote] = useState<NoteModel | undefined>(initData)
   const { find, abort: abortFindNote } = useNoteAPI()
   const { create, error: createError } = useNoteAPI()
@@ -21,13 +23,19 @@ const useNote = (initData?: NoteModel) => {
   } = NoteTreeState.useContainer()
   const toast = useToast()
 
+  // fetch current note
   const fetchNote = useCallback(
     async (id: string) => {
       const cache = await noteCache.getItem(id)
       if (cache) {
         setNote(cache)
+        setLocalDocState(cache.updates)
       }
-      const result = await find(id)
+      const params = {} as { sv: string }
+      if (cache?.updates) {
+        params.sv = getDocStateVector(cache.updates)
+      }
+      const result = await find(id, params)
 
       if (!result) {
         return
@@ -194,6 +202,7 @@ const useNote = (initData?: NoteModel) => {
 
   return {
     note,
+    localDocState,
     fetchNote,
     abortFindNote,
     createNote,
diff --git a/libs/web/state/tree.ts b/libs/web/state/tree.ts
index 48810ee18..c41e96cb7 100644
--- a/libs/web/state/tree.ts
+++ b/libs/web/state/tree.ts
@@ -23,7 +23,7 @@ const useNoteTree = (initData: TreeModel = DEFAULT_TREE) => {
   const { mutate, loading, fetch: fetchTree } = useTreeAPI()
   const [tree, setTree] = useState<TreeModel>(initData)
   const [initLoaded, setInitLoaded] = useState<boolean>(false)
-  const { fetch: fetchNote } = useNoteAPI()
+  const { fetch: fetchNoteAPI } = useNoteAPI()
   const treeRef = useRef(tree)
   const toast = useToast()
 
@@ -35,13 +35,13 @@ const useNoteTree = (initData: TreeModel = DEFAULT_TREE) => {
     async (tree: TreeModel) => {
       await Promise.all(
         map(tree.items, async (item) => {
-          item.data = await fetchNote(item.id)
+          item.data = await fetchNoteAPI(item.id)
         })
       )
 
       return tree
     },
-    [fetchNote]
+    [fetchNoteAPI]
   )
 
   const initTree = useCallback(async () => {
diff --git a/libs/web/utils/search.ts b/libs/web/utils/search.ts
index 76a4ce15b..9a40e04e5 100644
--- a/libs/web/utils/search.ts
+++ b/libs/web/utils/search.ts
@@ -13,6 +13,7 @@ export async function searchNote(keyword: string, deleted: NOTE_DELETED) {
 
   await noteCache.iterate<NoteCacheItem, void>((note) => {
     if (note.deleted !== deleted) return
+
     if (re.test(note.rawContent || '') || re.test(note.title)) {
       data.push(note)
     }
diff --git a/package.json b/package.json
index bf94d997c..60ab9d891 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,6 @@
     "localforage": "^1.9.0",
     "lodash": "^4.17.21",
     "lzutf8": "^0.6.0",
-    "markdown-link-extractor": "^1.3.0",
     "md5": "^2.3.0",
     "minio": "^7.0.18",
     "nanoid": "^3.1.22",
@@ -68,6 +67,7 @@
     "remove-markdown": "^0.3.0",
     "rich-markdown-editor": "^11.17.4-0",
     "rosetta": "^1.1.0",
+    "striptags": "^4.0.0-alpha.2",
     "styled-components": "^5.2.1",
     "ua-parser-js": "^0.7.24",
     "unfurl.js": "^5.3.0",
@@ -108,12 +108,8 @@
     "i18n-extract": "^0.6.7",
     "jest": "^27.1.0",
     "lint-staged": "^10.5.4",
-<<<<<<< HEAD
     "next-pwa": "^5.3.1",
-=======
-    "next-pwa": "^5.2.21",
     "next-test-api-route-handler": "^2.2.1",
->>>>>>> feat: add note test
     "nightwind": "^1.1.6",
     "postcss": "^8.2.6",
     "prettier": "^2.2.1",
diff --git a/yarn.lock b/yarn.lock
index 10fd40f50..6aee8e3d8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6450,10 +6450,6 @@ jest-watcher@^27.1.0:
     chalk "^4.0.0"
     jest-util "^27.1.0"
     string-length "^4.0.1"
-isomorphic.js@^0.2.4:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/isomorphic.js/-/isomorphic.js-0.2.4.tgz#24ca374163ae54a7ce3b86ce63b701b91aa84969"
-  integrity sha512-Y4NjZceAwaPXctwsHgNsmfuPxR8lJ3f8X7QTAkhltrX4oGIv+eTlgHLXn4tWysC9zGTi929gapnPp+8F8cg7nA==
 
 jest-worker@27.0.0-next.5:
   version "27.0.0-next.5"
@@ -6473,7 +6469,15 @@ jest-worker@^26.2.1:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jest-worker@^27.0.6, jest-worker@^27.1.0:
+jest-worker@^27.0.6:
+  version "27.1.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.1.1.tgz#eb5f05c4657fdcb702c36c48b20d785bd4599378"
+  integrity sha512-XJKCL7tu+362IUYTWvw8+3S75U7qMiYiRU6u5yqscB48bTvzwN6i8L/7wVTXiFLwkRsxARNM7TISnTvcgv9hxA==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
 jest-worker@^27.1.0:
   version "27.1.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.1.0.tgz#65f4a88e37148ed984ba8ca8492d6b376938c0aa"
@@ -6491,10 +6495,6 @@ jest@^27.1.0:
     "@jest/core" "^27.1.0"
     import-local "^3.0.2"
     jest-cli "^27.1.0"
-js-base64@^3.6.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.6.1.tgz#555aae398b74694b4037af1f8a5a6209d170efbe"
-  integrity sha512-Frdq2+tRRGLQUIQOgsIGSCd1VePCS2fsddTG5dTCqR0JHgltXWfsxnY0gIXPoMeRmdom6Oyq+UMOFg5suduOjQ==
 
 js-base64@^3.6.1:
   version "3.6.1"
@@ -6740,12 +6740,6 @@ levn@~0.3.0:
   dependencies:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
-lib0@^0.2.34, lib0@^0.2.41, lib0@^0.2.42:
-  version "0.2.42"
-  resolved "https://registry.yarnpkg.com/lib0/-/lib0-0.2.42.tgz#6d8bf1fb8205dec37a953c521c5ee403fd8769b0"
-  integrity sha512-8BNM4MiokEKzMvSxTOC3gnCBisJH+jL67CnSnqzHv3jli3pUvGC8wz+0DQ2YvGr4wVQdb2R2uNNPw9LEpVvJ4Q==
-  dependencies:
-    isomorphic.js "^0.2.4"
 
 lib0@^0.2.34, lib0@^0.2.41, lib0@^0.2.42:
   version "0.2.42"
@@ -7005,18 +6999,6 @@ markdown-it@^10.0.0:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
-markdown-link-extractor@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/markdown-link-extractor/-/markdown-link-extractor-1.3.0.tgz#a11954f683134f23edecd74ba35ae7bf7ad3d874"
-  integrity sha512-1qXoYqhsU5qgWtUF9HQlBF82jRrakENh+7nmPUxoMJw13kf92jzb72EchrSsw5vdqbDLJurkpNL50xLFRhjmbw==
-  dependencies:
-    marked "^2.0.5"
-
-marked@^2.0.5:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-2.1.3.tgz#bd017cef6431724fd4b27e0657f5ceb14bff3753"
-  integrity sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==
-
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -9216,6 +9198,11 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+striptags@^4.0.0-alpha.2:
+  version "4.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/striptags/-/striptags-4.0.0-alpha.2.tgz#e911eb286a3ca5d0c1d53a8449a1a9e933b1305c"
+  integrity sha512-KM2d9idEHtI4961q0UC67uIoNAuRpKh4Asjkjhw/QzXPwQlgEOcmBuP+pw2fTZpqnL2VYc7wUX0xJN/zKvXwWQ==
+
 styled-components@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a"
@@ -10243,10 +10230,6 @@ xtend@^4.0.0, xtend@^4.0.2:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
-y18n@^5.0.5:
-  version "5.0.8"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
-  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 y-prosemirror@^1.0.9:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/y-prosemirror/-/y-prosemirror-1.0.9.tgz#c0b5bf4e2c6620093ba0658c2aca52055346a683"
@@ -10298,12 +10281,6 @@ yargs@^16.0.3:
     string-width "^4.2.0"
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
-yjs@^13.5.12:
-  version "13.5.12"
-  resolved "https://registry.yarnpkg.com/yjs/-/yjs-13.5.12.tgz#7a0cf3119fb368c07243825e989a55de164b3f9c"
-  integrity sha512-/buy1kh8Ls+t733Lgov9hiNxCsjHSCymTuZNahj2hsPNoGbvnSdDmCz9Z4F19Yr1eUAAXQLJF3q7fiBcvPC6Qg==
-  dependencies:
-    lib0 "^0.2.41"
 
 yjs@^13.5.12:
   version "13.5.12"

From ada5cecf67aa6dd829d3af5fdc8ad9b2510aac01 Mon Sep 17 00:00:00 2001
From: liqingwei <liqingwei@shimo.im>
Date: Sat, 11 Sep 2021 21:01:52 +0800
Subject: [PATCH 6/7] chore: cleaned code

---
 pages/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 7a5821991..9fabe99a7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,7 +5,6 @@ import { TreeModel } from 'libs/shared/tree'
 import { useSession } from 'libs/server/middlewares/session'
 import { applySettings } from 'libs/server/middlewares/settings'
 import { applyAuth, applyRedirectLogin } from 'libs/server/middlewares/auth'
-import Link from 'next/link'
 import UIState from 'libs/web/state/ui'
 import Router from 'next/router'
 import { useEffect } from 'react'

From 30b1cd9f9dc2b6abb8e2e9a73c923ac8ee15169e Mon Sep 17 00:00:00 2001
From: liqingwei <liqingwei@shimo.im>
Date: Sun, 12 Sep 2021 13:23:45 +0800
Subject: [PATCH 7/7] fix: create new note

---
 components/container/edit-container.tsx |  9 +++-
 libs/web/state/editor.ts                | 59 ++++++++++++++-----------
 libs/web/state/note.ts                  |  5 +++
 3 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/components/container/edit-container.tsx b/components/container/edit-container.tsx
index d7f3a4577..2c151a763 100644
--- a/components/container/edit-container.tsx
+++ b/components/container/edit-container.tsx
@@ -24,6 +24,7 @@ export const EditContainer = () => {
     abortFindNote,
     findOrCreateNote,
     initNote,
+    resetLocalDocState,
     note,
   } = NoteState.useContainer()
   const { query } = useRouter()
@@ -42,10 +43,13 @@ export const EditContainer = () => {
           title: id,
           pid: settings.daily_root_id,
         })
+        // you can create a note via `/new`
       } else if (id === 'new') {
         const url = `/${genNewId()}?new` + (pid ? `&pid=${pid}` : '')
 
         router.replace(url, undefined, { shallow: true })
+        resetLocalDocState()
+        // fetch note by id
       } else if (id && !isNew) {
         try {
           const result = await fetchNote(id)
@@ -61,6 +65,7 @@ export const EditContainer = () => {
             }
           }
         }
+        // default
       } else {
         if (await noteCache.getItem(id)) {
           router.push(`/${id}`, undefined, { shallow: true })
@@ -85,6 +90,7 @@ export const EditContainer = () => {
       settings.daily_root_id,
       genNewId,
       pid,
+      resetLocalDocState,
       fetchNote,
       toast,
       initNote,
@@ -95,7 +101,8 @@ export const EditContainer = () => {
   useEffect(() => {
     abortFindNote()
     loadNoteById(id)
-  }, [loadNoteById, abortFindNote, id])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id])
 
   useEffect(() => {
     updateTitle(note?.title)
diff --git a/libs/web/state/editor.ts b/libs/web/state/editor.ts
index 60c232885..9ef4c26b7 100644
--- a/libs/web/state/editor.ts
+++ b/libs/web/state/editor.ts
@@ -6,6 +6,7 @@ import {
   useState,
   useRef,
   useEffect,
+  useMemo,
 } from 'react'
 import { searchNote, searchRangeText } from 'libs/web/utils/search'
 import useFetcher from 'libs/web/api/fetcher'
@@ -47,6 +48,7 @@ const useEditor = (initNote?: NoteModel) => {
     createNote,
     fetchNote,
     localDocState,
+    resetLocalDocState,
     note: noteProp,
   } = NoteState.useContainer()
   const note = initNote ?? noteProp
@@ -58,11 +60,10 @@ const useEditor = (initNote?: NoteModel) => {
   const toast = useToast()
   const editorEl = useRef<MarkdownEditor>(null)
   const updates = useRef<Uint8Array[]>([])
+  const isNew = useMemo(() => has(router.query, 'new'), [router.query])
 
   const onNoteChange = useDebouncedCallback(
     async (data: Partial<NoteModel>) => {
-      const isNew = has(router.query, 'new')
-
       // need transform to y-doc
       if (isNew || note?.content) {
         const update = getYDocUpdate({})
@@ -163,7 +164,6 @@ const useEditor = (initNote?: NoteModel) => {
   const [backlinks, setBackLinks] = useState<NoteCacheItem[]>()
 
   const getBackLinks = useCallback(async () => {
-    console.log(note?.id)
     const linkNotes: NoteCacheItem[] = []
     if (!note?.id) return linkNotes
     setBackLinks([])
@@ -175,10 +175,13 @@ const useEditor = (initNote?: NoteModel) => {
     setBackLinks(linkNotes)
   }, [note?.id])
 
-  const onEditorUpdate = (update: Uint8Array) => {
-    updates.current.push(update)
-    onNoteChange.callback({})
-  }
+  const onEditorUpdate = useCallback(
+    (update: Uint8Array) => {
+      updates.current.push(update)
+      onNoteChange.callback({})
+    },
+    [onNoteChange]
+  )
 
   const getYDoc = () => {
     const { yDoc } = editorEl.current?.extensions.extensions.find(
@@ -187,23 +190,26 @@ const useEditor = (initNote?: NoteModel) => {
     return yDoc
   }
 
-  const setEditorDoc = async (note?: NoteModel, yDoc?: YSync['yDoc']) => {
-    if (!yDoc || !note) {
-      return
-    }
+  const setEditorDoc = useCallback(
+    async (note?: NoteModel, yDoc?: YSync['yDoc']) => {
+      if (!yDoc || !note) {
+        return
+      }
 
-    createYDoc({
-      onUpdate: onEditorUpdate,
-      editorYDoc: yDoc,
-      node: note?.content
-        ? editorEl.current?.createDocument(note.content)
-        : undefined,
-      noteUpdates: note?.updates,
-    })
-  }
+      createYDoc({
+        onUpdate: onEditorUpdate,
+        editorYDoc: yDoc,
+        node: note?.content
+          ? editorEl.current?.createDocument(note.content)
+          : undefined,
+        noteUpdates: note?.updates,
+      })
+    },
+    [onEditorUpdate]
+  )
 
-  const fetchCurrentNote = async () => {
-    if (!note?.id) {
+  const fetchCurrentNote = useCallback(async () => {
+    if (!note?.id || isNew) {
       return
     }
 
@@ -216,18 +222,19 @@ const useEditor = (initNote?: NoteModel) => {
     const newNote = await fetchNote(note.id)
 
     setEditorDoc(newNote, yDoc)
-  }
+  }, [fetchNote, isNew, note?.id, setEditorDoc])
 
   useEffect(() => {
     window.addEventListener('focus', fetchCurrentNote)
     return () => {
       window.removeEventListener('focus', fetchCurrentNote)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [fetchCurrentNote])
 
+  // Initialize editor doc
   useEffect(() => {
     const yDoc = getYDoc()
+
     createYDoc({
       onUpdate: onEditorUpdate,
       editorYDoc: yDoc,
@@ -236,7 +243,7 @@ const useEditor = (initNote?: NoteModel) => {
         : undefined,
       noteUpdates: localDocState,
     })
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [localDocState])
 
   return {
diff --git a/libs/web/state/note.ts b/libs/web/state/note.ts
index 9e4b9b6c5..0b6b16f22 100644
--- a/libs/web/state/note.ts
+++ b/libs/web/state/note.ts
@@ -200,9 +200,14 @@ const useNote = (initData?: NoteModel) => {
     [createNote, fetchNote]
   )
 
+  const resetLocalDocState = () => {
+    setLocalDocState([])
+  }
+
   return {
     note,
     localDocState,
+    resetLocalDocState,
     fetchNote,
     abortFindNote,
     createNote,