ckeditor5-math - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

 Changelog
 =========
 
+## [1.0.2](https://github.com/isaul32/ckeditor5-math/compare/v1.0.1...v1.0.2) (2019-10-07)
+
+### Other changes
+
+* Update readme.
+
+* Add unique identifier for math preview. ([8b6804c](https://github.com/isaul32/ckeditor5-math/commit/98815fc))
+
 ## [1.0.1](https://github.com/isaul32/ckeditor5-math/compare/v1.0.0...v1.0.1) (2019-10-04)
@@ -5,0 +13,0 @@

package.json

 {
   "name": "ckeditor5-math",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Math feature for CKEditor 5.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -7,2 +7,3 @@ # CKEditor 5 mathematical feature
 - [Features](#features)
+- [Demos](#demos)
 - [Screenshots](#screenshots)
@@ -32,2 +33,7 @@ - [Examples](#examples)
 
+# Demos
+[Classic editor with MathJax](https://jsfiddle.net/isaul32/qktj9h7x/)
+
+[Classic editor with KaTex](https://jsfiddle.net/isaul32/3wjrkLdv/)
+
 ## Screenshots
@@ -34,0 +40,0 @@ ![Screenshot 1](/screenshots/1.png?raw=true "Screenshot 1")

src/mathui.js

@@ -5,2 +5,3 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
+import uid from '@ckeditor/ckeditor5-utils/src/uid';
 
@@ -31,2 +32,4 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
+		this._previewUid = `math-preview-${ uid() }`;
+
 		this._form = this._createFormView();
@@ -66,3 +69,3 @@
 
-		const formView = new MainFormView( editor.locale, mathConfig.engine, mathConfig.enablePreview );
+		const formView = new MainFormView( editor.locale, mathConfig.engine, mathConfig.enablePreview, this._previewUid );
 
@@ -110,4 +113,3 @@ formView.mathInputView.bind( 'value' ).to( mathCommand, 'value' );
 		// Show preview element
-		const elId = 'math-preview';
-		let prewviewEl = document.getElementById( elId ); // eslint-disable-line
+		let prewviewEl = document.getElementById( this._previewUid ); // eslint-disable-line
 		if ( prewviewEl && this._form.previewEnabled ) {
@@ -154,4 +156,3 @@ // Force refresh preview
 			// Hide preview element
-			const elId = 'math-preview';
-			let prewviewEl = document.getElementById( elId );// eslint-disable-line
+			let prewviewEl = document.getElementById( this._previewUid );// eslint-disable-line
 			if ( prewviewEl ) {
@@ -158,0 +159,0 @@ prewviewEl.style.display = 'none';

src/ui/mainformview.js

@@ -25,3 +25,3 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 export default class MainFormView extends View {
-	constructor( locale, engine, previewEnabled ) {
+	constructor( locale, engine, previewEnabled, previewUid ) {
 		super( locale );
@@ -56,3 +56,3 @@
 			// Math element
-			this.mathView = new MathView( engine, locale );
+			this.mathView = new MathView( engine, locale, previewUid );
 			this.mathView.bind( 'display' ).to( this.displayButtonView, 'isOn' );
@@ -59,0 +59,0 @@

src/ui/mathview.js

@@ -6,6 +6,7 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 export default class MathView extends View {
-	constructor( engine, locale ) {
+	constructor( engine, locale, previewUid ) {
 		super( locale );
 
 		this.engine = engine;
+		this.previewUid = previewUid;
 
@@ -33,3 +34,3 @@ this.set( 'value', '' );
 	updateMath() {
-		renderEquation( this.value, this.element, this.engine, this.display, true );
+		renderEquation( this.value, this.element, this.engine, this.display, true, this.previewUid );
 	}
@@ -36,0 +37,0 @@

src/utils.js

@@ -18,6 +18,33 @@ export const defaultConfig = {
 
-export function renderEquation( equation, element, engine = 'katex', display = false, preview = false ) {
+// Simple MathJax 3 version check
+export function isMathJaxVersion3( version ) {
+	return version && typeof version === 'string' && version.split( '.' ).length === 3 && version.split( '.' )[ 0 ] === '3';
+}
+
+// Check if equation has delimiters
+export function hasDelimiters( text ) {
+	return text.match( /^(\\\[.*?\\\]|\\\(.*?\\\))$/ );
+}
+
+// Extract delimiters and figure display mode for the model
+export function extractDelimiters( equation ) {
+	equation = equation.trim();
+
+	// Remove delimiters (e.g. \( \) or \[ \])
+	const hasInlineDelimiters = equation.includes( '\\(' ) && equation.includes( '\\)' );
+	const hasDisplayDelimiters = equation.includes( '\\[' ) && equation.includes( '\\]' );
+	if ( hasInlineDelimiters || hasDisplayDelimiters ) {
+		equation = equation.substring( 2, equation.length - 2 ).trim();
+	}
+
+	return {
+		equation,
+		display: hasDisplayDelimiters
+	};
+}
+
+export function renderEquation( equation, element, engine = 'katex', display = false, preview = false, previewUid ) {
 	if ( engine === 'mathjax' && typeof MathJax !== 'undefined' ) {
 		if ( isMathJaxVersion3( MathJax.version ) ) {
-			selectRenderMode( element, preview, el => {
+			selectRenderMode( element, preview, previewUid, el => {
 				renderMathJax3( equation, el, display, () => {
@@ -31,3 +58,3 @@ if ( preview ) {
 		} else {
-			selectRenderMode( element, preview, el => {
+			selectRenderMode( element, preview, previewUid, el => {
 				// Fixme: MathJax typesetting cause occasionally math processing error without asynchronous call
@@ -50,3 +77,3 @@ // eslint-disable-next-line
 	} else if ( engine === 'katex' && typeof katex !== 'undefined' ) {
-		selectRenderMode( element, preview, el => {
+		selectRenderMode( element, preview, previewUid, el => {
 			katex.render( equation, el, {
@@ -70,5 +97,5 @@ throwOnError: false,
 
-function selectRenderMode( element, preview, cb ) {
+function selectRenderMode( element, preview, previewUid, cb ) {
 	if ( preview ) {
-		createPreviewElement( element, prewviewEl => {
+		createPreviewElement( element, previewUid, prewviewEl => {
 			cb( prewviewEl );
@@ -109,13 +136,13 @@ } );
 
-function createPreviewElement( element, render ) {
-	const prewviewEl = getPreviewElement( element );
+function createPreviewElement( element, previewUid, render ) {
+	const prewviewEl = getPreviewElement( element, previewUid );
 	render( prewviewEl );
 }
 
-export function getPreviewElement( element ) {
-	const elId = 'math-preview';
-	let prewviewEl = document.getElementById( elId ); // eslint-disable-line
+function getPreviewElement( element, previewUid ) {
+	let prewviewEl = document.getElementById( previewUid ); // eslint-disable-line
+	// Create if not found
 	if ( !prewviewEl ) {
 		prewviewEl = document.createElement( 'div' ); // eslint-disable-line
-		prewviewEl.setAttribute( 'id', elId );
+		prewviewEl.setAttribute( 'id', previewUid );
 		document.body.appendChild( prewviewEl ); // eslint-disable-line
@@ -164,28 +191,1 @@
 }
-
-// Simple MathJax 3 version check
-export function isMathJaxVersion3( version ) {
-	return version && typeof version === 'string' && version.split( '.' ).length === 3 && version.split( '.' )[ 0 ] === '3';
-}
-
-// Check if equation has delimiters
-export function hasDelimiters( text ) {
-	return text.match( /^(\\\[.*?\\\]|\\\(.*?\\\))$/ );
-}
-
-// Extract delimiters and figure display mode for the model
-export function extractDelimiters( equation ) {
-	equation = equation.trim();
-
-	// Remove delimiters (e.g. \( \) or \[ \])
-	const hasInlineDelimiters = equation.includes( '\\(' ) && equation.includes( '\\)' );
-	const hasDisplayDelimiters = equation.includes( '\\[' ) && equation.includes( '\\]' );
-	if ( hasInlineDelimiters || hasDisplayDelimiters ) {
-		equation = equation.substring( 2, equation.length - 2 ).trim();
-	}
-
-	return {
-		equation,
-		display: hasDisplayDelimiters
-	};
-}

No alert changes

Improved metrics

Total package byte prevSize

39754

increased by1.74%

Lines of code

856

increased by0.12%

Number of lines in readme file

187

increased by3.31%

No dependency changes