refactor(legacy-editor): improve node view portal rendering

packages/editor/src/NodePortal/NodePortalContainer.tsx

@@ -23,7 +23,7 @@ export const NodePortalContainer: FC<NodePortalContainerProps> = ({ children })
   return (
     <NodePortalsContext.Provider value={contextValue}>
       {children}
-      {nodePortals.map(({ container, child }) => createPortal(child, container))}
+      {nodePortals.map(({ container, child, id }) => createPortal(child, container, id))}
     </NodePortalsContext.Provider>
   )
 }

packages/editor/src/NodePortal/__tests__/NodePortalContainer.test.tsx

@@ -16,6 +16,7 @@ describe('NodePortalContainer', () => {
       useEffect(() => {
         setNodePortals([
           {
+            id: 'id',
             container: portalContainer,
             child: <span>{text}</span>
           }

packages/editor/src/NodePortal/useNodePortals.ts

@@ -4,6 +4,10 @@ import { createContext, Dispatch, ReactNode, SetStateAction, useContext } from '
  * A portal contains dom container and react node.
  */
 export interface NodePortal {
+  /**
+   * unique id
+   */
+  id: string
   /**
    * the container mounted the react node.
    */

packages/legacy-editor/src/tiptapRefactor/Editor.ts

@@ -1,6 +1,7 @@
+import { NodePortal } from '@mashcard/editor'
 import { Editor as TiptapEditor } from '@tiptap/core'
-import { ReactNode } from 'react'
 
 export interface Editor extends TiptapEditor {
-  updatePortal?: (container: Element, child: ReactNode) => void
+  updatePortal?: (nodePortal: NodePortal) => void
+  removePortal?: (id: string) => void
 }

packages/legacy-editor/src/tiptapRefactor/EditorContent.tsx

@@ -1,4 +1,4 @@
-import { FC, HTMLProps, ReactNode, useEffect, useRef, useState } from 'react'
+import { FC, HTMLProps, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Editor } from '@tiptap/core'
 import { NodePortal } from '@mashcard/editor'
@@ -8,15 +8,14 @@ export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
   editor: Editor | null
 }
 
-const containerMatcher = (container: Element) => (value: NodePortal) => value.container === container
-const portalUpdater = (index: number, container: Element, child: ReactNode) => (portal: NodePortal, i: number) => {
-  if (i === index) return { container, child }
-  return portal
+const containerMatcher = (id: string) => (value: NodePortal) => value.id === id
+const portalUpdater = (index: number, nodePortal: NodePortal) => (value: NodePortal, i: number) => {
+  if (i === index) return nodePortal
+  return value
 }
 
 export const EditorContent: FC<EditorContentProps> = ({ editor, ...props }) => {
   const editorContentRef = useRef<HTMLDivElement>(null)
-  // TODO: remove unused nodePortals
   const [nodePortals, setNodePortals] = useState<NodePortal[]>([])
 
   // initial editor content
@@ -36,14 +35,14 @@ export const EditorContent: FC<EditorContentProps> = ({ editor, ...props }) => {
     editor.setOptions({
       element
     })
-    ;(editor as ExtendEditor).updatePortal = (container, child) => {
+    ;(editor as ExtendEditor).updatePortal = nodePortal => {
       setNodePortals(nodePortals => {
-        const index = nodePortals.findIndex(containerMatcher(container))
+        const index = nodePortals.findIndex(containerMatcher(nodePortal.id))
 
         if (index >= 0) {
-          return nodePortals.map(portalUpdater(index, container, child))
+          return nodePortals.map(portalUpdater(index, nodePortal))
         } else {
-          return [...nodePortals, { container, child }]
+          return [...nodePortals, nodePortal]
         }
       })
     }
@@ -82,7 +81,7 @@ export const EditorContent: FC<EditorContentProps> = ({ editor, ...props }) => {
   return (
     <>
       <div {...props} ref={editorContentRef} />
-      {nodePortals.map(({ container, child }) => createPortal(child, container))}
+      {nodePortals.map(({ container, child, id }) => createPortal(child, container, id))}
     </>
   )
 }

packages/legacy-editor/src/tiptapRefactor/ReactRenderer.tsx

@@ -70,7 +70,7 @@ export class ReactRenderer<R = unknown, P = unknown> {
 
     this.reactElement = <Component {...props} />
 
-    this.editor?.updatePortal?.(this.element, this.reactElement)
+    this.editor?.updatePortal?.({ id: this.id, child: this.reactElement, container: this.element })
   }
 
   updateProps(props: Record<string, any> = {}): void {
@@ -82,5 +82,7 @@ export class ReactRenderer<R = unknown, P = unknown> {
     this.render()
   }
 
-  destroy(): void {}
+  destroy(): void {
+    this.editor?.removePortal?.(this.id)
+  }
 }