diff --git a/demo/app.js b/demo/app.js
new file mode 100644
index 000000000..2da7405b7
--- /dev/null
+++ b/demo/app.js
@@ -0,0 +1,19 @@
+import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";
+import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
+import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph";
+import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold";
+import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
+
+import Math from "../src/math";
+
+ClassicEditor.create(document.querySelector("#editor"), {
+ plugins: [Essentials, Paragraph, Bold, Italic, Math],
+ toolbar: ["bold", "italic", "math"],
+ math: { engine: "katex" },
+})
+ .then((editor) => {
+ console.log("Editor was initialized", editor);
+ })
+ .catch((error) => {
+ console.error(error.stack);
+ });
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 000000000..26100b3ee
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ CKEditor5 w/ ckeditor5-math
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
index 3c4b97c06..89b3afdd0 100644
--- a/package.json
+++ b/package.json
@@ -20,16 +20,25 @@
"@ckeditor/ckeditor5-widget": "^27.1.0"
},
"devDependencies": {
+ "@ckeditor/ckeditor5-basic-styles": "^27.1.0",
"@ckeditor/ckeditor5-dev-tests": "^24.4.2",
"@ckeditor/ckeditor5-editor-inline": "^27.1.0",
"@ckeditor/ckeditor5-essentials": "^27.1.0",
"@ckeditor/ckeditor5-paragraph": "^27.1.0",
+ "@ckeditor/ckeditor5-theme-lark": "^27.1.0",
+ "css-loader": "^5.2.4",
"eslint": "^7.1.0",
"eslint-config-ckeditor5": "^3.1.0",
+ "html-webpack-plugin": "^5.3.1",
"husky": "^4.2.5",
"lint-staged": "^10.2.6",
+ "mini-css-extract-plugin": "^1.6.0",
+ "raw-loader": "^4.0.2",
"stylelint": "^13.5.0",
- "stylelint-config-ckeditor5": "^2.0.1"
+ "stylelint-config-ckeditor5": "^2.0.1",
+ "webpack": "^5.36.2",
+ "webpack-cli": "^4.6.0",
+ "webpack-dev-server": "^3.11.2"
},
"engines": {
"node": ">=12.0.0",
@@ -51,7 +60,8 @@
"lint": "eslint --quiet src/**/*.js",
"lint:fix": "eslint --quiet src/**/*.js --fix",
"stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css' 'docs/**/*.css'",
- "test": "node node_modules/@ckeditor/ckeditor5-dev-tests/bin/test.js"
+ "test": "node node_modules/@ckeditor/ckeditor5-dev-tests/bin/test.js",
+ "start": "node node_modules/.bin/webpack serve --mode development"
},
"lint-staged": {
"**/*.js": [
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 000000000..7e49df38b
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,66 @@
+const path = require("path");
+const { styles } = require("@ckeditor/ckeditor5-dev-utils");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports = {
+ // https://webpack.js.org/configuration/entry-context/
+ entry: "./demo/app.js",
+
+ // https://webpack.js.org/configuration/output/
+ output: {
+ path: path.resolve(__dirname, "dist"),
+ filename: "bundle.js",
+ },
+
+ devServer: {
+ disableHostCheck: true,
+ headers: {
+ "Access-Control-Allow-Origin": "*",
+ },
+ historyApiFallback: true,
+ hot: true,
+ inline: true,
+ index: "./demo/index.html",
+ },
+
+ plugins: [
+ new MiniCssExtractPlugin(),
+ new HtmlWebpackPlugin({
+ template: "./demo/index.html",
+ }),
+ ],
+
+ module: {
+ rules: [
+ {
+ test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
+ use: ["raw-loader"],
+ },
+ {
+ test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
+ use: [
+ MiniCssExtractPlugin.loader,
+ "css-loader",
+ {
+ loader: "postcss-loader",
+ options: styles.getPostCssConfig({
+ themeImporter: {
+ themePath: require.resolve(
+ "@ckeditor/ckeditor5-theme-lark"
+ ),
+ },
+ minify: true,
+ }),
+ },
+ ],
+ },
+ ],
+ },
+
+ // Useful for debugging.
+ devtool: "source-map",
+
+ // By default webpack logs warnings if the bundle is bigger than 200kb.
+ performance: { hints: false },
+};