mini editor

editors/demo/src/Editors.js

@@ -96,7 +96,7 @@ const Editors = () => {
             isActive={project === 'ncbi'}
             onClick={() => setProject('ncbi')}
           >
-            NCBI
+            Mini Editors
           </ProjectButton>
         </Projects>
       </ChooseProject>

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>
     </>
   );

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

+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;

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

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

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

+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;
+  }
+`;

editors/demo/src/NCBI/layout/NcbiMiniLayout.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;
+    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;

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

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