BC-2949 - math plugin (#4)

* Add math plugin * Add KaTeX engine to sample
hpi-schul-cloud · Jan 24, 2023 · 0037055 · 0037055
1 parent f86bd0c
commit 0037055
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ npm i @hpi-schul-cloud/ckeditor
 
 ## Built-in plugins
 
+- AutoFormat
 - BlockQuote
 - Bold
 - Code
@@ -20,6 +21,7 @@ npm i @hpi-schul-cloud/ckeditor
 - Italic
 - Link
 - List
+- Math
 - Paragraph
 - RemoveFormat
 - SpecialCharacters

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@hpi-schul-cloud/ckeditor",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"description": "Custom version of CKEditor5 for the Schulcloud-Verbund-Software-Client",
 	"author": "Dataport Schulcloud-Verbund-Software Team",
 	"repository": {
@@ -37,6 +37,7 @@
 		"@ckeditor/ckeditor5-special-characters": "^35.3.2",
 		"@ckeditor/ckeditor5-table": "^35.3.2",
 		"@ckeditor/ckeditor5-theme-lark": "^35.3.2",
+		"ckeditor5-math": "^35.4.0",
 		"css-loader": "^5.2.7",
 		"postcss": "^8.4.16",
 		"postcss-loader": "^4.3.0",

diff --git a/sample/index.html b/sample/index.html
@@ -9,6 +9,7 @@
 				margin: 20px auto;
 			}
 		</style>
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
 	</head>
 	<body>
 		<h2>CKEditor 5 – edit</h2>
@@ -24,6 +25,13 @@ <h2>CKEditor 5 – view</h2>
 			<mark class="marker-yellow">editor</mark>
 		</div>
 
+		<h2>Formula rendering from markup</h2>
+		<div id="formulas">
+			<span class="math-tex">\(x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}\)</span>
+		</div>
+
+		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>
+    	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"></script>
 		<script src="../build/ckeditor.js"></script>
 		<script>
 			console.log(
@@ -34,6 +42,9 @@ <h2>CKEditor 5 – view</h2>
 					console.error(error);
 				}
 			);
+
+			const preview = document.getElementById('formulas');
+       	 	renderMathInElement(preview);
 		</script>
 	</body>
 </html>
diff --git a/src/ckeditor.js b/src/ckeditor.js
@@ -10,6 +10,7 @@ import HorizontalLine from "@ckeditor/ckeditor5-horizontal-line/src/horizontalli
 import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic.js";
 import Link from "@ckeditor/ckeditor5-link/src/link.js";
 import List from "@ckeditor/ckeditor5-list/src/list.js";
+import Mathematics from 'ckeditor5-math/src/math';
 import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph.js";
 import RemoveFormat from "@ckeditor/ckeditor5-remove-format/src/removeformat";
 import SpecialCharacters from "@ckeditor/ckeditor5-special-characters/src/specialcharacters.js";
@@ -38,6 +39,7 @@ Editor.builtinPlugins = [
 	Italic,
 	Link,
 	List,
+	Mathematics,
 	Paragraph,
 	RemoveFormat,
 	SpecialCharacters,
@@ -70,6 +72,7 @@ Editor.defaultConfig = {
 			"link",
 			"bulletedList",
 			"numberedList",
+			"math",
 			"horizontalLine",
 			"|",
 			"blockQuote",
@@ -82,6 +85,12 @@ Editor.defaultConfig = {
 	table: {
 		contentToolbar: ["tableColumn", "tableRow", "mergeTableCells"],
 	},
+	math: {
+		engine: 'katex',
+		outputType: 'span',
+		forceOutputType: true,
+		enablePreview: true,
+	},
 };
 
 export default Editor;