Add autoformat support

This commit is contained in:
Sauli Anto 2020-11-07 22:19:00 +02:00
parent 8d9c974761
commit 3354872837
2 changed files with 60 additions and 0 deletions

View File

@ -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)
- [Paste support](#paste-support)
* [From plain text](#from-plain-text)
- [Autoformat support](#autoformat-support)
- [Preview workaround](#preview-workaround)
## 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
- Paste support
- from plain text
- Autoformat support
# Demos
- [Classic editor with MathJax](https://jsfiddle.net/isaul32/qktj9h7x/)
@ -155,6 +157,26 @@ or
__\\(__ 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
__.ck-reset_all *__ css rules from ckeditor5-ui and ckeditor5-theme-lark break rendering in preview mode.

38
src/autoformatmath.js Normal file
View 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();
}
}