diff --git a/wax-prosemirror-services/src/NoteService/Editor.js b/wax-prosemirror-services/src/NoteService/Editor.js index 035acd1b6fd43d212f6075d0f18b1c128db0c952..d6fd5dd5d9816abe3c55421254fa75b0276b890e 100644 --- a/wax-prosemirror-services/src/NoteService/Editor.js +++ b/wax-prosemirror-services/src/NoteService/Editor.js @@ -2,7 +2,7 @@ import React, { useEffect, useRef, useContext } from 'react'; import { filter } from 'lodash'; import { EditorView } from 'prosemirror-view'; -import { EditorState } from 'prosemirror-state'; +import { EditorState, TextSelection } from 'prosemirror-state'; import { StepMap } from 'prosemirror-transform'; import { baseKeymap } from 'prosemirror-commands'; import { keymap } from 'prosemirror-keymap'; @@ -81,7 +81,7 @@ export default ({ node, view }) => { // TODO Remove timeout and use state to check if noteView has changed setTimeout(() => { - context.updateView({}, noteId); + // context.updateView({}, noteId); }, 20); if (!tr.getMeta('fromOutside')) { diff --git a/wax-prosemirror-services/src/NoteService/NoteComponent.js b/wax-prosemirror-services/src/NoteService/NoteComponent.js index 068e33c73cfd1dbf0204d7c19dc7511b0b3b25c6..e378c0536a23f9c382e7b47e657ead80e50591e6 100644 --- a/wax-prosemirror-services/src/NoteService/NoteComponent.js +++ b/wax-prosemirror-services/src/NoteService/NoteComponent.js @@ -1,37 +1,32 @@ -import React, { - useContext, - useState, - useEffect, - useMemo, - Fragment -} from "react"; -import { WaxContext } from "wax-prosemirror-core"; -import { DocumentHelpers } from "wax-prosemirror-utilities"; -import NoteEditor from "./NoteEditor"; +import React, { useContext, useState, useMemo } from 'react'; +import useDeepCompareEffect from 'use-deep-compare-effect'; + +import { WaxContext } from 'wax-prosemirror-core'; +import { DocumentHelpers } from 'wax-prosemirror-utilities'; +import NoteEditor from './NoteEditor'; export default () => { - const { view: { main } } = useContext(WaxContext); - const [notes, setNotes] = useState([]); - useEffect( - () => { - setNotes(updateNotes(main)); - }, + const { + view: { main }, + } = useContext(WaxContext); - [JSON.stringify(updateNotes(main))] - ); + const [notes, setNotes] = useState([]); + useDeepCompareEffect(() => { + setNotes(updateNotes(main)); + }, [updateNotes(main)]); const noteComponent = useMemo( () => <NoteEditor notes={notes} view={main} />, - [notes] + [notes], ); - return <Fragment>{noteComponent}</Fragment>; + return <>{noteComponent}</>; }; const updateNotes = view => { if (view) { return DocumentHelpers.findChildrenByType( view.state.doc, view.state.schema.nodes.footnote, - true + true, ); } return []; diff --git a/wax-prosemirror-services/src/NoteService/NoteEditor.js b/wax-prosemirror-services/src/NoteService/NoteEditor.js index 7cf4f57522743738fe5b978de33cfbcc0dced83c..4641df66756a57f988e7fe6614680647daf3391b 100644 --- a/wax-prosemirror-services/src/NoteService/NoteEditor.js +++ b/wax-prosemirror-services/src/NoteService/NoteEditor.js @@ -1,12 +1,13 @@ -import React, { Fragment } from "react"; -import Editor from "./Editor"; +/* eslint react/prop-types: 0 */ +import React from 'react'; +import Editor from './Editor'; export default ({ notes, view }) => { return ( - <Fragment> + <> {notes.map(note => ( <Editor key={note.node.attrs.id} node={note.node} view={view} /> ))} - </Fragment> + </> ); }; diff --git a/wax-prosemirror-services/src/NoteService/NoteService.js b/wax-prosemirror-services/src/NoteService/NoteService.js index c28ca7ff8e2b6418b9424215bf051b2d8cf87687..db23620a2423b480b442f1754af90d763d738829 100644 --- a/wax-prosemirror-services/src/NoteService/NoteService.js +++ b/wax-prosemirror-services/src/NoteService/NoteService.js @@ -1,36 +1,37 @@ -import Service from "../Service"; -import { footNoteNode } from "wax-prosemirror-schema"; -import { CommentBubbleComponent } from "wax-prosemirror-components"; -import Note from "./Note"; -import NoteComponent from "./NoteComponent"; +import Service from '../Service'; +import { footNoteNode } from 'wax-prosemirror-schema'; +import { CommentBubbleComponent } from 'wax-prosemirror-components'; +import Note from './Note'; +import NoteComponent from './NoteComponent'; class NoteService extends Service { - name = "NoteService"; + name = 'NoteService'; boot() { - const layout = this.container.get("Layout"); - const createOverlay = this.container.get("CreateOverlay"); - layout.addComponent("notesArea", NoteComponent); + const layout = this.container.get('Layout'); + const createOverlay = this.container.get('CreateOverlay'); + layout.addComponent('notesArea', NoteComponent); + createOverlay( CommentBubbleComponent, { - showComment: activeViewId => activeViewId !== "main", - group: "notes" + showComment: activeViewId => activeViewId !== 'main', + group: 'notes', }, { - markType: "", + markType: '', followCursor: false, - selection: true - } + selection: true, + }, ); } register() { - const createNode = this.container.get("CreateNode"); - this.container.bind("Note").to(Note); + const createNode = this.container.get('CreateNode'); + this.container.bind('Note').to(Note); createNode({ - footnote: footNoteNode + footnote: footNoteNode, }); } }