fix(noteview): save noteViews to Context

wax-prosemirror-core/src/WaxView.js

@@ -35,7 +35,7 @@ export default props => {
 
           const state = view.state.apply(tr);
           view.updateState(state);
-          context.updateView(view);
+          context.updateView({ main: view });
 
           props.onChange(state.doc.content);
         },
@@ -53,7 +53,7 @@ export default props => {
         // }
       }
     );
-    context.updateView(view);
+    context.updateView({ main: view });
 
     if (debug) applyDevTools(view);
     if (autoFocus) view.focus();

wax-prosemirror-core/src/ioc-react.js

 import React, { useContext, useState } from "react";
 
 export const WaxContext = React.createContext({
-  view: null,
+  view: {},
   app: null,
   updateView: null
 });
@@ -9,9 +9,10 @@ export const WaxContext = React.createContext({
 export default props => {
   const [context, setContext] = useState({
     app: props.app,
-    view: props.view,
+    view: props.view || {},
     updateView: view => {
-      setContext({ ...context, view });
+      console.log(view, context);
+      setContext({ ...context, view: Object.assign(context.view, view) });
     }
   });
 
@@ -28,8 +29,7 @@ export default props => {
 
 export const useInjection = identifier => {
   const {
-    app: { container },
-    view
+    app: { container }
   } = useContext(WaxContext);
 
   if (!container) {
@@ -37,6 +37,6 @@ export const useInjection = identifier => {
   }
 
   return container.isBound(identifier)
-    ? { view, instance: container.get(identifier) }
+    ? { instance: container.get(identifier) }
     : null;
 };

wax-prosemirror-services/src/MenuService/Menu.js

@@ -27,9 +27,11 @@ export default class Menu {
 
   render() {
     return () => {
-      const { view } = useContext(WaxContext);
+      const {
+        view: { main }
+      } = useContext(WaxContext);
       const Bar = useMemo(() => (
-        <MenuWrapper items={this.toolGroups} view={view || {}} />
+        <MenuWrapper items={this.toolGroups} view={main || {}} />
       ));
       return <>{Bar}</>;
     };

wax-prosemirror-services/src/NoteService/Editor.js

-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useContext } from "react";
 import { EditorView } from "prosemirror-view";
 import { EditorState } from "prosemirror-state";
 import { StepMap } from "prosemirror-transform";
 import { keymap } from "prosemirror-keymap";
 import { undo, redo } from "prosemirror-history";
+import { WaxContext } from "wax-prosemirror-core/src/ioc-react";
+
 import { markActive } from "../lib/Utils";
 
-let noteView = null;
 export default ({ node, view, pos }) => {
   const editorRef = useRef();
+  const context = useContext(WaxContext);
+
   useEffect(() => {
-    console.log("test", node);
-    noteView = new EditorView(
+    const noteView = new EditorView(
       { mount: editorRef.current },
       {
-        // You can use any node as an editor document
         state: EditorState.create({
           doc: node,
           plugins: [
@@ -42,7 +43,7 @@ export default ({ node, view, pos }) => {
               for (let j = 0; j < steps.length; j++)
                 outerTr.step(steps[j].map(offsetMap));
             }
-            console.log(noteView.docView.node);
+
             // outerTr.setNodeMarkup(pos, view.state.schema.nodes.footnote, {
             //   title: noteView.docView.node.textContent
             // });
@@ -62,10 +63,11 @@ export default ({ node, view, pos }) => {
         }
       }
     );
+    context.updateView({ [pos]: noteView });
   }, []);
 
-  if (noteView) {
-    let state = noteView.state;
+  if (context[pos]) {
+    let state = context.view[pos].state;
     let start = node.content.findDiffStart(state.doc.content);
     console.log(start, node);
     if (start != null) {
@@ -75,8 +77,7 @@ export default ({ node, view, pos }) => {
         endA += overlap;
         endB += overlap;
       }
-      console.log(endA, endB);
-      noteView.dispatch(
+      context.view[pos].dispatch(
         state.tr
           .replace(start, endB, node.slice(start, endA))
           .setMeta("fromOutside", true)

wax-prosemirror-services/src/NoteService/NoteComponent.js

@@ -4,15 +4,17 @@ import { isEqual } from "lodash";
 import NoteEditor from "./NoteEditor";
 
 export default () => {
-  const { view } = useContext(WaxContext);
+  const {
+    view: { main }
+  } = useContext(WaxContext);
   const [notes, setNotes] = useState([]);
 
   useEffect(() => {
-    setNotes(updateNotes(view));
-  }, [JSON.stringify(updateNotes(view))]);
+    setNotes(updateNotes(main));
+  }, [JSON.stringify(updateNotes(main))]);
 
   const noteComponent = useMemo(
-    () => <NoteEditor notes={notes} view={view} />,
+    () => <NoteEditor notes={notes} view={main} />,
     [notes]
   );
 

wax-prosemirror-services/src/NoteService/NoteEditor.js

-import React from "react";
+import React, { useMemo } from "react";
 import Editor from "./Editor";
 
 export default ({ notes, view }) => {
+  // const EditorComponent = useMemo(
+  //   () => <Editor node={note.node} pos={note.pos} view={view} />,
+  //   [notes]
+  // );
+
   return (
     <div>
       {notes.map(note => (
-        <Editor node={note.node} pos={note.pos} view={view} />
+        <Editor
+          key={`editor-${note.pos}`}
+          node={note.node}
+          pos={note.pos}
+          view={view}
+        />
       ))}
     </div>
   );

wax-prosemirror-services/src/OverlayService/usePosition.js

@@ -12,7 +12,9 @@ const defaultOverlay = {
 };
 
 export default options => {
-  const { view } = useContext(WaxContext);
+  const {
+    view: { main }
+  } = useContext(WaxContext);
 
   const [position, setPosition] = useState({
     position: "absolute",
@@ -22,21 +24,21 @@ export default options => {
   let mark = {};
 
   const updatePosition = useCallback((followCursor = true) => {
-    if (!view) return defaultOverlay;
+    if (!main) return defaultOverlay;
 
-    mark = markActive(view.state.schema.marks[options.markType])(view.state);
+    mark = markActive(main.state.schema.marks[options.markType])(main.state);
 
     if (!isObject(mark)) return defaultOverlay;
 
     const { from, to } = isObject(mark)
       ? followCursor
-        ? view.state.selection
-        : getMarkPosition(view.state.selection.$anchor, mark)
-      : view.state.selection;
+        ? main.state.selection
+        : getMarkPosition(main.state.selection.$anchor, mark)
+      : main.state.selection;
 
-    const start = view.coordsAtPos(from);
+    const start = main.coordsAtPos(from);
 
-    const box = view.dom.offsetParent.getBoundingClientRect();
+    const box = main.dom.offsetParent.getBoundingClientRect();
 
     let left = start.left - box.left;
     let top = start.top - box.top + 20;