From 9cc28c178aedec5bd2a7859cd8e2d1ba20d5f881 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Wed, 22 Sep 2021 15:57:15 +0300
Subject: [PATCH] mini editor
---
editors/demo/src/Editors.js | 2 +-
editors/demo/src/NCBI/NCBI.js | 12 ++-
editors/demo/src/NCBI/config/configMini.js | 45 +++++++++
editors/demo/src/NCBI/config/index.js | 1 +
.../src/NCBI/layout/EditorMiniElements.js | 63 +++++++++++++
.../demo/src/NCBI/layout/NcbiMiniLayout.js | 91 +++++++++++++++++++
editors/demo/src/NCBI/layout/index.js | 1 +
7 files changed, 212 insertions(+), 3 deletions(-)
create mode 100644 editors/demo/src/NCBI/config/configMini.js
create mode 100644 editors/demo/src/NCBI/layout/EditorMiniElements.js
create mode 100644 editors/demo/src/NCBI/layout/NcbiMiniLayout.js
diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 0109bafaa..b17ba5ecc 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -96,7 +96,7 @@ const Editors = () => {
isActive={project === 'ncbi'}
onClick={() => setProject('ncbi')}
>
- NCBI
+ Mini Editors
</ProjectButton>
</Projects>
</ChooseProject>
diff --git a/editors/demo/src/NCBI/NCBI.js b/editors/demo/src/NCBI/NCBI.js
index efeb5399e..77aabf3cd 100644
--- a/editors/demo/src/NCBI/NCBI.js
+++ b/editors/demo/src/NCBI/NCBI.js
@@ -3,13 +3,18 @@ import React from 'react';
import { Wax } from 'wax-prosemirror-core';
import styled from 'styled-components';
-import { NcbiLayout } from './layout';
-import { configTitle } from './config';
+import { NcbiLayout, NcbiMiniLayout } from './layout';
+import { configTitle, configMini } from './config';
const Wrapper = styled.div`
padding: 50px;
`;
+const Divider = styled.div`
+ height: 50px;
+ width: 100%;
+`;
+
const Ncbi = () => {
return (
<>
@@ -20,6 +25,9 @@ const Ncbi = () => {
value="This is a really really really long title that you cannot break into multiple lines"
layout={NcbiLayout}
/>
+ <Divider></Divider>
+
+ <Wax config={configMini} autoFocus value="" layout={NcbiMiniLayout} />
</Wrapper>
</>
);
diff --git a/editors/demo/src/NCBI/config/configMini.js b/editors/demo/src/NCBI/config/configMini.js
new file mode 100644
index 000000000..10d87e3e4
--- /dev/null
+++ b/editors/demo/src/NCBI/config/configMini.js
@@ -0,0 +1,45 @@
+import { DefaultSchema } from 'wax-prosemirror-utilities';
+import {
+ InlineAnnotationsService,
+ AnnotationToolGroupService,
+ ListsService,
+ ListToolGroupService,
+ BaseService,
+ BaseToolGroupService,
+ LinkService,
+} from 'wax-prosemirror-services';
+import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
+
+const config = {
+ MenuService: [
+ {
+ templateArea: 'topBar',
+ toolGroups: [
+ 'Base',
+ {
+ name: 'Annotations',
+ exclude: ['Code', 'StrikeThrough', 'Underline', 'SmallCaps'],
+ },
+ 'Lists',
+ ],
+ },
+ ],
+
+ RulesService: [],
+ ShortCutsService: {},
+ LinkService: {},
+ SchemaService: DefaultSchema,
+ PmPlugins: [WaxSelectionPlugin],
+
+ services: [
+ new InlineAnnotationsService(),
+ new AnnotationToolGroupService(),
+ new LinkService(),
+ new ListToolGroupService(),
+ new BaseService(),
+ new ListsService(),
+ new BaseToolGroupService(),
+ ],
+};
+
+export default config;
diff --git a/editors/demo/src/NCBI/config/index.js b/editors/demo/src/NCBI/config/index.js
index 5f3c39342..6a377bf2e 100644
--- a/editors/demo/src/NCBI/config/index.js
+++ b/editors/demo/src/NCBI/config/index.js
@@ -1 +1,2 @@
export { default as configTitle } from './configTitle';
+export { default as configMini } from './configMini';
diff --git a/editors/demo/src/NCBI/layout/EditorMiniElements.js b/editors/demo/src/NCBI/layout/EditorMiniElements.js
new file mode 100644
index 000000000..b745fb41d
--- /dev/null
+++ b/editors/demo/src/NCBI/layout/EditorMiniElements.js
@@ -0,0 +1,63 @@
+import { css } from 'styled-components';
+
+import { th } from '@pubsweet/ui-toolkit';
+
+/* All styles regarding ProseMirror surface and elements */
+
+const fontWriting = css`
+ color: ${th('colorText')};
+ font-family: ${th('fontWriting')};
+ font-size: ${th('fontSizeBase')};
+`;
+
+export default css`
+ .ProseMirror {
+ background: white;
+ counter-reset: footnote;
+ line-height: 12px;
+ width: 497px;
+ ${fontWriting}
+
+ p::selection,
+ h1::selection,
+ h2::selection,
+ h3::selection,
+ code::selection,
+ span::selection,
+ p span::selection,
+ h1 span::selection,
+ h2 span::selection,
+ h3 span::selection,
+ code span::selection title::selection {
+ background-color: transparent;
+ }
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ .ProseMirror .wax-selection-marker {
+ background-color: ${th('colorSelection')};
+ }
+
+ div[contenteditable='false'] {
+ pointer-events: none;
+ user-select: none;
+ }
+
+ .ProseMirror title {
+ display: inline;
+ font-size: 14px;
+ }
+
+ ul,
+ ol {
+ padding-left: 30px;
+ }
+
+ sup,
+ sub {
+ line-height: 0;
+ }
+`;
diff --git a/editors/demo/src/NCBI/layout/NcbiMiniLayout.js b/editors/demo/src/NCBI/layout/NcbiMiniLayout.js
new file mode 100644
index 000000000..3a3d16eb1
--- /dev/null
+++ b/editors/demo/src/NCBI/layout/NcbiMiniLayout.js
@@ -0,0 +1,91 @@
+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;
+ margin-right: ${grid(1)};
+ padding: ${grid(1)};
+ }
+`;
+
+const TopBar = ComponentPlugin('topBar');
+const WaxOverlays = ComponentPlugin('waxOverlays');
+console.log(cokoTheme);
+const NcbiLayout = ({ editor }) => (
+ <ThemeProvider theme={cokoTheme}>
+ <Wrapper>
+ <TopMenu>
+ <TopBar />
+ </TopMenu>
+ <Main>
+ <EditorArea>
+ <WaxSurfaceScroll>
+ <EditorContainer>{editor}</EditorContainer>
+ </WaxSurfaceScroll>
+ </EditorArea>
+ </Main>
+ <WaxOverlays />
+ </Wrapper>
+ </ThemeProvider>
+);
+
+export default NcbiLayout;
diff --git a/editors/demo/src/NCBI/layout/index.js b/editors/demo/src/NCBI/layout/index.js
index 682b9ec6b..c9f5d7412 100644
--- a/editors/demo/src/NCBI/layout/index.js
+++ b/editors/demo/src/NCBI/layout/index.js
@@ -1 +1,2 @@
export { default as NcbiLayout } from './NcbiLayout';
+export { default as NcbiMiniLayout } from './NcbiMiniLayout';
--
GitLab