BC-4098 - seperate styles (#10)

* Extract CSS on editor build * Add demo ck-content usage
hpi-schul-cloud · May 17, 2023 · feea621 · feea621
1 parent 850388c
commit feea621
Show file tree

Hide file tree

Showing 4 changed files with 233 additions and 29 deletions.
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.3.1",
+	"version": "0.3.2",
 	"description": "Custom version of CKEditor5 for the Schulcloud-Verbund-Software-Client",
 	"author": "Dataport Schulcloud-Verbund-Software Team",
 	"repository": {
@@ -43,6 +43,7 @@
 		"css-loader": "^5.2.7",
 		"postcss": "^8.4.22",
 		"postcss-loader": "^4.3.0",
+		"mini-css-extract-plugin": "^2.7.5",
 		"raw-loader": "^4.0.2",
 		"style-loader": "^2.0.0",
 		"terser-webpack-plugin": "^4.2.3",

diff --git a/sample/index.html b/sample/index.html
@@ -9,20 +9,25 @@
 				margin: 20px auto;
 			}
 		</style>
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
+		<link
+			rel="stylesheet"
+			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
+		/>
+		<link rel="stylesheet" href="../build/ckeditor.css" />
 	</head>
 	<body>
 		<h2>CKEditor 5 – edit</h2>
 
 		<div id="editor">
 			Initial <strong>content</strong> of
-			<mark class="marker-yellow">editor</mark>
+			<mark class="marker-blue">editor</mark>
 		</div>
 
 		<h2>CKEditor 5 – view</h2>
-		<div id="view" class="ck-editor">
+		<div id="view" class="ck-content">
 			Initial <strong>content</strong> of
-			<mark class="marker-yellow">editor</mark>
+			<mark class="marker-blue">editor</mark>
+			<code>code</code>
 		</div>
 
 		<h2>Formula rendering from markup</h2>
@@ -31,7 +36,7 @@ <h2>Formula rendering from markup</h2>
 		</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="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"></script>
 		<script src="../build/ckeditor.js"></script>
 		<script src="../build/translations/en.js"></script>
 		<script src="../build/translations/es.js"></script>
@@ -40,16 +45,14 @@ <h2>Formula rendering from markup</h2>
 			console.log(
 				CustomCKEditor.builtinPlugins.map((plugin) => plugin.pluginName)
 			);
-			CustomCKEditor
-				.create(document.querySelector("#editor"), {
-					language: "de"
-				}).
-				catch(error => {
-					console.error(error);
-				});
+			CustomCKEditor.create(document.querySelector("#editor"), {
+				language: "de",
+			}).catch((error) => {
+				console.error(error);
+			});
 
-			const preview = document.getElementById('formulas');
-       	 	renderMathInElement(preview);
+			const preview = document.getElementById("formulas");
+			renderMathInElement(preview);
 		</script>
 	</body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -9,6 +9,7 @@ const {
 	CKEditorTranslationsPlugin,
 } = require("@ckeditor/ckeditor5-dev-translations");
 const TerserWebpackPlugin = require("terser-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
 	devtool: "source-map",
@@ -49,6 +50,9 @@ module.exports = {
 			banner: bundler.getLicenseBanner(),
 			raw: true,
 		}),
+		new MiniCssExtractPlugin({
+			filename: "ckeditor.css",
+		}),
 	],
 
 	module: {
@@ -60,18 +64,8 @@ module.exports = {
 			{
 				test: /\.css$/,
 				use: [
-					{
-						loader: "style-loader",
-						options: {
-							injectType: "singletonStyleTag",
-							attributes: {
-								"data-cke": true,
-							},
-						},
-					},
-					{
-						loader: "css-loader",
-					},
+					MiniCssExtractPlugin.loader,
+					"css-loader",
 					{
 						loader: "postcss-loader",
 						options: {