From 44533f9a35249993880c629efad2f8507caba373 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 28 Jul 2020 23:03:18 +0300
Subject: [PATCH] replace useEffect with useCallback
---
wax-prosemirror-core/src/WaxView.js | 71 ++++++++++++++++-------------
1 file changed, 40 insertions(+), 31 deletions(-)
diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js
index e3e2c78cf..e42bae3d8 100644
--- a/wax-prosemirror-core/src/WaxView.js
+++ b/wax-prosemirror-core/src/WaxView.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useContext } from 'react';
+import React, { useEffect, useRef, useContext, useCallback } from 'react';
import applyDevTools from 'prosemirror-dev-tools';
import { EditorState } from 'prosemirror-state';
@@ -17,37 +17,46 @@ export default props => {
let view;
const context = useContext(WaxContext);
- useEffect(() => {
- view = new EditorView(
- { mount: editorRef.current },
- {
- editable: () => !readonly,
- state: EditorState.create(options),
- dispatchTransaction,
- user,
- handleDOMEvents: {
- blur: onBlur
- ? view => {
- onBlur(view.state.doc.content);
- }
- : null,
- },
- transformPasted: slice => {
- return transformPasted(slice, view);
+ const setEditorRef = useCallback(node => {
+ if (editorRef.current) {
+ // this is where you do cleanup if you have to. the editorRef.current will
+ // still point to the old ref, the old node. so you have some time here to
+ // clean up the unmount if you need to.
+ }
+
+ if (node) {
+ view = new EditorView(
+ { mount: node },
+ {
+ editable: () => !readonly,
+ state: EditorState.create(options),
+ dispatchTransaction,
+ user,
+ handleDOMEvents: {
+ blur: onBlur
+ ? view => {
+ onBlur(view.state.doc.content);
+ }
+ : null,
+ },
+ transformPasted: slice => {
+ return transformPasted(slice, view);
+ },
},
- },
- );
+ );
- context.updateView(
- {
- main: view,
- },
- 'main',
- );
- if (debug) applyDevTools(view);
- if (autoFocus) view.focus();
+ context.updateView(
+ {
+ main: view,
+ },
+ 'main',
+ );
+ if (debug) applyDevTools(view);
+ if (autoFocus) view.focus();
- return () => view.destroy();
+ return () => view.destroy();
+ }
+ editorRef.current = node;
}, []);
const dispatchTransaction = transaction => {
@@ -59,7 +68,7 @@ export default props => {
const state = view.state.apply(tr);
view.updateState(state);
- /*when a transaction comes from a view other than
+ /* when a transaction comes from a view other than
main don't keep updating the view ,as this is
the central point of each transaction
*/
@@ -75,7 +84,7 @@ export default props => {
props.onChange(state.doc.content);
};
- const editor = <div ref={editorRef} />;
+ const editor = <div ref={setEditorRef} />;
return props.children({
editor,
});
--
GitLab