Merge branch 'gap-question' into 'master'

Gap question

See merge request !330

editors/demo/src/Editoria/layout/EditorElements.js

@@ -349,7 +349,7 @@ export default css`
   }
 
   .math-node.ProseMirror-selectednode .math-src {
-    display: flex;
+    display: inline-flex;
   }
   .math-node.ProseMirror-selectednode .math-render {
     display: none;

editors/demo/src/Editors.js

@@ -70,7 +70,7 @@ const Editors = () => {
       case 'ncbi':
         return <NCBI />;
       default:
-        return <HHMI />;
+        return <Editoria />;
     }
   };
 

editors/demo/src/HHMI/FillTheGapQuestionService/schema/fillTheGapNode.js

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

editors/demo/src/HHMI/HHMI.js

@@ -15,7 +15,7 @@ const renderImage = file => {
   });
 };
 
-const t = `<p class="paragraph">Based on the equation below</p><math-display class="math-node">x + y = 5</math-display><p class="paragraph">Which ones are correct?</p><p class="paragraph"></p><div id="" class="mutiple-choice"><div class="mutiple-choice-option" id="d7b65415-ff82-446f-afa4-accaa3837f4a" correct="false" feedback=""><p class="paragraph">answer 1</p><p class="paragraph"><math-inline class="math-node">x+y=1</math-inline></p></div><div class="mutiple-choice-option" id="e7d6bb2f-7cd7-44f1-92a0-281e72157538" correct="true" feedback=""><p class="paragraph">answer 2</p></div><div class="mutiple-choice-option" id="d6fc749f-afae-4203-9562-d68c380a86e5" correct="false" feedback=""><p class="paragraph">answer 3</p></div></div>`;
+const t = `<p class="paragraph">Based on the equation below</p><math-display class="math-node">x + y = 5</math-display><p class="paragraph">Which ones are correct?</p><p class="paragraph"></p><div id="" class="mutiple-choice"><div class="mutiple-choice-option" id="d7b65415-ff82-446f-afa4-accaa3837f4a" correct="false" feedback=""><p class="paragraph">answer 1</p><p class="paragraph"><math-inline class="math-node">x+y=1</math-inline></p></div><div class="mutiple-choice-option" id="e7d6bb2f-7cd7-44f1-92a0-281e72157538" correct="true" feedback=""><p class="paragraph">answer 2</p></div><div class="mutiple-choice-option" id="d6fc749f-afae-4203-9562-d68c380a86e5" correct="false" feedback=""><p class="paragraph">answer 3</p></div></div><div id="" class="fill-the-gap"><p class="paragraph">A <span id="bfd4376c-4424-455e-9187-f53282fa1024" class="fill-the-gap">DNA</span> molecule is very long and usually consists of hundreds or thousands of genes.</p><p class="paragraph">An electron having a certain discrete amount of <span id="14dedf44-728f-4384-835f-e3af82b25623" class="fill-the-gap">energy</span> is something like a ball on a staircase.</p></div><p class="paragraph"></p>`;
 
 const Hhmi = () => {
   return (
@@ -24,7 +24,7 @@ const Hhmi = () => {
         config={config}
         autoFocus
         fileUpload={file => renderImage(file)}
-        value=""
+        value={t}
         // readonly
         layout={HhmiLayout}
         // onChange={source => console.log(source)}

editors/demo/src/HHMI/config/config.js

@@ -21,17 +21,15 @@ import {
   EditorInfoToolGroupServices,
   BottomInfoService,
   MultipleChoiceQuestionService,
-  QuestionsToolGroupService,
+  MultipleChoiceToolGroupService,
+  FillTheGapQuestionService,
+  FillTheGapToolGroupService,
 } from 'wax-prosemirror-services';
 
 import { DefaultSchema } from 'wax-prosemirror-utilities';
 import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
 import invisibles, { hardBreak } from '@guardian/prosemirror-invisibles';
 
-/* Questions Services */
-// import MultipleChoiceQuestionService from '../MultipleChoiceQuestionService/MultipleChoiceQuestionService';
-// import QuestionsToolGroupService from '../QuestionsToolGroupService/QuestionsToolGroupService';
-
 export default {
   MenuService: [
     {
@@ -51,7 +49,8 @@ export default {
         'Lists',
         'Images',
         'Tables',
-        'Questions',
+        'MultipleChoice',
+        'FillTheGap',
         'FullScreen',
       ],
     },
@@ -68,8 +67,10 @@ export default {
   ],
 
   services: [
+    new FillTheGapQuestionService(),
+    new FillTheGapToolGroupService(),
     new MultipleChoiceQuestionService(),
-    new QuestionsToolGroupService(),
+    new MultipleChoiceToolGroupService(),
     new ListsService(),
     new LinkService(),
     new InlineAnnotationsService(),

editors/demo/src/HHMI/layout/EditorElements.js

@@ -345,4 +345,24 @@ export default css`
       padding: 5px 5px 0 5px;
     }
   }
+
+  /* -- Fill The Gap ---------------------------------- */
+
+  .fill-the-gap {
+    border: 3px solid #f5f5f7;
+    margin-bottom: 30px;
+    margin-top: 30px;
+    padding: 3px;
+
+    &:before {
+      background-color: #fff;
+      bottom: 22px;
+      color: #535e76;
+      content: 'Fill The Gap';
+      height: 10px;
+      left: -1px;
+      position: relative;
+      width: 30px;
+    }
+  }
 `;

editors/demo/src/HHMI/layout/HhmiLayout.js

@@ -44,16 +44,14 @@ const TopMenu = styled.div`
       ${th('colorFurniture')};
   }
 
-  > div:nth-last-of-type(-n + 2) {
-    margin-left: auto;
-  }
-
   > div:last-child {
-    margin-left: 0;
+    border-left: ${th('borderWidth')} ${th('borderStyle')}
+      ${th('colorFurniture')};
+    margin-left: auto;
     margin-right: ${grid(5)};
   }
 
-  > div[data-name='Tables'] {
+  > div[data-name='FillTheGap'] {
     border-right: none;
   }
 `;

wax-prosemirror-components/package.json

@@ -19,7 +19,7 @@
     "moment": "^2.29.0",
     "prop-types": "^15.7.2",
     "prosemirror-model": "1.14.3",
-    "prosemirror-state": "1.3.4",
+    "prosemirror-state": "1.3.3",
     "prosemirror-tables": "^1.1.1",
     "prosemirror-transform": "1.2.6",
     "react-dropdown": "^1.6.2",

wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js

@@ -32,7 +32,7 @@ const CommentBubbleComponent = ({
 
   const isCommentAllowed = () => {
     const commentMark = activeView.state.schema.marks.comment;
-    const mark = DocumentHelpers.findMark(state, commentMark, true);
+    const marks = DocumentHelpers.findMark(state, commentMark, true);
 
     let allowed = true;
     state.doc.nodesBetween(
@@ -48,9 +48,13 @@ const CommentBubbleComponent = ({
         }
       },
     );
-
     // TODO Overlapping comments . for now don't allow
-    if (mark.length >= 1) allowed = false;
+    marks.forEach(mark => {
+      if (mark.attrs.group === 'main') allowed = false;
+    });
+
+    // TO DO this is because of a bug and overlay doesn't rerender. Fix in properly in Notes, and remove
+    if (activeViewId !== 'main' && marks.length >= 1) allowed = false;
     return allowed;
   };
 

wax-prosemirror-components/src/icons/icons.js

@@ -418,4 +418,24 @@ export default {
       />
     </Svg>
   ),
+  multipleChoice: ({ className }) => (
+    <Svg className={className} fill="none" viewBox="0 0 24 24">
+      <title> Add Multiple Choice </title>
+      <path d="M16.54,11L13,7.46l1.41-1.41l2.12,2.12l4.24-4.24l1.41,1.41L16.54,11z M11,7H2v2h9V7z M21,13.41L19.59,12L17,14.59 L14.41,12L13,13.41L15.59,16L13,18.59L14.41,20L17,17.41L19.59,20L21,18.59L18.41,16L21,13.41z M11,15H2v2h9V15z" />
+    </Svg>
+  ),
+  gapQuestion: ({ className }) => (
+    <Svg className={className} fill="none" viewBox="0 0 24 24">
+      <title> Add Fill The Gap Question </title>
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM5 15h14v3H5z" />
+    </Svg>
+  ),
+  insertGap: ({ className }) => (
+    <Svg className={className} fill="none" viewBox="0 0 24 24">
+      <title> Add Gap </title>
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M18 9v4H6V9H4v6h16V9h-2z" />
+    </Svg>
+  ),
 };

wax-prosemirror-core/package.json

@@ -25,7 +25,7 @@
     "prosemirror-inputrules": "1.1.3",
     "prosemirror-keymap": "1.1.4",
     "prosemirror-model": "1.14.3",
-    "prosemirror-state": "1.3.4",
+    "prosemirror-state": "1.3.3",
     "prosemirror-transform": "1.2.6",
     "prosemirror-view": "1.20.1",
     "reflect-metadata": "^0.1.13",

wax-prosemirror-core/src/WaxView.js

@@ -22,6 +22,10 @@ const WaxPortals = ComponentPlugin('waxPortals');
 
 let previousDoc;
 
+const PMstyleWrapper = styled.span`
+  ${styles};
+`;
+
 export default props => {
   const {
     browserSpellCheck,
@@ -146,15 +150,11 @@ export default props => {
     }
   };
 
-  const WaxEditor = styled.span`
-    ${styles};
-  `;
-
   const editor = (
-    <WaxEditor>
+    <PMstyleWrapper>
       <div ref={setEditorRef} />
       <WaxPortals />
-    </WaxEditor>
+    </PMstyleWrapper>
   );
 
   return useMemo(

wax-prosemirror-plugins/package.json

@@ -19,7 +19,7 @@
     "prosemirror-commands": "1.1.10",
     "prosemirror-highlightjs": "^0.2.0",
     "prosemirror-keymap": "1.1.4",
-    "prosemirror-state": "1.3.4",
+    "prosemirror-state": "1.3.3",
     "prosemirror-transform": "1.2.6",
     "prosemirror-view": "1.20.1",
     "wax-prosemirror-components": "^0.1.3",

wax-prosemirror-plugins/src/highlightPlugin.js

@@ -3,7 +3,7 @@ import { getHighlightDecorations } from 'prosemirror-highlightjs';
 import { DecorationSet } from 'prosemirror-view';
 import { Plugin, PluginKey } from 'prosemirror-state';
 
-const key = new PluginKey('codeHigh;ight');
+const key = new PluginKey('codeHighlight');
 
 const highlightPlugin = (nodeTypes = ['code_block']) => {
   return new Plugin({

wax-prosemirror-schema/src/nodes/blockQuoteNode.js

 const blockquote = {
-  content: "block+",
-  group: "block",
+  content: 'block+',
+  group: 'block',
   defining: true,
-  parseDOM: [{ tag: "blockquote" }],
+  parseDOM: [{ tag: 'blockquote' }],
   toDOM() {
-    return ["blockquote", 0];
-  }
+    return ['blockquote', 0];
+  },
 };
 
 export default blockquote;

wax-prosemirror-services/index.js

@@ -45,6 +45,7 @@ export { default as CustomTagInlineService } from './src/CustomTagService/Custom
 export { default as CustomTagBlockService } from './src/CustomTagService/CustomTagBlockService/CustomTagBlockService';
 export { default as CustomTagService } from './src/CustomTagService/CustomTagService';
 export { default as MultipleChoiceQuestionService } from './src/MultipleChoiceQuestionService/MultipleChoiceQuestionService';
+export { default as FillTheGapQuestionService } from './src/FillTheGapQuestionService/FillTheGapQuestionService';
 
 /*
 ToolGroups
@@ -70,4 +71,5 @@ 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 QuestionsToolGroupService } from './src/WaxToolGroups/QuestionsToolGroupService/QuestionsToolGroupService';
+export { default as MultipleChoiceToolGroupService } from './src/WaxToolGroups/MultipleChoiceToolGroupService/MultipleChoiceToolGroupService';
+export { default as FillTheGapToolGroupService } from './src/WaxToolGroups/FillTheGapToolGroupService/FillTheGapToolGroupService';

wax-prosemirror-services/package.json

@@ -22,7 +22,7 @@
     "prosemirror-keymap": "1.1.4",
     "prosemirror-model": "1.14.3",
     "prosemirror-schema-list": "1.1.4",
-    "prosemirror-state": "1.3.4",
+    "prosemirror-state": "1.3.3",
     "prosemirror-transform": "1.2.6",
     "prosemirror-view": "1.20.1",
     "styled-components": "^5.3.0",

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

-import Service from "../Service";
-import BaseServices from "./index";
+import Service from '../Service';
+import BaseServices from './index';
 
 class BaseService extends Service {
   dependencies = BaseServices;

wax-prosemirror-services/src/FillTheGapQuestionService/CreateGapService/CreateGap.js

+import { injectable } from 'inversify';
+import { Fragment } from 'prosemirror-model';
+import { v4 as uuidv4 } from 'uuid';
+import Tools from '../../lib/Tools';
+
+@injectable()
+class CreateGap extends Tools {
+  title = 'Create Gap Option';
+  icon = 'insertGap';
+  name = 'Create Gap';
+
+  get run() {
+    return (state, dispatch) => {
+      const { empty, $from, $to } = state.selection;
+      let content = Fragment.empty;
+      if (!empty && $from.sameParent($to) && $from.parent.inlineContent)
+        content = $from.parent.content.cut(
+          $from.parentOffset,
+          $to.parentOffset,
+        );
+      const createGap = state.config.schema.nodes.fill_the_gap.create(
+        { id: uuidv4() },
+        content,
+      );
+      dispatch(state.tr.replaceSelectionWith(createGap));
+    };
+  }
+
+  select = (state, activeViewId) => {
+    let status = false;
+    const { from, to } = state.selection;
+    state.doc.nodesBetween(from, to, (node, pos) => {
+      if (node.type.name === 'fill_the_gap_container') {
+        status = true;
+      }
+    });
+    return status;
+  };
+
+  get active() {
+    return state => {};
+  }
+
+  get enable() {
+    return state => {};
+  }
+}
+
+export default CreateGap;

wax-prosemirror-services/src/FillTheGapQuestionService/CreateGapService/CreateGapService.js

+import Service from '../../Service';
+import CreateGap from './CreateGap';
+
+class FillTheGapQuestionService extends Service {
+  register() {
+    this.container.bind('CreateGap').to(CreateGap);
+  }
+}
+
+export default FillTheGapQuestionService;