diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index f4e92b1b8e35744edd1b6dd1641c9949bb359128..1b8623619ce3aa22d9f3bb4f7b39fdacf367f5ca 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -28,10 +28,21 @@ const SubmitButton = styled.button`
top: 16px;
`;
-const t = `<p class="paragraph"></p>
+const t = `<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="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"></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"></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>
+ <div id="902ce1df-14b0-4c1f-9d44-066bb85262b1" class="matching-option" isfirst="false" answer="{}">some more text </div>
+ </p>
+ <p class="paragraph"></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>
+ <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>
@@ -40,7 +51,9 @@ const t = `<p class="paragraph"></p>
<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" anser="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" anser="">answer 4; answer5;</span></p></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 Hhmi = () => {
const [submited, isSubmited] = useState(false);
diff --git a/editors/demo/src/HHMI/config/config.js b/editors/demo/src/HHMI/config/config.js
index 3257bebfda40a35db65aba489996d0df6fb12bd1..738b2002d1f5fc013282eb751f113bcec7a02093 100644
--- a/editors/demo/src/HHMI/config/config.js
+++ b/editors/demo/src/HHMI/config/config.js
@@ -21,14 +21,15 @@ import {
EditorInfoToolGroupServices,
BottomInfoService,
MultipleChoiceQuestionService,
- MultipleChoiceToolGroupService,
FillTheGapQuestionService,
FillTheGapToolGroupService,
- MultipleDropDownToolGroupService,
+ MultipleChoiceDropDownToolGroupService,
EssayService,
EssayToolGroupService,
MatchingService,
MatchingToolGroupService,
+ MultipleDropDownService,
+ MultipleDropDownToolGroupService,
} from 'wax-prosemirror-services';
import { DefaultSchema } from 'wax-prosemirror-utilities';
@@ -54,9 +55,10 @@ export default {
'Lists',
'Images',
'Tables',
- 'MultipleDropDown',
+ 'MultipleChoiceDropDown',
'Essay',
'FillTheGap',
+ 'MultipleDropDown',
'Matching',
'FullScreen',
],
@@ -74,7 +76,8 @@ export default {
new FillTheGapQuestionService(),
new FillTheGapToolGroupService(),
new MultipleChoiceQuestionService(),
- new MultipleChoiceToolGroupService(),
+ new MultipleChoiceDropDownToolGroupService(),
+ new MultipleDropDownService(),
new MultipleDropDownToolGroupService(),
new EssayService(),
new EssayToolGroupService(),
diff --git a/editors/demo/src/NCBI/NCBI.js b/editors/demo/src/NCBI/NCBI.js
index cde261806fb08af3ced7380b6f7748d5f511c408..7b72e421adf0883b7ac6a336da5b8b8a79be86fe 100644
--- a/editors/demo/src/NCBI/NCBI.js
+++ b/editors/demo/src/NCBI/NCBI.js
@@ -61,8 +61,6 @@ const ContentArea = styled.div`
overflow-y: auto;
`;
-let a = '';
-
const Ncbi = () => {
const [content, setContent] = useState('');
diff --git a/wax-prosemirror-components/src/components/Button.js b/wax-prosemirror-components/src/components/Button.js
index 911932b5d60da5a8a12d462c38f0af2e189a6149..464a0ae13041927730111ea77763060f7529e907 100644
--- a/wax-prosemirror-components/src/components/Button.js
+++ b/wax-prosemirror-components/src/components/Button.js
@@ -18,9 +18,9 @@ const Button = ({ view = {}, item }) => {
const { state } = view;
- const handleMouseDown = (e, editorState, editorDispatch) => {
+ const handleMouseDown = e => {
e.preventDefault();
- run(editorState, editorDispatch);
+ run(activeView.state, activeView.dispatch, activeView);
};
const isActive = !!(
@@ -38,9 +38,7 @@ const Button = ({ view = {}, item }) => {
disabled={isDisabled}
iconName={icon}
label={label}
- onMouseDown={e =>
- handleMouseDown(e, activeView.state, activeView.dispatch)
- }
+ onMouseDown={e => handleMouseDown(e)}
title={title}
/>
),
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index c67e6ba1be823a53fc297320c93d03dfe84b8279..6612850404fab9cbd16008dca7c2503757d22c97 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/wax-prosemirror-components/src/icons/icons.js
@@ -452,4 +452,24 @@ export default {
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />{' '}
</Svg>
),
+ essay: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Create Essay </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
+ </Svg>
+ ),
+ mulitpleDropDownQuestion: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Create Multiple DropDown Question</title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />{' '}
+ </Svg>
+ ),
+ mulitpleDropDown: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Create DropDown </title>
+ <path d="M17 5H20L18.5 7L17 5M3 2H21C22.11 2 23 2.9 23 4V8C23 9.11 22.11 10 21 10H16V20C16 21.11 15.11 22 14 22H3C1.9 22 1 21.11 1 20V4C1 2.9 1.9 2 3 2M3 4V8H14V4H3M21 8V4H16V8H21M3 20H14V10H3V20M5 12H12V14H5V12M5 16H12V18H5V16Z" />
+ </Svg>
+ ),
};
diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js
index 39757d4e89fc85c70b9ff8ad245dc4c328f5b212..45382705d0e03614051b20fbd1dc7eb870a83d23 100644
--- a/wax-prosemirror-core/src/WaxView.js
+++ b/wax-prosemirror-core/src/WaxView.js
@@ -54,15 +54,15 @@ const WaxView = forwardRef((props, ref) => {
const schema = context.app.getSchema();
- if (!mounted) {
- context.app.bootServices();
- context.app.getShortCuts();
- context.app.getRules();
- }
-
const setEditorRef = useCallback(
node => {
if (node) {
+ if (!mounted) {
+ context.app.bootServices();
+ context.app.getShortCuts();
+ context.app.getRules();
+ }
+
const options = WaxOptions({
...props,
schema,
@@ -105,7 +105,9 @@ const WaxView = forwardRef((props, ref) => {
if (autoFocus && view)
setTimeout(() => {
view.focus();
- }, 1000);
+ view.state.tr.insertText('', 0);
+ view.dispatch(view.state.tr);
+ }, 500);
return () => view.destroy();
}
diff --git a/wax-prosemirror-services/index.js b/wax-prosemirror-services/index.js
index d86df4e7336eb349d60e5eb73769ee77e4d8af7d..7e3c3d1755b9827074ad011e41e913d8be070e4d 100644
--- a/wax-prosemirror-services/index.js
+++ b/wax-prosemirror-services/index.js
@@ -51,6 +51,7 @@ export { default as FillTheGapQuestionService } from './src/FillTheGapQuestionSe
export { default as EssayService } from './src/EssayService/EssayService';
export { default as MatchingService } from './src/MatchingService/MatchingService';
export { default as EnterService } from './src/EnterService/EnterService';
+export { default as MultipleDropDownService } from './src/MultipleDropDownService/MultipleDropDownService';
/*
ToolGroups
*/
@@ -75,8 +76,8 @@ export { default as TrackOptionsToolGroupService } from './src/WaxToolGroups/Tra
export { default as TrackCommentOptionsToolGroupService } from './src/WaxToolGroups/TrackCommentOptionsToolGroupService/TrackCommentOptionsToolGroupService';
export { default as CustomTagInlineToolGroupService } from './src/WaxToolGroups/CustomTagToolGroupService/CustomTagInlineToolGroupService/CustomTagInlineToolGroupService';
export { default as CustomTagBlockToolGroupService } from './src/WaxToolGroups/CustomTagToolGroupService/CustomTagBlockToolGroupService/CustomTagBlockToolGroupService';
-export { default as MultipleChoiceToolGroupService } from './src/WaxToolGroups/MultipleChoiceToolGroupService/MultipleChoiceToolGroupService';
export { default as FillTheGapToolGroupService } from './src/WaxToolGroups/FillTheGapToolGroupService/FillTheGapToolGroupService';
-export { default as MultipleDropDownToolGroupService } from './src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDownToolGroupService';
+export { default as MultipleChoiceDropDownToolGroupService } from './src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/MultipleChoiceDropDownToolGroupService';
export { default as EssayToolGroupService } from './src/WaxToolGroups/EssayToolGroupService/EssayToolGroupService';
export { default as MatchingToolGroupService } from './src/WaxToolGroups/MatchingToolGroupService/MatchingToolGroupService';
+export { default as MultipleDropDownToolGroupService } from './src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDownToolGroupService';
diff --git a/wax-prosemirror-services/src/CommentsService/CommentsService.js b/wax-prosemirror-services/src/CommentsService/CommentsService.js
index 989f1cf7899ec3ffaaa9afbae2780e0ed61d4fdc..48d3b07b3f09bcd9f62b13546f43a52675bf0d2c 100644
--- a/wax-prosemirror-services/src/CommentsService/CommentsService.js
+++ b/wax-prosemirror-services/src/CommentsService/CommentsService.js
@@ -19,6 +19,7 @@ export default class CommentsService extends Service {
CommentBubbleComponent,
{},
{
+ nodeType: '',
markType: '',
followCursor: false,
selection: true,
diff --git a/wax-prosemirror-services/src/CustomTagService/CustomTagInlineService/CustomTagInlineService.js b/wax-prosemirror-services/src/CustomTagService/CustomTagInlineService/CustomTagInlineService.js
index f3ce5b96dea8736f53a3c95373b348f31b109b86..a90cdd3da09535764315962e971b83bf3c467bb8 100644
--- a/wax-prosemirror-services/src/CustomTagService/CustomTagInlineService/CustomTagInlineService.js
+++ b/wax-prosemirror-services/src/CustomTagService/CustomTagInlineService/CustomTagInlineService.js
@@ -11,6 +11,7 @@ class CustomTagInlineService extends Service {
CustomTagInlineOverlayComponent,
{},
{
+ nodeType: '',
markType: 'customTagInline',
followCursor: false,
selection: true,
diff --git a/wax-prosemirror-services/src/EssayService/EssayQuestion.js b/wax-prosemirror-services/src/EssayService/EssayQuestion.js
index 8ab9229ea540b4d658a16b6c664347622e403f80..703a6170280f9f69a350805c8fb321813a6b8464 100644
--- a/wax-prosemirror-services/src/EssayService/EssayQuestion.js
+++ b/wax-prosemirror-services/src/EssayService/EssayQuestion.js
@@ -56,9 +56,9 @@ const createEmptyParagraph = (context, newAnswerId) => {
@injectable()
class EssayQuestion extends Tools {
title = 'Add Essay Question';
- icon = '';
+ icon = 'essay';
name = 'Essay';
- label = 'Essay';
+ label = '';
get run() {
return (main, context) => {
diff --git a/wax-prosemirror-services/src/EssayService/components/ContainerEditor.js b/wax-prosemirror-services/src/EssayService/components/ContainerEditor.js
new file mode 100644
index 0000000000000000000000000000000000000000..273c908444c79500c2b04e9dd587c24d861d1222
--- /dev/null
+++ b/wax-prosemirror-services/src/EssayService/components/ContainerEditor.js
@@ -0,0 +1,85 @@
+/* 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, isEditable, autoFocus }) => {
+ 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-prosemirror-services/src/FillTheGapQuestionService/FillTheGapQuestion.js b/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapQuestion.js
index 1f73b94be58fba0b8f7479b5bcd184d392d6b681..920ecd2249c68dc2b54fe44afc441a8e7f759135 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapQuestion.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/FillTheGapQuestion.js
@@ -1,7 +1,8 @@
import { injectable } from 'inversify';
-import { wrapIn } from 'prosemirror-commands';
+import { findWrapping } from 'prosemirror-transform';
import { v4 as uuidv4 } from 'uuid';
import Tools from '../lib/Tools';
+import helpers from '../MultipleChoiceQuestionService/helpers/helpers';
@injectable()
class FillTheGapQuestion extends Tools {
@@ -10,10 +11,20 @@ class FillTheGapQuestion extends Tools {
name = 'Fill The Gap';
get run() {
- return (state, dispatch) => {
- wrapIn(state.config.schema.nodes.fill_the_gap_container, {
- id: uuidv4(),
- })(state, dispatch);
+ return (state, dispatch, view) => {
+ helpers.checkifEmpty(view);
+ const { $from, $to } = view.state.selection;
+ const range = $from.blockRange($to);
+ const { tr } = view.state;
+
+ const wrapping =
+ range &&
+ findWrapping(range, state.config.schema.nodes.fill_the_gap_container, {
+ id: uuidv4(),
+ });
+ if (!wrapping) return false;
+ tr.wrap(range, wrapping);
+ dispatch(tr);
};
}
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/ContainerEditor.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/ContainerEditor.js
index c14832320f66cc8b5a96a6abf3a110510cb6870a..3a1d20673b3e6c7cfbcc698222d6df63d340e407 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/ContainerEditor.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/components/ContainerEditor.js
@@ -31,7 +31,7 @@ const EditorWrapper = styled.div`
}
`;
-const EditorComponent = ({ node, view, getPos }) => {
+const ContainerEditor = ({ node, view, getPos }) => {
const editorRef = useRef();
const context = useContext(WaxContext);
@@ -148,4 +148,4 @@ const EditorComponent = ({ node, view, getPos }) => {
);
};
-export default EditorComponent;
+export default ContainerEditor;
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/schema/fillTheGapNode.js b/wax-prosemirror-services/src/FillTheGapQuestionService/schema/fillTheGapNode.js
index c437d1b3bbbb0fbdb24e0357502c3464aad2bd0f..974d854fce1cf2a7f625883d27cc07a539e16b3e 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/schema/fillTheGapNode.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/schema/fillTheGapNode.js
@@ -2,7 +2,7 @@ const fillTheGapNode = {
attrs: {
id: { default: '' },
class: { default: 'fill-the-gap' },
- anser: { default: '' },
+ answer: { default: '' },
},
group: 'inline',
content: 'text*',
diff --git a/wax-prosemirror-services/src/LinkService/LinkService.js b/wax-prosemirror-services/src/LinkService/LinkService.js
index f89d026c9102f42f1811ef92485dbcad99c82288..9230852441bce0f4976c6a29e6c80f3ba6a781f8 100644
--- a/wax-prosemirror-services/src/LinkService/LinkService.js
+++ b/wax-prosemirror-services/src/LinkService/LinkService.js
@@ -17,6 +17,7 @@ export default class LinkService extends Service {
LinkComponent,
{},
{
+ nodeType: '',
markType: 'link',
followCursor: false,
selection: false,
diff --git a/wax-prosemirror-services/src/MatchingService/MatchingOptionNodeView.js b/wax-prosemirror-services/src/MatchingService/MatchingOptionNodeView.js
new file mode 100644
index 0000000000000000000000000000000000000000..f5a9656cbef57d6f32dc2a190cf89c46c5735a11
--- /dev/null
+++ b/wax-prosemirror-services/src/MatchingService/MatchingOptionNodeView.js
@@ -0,0 +1,32 @@
+import QuestionsNodeView from '../lib/helpers/QuestionsNodeView';
+
+export default class MatchingOptionNodeView 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 'matching_option';
+ }
+
+ stopEvent(event) {
+ if (event.target.type === 'text') {
+ return true;
+ }
+ const innerView = this.context.pmViews[this.node.attrs.id];
+ return innerView && innerView.dom.contains(event.target);
+ }
+}
diff --git a/wax-prosemirror-services/src/MatchingService/MatchingQuestion.js b/wax-prosemirror-services/src/MatchingService/MatchingQuestion.js
index cb84528fa5f96a8f2e32d3d47d5765940829ea60..552532f99030ded1d54abcfc12de4c7bc48ace4a 100644
--- a/wax-prosemirror-services/src/MatchingService/MatchingQuestion.js
+++ b/wax-prosemirror-services/src/MatchingService/MatchingQuestion.js
@@ -1,6 +1,9 @@
import { injectable } from 'inversify';
-import { wrapIn } from 'prosemirror-commands';
+import { Fragment } from 'prosemirror-model';
+import { findWrapping } from 'prosemirror-transform';
+import { TextSelection } from 'prosemirror-state';
import { v4 as uuidv4 } from 'uuid';
+import helpers from '../MultipleChoiceQuestionService/helpers/helpers';
import Tools from '../lib/Tools';
@injectable()
@@ -10,10 +13,35 @@ class MatchingQuestion extends Tools {
name = 'Matching';
get run() {
- return (state, dispatch) => {
- wrapIn(state.config.schema.nodes.matching_container, {
- id: uuidv4(),
- })(state, dispatch);
+ return (state, dispatch, view) => {
+ helpers.checkifEmpty(view);
+ /* Create Wrapping */
+ const { $from, $to } = view.state.selection;
+ const range = $from.blockRange($to);
+ const { tr } = view.state;
+
+ const wrapping =
+ range &&
+ findWrapping(range, state.config.schema.nodes.matching_container, {
+ id: uuidv4(),
+ });
+ if (!wrapping) return false;
+ tr.wrap(range, wrapping);
+
+ const map = tr.mapping.maps[0];
+ let newPos = 0;
+ map.forEach((_from, _to, _newFrom, newTo) => {
+ newPos = newTo;
+ });
+
+ tr.setSelection(TextSelection.create(tr.doc, range.$to.pos));
+ const option = state.config.schema.nodes.matching_option.create(
+ { id: uuidv4(), isfirst: true },
+ Fragment.empty,
+ );
+
+ tr.replaceSelectionWith(option);
+ dispatch(tr);
};
}
diff --git a/wax-prosemirror-services/src/MatchingService/MatchingService.js b/wax-prosemirror-services/src/MatchingService/MatchingService.js
index c95696a11b9f41ef9c8726ba96fe461f7fbe91b5..61c85f60fc53a3f89e77732b62e66f9676e0ca90 100644
--- a/wax-prosemirror-services/src/MatchingService/MatchingService.js
+++ b/wax-prosemirror-services/src/MatchingService/MatchingService.js
@@ -1,8 +1,11 @@
import Service from '../Service';
import MatchingQuestion from './MatchingQuestion';
import matchingContainerNode from './schema/matchingContainerNode';
+import matchingOptionNode from './schema/matchingOptionNode';
import MatchingContainerNodeView from './MatchingContainerNodeView';
+import MatchingOptionNodeView from './MatchingOptionNodeView';
import MatchingContainerComponent from './components/MatchingContainerComponent';
+import MatchingOptionComponent from './components/MatchingOptionComponent';
class MatchingService extends Service {
name = 'MatchingService';
@@ -16,11 +19,21 @@ class MatchingService extends Service {
matching_container: matchingContainerNode,
});
+ createNode({
+ matching_option: matchingOptionNode,
+ });
+
addPortal({
nodeView: MatchingContainerNodeView,
component: MatchingContainerComponent,
context: this.app,
});
+
+ addPortal({
+ nodeView: MatchingOptionNodeView,
+ component: MatchingOptionComponent,
+ context: this.app,
+ });
}
}
diff --git a/wax-prosemirror-services/src/MatchingService/components/ContainerEditor.js b/wax-prosemirror-services/src/MatchingService/components/ContainerEditor.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d9c42641b542ed499d1168243c947d02719c386
--- /dev/null
+++ b/wax-prosemirror-services/src/MatchingService/components/ContainerEditor.js
@@ -0,0 +1,97 @@
+/* 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`
+ width: 100% !important;
+ display: flex;
+ flex-direction: row;
+ > .ProseMirror {
+ padding: 0px !important;
+ box-shadow: none !important;
+ width: 100% !important;
+ &:focus {
+ outline: none;
+ }
+ p {
+ margin: 0;
+
+ br {
+ display: none;
+ }
+ }
+ }
+`;
+
+const ContainerEditor = ({ node, view, getPos, isEditable, autoFocus }) => {
+ 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-prosemirror-services/src/MatchingService/components/DropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..7c2c287dbbcef5b842325b9100079b4875d7db66
--- /dev/null
+++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
@@ -0,0 +1,114 @@
+/* eslint-disable no-underscore-dangle */
+import React, { useContext, useMemo, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { find } from 'lodash';
+import { ReactDropDownStyles } from 'wax-prosemirror-components';
+import { WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
+import Dropdown from 'react-dropdown';
+import { v4 as uuidv4 } from 'uuid';
+
+const Wrapper = styled.div`
+ ${ReactDropDownStyles};
+`;
+const DropdownStyled = styled(Dropdown)`
+ display: inline-flex;
+ cursor: not-allowed;
+ margin-left: auto;
+ opacity: ${props => (props.select ? 1 : 0.4)};
+ pointer-events: ${props => (props.select ? 'default' : 'none')};
+ .Dropdown-control {
+ border: none;
+ padding: 8px 30px 8px 10px;
+
+ &:hover {
+ box-shadow: none;
+ }
+ }
+
+ .Dropdown-arrow {
+ top: 17px;
+ }
+
+ .Dropdown-menu {
+ width: 102%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ .Dropdown-option {
+ width: 100%;
+ }
+ }
+`;
+
+const DropComponent = ({ getPos, node, view }) => {
+ const [selectedOption, setSelectedOption] = useState(undefined);
+
+ const context = useContext(WaxContext);
+ const {
+ pmViews: { main },
+ } = context;
+
+ const onChange = option => {
+ setSelectedOption(option);
+
+ const allNodes = getNodes(main);
+ allNodes.forEach(singleNode => {
+ if (singleNode.attrs.id === node.attrs.id) {
+ main.dispatch(
+ main.state.tr
+ .setMeta('addToHistory', false)
+ .setNodeMarkup(getPos() + 3, undefined, {
+ ...singleNode.attrs,
+ answer: option,
+ }),
+ );
+ }
+ });
+ };
+
+ useEffect(() => {
+ const value = selectedOption ? selectedOption.value : '';
+ const found = find(node.attrs.options, { value });
+
+ if (!found) {
+ setSelectedOption(undefined);
+ }
+ }, [node.attrs.options]);
+
+ const MultipleDropDown = useMemo(
+ () => (
+ <Wrapper key={uuidv4()}>
+ <DropdownStyled
+ key={uuidv4()}
+ onChange={option => onChange(option)}
+ options={node.attrs.options}
+ placeholder="Select option"
+ select
+ value={
+ selectedOption === 'undedfined' ? 'Select Option' : selectedOption
+ }
+ />
+ </Wrapper>
+ ),
+ [node.attrs.options, selectedOption],
+ );
+
+ return MultipleDropDown;
+};
+
+export default DropComponent;
+
+const getNodes = view => {
+ const allNodes = DocumentHelpers.findBlockNodes(view.state.doc);
+ const matchingOptions = [];
+ allNodes.forEach(node => {
+ if (node.node.type.name === 'paragraph') {
+ node.node.content.content.forEach(optionNode => {
+ if (optionNode.type.name === 'matching_option')
+ matchingOptions.push(optionNode);
+ });
+ }
+ });
+ return matchingOptions;
+};
diff --git a/wax-prosemirror-services/src/MatchingService/components/EditorComponent.js b/wax-prosemirror-services/src/MatchingService/components/EditorComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..c66af0e13360d20bb17dfcc7546391ed8086a037
--- /dev/null
+++ b/wax-prosemirror-services/src/MatchingService/components/EditorComponent.js
@@ -0,0 +1,190 @@
+/* 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 } 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;
+ width: 68%;
+
+ > .ProseMirror {
+ white-space: break-spaces;
+ width: 100% !important;
+ min-height: 25px !important;
+ word-wrap: break-word;
+ padding: 4px !important;
+ border: 12px solid #f4f4f7;
+ border-radius: 12px;
+ box-shadow: none !important;
+
+ &:focus {
+ outline: none;
+ }
+
+ :empty::before {
+ content: 'Type your text';
+ 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;
+ }
+ }
+`;
+
+const EditorComponent = ({ node, view, getPos }) => {
+ 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 = [];
+
+ 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()];
+
+ // eslint-disable-next-line no-shadow
+ const createPlaceholder = placeholder => {
+ return Placeholder({
+ content: placeholder,
+ });
+ };
+
+ finalPlugins = finalPlugins.concat([
+ createPlaceholder('Type your answer'),
+ ...plugins,
+ ]);
+
+ useEffect(() => {
+ questionView = new EditorView(
+ {
+ mount: editorRef.current,
+ },
+ {
+ editable: () => isEditable,
+ state: EditorState.create({
+ doc: node,
+ plugins: finalPlugins,
+ }),
+ dispatchTransaction,
+ disallowedTools: [
+ 'Images',
+ 'Lists',
+ 'lift',
+ 'MultipleChoice',
+ 'Tables',
+ ],
+ handleDOMEvents: {
+ mousedown: () => {
+ 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 (questionView.hasFocus()) questionView.focus();
+ },
+ blur: (editorView, event) => {
+ if (questionView && event.relatedTarget === null) {
+ 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-prosemirror-services/src/MatchingService/components/FeedbackComponent.js b/wax-prosemirror-services/src/MatchingService/components/FeedbackComponent.js
index 0afd56b88d70dcfe21cf7faabbe0af016fef4375..1ea470dc2df8f14be135c4958616154091b923a1 100644
--- a/wax-prosemirror-services/src/MatchingService/components/FeedbackComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/FeedbackComponent.js
@@ -9,7 +9,6 @@ import { DocumentHelpers } from 'wax-prosemirror-utilities';
const FeedBack = styled.div`
color: black;
margin-top: 10px;
- padding: 10px;
`;
const FeedBackLabel = styled.span`
@@ -37,7 +36,7 @@ export default ({ node, view, getPos, readOnly }) => {
const {
pmViews: { main },
} = context;
- const [feedBack, setFeedBack] = useState(' ');
+ const [feedBack, setFeedBack] = useState('');
const [isFirstRun, setFirstRun] = useState(true);
const [typing, setTyping] = useState(false);
const feedBackRef = useRef(null);
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
index 645a861ca10b32e36d1b6dca46c0444ba723de5d..31b7dcd63d37a67fe7b721ea9823acfc11291929 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
@@ -1,43 +1,39 @@
+/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/prop-types */
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
import { WaxContext } from 'wax-prosemirror-core';
import { Icon } from 'wax-prosemirror-components';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
import styled from 'styled-components';
import FeedbackComponent from './FeedbackComponent';
-
-const MatchingContainer = styled.div`
- border: 3px solid #f5f5f7;
- margin-bottom: 30px;
-`;
+import ContainerEditor from './ContainerEditor';
const MatchingWrapper = styled.div`
display: flex;
flex-direction: column;
- margin-bottom: ;
margin: 0px 38px 15px 38px;
margin-top: 10px;
`;
+const MatchingContainer = styled.div`
+ border: 3px solid #f5f5f7;
+ margin-bottom: 30px;
+ padding: 10px;
+`;
+
const QuestionWrapper = styled.div`
display: flex;
flex-direction: row;
-`;
-const LeftArea = styled.div`
- display: flex;
-`;
-const RightArea = styled.div`
- display: flex;
-`;
-const CreateOptions = styled.div`
- display: flex;
- margin-top: 10px;
- border: 1px solid black;
+ width: 100%;
`;
const ActionButton = styled.button`
+ height: 24px;
border: none;
background: transparent;
cursor: pointer;
+ padding-left: 0;
`;
const StyledIconAction = styled(Icon)`
@@ -45,12 +41,76 @@ const StyledIconAction = styled(Icon)`
width: 24px;
`;
+const CreateOptions = styled.div`
+ display: flex;
+ flex-direction: column;
+ padding-bottom: 10px;
+`;
+
const OptionArea = styled.div`
display: flex;
+ width: 100%;
+
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ margin: 0;
+ padding: 0;
+ li {
+ list-style-type: none;
+ padding-right: 7px;
+ padding-bottom: 7px;
+
+ span {
+ background: #535e76;
+ color: white;
+ padding: 3px 3px 3px 10px;
+ border-radius: 12px;
+ }
+ buttton {
+ }
+ svg {
+ fill: white;
+ width: 16px;
+ height: 16px;
+ }
+ }
+ }
`;
const AddOption = styled.div`
display: flex;
+ input {
+ border: none;
+ border-bottom: 1px solid black;
+ &:focus {
+ outline: none;
+ }
+
+ ::placeholder {
+ color: rgb(170, 170, 170);
+ font-style: italic;
+ }
+ }
+ button {
+ border: 1px solid #535e76;
+ cursor: pointer;
+ color: #535e76;
+ margin-left: 20px;
+ background: #fff;
+ padding: 4px 8px 4px 8px;
+ &:hover {
+ border: 1px solid #535e76;
+ cursor: pointer;
+ color: #535e76;
+ margin-right: 20px;
+ background: #fff;
+ background: #535e76;
+ color: #fff;
+ padding: 4px 8px 4px 8px;
+ }
+ }
`;
export default ({ node, view, getPos }) => {
@@ -59,6 +119,12 @@ export default ({ node, view, getPos }) => {
pmViews: { main },
} = context;
+ const [options, setOptions] = useState(node.attrs.options);
+
+ const [optionText, setOptionText] = useState('');
+ const [addingOption, setAddingOption] = useState(false);
+ const addOptionRef = useRef(null);
+
const customProps = main.props.customValues;
const isEditable = main.props.editable(editable => {
@@ -67,38 +133,116 @@ export default ({ node, view, getPos }) => {
const readOnly = !isEditable;
- const addOption = () => {};
+ useEffect(() => {
+ const allNodes = getNodes(main);
+
+ /*TEMP TO SAVE NODE OPTIONS TODO: SAVE IN CONTEXT OPTIONS*/
+ saveInChildOptions(allNodes);
+
+ if (!addingOption) return;
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ main.dispatch(
+ main.state.tr
+ .setMeta('addToHistory', false)
+ .setNodeMarkup(getPos(), undefined, {
+ ...singleNode.node.attrs,
+ options,
+ }),
+ );
+ }
+ });
+ }, [options, JSON.stringify(context.pmViews.main.state)]);
+
+ const addOption = () => {
+ if (addOptionRef.current.value.trim() === '') return;
+ const obj = { label: addOptionRef.current.value, value: uuidv4() };
+ setOptions(prevOptions => [...prevOptions, obj]);
+ setAddingOption(true);
+ setTimeout(() => {
+ setAddingOption(false);
+ });
+ setOptionText('');
+ addOptionRef.current.focus();
+ };
+
+ const updateOptionText = () => {
+ setOptionText(addOptionRef.current.value);
+ };
+
+ const handleKeyDown = event => {
+ if (event.key === 'Enter' || event.which === 13) {
+ addOption();
+ }
+ };
+
+ const removeOption = value => {
+ setOptions(options.filter(option => option.value !== value));
+ setAddingOption(true);
+ setTimeout(() => {
+ setAddingOption(false);
+ });
+ };
+
+ const saveInChildOptions = allNodes => {
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ singleNode.node.content.content.forEach(parentNodes => {
+ parentNodes.forEach(optionNode => {
+ if (optionNode.type.name === 'matching_option')
+ optionNode.attrs.options = options;
+ });
+ });
+ }
+ });
+ };
return (
<MatchingWrapper>
<span>Matching</span>
<MatchingContainer className="matching">
<QuestionWrapper>
- <LeftArea>
- <input type="text"></input>
- {!readOnly && (
- <ActionButton
- onClick={() => addOption(node.attrs.id)}
- type="button"
- >
- <StyledIconAction name="plusSquare" />
- </ActionButton>
- )}
- </LeftArea>
- <RightArea>Right</RightArea>
- </QuestionWrapper>
- <QuestionWrapper>
- <LeftArea>
- <input type="text"></input>
- </LeftArea>
- <RightArea>Right</RightArea>
+ <ContainerEditor getPos={getPos} node={node} view={view} />
</QuestionWrapper>
- <CreateOptions>
- <OptionArea>Options Area</OptionArea>
- <AddOption>
- <input type="text"></input>
- </AddOption>
- </CreateOptions>
+ {!readOnly && (
+ <CreateOptions>
+ <OptionArea>
+ {options.length > 0 && (
+ <ul>
+ <li>Options: </li>
+ {options.map((option, index) => {
+ return (
+ <li key={option.value}>
+ <span>
+ {option.label}
+ <ActionButton
+ onClick={() => removeOption(option.value)}
+ type="button"
+ >
+ <StyledIconAction name="deleteOutlined" />
+ </ActionButton>
+ </span>
+ </li>
+ );
+ })}
+ </ul>
+ )}
+ </OptionArea>
+ <AddOption>
+ <input
+ onChange={updateOptionText}
+ onKeyPress={handleKeyDown}
+ placeholder="Type an option ..."
+ ref={addOptionRef}
+ type="text"
+ value={optionText}
+ />
+ <button onClick={addOption} type="button">
+ Add Option
+ </button>
+ </AddOption>
+ </CreateOptions>
+ )}
{!(readOnly && !customProps.showFeedBack) && (
<FeedbackComponent
getPos={getPos}
@@ -111,3 +255,14 @@ export default ({ node, view, getPos }) => {
</MatchingWrapper>
);
};
+
+const getNodes = view => {
+ const allNodes = DocumentHelpers.findBlockNodes(view.state.doc);
+ const matchingContainerNodes = [];
+ allNodes.forEach(node => {
+ if (node.node.type.name === 'matching_container') {
+ matchingContainerNodes.push(node);
+ }
+ });
+ return matchingContainerNodes;
+};
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..7c9f90fdf3315905689212964a8bfc41f58ac9e3
--- /dev/null
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
@@ -0,0 +1,111 @@
+/* eslint-disable react/prop-types */
+import React, { useContext } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { TextSelection } from 'prosemirror-state';
+import { Fragment } from 'prosemirror-model';
+import styled from 'styled-components';
+import { Icon } from 'wax-prosemirror-components';
+import { WaxContext } from 'wax-prosemirror-core';
+import EditorComponent from './EditorComponent';
+import DropDownComponent from './DropDownComponent';
+
+const Option = styled.div`
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ padding-bottom: 10px;
+`;
+
+const ButtonsContainer = styled.div`
+ width: 7%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+`;
+
+const DropDownContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+`;
+
+const ActionButton = styled.button`
+ height: 24px;
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ padding-left: 0;
+`;
+
+const StyledIconAction = styled(Icon)`
+ height: 24px;
+ width: 24px;
+`;
+
+export default ({ node, view, getPos }) => {
+ const context = useContext(WaxContext);
+ const {
+ pmViews: { main },
+ } = context;
+
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+
+ const readOnly = !isEditable;
+
+ const addAnswer = () => {
+ const nodeId = node.attrs.id;
+ const newAnswerId = uuidv4();
+ main.state.doc.descendants((editorNode, index) => {
+ if (editorNode.type.name === 'matching_option') {
+ if (editorNode.attrs.id === nodeId) {
+ main.dispatch(
+ main.state.tr.setSelection(
+ new TextSelection(
+ main.state.tr.doc.resolve(editorNode.nodeSize + index),
+ ),
+ ),
+ );
+
+ const newOption = main.state.config.schema.nodes.matching_option.create(
+ { id: newAnswerId },
+ Fragment.empty,
+ );
+ main.dispatch(main.state.tr.replaceSelectionWith(newOption));
+ }
+ }
+ });
+ };
+
+ const removeAnswer = () => {
+ main.state.doc.descendants((sinlgeNode, pos) => {
+ if (sinlgeNode.attrs.id === node.attrs.id) {
+ main.dispatch(
+ main.state.tr.deleteRange(pos, pos + sinlgeNode.nodeSize),
+ );
+ }
+ });
+ };
+
+ return (
+ <Option>
+ {!readOnly && (
+ <ButtonsContainer>
+ <ActionButton onClick={addAnswer} type="button">
+ <StyledIconAction name="plusSquare" />
+ </ActionButton>
+ {!node.attrs.isfirst && (
+ <ActionButton onClick={removeAnswer} type="button">
+ <StyledIconAction name="deleteOutlined" />
+ </ActionButton>
+ )}
+ </ButtonsContainer>
+ )}
+ <EditorComponent getPos={getPos} node={node} view={view} />
+ <DropDownContainer>
+ <DropDownComponent getPos={getPos} node={node} view={view} />
+ </DropDownContainer>
+ </Option>
+ );
+};
diff --git a/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js b/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js
index 887d518dece76875b4fc906201bf674c9f270647..8466126a739a0023bbeef53cc5a27c6bac3ab5c8 100644
--- a/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js
+++ b/wax-prosemirror-services/src/MatchingService/schema/matchingContainerNode.js
@@ -2,10 +2,13 @@ const matchingContainerNode = {
attrs: {
id: { default: '' },
class: { default: 'matching-container' },
- questions: { default: { question: [], answer: '' } },
+ options: { default: [] },
+ feedback: { default: '' },
},
group: 'block questions',
atom: true,
+ selectable: false,
+ draggable: false,
content: 'block*',
parseDOM: [
{
@@ -14,12 +17,23 @@ const matchingContainerNode = {
return {
id: dom.getAttribute('id'),
class: dom.getAttribute('class'),
+ feedback: dom.getAttribute('feedback'),
+ options: JSON.parse(dom.getAttribute('options')),
};
},
},
],
toDOM(node) {
- return ['div', node.attrs, 0];
+ return [
+ 'div',
+ {
+ id: node.attrs.id,
+ class: node.attrs.class,
+ options: JSON.stringify(node.attrs.options),
+ feedback: node.attrs.feedback,
+ },
+ 0,
+ ];
},
};
diff --git a/wax-prosemirror-services/src/MatchingService/schema/matchingOptionNode.js b/wax-prosemirror-services/src/MatchingService/schema/matchingOptionNode.js
new file mode 100644
index 0000000000000000000000000000000000000000..45283958c53507411ea1f3df420d9539e72795fe
--- /dev/null
+++ b/wax-prosemirror-services/src/MatchingService/schema/matchingOptionNode.js
@@ -0,0 +1,42 @@
+const matchingOptionNode = {
+ attrs: {
+ class: { default: 'matching-option' },
+ id: { default: '' },
+ isfirst: { default: false },
+ answer: { default: {} },
+ options: { default: [] },
+ },
+ group: 'inline questions',
+ content: 'text*',
+ inline: true,
+ atom: true,
+ defining: true,
+ parseDOM: [
+ {
+ tag: 'div.matching-option',
+ getAttrs(dom) {
+ return {
+ id: dom.getAttribute('id'),
+ class: dom.getAttribute('class'),
+ isfirst: JSON.parse(dom.getAttribute('isfirst').toLowerCase()),
+ answer: JSON.parse(dom.getAttribute('answer').toLowerCase()),
+ };
+ },
+ },
+ ],
+ toDOM(node) {
+ return [
+ 'div',
+ {
+ id: node.attrs.id,
+ class: node.attrs.class,
+ isfirst: node.attrs.isfirst,
+ answer: JSON.stringify(node.attrs.answer),
+ feedback: node.attrs.feedback,
+ },
+ 0,
+ ];
+ },
+};
+
+export default matchingOptionNode;
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js
index 1bb5badc9b9cfa8188f764323dd76ae049cc6bfe..47ea3ed3a312e810c4dbe2ab4bd0c6e33cfa0d7b 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js
@@ -131,6 +131,7 @@ export default ({ node, view, getPos }) => {
Fragment.empty,
);
main.dispatch(main.state.tr.replaceSelectionWith(answerOption));
+
// create Empty Paragraph
setTimeout(() => {
helpers.createEmptyParagraph(context, newAnswerId);
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js
index ddc4e4b4bff39d1b96f91034602ce9a78f06f9ee..cba371caf7b343f761e89efcf3a73f70fa1eaffe 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js
@@ -130,6 +130,7 @@ export default ({ node, view, getPos }) => {
Fragment.empty,
);
main.dispatch(main.state.tr.replaceSelectionWith(answerOption));
+
// create Empty Paragraph
setTimeout(() => {
helpers.createEmptyParagraph(context, newAnswerId);
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js
index 8d86699e386d6defa1322bb5917d9936d48cd541..a939693f71294fc3f2d2269a3935778e3a5537ac 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js
@@ -130,6 +130,7 @@ export default ({ node, view, getPos }) => {
Fragment.empty,
);
main.dispatch(main.state.tr.replaceSelectionWith(answerOption));
+
// create Empty Paragraph
setTimeout(() => {
helpers.createEmptyParagraph(context, newAnswerId);
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/AnswerComponent.js
index 14ca939d22b26569d94d3d2f75cc22ade0f714aa..c4b4574dafb3d38ecd6b1a1dddc64f60a790aa78 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/AnswerComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/AnswerComponent.js
@@ -7,10 +7,10 @@ import { DocumentHelpers } from 'wax-prosemirror-utilities';
import { Fragment } from 'prosemirror-model';
import { v4 as uuidv4 } from 'uuid';
import { Icon } from 'wax-prosemirror-components';
-import helpers from '../helpers/helpers';
import EditorComponent from './EditorComponent';
import SwitchComponent from './SwitchComponent';
import FeedbackComponent from './FeedbackComponent';
+import helpers from '../helpers/helpers';
const Wrapper = styled.div`
display: flex;
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/EditorComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/EditorComponent.js
index ccead5ca16dfb2078411a7bcb8927144495967ef..a8aecaa678fcde9743de7775bd4c8eda2359fdd6 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/EditorComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/EditorComponent.js
@@ -59,6 +59,7 @@ const EditorComponent = ({ node, view, getPos }) => {
const {
app,
pmViews: { main },
+ activeViewId,
} = context;
let questionView;
const questionId = node.attrs.id;
@@ -118,9 +119,7 @@ const EditorComponent = ({ node, view, getPos }) => {
.setSelection(
new TextSelection(
main.state.tr.doc.resolve(
- getPos() +
- 2 +
- context.pmViews[questionId].state.selection.to,
+ getPos() + context.pmViews[questionId].state.selection.to,
),
),
),
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js b/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js
new file mode 100644
index 0000000000000000000000000000000000000000..e1e717b1d5777c6a7c73000627b2916d2914c69b
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js
@@ -0,0 +1,60 @@
+import { injectable } from 'inversify';
+import { Fragment } from 'prosemirror-model';
+import { NodeSelection } from 'prosemirror-state';
+import { v4 as uuidv4 } from 'uuid';
+import Tools from '../../lib/Tools';
+
+@injectable()
+class CreateDropDown extends Tools {
+ title = 'Create Drop Down';
+ icon = 'mulitpleDropDown';
+ name = 'Create_Drop_Down';
+
+ get run() {
+ return (state, dispatch) => {
+ const content = Fragment.empty;
+ const { tr } = state;
+ const createGap = state.config.schema.nodes.multiple_drop_down_option.create(
+ { id: uuidv4(), options: [] },
+ content,
+ );
+ tr.replaceSelectionWith(createGap);
+ tr.insertText(' ');
+ const resolvedPos = tr.doc.resolve(
+ tr.selection.anchor -
+ 1 -
+ (tr.selection.$anchor.nodeBefore.nodeSize + 1),
+ );
+
+ tr.setSelection(new NodeSelection(resolvedPos));
+ dispatch(tr);
+ };
+ }
+
+ select = (state, activeViewId, activeView) => {
+ let status = false;
+ const { from, to } = state.selection;
+ const { disallowedTools } = activeView.props;
+
+ state.doc.nodesBetween(from, to, (node, pos) => {
+ if (node.type.name === 'multiple_drop_down_container') {
+ status = true;
+ }
+ });
+
+ if (from === null || disallowedTools.includes('MultipleDropDown'))
+ status = false;
+
+ return status;
+ };
+
+ get active() {
+ return state => {};
+ }
+
+ get enable() {
+ return state => {};
+ }
+}
+
+export default CreateDropDown;
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDownService.js b/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDownService.js
new file mode 100644
index 0000000000000000000000000000000000000000..1cc337257460860f6892a67aaed47e17e051ff9e
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDownService.js
@@ -0,0 +1,42 @@
+import Service from '../../Service';
+import CreateDropDown from './CreateDropDown';
+import multipleDropDownOptionNode from '../schema/multipleDropDownOptionNode';
+import MultipleDropDownNodeView from './MultipleDropDownNodeView';
+import MultipleDropDownComponent from '../components/MultipleDropDownComponent';
+import DropDownComponent from '../components/DropDownComponent';
+
+class CreateDropDownService extends Service {
+ name = 'CreateDropDownService';
+
+ boot() {
+ const createOverlay = this.container.get('CreateOverlay');
+ createOverlay(
+ DropDownComponent,
+ {},
+ {
+ nodeType: 'multiple_drop_down_option',
+ markType: '',
+ followCursor: true,
+ selection: false,
+ },
+ );
+ }
+
+ register() {
+ const CreateNode = this.container.get('CreateNode');
+ const addPortal = this.container.get('AddPortal');
+ this.container.bind('CreateDropDown').to(CreateDropDown);
+
+ CreateNode({
+ multiple_drop_down_option: multipleDropDownOptionNode,
+ });
+
+ addPortal({
+ nodeView: MultipleDropDownNodeView,
+ component: MultipleDropDownComponent,
+ context: this.app,
+ });
+ }
+}
+
+export default CreateDropDownService;
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/MultipleDropDownNodeView.js b/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/MultipleDropDownNodeView.js
new file mode 100644
index 0000000000000000000000000000000000000000..aa8ac0a39f74b1bca0df1dc9bb014caba13a8b78
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/MultipleDropDownNodeView.js
@@ -0,0 +1,32 @@
+import QuestionsNodeView from '../../lib/helpers/QuestionsNodeView';
+
+export default class MultipleDropDownNodeView 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 'multiple_drop_down_option';
+ }
+
+ stopEvent(event) {
+ if (event.target.type === 'text') {
+ return true;
+ }
+ const innerView = this.context.pmViews[this.node.attrs.id];
+ return innerView && innerView.dom.contains(event.target);
+ }
+}
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownContainerNodeView.js b/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownContainerNodeView.js
new file mode 100644
index 0000000000000000000000000000000000000000..ed50a9c56312c7057bf3802ae9a28d74617276f4
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownContainerNodeView.js
@@ -0,0 +1,32 @@
+import QuestionsNodeView from '../lib/helpers/QuestionsNodeView';
+
+export default class MultipleDropDownContainerNodeView 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 'multiple_drop_down_container';
+ }
+
+ stopEvent(event) {
+ if (event.target.type === 'text') {
+ return true;
+ }
+ const innerView = this.context.pmViews[this.node.attrs.id];
+ return innerView && innerView.dom.contains(event.target);
+ }
+}
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownQuestion.js b/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownQuestion.js
new file mode 100644
index 0000000000000000000000000000000000000000..79bfaf9d456da8bcb660360d04ae649d33224dbd
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownQuestion.js
@@ -0,0 +1,59 @@
+import { injectable } from 'inversify';
+import { findWrapping } from 'prosemirror-transform';
+import { v4 as uuidv4 } from 'uuid';
+import Tools from '../lib/Tools';
+import helpers from '../MultipleChoiceQuestionService/helpers/helpers';
+
+@injectable()
+class MultipleDropDownQuestion extends Tools {
+ title = 'Add Multiple Drop Down Question';
+ icon = 'mulitpleDropDownQuestion';
+ name = 'Multiple Drop Down';
+
+ get run() {
+ return (state, dispatch, view) => {
+ helpers.checkifEmpty(view);
+ const { $from, $to } = view.state.selection;
+ const range = $from.blockRange($to);
+ const { tr } = view.state;
+
+ const wrapping =
+ range &&
+ findWrapping(
+ range,
+ state.config.schema.nodes.multiple_drop_down_container,
+ {
+ id: uuidv4(),
+ },
+ );
+ if (!wrapping) return false;
+ tr.wrap(range, wrapping);
+ dispatch(tr);
+ };
+ }
+
+ get active() {
+ return state => {};
+ }
+
+ select = (state, activeViewId, activeView) => {
+ const { disallowedTools } = activeView.props;
+ let status = true;
+ const { from, to } = state.selection;
+ if (from === null || disallowedTools.includes('MultipleDropDown'))
+ return false;
+
+ state.doc.nodesBetween(from, to, (node, pos) => {
+ if (node.type.groups.includes('questions')) {
+ status = false;
+ }
+ });
+ return status;
+ };
+
+ get enable() {
+ return state => {};
+ }
+}
+
+export default MultipleDropDownQuestion;
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownService.js b/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownService.js
new file mode 100644
index 0000000000000000000000000000000000000000..f2931d45939af4b56d2450d5a5e4bd619dcfecd5
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/MultipleDropDownService.js
@@ -0,0 +1,32 @@
+import Service from '../Service';
+import MultipleDropDownQuestion from './MultipleDropDownQuestion';
+import MultipleDropDownContainerNodeView from './MultipleDropDownContainerNodeView';
+import multipleDropDownContainerNode from './schema/multipleDropDownContainerNode';
+import CreateDropDownService from './CreateDropDownService/CreateDropDownService';
+import MultipleDropDownContainerComponent from './components/MultipleDropDownContainerComponent';
+
+class MultipleDropDownService extends Service {
+ name = 'MultipleDropDownService';
+
+ register() {
+ this.container
+ .bind('MultipleDropDownQuestion')
+ .to(MultipleDropDownQuestion);
+ const createNode = this.container.get('CreateNode');
+ const addPortal = this.container.get('AddPortal');
+
+ createNode({
+ multiple_drop_down_container: multipleDropDownContainerNode,
+ });
+
+ addPortal({
+ nodeView: MultipleDropDownContainerNodeView,
+ component: MultipleDropDownContainerComponent,
+ context: this.app,
+ });
+ }
+
+ dependencies = [new CreateDropDownService()];
+}
+
+export default MultipleDropDownService;
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/ContainerEditor.js b/wax-prosemirror-services/src/MultipleDropDownService/components/ContainerEditor.js
new file mode 100644
index 0000000000000000000000000000000000000000..52cd05c1037fce932a1e44333531c9035e4a7230
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/ContainerEditor.js
@@ -0,0 +1,161 @@
+/* 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 } 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, ComponentPlugin } from 'wax-prosemirror-core';
+
+const EditorWrapper = styled.div`
+ position: relative;
+
+ > .ProseMirror {
+ padding: 5px !important;
+ &: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;
+ }
+ }
+`;
+
+let WaxOverlays = () => true;
+
+const ContainerEditor = ({ node, view, getPos }) => {
+ const editorRef = useRef();
+
+ const context = useContext(WaxContext);
+ const {
+ app,
+ pmViews: { main },
+ } = context;
+
+ let multipleDropDownContainerNodeView;
+ 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()];
+
+ finalPlugins = finalPlugins.concat([...plugins]);
+
+ useEffect(() => {
+ WaxOverlays = ComponentPlugin('waxOverlays');
+
+ multipleDropDownContainerNodeView = new EditorView(
+ {
+ mount: editorRef.current,
+ },
+ {
+ editable: () => isEditable,
+ state: EditorState.create({
+ doc: node,
+ plugins: finalPlugins,
+ }),
+ dispatchTransaction,
+ disallowedTools: ['Images', 'FillTheGap', 'MultipleChoice'],
+ handleDOMEvents: {
+ mousedown: () => {
+ main.dispatch(
+ main.state.tr
+ .setMeta('outsideView', questionId)
+ .setSelection(
+ new TextSelection(
+ main.state.tr.doc.resolve(
+ getPos() + context.pmViews[questionId].state.selection.to,
+ ),
+ ),
+ ),
+ );
+ context.updateView({}, questionId);
+ if (multipleDropDownContainerNodeView.hasFocus())
+ multipleDropDownContainerNodeView.focus();
+ },
+ },
+
+ attributes: {
+ spellcheck: 'false',
+ },
+ },
+ );
+
+ // Set Each note into Wax's Context
+ context.updateView(
+ {
+ [questionId]: multipleDropDownContainerNodeView,
+ },
+ questionId,
+ );
+ multipleDropDownContainerNodeView.focus();
+ }, []);
+
+ const dispatchTransaction = tr => {
+ const {
+ state,
+ transactions,
+ } = multipleDropDownContainerNodeView.state.applyTransaction(tr);
+ multipleDropDownContainerNodeView.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) {
+ let history = true;
+ if (tr.getMeta('reject')) history = false;
+
+ view.dispatch(
+ outerTr
+ .setMeta('outsideView', questionId)
+ .setMeta('addToHistory', history),
+ );
+ }
+ }
+ };
+
+ return (
+ <EditorWrapper>
+ <div ref={editorRef} />
+ <WaxOverlays activeViewId={questionId} group="questions" />
+ </EditorWrapper>
+ );
+};
+
+export default ContainerEditor;
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d5139ee4de5c2a78681343aaf507d3c959b0d52
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
@@ -0,0 +1,214 @@
+/* eslint-disable react/prop-types */
+import React, {
+ useContext,
+ useState,
+ useRef,
+ useLayoutEffect,
+ useEffect,
+} from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import { v4 as uuidv4 } from 'uuid';
+import styled from 'styled-components';
+import { Icon } from 'wax-prosemirror-components';
+import { NodeSelection } from 'prosemirror-state';
+import RadioButton from './RadioButton';
+
+const TriangleTop = styled.div`
+ width: 0;
+ height: 0;
+ margin: 0px auto;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-bottom: 10px solid #535e76;
+`;
+
+const DropDownComponent = styled.div`
+ width: 174px;
+ height: 150px;
+ background: white;
+ border: 1px solid #535e76;
+ display: flex;
+ flex-direction: column;
+ padding: 5px;
+`;
+
+const Options = styled.div`
+ display: flex;
+ flex-direction: column;
+ height: 100px;
+ font-size: 11px;
+ overflow-y: auto;
+`;
+
+const Option = styled.div`
+ display: flex;
+ flex-direction: row;
+ width: 96%;
+`;
+
+const AddOption = styled.div`
+ display: flex;
+ margin-top: auto;
+ input {
+ border: none;
+ border-bottom: 1px solid black;
+ width: 160px;
+ &:focus {
+ outline: none;
+ }
+
+ ::placeholder {
+ color: rgb(170, 170, 170);
+ font-style: italic;
+ font-size: 10px;
+ }
+ }
+ button {
+ border: 1px solid #535e76;
+ cursor: pointer;
+ color: #535e76;
+ margin-left: 20px;
+ background: #fff;
+ padding: 4px 8px 4px 8px;
+ &:hover {
+ border: 1px solid #535e76;
+ cursor: pointer;
+ color: #535e76;
+ margin-right: 10px;
+ background: #fff;
+ background: #535e76;
+ color: #fff;
+ padding: 4px 8px 4px 8px;
+ }
+ }
+`;
+
+const IconRemove = styled(Icon)`
+ cursor: pointer;
+ position: relative;
+ top: 2px;
+ left: 6px;
+ height: 16px;
+ width: 16px;
+`;
+
+let previousNode = '';
+
+export default ({ setPosition, position }) => {
+ const context = useContext(WaxContext);
+ const {
+ activeView,
+ pmViews: { main },
+ } = context;
+
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+
+ const currentNode = position.node;
+ const currentOptions = currentNode.node.attrs.options;
+
+ const readOnly = !isEditable;
+
+ const [options, setOptions] = useState(currentOptions);
+
+ const [optionText, setOptionText] = useState('');
+ const addOptionRef = useRef(null);
+
+ useLayoutEffect(() => {
+ const { selection } = activeView.state;
+ const { from } = selection;
+ const WaxSurface = activeView.dom.getBoundingClientRect();
+ const start = activeView.coordsAtPos(from);
+ const left = start.left - WaxSurface.left - 75;
+ const top = start.top - WaxSurface.top + 25;
+ setPosition({ ...position, left, top });
+ }, [position.left]);
+
+ useEffect(() => {
+ if (addOptionRef.current) addOptionRef.current.focus();
+ if (!activeView.state.selection.node) return;
+ const { tr } = activeView.state;
+ if (previousNode.from !== currentNode.from) {
+ tr.setNodeMarkup(position.from, undefined, {
+ ...currentNode.node.attrs,
+ options: currentNode.node.attrs.options,
+ });
+ setOptions(currentNode.node.attrs.options);
+ } else {
+ tr.setNodeMarkup(position.from, undefined, {
+ ...currentNode.node.attrs,
+ options,
+ });
+ }
+ previousNode = currentNode;
+
+ const resolvedPos = tr.doc.resolve(position.from);
+ tr.setSelection(new NodeSelection(resolvedPos));
+ activeView.dispatch(tr.setMeta('reject', true));
+ }, [options, position.from]);
+
+ const updateOptionText = () => {
+ setOptionText(addOptionRef.current.value);
+ };
+
+ const handleKeyDown = event => {
+ if (event.key === 'Enter' || event.which === 13) {
+ addOption();
+ }
+ };
+
+ const addOption = () => {
+ if (addOptionRef.current.value.trim() === '') return;
+ const obj = { label: addOptionRef.current.value, value: uuidv4() };
+ setOptions(prevOptions => [...prevOptions, obj]);
+ setOptionText('');
+ addOptionRef.current.focus();
+ };
+
+ const removeOption = id => {
+ setOptions(options.filter(option => option.value !== id));
+ setOptionText('');
+ };
+
+ if (!readOnly) {
+ return (
+ <>
+ <TriangleTop />
+ <DropDownComponent>
+ <Options>
+ {options.map(value => {
+ return (
+ <Option key={uuidv4()}>
+ <RadioButton item={value} node={currentNode} />
+ <span
+ aria-hidden="true"
+ onClick={() => removeOption(value.value)}
+ role="button"
+ style={{ marginLeft: 'auto' }}
+ >
+ <IconRemove name="deleteOutlined" />
+ </span>
+ </Option>
+ );
+ })}
+ </Options>
+ <AddOption>
+ <input
+ onChange={updateOptionText}
+ onKeyPress={handleKeyDown}
+ placeholder="Type an option and press enter..."
+ ref={addOptionRef}
+ type="text"
+ value={optionText}
+ />
+ {/* <button onMouseUp={addOption} type="button">
+ Add
+ </button> */}
+ </AddOption>
+ </DropDownComponent>
+ </>
+ );
+ }
+ return null;
+};
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/FeedbackComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/FeedbackComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..3a4a582196219a92c41ee36c7797bcbea720b17e
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/FeedbackComponent.js
@@ -0,0 +1,111 @@
+/* eslint-disable react/prop-types */
+
+import React, { useContext, useRef, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { TextSelection } from 'prosemirror-state';
+import { WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
+
+const FeedBack = styled.div`
+ color: black;
+ margin-top: 10px;
+ padding: 10px;
+`;
+
+const FeedBackLabel = styled.span`
+ font-weight: 700;
+`;
+
+const FeedBackInput = styled.input`
+ border: none;
+ border-bottom: 1px solid black;
+ display: flex;
+ width: 100%;
+
+ &:focus {
+ outline: none;
+ }
+
+ ::placeholder {
+ color: rgb(170, 170, 170);
+ font-style: italic;
+ }
+`;
+
+export default ({ node, view, getPos, readOnly }) => {
+ const context = useContext(WaxContext);
+ const {
+ pmViews: { main },
+ } = context;
+ const [feedBack, setFeedBack] = useState(' ');
+ const [isFirstRun, setFirstRun] = useState(true);
+ const [typing, setTyping] = useState(false);
+ const feedBackRef = useRef(null);
+
+ useEffect(() => {
+ const allNodes = getNodes(main);
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ if (!typing || context.transaction.meta.inputType === 'Redo') {
+ setFeedBack(singleNode.node.attrs.feedback);
+ }
+ if (!isFirstRun) {
+ if (singleNode.node.attrs.feedback === '')
+ setFeedBack(singleNode.node.attrs.feedback);
+ }
+ }
+ });
+ }, [getNodes(main)]);
+
+ const handleKeyDown = e => {
+ setTyping(true);
+ if (e.key === 'Backspace') {
+ main.dispatch(
+ main.state.tr.setSelection(
+ TextSelection.create(main.state.tr.doc, null),
+ ),
+ );
+ }
+ };
+
+ const feedBackInput = () => {
+ setFeedBack(feedBackRef.current.value);
+ };
+
+ const saveFeedBack = () => {
+ return false;
+ };
+
+ const onFocus = () => {
+ main.dispatch(
+ main.state.tr.setSelection(TextSelection.create(main.state.tr.doc, null)),
+ );
+ };
+
+ return (
+ <FeedBack>
+ <FeedBackLabel>Feedback</FeedBackLabel>
+ <FeedBackInput
+ disabled={readOnly}
+ onBlur={saveFeedBack}
+ onChange={feedBackInput}
+ onFocus={onFocus}
+ onKeyDown={handleKeyDown}
+ placeholder="Insert feedback"
+ ref={feedBackRef}
+ type="text"
+ value={feedBack}
+ />
+ </FeedBack>
+ );
+};
+
+const getNodes = view => {
+ const allNodes = DocumentHelpers.findBlockNodes(view.state.doc);
+ const fillTheGapNodes = [];
+ allNodes.forEach(node => {
+ if (node.node.type.name === 'multiple_drop_down_container')
+ fillTheGapNodes.push(node);
+ });
+ return fillTheGapNodes;
+};
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..90f95347301154dcd9603f751a52f2d62b35c939
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
@@ -0,0 +1,63 @@
+/* eslint-disable react/prop-types */
+import React, { useContext, useEffect, useState } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import { Icon } from 'wax-prosemirror-components';
+import styled, { css } from 'styled-components';
+import ReadOnlyDropDown from './ReadOnlyDropDown';
+
+const activeStylesContainer = css`
+ background: #535e76;
+ border-radius: 2px;
+`;
+
+const activeStylesSvg = css`
+ fill: white !important;
+`;
+
+const StyledIconActionContainer = styled.div`
+ display: inline-block;
+ padding: 2px;
+ ${props => props.isActive && activeStylesContainer}
+`;
+
+const StyledIconAction = styled(Icon)`
+ height: 24px;
+ width: 24px;
+ cursor: pointer;
+
+ ${props => props.isActive && activeStylesSvg}
+`;
+
+export default ({ node, view, getPos }) => {
+ const context = useContext(WaxContext);
+ const {
+ pmViews: { main },
+ pmViews,
+ activeViewId,
+ } = context;
+
+ const [isActive, setIsActive] = useState(false);
+ const customProps = main.props.customValues;
+ const posFrom = pmViews[activeViewId].state.selection.from;
+
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+ const readOnly = !isEditable;
+
+ useEffect(() => {
+ setIsActive(false);
+ if (getPos() === posFrom) {
+ setIsActive(true);
+ }
+ }, [posFrom]);
+
+ if (!(readOnly && customProps && !customProps.showFeedBack)) {
+ return (
+ <StyledIconActionContainer isActive={isActive}>
+ <StyledIconAction isActive={isActive} name="mulitpleDropDown" />
+ </StyledIconActionContainer>
+ );
+ }
+ return <ReadOnlyDropDown options={node.attrs.options} />;
+};
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..d6725bb7d5b3c79f2b07a88e0aa99a540f179209
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js
@@ -0,0 +1,50 @@
+/* eslint-disable react/prop-types */
+import React, { useContext } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import styled from 'styled-components';
+import ContainerEditor from './ContainerEditor';
+import FeedbackComponent from './FeedbackComponent';
+
+const MultipleDropDownpWrapper = styled.div`
+ margin-bottom: ;
+ margin: 0px 38px 15px 38px;
+
+ margin-top: 10px;
+`;
+
+const MultipleDropDownpContainer = 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 isEditable = main.props.editable(editable => {
+ return editable;
+ });
+
+ const readOnly = !isEditable;
+
+ return (
+ <MultipleDropDownpWrapper>
+ <span>Multiple Drop Down</span>
+ <MultipleDropDownpContainer className="multiple-drop-down">
+ <ContainerEditor getPos={getPos} node={node} view={view} />
+ {!(readOnly && customProps && !customProps.showFeedBack) && (
+ <FeedbackComponent
+ getPos={getPos}
+ node={node}
+ readOnly={readOnly}
+ view={view}
+ />
+ )}
+ </MultipleDropDownpContainer>
+ </MultipleDropDownpWrapper>
+ );
+};
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/RadioButton.js b/wax-prosemirror-services/src/MultipleDropDownService/components/RadioButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..1bb7bbc411338369090ab0462a996f4927e5c780
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/RadioButton.js
@@ -0,0 +1,90 @@
+/* eslint-disable react/prop-types */
+import React, { useContext, useState } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import { NodeSelection } from 'prosemirror-state';
+import styled from 'styled-components';
+
+const CheckContainer = styled.label`
+ display: block;
+ position: relative;
+ padding-left: 20px;
+ margin-bottom: 5px;
+ cursor: pointer;
+ user-select: none;
+
+ input {
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+ height: 0;
+ width: 0;
+ }
+
+ &:hover input ~ span {
+ background-color: #ccc;
+ }
+
+ input:checked ~ span {
+ background-color: #535e76;
+ }
+
+ input:checked ~ .span:after {
+ display: block;
+ }
+
+ span:after {
+ top: 9px;
+ left: 9px;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: white;
+ }
+`;
+
+const RadioBtn = styled.span`
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 15px;
+ width: 15px;
+ background-color: #eee;
+ border-radius: 50%;
+
+ &:after {
+ content: '';
+ position: absolute;
+ display: none;
+ }
+`;
+
+export default ({ item, node }) => {
+ const context = useContext(WaxContext);
+ const { activeView } = context;
+ const [correctOption, setCorrectOption] = useState(node.node.attrs.correct);
+
+ const onChange = () => {
+ const { tr } = activeView.state;
+ setCorrectOption(item.value);
+ tr.setNodeMarkup(node.from, undefined, {
+ ...node.node.attrs,
+ correct: item.value,
+ });
+ const resolvedPos = tr.doc.resolve(node.from);
+ tr.setSelection(new NodeSelection(resolvedPos));
+ activeView.dispatch(tr.setMeta('reject', true));
+ };
+
+ return (
+ <CheckContainer>
+ {item.label}
+ <input
+ checked={correctOption === item.value}
+ name="radio"
+ onChange={onChange}
+ type="radio"
+ />
+ <RadioBtn />
+ </CheckContainer>
+ );
+};
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js b/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js
new file mode 100644
index 0000000000000000000000000000000000000000..7621128179b70811ce2f616e742d5579b76eb5a7
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js
@@ -0,0 +1,82 @@
+/* eslint-disable no-underscore-dangle */
+import React, { useContext, useMemo, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { find } from 'lodash';
+import { ReactDropDownStyles } from 'wax-prosemirror-components';
+import { WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
+import Dropdown from 'react-dropdown';
+import { v4 as uuidv4 } from 'uuid';
+
+const Wrapper = styled.div`
+ display: inline-flex;
+ ${ReactDropDownStyles};
+`;
+const DropdownStyled = styled(Dropdown)`
+ display: inline-flex;
+ cursor: not-allowed;
+ margin-left: auto;
+ opacity: ${props => (props.select ? 1 : 0.4)};
+ pointer-events: ${props => (props.select ? 'default' : 'none')};
+ .Dropdown-control {
+ // border: none;
+ padding: 8px 30px 8px 10px;
+
+ &:hover {
+ box-shadow: none;
+ }
+ }
+
+ .Dropdown-arrow {
+ top: 17px;
+ }
+
+ .Dropdown-menu {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ .Dropdown-option {
+ width: 100%;
+ }
+ }
+`;
+
+const DropComponent = ({ options }) => {
+ const [selectedOption, setSelectedOption] = useState(undefined);
+
+ const context = useContext(WaxContext);
+ const {
+ pmViews: { main },
+ } = context;
+
+ const customProps = main.props.customValues;
+
+ const onChange = option => {
+ console.log(option);
+ };
+
+ useEffect(() => {}, []);
+
+ const MultipleDropDown = useMemo(
+ () => (
+ <Wrapper key={uuidv4()}>
+ <DropdownStyled
+ key={uuidv4()}
+ onChange={option => onChange(option)}
+ options={options}
+ placeholder="Select option"
+ select
+ value={
+ selectedOption === 'undedfined' ? 'Select Option' : selectedOption
+ }
+ />
+ </Wrapper>
+ ),
+ [selectedOption],
+ );
+
+ return MultipleDropDown;
+};
+
+export default DropComponent;
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownContainerNode.js b/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownContainerNode.js
new file mode 100644
index 0000000000000000000000000000000000000000..0631cd913d29c41fd5227432bc5acb49f9a79b34
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownContainerNode.js
@@ -0,0 +1,28 @@
+const multipleDropDownContainerNode = {
+ attrs: {
+ id: { default: '' },
+ class: { default: 'multiple-drop-down-container' },
+ feedback: { default: '' },
+ },
+ group: 'block questions',
+ selectable: false,
+ draggable: false,
+ content: 'block+',
+ parseDOM: [
+ {
+ tag: 'div.multiple-drop-down-container',
+ getAttrs(dom) {
+ return {
+ id: dom.getAttribute('id'),
+ class: dom.getAttribute('class'),
+ feedback: dom.getAttribute('feedback'),
+ };
+ },
+ },
+ ],
+ toDOM(node) {
+ return ['div', node.attrs, 0];
+ },
+};
+
+export default multipleDropDownContainerNode;
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js b/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js
new file mode 100644
index 0000000000000000000000000000000000000000..9c63e91882c42c092b40c2054d0f3b305737d8c0
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js
@@ -0,0 +1,40 @@
+const multipleDropDownOptionNode = {
+ attrs: {
+ class: { default: 'multiple-drop-down-option' },
+ id: { default: '' },
+ options: { default: [] },
+ correct: { default: '' },
+ },
+ group: 'inline questions',
+ content: 'text*',
+ inline: true,
+ atom: true,
+ defining: true,
+ parseDOM: [
+ {
+ tag: 'span.multiple-drop-down-option',
+ getAttrs(dom) {
+ return {
+ id: dom.getAttribute('id'),
+ class: dom.getAttribute('class'),
+ options: JSON.parse(dom.getAttribute('options')),
+ correct: dom.getAttribute('correct'),
+ };
+ },
+ },
+ ],
+ toDOM(node) {
+ return [
+ 'span',
+ {
+ id: node.attrs.id,
+ class: node.attrs.class,
+ options: JSON.stringify(node.attrs.options),
+ correct: node.attrs.correct,
+ },
+ 0,
+ ];
+ },
+};
+
+export default multipleDropDownOptionNode;
diff --git a/wax-prosemirror-services/src/NoteService/Editor.js b/wax-prosemirror-services/src/NoteService/Editor.js
index 38ae9a305d1c89ab59a965bb7ceb4c8ad7f7d4bd..3a43864b6d30ce1165d36171ea5180667a0a3c28 100644
--- a/wax-prosemirror-services/src/NoteService/Editor.js
+++ b/wax-prosemirror-services/src/NoteService/Editor.js
@@ -29,7 +29,6 @@ export default ({ node, view }) => {
let typing = false;
const {
- activeViewId,
pmViews,
pmViews: { main },
} = context;
diff --git a/wax-prosemirror-services/src/OverlayService/usePosition.js b/wax-prosemirror-services/src/OverlayService/usePosition.js
index 5827b9db4898e89c3263c0891a5efea5b464c35f..ccb774c11404d0c4a188f74f1ed5be1d94485406 100644
--- a/wax-prosemirror-services/src/OverlayService/usePosition.js
+++ b/wax-prosemirror-services/src/OverlayService/usePosition.js
@@ -21,7 +21,7 @@ export default options => {
});
let mark = {};
-
+ let node = {};
/* Sets Default position at the end of the annotation. You
can overwrite the default position in your component.
Check: wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js
@@ -52,6 +52,26 @@ export default options => {
};
};
+ const displayOnNode = (focusedView, overlayOptions) => {
+ const { nodeType, followCursor } = overlayOptions;
+ const PMnode = focusedView.state.schema.nodes[nodeType];
+
+ node = DocumentHelpers.findNode(focusedView.state, PMnode);
+
+ if (!isObject(node)) return defaultOverlay;
+ const { from, to } = followCursor ? focusedView.state.selection : node;
+
+ const { left, top } = calculatePosition(focusedView, from, to);
+
+ return {
+ left,
+ top,
+ from,
+ to,
+ node,
+ };
+ };
+
const displayOnMark = (focusedView, overlayOptions) => {
const { markType, followCursor } = overlayOptions;
const PMmark = focusedView.state.schema.marks[markType];
@@ -92,7 +112,11 @@ export default options => {
const updatePosition = useCallback((followCursor = true) => {
if (Object.keys(activeView).length === 0) return defaultOverlay;
- const { markType, selection } = options;
+ const { markType, selection, nodeType } = options;
+
+ if (nodeType) {
+ return displayOnNode(activeView, options);
+ }
if (markType && selection)
return displayOnMarkOrSelection(activeView, options);
diff --git a/wax-prosemirror-services/src/WaxToolGroups/MultipleDropDownToolGroupService/DropComponent.js b/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/DropDownComponent.js
similarity index 96%
rename from wax-prosemirror-services/src/WaxToolGroups/MultipleDropDownToolGroupService/DropComponent.js
rename to wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/DropDownComponent.js
index 30bb239e4e98b60789e4856e55a76cad68d120b3..da2a512a410c508633630f8d1c7931ac2c6591ef 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/MultipleDropDownToolGroupService/DropComponent.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/DropDownComponent.js
@@ -38,7 +38,7 @@ const DropdownStyled = styled(Dropdown)`
}
`;
-const DropComponent = ({ title, view, tools }) => {
+const DropDownComponent = ({ title, view, tools }) => {
const context = useContext(WaxContext);
const {
activeView,
@@ -112,4 +112,4 @@ const DropComponent = ({ title, view, tools }) => {
return MultipleDropDown;
};
-export default DropComponent;
+export default DropDownComponent;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/MultipleChoiceDropDown.js b/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/MultipleChoiceDropDown.js
new file mode 100644
index 0000000000000000000000000000000000000000..095464e4d034e09533204bd123a078d5e496051e
--- /dev/null
+++ b/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/MultipleChoiceDropDown.js
@@ -0,0 +1,40 @@
+/* eslint-disable no-underscore-dangle */
+import React, { useMemo } from 'react';
+import { injectable, inject } from 'inversify';
+import { isEmpty } from 'lodash';
+import { v4 as uuidv4 } from 'uuid';
+import ToolGroup from '../../lib/ToolGroup';
+import DropDownComponent from './DropDownComponent';
+
+@injectable()
+class MultipleChoiceDropDown extends ToolGroup {
+ tools = [];
+ constructor(
+ @inject('MultipleChoiceQuestion') multipleChoiceQuestion,
+ @inject('MultipleChoiceSingleCorrectQuestion')
+ multipleChoiceSingleCorrectQuestion,
+ @inject('TrueFalseQuestion') trueFalseQuestion,
+ @inject('TrueFalseSingleCorrectQuestion') trueFalseSingleCorrectQuestion,
+ ) {
+ super();
+ this.tools = [
+ multipleChoiceQuestion,
+ multipleChoiceSingleCorrectQuestion,
+ trueFalseQuestion,
+ trueFalseSingleCorrectQuestion,
+ ];
+ }
+
+ renderTools(view) {
+ if (isEmpty(view)) return null;
+ const MultipleDropDown = useMemo(
+ () => (
+ <DropDownComponent key={uuidv4()} tools={this._tools} view={view} />
+ ),
+ [],
+ );
+ return MultipleDropDown;
+ }
+}
+
+export default MultipleChoiceDropDown;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/MultipleChoiceDropDownToolGroupService.js b/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/MultipleChoiceDropDownToolGroupService.js
new file mode 100644
index 0000000000000000000000000000000000000000..e7363986313a3d0079127bcbdbc27c73682cee89
--- /dev/null
+++ b/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/MultipleChoiceDropDownToolGroupService.js
@@ -0,0 +1,10 @@
+import Service from '../../Service';
+import MultipleChoiceDropDown from './MultipleChoiceDropDown';
+
+class MultipleChoiceDropDownToolGroupService extends Service {
+ register() {
+ this.container.bind('MultipleChoiceDropDown').to(MultipleChoiceDropDown);
+ }
+}
+
+export default MultipleChoiceDropDownToolGroupService;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceToolGroupService/MultipleChoice.js b/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceToolGroupService/MultipleChoice.js
deleted file mode 100644
index cffe0cf6b7b7ce23bb7ab21a05f0c70e1198a0c6..0000000000000000000000000000000000000000
--- a/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceToolGroupService/MultipleChoice.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { injectable, inject } from 'inversify';
-import ToolGroup from '../../lib/ToolGroup';
-
-@injectable()
-class MultipleChoice extends ToolGroup {
- tools = [];
- constructor(
- @inject('MultipleChoiceQuestion') multipleChoiceQuestion,
- @inject('MultipleChoiceSingleCorrectQuestion')
- multipleChoiceSingleCorrectQuestion,
- ) {
- super();
- this.tools = [multipleChoiceQuestion, multipleChoiceSingleCorrectQuestion];
- }
-}
-
-export default MultipleChoice;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceToolGroupService/MultipleChoiceToolGroupService.js b/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceToolGroupService/MultipleChoiceToolGroupService.js
deleted file mode 100644
index 8f13fbedd31ed32ca52eda9920497e7466cfeab7..0000000000000000000000000000000000000000
--- a/wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceToolGroupService/MultipleChoiceToolGroupService.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Service from '../../Service';
-import MultipleChoice from './MultipleChoice';
-
-class MultipleChoiceToolGroupService extends Service {
- register() {
- this.container.bind('MultipleChoice').to(MultipleChoice);
- }
-}
-
-export default MultipleChoiceToolGroupService;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDown.js b/wax-prosemirror-services/src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDown.js
index be86023e70310ef67ad4bbfb95958ef6324ebf16..5d0b9d3cb0b81f5a5f9023bfe57c846b755c8ea7 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDown.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDown.js
@@ -1,35 +1,15 @@
-import React from 'react';
import { injectable, inject } from 'inversify';
-import { isEmpty } from 'lodash';
-import { v4 as uuidv4 } from 'uuid';
import ToolGroup from '../../lib/ToolGroup';
-import DropComponent from './DropComponent';
@injectable()
class MultipleDropDown extends ToolGroup {
tools = [];
constructor(
- @inject('MultipleChoiceQuestion') multipleChoiceQuestion,
- @inject('MultipleChoiceSingleCorrectQuestion')
- multipleChoiceSingleCorrectQuestion,
- @inject('TrueFalseQuestion') trueFalseQuestion,
- @inject('TrueFalseSingleCorrectQuestion') trueFalseSingleCorrectQuestion,
+ @inject('MultipleDropDownQuestion') MultipleDropDownQuestion,
+ @inject('CreateDropDown') CreateDropDown,
) {
super();
- this.tools = [
- multipleChoiceQuestion,
- multipleChoiceSingleCorrectQuestion,
- trueFalseQuestion,
- trueFalseSingleCorrectQuestion,
- ];
- }
-
- renderTools(view) {
- if (isEmpty(view)) return null;
- return (
- // eslint-disable-next-line no-underscore-dangle
- <DropComponent key="Multipe Drop Down" tools={this._tools} view={view} />
- );
+ this.tools = [MultipleDropDownQuestion, CreateDropDown];
}
}
diff --git a/wax-prosemirror-services/src/lib/helpers/QuestionsNodeView.js b/wax-prosemirror-services/src/lib/helpers/QuestionsNodeView.js
index db663f08f8bdd61b90608dd91cc32eb4db127b6f..e776a218e80854c0c15243c34c42f1a7e9b28c87 100644
--- a/wax-prosemirror-services/src/lib/helpers/QuestionsNodeView.js
+++ b/wax-prosemirror-services/src/lib/helpers/QuestionsNodeView.js
@@ -19,6 +19,7 @@ export default class QuestionsNodeView extends AbstractNodeView {
}
update(node) {
+ // if (!node.sameMarkup(this.node)) return false;
this.node = node;
if (this.context.pmViews[node.attrs.id]) {
const { state } = this.context.pmViews[node.attrs.id];
diff --git a/wax-prosemirror-utilities/src/document/DocumentHelpers.js b/wax-prosemirror-utilities/src/document/DocumentHelpers.js
index 7a3cb17fa3f797961362292c0f213a3cbf65ba77..1b6409a24c7a6f7160b20c4280f4eac923029269 100644
--- a/wax-prosemirror-utilities/src/document/DocumentHelpers.js
+++ b/wax-prosemirror-utilities/src/document/DocumentHelpers.js
@@ -27,6 +27,18 @@ const findMark = (state, PMmark, toArr = false) => {
return markFound;
};
+const findNode = (state, PMnode) => {
+ let nodeFound;
+ if (state.selection.node && state.selection.node.type.name === PMnode.name) {
+ nodeFound = {
+ from: state.selection.from,
+ to: state.selection.to,
+ node: state.selection.node,
+ };
+ }
+ return nodeFound;
+};
+
const getCommentsTracksCount = main => {
const marks = findInlineNodes(main.state.doc);
const commentsTracksFormat = [];
@@ -270,6 +282,7 @@ const findParentOfType = (state, nodeType) => {
export default {
findMark,
+ findNode,
findBlockNodes,
findChildrenByType,
findInlineNodes,