new essay files

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

@@ -2,8 +2,8 @@ import Service from '../Service';
 import EssayQuestion from './EssayQuestion';
 import essayContainerNode from './schema/essayContainerNode';
 import essayQuestionNode from './schema/essayQuestionNode';
-import essayFeedBackNode from './schema/essayFeedBackNode';
-import EssayComponent from './components/EssayComponent';
+import essayAnswerNode from './schema/essayAnswerNode';
+import EssayQuestionComponent from './components/EssayQuestionComponent';
 import EssayNodeView from './EssayNodeView';
 
 class EssayService extends Service {
@@ -21,12 +21,12 @@ class EssayService extends Service {
     });
 
     createNode({
-      essay_feedback: essayFeedBackNode,
+      essay_answer: essayAnswerNode,
     });
 
     addPortal({
       nodeView: EssayNodeView,
-      component: EssayComponent,
+      component: EssayQuestionComponent,
       context: this.app,
     });
   }

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

+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components';
+
+export default ({ node, view, getPos }) => {
+  return <span>Answer</span>;
+};

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

-/* eslint-disable react/prop-types */
-import React from 'react';
-import styled from 'styled-components';
-import EditorComponent from './EditorComponent';
-import FeedBackComponent from './FeedBackComponent';
-
-const EssayWrapper = styled.div`
-  border: 3px solid #f5f5f7;
-  height: auto;
-  padding: 10px;
-  .ProseMirror {
-    padding: 5px !important;
-    box-shadow: none !important;
-  }
-`;
-
-export default ({ node, view, getPos }) => {
-  return (
-    <>
-      <span>Essay</span>
-      <EssayWrapper>
-        <EditorComponent getPos={getPos} node={node} view={view} />
-        <FeedBackComponent getPos={getPos} node={node} view={view} />
-      </EssayWrapper>
-    </>
-  );
-};

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

+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components';
+
+export default ({ node, view, getPos }) => {
+  return <span>Question</span>;
+};

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

-/* 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 { grid, th } from '@pubsweet/ui-toolkit';
-
-const FeedBack = styled.div`
-  color: black;
-  margin-top: 10px;
-`;
-
-const FeedBackLabel = styled.span`
-  font-weight: 700;
-`;
-
-const FeedBackTextArea = styled.textarea`
-  background: none;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  font-family: ${th('fontWriting')};
-  position: relative;
-  right: 5px;
-  width: 100%;
-  min-height: 20px;
-
-  &:focus {
-    outline: none;
-  }
-`;
-
-export default ({ node, view, getPos }) => {
-  const context = useContext(WaxContext);
-  const [feedBack, setFeedBack] = useState('');
-  const feedBackRef = useRef(null);
-
-  useEffect(() => {}, []);
-
-  const handleKeyDown = e => {};
-
-  const feedBackInput = () => {
-    setFeedBack(feedBackRef.current.value);
-  };
-
-  const saveFeedBack = () => {
-    return true;
-  };
-
-  const onFocus = () => {
-    context.view.main.dispatch(
-      context.view.main.state.tr.setSelection(
-        TextSelection.create(context.view.main.state.tr.doc, null),
-      ),
-    );
-  };
-
-  return (
-    <FeedBack>
-      <FeedBackLabel>Feedback</FeedBackLabel>
-      <FeedBackTextArea
-        cols="2"
-        onBlur={saveFeedBack}
-        onChange={feedBackInput}
-        onFocus={onFocus}
-        onKeyDown={handleKeyDown}
-        placeholder="Insert feedback"
-        ref={feedBackRef}
-        rows="2"
-        type="text"
-        value={feedBack}
-      />
-    </FeedBack>
-  );
-};

wax-prosemirror-services/src/EssayService/schema/essayAnswerNode.js

+import { v4 as uuidv4 } from 'uuid';
+
+const essayAnswerNode = {
+  attrs: {
+    class: { default: 'essay-answer' },
+    id: { default: uuidv4() },
+  },
+  group: 'block questions',
+  content: 'block*',
+  defining: true,
+
+  parseDOM: [
+    {
+      tag: 'div.essay-answer',
+      getAttrs(dom) {
+        return {
+          id: dom.getAttribute('id'),
+          class: dom.getAttribute('class'),
+        };
+      },
+    },
+  ],
+  toDOM: node => ['div', node.attrs, 0],
+};
+
+export default essayAnswerNode;

wax-prosemirror-services/src/EssayService/schema/essayFeedBackNode.js

-const essayFeedBackNode = {};
-
-export default essayFeedBackNode;

wax-prosemirror-services/src/EssayService/schema/essayQuestionNode.js

-const essayQuestionNode = {};
+import { v4 as uuidv4 } from 'uuid';
+
+const essayQuestionNode = {
+  attrs: {
+    class: { default: 'essay-question' },
+    id: { default: uuidv4() },
+  },
+  group: 'block questions',
+  content: 'block*',
+  defining: true,
+
+  parseDOM: [
+    {
+      tag: 'div.essay-question',
+      getAttrs(dom) {
+        return {
+          id: dom.getAttribute('id'),
+          class: dom.getAttribute('class'),
+        };
+      },
+    },
+  ],
+  toDOM: node => ['div', node.attrs, 0],
+};
 
 export default essayQuestionNode;