set content

editors/demo/src/Editors.js

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

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';
@@ -35,6 +35,14 @@ 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;
@@ -48,11 +56,20 @@ const ThirdEditor = styled.div`
 `;
 
 const ContentArea = styled.div`
-  height: 250px;
+  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>
       <FirstTwoWrapper>
@@ -78,13 +95,13 @@ const Ncbi = () => {
       </FirstTwoWrapper>
       <ThirdEditorWrapper>
         <ThirdEditor>
-          <ContentArea></ContentArea>
+          <TitleEditorExport>Export On Enter</TitleEditorExport>
+          <ContentArea dangerouslySetInnerHTML={{ __html: content }} />
           <Wax
-            config={configEnter}
+            config={configEnter(getContent)}
             autoFocus
-            value=""
             layout={EnterLayout}
-            placeholder="Start Typing ..."
+            placeholder="Start Typing and press enter..."
           />
         </ThirdEditor>
       </ThirdEditorWrapper>

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

@@ -10,11 +10,13 @@ import {
   EnterService,
 } from 'wax-prosemirror-services';
 
-const getContentOnEnter = source => {
-  console.log('editor content', source);
-};
+import invisibles, {
+  space,
+  hardBreak,
+  paragraph,
+} from '@guardian/prosemirror-invisibles';
 
-const config = {
+const configEnter = getContent => ({
   MenuService: [
     {
       templateArea: 'topBar',
@@ -36,8 +38,12 @@ const config = {
   ShortCutsService: {},
   LinkService: {},
   SchemaService: DefaultSchema,
-  PmPlugins: [],
-  EnterService: { getContentOnEnter },
+  PmPlugins: [invisibles([hardBreak()])],
+  EnterService: {
+    getContentOnEnter: source => {
+      getContent(source);
+    },
+  },
 
   services: [
     new EnterService(),
@@ -49,6 +55,6 @@ const config = {
     new ListsService(),
     new BaseToolGroupService(),
   ],
-};
+});
 
-export default config;
+export default configEnter;

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

@@ -62,6 +62,7 @@ const EditorContainer = styled.div`
 
   .ProseMirror {
     border-top: none;
+    line-height: 1.6em;
     margin-right: ${grid(1)};
     padding: ${grid(1)};
   }