Merge pull request #148 from craftcms/feature/141-lists-and-multiblock

List handling update - removed the switcher

CHANGELOG.md

@@ -4,7 +4,10 @@
 
 - Link element selector modals now include custom sources. ([#139](https://github.com/craftcms/ckeditor/issues/139))
 - Fixed a bug where the CKEditor config-creation slideout could keep reappearing if canceled. ([#138](https://github.com/craftcms/ckeditor/pull/138))
-- Fixed a conflict with `nystudio107/craft-code-editor` 1.0.14 and 1.0.15. ([#150](https://github.com/craftcms/ckeditor/issues/150)) 
+- Fixed a conflict with `nystudio107/craft-code-editor` 1.0.14 and 1.0.15. ([#150](https://github.com/craftcms/ckeditor/issues/150))
+- Updated CKEditor 5 to 40.1.0. ([#141](https://github.com/craftcms/ckeditor/issues/141), [#148](https://github.com/craftcms/ckeditor/pull/148))
+- Added the `TodoDocumentList` CKEditor plugin. ([#148](https://github.com/craftcms/ckeditor/pull/148))
+- Removed the `List`, `ListProperties`, and `TodoList` CKEditor plugins. ([#148](https://github.com/craftcms/ckeditor/pull/148))
 
 ## 3.6.0 - 2023-09-13
 

package.json

@@ -6,42 +6,42 @@
     "extends @craftcms/browserslist-config"
   ],
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": ">=39.0.2",
-    "@ckeditor/ckeditor5-autoformat": ">=39.0.2",
-    "@ckeditor/ckeditor5-basic-styles": ">=39.0.2",
-    "@ckeditor/ckeditor5-block-quote": ">=39.0.2",
-    "@ckeditor/ckeditor5-code-block": ">=39.0.2",
-    "@ckeditor/ckeditor5-core": ">=39.0.2",
+    "@ckeditor/ckeditor5-alignment": ">=40.0.0",
+    "@ckeditor/ckeditor5-autoformat": ">=40.0.0",
+    "@ckeditor/ckeditor5-basic-styles": ">=40.0.0",
+    "@ckeditor/ckeditor5-block-quote": ">=40.0.0",
+    "@ckeditor/ckeditor5-code-block": ">=40.0.0",
+    "@ckeditor/ckeditor5-core": ">=40.0.0",
     "@ckeditor/ckeditor5-dev-translations": "^38.4.1",
-    "@ckeditor/ckeditor5-editor-classic": ">=39.0.2",
-    "@ckeditor/ckeditor5-essentials": ">=39.0.2",
-    "@ckeditor/ckeditor5-find-and-replace": ">=39.0.2",
-    "@ckeditor/ckeditor5-font": ">=39.0.2",
-    "@ckeditor/ckeditor5-heading": ">=39.0.2",
-    "@ckeditor/ckeditor5-horizontal-line": ">=39.0.2",
-    "@ckeditor/ckeditor5-html-embed": ">=39.0.2",
-    "@ckeditor/ckeditor5-html-support": ">=39.0.2",
-    "@ckeditor/ckeditor5-image": ">=39.0.2",
-    "@ckeditor/ckeditor5-indent": ">=39.0.2",
+    "@ckeditor/ckeditor5-editor-classic": ">=40.0.0",
+    "@ckeditor/ckeditor5-essentials": ">=40.0.0",
+    "@ckeditor/ckeditor5-find-and-replace": ">=40.0.0",
+    "@ckeditor/ckeditor5-font": ">=40.0.0",
+    "@ckeditor/ckeditor5-heading": ">=40.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": ">=40.0.0",
+    "@ckeditor/ckeditor5-html-embed": ">=40.0.0",
+    "@ckeditor/ckeditor5-html-support": ">=40.0.0",
+    "@ckeditor/ckeditor5-image": ">=40.0.0",
+    "@ckeditor/ckeditor5-indent": ">=40.0.0",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
-    "@ckeditor/ckeditor5-language": "^39.0.2",
-    "@ckeditor/ckeditor5-link": ">=39.0.2",
-    "@ckeditor/ckeditor5-list": ">=39.0.2",
-    "@ckeditor/ckeditor5-media-embed": ">=39.0.2",
+    "@ckeditor/ckeditor5-language": "^40.0.0",
+    "@ckeditor/ckeditor5-link": ">=40.0.0",
+    "@ckeditor/ckeditor5-list": ">=40.0.0",
+    "@ckeditor/ckeditor5-media-embed": ">=40.0.0",
     "@ckeditor/ckeditor5-package-tools": "^1.1.0",
-    "@ckeditor/ckeditor5-page-break": ">=39.0.2",
-    "@ckeditor/ckeditor5-paragraph": ">=39.0.2",
-    "@ckeditor/ckeditor5-paste-from-office": ">=39.0.2",
-    "@ckeditor/ckeditor5-select-all": ">=39.0.2",
-    "@ckeditor/ckeditor5-source-editing": ">=39.0.2",
-    "@ckeditor/ckeditor5-style": ">=39.0.2",
-    "@ckeditor/ckeditor5-table": ">=39.0.2",
-    "@ckeditor/ckeditor5-theme-lark": "^39.0.2",
-    "@ckeditor/ckeditor5-upload": ">=39.0.2",
-    "@ckeditor/ckeditor5-word-count": ">=39.0.2",
+    "@ckeditor/ckeditor5-page-break": ">=40.0.0",
+    "@ckeditor/ckeditor5-paragraph": ">=40.0.0",
+    "@ckeditor/ckeditor5-paste-from-office": ">=40.0.0",
+    "@ckeditor/ckeditor5-select-all": ">=40.0.0",
+    "@ckeditor/ckeditor5-source-editing": ">=40.0.0",
+    "@ckeditor/ckeditor5-style": ">=40.0.0",
+    "@ckeditor/ckeditor5-table": ">=40.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^40.0.0",
+    "@ckeditor/ckeditor5-upload": ">=40.0.0",
+    "@ckeditor/ckeditor5-word-count": ">=40.0.0",
     "@craftcms/sass": "^1.1.0",
     "@craftcms/webpack": "^1.1.2",
-    "ckeditor5": ">=39.0.2",
+    "ckeditor5": ">=40.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",

src/Field.php

@@ -388,7 +388,6 @@ protected function inputHtml(mixed $value, ElementInterface $element = null): st
             'content' => $element?->getSite()->language ?? Craft::$app->language,
             'textPartLanguage' => static::textPartLanguage(),
         ]);
-        $listPluginJs = Json::encode($ckeConfig->listPlugin);
         $showWordCountJs = Json::encode($this->showWordCount);
         $wordLimitJs = $this->wordLimit ?: 0;
 
@@ -437,15 +436,6 @@ protected function inputHtml(mixed $value, ElementInterface $element = null): st
   } else {
     extraRemovePlugins.push('WordCount');
   }
-  switch ($listPluginJs) {
-    case 'List':
-      extraRemovePlugins.push('DocumentList', 'DocumentListProperties');
-      extraRemovePlugins.push();
-      break;
-    case 'DocumentList':
-      extraRemovePlugins.push('List', 'ListProperties', 'TodoList');
-      break;
-  }
   if (extraRemovePlugins.length) {
     if (typeof config.removePlugins === 'undefined') {
       config.removePlugins = [];

src/templates/cke-configs/_edit.twig

@@ -74,60 +74,6 @@
   values: ckeConfig.headingLevels,
 }) }}
 
-{% embed '_includes/forms/field' with {
-  label: 'List Plugin'|t('ckeditor'),
-  id: 'list-plugin',
-  name: 'listPlugin',
-  instructions: 'Choose which list plugin CKEditor should be configured with, depending on the needed functionality.'|t('ckeditor'),
-} %}
-  {% block input %}
-    {% import '_includes/forms.twig' as forms %}
-    <table class="editable">
-      <thead>
-      <tr>
-        <th></th>
-        <th>{{ 'Numbered lists'|t('ckeditor') }}</th>
-        <th>{{ 'Bulleted lists'|t('ckeditor') }}</th>
-        <th>{{ 'To-do lists'|t('ckeditor') }}</th>
-        <th>{{ 'Can be styled'|t('ckeditor') }}</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <th>
-          {{ forms.radio({
-            label: '<a href="https://ckeditor.com/docs/ckeditor5/latest/features/lists/lists.html"><strong>List</strong></a> <em>(legacy)</em>',
-            id: 'list-plugin--list',
-            name: 'listPlugin',
-            value: 'List',
-            checked: ckeConfig.listPlugin == 'List',
-          }) }}
-        </th>
-        <td style="text-align:center;vertical-align:middle;"><span class="checkbox-icon" role="img" title="{{ 'Supported'|t('ckeditor') }}" aria-label="{{ 'Supported'|t('ckeditor') }}"></span></td>
-        <td style="text-align:center;vertical-align:middle;"><span class="checkbox-icon" role="img" title="{{ 'Supported'|t('ckeditor') }}" aria-label="{{ 'Supported'|t('ckeditor') }}"></span></td>
-        <td style="text-align:center;vertical-align:middle;"><span class="checkbox-icon" role="img" title="{{ 'Supported'|t('ckeditor') }}" aria-label="{{ 'Supported'|t('ckeditor') }}"></span></td>
-        <td></td>
-      </tr>
-      <tr>
-        <th>
-          {{ forms.radio({
-            label: '<a href="https://ckeditor.com/docs/ckeditor5/latest/features/lists/document-lists.html"><strong>DocumentList</strong></a> <em>(new)</em>',
-            id: 'list-plugin--document-list',
-            name: 'listPlugin',
-            value: 'DocumentList',
-            checked: ckeConfig.listPlugin == 'DocumentList',
-          }) }}
-        </th>
-        <td style="text-align:center;vertical-align:middle;"><span class="checkbox-icon" role="img" title="{{ 'Supported'|t('ckeditor') }}" aria-label="{{ 'Supported'|t('ckeditor') }}"></span></td>
-        <td style="text-align:center;vertical-align:middle;"><span class="checkbox-icon" role="img" title="{{ 'Supported'|t('ckeditor') }}" aria-label="{{ 'Supported'|t('ckeditor') }}"></span></td>
-        <td></td>
-        <td style="text-align:center;vertical-align:middle;"><span class="checkbox-icon" role="img" title="{{ 'Supported'|t('ckeditor') }}" aria-label="{{ 'Supported'|t('ckeditor') }}"></span></td>
-      </tr>
-      </tbody>
-    </table>
-  {% endblock %}
-{% endembed %}
-
 {% embed '_includes/forms/field.twig' with {
   label: 'Config Options'|t('ckeditor'),
   instructions: 'Define custom [config options]({link}) which should be merged with the default config.'|t('ckeditor', {

src/web/assets/ckeconfig/src/ToolbarBuilder.js

@@ -21,39 +21,20 @@ export default Garnish.Base.extend({
   $insertion: null,
   showingInsertion: false,
   closestItem: null,
-  $listPluginRadio_List: null,
-  $listPluginRadio_DocumentList: null,
 
   init: function (id, containerId, configOptions, namespace) {
     this.$sourceContainer = $(`#${id} .ckeditor-tb--source .ck-toolbar__items`);
     this.$targetContainer = $(`#${id} .ckeditor-tb--target .ck-toolbar__items`);
     this.$input = $(`#${id} input`);
     this.value = JSON.parse(this.$input.val());
-    this.$listPluginRadio_List = $(`#${containerId} [id$=list-plugin--list]`);
-    this.$listPluginRadio_DocumentList = $(
-      `#${containerId} [id$=list-plugin--document-list]`,
-    );
 
     const editorContainer = document.createElement('DIV');
     const editorElement = document.createElement('DIV');
     editorContainer.appendChild(editorElement);
 
-    this.addListener(
-      this.$listPluginRadio_List.add(this.$listPluginRadio_DocumentList),
-      'change',
-      'toggleDocumentList',
-    );
-
-    // we're including both List and DocumentList in our DLL, but they can't co-exist;
-    // we're switching one off based on user's preferences,
-    // but those preferences are defined in the CKE config which uses this toolbar builder;
-    // so, to allow users to select all possible options,
-    // we're removing DocumentList plugins from here; that way user can still drag and drop ordered,
-    // unordered and to-do lists to the toolbar
     CKEditor5.craftcms
       .create(editorElement, {
         linkOptions: [{elementType: 'craft\\elements\\Asset'}],
-        removePlugins: ['DocumentList', 'DocumentListProperties'],
       })
       .then((editor) => {
         const cf = editor.ui.componentFactory;
@@ -258,58 +239,9 @@ export default Garnish.Base.extend({
           $item.data('sourceItem', sourceItems[key]);
           this.$items = this.$items.add($item);
         }
-
-        this.$listPluginRadio_List.trigger('change');
       });
   },
 
-  toggleDocumentList: function (evt) {
-    let useDocumentList = this.$listPluginRadio_DocumentList.prop('checked');
-
-    if (useDocumentList) {
-      // get index of the button to remove
-      let buttonIndex = this.value.indexOf('todoList');
-      if (buttonIndex >= 0) {
-        // remove button from the list of values
-        this.value.splice(buttonIndex, 1);
-        this.$input.val(JSON.stringify(this.value));
-
-        // get the dom element to remove
-        let node = this.$targetContainer.children()[buttonIndex];
-        if (node !== undefined) {
-          // remove the button from the target container
-          this.$targetContainer[0].removeChild(node);
-        }
-      } else {
-        // if the todoList btn is not in the targetContainer (because it's not in values)
-        // then we need to hide it in the $sourceContainer
-        this.showHideComponentInSourceByName('todoList', 'hide');
-      }
-    } else {
-      this.showHideComponentInSourceByName('todoList', 'show');
-    }
-  },
-
-  showHideComponentInSourceByName: function (name, action) {
-    if (this.components !== null) {
-      var $element = this.components['todoList'].element;
-      if ($element) {
-        var tooltipVal = $($element).data('ckeTooltipText');
-        for (const [key, button] of Object.entries(
-          this.$sourceContainer.children(),
-        )) {
-          if ($(button).data('ckeTooltipText') === tooltipVal) {
-            if (action == 'show') {
-              $(button).removeAttr('style').removeClass('hidden');
-            } else {
-              $(button).addClass('hidden');
-            }
-          }
-        }
-      }
-    }
-  },
-
   renderSeparator: function () {
     const $separator = $(
       '<div class="ckeditor-tb--item ckeditor-tb--separator" data-cke-tooltip-text="Separator"><span class="ck ck-toolbar__separator"/></div>',