editors/demo/src/NCBI/NCBI.js

-import React from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { Wax } from 'wax-prosemirror-core';
 import styled from 'styled-components';
 
-import { NcbiLayout, NcbiMiniLayout } from './layout';
-import { configTitle, configMini } from './config';
+import { NcbiLayout, NcbiMiniLayout, EnterLayout } from './layout';
+import { configTitle, configMini, configEnter } from './config';
 
 const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: 50px;
+  width: 100%;
+`;
+
+const FirstTwoWrapper = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -28,10 +35,44 @@ const TitleEditor = styled.div`
   width: 80px;
 `;
 
+const TitleEditorExport = styled.div`
+  background: #fff;
+  height: 20px;
+  position: relative;
+  top: 2px;
+  width: 120px;
+`;
+
+const ThirdEditorWrapper = styled.div`
+  margin-top: 30px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+`;
+
+const ThirdEditor = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const ContentArea = styled.div`
+  height: 200px;
+  border: 1px solid black;
+  overflow-y: auto;
+`;
+
+let a = '';
+
 const Ncbi = () => {
+  const [content, setContent] = useState('');
+
+  const getContent = source => {
+    setContent(savedContent => `${savedContent} ${source}`);
+  };
+
   return (
-    <>
-      <Wrapper>
+    <Wrapper>
+      <FirstTwoWrapper>
         <FirstEditor>
           <TitleEditor>Basic Editor</TitleEditor>
 
@@ -51,8 +92,20 @@ const Ncbi = () => {
             layout={NcbiLayout}
           />
         </SecondEditor>
-      </Wrapper>
-    </>
+      </FirstTwoWrapper>
+      <ThirdEditorWrapper>
+        <ThirdEditor>
+          <TitleEditorExport>Export On Enter</TitleEditorExport>
+          <ContentArea dangerouslySetInnerHTML={{ __html: content }} />
+          <Wax
+            config={configEnter(getContent)}
+            autoFocus
+            layout={EnterLayout}
+            placeholder="Start Typing and press enter..."
+          />
+        </ThirdEditor>
+      </ThirdEditorWrapper>
+    </Wrapper>
   );
 };
 

editors/demo/src/NCBI/config/configEnter.js

+import { DefaultSchema } from 'wax-prosemirror-utilities';
+import {
+  InlineAnnotationsService,
+  AnnotationToolGroupService,
+  ListsService,
+  ListToolGroupService,
+  BaseService,
+  BaseToolGroupService,
+  LinkService,
+  EnterService,
+} from 'wax-prosemirror-services';
+
+import invisibles, {
+  space,
+  hardBreak,
+  paragraph,
+} from '@guardian/prosemirror-invisibles';
+
+const configEnter = getContent => ({
+  MenuService: [
+    {
+      templateArea: 'topBar',
+      toolGroups: [
+        {
+          name: 'Base',
+          exclude: ['Save'],
+        },
+        {
+          name: 'Annotations',
+          exclude: ['Code', 'StrikeThrough', 'Underline', 'SmallCaps'],
+        },
+        'Lists',
+      ],
+    },
+  ],
+
+  RulesService: [],
+  ShortCutsService: {},
+  LinkService: {},
+  SchemaService: DefaultSchema,
+  PmPlugins: [invisibles([hardBreak()])],
+  EnterService: {
+    getContentOnEnter: source => {
+      getContent(source);
+    },
+  },
+
+  services: [
+    new EnterService(),
+    new InlineAnnotationsService(),
+    new AnnotationToolGroupService(),
+    new LinkService(),
+    new ListToolGroupService(),
+    new BaseService(),
+    new ListsService(),
+    new BaseToolGroupService(),
+  ],
+});
+
+export default configEnter;

editors/demo/src/NCBI/config/index.js

 export { default as configTitle } from './configTitle';
 export { default as configMini } from './configMini';
+export { default as configEnter } from './configEnter';

editors/demo/src/NCBI/layout/EnterLayout.js

+import React from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { ComponentPlugin } from 'wax-prosemirror-core';
+import { cokoTheme } from '../theme';
+import { grid, th } from '@pubsweet/ui-toolkit';
+import EditorMiniElements from './EditorMiniElements';
+
+const Wrapper = styled.div`
+  background: ${th('colorBackground')};
+  border: 1px solid grey;
+  clear: both;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-family: ${th('fontInterface')};
+  font-size: ${th('fontSizeBase')};
+  width: 100%;
+`;
+
+const Main = styled.div`
+  display: flex;
+`;
+
+const TopMenu = styled.div`
+  background: #fff;
+  display: inline-flex;
+  height: 32px;
+  margin-right: 1px;
+  user-select: none;
+  width: 498px;
+  z-index: 999;
+
+  > div:not(:last-child) {
+    border: none;
+    ${th('colorFurniture')};
+  }
+`;
+
+const EditorArea = styled.div`
+  flex-grow: 1;
+  max-height: 400px;
+`;
+
+const WaxSurfaceScroll = styled.div`
+  border: none;
+  box-sizing: border-box;
+  display: flex;
+  overflow-y: auto;
+  max-height: 400px;
+  position: relative;
+  width: 100%;
+  /* PM styles  for main content*/
+
+  /* stylelint-disable-next-line order/properties-alphabetical-order */
+  ${EditorMiniElements}
+`;
+
+const EditorContainer = styled.div`
+  height: 100%;
+  width: 100%;
+  max-height: 400px;
+
+  .ProseMirror {
+    border-top: none;
+    line-height: 1.6em;
+    margin-right: ${grid(1)};
+    padding: ${grid(1)};
+  }
+`;
+
+const TopBar = ComponentPlugin('topBar');
+
+const EnterLayout = ({ editor }) => (
+  <ThemeProvider theme={cokoTheme}>
+    <Wrapper>
+      <TopMenu>
+        <TopBar />
+      </TopMenu>
+      <Main>
+        <EditorArea>
+          <WaxSurfaceScroll>
+            <EditorContainer>{editor}</EditorContainer>
+          </WaxSurfaceScroll>
+        </EditorArea>
+      </Main>
+    </Wrapper>
+  </ThemeProvider>
+);
+
+export default EnterLayout;

editors/demo/src/NCBI/layout/index.js

 export { default as NcbiLayout } from './NcbiLayout';
 export { default as NcbiMiniLayout } from './NcbiMiniLayout';
+export { default as EnterLayout } from './EnterLayout';

wax-prosemirror-core/src/WaxView.js

@@ -6,7 +6,6 @@ import React, {
   useCallback,
   useMemo,
   useEffect,
-  useState,
   forwardRef,
   useImperativeHandle,
 } from 'react';
@@ -46,7 +45,6 @@ const WaxView = forwardRef((props, ref) => {
   } = props;
 
   const WaxEditorRef = useRef();
-  const [mounted, setMounted] = useState(false);
   const context = useContext(WaxContext);
   const { createPortal } = useContext(PortalContext);
 
@@ -54,20 +52,12 @@ const WaxView = forwardRef((props, ref) => {
 
   const schema = context.app.getSchema();
 
-  if (!mounted) {
-    context.app.bootServices();
-    context.app.getShortCuts();
-  }
-
   const setEditorRef = useCallback(
-    // eslint-disable-next-line consistent-return
     node => {
-      if (WaxEditorRef.current) {
-        // this is where you do cleanup if you have to. the WaxEditorRef.current will
-        // still point to the old ref, the old node. so you have some time here to
-        // clean up the unmount if you need to.
-      }
       if (node) {
+        context.app.bootServices();
+        context.app.getShortCuts();
+
         const options = WaxOptions({
           ...props,
           schema,
@@ -99,8 +89,6 @@ const WaxView = forwardRef((props, ref) => {
           },
         );
 
-        setMounted(true);
-
         context.updateView(
           {
             main: view,
@@ -108,14 +96,15 @@ const WaxView = forwardRef((props, ref) => {
           'main',
         );
         if (debug) applyDevTools(view);
-        if (autoFocus)
+        if (autoFocus && view)
           setTimeout(() => {
-            if (view) view.focus();
+            view.focus();
           }, 1000);
 
         return () => view.destroy();
       }
       WaxEditorRef.current = node;
+      return true;
     },
     [readonly, customValues],
   );

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

@@ -97,7 +97,7 @@ const EditorComponent = ({ node, view, getPos }) => {
           doc: node,
           plugins: finalPlugins,
         }),
-        // This is the magic part
+
         dispatchTransaction,
         disallowedTools: ['Images', 'Lists', 'lift', 'MultipleChoice'],
         handleDOMEvents: {

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

@@ -128,7 +128,7 @@ const EssayAnswerComponent = ({ node, view, getPos }) => {
           doc: node,
           plugins: finalPlugins,
         }),
-        // This is the magic part
+
         dispatchTransaction,
         disallowedTools: ['MultipleChoice'],
         handleDOMEvents: {

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

@@ -127,7 +127,7 @@ const EssayQuestionComponent = ({ node, view, getPos }) => {
           doc: node,
           plugins: finalPlugins,
         }),
-        // This is the magic part
+
         dispatchTransaction,
         disallowedTools: ['MultipleChoice'],
         handleDOMEvents: {

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

@@ -78,7 +78,6 @@ const EditorComponent = ({ node, view, getPos }) => {
           doc: node,
           plugins: finalPlugins,
         }),
-        // This is the magic part
         dispatchTransaction,
         disallowedTools: [
           'Images',

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

@@ -90,7 +90,7 @@ const EditorComponent = ({ node, view, getPos }) => {
           doc: node,
           plugins: finalPlugins,
         }),
-        // This is the magic part
+
         dispatchTransaction,
         disallowedTools: [
           'Images',

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

@@ -36,7 +36,7 @@ export default ({ node, view, getPos }) => {
       <span>Fill The Gap</span>
       <FillTheGapContainer className="fill-the-gap">
         <ContainerEditor getPos={getPos} node={node} view={view} />
-        {!(readOnly && !customProps.showFeedBack) && (
+        {!(readOnly && customProps && !customProps.showFeedBack) && (
           <FeedbackComponent
             getPos={getPos}
             node={node}

wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js

 /* eslint-disable react/prop-types */
 import React, { useContext } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
+import { Icon } from 'wax-prosemirror-components';
 import styled from 'styled-components';
 import FeedbackComponent from './FeedbackComponent';
 
@@ -10,10 +11,38 @@ const MatchingContainer = styled.div`
 `;
 
 const MatchingWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
   margin-bottom: ;
   margin: 0px 38px 15px 38px;
+  margin-top: 10px;
+`;
 
+const QuestionWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+const LeftArea = styled.div`
+  display: flex;
+`;
+const RightArea = styled.div`
+  display: flex;
+`;
+const CreateOptions = styled.div`
+  display: flex;
   margin-top: 10px;
+  border: 1px solid black;
+`;
+
+const ActionButton = styled.button`
+  border: none;
+  background: transparent;
+  cursor: pointer;
+`;
+
+const StyledIconAction = styled(Icon)`
+  height: 24px;
+  width: 24px;
 `;
 
 export default ({ node, view, getPos }) => {
@@ -30,10 +59,33 @@ export default ({ node, view, getPos }) => {
 
   const readOnly = !isEditable;
 
+  const addOption = () => {};
+
   return (
     <MatchingWrapper>
       <span>Matching</span>
       <MatchingContainer className="matching">
+        <QuestionWrapper>
+          <LeftArea>
+            <input type="text"></input>
+            {!readOnly && (
+              <ActionButton
+                onClick={() => addOption(node.attrs.id)}
+                type="button"
+              >
+                <StyledIconAction name="plusSquare" />
+              </ActionButton>
+            )}
+          </LeftArea>
+          <RightArea>Right</RightArea>
+        </QuestionWrapper>
+        <QuestionWrapper>
+          <LeftArea>
+            <input type="text"></input>
+          </LeftArea>
+          <RightArea>Right</RightArea>
+        </QuestionWrapper>
+        <CreateOptions>Options</CreateOptions>
         {!(readOnly && !customProps.showFeedBack) && (
           <FeedbackComponent
             getPos={getPos}

wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js

@@ -185,7 +185,7 @@ export default ({ node, view, getPos }) => {
           <QuestionData>
             <EditorComponent getPos={getPos} node={node} view={view} />
           </QuestionData>
-          {!(readOnly && !customProps.showFeedBack) && (
+          {!(readOnly && customProps && !customProps.showFeedBack) && (
             <FeedbackComponent
               getPos={getPos}
               node={node}

wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js

@@ -184,7 +184,7 @@ export default ({ node, view, getPos }) => {
           <QuestionData>
             <EditorComponent getPos={getPos} node={node} view={view} />
           </QuestionData>
-          {!(readOnly && !customProps.showFeedBack) && (
+          {!(readOnly && customProps && !customProps.showFeedBack) && (
             <FeedbackComponent
               getPos={getPos}
               node={node}

wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/TrueFalseSwitch.js

@@ -67,7 +67,7 @@ const TrueFalseSwitch = ({
   checked,
   checkedAnswerMode,
 }) => {
-  if (customProps.showFeedBack) {
+  if (customProps && customProps.showFeedBack) {
     const correct = node.attrs.correct ? 'TRUE' : 'FALSE';
     const answer = node.attrs.answer ? 'TRUE' : 'FALSE';
     const isCorrect = node.attrs.correct === node.attrs.answer;

wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js

@@ -184,7 +184,7 @@ export default ({ node, view, getPos }) => {
           <QuestionData>
             <EditorComponent getPos={getPos} node={node} view={view} />
           </QuestionData>
-          {!(readOnly && !customProps.showFeedBack) && (
+          {!(readOnly && customProps && !customProps.showFeedBack) && (
             <FeedbackComponent
               getPos={getPos}
               node={node}

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

@@ -184,7 +184,7 @@ export default ({ node, view, getPos }) => {
           <QuestionData>
             <EditorComponent getPos={getPos} node={node} view={view} />
           </QuestionData>
-          {!(readOnly && !customProps.showFeedBack) && (
+          {!(readOnly && customProps && !customProps.showFeedBack) && (
             <FeedbackComponent
               getPos={getPos}
               node={node}

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

@@ -108,7 +108,6 @@ const EditorComponent = ({ node, view, getPos }) => {
           doc: node,
           plugins: finalPlugins,
         }),
-        // This is the magic part
         dispatchTransaction,
         disallowedTools: ['Images', 'Lists', 'lift', 'MultipleChoice'],
         handleDOMEvents: {

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

@@ -143,7 +143,6 @@ const QuestionEditorComponent = ({ node, view, getPos }) => {
           doc: node,
           plugins: finalPlugins,
         }),
-        // This is the magic part
         dispatchTransaction,
         disallowedTools: ['MultipleChoice'],
         handleDOMEvents: {