Skip to content
Snippets Groups Projects
Commit 863e6db0 authored by Christos's avatar Christos
Browse files

Merge branch 'connect-math' into 'master'

add katex fonts

See merge request !186
parents 1b9b6ae2 7bff70ed
No related branches found
No related tags found
1 merge request!186add katex fonts
Showing
with 1202 additions and 38 deletions
......@@ -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(),
],
};
......@@ -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;
}
`;
......@@ -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`
......
......@@ -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`
......
This diff is collapsed.
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;
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment