Additional tweaks

Removed extra font files, added math case in customTextBetween, adjusted inline math input rule, changed display math menu insertio
n logic, changed toDOM and parseDOM logic (thanks mrtcode), removed math handling from clipboard serializer, adjusted display math styl
ing.

package.json

@@ -16,6 +16,7 @@
 	"dependencies": {
 		"@benrbray/prosemirror-math": "^0.2.2",
 		"classnames": "^2.3.1",
+		"katex": "^0.13.24",
 		"prop-types": "^15.7.2",
 		"prosemirror-commands": "^1.1.10",
 		"prosemirror-dropcursor": "^1.3.5",

src/core/commands.js

@@ -586,6 +586,14 @@ export function customTextBetween (slice, from, to, blockSeparator, leafText) {
 		if (node.type === schema.nodes.citation) {
 			text += serializeCitationInnerText(node);
 		}
+		else if (node.type === schema.nodes.math_display) {
+			text += blockSeparator + '$$' + node.textContent + '$$';
+			return false;
+		}
+		else if (node.type === schema.nodes.math_inline) {
+			text += '$' + node.textContent + '$';
+			return false;
+		}
 		else if (node.isText) {
 			text += node.text.slice(Math.max(from, pos) - pos, to - pos);
 			separated = !blockSeparator;

src/core/editor-core.js

@@ -7,7 +7,7 @@ import { keymap } from 'prosemirror-keymap';
 import { history } from 'prosemirror-history';
 import { baseKeymap } from 'prosemirror-commands';
 import applyDevTools from 'prosemirror-dev-tools';
-import { mathPlugin } from "@benrbray/prosemirror-math";
+import { mathPlugin } from '@benrbray/prosemirror-math';
 
 
 import {

src/core/input-rules.js

@@ -12,7 +12,7 @@ import {
 import { schema } from './schema';
 import { TextSelection } from 'prosemirror-state';
 
-import { makeBlockMathInputRule, makeInlineMathInputRule } from "@benrbray/prosemirror-math";
+import { makeBlockMathInputRule, makeInlineMathInputRule } from '@benrbray/prosemirror-math';
 
 function markInputRule(regexp, markType, size) {
   return new InputRule(regexp, (state, match, start, end) => {
@@ -57,7 +57,7 @@ export function buildInputRules({ enableSmartQuotes }) {
 		}),
 		linkInputRule(),
 		makeBlockMathInputRule(/^\$\$\s+$/, schema.nodes.math_display),
-		makeInlineMathInputRule(/\$\$(.+)\$\$/, schema.nodes.math_inline),
+		makeInlineMathInputRule(/\$(.+)\$/, schema.nodes.math_inline),
 		markInputRule(/(?:[^`0-9A-Za-z]+)(__([^\s_][^_]+)__)$|^(__([^\s _][^_]+)__)$/, schema.marks.strong, 2),
 		markInputRule(/^(?:[^`]+)(\*\*([^\s*][^*]+)\*\*)$|^(\*\*([^\s*][^*]+)\*\*)$/, schema.marks.strong, 2),
 		markInputRule(/(?:[^_`0-9A-Za-z]+)(_([^\s_][^_]+?)_)$|^(_([^\s_][^_]+)_)$/, schema.marks.em, 1),

src/core/plugins/menu.js

@@ -7,7 +7,7 @@ import { wrapInList } from 'prosemirror-schema-list';
 import * as commands from '../commands';
 import { schema } from '../schema';
 
-import { TextSelection } from 'prosemirror-state';
+import { TextSelection, NodeSelection } from 'prosemirror-state';
 import nodeIsActive, { getActiveColor, randomString } from '../utils';
 import { NodeRange } from 'prosemirror-model';
 import { findWrapping, liftTarget } from 'prosemirror-transform';
@@ -213,11 +213,21 @@ class Menu {
 			}
 		};
 
+		this.math_display = {
+			isActive: false,
+			run() {
+				let { $from } = state.selection;
+				let mathNode = schema.nodes.math_display.create();
+				let tr = state.tr.replaceSelectionWith(mathNode);
+				tr = tr.setSelection(NodeSelection.create(tr.doc, $from.pos-1));
+				dispatch(tr);
+			}
+		}
+
 		let insideList = nodeIsActive(state, schema.nodes.orderedList) || nodeIsActive(state, schema.nodes.bulletList);
 		let insideBlockquote = nodeIsActive(state, schema.nodes.blockquote);
 		this.paragraph = this.buildBlock(schema.nodes.paragraph, {}, insideList || insideBlockquote);
 		this.codeBlock = this.buildBlock(schema.nodes.codeBlock);
-		this.math_display = this.buildBlock(schema.nodes.math_display);
 		this.heading1 = this.buildBlock(schema.nodes.heading, { level: 1 });
 		this.heading2 = this.buildBlock(schema.nodes.heading, { level: 2 });
 		this.heading3 = this.buildBlock(schema.nodes.heading, { level: 3 });

src/core/schema/nodes.js

@@ -152,6 +152,28 @@ export default {
 	},
 
 
+	math_display: {
+		group: 'block math',
+		content: 'text*',
+		atom: true,
+		code: true,
+		toDOM: node => ['pre', {
+			class: 'math'
+		}, '$$' + node.textContent + '$$'],
+		parseDOM: [{
+			tag: 'pre.math',
+			getContent(dom) {
+				let text = dom.textContent;
+				text = text.trim();
+				if (text.slice(0, 2) === '$$' && text.slice(-2) === '$$') {
+				  text = text.slice(2, -2);
+				}
+				return Fragment.from(schema.text(text));
+			  }
+		}]
+	},
+
+
 	codeBlock: {
 		group: 'block',
 		content: 'text*',
@@ -259,17 +281,6 @@ export default {
 	}),
 
 
-	math_display: {
-		group: "block math",
-		content: "text*",
-		atom: true,
-		code: true,
-		toDOM: () => ["pre", 0],
-		parseDOM: [{
-			tag: "pre"
-		}]
-	},
-
 	// Inline nodes
 
 	// TinyMCE needs non-breaking spaces to represent sequential spaces,
@@ -420,13 +431,23 @@ export default {
 
 
 	math_inline: {
-		group: "inline math",
-		content: "text*",
+		group: 'inline math',
+		content: 'text*',
 		inline: true,
 		atom: true,
-		toDOM: () => ["span", 0],
+		toDOM: node => ['span', {
+			class: 'math'
+		}, '$' + node.textContent + '$'],
 		parseDOM: [{
-			tag: "span"
+			tag: 'span.math',
+			getContent(dom) {
+				let text = dom.textContent;
+				text = text.trim();
+				if (text.slice(0, 2) === '$' && text.slice(-2) === '$') {
+				  text = text.slice(2, -2);
+				}
+				return Fragment.from(schema.text(text));
+			}
 		}]
-	},
+	}
 };

src/core/schema/utils.js

@@ -133,12 +133,6 @@ export function buildClipboardSerializer(provider, schema, metadata) {
 					class: 'highlight',
 					'data-annotation': annotation && encodeObject(annotation)
 				}, 0];
-			},
-			math_display(node) {
-				return ['pre', `$$${node.textContent}$$`];
-			},
-			math_inline(node) {
-				return ['span', `$$${node.textContent}$$`];
 			}
 		}),
 		Object.assign({}, base.marks, {

src/stylesheets/darwin.scss

@@ -49,13 +49,18 @@ $mode: "production" !default;
 
 .math-node.empty-math .math-render::before {
 	content: "Click to insert LaTex ...";
+    color: black;
 }
 
 .math-node .math-render.parse-error::before {
 	content: "Cannot parse LaTeX.";
 	cursor: help;
 }
 
+.math-node .ProseMirror-focused {
+    outline: none;
+}
+
 math-display {
     position: relative;
 

src/stylesheets/generic.scss

@@ -56,13 +56,18 @@ $mode: "production" !default;
 
 .math-node.empty-math .math-render::before {
 	content: "Click to insert LaTex ...";
+    color: black;
 }
 
 .math-node .math-render.parse-error::before {
 	content: "Cannot parse LaTeX.";
 	cursor: help;
 }
 
+.math-node .ProseMirror-focused {
+    outline: none;
+}
+
 math-display {
     position: relative;