From eed45a5dd3b7b0c65e7ebcc60515bf87a7cab92a Mon Sep 17 00:00:00 2001 From: Sauli Anto Date: Sat, 28 Sep 2019 13:02:32 +0300 Subject: [PATCH] Add MathJax 3 support --- README.md | 7 +++-- src/mathediting.js | 70 +++++++++++++++++++++++++++++++++++++--------- src/utils.js | 2 +- 3 files changed, 62 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 9080f4ee5..f39a9df3b 100644 --- a/README.md +++ b/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 } // ... @@ -96,4 +96,5 @@ InlineEditor.defaultConfig = { - AutoMath like AutoMediaEmbed - Convert equation to mathtex when paste from word - Fix KaTex preview -- Make better way to import lark theme for plugin \ No newline at end of file +- Make better way to import lark theme for plugin +- MathML input and output when using MathJax version 3 diff --git a/src/mathediting.js b/src/mathediting.js index 2105322ba..34e26a12b 100644 --- a/src/mathediting.js +++ b/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,8 +40,8 @@ export default class MathEditing extends Plugin { const mathConfig = { ...defaultConfig, ...this.editor.config.get( 'math' ) - } - + }; + // View -> Model conversion.for( 'upcast' ) // MathJax inline way (e.g. ) @@ -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. ) @@ -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. ...) + .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. \( \sqrt{\frac{a}{b}} \)) .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 + } ); } } ); @@ -110,8 +142,8 @@ export default class MathEditing extends Plugin { const equation = modelItem.getAttribute( 'equation' ); const display = modelItem.getAttribute( 'display' ); - const styles = 'user-select: none; ' + (display ? 'display: block;' : 'display: inline-block;'); - const classes = 'ck-math-tex ' + (display ? 'ck-math-tex-display' : 'ck-math-tex-inline'); + const styles = 'user-select: none; ' + ( display ? 'display: block;' : 'display: inline-block;' ); + const classes = 'ck-math-tex ' + ( display ? 'ck-math-tex-display' : 'ck-math-tex-inline' ); // CKEngine render multiple times if using span instead of div const mathtexView = viewWriter.createContainerElement( 'div', { @@ -143,7 +175,7 @@ export default class MathEditing extends Plugin { const mathtexView = viewWriter.createContainerElement( 'span', { class: 'math-tex' } ); - + if ( display ) { viewWriter.insert( viewWriter.createPositionAt( mathtexView, 0 ), viewWriter.createText( '\\[' + equation + '\\]' ) ); } else { @@ -151,11 +183,23 @@ export default class MathEditing extends Plugin { } return mathtexView; - } else { - const mathtexView = viewWriter.createContainerElement( 'script', { - type: display ? 'math/tex; mode=display': 'math/tex' + } + + /* + 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' + } ); + viewWriter.insert( viewWriter.createPositionAt( mathtexView, 0 ), viewWriter.createText( equation ) ); return mathtexView; diff --git a/src/utils.js b/src/utils.js index 9b8c86473..54c6dcec9 100644 --- a/src/utils.js +++ b/src/utils.js @@ -39,7 +39,7 @@ export function renderEquation( equation, element, engine = 'katex', display = f } export function isMathJaxVersion3( version ) { - return version && typeof version === 'string' && version.split( '.' ).length === 3 && version.split( '.' )[0] === '3'; + return version && typeof version === 'string' && version.split( '.' ).length === 3 && version.split( '.' )[ 0 ] === '3'; } export function getSelectedMathModelWidget( selection ) {