Update to new installation methods

composer.json

@@ -25,7 +25,7 @@
   },
   "require": {
     "php": "^8.2",
-    "craftcms/cms": "^5.5.0",
+    "craftcms/cms": "^5.6.0",
     "craftcms/html-field": "^3.1.0",
     "nystudio107/craft-code-editor": ">=1.0.8 <=1.0.13 || ^1.0.16"
   },

package.json

@@ -1,59 +1,34 @@
 {
   "name": "@craftcms/ckeditor",
   "private": true,
-  "main": "webpack.config.js",
+  "type": "module",
   "browserslist": [
     "extends @craftcms/browserslist-config"
   ],
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": ">=41.0.0",
-    "@ckeditor/ckeditor5-autoformat": ">=41.0.0",
-    "@ckeditor/ckeditor5-basic-styles": ">=41.0.0",
-    "@ckeditor/ckeditor5-block-quote": ">=41.0.0",
-    "@ckeditor/ckeditor5-code-block": ">=41.0.0",
-    "@ckeditor/ckeditor5-core": ">=41.0.0",
-    "@ckeditor/ckeditor5-dev-translations": "^39.5.1",
-    "@ckeditor/ckeditor5-editor-classic": ">=41.0.0",
-    "@ckeditor/ckeditor5-essentials": ">=41.0.0",
-    "@ckeditor/ckeditor5-find-and-replace": ">=41.0.0",
-    "@ckeditor/ckeditor5-font": ">=41.0.0",
-    "@ckeditor/ckeditor5-heading": ">=41.0.0",
-    "@ckeditor/ckeditor5-horizontal-line": ">=41.0.0",
-    "@ckeditor/ckeditor5-html-embed": ">=41.0.0",
-    "@ckeditor/ckeditor5-html-support": ">=41.0.0",
-    "@ckeditor/ckeditor5-image": ">=41.0.0",
-    "@ckeditor/ckeditor5-indent": ">=41.0.0",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
-    "@ckeditor/ckeditor5-language": "^41.0.0",
-    "@ckeditor/ckeditor5-link": ">=41.0.0",
-    "@ckeditor/ckeditor5-list": ">=41.0.0",
-    "@ckeditor/ckeditor5-media-embed": ">=41.0.0",
-    "@ckeditor/ckeditor5-package-tools": "^1.1.0",
-    "@ckeditor/ckeditor5-page-break": ">=41.0.0",
-    "@ckeditor/ckeditor5-paragraph": ">=41.0.0",
-    "@ckeditor/ckeditor5-paste-from-office": ">=41.0.0",
-    "@ckeditor/ckeditor5-remove-format": ">=41.0.0",
-    "@ckeditor/ckeditor5-select-all": ">=41.0.0",
-    "@ckeditor/ckeditor5-source-editing": ">=41.0.0",
-    "@ckeditor/ckeditor5-style": ">=41.0.0",
-    "@ckeditor/ckeditor5-table": ">=41.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^41.0.0",
-    "@ckeditor/ckeditor5-upload": ">=41.0.0",
-    "@ckeditor/ckeditor5-word-count": ">=41.0.0",
-    "@craftcms/sass": "^1.1.0",
-    "@craftcms/webpack": "^1.1.2",
     "@northernco/ckeditor5-anchor-drupal": "^0.5.0",
     "ckeditor5": ">=41.0.0",
-    "copy-webpack-plugin": "^12.0.2",
     "husky": "^9.0.10",
     "lint-staged": "^15.2.1",
-    "prettier": "^3.2.4"
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.2.4",
+    "vite": "^6.0.7"
+  },
+  "peerDependencies": {
+    "glob": ">= 11.0"
   },
   "scripts": {
     "prebuild": "npm run fix-prettier",
-    "build": "webpack --node-env=production --progress",
-    "dev": "webpack --node-env=dev --mode=development --progress",
-    "serve": "webpack-dev-server --node-env=development",
+    "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": "npm-run-all -p build:*",
+    "postbuild": "npm-run-all copy:*",
+    "dev": "npm-run-all -p \"build:* -- -w --mode=development --minify=false\"",
+    "predev": "npm-run-all copy:*",
+    "precopy:lib": "rm -r ./src/web/assets/ckeditor/dist/lib || true",
+    "copy:browser": "cp -r ./node_modules/ckeditor5/dist/browser/ ./src/web/assets/ckeditor/dist/lib",
+    "copy:translations": "cp -r ./node_modules/ckeditor5/dist/translations/ ./src/web/assets/ckeditor/dist/lib/translations",
     "check-prettier": "prettier --check .",
     "fix-prettier": "prettier --write .",
     "prepare": "husky install"

src/Field.php

@@ -20,6 +20,7 @@
 use craft\ckeditor\data\Markup;
 use craft\ckeditor\events\DefineLinkOptionsEvent;
 use craft\ckeditor\events\ModifyConfigEvent;
+use craft\ckeditor\helpers\Toolbar;
 use craft\ckeditor\web\assets\BaseCkeditorPackageAsset;
 use craft\ckeditor\web\assets\ckeditor\CkeditorAsset;
 use craft\db\FixedOrderExpression;
@@ -110,7 +111,7 @@ class Field extends HtmlField implements ElementContainerFieldInterface, Mergeab
      * @var NestedElementManager[]
      */
     private static array $entryManagers = [];
-    
+
     /**
      * @inheritdoc
      */
@@ -862,7 +863,7 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, $inline):
         $toolbar = array_values($toolbar);
 
         $id = Html::id($this->handle);
-        $idJs = Json::encode($view->namespaceInputId($id));
+        $idJs = Json::encode('#' . $view->namespaceInputId($id));
         $wordCountId = "$id-counts";
         $wordCountIdJs = Json::encode($view->namespaceInputId($wordCountId));
 
@@ -951,6 +952,48 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, $inline):
             $configOptionsJs = '{}';
         }
 
+        $removePlugins = Collection::empty();
+        // $removePlugins = collect(Plugin::$pluginButtonMap)
+        //     ->filter(function($mapping) use ($event) {
+        //         $buttons = $mapping['buttons'] ?? [];
+        //         return collect($event->toolbar)
+        //             ->some(function($button) use ($buttons) {
+        //                 return !in_array($button, $buttons);
+        //             });
+        //     })
+        //     ->map(fn($mapping) => $mapping['plugins'])
+        //     ->flatten();
+
+        // Craft::dd($removePlugins);
+
+        // remove MediaEmbedToolbar for now
+        // see: https://github.com/ckeditor/ckeditor5-react/issues/267
+        // and: https://github.com/ckeditor/ckeditor5/issues/9824
+        // for more info
+        $removePlugins->push('MediaEmbedToolbar');
+
+
+        if (!$transforms || count($transforms) === 0) {
+            $removePlugins->push('ImageTransforms');
+        }
+
+        $plugins = collect(Plugin::$ckeditorPlugins)
+            ->mapWithKeys(fn(array $plugins, string $import) => [
+                $import => collect($plugins)
+                    ->reject(fn($plugin) => in_array($plugin, $removePlugins->toArray()))
+            ]);
+
+        // $plugins = collect($event->toolbar)
+        //     ->map(function($item) use ($event) {
+        //         Craft::dump($item);
+        //         $exists = collect(Toolbar::items())
+        //             ->some(function($item) {
+        //                 Craft::dump($item);
+        //             });
+        //         Craft::dump($exists);
+        //     });
+        //
+        // die();
         $baseConfigJs = Json::encode($event->baseConfig);
         $toolbarJs = Json::encode($event->toolbar);
         $languageJs = Json::encode([
@@ -961,14 +1004,26 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, $inline):
         $showWordCountJs = Json::encode($this->showWordCount);
         $wordLimitJs = $this->wordLimit ?: 0;
 
-        $view->registerJs(<<<JS
+        $configPlugins = '[' . $plugins->flatten()->join(',') . ']';
+
+        $imports = $plugins
+            ->reduce(function(Collection $carry, Collection $plugins, string $import) {
+                $carry->push('import { ' . $plugins->join(', ') . ' } from "' . $import . '";');
+                return $carry;
+            }, Collection::empty())
+            ->join("\n");
+
+        $view->registerScript(<<<JS
+$imports
+import {ClassicEditor} from 'ckeditor5';
+import {create} from '@craftcms/ckeditor';
 (($) => {
   const config = Object.assign($baseConfigJs, $configOptionsJs);
-  if (!jQuery.isPlainObject(config.toolbar)) {
+  if (!$.isPlainObject(config.toolbar)) {
     config.toolbar = {};
   }
   config.toolbar.items = $toolbarJs;
-  if (!jQuery.isPlainObject(config.language)) {
+  if (!$.isPlainObject(config.language)) {
     config.language = {};
   }
   config.language = Object.assign($languageJs, config.language);
@@ -982,12 +1037,12 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, $inline):
       const statText = [];
       if (config.wordCount.displayWords || typeof config.wordCount.displayWords === 'undefined') {
         statText.push(Craft.t('ckeditor', '{num, number} {num, plural, =1{word} other{words}}', {
-          num: stats.words,
+          num: stats.words
         }));
       }
       if (config.wordCount.displayCharacters) { // false by default
         statText.push(Craft.t('ckeditor', '{num, number} {num, plural, =1{character} other{characters}}', {
-          num: stats.characters,
+          num: stats.characters
         }));
       }
       const container = $('#' + $wordCountIdJs);
@@ -1002,7 +1057,7 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, $inline):
         }
       }
       onUpdate(stats);
-    }
+    };
   } else {
     extraRemovePlugins.push('WordCount');
   }
@@ -1012,10 +1067,23 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, $inline):
     }
     config.removePlugins.push(...extraRemovePlugins);
   }
-  CKEditor5.craftcms.create($idJs, config);
-})(jQuery)
+
+  const el = document.querySelector($idJs);
+
+  if (!el) {
+  return;
+  }
+
+  ClassicEditor.create(el, {
+    licenseKey: 'GPL',
+    plugins: $configPlugins,
+    ...config
+  })
+  // create($idJs, config);
+})(jQuery);
 JS,
             View::POS_END,
+            ['type' => 'module']
         );
 
         if ($ckeConfig->css) {
@@ -1215,10 +1283,8 @@ private function defaultCreateButtonLabel(): string
     /**
      * Fill entry card CKE markup (<craft-entry data-entry-id="96"></craft-entry>)
      * with actual card HTML of the entry it's linking to
-
      * Replace the entry card CKE markup (<craft-entry data-entry-id="96"></craft-entry>)
      * with actual card HTML of the entry it's linking to
-
      * Replace the entry card CKE markup (<craft-entry data-entry-id="96"></craft-entry>)
      * with the rendered HTML of the entry it's linking to
      */
@@ -1642,8 +1708,8 @@ private function _adjustPurifierConfig(HTMLPurifier_Config $purifierConfig): HTM
     private function _accessibleFieldName(?ElementInterface $element = null): string
     {
         return Craft::t('site', $this->name) .
-        ($element?->getFieldLayout()?->getField($this->handle)?->required ? ' ' . Craft::t('site', 'Required') : '') .
-        ($this->getIsTranslatable($element) ? ' ' . $this->getTranslationDescription($element) : '');
+            ($element?->getFieldLayout()?->getField($this->handle)?->required ? ' ' . Craft::t('site', 'Required') : '') .
+            ($this->getIsTranslatable($element) ? ' ' . $this->getTranslationDescription($element) : '');
     }
 
     /**