replace with input on readonly

editors/demo/src/HHMI/HHMI.js

@@ -29,7 +29,7 @@ const SubmitButton = styled.button`
 `;
 
 const t = `<p class="paragraph"></p>
-<div id="" class="multiple-choice">
+<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>
@@ -40,8 +40,7 @@ const t = `<p class="paragraph"></p>
       <p class="paragraph">answer 2</p>
    </div>
 </div>
-<p class="paragraph"></p><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback=""><p class="paragraph">sdsd</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" anser="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" anser="">answer 4; answer5;</span></p></div>`;
 
 const Hhmi = () => {
   const [submited, isSubmited] = useState(false);

wax-prosemirror-services/src/EssayService/components/EditorComponent.js

@@ -108,9 +108,6 @@ const EditorComponent = ({ node, view, getPos }) => {
               ),
             );
             context.updateView({}, questionId);
-            // Kludge to prevent issues due to the fact that the whole
-            // footnote is node-selected (and thus DOM-selected) when
-            // the parent editor is focused.
             if (questionView.hasFocus()) questionView.focus();
           },
         },

wax-prosemirror-services/src/EssayService/components/EssayAnswerComponent.js

@@ -146,9 +146,6 @@ const EssayAnswerComponent = ({ node, view, getPos }) => {
             );
             context.updateView({}, questionId);
 
-            // Kludge to prevent issues due to the fact that the whole
-            // footnote is node-selected (and thus DOM-selected) when
-            // the parent editor is focused.
             if (essayAnswerView.hasFocus()) essayAnswerView.focus();
           },
           blur: (editorView, event) => {

wax-prosemirror-services/src/EssayService/components/EssayQuestionComponent.js

@@ -144,9 +144,6 @@ const EssayQuestionComponent = ({ node, view, getPos }) => {
             );
             context.updateView({}, questionId);
 
-            // Kludge to prevent issues due to the fact that the whole
-            // footnote is node-selected (and thus DOM-selected) when
-            // the parent editor is focused.
             if (essayQuestionView.hasFocus()) essayQuestionView.focus();
           },
           blur: (editorView, event) => {

wax-prosemirror-services/src/FillTheGapQuestionService/components/ContainerEditor.js

@@ -11,8 +11,9 @@ import { baseKeymap } from 'prosemirror-commands';
 import { undo, redo } from 'prosemirror-history';
 import { WaxContext } from 'wax-prosemirror-core';
 
-const EditorWrapper = styled.span`
+const EditorWrapper = styled.div`
   > .ProseMirror {
+    padding: 5px;
     &:focus {
       outline: none;
     }
@@ -62,8 +63,6 @@ const EditorComponent = ({ node, view, getPos }) => {
 
   finalPlugins = finalPlugins.concat([...plugins]);
 
-  const { activeViewId } = context;
-
   useEffect(() => {
     gapContainerView = new EditorView(
       {
@@ -94,9 +93,6 @@ const EditorComponent = ({ node, view, getPos }) => {
                 ),
             );
             context.updateView({}, questionId);
-            // Kludge to prevent issues due to the fact that the whole
-            // footnote is node-selected (and thus DOM-selected) when
-            // the parent editor is focused.
             if (gapContainerView.hasFocus()) gapContainerView.focus();
           },
         },

wax-prosemirror-services/src/FillTheGapQuestionService/components/EditorComponent.js

@@ -10,6 +10,7 @@ import { keymap } from 'prosemirror-keymap';
 import { baseKeymap } from 'prosemirror-commands';
 import { undo, redo } from 'prosemirror-history';
 import { WaxContext } from 'wax-prosemirror-core';
+import InputComponent from './InputComponent';
 
 const EditorWrapper = styled.span`
   display: inline-flex;
@@ -103,9 +104,7 @@ const EditorComponent = ({ node, view, getPos }) => {
               ),
             );
             context.updateView({}, questionId);
-            // Kludge to prevent issues due to the fact that the whole
-            // footnote is node-selected (and thus DOM-selected) when
-            // the parent editor is focused.
+
             if (gapView.hasFocus()) gapView.focus();
           },
         },
@@ -145,9 +144,15 @@ const EditorComponent = ({ node, view, getPos }) => {
   };
 
   return (
-    <EditorWrapper>
-      <div ref={editorRef} />
-    </EditorWrapper>
+    <>
+      {isEditable ? (
+        <EditorWrapper>
+          <div ref={editorRef} />
+        </EditorWrapper>
+      ) : (
+        <InputComponent getPos={getPos} node={node} view={view} />
+      )}
+    </>
   );
 };
 

wax-prosemirror-services/src/FillTheGapQuestionService/components/FeedbackComponent.js

@@ -17,18 +17,37 @@ const FeedBackLabel = styled.span`
 `;
 
 const FeedBackInput = styled.input`
-  //   border: none;
+  // border: none;
   display: flex;
   width: 100%;
+
+  ::placeholder {
+    color: rgb(170, 170, 170);
+    font-style: italic;
+  }
 `;
 
 export default ({ node, view, getPos }) => {
   const context = useContext(WaxContext);
   const [feedBack, setFeedBack] = useState(' ');
+  const [isFirstRun, setFirstRun] = useState(true);
   const [typing, setTyping] = useState(false);
   const feedBackRef = useRef(null);
 
-  useEffect(() => {}, []);
+  useEffect(() => {
+    const allNodes = getNodes(context.view.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(context.view.main)]);
 
   const handleKeyDown = e => {
     setTyping(true);
@@ -73,3 +92,13 @@ export default ({ node, view, getPos }) => {
     </FeedBack>
   );
 };
+
+const getNodes = view => {
+  const allNodes = DocumentHelpers.findBlockNodes(view.state.doc);
+  const fillTheGapNodes = [];
+  allNodes.forEach(node => {
+    if (node.node.type.name === 'fill_the_gap_container')
+      fillTheGapNodes.push(node);
+  });
+  return fillTheGapNodes;
+};

wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js

 /* eslint-disable react/prop-types */
-import React from 'react';
+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 FillTheGapContainer = styled.div`
+  border: 3px solid #f5f5f7;
+  margin-bottom: 30px;
+  padding: 3px;
+`;
+const FillTheGapWrapper = styled.div`
   margin-bottom: 15px;
   margin-top: 10px;
 `;
 
 export default ({ node, view, getPos }) => {
+  const context = useContext(WaxContext);
+  const {
+    view: { main },
+  } = context;
+
+  const customProps = context.view.main.props.customValues;
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
+  const readOnly = !isEditable;
+
   return (
-    <FillTheGapContainer>
+    <FillTheGapWrapper>
       <span>Fill The Gap</span>
-      <ContainerEditor getPos={getPos} node={node} view={view} />
-      <FeedbackComponent getPos={getPos} node={node} view={view} />
-    </FillTheGapContainer>
+      <FillTheGapContainer className="fill-the-gap">
+        <ContainerEditor getPos={getPos} node={node} view={view} />
+        {!(readOnly && !customProps.showFeedBack) && (
+          <FeedbackComponent getPos={getPos} node={node} view={view} />
+        )}
+      </FillTheGapContainer>
+    </FillTheGapWrapper>
   );
 };

wax-prosemirror-services/src/FillTheGapQuestionService/components/InputComponent.js

-import React, { useContext, useRef, useEffect } from 'react';
+/* eslint-disable react/destructuring-assignment */
+/* 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 AnswerInput = styled.input`
+  border: none;
+  border-bottom: 1px solid black;
+  color: #535e76;
+  display: inline-flex;
+  width: 120px;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export default ({ node, view, getPos }) => {
+  const context = useContext(WaxContext);
+  const [answer, setAnswer] = useState(' ');
+  const [typing, setTyping] = useState(false);
+  const answerRef = useRef(null);
+
+  useEffect(() => {}, []);
+
+  const handleKeyDown = e => {
+    setTyping(true);
+    if (e.key === 'Backspace') {
+      context.view.main.dispatch(
+        context.view.main.state.tr.setSelection(
+          TextSelection.create(context.view.main.state.tr.doc, null),
+        ),
+      );
+    }
+  };
+
+  const setAnswerInput = () => {
+    setAnswer(answerRef.current.value);
+  };
+
+  const saveAnswer = () => {
+    return false;
+  };
 
-const InputComponent = ({ node, view, getPos }) => {};
+  const onFocus = () => {
+    context.view.main.dispatch(
+      context.view.main.state.tr.setSelection(
+        TextSelection.create(context.view.main.state.tr.doc, null),
+      ),
+    );
+  };
 
-export default InputComponent;
+  return (
+    <AnswerInput
+      onBlur={saveAnswer}
+      onChange={setAnswerInput}
+      onFocus={onFocus}
+      onKeyDown={handleKeyDown}
+      ref={answerRef}
+      type="text"
+      value={answer}
+    />
+  );
+};

wax-prosemirror-services/src/FillTheGapQuestionService/fillTheGap.css

-  .fill-the-gap {
-    border: 3px solid #f5f5f7;
-    margin-bottom: 30px;
-    margin-top: 30px;
-    padding: 3px;
-  }
+/* fill The Gap */
 
-  .fill-the-gap::before {
-      background-color: #fff;
-      bottom: 22px;
-      color: #535e76;
-      content: 'Fill The Gap';
-      height: 10px;
-      left: -1px;
-      position: relative;
-      width: 30px;
-  }
\ No newline at end of file
+.ProseMirror .fill-the-gap .ProseMirror {
+  /* box-shadow: none; */
+  line-height: 2.2;
+  padding: 25px 5px 20px 5px;
+}
+
+.ProseMirror .fill-the-gap span > .ProseMirror {
+  box-shadow: none;
+  line-height: 1.6;
+}
+ 
\ No newline at end of file

wax-prosemirror-services/src/MultipleChoiceQuestionService/components/EditorComponent.js

@@ -120,9 +120,6 @@ const EditorComponent = ({ node, view, getPos }) => {
             //   ),
             // );
             context.updateView({}, questionId);
-            // Kludge to prevent issues due to the fact that the whole
-            // footnote is node-selected (and thus DOM-selected) when
-            // the parent editor is focused.
             if (questionView.hasFocus()) questionView.focus();
           },
           blur: (editorView, event) => {

wax-prosemirror-services/src/MultipleChoiceQuestionService/components/FeedbackComponent.js

@@ -20,6 +20,11 @@ const FeedBackInput = styled.input`
   border: none;
   display: flex;
   width: 100%;
+
+  ::placeholder {
+    color: rgb(170, 170, 170);
+    font-style: italic;
+  }
 `;
 
 export default ({ node, view, getPos }) => {

wax-prosemirror-services/src/MultipleChoiceQuestionService/components/QuestionEditorComponent.js

@@ -149,9 +149,6 @@ const QuestionEditorComponent = ({ node, view, getPos }) => {
             );
             context.updateView({}, questionId);
 
-            // Kludge to prevent issues due to the fact that the whole
-            // footnote is node-selected (and thus DOM-selected) when
-            // the parent editor is focused.
             if (questionView.hasFocus()) questionView.focus();
           },
           blur: (editorView, event) => {

wax-prosemirror-services/src/ShortCutsService/ShortCuts.js

@@ -43,6 +43,14 @@ const backSpaceShortCut = (state, dispatch, view) => {
     return true;
   }
 
+  state.doc.nodesBetween($from.pos, $to.pos, (node, from) => {
+    if (node.type.name === 'fill_the_gap_container') {
+      const index = $from.index($from.depth);
+      const $beforePos = state.doc.resolve($from.posAtIndex(index - 1));
+      dispatch(state.tr.setSelection(new NodeSelection($beforePos)));
+    }
+  });
+
   state.doc.nodesBetween($from.pos, $to.pos, (node, from) => {
     if (node.type.name === 'math_display') {
       const $start = state.tr.doc.resolve(state.tr.selection.$anchor.start());