diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js index baed57f47ca8cabab56848efe5910e6ea477edd2..84ecaa16980d7f8cbd5e8006bb06b2dadb7cfa64 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 8cbe70bda8265efbb055b12a27de14575956c40b..d536480d98c6e3fcbdd858ddee32d93e477a6f19 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 234b3c8cb0586268734182d8a476862cd723eaf6..75f01b6a5212f233c005580055b4081a5797ec99 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 234b3c8cb0586268734182d8a476862cd723eaf6..7785ade69826f8e422e679e29671f066e093d8a3 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 234b3c8cb0586268734182d8a476862cd723eaf6..f4ec6b1fb58abf4078225ac4902c56990502e682 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 7e442fe30c93f3e95abd9aa38c35ae205910abb3..f2b6f765ffdda5045cbdfbaca32b98428f07927f 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 0afacd6dd44cdf719ee660e23957898a34dcf670..f2de45d7c418667cc2329ef42bd983712ce42fb0 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 f9dbe435564830c4c82b930ed72a0ef471500dd1..48ff5aaeaf6e9e8919070d458d2dc2e7363cbf74 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 9bbf63ec9a9271953af220f1f456e34aeb59ed27..f2988a4c85df77095c6876aa7b6c30c6a9106338 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 79ec1fcf8f0dd8a820cc40ee08f055e0ced6e389..f0a9c1ec9513e4e806b56aad4dbc7958791ae14d 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