From 2f579a3729c99733877de308789b86d76fdb13e6 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 22 Mar 2022 14:02:31 +0200
Subject: [PATCH] set content
---
editors/demo/src/Editors.js | 2 +-
editors/demo/src/NCBI/NCBI.js | 29 ++++++++++++++++-----
editors/demo/src/NCBI/config/configEnter.js | 22 ++++++++++------
editors/demo/src/NCBI/layout/EnterLayout.js | 1 +
4 files changed, 39 insertions(+), 15 deletions(-)
diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 1e839e3d3..166168897 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -70,7 +70,7 @@ const Editors = () => {
case 'ncbi':
return <NCBI />;
default:
- return <HHMI />;
+ return <Editoria />;
}
};
diff --git a/editors/demo/src/NCBI/NCBI.js b/editors/demo/src/NCBI/NCBI.js
index e65630385..dcae24b1a 100644
--- a/editors/demo/src/NCBI/NCBI.js
+++ b/editors/demo/src/NCBI/NCBI.js
@@ -1,4 +1,4 @@
-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>
diff --git a/editors/demo/src/NCBI/config/configEnter.js b/editors/demo/src/NCBI/config/configEnter.js
index bed6a3457..2bf14ef69 100644
--- a/editors/demo/src/NCBI/config/configEnter.js
+++ b/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;
diff --git a/editors/demo/src/NCBI/layout/EnterLayout.js b/editors/demo/src/NCBI/layout/EnterLayout.js
index 69052ec5f..f87166de4 100644
--- a/editors/demo/src/NCBI/layout/EnterLayout.js
+++ b/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)};
}
--
GitLab