Gets local copies of needed codemirror js and css files via webpack and enqueues those instead of the remote files

6 files changed, 61 insertions, 2 deletions

diff --git a/.gitignore b/.gitignore
index 57872d0..17ff999 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
+/assets/
+/node_modules/
 /vendor/
diff --git a/composer.json b/composer.json
index 4adf8ee..0bf4609 100644
--- a/composer.json
+++ b/composer.json
@@ -15,5 +15,16 @@
         "psr-4": {
             "TimberEditor\\": "src/"
         }
+    },
+    "archive": {
+        "exclude": [
+            "*", ".*",
+            "!/assets",
+            "!/src",
+            "!/vendor",
+            "!/composer.json",
+            "!/editor-for-timber.php",
+            "!/LICENSE", "!/readme.txt"
+        ]
     }
 }
diff --git a/editor-for-timber.php b/editor-for-timber.php
index 1dea60c..5900160 100644
--- a/editor-for-timber.php
+++ b/editor-for-timber.php
@@ -14,3 +14,7 @@ add_action('plugins_loaded', 'timberEditor');
 function timberEditor() {
     new \TimberEditor\TimberEditor();
 }
+
+function timberEditorAssetsUrl($path) {
+    return plugins_url("assets/$path", __FILE__);
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..cbfc718
--- /dev/null
+++ b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@dweipert/timber-editor",
+  "main": "webpack.config.js",
+  "scripts": {
+    "start": "webpack"
+  },
+  "dependencies": {
+    "codemirror": "^5"
+  },
+  "devDependencies": {
+    "copy-webpack-plugin": "^6.2.1",
+    "css-minimizer-webpack-plugin": "^1.1.5",
+    "webpack": "^5.3.0",
+    "webpack-cli": "^4.1.0"
+  }
+}
diff --git a/src/ThemeEditor.php b/src/ThemeEditor.php
index 0b62264..194b59d 100644
--- a/src/ThemeEditor.php
+++ b/src/ThemeEditor.php
@@ -62,12 +62,12 @@ class ThemeEditor
                 'wp-codemirror',
                 'window.CodeMirror = wp.CodeMirror;'
             );
-            wp_enqueue_script('mode-twig', 'https://unpkg.com/codemirror@5/mode/twig/twig.js', ['wp-codemirror']);
+            wp_enqueue_script('codemirror-mode-twig', timberEditorAssetsUrl('codemirror/mode/twig/twig.js'), ['wp-codemirror']);
         }
 
         $theme = $settings['codemirror']['theme'];
         if ($theme != 'default') {
-            wp_enqueue_style('codemirror-theme', "https://unpkg.com/codemirror@5/theme/$theme.css", ['wp-codemirror']);
+            wp_enqueue_style('codemirror-theme', timberEditorAssetsUrl("codemirror/theme/$theme.css"), ['wp-codemirror']);
         }
     }
 }
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..9e2680e
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,26 @@
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+
+module.exports = {
+  entry: {},
+  output: {
+    path: __dirname,
+  },
+
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: __dirname + '/node_modules/codemirror/mode/twig/twig.js', to: __dirname + '/assets/codemirror/mode/twig/twig.js' },
+        { from: __dirname + '/node_modules/codemirror/theme', to: __dirname + '/assets/codemirror/theme' },
+      ],
+    }),
+  ],
+
+  // minimize copied js and css
+  optimization: {
+    minimizer: [
+      `...`,
+      new CssMinimizerPlugin(),
+    ],
+  },
+};