](https://www.mathjax.org/)
+
+**KaTeX**
+
+- Tested with version **0.12.0**
+
+[
](https://katex.org/)
+
+- `katexRenderOptions` - pass [options](https://katex.org/docs/options.html).
+
+ ```js
+ InlineEditor.defaultConfig = {
+ // ...
+ math: {
+ engine: 'katex'
+ katexRenderOptions: {
+ macros: {
+ "\\neq": "\\mathrel{\\char`≠}",
+ },
+ },
+ }
+ }
+ ```
+
+**Custom typesetting**
+
+Custom typesetting is possible to implement with engine config. For example, custom typesetting feature can be used when use back end rendering.
+
+```js
+InlineEditor.defaultConfig = {
+ // ...
+ math: {
+ engine: ( equation, element, display, preview ) => {
+ // ...
+ }
+ }
+}
+```
+
+- **equation** is equation in TeX format without delimiters.
+- **element** is DOM element reserved for rendering.
+- **display** is boolean. Typesetting should be inline when false.
+- **preview** is boolean. Rendering in preview when true.
+
+### Supported input and output formats
+
+Supported input and output formats are:
+
+```html
+
+
+
+
+
+\( \sqrt{\frac{a}{b}} \)
+\[ \sqrt{\frac{a}{b}} \]
+```
+
+### Paste support
+
+#### From plain text
+
+Paste TeX equations with **delimiters**. For example:
+
+```latex
+\[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \]
+```
+
+or
+
+```latex
+\( 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 AutoformatMath from '@isaul32/ckeditor5-math/src/autoformatmath';
+
+InlineEditor.builtinPlugins = [
+ // ...
+ AutoformatMath
+];
+```
+
+or use it with DLL build
+
+```html
+
+
+```
+
+## Preview workaround
+
+`.ck-reset_all *` css rules from ckeditor5-ui and ckeditor5-theme-lark break rendering in preview mode.
+
+My solution for this is use rendering element outside of CKEditor DOM and place it to right place by using absolute position. Alternative solution could be using iframe, but then typesetting engine's scripts and styles have to copy to child document.
+
+## Development
+
+Contributions, improvements and bug fixes are welcome. To aid in this, try out
+our developer environment w/ live reload support and [CKEditor 5 inspector].
+
+
+
+To enter a development loop with hot reload support:
+
+- `git clone https://github.com/isaul32/ckeditor5-math.git`
+- `cd ckeditor5-math`
+- `yarn`
+- `yarn start`
+- http://localhost:8080
+
+[ckeditor 5 inspector]: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/development-tools.html#ckeditor-5-inspector
diff --git a/_regroup/ckeditor5-math/ckeditor5-metadata.json b/_regroup/ckeditor5-math/ckeditor5-metadata.json
new file mode 100644
index 000000000..b8f844d9c
--- /dev/null
+++ b/_regroup/ckeditor5-math/ckeditor5-metadata.json
@@ -0,0 +1,23 @@
+{
+ "plugins": [
+ {
+ "name": "Math",
+ "className": "Math",
+ "description": "Adds mathematical formulas to the editor.",
+ "path": "src/math.js",
+ "uiComponents": [
+ {
+ "name": "math",
+ "type": "Button",
+ "iconPath": "theme/icons/math.svg"
+ }
+ ]
+ },
+ {
+ "name": "AutoformatMath",
+ "className": "AutoformatMath",
+ "description": "Implements autoformatting with mathematical formulas.",
+ "path": "src/autoformatmath.js"
+ }
+ ]
+}
diff --git a/_regroup/ckeditor5-math/package.json b/_regroup/ckeditor5-math/package.json
new file mode 100644
index 000000000..d68c8f2be
--- /dev/null
+++ b/_regroup/ckeditor5-math/package.json
@@ -0,0 +1,92 @@
+{
+ "name": "@triliumnext/ckeditor5-math",
+ "version": "43.2.0-hotfix1",
+ "description": "Math feature for CKEditor 5.",
+ "keywords": [
+ "ckeditor",
+ "ckeditor5",
+ "ckeditor 5",
+ "ckeditor5-feature",
+ "ckeditor5-plugin",
+ "ckeditor5-math",
+ "katex"
+ ],
+ "main": "src/index.js",
+ "dependencies": {
+ "@ckeditor/ckeditor5-core": "43.2.0",
+ "@ckeditor/ckeditor5-enter": "43.2.0",
+ "@ckeditor/ckeditor5-typing": "43.2.0",
+ "@ckeditor/ckeditor5-ui": "43.2.0",
+ "@ckeditor/ckeditor5-utils": "43.2.0",
+ "ckeditor5": "43.2.0"
+ },
+ "devDependencies": {
+ "@ckeditor/ckeditor5-basic-styles": "43.2.0",
+ "@ckeditor/ckeditor5-dev-utils": "^43.0.0",
+ "@ckeditor/ckeditor5-editor-classic": "43.2.0",
+ "@ckeditor/ckeditor5-engine": "43.2.0",
+ "@ckeditor/ckeditor5-heading": "43.2.0",
+ "@ckeditor/ckeditor5-image": "43.2.0",
+ "@ckeditor/ckeditor5-list": "43.2.0",
+ "@ckeditor/ckeditor5-paragraph": "43.2.0",
+ "@ckeditor/ckeditor5-table": "43.2.0",
+ "@ckeditor/ckeditor5-theme-lark": "43.2.0",
+ "typescript": "5.0.4",
+ "webpack": "^5.94.0",
+ "webpack-cli": "^5.1.4"
+ },
+ "engines": {
+ "node": ">=18.0.0",
+ "npm": ">=5.7.1"
+ },
+ "author": "Sauli Anto",
+ "license": "ISC",
+ "bugs": "https://github.com/TriliumNext/ckeditor5-math/issues",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/TriliumNext/ckeditor5-math.git"
+ },
+ "files": [
+ "lang",
+ "src/**/*.js",
+ "src/**/*.d.ts",
+ "build",
+ "theme",
+ "ckeditor5-metadata.json",
+ "CHANGELOG.md"
+ ],
+ "scripts": {
+ "ts:build": "tsc -p ./tsconfig.release.json",
+ "ts:clear": "npx rimraf \"src/**/*.@(js|d.ts)\"",
+ "dll:build": "ckeditor5-package-tools dll:build",
+ "dll:serve": "http-server ./ -o sample/dll.html",
+ "lint": "eslint --quiet --ext .ts src/",
+ "lint:fix": "eslint --quiet --fix --ext .ts src/",
+ "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
+ "test": "ckeditor5-package-tools test",
+ "prepare": "yarn run dll:build",
+ "prepublishOnly": "yarn run ts:build && ckeditor5-package-tools export-package-as-javascript",
+ "postpublish": "yarn run ts:clear && ckeditor5-package-tools export-package-as-typescript",
+ "start": "ckeditor5-package-tools start"
+ },
+ "lint-staged": {
+ "**/*.ts": [
+ "eslint --quiet"
+ ],
+ "**/*.css": [
+ "stylelint --quiet --allow-empty-input"
+ ]
+ },
+ "eslintIgnore": [
+ "node_modules/**",
+ "packages/*/node_modules/**",
+ "packages/*/build/**",
+ "packages/*/src/lib/**"
+ ],
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ },
+ "packageManager": "yarn@1.22.22"
+}
diff --git a/_regroup/ckeditor5-math/sample/ckeditor.js b/_regroup/ckeditor5-math/sample/ckeditor.js
new file mode 100644
index 000000000..7917b1cf3
--- /dev/null
+++ b/_regroup/ckeditor5-math/sample/ckeditor.js
@@ -0,0 +1,113 @@
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import CKEditorInspector from '@ckeditor/ckeditor5-inspector';
+
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
+import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import Image from '@ckeditor/ckeditor5-image/src/image';
+import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
+import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
+import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
+import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
+import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';
+import Indent from '@ckeditor/ckeditor5-indent/src/indent';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Link from '@ckeditor/ckeditor5-link/src/link';
+import List from '@ckeditor/ckeditor5-list/src/list';
+import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Table from '@ckeditor/ckeditor5-table/src/table';
+import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
+import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
+
+import { Math, AutoformatMath } from '../src/index';
+
+/* global document, window */
+
+ClassicEditor
+ .create( document.querySelector( '#editor' ), {
+ math: {
+ engine: 'katex',
+ katexRenderOptions: {
+ macros: {
+ '\\test': '\\mathrel{\\char`≠}'
+ }
+ }
+ },
+ plugins: [
+ Math,
+ AutoformatMath,
+ Essentials,
+ Autoformat,
+ BlockQuote,
+ Bold,
+ Heading,
+ Image,
+ ImageCaption,
+ ImageStyle,
+ ImageToolbar,
+ ImageUpload,
+ Indent,
+ Italic,
+ Link,
+ List,
+ MediaEmbed,
+ Paragraph,
+ Table,
+ TableToolbar,
+ CodeBlock,
+ Code,
+ Base64UploadAdapter
+ ],
+ toolbar: [
+ 'math',
+ '|',
+ 'heading',
+ '|',
+ 'bold',
+ 'italic',
+ 'link',
+ 'code',
+ 'bulletedList',
+ 'numberedList',
+ '|',
+ 'outdent',
+ 'indent',
+ '|',
+ 'uploadImage',
+ 'blockQuote',
+ 'insertTable',
+ 'mediaEmbed',
+ 'codeBlock',
+ '|',
+ 'undo',
+ 'redo'
+ ],
+ image: {
+ toolbar: [
+ 'imageStyle:inline',
+ 'imageStyle:block',
+ 'imageStyle:side',
+ '|',
+ 'imageTextAlternative'
+ ]
+ },
+ table: {
+ contentToolbar: [
+ 'tableColumn',
+ 'tableRow',
+ 'mergeTableCells'
+ ]
+ }
+ } )
+ .then( editor => {
+ window.editor = editor;
+ CKEditorInspector.attach( editor );
+ window.console.log( 'CKEditor 5 is ready.', editor );
+ } )
+ .catch( err => {
+ window.console.error( err.stack );
+ } );
diff --git a/_regroup/ckeditor5-math/sample/dll.html b/_regroup/ckeditor5-math/sample/dll.html
new file mode 100644
index 000000000..112756751
--- /dev/null
+++ b/_regroup/ckeditor5-math/sample/dll.html
@@ -0,0 +1,154 @@
+
+
+
+
+
+
+ This is a demo of the classic editor build that loads the Math and AutoformatMath plugin.
+
+ Math inserts mathematical formulas into the editor. You can click the CKEditor 5 Math icon in the toolbar and see the results.
+
+ This should show "\test" as ≠ via katexRenderOptions.macros: + +
+ ++
+ This is a demo of the classic editor build that loads the Math and AutoformatMath plugin.
+
+ Math inserts mathematical formulas into the editor. You can click the CKEditor 5 Math icon in the toolbar and see the results.
+
+ +
+ ++ +
+ ++ This should show "\test" as ≠ via katexRenderOptions.macros: + +
+ + ++ +
+ ++ The code snippet below presents the directory structure. +
+ +.
+├─ sample
+│ ├─ dll.html # The editor initialized using the DLL builds. Check README for details.
+│ ├─ index.html # The currently displayed file.
+│ └─ ckeditor.js # The editor initialization script.
+├─ src
+│ ├─ autoformatmath.js # The AutoformatMath plugin.
+│ ├─ math.js # The Math plugin.
+│ ├─ index.js # The modules exported by the package when using the DLL builds.
+│ └─ **/*.js # JavaScript source files.
+├─ tests
+│ └─ **/*.js # Test files
+├─ theme
+│ ├─ icons
+│ │ ├─ math.svg # The Math icon displayed in the toolbar.
+│ └─ mathform.css # Math editor styles.
+├─ .editorconfig
+├─ ...
+└─ README.mdIf you found a problem with CKEditor 5 or the package generator, please, report an issue:
+ +