Fix writer and seperate schema

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
 	extends: 'ckeditor5',
 	globals: {
 		'MathJax': true,
-		'katex': true
+		'katex': true,
+		'console': true
 	}
 };

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 build/
 package-lock.json
+yarn.lock

README.md

@@ -28,7 +28,6 @@ This is TeX-based mathematical plugin for CKEditor 5. You can use it to insert,
 - Have multiple input and output format
 - Paste support
 	- from plain text
-	- from Microsoft Word
 
 # Demos
 [Classic editor with MathJax](https://jsfiddle.net/isaul32/qktj9h7x/)
@@ -42,11 +41,7 @@ This is TeX-based mathematical plugin for CKEditor 5. You can use it to insert,
 
 ## Requirements
 
-- With CKEditor 5 v21.0.0, use [email protected] version
-- With CKEditor 5 v20.0.0, use [email protected] version
-- With CKEditor 5 v19.0.0, use [email protected] version
-- With CKEditor 5 v18.0.0, use [email protected] version
-- With CKEditor 5 v17.0.0, use [email protected] version
+- Use same version as CKEditor 5
 
 If you get duplicated modules error, you have mismatching versions in your editor build package.json.
 
@@ -176,7 +171,3 @@ Replace ckeditor5-core with git version
 Run test suite
 
 `npm run test`
-
-## Todo
-- MathML input and output when using MathJax version 3
-- Support multiple equations when pasting as plain text

package.json

@@ -1,37 +1,38 @@
 {
   "name": "ckeditor5-math",
-  "version": "21.0.0",
+  "version": "22.0.0",
   "description": "Math feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
     "ckeditor5",
     "ckeditor 5",
     "ckeditor5-feature",
-    "ckeditor5-plugin"
+    "ckeditor5-plugin",
+    "ckeditor5-math"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-clipboard": "^21.0.0",
-    "@ckeditor/ckeditor5-core": "^21.0.0",
-    "@ckeditor/ckeditor5-engine": "^21.0.0",
-    "@ckeditor/ckeditor5-ui": "^21.0.0",
-    "@ckeditor/ckeditor5-undo": "^21.0.0",
-    "@ckeditor/ckeditor5-utils": "^21.0.0",
-    "@ckeditor/ckeditor5-widget": "^21.0.0"
+    "@ckeditor/ckeditor5-clipboard": "^22.0.0",
+    "@ckeditor/ckeditor5-core": "^22.0.0",
+    "@ckeditor/ckeditor5-engine": "^22.0.0",
+    "@ckeditor/ckeditor5-ui": "^22.0.0",
+    "@ckeditor/ckeditor5-undo": "^22.0.0",
+    "@ckeditor/ckeditor5-utils": "^22.0.0",
+    "@ckeditor/ckeditor5-widget": "^22.0.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-tests": "^21.0.0",
-    "@ckeditor/ckeditor5-editor-inline": "^21.0.0",
-    "@ckeditor/ckeditor5-essentials": "^21.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^21.0.0",
-    "eslint": "^5.5.0",
-    "eslint-config-ckeditor5": "^2.0.0",
-    "husky": "^1.3.1",
-    "lint-staged": "^7.0.0",
-    "stylelint": "^11.1.1",
-    "stylelint-config-ckeditor5": "^1.0.0"
+    "@ckeditor/ckeditor5-dev-tests": "^22.0.0",
+    "@ckeditor/ckeditor5-editor-inline": "^22.0.0",
+    "@ckeditor/ckeditor5-essentials": "^22.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^22.0.0",
+    "eslint": "^7.1.0",
+    "eslint-config-ckeditor5": "^3.0.0",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.6",
+    "stylelint": "^13.5.0",
+    "stylelint-config-ckeditor5": "^2.0.0"
   },
   "engines": {
-    "node": ">=8.0.0",
+    "node": ">=12.0.0",
     "npm": ">=5.7.1"
   },
   "author": "Sauli Anto",
@@ -61,8 +62,10 @@
     ]
   },
   "eslintIgnore": [
-    "src/lib/**",
-    "packages/**"
+    "node_modules/**",
+    "packages/*/node_modules/**",
+    "packages/*/build/**",
+    "packages/*/src/lib/**"
   ],
   "husky": {
     "hooks": {

src/automath.js

@@ -68,7 +68,7 @@ export default class AutoMath extends Plugin {
 
 		// Get equation text
 		for ( const node of walker ) {
-			if ( node.item.is( 'textProxy' ) ) {
+			if ( node.item.is( '$textProxy' ) ) {
 				text += node.item.data;
 			}
 		}
@@ -107,7 +107,7 @@ export default class AutoMath extends Plugin {
 					const params = Object.assign( extractDelimiters( text ), {
 						type: mathConfig.outputType
 					} );
-					const mathElement = writer.createElement( 'mathtex', params );
+					const mathElement = writer.createElement( params.display ? 'mathtex-display' : 'mathtex-inline', params );
 
 					editor.model.insertContent( mathElement, insertPosition );
 

src/math.js

@@ -7,7 +7,7 @@ import AutoMath from './automath';
 
 export default class Math extends Plugin {
 	static get requires() {
-		return [ MathEditing, MathUI, Widget, AutoMath ];
+		return [ MathEditing, MathUI, AutoMath, Widget ];
 	}
 
 	static get pluginName() {

src/mathcommand.js

@@ -1,4 +1,5 @@
 import Command from '@ckeditor/ckeditor5-core/src/command';
+
 import { getSelectedMathModelWidget } from './utils';
 
 export default class MathCommand extends Command {
@@ -9,17 +10,18 @@ export default class MathCommand extends Command {
 
 		model.change( writer => {
 			let mathtex;
-			if ( selectedElement && selectedElement.is( 'mathtex' ) ) {
+			if ( selectedElement && ( selectedElement.is( 'element', 'mathtex-inline' ) ||
+					selectedElement.is( 'element', 'mathtex-display' ) ) ) {
 				// Update selected element
 				const typeAttr = selectedElement.getAttribute( 'type' );
 
 				// Use already set type if found and is not forced
 				const type = forceOutputType ? outputType : typeAttr || outputType;
 
-				mathtex = writer.createElement( 'mathtex', { equation, type, display } );
+				mathtex = writer.createElement( display ? 'mathtex-display' : 'mathtex-inline', { equation, type, display } );
 			} else {
 				// Create new model element
-				mathtex = writer.createElement( 'mathtex', { equation, type: outputType, display } );
+				mathtex = writer.createElement( display ? 'mathtex-display' : 'mathtex-inline', { equation, type: outputType, display } );
 			}
 			model.insertContent( mathtex );
 			writer.setSelection( mathtex, 'on' );
@@ -29,9 +31,10 @@ export default class MathCommand extends Command {
 	refresh() {
 		const model = this.editor.model;
 		const selection = model.document.selection;
+		const selectedElement = selection.getSelectedElement();
 
-		const isAllowed = model.schema.checkChild( selection.focus.parent, 'mathtex' );
-		this.isEnabled = isAllowed;
+		this.isEnabled = selectedElement === null || ( selectedElement.is( 'element', 'mathtex-inline' ) ||
+				selectedElement.is( 'element', 'mathtex-display' ) );
 
 		const selectedEquation = getSelectedMathModelWidget( selection );
 		this.value = selectedEquation ? selectedEquation.getAttribute( 'equation' ) : null;

src/mathediting.js

@@ -36,13 +36,19 @@ export default class MathEditing extends Plugin {
 
 	_defineSchema() {
 		const schema = this.editor.model.schema;
-
-		schema.register( 'mathtex', {
+		schema.register( 'mathtex-inline', {
 			allowWhere: '$text',
 			isInline: true,
 			isObject: true,
 			allowAttributes: [ 'equation', 'type', 'display' ]
 		} );
+
+		schema.register( 'mathtex-display', {
+			allowWhere: '$block',
+			isInline: false,
+			isObject: true,
+			allowAttributes: [ 'equation', 'type', 'display' ]
+		} );
 	}
 
 	_defineConverters() {
@@ -59,9 +65,9 @@ export default class MathEditing extends Plugin {
 						type: 'math/tex'
 					}
 				},
-				model: ( viewElement, modelWriter ) => {
+				model: ( viewElement, { writer } ) => {
 					const equation = viewElement.getChild( 0 ).data.trim();
-					return modelWriter.createElement( 'mathtex', {
+					return writer.createElement( 'mathtex-inline', {
 						equation,
 						type: mathConfig.forceOutputType ? mathConfig.outputType : 'script',
 						display: false
@@ -76,9 +82,9 @@ export default class MathEditing extends Plugin {
 						type: 'math/tex; mode=display'
 					}
 				},
-				model: ( viewElement, modelWriter ) => {
+				model: ( viewElement, { writer } ) => {
 					const equation = viewElement.getChild( 0 ).data.trim();
-					return modelWriter.createElement( 'mathtex', {
+					return writer.createElement( 'mathtex-display', {
 						equation,
 						type: mathConfig.forceOutputType ? mathConfig.outputType : 'script',
 						display: true
@@ -91,82 +97,94 @@ export default class MathEditing extends Plugin {
 					name: 'span',
 					classes: [ 'math-tex' ]
 				},
-				model: ( viewElement, modelWriter ) => {
+				model: ( viewElement, { writer } ) => {
 					const equation = viewElement.getChild( 0 ).data.trim();
 
 					const params = Object.assign( extractDelimiters( equation ), {
 						type: mathConfig.forceOutputType ? mathConfig.outputType : 'span'
 					} );
 
-					return modelWriter.createElement( 'mathtex', params );
+					return writer.createElement( params.display ? 'mathtex-display' : 'mathtex-inline', params );
 				}
 			} );
 
 		// Model -> View (element)
-		conversion.for( 'editingDowncast' ).elementToElement( {
-			model: 'mathtex',
-			view: ( modelItem, viewWriter ) => {
-				const widgetElement = createMathtexEditingView( modelItem, viewWriter );
-				return toWidget( widgetElement, viewWriter );
-			}
-		} );
+		conversion.for( 'editingDowncast' )
+			.elementToElement( {
+				model: 'mathtex-inline',
+				view: ( modelItem, { writer } ) => {
+					const widgetElement = createMathtexEditingView( modelItem, writer );
+					return toWidget( widgetElement, writer, 'span' );
+				}
+			} ).elementToElement( {
+				model: 'mathtex-display',
+				view: ( modelItem, { writer } ) => {
+					const widgetElement = createMathtexEditingView( modelItem, writer );
+					return toWidget( widgetElement, writer, 'div' );
+				}
+			} );
 
 		// Model -> Data
-		conversion.for( 'dataDowncast' ).elementToElement( {
-			model: 'mathtex',
-			view: createMathtexView
-		} );
+		conversion.for( 'dataDowncast' )
+			.elementToElement( {
+				model: 'mathtex-inline',
+				view: createMathtexView
+			} )
+			.elementToElement( {
+				model: 'mathtex-display',
+				view: createMathtexView
+			} );
 
 		// Create view for editor
-		function createMathtexEditingView( modelItem, viewWriter ) {
+		function createMathtexEditingView( modelItem, writer ) {
 			const equation = modelItem.getAttribute( 'equation' );
 			const display = modelItem.getAttribute( 'display' );
 
 			const styles = 'user-select: none; ' + ( display ? '' : 'display: inline-block;' );
 			const classes = 'ck-math-tex ' + ( display ? 'ck-math-tex-display' : 'ck-math-tex-inline' );
 
-			const mathtexView = viewWriter.createContainerElement( 'span', {
+			const mathtexView = writer.createContainerElement( display ? 'div' : 'span', {
 				style: styles,
 				class: classes
 			} );
 
-			const uiElement = viewWriter.createUIElement( 'div', null, function( domDocument ) {
+			const uiElement = writer.createUIElement( 'div', null, function( domDocument ) {
 				const domElement = this.toDomElement( domDocument );
 
 				renderEquation( equation, domElement, mathConfig.engine, display, false );
 
 				return domElement;
 			} );
 
-			viewWriter.insert( viewWriter.createPositionAt( mathtexView, 0 ), uiElement );
+			writer.insert( writer.createPositionAt( mathtexView, 0 ), uiElement );
 
 			return mathtexView;
 		}
 
 		// Create view for data
-		function createMathtexView( modelItem, viewWriter ) {
+		function createMathtexView( modelItem, { writer } ) {
 			const equation = modelItem.getAttribute( 'equation' );
 			const type = modelItem.getAttribute( 'type' );
 			const display = modelItem.getAttribute( 'display' );
 
 			if ( type === 'span' ) {
-				const mathtexView = viewWriter.createContainerElement( 'span', {
+				const mathtexView = writer.createContainerElement( 'span', {
 					class: 'math-tex'
 				} );
 
 				if ( display ) {
-					viewWriter.insert( viewWriter.createPositionAt( mathtexView, 0 ), viewWriter.createText( '\\[' + equation + '\\]' ) );
+					writer.insert( writer.createPositionAt( mathtexView, 0 ), writer.createText( '\\[' + equation + '\\]' ) );
 				} else {
-					viewWriter.insert( viewWriter.createPositionAt( mathtexView, 0 ), viewWriter.createText( '\\(' + equation + '\\)' ) );
+					writer.insert( writer.createPositionAt( mathtexView, 0 ), writer.createText( '\\(' + equation + '\\)' ) );
 				}
 
 				return mathtexView;
 			} else {
-				const mathtexView = viewWriter.createContainerElement( 'script', {
+				const mathtexView = writer.createContainerElement( 'script', {
 					type: display ? 'math/tex; mode=display' : 'math/tex'
 				} );
 
-				viewWriter.insert( viewWriter.createPositionAt( mathtexView, 0 ), viewWriter.createText( equation ) );
+				writer.insert( writer.createPositionAt( mathtexView, 0 ), writer.createText( equation ) );
 
 				return mathtexView;
 			}

src/utils.js

@@ -1,11 +1,9 @@
-/* globals MathJax, katex, console */
-
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
 export function getSelectedMathModelWidget( selection ) {
 	const selectedElement = selection.getSelectedElement();
 
-	if ( selectedElement && selectedElement.is( 'mathtex' ) ) {
+	if ( selectedElement && ( selectedElement.is( 'element', 'mathtex-inline' ) || selectedElement.is( 'element', 'mathtex-display' ) ) ) {
 		return selectedElement;
 	}