From 99262fc669dcf7d8e9654344e76f87dbd2f13590 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 18 Jan 2021 16:37:42 +0200
Subject: [PATCH] disable tools in readonly
---
.../src/components/Button.js | 7 +++++-
.../src/components/ImageUpload.js | 12 ++++++++--
.../src/components/TitleButton.js | 7 +++++-
.../findAndReplace/FindAndReplaceTool.js | 23 ++++++++++++++++---
.../SpecialCharactersTool.js | 17 +++++++++++---
.../src/components/tables/CreateTable.js | 9 ++++++--
.../src/NoteService/Editor.js | 7 +++++-
7 files changed, 69 insertions(+), 13 deletions(-)
diff --git a/wax-prosemirror-components/src/components/Button.js b/wax-prosemirror-components/src/components/Button.js
index 7694bfb36..d45d543c5 100644
--- a/wax-prosemirror-components/src/components/Button.js
+++ b/wax-prosemirror-components/src/components/Button.js
@@ -14,6 +14,10 @@ const Button = ({ view = {}, item }) => {
if (onlyOnMain) view = main;
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+
const { dispatch, state } = view;
const handleMouseDown = (e, editorState, editorDispatch) => {
@@ -25,7 +29,8 @@ const Button = ({ view = {}, item }) => {
active(state, activeViewId) && select(state, activeViewId)
);
- const isDisabled = !select(state, activeViewId, activeView);
+ let isDisabled = !select(state, activeViewId, activeView);
+ if (!isEditable) isDisabled = true;
const MenuButtonComponent = useMemo(
() => (
diff --git a/wax-prosemirror-components/src/components/ImageUpload.js b/wax-prosemirror-components/src/components/ImageUpload.js
index 8a0be5040..0ac2a7198 100644
--- a/wax-prosemirror-components/src/components/ImageUpload.js
+++ b/wax-prosemirror-components/src/components/ImageUpload.js
@@ -12,12 +12,20 @@ const Wrapper = styled.div`
`;
const ImageUpload = ({ item, fileUpload, view }) => {
- const { activeViewId } = useContext(WaxContext);
+ const {
+ activeViewId,
+ view: { main },
+ } = useContext(WaxContext);
const inputRef = useRef(null);
const handleMouseDown = () => inputRef.current.click();
- const isDisabled = !item.select(view.state, activeViewId);
+ let isDisabled = !item.select(view.state, activeViewId);
+
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+ if (!isEditable) isDisabled = true;
const ImageUploadComponent = useMemo(
() => (
diff --git a/wax-prosemirror-components/src/components/TitleButton.js b/wax-prosemirror-components/src/components/TitleButton.js
index 2fc82591b..3eb7c9f26 100644
--- a/wax-prosemirror-components/src/components/TitleButton.js
+++ b/wax-prosemirror-components/src/components/TitleButton.js
@@ -40,7 +40,12 @@ const TitleButton = ({ view = {}, item }) => {
}, [JSON.stringify(titleNode[0])]);
const isActive = !!active(state, activeViewId);
- const isDisabled = !select(state, activeViewId, activeView);
+ let isDisabled = !select(state, activeViewId, activeView);
+
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+ if (!isEditable) isDisabled = true;
const TitleButtonComponent = useMemo(
() => (
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
index 4936b7cb5..0d843993a 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
@@ -1,7 +1,14 @@
-import React, { useRef, useMemo, useState, useLayoutEffect } from 'react';
+import React, {
+ useContext,
+ useRef,
+ useMemo,
+ useState,
+ useLayoutEffect,
+} from 'react';
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
+import { WaxContext } from 'wax-prosemirror-core';
import MenuButton from '../../ui/buttons/MenuButton';
import FindAndReplaceComponent from './FindAndReplaceComponent';
@@ -13,13 +20,17 @@ const Wrapper = styled.div`
`;
const DropWrapper = styled.div`
+ background: white;
margin-top: ${grid(1)};
position: absolute;
- background: white;
top: 32px;
`;
const FindAndReplaceTool = ({ view = {}, item }) => {
+ const {
+ view: { main },
+ } = useContext(WaxContext);
+
const { icon, title } = item;
const dropElement = useRef();
const [isOpen, setIsOpen] = useState(false);
@@ -27,6 +38,12 @@ const FindAndReplaceTool = ({ view = {}, item }) => {
let styles = { right: '-205px' };
const [style, setStyle] = useState(styles);
+ let isDisabled = false;
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+ if (!isEditable) isDisabled = true;
+
useLayoutEffect(() => {
setStyle(styles);
if (!dropElement.current) return;
@@ -43,7 +60,7 @@ const FindAndReplaceTool = ({ view = {}, item }) => {
<Wrapper>
<MenuButton
active={isOpen}
- disabled={false}
+ disabled={isDisabled}
iconName={icon}
onMouseDown={() => {
setIsOpen(!isOpen);
diff --git a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js
index ff6bbc9d4..4576c9533 100644
--- a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js
+++ b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js
@@ -1,7 +1,8 @@
-import React, { useMemo, useState, useRef } from 'react';
+import React, { useContext, useMemo, useState, useRef } from 'react';
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
+import { WaxContext } from 'wax-prosemirror-core';
import MenuButton from '../../ui/buttons/MenuButton';
import SpecialCharactersComponent from './SpecialCharactersComponent';
@@ -14,25 +15,35 @@ const Wrapper = styled.div`
`;
const DropWrapper = styled.div`
+ background: white;
margin-top: ${grid(1)};
position: absolute;
- background: white;
top: 32px;
`;
const SpecialCharactersTool = ({ view = {}, item }) => {
+ const {
+ view: { main },
+ } = useContext(WaxContext);
+
const { icon, title } = item;
const [isOpen, setIsOpen] = useState(false);
const ref = useRef();
useOnClickOutside(ref, () => setIsOpen(false));
+ let isDisabled = false;
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+ if (!isEditable) isDisabled = true;
+
const MemorizedDropdown = useMemo(
() => (
<Wrapper ref={ref}>
<MenuButton
active={isOpen}
- disabled={false}
+ disabled={isDisabled}
iconName={icon}
onMouseDown={() => {
setIsOpen(!isOpen);
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index 032de1c8b..6dcac6066 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -16,9 +16,9 @@ const Wrapper = styled.div`
`;
const DropWrapper = styled.div`
+ background: white;
margin-top: ${grid(1)};
position: absolute;
- background: white;
`;
const CreateTable = ({ view = {}, item }) => {
@@ -46,7 +46,12 @@ const CreateTable = ({ view = {}, item }) => {
setIsOpen(!isOpen);
};
- const isDisabled = !select(state, activeViewId);
+ let isDisabled = !select(state, activeViewId);
+
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+ if (!isEditable) isDisabled = true;
useOnClickOutside(ref, () => setIsOpen(false));
diff --git a/wax-prosemirror-services/src/NoteService/Editor.js b/wax-prosemirror-services/src/NoteService/Editor.js
index 8051a106f..482346d38 100644
--- a/wax-prosemirror-services/src/NoteService/Editor.js
+++ b/wax-prosemirror-services/src/NoteService/Editor.js
@@ -18,12 +18,17 @@ export default ({ node, view }) => {
const context = useContext(WaxContext);
const noteId = node.attrs.id;
let noteView;
- let updateMainView = true;
+
+ // eslint-disable-next-line react/destructuring-assignment
+ const isEditable = context.view.main.props.editable(editable => {
+ return editable;
+ });
useEffect(() => {
noteView = new EditorView(
{ mount: editorRef.current },
{
+ editable: () => isEditable,
state: EditorState.create({
doc: node,
plugins: [keymap(createKeyBindings()), ...context.app.getPlugins()],
--
GitLab