Add MathJax 3 support

README.md

@@ -65,7 +65,7 @@ Supported input and output formats are:
 
 ## Available typesetting engines
 ### MathJax
-- Tested by using version __2.7.5__ and __TeX-MML-AM_HTMLorMML__ configuration
+- Tested by using version __2.7.5__ and __TeX-MML-AM_HTMLorMML__ configuration. It works also with version __3.0.0__ or newer!
 - Use __\\( \\)__ delimiters for inline and __\\[ \\]__ delimiters for display
 ### KaTeX
 - Tested by using version __0.11.0__
@@ -83,7 +83,7 @@ InlineEditor.defaultConfig = {
     // ...
     math: {
         engine: 'mathjax', // or katex or function (equation, element, display) => { ... }
-        outputType: 'script', // or span
+        outputType: 'script', // or span or math
         forceOutputType: false // forces output to use outputType
     }
     // ...
@@ -97,3 +97,4 @@ InlineEditor.defaultConfig = {
 - Convert equation to mathtex when paste from word
 - Fix KaTex preview
 - Make better way to import lark theme for plugin
+- MathML input and output when using MathJax version 3

src/mathediting.js

@@ -5,7 +5,7 @@ import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 
 import MathCommand from './mathcommand';
 
-import { renderEquation, defaultConfig } from './utils';
+import { defaultConfig, renderEquation } from './utils';
 
 export default class MathEditing extends Plugin {
 	static get requires() {
@@ -40,7 +40,7 @@ export default class MathEditing extends Plugin {
 		const mathConfig = {
 			...defaultConfig,
 			...this.editor.config.get( 'math' )
-		}
+		};
 
 		// View -> Model
 		conversion.for( 'upcast' )
@@ -54,7 +54,11 @@ export default class MathEditing extends Plugin {
 				},
 				model: ( viewElement, modelWriter ) => {
 					const equation = viewElement.getChild( 0 ).data.trim();
-					return modelWriter.createElement( 'mathtex', { equation, type: mathConfig.forceOutputType ? mathConfig.outputType : 'script', display: false } );
+					return modelWriter.createElement( 'mathtex', {
+						equation,
+						type: mathConfig.forceOutputType ? mathConfig.outputType : 'script',
+						display: false
+					} );
 				}
 			} )
 			// MathJax display way (e.g. <script type="math/tex; mode=display">\sqrt{\frac{a}{b}}</script>)
@@ -67,9 +71,33 @@ export default class MathEditing extends Plugin {
 				},
 				model: ( viewElement, modelWriter ) => {
 					const equation = viewElement.getChild( 0 ).data.trim();
-					return modelWriter.createElement( 'mathtex', { equation, type: mathConfig.forceOutputType ? mathConfig.outputType : 'script', display: true } );
+					return modelWriter.createElement( 'mathtex', {
+						equation,
+						type: mathConfig.forceOutputType ? mathConfig.outputType : 'script',
+						display: true
+					} );
 				}
 			} )
+			// Todo: Implement input conversion
+			/*
+			// MathML (e.g. <math type="math/tex; mode=display" alttext="\sqrt{\frac{a}{b}}">...</script>)
+			.elementToElement( {
+				view: {
+					name: 'math',
+				},
+				model: ( viewElement, modelWriter ) => {
+					const equation = viewElement.getAttribute( 'alttext' );
+					const display = viewElement.getAttribute( 'display' );
+					if ( equation ) {
+						return modelWriter.createElement( 'mathtex', {
+							equation,
+							type: mathConfig.forceOutputType ? mathConfig.outputType : 'math',
+							display: display === 'block' ? true : false
+						} );
+					}
+				}
+			} )
+			*/
 			// CKEditor 4 way (e.g. <span class="math-tex">\( \sqrt{\frac{a}{b}} \)</span>)
 			.elementToElement( {
 				view: {
@@ -86,7 +114,11 @@ export default class MathEditing extends Plugin {
 						equation = equation.substring( 2, equation.length - 2 ).trim();
 					}
 
-					return modelWriter.createElement( 'mathtex', { equation, type: mathConfig.forceOutputType ? mathConfig.outputType : 'span', display: hasDisplayDelimiters } );
+					return modelWriter.createElement( 'mathtex', {
+						equation,
+						type: mathConfig.forceOutputType ? mathConfig.outputType : 'span',
+						display: hasDisplayDelimiters
+					} );
 				}
 			} );
 
@@ -151,7 +183,19 @@ export default class MathEditing extends Plugin {
 				}
 
 				return mathtexView;
-			} else {
+			}
+
+			/*
+			else if ( type === 'math' ) {
+				const mathtexView = viewWriter.createContainerElement( 'math', {
+					display: display ? 'block' : 'inline',
+					alttex: equation
+				} );
+				// Todo: Implement output conversion
+				return mathtexView;
+			}
+			*/
+			else {
 				const mathtexView = viewWriter.createContainerElement( 'script', {
 					type: display ? 'math/tex; mode=display' : 'math/tex'
 				} );