Merge branch 'connect-math' into 'master'

add katex fonts

See merge request !186

editors/editoria/src/config/config.js

@@ -25,6 +25,7 @@ import {
   CodeBlockToolGroupService,
   TrackChangeToolGroupService,
   DisplayTextToolGroupService,
+  MathService,
 } from 'wax-prosemirror-services';
 
 import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
@@ -97,5 +98,6 @@ export default {
     new CodeBlockToolGroupService(),
     new TrackChangeToolGroupService(),
     new DisplayTextToolGroupService(),
+    new MathService(),
   ],
 };

editors/editoria/src/layout/EditorElements.js

@@ -255,4 +255,119 @@ export default css`
       /* color: black; */
     }
   }
+
+  /* == Math Nodes ======================================== */
+
+  .math-node {
+    min-width: 1em;
+    min-height: 1em;
+    font-size: 0.95em;
+    font-family: 'Consolas', 'Ubuntu Mono', monospace;
+    cursor: auto;
+    .ProseMirror {
+      box-shadow: none;
+      min-height: 100%;
+      padding: 0;
+      background: #eee;
+      color: rgb(132, 33, 162);
+    }
+  }
+
+  .math-node.empty-math .math-render::before {
+    content: '(empty)';
+    color: red;
+  }
+
+  .math-node .math-render.parse-error::before {
+    content: '(math error)';
+    color: red;
+    cursor: help;
+  }
+
+  .math-node.ProseMirror-selectednode {
+    outline: none;
+  }
+
+  .math-node .math-src {
+    display: none;
+    color: rgb(132, 33, 162);
+    tab-size: 4;
+  }
+
+  .math-node.ProseMirror-selectednode .math-src {
+    display: flex;
+  }
+  .math-node.ProseMirror-selectednode .math-render {
+    display: none;
+  }
+
+  /* -- Inline Math --------------------------------------- */
+
+  math-inline {
+    display: inline;
+    white-space: nowrap;
+  }
+
+  math-inline .math-render {
+    display: inline-block;
+    font-size: 0.85em;
+    cursor: pointer;
+  }
+
+  math-inline .math-src .ProseMirror {
+    display: inline;
+  }
+
+  math-inline .math-src::after,
+  math-inline .math-src::before {
+    content: '$';
+    color: #b0b0b0;
+  }
+
+  /* -- Block Math ---------------------------------------- */
+
+  math-display {
+    display: block;
+  }
+
+  math-display .math-render {
+    display: block;
+  }
+
+  math-display.ProseMirror-selectednode {
+    background-color: #eee;
+  }
+
+  math-display .math-src .ProseMirror {
+    width: 100%;
+    display: block;
+  }
+
+  math-display .math-src::after,
+  math-display .math-src::before {
+    content: '$$';
+    text-align: left;
+    color: #b0b0b0;
+  }
+
+  math-display .katex-display {
+    margin: 0;
+  }
+
+  /* -- Selection Plugin ---------------------------------- */
+
+  p::selection,
+  p > *::selection {
+    background-color: #c0c0c0;
+  }
+  .katex-html *::selection {
+    background-color: none !important;
+  }
+
+  .math-node.math-select .math-render {
+    background-color: #c0c0c0ff;
+  }
+  math-inline.math-select .math-render {
+    padding-top: 2px;
+  }
 `;

editors/editoria/src/layout/EditoriaLayout.js

@@ -7,6 +7,7 @@ import { grid, th } from '@pubsweet/ui-toolkit';
 
 import { cokoTheme } from '../theme';
 import EditorElements from './EditorElements';
+import Katex from './Katex';
 
 const divider = css`
   .panelGroup {
@@ -79,6 +80,7 @@ const WaxSurfaceScroll = styled.div`
   position: absolute;
   /* PM styles  for main content*/
   ${EditorElements};
+  ${Katex};
 `;
 
 const EditorContainer = styled.div`
@@ -117,6 +119,9 @@ const NotesAreaContainer = styled.div`
   position: absolute;
   /* PM styles  for note content*/
   ${EditorElements};
+  .ProseMirror {
+    display: inline;
+  }
 `;
 
 const NotesContainer = styled.div`

editors/editoria/src/layout/EditoriaMobileLayout.js

@@ -7,6 +7,7 @@ import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
 import { grid, th } from '@pubsweet/ui-toolkit';
 import { cokoTheme } from '../theme';
 import EditorElements from './EditorElements';
+import Katex from './Katex';
 
 const divider = css`
   .panelGroup {
@@ -95,6 +96,7 @@ const WaxSurfaceScroll = styled.div`
   position: absolute;
   /* PM styles  for main content*/
   ${EditorElements};
+  ${Katex};
 `;
 
 const EditorContainer = styled.div`

editors/editoria/src/layout/componentPlugin.js

-import React, { Component } from 'react';
-import { useInjection } from './WaxContext';
-
-class UpdateView extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      view: this.props.view,
-    };
-  }
-
-  updateView(view) {
-    this.setState(view);
-  }
-
-  render() {
-    return this.props.children({ view: this.state.view });
-  }
-}
-
-const ComponentPlugin = renderArea => layoutProps => {
-  const { instance } = useInjection('Layout');
-  const components = instance.render(renderArea);
-
-  return components
-    ? components.map(({ component: Component, componentProps }, key) => {
-        return (
-          <Component
-            key={`${renderArea}-${key}`}
-            {...layoutProps}
-            {...componentProps}
-          />
-        );
-      })
-    : null;
-};
-export default ComponentPlugin;