try another way to cache node views

packages/core/src/NodeView.ts

@@ -4,6 +4,7 @@ import { Node as ProseMirrorNode } from 'prosemirror-model'
 import { Editor as CoreEditor } from './Editor'
 import { Node } from './Node'
 import isiOS from './utilities/isiOS'
+import minMax from './utilities/minMax'
 import { NodeViewRendererProps } from './types'
 import { NodeViewCacheItem } from './NodeViewCache'
 
@@ -56,46 +57,89 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
     this.getPos = props.getPos
     this.position = this.getPos()
 
-    const cache = this.editor.nodeViewCache.findNodeAtPosition(this.node, this.position)
+    // console.log({
+    //   cache: this.editor.nodeViewCache.data,
+    // })
 
-    if (cache) {
+    const maybeReplace = this.editor.nodeViewCache.data.find(item => {
-      cache.instance.getPos = this.getPos
+      const position = minMax(item.instance.getPos(), 0, this.editor.state.doc.content.size)
-      return cache.instance
+
+      // console.log('maybe pos', position, this.editor.state.doc.resolve(position))
+
+      if (position) {
+        console.log({
+          // sameNode: this.editor.state.doc.nodeAt(position) === item.instance.node,
+          // sameMarkup: this.editor.state.doc.nodeAt(position)?.sameMarkup(item.instance.node),
+          position,
+          same: item.instance.node === this.node,
+          sameM: item.instance.node.sameMarkup(this.node),
+        })
       }
 
-    this.editor.on('beforeUpdateState', this.onBeforeUpdateState)
+      return item.instance.node === this.node
+        && (!position || (this.editor.state.doc.nodeAt(position) !== item.instance.node && !this.editor.state.doc.nodeAt(position)?.sameMarkup(item.instance.node)))
+      // && (!position || this.editor.state.doc.nodeAt(position) === item.instance.node)
+      // && this.editor.state.doc.nodeAt(item.instance.getPos()) === item.instance.node
+    })
+
+    console.log({ maybeReplace })
+
+    if (maybeReplace) {
+      this.editor.nodeViewCache.remove(maybeReplace.id)
+
+      // this.editor.nodeViewCache.add
+      // maybeReplace.instance.node = this.node
+      maybeReplace.instance.nope = true
+      maybeReplace.instance.getPos = this.getPos
+      maybeReplace.instance.cache = this.editor.nodeViewCache.add(maybeReplace.instance)
+
+      console.log('new cache', this.editor.nodeViewCache.data)
+
+      return maybeReplace.instance
+    }
+
+    // const cache = this.editor.nodeViewCache.findNodeAtPosition(this.node, this.position)
+
+    // if (cache) {
+    //   cache.instance.getPos = this.getPos
+    //   return cache.instance
+    // }
+
+    // this.editor.on('beforeUpdateState', this.onBeforeUpdateState)
 
     this.mount()
 
     this.cache = this.editor.nodeViewCache.add(this)
   }
 
-  onBeforeUpdateState = ({ transaction }: { transaction: Transaction }) => {
+  // onBeforeUpdateState = ({ transaction }: { transaction: Transaction }) => {
-    if (!transaction.docChanged) {
+  //   if (!transaction.docChanged) {
-      return
+  //     return
-    }
+  //   }
 
-    const mapResult = transaction.mapping.mapResult(this.position)
+  //   console.log({ transaction })
-    const newPosition = mapResult.pos
-    // const newNode = transaction.doc.nodeAt(newPosition)
 
-    this.deletedPosition = mapResult.deleted
+  //   const mapResult = transaction.mapping.mapResult(this.position)
-      // prevents an error when replacing a node with itself
+  //   const newPosition = mapResult.pos
-      || transaction.getMeta('uiEvent') === 'paste'
+  //   // const newNode = transaction.doc.nodeAt(newPosition)
-      // prevents an error when replacing a node with itself
-      || transaction.getMeta('uiEvent') === 'drop'
 
-    // console.log({
+  //   this.deletedPosition = mapResult.deleted
-    //   transaction,
+  //     // prevents an error when replacing a node with itself
-    //   oldPosition: this.position,
+  //     || transaction.getMeta('uiEvent') === 'paste'
-    //   newPosition,
+  //     // prevents an error when replacing a node with itself
-    //   newNode,
+  //     || transaction.getMeta('uiEvent') === 'drop'
-    //   oldNode: this.node,
-    //   cache: this.editor.nodeViewCache.data,
-    // })
 
-    this.position = newPosition
+  //   // console.log({
-  }
+  //   //   transaction,
+  //   //   oldPosition: this.position,
+  //   //   newPosition,
+  //   //   newNode,
+  //   //   oldNode: this.node,
+  //   //   cache: this.editor.nodeViewCache.data,
+  //   // })
+
+  //   this.position = newPosition
+  // }
 
   mount() {
     // eslint-disable-next-line
@@ -103,11 +147,56 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
   }
 
   destroy() {
-    if (this.deletedPosition) {
+    // if (this.deletedPosition) {
-      this.editor.nodeViewCache.remove(this.cache.id)
+    //   this.editor.nodeViewCache.remove(this.cache.id)
-      this.editor.off('beforeUpdateState', this.onBeforeUpdateState)
+    //   this.editor.off('beforeUpdateState', this.onBeforeUpdateState)
-      this.destroyed()
+    //   this.destroyed()
+    // }
+
+    // const id = this.cache.id
+    // setTimeout(() => {
+
+    //   // this.editor.nodeViewCache.remove(this.cache.id)
+    //   // this.editor.off('beforeUpdateState', this.onBeforeUpdateState)
+
+    //   if (this.editor.nodeViewCache.get(id)) {
+    //     console.log('SHOULD DELETE')
+    //     this.editor.nodeViewCache.remove(id)
+    //     this.destroyed()
+    //   }
+    // })
+
+    // @ts-ignore
+    // console.log('delete1', this.nope)
+
+    // const id = this.cache.id
+    setTimeout(() => {
+
+      // @ts-ignore
+      // console.log('delete2', this.nope)
+
+      // @ts-ignore
+      if (this.nope) {
+        // @ts-ignore
+        this.nope = false
+
+        return
       }
+
+      this.editor.nodeViewCache.remove(this.cache.id)
+      this.destroyed()
+
+      // this.editor.nodeViewCache.remove(this.cache.id)
+      // this.editor.off('beforeUpdateState', this.onBeforeUpdateState)
+
+      // console.log('delete2', this.getPos())
+
+      // if (this.editor.nodeViewCache.get(id)) {
+      //   console.log('SHOULD DELETE')
+      //   this.editor.nodeViewCache.remove(id)
+      //   this.destroyed()
+      // }
+    })
   }
 
   destroyed() {