From 9eb708132634922867dd8c534da4095d563a2222 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Wed, 22 Sep 2021 15:13:04 +0300
Subject: [PATCH] title editor
---
editors/demo/src/Editoria/config/config.js | 1 +
editors/demo/src/Editors.js | 3 +-
editors/demo/src/HHMI/layout/HhmiLayout.js | 1 -
editors/demo/src/HHMI/theme/index.js | 3 +-
editors/demo/src/NCBI/NCBI.js | 28 ++++++
editors/demo/src/NCBI/config/configTitle.js | 70 +++++++++++++
editors/demo/src/NCBI/config/index.js | 1 +
.../demo/src/NCBI/layout/EditorElements.js | 65 ++++++++++++
editors/demo/src/NCBI/layout/NcbiLayout.js | 99 +++++++++++++++++++
editors/demo/src/NCBI/layout/index.js | 1 +
.../src/NCBI/theme/elements/ButtonStyles.js | 0
editors/demo/src/NCBI/theme/index.js | 1 +
editors/demo/src/NCBI/theme/theme.js | 87 ++++++++++++++++
wax-prosemirror-core/src/WaxView.js | 2 +-
14 files changed, 357 insertions(+), 5 deletions(-)
create mode 100644 editors/demo/src/NCBI/NCBI.js
create mode 100644 editors/demo/src/NCBI/config/configTitle.js
create mode 100644 editors/demo/src/NCBI/config/index.js
create mode 100644 editors/demo/src/NCBI/layout/EditorElements.js
create mode 100644 editors/demo/src/NCBI/layout/NcbiLayout.js
create mode 100644 editors/demo/src/NCBI/layout/index.js
create mode 100644 editors/demo/src/NCBI/theme/elements/ButtonStyles.js
create mode 100644 editors/demo/src/NCBI/theme/index.js
create mode 100644 editors/demo/src/NCBI/theme/theme.js
diff --git a/editors/demo/src/Editoria/config/config.js b/editors/demo/src/Editoria/config/config.js
index 6b4c4ec42..ac848f10e 100644
--- a/editors/demo/src/Editoria/config/config.js
+++ b/editors/demo/src/Editoria/config/config.js
@@ -114,6 +114,7 @@ export default {
},
],
+ CommentsService: { readOnly: true },
SchemaService: DefaultSchema,
TitleService: { updateTitle },
RulesService: [emDash, ellipsis],
diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 9c6b45516..0109bafaa 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -4,6 +4,7 @@ import { createGlobalStyle } from 'styled-components';
import Editoria from './Editoria/Editoria';
import HHMI from './HHMI/HHMI';
+import NCBI from './NCBI/NCBI';
const GlobalStyle = createGlobalStyle`
body {
@@ -67,7 +68,7 @@ const Editors = () => {
case 'hhmi':
return <HHMI />;
case 'ncbi':
- break;
+ return <NCBI />;
default:
return <Editoria />;
}
diff --git a/editors/demo/src/HHMI/layout/HhmiLayout.js b/editors/demo/src/HHMI/layout/HhmiLayout.js
index 232fc5006..e56b32578 100644
--- a/editors/demo/src/HHMI/layout/HhmiLayout.js
+++ b/editors/demo/src/HHMI/layout/HhmiLayout.js
@@ -5,7 +5,6 @@ import { grid, th } from '@pubsweet/ui-toolkit';
import { cokoTheme } from '../theme';
import 'antd/dist/antd.css';
import EditorElements from './EditorElements';
-
/* Katex css */
import '~../../katex/dist/katex.min.css';
diff --git a/editors/demo/src/HHMI/theme/index.js b/editors/demo/src/HHMI/theme/index.js
index 1f02e5079..ab3b77083 100644
--- a/editors/demo/src/HHMI/theme/index.js
+++ b/editors/demo/src/HHMI/theme/index.js
@@ -1,2 +1 @@
-export { default as cokoTheme } from "./theme";
-
+export { default as cokoTheme } from './theme';
diff --git a/editors/demo/src/NCBI/NCBI.js b/editors/demo/src/NCBI/NCBI.js
new file mode 100644
index 000000000..efeb5399e
--- /dev/null
+++ b/editors/demo/src/NCBI/NCBI.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { Wax } from 'wax-prosemirror-core';
+import styled from 'styled-components';
+
+import { NcbiLayout } from './layout';
+import { configTitle } from './config';
+
+const Wrapper = styled.div`
+ padding: 50px;
+`;
+
+const Ncbi = () => {
+ return (
+ <>
+ <Wrapper>
+ <Wax
+ config={configTitle}
+ autoFocus
+ value="This is a really really really long title that you cannot break into multiple lines"
+ layout={NcbiLayout}
+ />
+ </Wrapper>
+ </>
+ );
+};
+
+export default Ncbi;
diff --git a/editors/demo/src/NCBI/config/configTitle.js b/editors/demo/src/NCBI/config/configTitle.js
new file mode 100644
index 000000000..035255367
--- /dev/null
+++ b/editors/demo/src/NCBI/config/configTitle.js
@@ -0,0 +1,70 @@
+import {
+ InlineAnnotationsService,
+ AnnotationToolGroupService,
+ BaseService,
+ BaseToolGroupService,
+ LinkService,
+} from 'wax-prosemirror-services';
+
+import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
+
+const configTitle = {
+ MenuService: [
+ {
+ templateArea: 'topBar',
+ toolGroups: [
+ 'Base',
+ {
+ name: 'Annotations',
+ exclude: [
+ 'Code',
+ 'LinkTool',
+ 'StrikeThrough',
+ 'Underline',
+ 'SmallCaps',
+ ],
+ },
+ ],
+ },
+ ],
+
+ SchemaService: {
+ nodes: {
+ doc: {
+ content: 'inline*',
+ },
+ text: {
+ group: 'inline',
+ },
+ title: {
+ group: 'inline',
+ content: 'inline*',
+ inline: true,
+ parseDOM: [
+ {
+ tag: 'title',
+ },
+ ],
+ toDOM(node) {
+ return ['title', node.attrs, 0];
+ },
+ },
+ },
+ marks: {},
+ },
+
+ RulesService: [],
+ ShortCutsService: {},
+
+ PmPlugins: [WaxSelectionPlugin],
+
+ services: [
+ new InlineAnnotationsService(),
+ new AnnotationToolGroupService(),
+ new LinkService(),
+ new BaseService(),
+ new BaseToolGroupService(),
+ ],
+};
+
+export default configTitle;
diff --git a/editors/demo/src/NCBI/config/index.js b/editors/demo/src/NCBI/config/index.js
new file mode 100644
index 000000000..5f3c39342
--- /dev/null
+++ b/editors/demo/src/NCBI/config/index.js
@@ -0,0 +1 @@
+export { default as configTitle } from './configTitle';
diff --git a/editors/demo/src/NCBI/layout/EditorElements.js b/editors/demo/src/NCBI/layout/EditorElements.js
new file mode 100644
index 000000000..a916f7a27
--- /dev/null
+++ b/editors/demo/src/NCBI/layout/EditorElements.js
@@ -0,0 +1,65 @@
+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;
+ white-space: pre;
+ overflow-x: auto;
+ ${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/NcbiLayout.js b/editors/demo/src/NCBI/layout/NcbiLayout.js
new file mode 100644
index 000000000..61b7831d2
--- /dev/null
+++ b/editors/demo/src/NCBI/layout/NcbiLayout.js
@@ -0,0 +1,99 @@
+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 EditorElements from './EditorElements';
+
+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')};
+ height: 80px;
+ width: 500px;
+`;
+
+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;
+`;
+
+const WaxSurfaceScroll = styled.div`
+ border: none;
+ box-sizing: border-box;
+ display: flex;
+ overflow-y: none;
+ position: relative;
+ width: 100%;
+ /* PM styles for main content*/
+
+ /* stylelint-disable-next-line order/properties-alphabetical-order */
+ ${EditorElements}
+`;
+
+const EditorContainer = styled.div`
+ height: 100%;
+ width: 100%;
+
+ .ProseMirror {
+ border-top: none;
+ margin-right: ${grid(1)};
+ padding: ${grid(1)};
+ }
+`;
+
+const TitleEditor = styled.div`
+ background: #fff;
+ height: 20px;
+ left: 51px;
+ position: absolute;
+ top: 91px;
+ width: 80px;
+`;
+
+const TopBar = ComponentPlugin('topBar');
+const WaxOverlays = ComponentPlugin('waxOverlays');
+console.log(cokoTheme);
+const NcbiLayout = ({ editor }) => (
+ <ThemeProvider theme={cokoTheme}>
+ <Wrapper>
+ <TitleEditor>Title Editor</TitleEditor>
+ <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
new file mode 100644
index 000000000..682b9ec6b
--- /dev/null
+++ b/editors/demo/src/NCBI/layout/index.js
@@ -0,0 +1 @@
+export { default as NcbiLayout } from './NcbiLayout';
diff --git a/editors/demo/src/NCBI/theme/elements/ButtonStyles.js b/editors/demo/src/NCBI/theme/elements/ButtonStyles.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/editors/demo/src/NCBI/theme/index.js b/editors/demo/src/NCBI/theme/index.js
new file mode 100644
index 000000000..ab3b77083
--- /dev/null
+++ b/editors/demo/src/NCBI/theme/index.js
@@ -0,0 +1 @@
+export { default as cokoTheme } from './theme';
diff --git a/editors/demo/src/NCBI/theme/theme.js b/editors/demo/src/NCBI/theme/theme.js
new file mode 100644
index 000000000..011ea8916
--- /dev/null
+++ b/editors/demo/src/NCBI/theme/theme.js
@@ -0,0 +1,87 @@
+/* eslint-disable import/extensions */
+import 'typeface-fira-sans-condensed';
+import 'fontsource-merriweather';
+import 'typeface-vollkorn';
+import 'typeface-inter';
+
+import { css } from 'styled-components';
+
+const cokoTheme = {
+ /* Colors */
+ colorBackground: 'white',
+ colorPrimary: '#525E76',
+ colorSecondary: '#E7E7E7',
+ colorFurniture: '#CCC',
+ colorBorder: '#EBEBF0',
+ colorBackgroundHue: '#F1F5FF',
+ colorBackgroundTabs: '#e1ebff',
+ colorSuccess: '#008800',
+ colorError: 'indianred',
+ colorText: '#111',
+ colorTextReverse: '#FFF',
+ colorTextPlaceholder: '#595959',
+ colorWarning: '#ffc107',
+ colorBackgroundToolBar: '#fff',
+ colorSelection: '#C5D7FE',
+ colorBackgroundButton: '#0042C7',
+ /* Text variables */
+
+ // fonts
+ fontInterface: 'Fira Sans Condensed',
+ fontHeading: 'Fira Sans Condensed',
+ fontReading: 'Vollkorn',
+ fontWriting: 'Merriweather',
+ fontTools: 'Inter',
+
+ // font sizes
+ fontSizeBase: '14px',
+ fontSizeBaseSmall: '12px',
+ fontSizeHeading1: '40px',
+ fontSizeHeading2: '36px',
+ fontSizeHeading3: '28px',
+ fontSizeHeading4: '24px',
+ fontSizeHeading5: '20px',
+ fontSizeHeading6: '16px',
+
+ // line heights
+ lineHeightBase: '24px',
+ lineHeightBaseSmall: '16px',
+ lineHeightHeading1: '48px',
+ lineHeightHeading2: '40px',
+ lineHeightHeading3: '32px',
+ lineHeightHeading4: '32px',
+ lineHeightHeading5: '24px',
+ lineHeightHeading6: '24px',
+
+ /* Spacing */
+ gridUnit: '4px',
+
+ /* Border */
+ borderRadius: '0',
+ borderWidth: '1px',
+ borderStyle: 'solid',
+
+ /* Shadow (for tooltip) */
+ boxShadow: '0 2px 4px 0 rgba(51, 51, 51, 0.3)',
+
+ /* Transition */
+ transitionDuration: '0.2s',
+ transitionTimingFunction: 'ease',
+ transitionDelay: '0',
+ /* Breakpoints */
+ breakpoints: [480, 768, 1000, 1272],
+
+ cssOverrides: {
+ Wax: {
+ MenuButton: css`
+ /* color: magenta;
+
+ > svg {
+ fill: indianred;
+ } */
+ `,
+ },
+ },
+};
+
+export default cokoTheme;
diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js
index b11ef6393..097a236ab 100644
--- a/wax-prosemirror-core/src/WaxView.js
+++ b/wax-prosemirror-core/src/WaxView.js
@@ -100,7 +100,7 @@ export default props => {
if (debug) applyDevTools(view);
if (autoFocus)
setTimeout(() => {
- view.focus();
+ if (view) view.focus();
}, 1000);
return () => view.destroy();
--
GitLab