diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index baed57f47ca8cabab56848efe5910e6ea477edd2..d0c78713f6b9bac2cdabebbf787fad94112a384d 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);
});
};
@@ -68,32 +68,6 @@ const SubmitButton = styled.button`
`}
`;
-const initialContent = `<p class="paragraph"></p>
-<div id="1624fa06-2075-488a-9912-9794a3763aca" class="multiple-drop-down-container" feedback="">
- <p class="paragraph">Lorem ipsum dolor sit amet,<span id="fa9ff44d-19a6-4f47-99d9-d77d3dc02fbf" class="multiple-drop-down-option" options="[{"label":"option 1","value":"6c4aa0f3-43b1-40a7-a066-bc73449523df"},{"label":"option 2","value":"29365b0c-c00d-40c1-8a5e-118dbdf47e50"},{"label":"option 3","value":"743a425e-6340-4a72-a07c-d2e78154fcc8"}]" correct="6c4aa0f3-43b1-40a7-a066-bc73449523df" answer="29365b0c-c00d-40c1-8a5e-118dbdf47e50"></span>consectetur adipiscing elit. Nulla cursus ultricies enim, id condimentum dui facilisis a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed euismod posuere orci. Praesent consectetur augue ut lorem suscipit, nec molestie libero pellentesque.</p>
- <p class="paragraph">Nullam porttitor ligula neque. In aliquam<span id="f8380222-11fa-46e7-91a9-0bf67ff3d1d7" class="multiple-drop-down-option" options="[{"label":"option 4","value":"4e2c45fe-0aad-4c59-9a92-ed44f01a82e2"},{"label":"option 5","value":"15e27b91-682a-4e10-a5d0-149192fd2e4c"},{"label":"option 6","value":"886c921d-2e75-41ea-a1a6-2d49e7921a57"},{"label":"option 7","value":"d14c2409-f66a-47d1-8f63-72686d24df37"}]" correct="4e2c45fe-0aad-4c59-9a92-ed44f01a82e2" answer="4e2c45fe-0aad-4c59-9a92-ed44f01a82e2"></span> ex neque, sit amet sagittis nulla volutpat sed. Nulla blandit facilisis ante, vel tempus ante porta quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer nulla tellus, dictum at laoreet eu, hendrerit at quam. Sed consectetur, neque vel ornare malesuada, eros sem commodo purus, <span id="c13f5243-03c0-433c-8e44-440d536d9150" class="multiple-drop-down-option" options="[{"label":"option 9","value":"3b9cd3b4-9e70-45de-975d-31407c48812c"},{"label":"option 10","value":"3baf86a8-a3fa-4e64-bfe8-f01ce4320489"},{"label":"option 11","value":"f1c6023c-5cde-445a-b9fb-cc23f06c8132"}]" correct="f1c6023c-5cde-445a-b9fb-cc23f06c8132" answer="f1c6023c-5cde-445a-b9fb-cc23f06c8132"></span> sagittis volutpat elit leo in diam. Aliquam mattis, est non placerat euismod, nisl nisl vestibulum mauris, non interdum dui urna et tellus.</p>
-</div>
-<p class="paragraph"></p>
-<div id="2257aaf4-20cf-44ff-bd45-0e0a4561b764" class="matching-container" options="[{"label":"option 1","value":"941cebeb-58bd-44c5-bf42-c78d20c23b7a"},{"label":"option 2","value":"ab2e7cfc-c700-4ba2-9ac3-3040974f67bf"}]" feedback="">
- <p class="paragraph">
- <div id="2bf9d3ca-166d-4354-9ebf-5d0fc6e75d8d" class="matching-option" isfirst="true" answer="">some text</div>
- </p>
-</div>
-<div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc323" class="multiple-choice">
- <div class="multiple-choice-question" id="38de8538-647a-489d-8474-f92d0d256c32">
- <p class="paragraph">question</p>
- </div>
- <div class="multiple-choice-option" id="debb868e-bbfe-4ba2-bf93-c963153ff791" correct="false" answer="false" feedback="feedback 1">
- <p class="paragraph">answer 1</p>
- </div>
- <div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" answer="false" feedback="feedback 2">
- <p class="paragraph">answer 2</p>
- </div>
-</div>
-<div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback">
- <p class="paragraph">first <span id="16ec8f33-db5b-4839-9567-8aa73b776bcf" class="fill-the-gap" answer="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" answer="">answer 4; answer5;</span></p>
-</div>`;
-
// const initialContent = {
// type: 'doc',
// content: [
@@ -118,6 +92,8 @@ const initialContent = `<p class="paragraph"></p>
// ],
// };
+const initialContent = ``;
+
const Hhmi = () => {
const [stateProps, setStateProps] = useState({
readOnly: false,
diff --git a/wax-prosemirror-core/src/config/defaultServices/ShortCutsService/ShortCuts.js b/wax-prosemirror-core/src/config/defaultServices/ShortCutsService/ShortCuts.js
index a2dfada7f8d52fea8344cb3f61e54fbb9ee6661b..b6f5ad26d6ea07cd2757c44c9cd7f33843429f00 100644
--- a/wax-prosemirror-core/src/config/defaultServices/ShortCutsService/ShortCuts.js
+++ b/wax-prosemirror-core/src/config/defaultServices/ShortCutsService/ShortCuts.js
@@ -36,9 +36,10 @@ const backSpaceShortCut = (state, dispatch, view) => {
state.doc.nodesBetween($from.pos, $to.pos, (node, from) => {
if (node.type.name === 'fill_the_gap_container') {
- const index = $from.index($from.depth);
- const $beforePos = state.doc.resolve($from.posAtIndex(index - 1));
- dispatch(state.tr.setSelection(new NodeSelection($beforePos)));
+ // dispatch(state.tr.delete(from, from + node.nodeSize));
+ // const index = $from.index($from.depth);
+ // const $beforePos = state.doc.resolve($from.posAtIndex(index - 1));
+ // dispatch(state.tr.setSelection(new NodeSelection($beforePos)));
}
});
diff --git a/wax-questions-service/src/EssayService/EssayQuestion.js b/wax-questions-service/src/EssayService/EssayQuestion.js
index a177ad7fb022123d75e9f32c89b557197d2ee521..80aab753ea3ff45fa40a40d4f24d18cbb6eef649 100644
--- a/wax-questions-service/src/EssayService/EssayQuestion.js
+++ b/wax-questions-service/src/EssayService/EssayQuestion.js
@@ -37,13 +37,15 @@ const createEmptyParagraph = (context, newAnswerId) => {
if (pmViews[newAnswerId].dispatch) {
const type = pmViews.main.state.schema.nodes.paragraph;
pmViews[newAnswerId].dispatch(
- pmViews[newAnswerId].state.tr.insert(0, type.create()),
+ pmViews[newAnswerId].state.tr
+ .insert(0, type.create())
+ .setMeta('exludeToHistoryFromOutside', true),
);
}
pmViews[newAnswerId].dispatch(
pmViews[newAnswerId].state.tr.setSelection(
TextSelection.between(
- pmViews[newAnswerId].state.selection.$anchor,
+ pmViews[newAnswerId].state.selection.$head,
pmViews[newAnswerId].state.selection.$head,
),
),
@@ -116,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/EssayQuestionContainerNodeView.js b/wax-questions-service/src/EssayService/EssayQuestionContainerNodeView.js
new file mode 100644
index 0000000000000000000000000000000000000000..711f8ba5bf694face5f6f7d30560bf828cfe5c33
--- /dev/null
+++ b/wax-questions-service/src/EssayService/EssayQuestionContainerNodeView.js
@@ -0,0 +1,40 @@
+import { QuestionsNodeView } from 'wax-prosemirror-core';
+
+export default class EssayQuestionContainerNodeView extends QuestionsNodeView {
+ constructor(
+ node,
+ view,
+ getPos,
+ decorations,
+ createPortal,
+ Component,
+ context,
+ ) {
+ super(node, view, getPos, decorations, createPortal, Component, context);
+
+ this.node = node;
+ this.outerView = view;
+ this.getPos = getPos;
+ this.context = context;
+ }
+
+ static name() {
+ return 'essay_container';
+ }
+
+ selectNode() {
+ this.context.pmViews[this.node.attrs.id].focus();
+ }
+
+ stopEvent(event) {
+ if (event.target.type === 'textarea' || !event.target.type) {
+ return true;
+ }
+
+ return (
+ this.context.pmViews[this.node.attrs.id] !== undefined &&
+ event.target !== undefined &&
+ this.context.pmViews[this.node.attrs.id].dom.contains(event.target)
+ );
+ }
+}
diff --git a/wax-questions-service/src/EssayService/EssayService.js b/wax-questions-service/src/EssayService/EssayService.js
index 583ce1dd0056086a173c706aa8895a22db087a94..0782fb9dd1dcd449eeacb59c52d357e634991cad 100644
--- a/wax-questions-service/src/EssayService/EssayService.js
+++ b/wax-questions-service/src/EssayService/EssayService.js
@@ -1,5 +1,6 @@
import { Service } from 'wax-prosemirror-core';
import EssayQuestion from './EssayQuestion';
+import EssayQuestionContainerComponent from './components/EssayQuestionContainerComponent';
import essayContainerNode from './schema/essayContainerNode';
import essayPromptNode from './schema/essayPromptNode';
import essayQuestionNode from './schema/essayQuestionNode';
@@ -7,6 +8,7 @@ import essayAnswerNode from './schema/essayAnswerNode';
import EssayQuestionComponent from './components/EssayQuestionComponent';
import EssayPromptComponent from './components/EssayPromptComponent';
import EssayAnswerComponent from './components/EssayAnswerComponent';
+import EssayQuestionContainerNodeView from './EssayQuestionContainerNodeView';
import EssayQuestionNodeView from './EssayQuestionNodeView';
import EssayPromptNodeView from './EssayPromptNodeView';
import EssayAnswerNodeView from './EssayAnswerNodeView';
@@ -34,6 +36,12 @@ class EssayService extends Service {
essay_answer: essayAnswerNode,
});
+ addPortal({
+ nodeView: EssayQuestionContainerNodeView,
+ component: EssayQuestionContainerComponent,
+ context: this.app,
+ });
+
addPortal({
nodeView: EssayQuestionNodeView,
component: EssayQuestionComponent,
diff --git a/wax-questions-service/src/EssayService/components/ContainerEditor.js b/wax-questions-service/src/EssayService/components/ContainerEditor.js
deleted file mode 100644
index c1cf6b5c59f6b17253c64f825065a7090fa36dec..0000000000000000000000000000000000000000
--- a/wax-questions-service/src/EssayService/components/ContainerEditor.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/* eslint-disable react/prop-types */
-
-import React, { useContext, useRef, useEffect } from 'react';
-import styled from 'styled-components';
-import { EditorView } from 'prosemirror-view';
-import { EditorState } from 'prosemirror-state';
-import { StepMap } from 'prosemirror-transform';
-import { WaxContext } from 'wax-prosemirror-core';
-
-const EditorWrapper = styled.div`
- > .ProseMirror {
- padding: 0px;
- &:focus {
- outline: none;
- }
- }
-`;
-
-const ContainerEditor = ({ node, view, getPos }) => {
- const editorRef = useRef();
-
- const context = useContext(WaxContext);
- const { app } = context;
-
- let containerView;
- const questionId = node.attrs.id;
-
- useEffect(() => {
- containerView = new EditorView(
- {
- mount: editorRef.current,
- },
- {
- editable: () => false,
- state: EditorState.create({
- doc: node,
- plugins: [...app.getPlugins()],
- }),
- dispatchTransaction,
- disallowedTools: [
- 'Images',
- 'Lists',
- 'lift',
- 'Tables',
- 'FillTheGap',
- 'MultipleChoice',
- ],
- },
- );
-
- // Set Each note into Wax's Context
- context.updateView(
- {
- [questionId]: containerView,
- },
- questionId,
- );
- }, []);
-
- const dispatchTransaction = tr => {
- const { state, transactions } = containerView.state.applyTransaction(tr);
- containerView.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));
- }
- };
-
- return (
- <EditorWrapper>
- <div ref={editorRef} />
- </EditorWrapper>
- );
-};
-
-export default ContainerEditor;
diff --git a/wax-questions-service/src/EssayService/components/EditorComponent.js b/wax-questions-service/src/EssayService/components/EditorComponent.js
deleted file mode 100644
index 02a97a20723c50bf6475affb760ff63bb388b53b..0000000000000000000000000000000000000000
--- a/wax-questions-service/src/EssayService/components/EditorComponent.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import React, { useContext, useRef, useEffect } from 'react';
-import styled from 'styled-components';
-import { EditorView } from 'prosemirror-view';
-import { EditorState, TextSelection } from 'prosemirror-state';
-import { StepMap } from 'prosemirror-transform';
-import { keymap } from 'prosemirror-keymap';
-import { baseKeymap } from 'prosemirror-commands';
-import { undo, redo } from 'prosemirror-history';
-import { WaxContext } from 'wax-prosemirror-core';
-import Placeholder from '../../MultipleChoiceQuestionService/plugins/placeholder';
-
-const EditorWrapper = styled.div`
- border: none;
- display: flex;
- flex: 2 1 auto;
- justify-content: left;
-
- .ProseMirror {
- white-space: break-spaces;
- width: 100%;
- word-wrap: break-word;
-
- &:focus {
- outline: none;
- }
-
- 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;
- }
- }
-`;
-
-const EditorComponent = ({ node, view, getPos }) => {
- const editorRef = useRef();
-
- const context = useContext(WaxContext);
- const {
- app,
- activeViewId,
- pmViews: { main },
- } = context;
- let questionView;
- const questionId = node.attrs.id;
- const isEditable = main.props.editable(editable => {
- return editable;
- });
-
- let finalPlugins = [];
-
- const createKeyBindings = () => {
- const keys = getKeys();
- Object.keys(baseKeymap).forEach(key => {
- keys[key] = baseKeymap[key];
- });
- return keys;
- };
-
- const getKeys = () => {
- return {
- 'Mod-z': () => undo(view.state, view.dispatch),
- 'Mod-y': () => redo(view.state, view.dispatch),
- };
- };
-
- const plugins = [keymap(createKeyBindings()), ...app.getPlugins()];
-
- const createPlaceholder = placeholder => {
- return Placeholder({
- content: placeholder,
- });
- };
-
- finalPlugins = finalPlugins.concat([
- createPlaceholder('Type your essay'),
- ...plugins,
- ]);
-
- useEffect(() => {
- questionView = new EditorView(
- {
- mount: editorRef.current,
- },
- {
- editable: () => isEditable,
- state: EditorState.create({
- doc: node,
- plugins: finalPlugins,
- }),
-
- dispatchTransaction,
- disallowedTools: ['Images', 'Lists', 'lift', 'MultipleChoice'],
- handleDOMEvents: {
- mousedown: () => {
- 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();
- },
- },
-
- attributes: {
- spellcheck: 'false',
- },
- },
- );
-
- // Set Each note into Wax's Context
- context.updateView(
- {
- [questionId]: questionView,
- },
- questionId,
- );
- questionView.focus();
- }, []);
-
- const dispatchTransaction = tr => {
- 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));
- }
- };
-
- return (
- <EditorWrapper>
- <div ref={editorRef} />
- </EditorWrapper>
- );
-};
-
-export default EditorComponent;
diff --git a/wax-questions-service/src/EssayService/components/EssayAnswerComponent.js b/wax-questions-service/src/EssayService/components/EssayAnswerComponent.js
index 3eb02cf089c9e58d913e5530d2571be52a31a955..1d4bca82bb2f8a40a9fc6814e31428426bc2fc4f 100644
--- a/wax-questions-service/src/EssayService/components/EssayAnswerComponent.js
+++ b/wax-questions-service/src/EssayService/components/EssayAnswerComponent.js
@@ -1,200 +1,32 @@
-import React, { useContext, useRef, useEffect } from 'react';
+import React, { useContext } from 'react';
import styled from 'styled-components';
-import { EditorView } from 'prosemirror-view';
-import { EditorState, TextSelection, NodeSelection } from 'prosemirror-state';
-import { StepMap } from 'prosemirror-transform';
-import { keymap } from 'prosemirror-keymap';
-import { baseKeymap, chainCommands } from 'prosemirror-commands';
-import { undo, redo } from 'prosemirror-history';
import { WaxContext } from 'wax-prosemirror-core';
-import {
- splitListItem,
- liftListItem,
- sinkListItem,
-} from 'prosemirror-schema-list';
-import Placeholder from '../../MultipleChoiceQuestionService/plugins/placeholder';
+import EditorComponent from '../../MultipleChoiceQuestionService/components/EditorComponent';
const EditorWrapper = styled.div`
- border: none;
- display: flex;
- flex: 2 1 auto;
- justify-content: left;
display: ${props =>
props.testMode || props.showFeedBack ? 'block' : 'none'};
-
- .ProseMirror {
- white-space: break-spaces;
- width: 100%;
- word-wrap: break-word;
-
- &:focus {
- outline: none;
- }
-
- 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;
- }
- }
`;
-const EssayAnswerComponent = ({ node, view, getPos }) => {
- const editorRef = useRef();
+export default ({ node, view, getPos }) => {
const context = useContext(WaxContext);
const {
- app,
pmViews: { main },
} = context;
- let essayAnswerView;
- const questionId = node.attrs.id;
-
const customProps = main.props.customValues;
const { testMode, showFeedBack } = customProps;
- let finalPlugins = [];
-
- 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('Type your essay answer'),
- ...plugins,
- ]);
-
- useEffect(() => {
- essayAnswerView = new EditorView(
- {
- mount: editorRef.current,
- },
- {
- editable: () => testMode,
- 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() +
- 2 +
- context.pmViews[questionId].state.selection.to,
- ),
- ),
- ),
- );
- context.updateView({}, questionId);
-
- if (essayAnswerView.hasFocus()) essayAnswerView.focus();
- },
- blur: (editorView, event) => {
- if (essayAnswerView && event.relatedTarget === null) {
- essayAnswerView.focus();
- }
- },
- },
-
- attributes: {
- spellcheck: 'false',
- },
- },
- );
-
- // Set Each note into Wax's Context
- context.updateView(
- {
- [questionId]: essayAnswerView,
- },
- questionId,
- );
- if (essayAnswerView.hasFocus()) essayAnswerView.focus();
- }, []);
-
- const dispatchTransaction = tr => {
- const outerTr = main.state.tr;
- main.dispatch(outerTr.setMeta('outsideView', questionId));
- const { state, transactions } = essayAnswerView.state.applyTransaction(tr);
- context.updateView({}, questionId);
- essayAnswerView.updateState(state);
- if (!tr.getMeta('fromOutside')) {
- 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)
- main.dispatch(outerTr.setMeta('outsideView', questionId));
- }
- };
-
return (
- <EditorWrapper testMode={testMode} showFeedBack={showFeedBack}>
- <div ref={editorRef} />
+ <EditorWrapper showFeedBack={showFeedBack} testMode={testMode}>
+ <EditorComponent
+ forceEditable={testMode}
+ getPos={getPos}
+ node={node}
+ placeholderText="Type your essay answer"
+ QuestionType="EssayQuestion"
+ view={view}
+ />
</EditorWrapper>
);
};
-
-export default EssayAnswerComponent;
diff --git a/wax-questions-service/src/EssayService/components/EssayPromptComponent.js b/wax-questions-service/src/EssayService/components/EssayPromptComponent.js
index b90196a9f242ece96fd748ad1658286f8450937d..185b56f5869bff74b752c01371a66cdcaaed90d4 100644
--- a/wax-questions-service/src/EssayService/components/EssayPromptComponent.js
+++ b/wax-questions-service/src/EssayService/components/EssayPromptComponent.js
@@ -1,203 +1,30 @@
-import React, { useContext, useRef, useEffect } from 'react';
+import React, { useContext } from 'react';
import styled from 'styled-components';
-import { EditorView } from 'prosemirror-view';
-import { EditorState, TextSelection, NodeSelection } from 'prosemirror-state';
-import { StepMap } from 'prosemirror-transform';
-import { keymap } from 'prosemirror-keymap';
-import { baseKeymap, chainCommands } from 'prosemirror-commands';
-import { undo, redo } from 'prosemirror-history';
import { WaxContext } from 'wax-prosemirror-core';
-import {
- splitListItem,
- liftListItem,
- sinkListItem,
-} from 'prosemirror-schema-list';
-import Placeholder from '../../MultipleChoiceQuestionService/plugins/placeholder';
+import EditorComponent from '../../MultipleChoiceQuestionService/components/EditorComponent';
const EditorWrapper = styled.div`
- border: none;
- display: flex;
- flex: 2 1 auto;
- justify-content: left;
display: ${props => (props.testMode ? 'none' : 'block')};
-
- .ProseMirror {
- white-space: break-spaces;
- width: 100%;
- word-wrap: break-word;
-
- &:focus {
- outline: none;
- }
-
- 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;
- }
- }
`;
-const EssayPromptComponent = ({ node, view, getPos }) => {
- const editorRef = useRef();
+export default ({ node, view, getPos }) => {
const context = useContext(WaxContext);
const {
- app,
pmViews: { main },
} = context;
- let essayPromptView;
- const questionId = node.attrs.id;
-
- const isEditable = main.props.editable(editable => {
- return editable;
- });
-
const customProps = main.props.customValues;
const { testMode } = customProps;
- let finalPlugins = [];
-
- 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('Provide response summary and rubric'),
- ...plugins,
- ]);
-
- useEffect(() => {
- essayPromptView = 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() +
- 2 +
- context.pmViews[questionId].state.selection.to,
- ),
- ),
- ),
- );
- context.updateView({}, questionId);
-
- if (essayPromptView.hasFocus()) essayPromptView.focus();
- },
- blur: (editorView, event) => {
- if (essayPromptView && event.relatedTarget === null) {
- essayPromptView.focus();
- }
- },
- },
-
- attributes: {
- spellcheck: 'false',
- },
- },
- );
-
- // Set Each note into Wax's Context
- context.updateView(
- {
- [questionId]: essayPromptView,
- },
- questionId,
- );
- if (essayPromptView.hasFocus()) essayPromptView.focus();
- }, []);
-
- const dispatchTransaction = tr => {
- const outerTr = main.state.tr;
- main.dispatch(outerTr.setMeta('outsideView', questionId));
- const { state, transactions } = essayPromptView.state.applyTransaction(tr);
- context.updateView({}, questionId);
- essayPromptView.updateState(state);
- if (!tr.getMeta('fromOutside')) {
- 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)
- main.dispatch(outerTr.setMeta('outsideView', questionId));
- }
- };
-
return (
<EditorWrapper testMode={testMode}>
- <div ref={editorRef} />
+ <EditorComponent
+ getPos={getPos}
+ node={node}
+ placeholderText="Provide response summary and rubric"
+ QuestionType="EssayQuestion"
+ view={view}
+ />
</EditorWrapper>
);
};
-
-export default EssayPromptComponent;
diff --git a/wax-questions-service/src/EssayService/components/EssayQuestionComponent.js b/wax-questions-service/src/EssayService/components/EssayQuestionComponent.js
index 278368d6a31c7a889b7ddfb3f8fbf3ba90da22d3..f4ec6b1fb58abf4078225ac4902c56990502e682 100644
--- a/wax-questions-service/src/EssayService/components/EssayQuestionComponent.js
+++ b/wax-questions-service/src/EssayService/components/EssayQuestionComponent.js
@@ -1,203 +1,14 @@
-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 { StepMap } from 'prosemirror-transform';
-import { keymap } from 'prosemirror-keymap';
-import { baseKeymap, chainCommands } from 'prosemirror-commands';
-import { undo, redo } from 'prosemirror-history';
-import { WaxContext } from 'wax-prosemirror-core';
-import {
- splitListItem,
- liftListItem,
- sinkListItem,
-} from 'prosemirror-schema-list';
-import Placeholder from '../../MultipleChoiceQuestionService/plugins/placeholder';
-
-const EditorWrapper = styled.div`
- border: none;
- display: flex;
- flex: 2 1 auto;
- justify-content: left;
-
- .ProseMirror {
- white-space: break-spaces;
- width: 100%;
- word-wrap: break-word;
-
- &:focus {
- outline: none;
- }
-
- 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;
- }
- }
-`;
-const EssayQuestionComponent = ({ node, view, getPos }) => {
- const editorRef = useRef();
-
- const context = useContext(WaxContext);
- const {
- app,
- pmViews: { main },
- } = context;
-
- let essayQuestionView;
- const questionId = node.attrs.id;
- const isEditable = main.props.editable(editable => {
- return editable;
- });
-
- let finalPlugins = [];
-
- 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('Type your essay item'),
- ...plugins,
- ]);
-
- useEffect(() => {
- essayQuestionView = 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() +
- 2 +
- context.pmViews[questionId].state.selection.to,
- ),
- ),
- ),
- );
- context.updateView({}, questionId);
-
- if (essayQuestionView.hasFocus()) essayQuestionView.focus();
- },
- blur: (editorView, event) => {
- if (essayQuestionView && event.relatedTarget === null) {
- essayQuestionView.focus();
- }
- },
- },
- handleClickOn: () => {
- context.updateView({}, questionId);
- },
-
- attributes: {
- spellcheck: 'false',
- },
- },
- );
-
- // Set Each note into Wax's Context
- context.updateView(
- {
- [questionId]: essayQuestionView,
- },
- questionId,
- );
- if (essayQuestionView.hasFocus()) essayQuestionView.focus();
- }, []);
-
- const dispatchTransaction = tr => {
- const outerTr = main.state.tr;
- main.dispatch(outerTr.setMeta('outsideView', questionId));
- const { state, transactions } = essayQuestionView.state.applyTransaction(
- tr,
- );
- context.updateView({}, questionId);
- essayQuestionView.updateState(state);
- if (!tr.getMeta('fromOutside')) {
- 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)
- main.dispatch(outerTr.setMeta('outsideView', questionId));
- }
- };
+import React from 'react';
+import EditorComponent from '../../MultipleChoiceQuestionService/components/EditorComponent';
+export default ({ node, view, getPos }) => {
return (
- <EditorWrapper>
- <div ref={editorRef} />
- </EditorWrapper>
+ <EditorComponent
+ getPos={getPos}
+ node={node}
+ placeholderText="Type your essay item"
+ QuestionType="EssayQuestion"
+ view={view}
+ />
);
};
-
-export default EssayQuestionComponent;
diff --git a/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js b/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..d8452435596db4ec4bcb1f3fb4a0d8a7acdcfd06
--- /dev/null
+++ b/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js
@@ -0,0 +1,109 @@
+import React, { useContext } from 'react';
+import { WaxContext, DocumentHelpers, Icon } from 'wax-prosemirror-core';
+
+import styled from 'styled-components';
+import ContainerEditor from '../../FillTheGapQuestionService/components/ContainerEditor';
+
+const EssayQuestionWrapper = styled.div`
+ margin: 0px 38px 15px 38px;
+ margin-top: 10px;
+`;
+const EssayQuestionContainerTool = styled.div`
+ border: 3px solid #f5f5f7;
+ border-bottom: none;
+ height: 32px;
+ span:first-of-type {
+ position: relative;
+ top: 3px;
+ }
+`;
+
+const ActionButton = styled.button`
+ background: transparent;
+ cursor: pointer;
+ margin-top: 16px;
+ border: none;
+ position: relative;
+ bottom: 14px;
+ left: 6px;
+ float: right;
+`;
+
+const StyledIconActionRemove = styled(Icon)`
+ height: 24px;
+ width: 24px;
+`;
+
+const EssayQuestionContainer = styled.div`
+ border: 3px solid #f5f5f7;
+ margin-bottom: 30px;
+`;
+
+export default ({ node, view, getPos }) => {
+ const context = useContext(WaxContext);
+ const {
+ pmViews: { main },
+ } = context;
+
+ const customProps = main.props.customValues;
+ const { testMode } = customProps;
+
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+
+ const readOnly = !isEditable;
+
+ const removeQuestion = () => {
+ const allNodes = getNodes(context.pmViews.main);
+
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ context.pmViews.main.dispatch(
+ context.pmViews.main.state.tr.delete(
+ singleNode.pos,
+ singleNode.pos + singleNode.node.nodeSize,
+ ),
+ );
+ }
+ });
+ };
+
+ return (
+ <EssayQuestionWrapper>
+ <div>
+ {!testMode && !readOnly && (
+ <EssayQuestionContainerTool>
+ <ActionButton
+ aria-label="delete this question"
+ onClick={removeQuestion}
+ type="button"
+ >
+ <StyledIconActionRemove name="deleteOutlinedQuestion" />
+ </ActionButton>
+ </EssayQuestionContainerTool>
+ )}
+ </div>
+ <EssayQuestionContainer className="essay-question">
+ <ContainerEditor
+ disallowedTools={['FillTheGap', 'MultipleChoice']}
+ getPos={getPos}
+ isNotEditable
+ node={node}
+ view={view}
+ />
+ </EssayQuestionContainer>
+ </EssayQuestionWrapper>
+ );
+};
+
+const getNodes = view => {
+ const allNodes = DocumentHelpers.findBlockNodes(view.state.doc);
+ const fillTheGapContainerNodes = [];
+ allNodes.forEach(node => {
+ if (node.node.type.name === 'essay_container') {
+ fillTheGapContainerNodes.push(node);
+ }
+ });
+ return fillTheGapContainerNodes;
+};
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 3e62759ffbf5973756795cc31b680339f9cf1101..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: () => {
@@ -136,7 +138,11 @@ const ContainerEditor = ({ node, view, getPos }) => {
outerTr.step(steps[j].map(offsetMap));
}
if (outerTr.docChanged)
- view.dispatch(outerTr.setMeta('outsideView', questionId));
+ view.dispatch(
+ outerTr
+ .setMeta('outsideView', questionId)
+ .setMeta('addToHistory', tr.getMeta('addToHistory')),
+ );
}
};
diff --git a/wax-questions-service/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js b/wax-questions-service/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
index 0320b05d69c47d585e0bb9964ea820e90a41fa62..f0a9c1ec9513e4e806b56aad4dbc7958791ae14d 100644
--- a/wax-questions-service/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
+++ b/wax-questions-service/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
@@ -119,7 +119,6 @@ export default ({ node, view, getPos }) => {
return (
<FillTheGapWrapper>
<div>
- {/* <span> Fill The Gap</span> */}
{!testMode && !readOnly && (
<FillTheGapContainerTool>
<FillTheGapTool />
@@ -145,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
diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js b/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js
index 24d4bfbf4fb4d2fef5dcfca1ffc2f4c42be8ebb8..421f4aec87f83f449da19d89ebba9eddf9d1ae6d 100644
--- a/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js
+++ b/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js
@@ -68,6 +68,7 @@ const QuestionEditorComponent = ({
getPos,
placeholderText = 'Type your item',
QuestionType = 'Multiple',
+ forceEditable = false,
}) => {
const editorRef = useRef();
@@ -78,9 +79,10 @@ const QuestionEditorComponent = ({
} = context;
let questionView;
const questionId = node.attrs.id;
- const isEditable = main.props.editable(editable => {
+ let isEditable = main.props.editable(editable => {
return editable;
});
+ if (forceEditable) isEditable = true;
let finalPlugins = [FakeCursorPlugin(), gapCursor(), dropCursor()];
@@ -117,15 +119,10 @@ const QuestionEditorComponent = ({
const getKeys = () => {
return {
- 'Mod-z': () => undo(view.state, view.dispatch),
- 'Mod-y': () => redo(view.state, view.dispatch),
+ 'Mod-z': () => undo(main.state, main.dispatch),
+ 'Mod-y': () => redo(main.state, main.dispatch),
'Mod-[': liftListItem(view.state.schema.nodes.list_item),
'Mod-]': sinkListItem(view.state.schema.nodes.list_item),
- // Enter: () =>
- // splitListItem(questionView.state.schema.nodes.list_item)(
- // questionView.state,
- // questionView.dispatch,
- // ),
Enter: pressEnter,
};
};
@@ -215,7 +212,9 @@ const QuestionEditorComponent = ({
const addToHistory = !tr.getMeta('exludeToHistoryFromOutside');
const { state, transactions } = questionView.state.applyTransaction(tr);
questionView.updateState(state);
- context.updateView({}, questionId);
+ setTimeout(() => {
+ context.updateView({}, questionId);
+ });
if (!tr.getMeta('fromOutside')) {
const outerTr = view.state.tr;
diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/plugins/MoveCursorPlugin.js b/wax-questions-service/src/MultipleChoiceQuestionService/plugins/MoveCursorPlugin.js
index 2b910dffd5e12f0cb8b83af913a667300958ab7f..26b1f6ebf6b05f5da11a2cea086e5584ab37529f 100644
--- a/wax-questions-service/src/MultipleChoiceQuestionService/plugins/MoveCursorPlugin.js
+++ b/wax-questions-service/src/MultipleChoiceQuestionService/plugins/MoveCursorPlugin.js
@@ -5,15 +5,14 @@ const testPlugin = new PluginKey('moveCursorPlugin');
export default () => {
return new Plugin({
key: testPlugin,
- filterTransaction: (transaction, state) => {
- // if (
- // transaction.getMeta('fromOutside') &&
- // transaction.doc &&
- // transaction.doc.type &&
- // transaction.doc.type.name === 'multiple_drop_down_container'
- // ) {
- // return false;
- // }
+ filterTransaction: (transaction, state, b) => {
+ state.doc.descendants((editorNode, pos) => {
+ if (editorNode.type.name === 'fill_the_gap_container') {
+ if (transaction.selection.from - 2 === pos) {
+ return false;
+ }
+ }
+ });
return true;
},