add remove options

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="[{&quot;label&quot;:&quot;ert eterter&quot;,&quot;value&quot;:&quot;9a871b4b-a7bd-486c-a060-9665e59d89fa&quot;},{&quot;label&quot;:&quot;etertrte&quot;,&quot;value&quot;:&quot;5bd745c6-6bc9-40a8-8188-86590ceff7e3&quot;},{&quot;label&quot;:&quot;eterter&quot;,&quot;value&quot;:&quot;b4543396-d41f-4167-b9fd-a505d5d73715&quot;}]"></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)}
       />
     </>
   );

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);

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;
+};

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`