Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-02 13:02:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add MathJax 3 support

Browse Source
This commit is contained in:
Sauli Anto 2019-09-28 13:02:32 +03:00
parent 566c9a40cb
commit eed45a5dd3
3 changed files with 62 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -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
- Make better way to import lark theme for plugin
- MathML input and output when using MathJax version 3

70
src/mathediting.js
View File

@ -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. <script type="math/tex">\sqrt{\frac{a}{b}}</script>)
@ -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
} );
}
} );
@ -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;

2
src/utils.js
View File

@ -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 ) {