From 386c8fe16a3437fb2ffb20cae9c024800f465c35 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 18 Feb 2021 18:01:48 +0200
Subject: [PATCH] only rerender editor on certain props
---
editors/editoria/src/Editoria.js | 7 +-
.../customtag/CustomTagInlineComponent.js | 12 +-
.../EditingSuggestingDropDown.js | 8 +-
.../findAndReplace/FindAndReplaceTool.js | 4 +-
.../SpecialCharactersTool.js | 2 +-
.../TrackChangeOptionsComponent.js | 2 +-
wax-prosemirror-core/src/WaxView.js | 107 +++++++++---------
7 files changed, 77 insertions(+), 65 deletions(-)
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index 76c7c1409..00db23f7e 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -52,11 +52,6 @@ const Editoria = () => {
key = 'editoriaMobile';
}
- console.log(JSON.stringify('["test"]'));
- // console.log(
- // JSON.parse('[{"item":"custom-tag-label-1"}]'),
- // );
-
const EditoriaComponent = useMemo(
() => (
<>
@@ -71,7 +66,7 @@ const Editoria = () => {
// value={demo}
// readonly
layout={layout}
- onChange={source => console.log(source)}
+ // onChange={source => console.log(source)}
user={user}
/>
</>
diff --git a/wax-prosemirror-components/src/components/customtag/CustomTagInlineComponent.js b/wax-prosemirror-components/src/components/customtag/CustomTagInlineComponent.js
index 522afa887..a75341ccc 100644
--- a/wax-prosemirror-components/src/components/customtag/CustomTagInlineComponent.js
+++ b/wax-prosemirror-components/src/components/customtag/CustomTagInlineComponent.js
@@ -1,8 +1,16 @@
import React, { useMemo, useState, useContext } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
+import styled from 'styled-components';
import MenuButton from '../../ui/buttons/MenuButton';
+const StyledButton = styled(MenuButton)`
+ svg {
+ height: 15px;
+ width: 17px;
+ }
+`;
+
const CustomTagInlineComponent = ({ view: { state }, item }) => {
const { icon, title } = item;
const localInline = JSON.parse(localStorage.getItem('isInline'));
@@ -27,7 +35,7 @@ const CustomTagInlineComponent = ({ view: { state }, item }) => {
return useMemo(
() => (
- <MenuButton
+ <StyledButton
active={isOpen}
disabled={isDisabled}
iconName={icon}
@@ -35,7 +43,7 @@ const CustomTagInlineComponent = ({ view: { state }, item }) => {
title={title}
/>
),
- [isOpen],
+ [isOpen, isDisabled],
);
};
diff --git a/wax-prosemirror-components/src/components/editingSuggesting/EditingSuggestingDropDown.js b/wax-prosemirror-components/src/components/editingSuggesting/EditingSuggestingDropDown.js
index 7c0dadbae..5ac65f9e2 100644
--- a/wax-prosemirror-components/src/components/editingSuggesting/EditingSuggestingDropDown.js
+++ b/wax-prosemirror-components/src/components/editingSuggesting/EditingSuggestingDropDown.js
@@ -76,9 +76,13 @@ const dropDownOptions = [
];
const EditingSuggesting = ({ view: { dispatch, state }, item }) => {
- const { app, activeView } = useContext(WaxContext);
+ const { app, activeView, view } = useContext(WaxContext);
const isDisabled = app.config.get('config.EnableTrackChangeService').toggle;
+ const isEditable = view.main.props.editable(editable => {
+ return editable;
+ });
+
const enableDisableTrackChanges = () => {
app.config.get('config.EnableTrackChangeService').enabled = !app.config.get(
'config.EnableTrackChangeService',
@@ -109,7 +113,7 @@ const EditingSuggesting = ({ view: { dispatch, state }, item }) => {
[],
);
- if (app.config.get('readonly')) return <Viewing />;
+ if (!isEditable) return <Viewing />;
return EditingSuggestingComponent;
};
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
index 0d843993a..0475fad67 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
@@ -69,7 +69,7 @@ const FindAndReplaceTool = ({ view = {}, item }) => {
/>
{isOpen && (
- <DropWrapper style={style} ref={dropElement}>
+ <DropWrapper ref={dropElement} style={style}>
<FindAndReplaceComponent
close={() => {
setIsOpen(false);
@@ -79,7 +79,7 @@ const FindAndReplaceTool = ({ view = {}, item }) => {
)}
</Wrapper>
),
- [isOpen, style],
+ [isOpen, style, isDisabled],
);
return MemorizedDropdown;
diff --git a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js
index 4576c9533..2f5d74d33 100644
--- a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js
+++ b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js
@@ -62,7 +62,7 @@ const SpecialCharactersTool = ({ view = {}, item }) => {
)}
</Wrapper>
),
- [isOpen],
+ [isOpen, isDisabled],
);
return MemorizedDropdown;
diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js
index ae95ecb26..7f4a06f43 100644
--- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js
+++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js
@@ -108,7 +108,7 @@ const AcceptRejectAllControls = styled.div`
position: absolute;
right: 207px;
transform-origin: 50% 50% 0px;
- width: 200px;
+ width: 209px;
z-index: 9999;
`;
diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js
index 2ca97051b..b195a3a64 100644
--- a/wax-prosemirror-core/src/WaxView.js
+++ b/wax-prosemirror-core/src/WaxView.js
@@ -1,4 +1,4 @@
-import React, { useRef, useContext, useCallback } from 'react';
+import React, { useRef, useContext, useCallback, useMemo } from 'react';
import applyDevTools from 'prosemirror-dev-tools';
import { EditorState } from 'prosemirror-state';
@@ -12,60 +12,61 @@ import transformPasted from './helpers/TransformPasted';
export default props => {
const { readonly, onBlur, options, debug, autoFocus, user } = props;
-
const editorRef = useRef();
let view;
const context = useContext(WaxContext);
- 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,
- scrollMargin: 200,
- scrollThreshold: 200,
- handleDOMEvents: {
- blur: onBlur
- ? view => {
- onBlur(view.state.doc.content);
- }
- : null,
+ 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,
+ scrollMargin: 200,
+ scrollThreshold: 200,
+ handleDOMEvents: {
+ blur: onBlur
+ ? view => {
+ onBlur(view.state.doc.content);
+ }
+ : null,
+ },
+ transformPasted: slice => {
+ return transformPasted(slice, view);
+ },
+ attributes: {
+ spellcheck: 'false',
+ },
},
- transformPasted: slice => {
- return transformPasted(slice, view);
- },
- attributes: {
- spellcheck: 'false',
- },
- },
- );
+ );
- context.updateView(
- {
- main: view,
- },
- 'main',
- );
- if (debug) applyDevTools(view);
- if (autoFocus)
- setTimeout(() => {
- view.focus();
- }, 1000);
+ context.updateView(
+ {
+ main: view,
+ },
+ 'main',
+ );
+ if (debug) applyDevTools(view);
+ if (autoFocus)
+ setTimeout(() => {
+ view.focus();
+ }, 1000);
- return () => view.destroy();
- }
- editorRef.current = node;
- }, []);
+ return () => view.destroy();
+ }
+ editorRef.current = node;
+ },
+ [readonly],
+ );
const dispatchTransaction = transaction => {
const { TrackChange } = props;
@@ -94,7 +95,11 @@ export default props => {
};
const editor = <div ref={setEditorRef} />;
- return props.children({
- editor,
- });
+ return useMemo(
+ () =>
+ props.children({
+ editor,
+ }),
+ [readonly],
+ );
};
--
GitLab