From a0f0cf71ee014afd5d4f00efcfa5d134afb412b4 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 30 Nov 2023 11:18:41 +0200
Subject: [PATCH] use multiple choice editor component
---
editors/demo/src/HHMI/HHMI.js | 4 +-
.../src/EssayService/EssayQuestion.js | 5 +-
.../components/EssayAnswerComponent.js | 246 +-----------------
.../components/EssayPromptComponent.js | 246 +-----------------
.../components/EssayQuestionComponent.js | 246 +-----------------
.../EssayQuestionContainerComponent.js | 7 +-
.../EssayService/schema/essayContainerNode.js | 4 +-
.../EssayService/schema/essayQuestionNode.js | 2 +-
.../components/ContainerEditor.js | 22 +-
.../FillTheGapContainerComponent.js | 14 +-
10 files changed, 69 insertions(+), 727 deletions(-)
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index baed57f47..84ecaa169 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -12,7 +12,7 @@ const renderImage = file => {
reader.onload = () => accept(reader.result);
reader.onerror = () => fail(reader.error);
// Some extra delay to make the asynchronicity visible
- setTimeout(() => reader.readAsDataURL(file), 6150);
+ setTimeout(() => reader.readAsDataURL(file), 200);
});
};
@@ -191,7 +191,7 @@ const Hhmi = () => {
ref={editorRef}
customValues={{ showFeedBack: submitted, testMode }}
fileUpload={file => renderImage(file)}
- value={content}
+ // value={content}
// targetFormat="JSON"
readonly={readOnly}
layout={HhmiLayout}
diff --git a/wax-questions-service/src/EssayService/EssayQuestion.js b/wax-questions-service/src/EssayService/EssayQuestion.js
index 8cbe70bda..d536480d9 100644
--- a/wax-questions-service/src/EssayService/EssayQuestion.js
+++ b/wax-questions-service/src/EssayService/EssayQuestion.js
@@ -118,7 +118,10 @@ class EssayQuestion extends Tools {
get active() {
return state => {
if (
- Commands.isParentOfType(state, state.config.schema.nodes.essay_question)
+ Commands.isParentOfType(
+ state,
+ state.config.schema.nodes.essay_container,
+ )
) {
return true;
}
diff --git a/wax-questions-service/src/EssayService/components/EssayAnswerComponent.js b/wax-questions-service/src/EssayService/components/EssayAnswerComponent.js
index 234b3c8cb..75f01b6a5 100644
--- a/wax-questions-service/src/EssayService/components/EssayAnswerComponent.js
+++ b/wax-questions-service/src/EssayService/components/EssayAnswerComponent.js
@@ -1,240 +1,14 @@
-/* eslint-disable react/prop-types */
-import React, { useContext, useRef, useEffect } from 'react';
-import styled from 'styled-components';
-import { EditorView } from 'prosemirror-view';
-import { EditorState, TextSelection, NodeSelection } from 'prosemirror-state';
-import { dropCursor } from 'prosemirror-dropcursor';
-import { gapCursor } from 'prosemirror-gapcursor';
-import { StepMap } from 'prosemirror-transform';
-import { keymap } from 'prosemirror-keymap';
-import { baseKeymap, chainCommands } from 'prosemirror-commands';
-import { undo, redo } from 'prosemirror-history';
-import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
-import {
- splitListItem,
- liftListItem,
- sinkListItem,
-} from 'prosemirror-schema-list';
-import Placeholder from '../../MultipleChoiceQuestionService/plugins/placeholder';
-import FakeCursorPlugin from '../../MultipleDropDownService/plugins/FakeCursorPlugin';
-
-const EditorWrapper = styled.div`
- border: none;
- display: flex;
- flex: 2 1 auto;
- width: 100%;
- justify-content: left;
-
- .ProseMirror {
- white-space: break-spaces;
- width: 100%;
- word-wrap: break-word;
-
- &:focus {
- outline: none;
- }
-
- :empty::before {
- content: 'Type your item';
- color: #aaa;
- float: left;
- font-style: italic;
- pointer-events: none;
- }
-
- p:first-child {
- margin: 0;
- }
-
- p.empty-node:first-child::before {
- content: attr(data-content);
- }
-
- .empty-node::before {
- color: rgb(170, 170, 170);
- float: left;
- font-style: italic;
- height: 0px;
- pointer-events: none;
- }
- }
-`;
-
-let WaxOverlays = () => true;
-
-const QuestionEditorComponent = ({
- node,
- view,
- getPos,
- placeholderText = 'Type your item',
- QuestionType = 'Multiple',
-}) => {
- const editorRef = useRef();
-
- const context = useContext(WaxContext);
- const {
- app,
- pmViews: { main },
- } = context;
- let questionView;
- const questionId = node.attrs.id;
- const isEditable = main.props.editable(editable => {
- return editable;
- });
-
- let finalPlugins = [FakeCursorPlugin(), gapCursor(), dropCursor()];
-
- const createKeyBindings = () => {
- const keys = getKeys();
- Object.keys(baseKeymap).forEach(key => {
- if (keys[key]) {
- keys[key] = chainCommands(keys[key], baseKeymap[key]);
- } else {
- keys[key] = baseKeymap[key];
- }
- });
- return keys;
- };
-
- const pressEnter = (state, dispatch) => {
- if (state.selection.node && state.selection.node.type.name === 'image') {
- const { $from, to } = state.selection;
-
- const same = $from.sharedDepth(to);
-
- const pos = $from.before(same);
- dispatch(state.tr.setSelection(NodeSelection.create(state.doc, pos)));
- return true;
- }
- // LISTS
- if (splitListItem(state.schema.nodes.list_item)(state)) {
- splitListItem(state.schema.nodes.list_item)(state, dispatch);
- return true;
- }
-
- return false;
- };
-
- const getKeys = () => {
- return {
- 'Mod-z': () => undo(view.state, view.dispatch),
- 'Mod-y': () => redo(view.state, view.dispatch),
- 'Mod-[': liftListItem(view.state.schema.nodes.list_item),
- 'Mod-]': sinkListItem(view.state.schema.nodes.list_item),
- Enter: pressEnter,
- };
- };
-
- const plugins = [keymap(createKeyBindings()), ...app.getPlugins()];
-
- const createPlaceholder = placeholder => {
- return Placeholder({
- content: placeholder,
- });
- };
-
- finalPlugins = finalPlugins.concat([
- createPlaceholder(placeholderText),
- ...plugins,
- ]);
-
- useEffect(() => {
- WaxOverlays = ComponentPlugin('waxOverlays');
- questionView = new EditorView(
- {
- mount: editorRef.current,
- },
- {
- editable: () => isEditable,
- state: EditorState.create({
- doc: node,
- plugins: finalPlugins,
- }),
- dispatchTransaction,
- disallowedTools: ['MultipleChoice'],
- handleDOMEvents: {
- mousedown: () => {
- context.updateView({}, questionId);
- main.dispatch(
- main.state.tr
- .setMeta('outsideView', questionId)
- .setSelection(
- new TextSelection(
- main.state.tr.doc.resolve(
- getPos() +
- 1 +
- context.pmViews[questionId].state.selection.to,
- ),
- ),
- ),
- );
- // context.pmViews[activeViewId].dispatch(
- // context.pmViews[activeViewId].state.tr.setSelection(
- // TextSelection.between(
- // context.pmViews[activeViewId].state.selection.$anchor,
- // context.pmViews[activeViewId].state.selection.$head,
- // ),
- // ),
- // );
-
- context.updateView({}, questionId);
-
- if (questionView.hasFocus()) questionView.focus();
- },
- blur: (editorView, event) => {
- if (questionView && event.relatedTarget === null) {
- questionView.focus();
- }
- },
- },
- type: QuestionType,
- scrollMargin: 200,
- scrollThreshold: 200,
- attributes: {
- spellcheck: 'false',
- },
- },
- );
-
- // Set Each note into Wax's Context
- context.updateView(
- {
- [questionId]: questionView,
- },
- questionId,
- );
- if (questionView.hasFocus()) questionView.focus();
- }, []);
-
- const dispatchTransaction = tr => {
- const addToHistory = !tr.getMeta('exludeToHistoryFromOutside');
- const { state, transactions } = questionView.state.applyTransaction(tr);
- questionView.updateState(state);
- context.updateView({}, questionId);
-
- if (!tr.getMeta('fromOutside')) {
- const outerTr = view.state.tr;
- const offsetMap = StepMap.offset(getPos() + 1);
- for (let i = 0; i < transactions.length; i++) {
- const { steps } = transactions[i];
- for (let j = 0; j < steps.length; j++)
- outerTr.step(steps[j].map(offsetMap));
- }
- if (outerTr.docChanged)
- view.dispatch(
- outerTr
- .setMeta('outsideView', questionId)
- .setMeta('addToHistory', addToHistory),
- );
- }
- };
+import React from 'react';
+import EditorComponent from '../../MultipleChoiceQuestionService/components/EditorComponent';
+export default ({ node, view, getPos }) => {
return (
- <EditorWrapper>
- <div ref={editorRef} />
- <WaxOverlays activeViewId={questionId} />
- </EditorWrapper>
+ <EditorComponent
+ getPos={getPos}
+ node={node}
+ placeholderText="Type your essay answer"
+ QuestionType="EssayQuestion"
+ view={view}
+ />
);
};
-
-export default QuestionEditorComponent;
diff --git a/wax-questions-service/src/EssayService/components/EssayPromptComponent.js b/wax-questions-service/src/EssayService/components/EssayPromptComponent.js
index 234b3c8cb..7785ade69 100644
--- a/wax-questions-service/src/EssayService/components/EssayPromptComponent.js
+++ b/wax-questions-service/src/EssayService/components/EssayPromptComponent.js
@@ -1,240 +1,14 @@
-/* eslint-disable react/prop-types */
-import React, { useContext, useRef, useEffect } from 'react';
-import styled from 'styled-components';
-import { EditorView } from 'prosemirror-view';
-import { EditorState, TextSelection, NodeSelection } from 'prosemirror-state';
-import { dropCursor } from 'prosemirror-dropcursor';
-import { gapCursor } from 'prosemirror-gapcursor';
-import { StepMap } from 'prosemirror-transform';
-import { keymap } from 'prosemirror-keymap';
-import { baseKeymap, chainCommands } from 'prosemirror-commands';
-import { undo, redo } from 'prosemirror-history';
-import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
-import {
- splitListItem,
- liftListItem,
- sinkListItem,
-} from 'prosemirror-schema-list';
-import Placeholder from '../../MultipleChoiceQuestionService/plugins/placeholder';
-import FakeCursorPlugin from '../../MultipleDropDownService/plugins/FakeCursorPlugin';
-
-const EditorWrapper = styled.div`
- border: none;
- display: flex;
- flex: 2 1 auto;
- width: 100%;
- justify-content: left;
-
- .ProseMirror {
- white-space: break-spaces;
- width: 100%;
- word-wrap: break-word;
-
- &:focus {
- outline: none;
- }
-
- :empty::before {
- content: 'Type your item';
- color: #aaa;
- float: left;
- font-style: italic;
- pointer-events: none;
- }
-
- p:first-child {
- margin: 0;
- }
-
- p.empty-node:first-child::before {
- content: attr(data-content);
- }
-
- .empty-node::before {
- color: rgb(170, 170, 170);
- float: left;
- font-style: italic;
- height: 0px;
- pointer-events: none;
- }
- }
-`;
-
-let WaxOverlays = () => true;
-
-const QuestionEditorComponent = ({
- node,
- view,
- getPos,
- placeholderText = 'Type your item',
- QuestionType = 'Multiple',
-}) => {
- const editorRef = useRef();
-
- const context = useContext(WaxContext);
- const {
- app,
- pmViews: { main },
- } = context;
- let questionView;
- const questionId = node.attrs.id;
- const isEditable = main.props.editable(editable => {
- return editable;
- });
-
- let finalPlugins = [FakeCursorPlugin(), gapCursor(), dropCursor()];
-
- const createKeyBindings = () => {
- const keys = getKeys();
- Object.keys(baseKeymap).forEach(key => {
- if (keys[key]) {
- keys[key] = chainCommands(keys[key], baseKeymap[key]);
- } else {
- keys[key] = baseKeymap[key];
- }
- });
- return keys;
- };
-
- const pressEnter = (state, dispatch) => {
- if (state.selection.node && state.selection.node.type.name === 'image') {
- const { $from, to } = state.selection;
-
- const same = $from.sharedDepth(to);
-
- const pos = $from.before(same);
- dispatch(state.tr.setSelection(NodeSelection.create(state.doc, pos)));
- return true;
- }
- // LISTS
- if (splitListItem(state.schema.nodes.list_item)(state)) {
- splitListItem(state.schema.nodes.list_item)(state, dispatch);
- return true;
- }
-
- return false;
- };
-
- const getKeys = () => {
- return {
- 'Mod-z': () => undo(view.state, view.dispatch),
- 'Mod-y': () => redo(view.state, view.dispatch),
- 'Mod-[': liftListItem(view.state.schema.nodes.list_item),
- 'Mod-]': sinkListItem(view.state.schema.nodes.list_item),
- Enter: pressEnter,
- };
- };
-
- const plugins = [keymap(createKeyBindings()), ...app.getPlugins()];
-
- const createPlaceholder = placeholder => {
- return Placeholder({
- content: placeholder,
- });
- };
-
- finalPlugins = finalPlugins.concat([
- createPlaceholder(placeholderText),
- ...plugins,
- ]);
-
- useEffect(() => {
- WaxOverlays = ComponentPlugin('waxOverlays');
- questionView = new EditorView(
- {
- mount: editorRef.current,
- },
- {
- editable: () => isEditable,
- state: EditorState.create({
- doc: node,
- plugins: finalPlugins,
- }),
- dispatchTransaction,
- disallowedTools: ['MultipleChoice'],
- handleDOMEvents: {
- mousedown: () => {
- context.updateView({}, questionId);
- main.dispatch(
- main.state.tr
- .setMeta('outsideView', questionId)
- .setSelection(
- new TextSelection(
- main.state.tr.doc.resolve(
- getPos() +
- 1 +
- context.pmViews[questionId].state.selection.to,
- ),
- ),
- ),
- );
- // context.pmViews[activeViewId].dispatch(
- // context.pmViews[activeViewId].state.tr.setSelection(
- // TextSelection.between(
- // context.pmViews[activeViewId].state.selection.$anchor,
- // context.pmViews[activeViewId].state.selection.$head,
- // ),
- // ),
- // );
-
- context.updateView({}, questionId);
-
- if (questionView.hasFocus()) questionView.focus();
- },
- blur: (editorView, event) => {
- if (questionView && event.relatedTarget === null) {
- questionView.focus();
- }
- },
- },
- type: QuestionType,
- scrollMargin: 200,
- scrollThreshold: 200,
- attributes: {
- spellcheck: 'false',
- },
- },
- );
-
- // Set Each note into Wax's Context
- context.updateView(
- {
- [questionId]: questionView,
- },
- questionId,
- );
- if (questionView.hasFocus()) questionView.focus();
- }, []);
-
- const dispatchTransaction = tr => {
- const addToHistory = !tr.getMeta('exludeToHistoryFromOutside');
- const { state, transactions } = questionView.state.applyTransaction(tr);
- questionView.updateState(state);
- context.updateView({}, questionId);
-
- if (!tr.getMeta('fromOutside')) {
- const outerTr = view.state.tr;
- const offsetMap = StepMap.offset(getPos() + 1);
- for (let i = 0; i < transactions.length; i++) {
- const { steps } = transactions[i];
- for (let j = 0; j < steps.length; j++)
- outerTr.step(steps[j].map(offsetMap));
- }
- if (outerTr.docChanged)
- view.dispatch(
- outerTr
- .setMeta('outsideView', questionId)
- .setMeta('addToHistory', addToHistory),
- );
- }
- };
+import React from 'react';
+import EditorComponent from '../../MultipleChoiceQuestionService/components/EditorComponent';
+export default ({ node, view, getPos }) => {
return (
- <EditorWrapper>
- <div ref={editorRef} />
- <WaxOverlays activeViewId={questionId} />
- </EditorWrapper>
+ <EditorComponent
+ getPos={getPos}
+ node={node}
+ placeholderText="Provide response summary and rubric"
+ QuestionType="EssayQuestion"
+ view={view}
+ />
);
};
-
-export default QuestionEditorComponent;
diff --git a/wax-questions-service/src/EssayService/components/EssayQuestionComponent.js b/wax-questions-service/src/EssayService/components/EssayQuestionComponent.js
index 234b3c8cb..f4ec6b1fb 100644
--- a/wax-questions-service/src/EssayService/components/EssayQuestionComponent.js
+++ b/wax-questions-service/src/EssayService/components/EssayQuestionComponent.js
@@ -1,240 +1,14 @@
-/* eslint-disable react/prop-types */
-import React, { useContext, useRef, useEffect } from 'react';
-import styled from 'styled-components';
-import { EditorView } from 'prosemirror-view';
-import { EditorState, TextSelection, NodeSelection } from 'prosemirror-state';
-import { dropCursor } from 'prosemirror-dropcursor';
-import { gapCursor } from 'prosemirror-gapcursor';
-import { StepMap } from 'prosemirror-transform';
-import { keymap } from 'prosemirror-keymap';
-import { baseKeymap, chainCommands } from 'prosemirror-commands';
-import { undo, redo } from 'prosemirror-history';
-import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
-import {
- splitListItem,
- liftListItem,
- sinkListItem,
-} from 'prosemirror-schema-list';
-import Placeholder from '../../MultipleChoiceQuestionService/plugins/placeholder';
-import FakeCursorPlugin from '../../MultipleDropDownService/plugins/FakeCursorPlugin';
-
-const EditorWrapper = styled.div`
- border: none;
- display: flex;
- flex: 2 1 auto;
- width: 100%;
- justify-content: left;
-
- .ProseMirror {
- white-space: break-spaces;
- width: 100%;
- word-wrap: break-word;
-
- &:focus {
- outline: none;
- }
-
- :empty::before {
- content: 'Type your item';
- color: #aaa;
- float: left;
- font-style: italic;
- pointer-events: none;
- }
-
- p:first-child {
- margin: 0;
- }
-
- p.empty-node:first-child::before {
- content: attr(data-content);
- }
-
- .empty-node::before {
- color: rgb(170, 170, 170);
- float: left;
- font-style: italic;
- height: 0px;
- pointer-events: none;
- }
- }
-`;
-
-let WaxOverlays = () => true;
-
-const QuestionEditorComponent = ({
- node,
- view,
- getPos,
- placeholderText = 'Type your item',
- QuestionType = 'Multiple',
-}) => {
- const editorRef = useRef();
-
- const context = useContext(WaxContext);
- const {
- app,
- pmViews: { main },
- } = context;
- let questionView;
- const questionId = node.attrs.id;
- const isEditable = main.props.editable(editable => {
- return editable;
- });
-
- let finalPlugins = [FakeCursorPlugin(), gapCursor(), dropCursor()];
-
- const createKeyBindings = () => {
- const keys = getKeys();
- Object.keys(baseKeymap).forEach(key => {
- if (keys[key]) {
- keys[key] = chainCommands(keys[key], baseKeymap[key]);
- } else {
- keys[key] = baseKeymap[key];
- }
- });
- return keys;
- };
-
- const pressEnter = (state, dispatch) => {
- if (state.selection.node && state.selection.node.type.name === 'image') {
- const { $from, to } = state.selection;
-
- const same = $from.sharedDepth(to);
-
- const pos = $from.before(same);
- dispatch(state.tr.setSelection(NodeSelection.create(state.doc, pos)));
- return true;
- }
- // LISTS
- if (splitListItem(state.schema.nodes.list_item)(state)) {
- splitListItem(state.schema.nodes.list_item)(state, dispatch);
- return true;
- }
-
- return false;
- };
-
- const getKeys = () => {
- return {
- 'Mod-z': () => undo(view.state, view.dispatch),
- 'Mod-y': () => redo(view.state, view.dispatch),
- 'Mod-[': liftListItem(view.state.schema.nodes.list_item),
- 'Mod-]': sinkListItem(view.state.schema.nodes.list_item),
- Enter: pressEnter,
- };
- };
-
- const plugins = [keymap(createKeyBindings()), ...app.getPlugins()];
-
- const createPlaceholder = placeholder => {
- return Placeholder({
- content: placeholder,
- });
- };
-
- finalPlugins = finalPlugins.concat([
- createPlaceholder(placeholderText),
- ...plugins,
- ]);
-
- useEffect(() => {
- WaxOverlays = ComponentPlugin('waxOverlays');
- questionView = new EditorView(
- {
- mount: editorRef.current,
- },
- {
- editable: () => isEditable,
- state: EditorState.create({
- doc: node,
- plugins: finalPlugins,
- }),
- dispatchTransaction,
- disallowedTools: ['MultipleChoice'],
- handleDOMEvents: {
- mousedown: () => {
- context.updateView({}, questionId);
- main.dispatch(
- main.state.tr
- .setMeta('outsideView', questionId)
- .setSelection(
- new TextSelection(
- main.state.tr.doc.resolve(
- getPos() +
- 1 +
- context.pmViews[questionId].state.selection.to,
- ),
- ),
- ),
- );
- // context.pmViews[activeViewId].dispatch(
- // context.pmViews[activeViewId].state.tr.setSelection(
- // TextSelection.between(
- // context.pmViews[activeViewId].state.selection.$anchor,
- // context.pmViews[activeViewId].state.selection.$head,
- // ),
- // ),
- // );
-
- context.updateView({}, questionId);
-
- if (questionView.hasFocus()) questionView.focus();
- },
- blur: (editorView, event) => {
- if (questionView && event.relatedTarget === null) {
- questionView.focus();
- }
- },
- },
- type: QuestionType,
- scrollMargin: 200,
- scrollThreshold: 200,
- attributes: {
- spellcheck: 'false',
- },
- },
- );
-
- // Set Each note into Wax's Context
- context.updateView(
- {
- [questionId]: questionView,
- },
- questionId,
- );
- if (questionView.hasFocus()) questionView.focus();
- }, []);
-
- const dispatchTransaction = tr => {
- const addToHistory = !tr.getMeta('exludeToHistoryFromOutside');
- const { state, transactions } = questionView.state.applyTransaction(tr);
- questionView.updateState(state);
- context.updateView({}, questionId);
-
- if (!tr.getMeta('fromOutside')) {
- const outerTr = view.state.tr;
- const offsetMap = StepMap.offset(getPos() + 1);
- for (let i = 0; i < transactions.length; i++) {
- const { steps } = transactions[i];
- for (let j = 0; j < steps.length; j++)
- outerTr.step(steps[j].map(offsetMap));
- }
- if (outerTr.docChanged)
- view.dispatch(
- outerTr
- .setMeta('outsideView', questionId)
- .setMeta('addToHistory', addToHistory),
- );
- }
- };
+import React from 'react';
+import EditorComponent from '../../MultipleChoiceQuestionService/components/EditorComponent';
+export default ({ node, view, getPos }) => {
return (
- <EditorWrapper>
- <div ref={editorRef} />
- <WaxOverlays activeViewId={questionId} />
- </EditorWrapper>
+ <EditorComponent
+ getPos={getPos}
+ node={node}
+ placeholderText="Type your essay item"
+ QuestionType="EssayQuestion"
+ view={view}
+ />
);
};
-
-export default QuestionEditorComponent;
diff --git a/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js b/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js
index 7e442fe30..f2b6f765f 100644
--- a/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js
+++ b/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js
@@ -78,7 +78,12 @@ export default ({ node, view, getPos }) => {
)}
</div>
<EssayQuestionContainer className="essay-question">
- <ContainerEditor getPos={getPos} node={node} view={view} />
+ <ContainerEditor
+ disallowedTools={['FillTheGap', 'MultipleChoice']}
+ getPos={getPos}
+ node={node}
+ view={view}
+ />
</EssayQuestionContainer>
</EssayQuestionWrapper>
);
diff --git a/wax-questions-service/src/EssayService/schema/essayContainerNode.js b/wax-questions-service/src/EssayService/schema/essayContainerNode.js
index 0afacd6dd..f2de45d7c 100644
--- a/wax-questions-service/src/EssayService/schema/essayContainerNode.js
+++ b/wax-questions-service/src/EssayService/schema/essayContainerNode.js
@@ -4,9 +4,7 @@ const essayContainerNode = {
class: { default: 'essay' },
},
group: 'block questions',
- atom: true,
- selectable: true,
- draggable: true,
+ isolating: true,
content: 'block+',
parseDOM: [
{
diff --git a/wax-questions-service/src/EssayService/schema/essayQuestionNode.js b/wax-questions-service/src/EssayService/schema/essayQuestionNode.js
index f9dbe4355..48ff5aaea 100644
--- a/wax-questions-service/src/EssayService/schema/essayQuestionNode.js
+++ b/wax-questions-service/src/EssayService/schema/essayQuestionNode.js
@@ -7,7 +7,7 @@ const essayQuestionNode = {
},
group: 'block questions',
content: 'block*',
- defining: true,
+ // defining: true,
parseDOM: [
{
diff --git a/wax-questions-service/src/FillTheGapQuestionService/components/ContainerEditor.js b/wax-questions-service/src/FillTheGapQuestionService/components/ContainerEditor.js
index 9bbf63ec9..f2988a4c8 100644
--- a/wax-questions-service/src/FillTheGapQuestionService/components/ContainerEditor.js
+++ b/wax-questions-service/src/FillTheGapQuestionService/components/ContainerEditor.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
import React, { useContext, useRef, useEffect } from 'react';
import styled from 'styled-components';
import { EditorView } from 'prosemirror-view';
@@ -29,7 +30,13 @@ const EditorWrapper = styled.div`
}
`;
-const ContainerEditor = ({ node, view, getPos }) => {
+const ContainerEditor = ({
+ node,
+ view,
+ getPos,
+ disallowedTools,
+ isNotEditable = false,
+}) => {
const editorRef = useRef();
const context = useContext(WaxContext);
@@ -40,10 +47,12 @@ const ContainerEditor = ({ node, view, getPos }) => {
let gapContainerView;
const questionId = node.attrs.id;
- const isEditable = main.props.editable(editable => {
+ let isEditable = main.props.editable(editable => {
return editable;
});
+ if (isNotEditable) isEditable = false;
+
let finalPlugins = [];
const createKeyBindings = () => {
@@ -77,14 +86,7 @@ const ContainerEditor = ({ node, view, getPos }) => {
plugins: finalPlugins,
}),
dispatchTransaction,
- disallowedTools: [
- 'Images',
- 'Lists',
- 'lift',
- 'Tables',
- 'FillTheGap',
- 'MultipleChoice',
- ],
+ disallowedTools,
type: 'filltheGapContaier',
handleDOMEvents: {
mousedown: () => {
diff --git a/wax-questions-service/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js b/wax-questions-service/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
index 79ec1fcf8..f0a9c1ec9 100644
--- a/wax-questions-service/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
+++ b/wax-questions-service/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
@@ -144,7 +144,19 @@ export default ({ node, view, getPos }) => {
)}
</div>
<FillTheGapContainer className="fill-the-gap">
- <ContainerEditor getPos={getPos} node={node} view={view} />
+ <ContainerEditor
+ disallowedTools={[
+ 'Images',
+ 'Lists',
+ 'lift',
+ 'Tables',
+ 'FillTheGap',
+ 'MultipleChoice',
+ ]}
+ getPos={getPos}
+ node={node}
+ view={view}
+ />
{!testMode && !(readOnly && feedback === '') && (
<FeedbackComponent
--
GitLab