Vite in a working state

package.json

@@ -2,6 +2,7 @@
   "name": "@craftcms/ckeditor",
   "private": true,
   "main": "webpack.config.js",
+  "type": "module",
   "browserslist": [
     "extends @craftcms/browserslist-config"
   ],
@@ -15,14 +16,22 @@
     "ckeditor5": ">=41.0.0",
     "copy-webpack-plugin": "^12.0.2",
     "husky": "^9.0.10",
+    "jquery": "^3.7.1",
     "lint-staged": "^15.2.1",
     "prettier": "^3.2.4",
-    "terser-webpack-plugin": "^5.3.10"
+    "terser-webpack-plugin": "^5.3.10",
+    "vite": "^6.0.7"
+  },
+  "peerDependencies": {
+    "jquery": ">=3.0"
   },
   "scripts": {
     "prebuild": "npm run fix-prettier",
     "build": "webpack --node-env=production --progress",
     "dev": "webpack --node-env=dev --mode=development --progress",
+    "build:config": "vite build -c ./src/web/assets/ckeconfig/vite.config.js",
+    "build:field": "vite build -c ./src/web/assets/ckeditor/vite.config.js",
+    "build:vite": "npm run build:config && npm run build:field",
     "serve": "webpack-dev-server --node-env=development",
     "check-prettier": "prettier --check .",
     "fix-prettier": "prettier --write .",

src/Field.php

@@ -110,7 +110,7 @@ class Field extends HtmlField implements ElementContainerFieldInterface, Mergeab
      * @var NestedElementManager[]
      */
     private static array $entryManagers = [];
-    
+
     /**
      * @inheritdoc
      */
@@ -961,7 +961,8 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, $inline):
         $showWordCountJs = Json::encode($this->showWordCount);
         $wordLimitJs = $this->wordLimit ?: 0;
 
-        $view->registerJs(<<<JS
+        $view->registerScript(<<<JS
+import {create} from '@craftcms/ckeditor';
 (($) => {
   const config = Object.assign($baseConfigJs, $configOptionsJs);
   if (!jQuery.isPlainObject(config.toolbar)) {
@@ -1012,10 +1013,11 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, $inline):
     }
     config.removePlugins.push(...extraRemovePlugins);
   }
-  CKEditor5.craftcms.create($idJs, config);
+  create($idJs, config);
 })(jQuery)
 JS,
             View::POS_END,
+            ['type' => 'module']
         );
 
         if ($ckeConfig->css) {

src/controllers/CkeConfigsController.php

@@ -16,6 +16,7 @@
 use craft\web\assets\admintable\AdminTableAsset;
 use craft\web\Controller;
 use craft\web\CpScreenResponseBehavior;
+use craft\web\View;
 use yii\base\InvalidArgumentException;
 use yii\web\NotFoundHttpException;
 use yii\web\Response;
@@ -93,24 +94,25 @@ public function actionEdit(?CkeConfig $ckeConfig = null, ?string $uid = null): R
                 ]);
 
                 $this->view->registerAssetBundle(CkeConfigAsset::class);
-                $this->view->registerJsWithVars(
-                    fn(
-                        $toolbarBuilderId,
-                        $configOptionsId,
-                        $containerId,
-                        $jsonSchemaUri,
-                    ) => <<<JS
-(() => {
-  const configOptions = new CKEditor5.craftcms.ConfigOptions($configOptionsId, $jsonSchemaUri);
-  new CKEditor5.craftcms.ToolbarBuilder($toolbarBuilderId, $containerId, configOptions);
-})();
+                $this->view->registerScriptWithVars(fn(
+                    $toolbarBuilderId,
+                    $configOptionsId,
+                    $containerId,
+                    $jsonSchemaUri,
+                ) => <<<JS
+import {ConfigOptions, ToolbarBuilder} from '@craftcms/ckeditor-config';
+
+  const configOptions = new ConfigOptions($configOptionsId, $jsonSchemaUri);
+  new ToolbarBuilder($toolbarBuilderId, $containerId, configOptions);
 JS,
                     [
                         $this->view->namespaceInputId('toolbar-builder'),
                         $this->view->namespaceInputId('config-options'),
                         $containerId,
                         $jsonSchemaUri,
                     ],
+                    View::POS_END,
+                    ['type' => 'module']
                 );
             });
 

src/templates/cke-configs/_edit.twig

@@ -149,15 +149,16 @@
   {% endblock %}
 {% endembed %}
 
-{% js %}
+{% script with {type: 'module'} %}
+import {pluginNames} from '@craftcms/ckeditor';
 (() => {
   // Register the config options JSON schema
   const jsonSchemaUri = {{ jsonSchemaUri|json_encode|raw }};
   const schema = JSON.parse(
     JSON.stringify({{ jsonSchema|json_encode|raw }})
       .replace(
         new RegExp(Craft.escapeRegex(JSON.stringify('__PLUGIN_LIST__')), 'g'),
-        JSON.stringify(CKEditor5.craftcms.pluginNames())
+        JSON.stringify(pluginNames())
       )
   );
 
@@ -172,7 +173,7 @@
     ],
   });
 })()
-{% endjs %}
+{% endscript %}
 
 {{ codeEditor.textareaField(
   {

src/web/assets/BaseCkeditorPackageAsset.php

@@ -84,12 +84,15 @@ public function init()
     public function registerPackage(View $view): void
     {
         if (!empty($this->pluginNames) || !empty($this->toolbarItems)) {
-            $view->registerJsWithVars(fn($package) => "CKEditor5.craftcms.registerPackage($package);", [
+            $view->registerScriptWithVars(fn($package) => <<<JS
+import {registerPackage} from '@craftcms/ckeditor';
+registerPackage($package);
+JS, [
                 [
                     'pluginNames' => $this->pluginNames,
                     'toolbarItems' => $this->toolbarItems,
                 ],
-            ], View::POS_END);
+            ], View::POS_END, ['type' => 'module']);
         }
     }
 

src/web/assets/ckeconfig/CkeConfigAsset.php

@@ -8,7 +8,9 @@
 namespace craft\ckeditor\web\assets\ckeconfig;
 
 use craft\ckeditor\web\assets\ckeditor\CkeditorAsset;
+use craft\test\Craft;
 use craft\web\AssetBundle;
+use craft\web\View;
 
 /**
  * CKEditor custom build asset bundle
@@ -20,7 +22,7 @@ class CkeConfigAsset extends AssetBundle
     /**
      * @inheritdoc
      */
-    public $sourcePath = __DIR__ . '/dist';
+    public $sourcePath = __DIR__ . '/vite';
 
     /**
      * @inheritdoc
@@ -33,13 +35,24 @@ class CkeConfigAsset extends AssetBundle
      * @inheritdoc
      */
     public $js = [
-        'ckeconfig.js',
+        ['ckeconfig.js', 'type' => 'module']
     ];
 
     /**
      * @inheritdoc
      */
     public $css = [
-        'css/ckeconfig.css',
+        'ckeditor.css',
     ];
+
+    public function registerAssetFiles($view)
+    {
+        parent::registerAssetFiles($view); // TODO: Change the autogenerated stub
+
+        $configUrl = \Craft::$app->getAssetManager()->getAssetUrl($this, 'ckeconfig.js', false);
+
+        if ($view instanceof View) {
+            $view->registerJsImport('@craftcms/ckeditor-config', $configUrl);
+        }
+    }
 }

src/web/assets/ckeconfig/src/ConfigOptions.js

@@ -4,9 +4,8 @@
  * @license GPL-3.0-or-later
  */
 
-/** global: CKEditor5, Garnish */
+/** global: CKEditor5, Garnish, $ */
 import './ckeconfig.css';
-import $ from 'jquery';
 
 export default Garnish.Base.extend({
   jsonSchemaUri: null,