mirror of
				https://github.com/TriliumNext/Notes.git
				synced 2025-11-04 15:11:31 +08:00 
			
		
		
		
	Add autoformat support
This commit is contained in:
		
							parent
							
								
									8d9c974761
								
							
						
					
					
						commit
						3354872837
					
				
							
								
								
									
										22
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										22
									
								
								README.md
									
									
									
									
									
								
							@ -16,6 +16,7 @@ This is TeX-based mathematical plugin for CKEditor 5. You can use it to insert,
 | 
				
			|||||||
	* [Supported input and output formats](#supported-input-and-output-formats)
 | 
						* [Supported input and output formats](#supported-input-and-output-formats)
 | 
				
			||||||
- [Paste support](#paste-support)
 | 
					- [Paste support](#paste-support)
 | 
				
			||||||
	* [From plain text](#from-plain-text)
 | 
						* [From plain text](#from-plain-text)
 | 
				
			||||||
 | 
					- [Autoformat support](#autoformat-support)
 | 
				
			||||||
- [Preview workaround](#preview-workaround)
 | 
					- [Preview workaround](#preview-workaround)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## Features
 | 
					## Features
 | 
				
			||||||
@ -26,6 +27,7 @@ This is TeX-based mathematical plugin for CKEditor 5. You can use it to insert,
 | 
				
			|||||||
- Have multiple input and output format
 | 
					- Have multiple input and output format
 | 
				
			||||||
- Paste support
 | 
					- Paste support
 | 
				
			||||||
	- from plain text
 | 
						- from plain text
 | 
				
			||||||
 | 
					- Autoformat support
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# Demos
 | 
					# Demos
 | 
				
			||||||
- [Classic editor with MathJax](https://jsfiddle.net/isaul32/qktj9h7x/)
 | 
					- [Classic editor with MathJax](https://jsfiddle.net/isaul32/qktj9h7x/)
 | 
				
			||||||
@ -155,6 +157,26 @@ or
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
__\\(__ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} __\\)__
 | 
					__\\(__ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} __\\)__
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					### Autoformat support
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#### Inline mode
 | 
				
			||||||
 | 
					Ctrl+M can be used to add easily math formulas in inline mode.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#### Display mode
 | 
				
			||||||
 | 
					Autoformat for math can be used to add formula in display mode on a new line by adding `\[` or `$$`. This feature requires additional autoformat plugin to be added.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					Add following lines into your build
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					```js
 | 
				
			||||||
 | 
					// ...
 | 
				
			||||||
 | 
					import AutoformatMathematics from 'ckeditor5-math/src/autoformatmath';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					InlineEditor.builtinPlugins = [
 | 
				
			||||||
 | 
						// ...
 | 
				
			||||||
 | 
						AutoformatMathematics
 | 
				
			||||||
 | 
					];
 | 
				
			||||||
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## Preview workaround
 | 
					## Preview workaround
 | 
				
			||||||
__.ck-reset_all *__ css rules from ckeditor5-ui and ckeditor5-theme-lark break rendering in preview mode.
 | 
					__.ck-reset_all *__ css rules from ckeditor5-ui and ckeditor5-theme-lark break rendering in preview mode.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
							
								
								
									
										38
									
								
								src/autoformatmath.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										38
									
								
								src/autoformatmath.js
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,38 @@
 | 
				
			|||||||
 | 
					import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 | 
				
			||||||
 | 
					import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
 | 
				
			||||||
 | 
					import blockAutoformatEditing from '@ckeditor/ckeditor5-autoformat/src/blockautoformatediting';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					import Math from './math';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default class AutoformatMath extends Plugin {
 | 
				
			||||||
 | 
						static get requires() {
 | 
				
			||||||
 | 
							return [ Math, Autoformat ];
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						afterInit() {
 | 
				
			||||||
 | 
							const editor = this.editor;
 | 
				
			||||||
 | 
							const command = editor.commands.get( 'math' );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							if ( command ) {
 | 
				
			||||||
 | 
								const mathBlockCallback = getCallbackFunctionForBlockAutoformat( editor, command );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								blockAutoformatEditing( editor, this, /^\\\[$/, mathBlockCallback );
 | 
				
			||||||
 | 
								blockAutoformatEditing( editor, this, /^\$\$$/, mathBlockCallback );
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						static get pluginName() {
 | 
				
			||||||
 | 
							return 'AutoformatMath';
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					function getCallbackFunctionForBlockAutoformat( editor, command ) {
 | 
				
			||||||
 | 
						return () => {
 | 
				
			||||||
 | 
							if ( !command.isEnabled ) {
 | 
				
			||||||
 | 
								return false;
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							command.display = true;
 | 
				
			||||||
 | 
							editor.plugins.get( 'MathUI' )._showUI();
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user