diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 4640d384257418a403a6cce45bd210ccb20b3ecf..cc00d139054b489ec80028e63c8a18656c96de11 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -29,6 +29,7 @@ const SubmitButton = styled.button`
`;
const t = `<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></div><div class="multiple-choice-option" id="debb868e-bbfe-4ba2-bf93-c963153ff791" correct="false" answer="false" feedback="feedback 1"><p class="paragraph">answer 1</p></div><div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" answer="true" feedback="feedback 2"><p class="paragraph">answer 2</p></div></div><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback"><p class="paragraph">first <span id="16ec8f33-db5b-4839-9567-8aa73b776bcf" class="fill-the-gap" answer="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" answer="">answer 4; answer5;</span></p></div>`;
+const aa = `<p class="paragraph"></p><div id="3166af11-2905-4426-afd6-620cc7044b3f" class="multiple-drop-down-container" feedback=""><p class="paragraph">etrt etre t<span id="306f1656-3319-4cb5-ab9a-53e28354501d" class="multiple-drop-down-option" options="[{"label":"ert eterter","value":"9a871b4b-a7bd-486c-a060-9665e59d89fa"},{"label":"etertrte","value":"5bd745c6-6bc9-40a8-8188-86590ceff7e3"},{"label":"eterter","value":"b4543396-d41f-4167-b9fd-a505d5d73715"}]"></span> </p></div>`;
const Hhmi = () => {
const [submited, isSubmited] = useState(false);
const [readOnly, isReadOnly] = useState(false);
@@ -51,10 +52,10 @@ const Hhmi = () => {
autoFocus
customValues={{ showFeedBack: submited }}
fileUpload={file => renderImage(file)}
- value={t}
+ value={aa}
readonly={readOnly}
layout={HhmiLayout}
- // onChange={source => console.log(source)}
+ onChange={source => console.log(source)}
/>
</>
);
diff --git a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
index d6548bb03beadd4e69e52e3ec2bf0ac778c11889..7c2c287dbbcef5b842325b9100079b4875d7db66 100644
--- a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
@@ -104,7 +104,6 @@ const getNodes = view => {
const matchingOptions = [];
allNodes.forEach(node => {
if (node.node.type.name === 'paragraph') {
- console.log(node);
node.node.content.content.forEach(optionNode => {
if (optionNode.type.name === 'matching_option')
matchingOptions.push(optionNode);
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
index e1442effb8f090b071bc4b719564cfbce662e692..ff28e0554620fb88bd7ace895f883fd399eca901 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
@@ -4,12 +4,13 @@ import React, {
useState,
useRef,
useLayoutEffect,
- useMemo,
useEffect,
} from 'react';
import { WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
import { v4 as uuidv4 } from 'uuid';
import styled from 'styled-components';
+import { Icon } from 'wax-prosemirror-components';
const TriangleTop = styled.div`
width: 0;
@@ -30,7 +31,18 @@ const DropDownComponent = styled.div`
padding: 5px;
`;
-const Options = styled.div``;
+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;
+`;
const AddOption = styled.div`
display: flex;
@@ -38,7 +50,7 @@ const AddOption = styled.div`
input {
border: none;
border-bottom: 1px solid black;
- width: 100px;
+ width: 160px;
&:focus {
outline: none;
}
@@ -46,6 +58,7 @@ const AddOption = styled.div`
::placeholder {
color: rgb(170, 170, 170);
font-style: italic;
+ font-size: 10px;
}
}
button {
@@ -68,6 +81,15 @@ const AddOption = styled.div`
}
`;
+const IconRemove = styled(Icon)`
+ cursor: pointer;
+ position: relative;
+ top: 4px;
+ left: 6px;
+ height: 10px;
+ width: 10px;
+`;
+
export default ({ setPosition, position }) => {
const context = useContext(WaxContext);
const {
@@ -104,7 +126,16 @@ export default ({ setPosition, position }) => {
useEffect(() => {
if (addOptionRef.current) addOptionRef.current.focus();
- }, []);
+ const allNodes = getNodes(main);
+ if (!activeView.state.selection.node) return;
+ allNodes.forEach(singleNode => {
+ if (
+ singleNode.node.attrs.id === activeView.state.selection.node.attrs.id
+ ) {
+ activeView.state.selection.node.attrs.options = options;
+ }
+ });
+ }, [options]);
const updateOptionText = () => {
setOptionText(addOptionRef.current.value);
@@ -117,35 +148,69 @@ export default ({ setPosition, position }) => {
};
const addOption = () => {
- console.log('text', addOptionRef.current.value);
if (addOptionRef.current.value.trim() === '') return;
const obj = { label: addOptionRef.current.value, value: uuidv4() };
setOptions(prevOptions => [...prevOptions, obj]);
- setOptionText('');
+ setOptionText(' ');
+ setTimeout(() => {
+ setOptionText('');
+ });
addOptionRef.current.focus();
};
- console.log(options);
+ const removeOption = id => {
+ setOptions(options.filter(option => option.value !== id));
+ setOptionText(' ');
+ setTimeout(() => {
+ setOptionText('');
+ });
+ };
return (
<>
<TriangleTop />
<DropDownComponent>
- <Options>All Options</Options>
+ <Options>
+ {currentOptions.map(value => {
+ return (
+ <Option key={uuidv4()}>
+ <span>{value.label}</span>
+ <span
+ aria-hidden="true"
+ onClick={() => removeOption(value.value)}
+ role="button"
+ >
+ <IconRemove name="removeTag" />
+ </span>
+ </Option>
+ );
+ })}
+ </Options>
<AddOption>
<input
onChange={updateOptionText}
onKeyPress={handleKeyDown}
- placeholder="Type an option ..."
+ placeholder="Type an option and press enter..."
ref={addOptionRef}
type="text"
value={optionText}
/>
- <button onMouseUp={addOption} type="button">
+ {/* <button onMouseUp={addOption} type="button">
Add
- </button>
+ </button> */}
</AddOption>
</DropDownComponent>
</>
);
};
+
+const getNodes = view => {
+ const allNodes = DocumentHelpers.findInlineNodes(view.state.doc);
+ const multipleDropDownNodes = [];
+ allNodes.forEach(node => {
+ if (node.node.type.name === 'multiple_drop_down_option') {
+ multipleDropDownNodes.push(node);
+ }
+ });
+ return multipleDropDownNodes;
+};
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
index a5a8da13642bbc85113b01dfdcaa41480174411b..99bb3c0ae44281518a33ebaca5e13497fe571db3 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
const activeStylesContainer = css`
background: #535e76;
- border-radis: 8px;
+ border-radius: 2px;
`;
const activeStylesSvg = css`