Update to new installation methods

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/CkePackageManager.php

@@ -0,0 +1,145 @@
+<?php
+
+namespace craft\ckeditor;
+
+use craft\base\Component;
+use Illuminate\Support\Collection;
+
+class CkePackageManager extends Component
+{
+    private array $pluginsByPackage = [
+        'ckeditor5' => [
+            'Paragraph',
+            'SelectAll',
+            'Clipboard',
+            'Alignment',
+            // 'Anchor',
+            'AutoImage',
+            'AutoLink',
+            'Autoformat',
+            'BlockQuote',
+            'Bold',
+            'Code',
+            'CodeBlock',
+            'List',
+            'ListProperties',
+            'Essentials',
+            'FindAndReplace',
+            'Font',
+            'GeneralHtmlSupport',
+            'Heading',
+            'HorizontalLine',
+            'HtmlComment',
+            'HtmlEmbed',
+            'Image',
+            'ImageCaption',
+            'ImageStyle',
+            'ImageToolbar',
+            'Indent',
+            'IndentBlock',
+            'Italic',
+            'LinkEditing',
+            'LinkImage',
+            'MediaEmbed',
+            'MediaEmbedToolbar',
+            'PageBreak',
+            'PasteFromOffice',
+            'RemoveFormat',
+            'SourceEditing',
+            'Strikethrough',
+            'Style',
+            'Subscript',
+            'Superscript',
+            'Table',
+            'TableCaption',
+            'TableCellProperties',
+            'TableProperties',
+            'TableToolbar',
+            'TableUI',
+            'TextPartLanguage',
+            'TodoList',
+            'Underline',
+            'WordCount',
+        ],
+        '@craftcms/ckeditor' => [
+            'CraftImageInsertUI',
+            'ImageTransform',
+            'ImageEditor',
+            'CraftLinkUI',
+            'CraftEntries',
+        ]
+    ];
+
+    private array $toolbarItems = [
+        ['button' => 'heading', 'configOption' => 'heading'],
+        ['button' => 'style', 'configOption' => 'style'],
+        ['button' => 'alignment', 'configOption' => 'alignment'],
+        'bold',
+        'italic',
+        'underline',
+        'strikethrough',
+        'subscript',
+        'superscript',
+        'code',
+        'link',
+        // 'anchor',
+        'textPartLanguage',
+        ['button' => 'fontSize', 'configOption' => 'fontSize'],
+        'fontFamily',
+        'fontColor',
+        'fontBackgroundColor',
+        'insertImage',
+        'mediaEmbed',
+        'htmlEmbed',
+        'blockQuote',
+        'insertTable',
+        'codeBlock',
+        'bulletedList',
+        'numberedList',
+        'todoList',
+        ['outdent', 'indent'],
+        'horizontalLine',
+        'pageBreak',
+        'removeFormat',
+        'selectAll',
+        'findAndReplace',
+        ['undo', 'redo'],
+        'sourceEditing',
+        'createEntry',
+    ];
+
+
+    public function getToolbarItems(): array
+    {
+        return $this->toolbarItems;
+    }
+
+    public function registerPackage(string $name, array $config): void
+    {
+        $this->pluginsByPackage[$name] = $config['plugins'];
+        $this->toolbarItems[] = $config['toolbarItems'];
+    }
+
+    public function getPluginsByPackage(): array
+    {
+        return $this->pluginsByPackage;
+    }
+
+    public function getAllPlugins(): array
+    {
+        return collect($this->getPluginsByPackage())
+            ->flatten()
+            ->toArray();
+    }
+
+    public function getImportStatements(): string
+    {
+        return collect($this->getPluginsByPackage())
+            ->reduce(function(Collection $carry, array $plugins, string $import) {
+                $carry->push('import { ' . implode(', ', $plugins) . ' } from "' . $import . '";');
+
+                return $carry;
+            }, Collection::empty())->join("\n");
+    }
+
+}

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\CkeditorConfig;
 use craft\ckeditor\web\assets\BaseCkeditorPackageAsset;
 use craft\ckeditor\web\assets\ckeditor\CkeditorAsset;
 use craft\db\FixedOrderExpression;
@@ -110,7 +111,7 @@
      * @var NestedElementManager[]
      */
     private static array $entryManagers = [];
-    
+
     /**
      * @inheritdoc
      */
@@ -861,6 +862,8 @@
 
         $toolbar = array_values($toolbar);
 
+        $extraPlugins = [];
+
         $id = Html::id($this->handle);
         $idJs = Json::encode($view->namespaceInputId($id));
         $wordCountId = "$id-counts";
@@ -931,6 +934,7 @@
             'baseConfig' => $baseConfig,
             'ckeConfig' => $ckeConfig,
             'toolbar' => $toolbar,
+            'extraPlugins' => $extraPlugins
         ]);
         $this->trigger(self::EVENT_MODIFY_CONFIG, $event);
 
@@ -951,6 +955,27 @@
             $configOptionsJs = '{}';
         }
 
+        $removePlugins = Collection::empty();
+
+        // 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 = Plugin::getInstance()->getCkePackageManager()->getPluginsByPackage();
+        $plugins['ckeditor5'] = array_merge($plugins['ckeditor5'], $event->extraPlugins);
+
+        $plugins = collect($plugins)
+            ->mapWithKeys(fn(array $plugins, string $import) => [
+                $import => collect($plugins)
+                    ->reject(fn($plugin) => in_array($plugin, $removePlugins->toArray()))
+            ]);
+
         $baseConfigJs = Json::encode($event->baseConfig);
         $toolbarJs = Json::encode($event->toolbar);
         $languageJs = Json::encode([
@@ -961,17 +986,30 @@
         $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 {create} from '@craftcms/ckeditor';
+
 (($) => {
-  const config = Object.assign($baseConfigJs, $configOptionsJs);
-  if (!jQuery.isPlainObject(config.toolbar)) {
-    config.toolbar = {};
-  }
-  config.toolbar.items = $toolbarJs;
-  if (!jQuery.isPlainObject(config.language)) {
-    config.language = {};
-  }
-  config.language = Object.assign($languageJs, config.language);
+  const config = Object.assign({
+      language: $languageJs,
+  }, $baseConfigJs, $configOptionsJs, {
+    plugins: $configPlugins,
+    toolbar: {
+      items: $toolbarJs
+    },
+    removePlugins: []
+  });
+
   const extraRemovePlugins = [];
   if ($showWordCountJs) {
     if (typeof config.wordCount === 'undefined') {
@@ -982,12 +1020,12 @@
       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,20 +1040,18 @@
         }
       }
       onUpdate(stats);
-    }
+    };
   } else {
     extraRemovePlugins.push('WordCount');
   }
   if (extraRemovePlugins.length) {
-    if (typeof config.removePlugins === 'undefined') {
-      config.removePlugins = [];
-    }
     config.removePlugins.push(...extraRemovePlugins);
   }
-  CKEditor5.craftcms.create($idJs, config);
-})(jQuery)
+  create($idJs, config);
+})(jQuery);
 JS,
             View::POS_END,
+            ['type' => 'module']
         );
 
         if ($ckeConfig->css) {

src/Plugin.php

@@ -27,6 +27,7 @@
  * @method static Plugin getInstance()
  * @author Pixel & Tonic, Inc. <[email protected]>
  * @property-read CkeConfigs $ckeConfigs
+ * @property-read CkePackageManager $ckePackageManager
  */
 class Plugin extends \craft\base\Plugin
 {
@@ -35,6 +36,7 @@ public static function config(): array
         return [
             'components' => [
                 'ckeConfigs' => CkeConfigs::class,
+                'ckePackageManager' => CkePackageManager::class
             ],
         ];
     }
@@ -135,6 +137,10 @@ public function getCkeConfigs(): CkeConfigs
     {
         return $this->get('ckeConfigs');
     }
+    public function getCkePackageManager(): CkePackageManager
+    {
+        return $this->get('ckePackageManager');
+    }
 
     public function getSettingsResponse(): mixed
     {