Issue #3261585 by longwave, ankithashetty, Wim Leers: Remove IE11 warning for...

Issue #3261585 by longwave, ankithashetty, Wim Leers: Remove IE11 warning for CKEditor 5 in Drupal 10, since Drupal 10 does not support IE anyway

core/modules/ckeditor5/ckeditor5.libraries.yml

@@ -29,7 +29,6 @@ drupal.ckeditor5:
     - core/ckeditor5.editorDecoupled
     - core/ckeditor5
     - editor/drupal.editor
-    - ckeditor5/ie11.user.warnings
     - ckeditor5/drupal.ckeditor5.stylesheets
     - core/drupalSettings
     - core/drupal.message
@@ -85,25 +84,6 @@ drupal.ckeditor5.mediaAlign:
   dependencies:
     - ckeditor5/drupal.ckeditor5.media
 
-ie11.user.warnings:
-  js:
-    js/ie11.user.warnings.js: { }
-  css:
-    theme:
-      css/ie-warnings.css: { }
-  dependencies:
-    - core/drupal
-    - core/drupal.message
-    - editor/drupal.editor
-
-ie11.filter.warnings:
-  js:
-    js/ie11.filter.warnings.js: {}
-  dependencies:
-    - core/drupal
-    - core/drupal.message
-    - core/once
-
 drupal.ckeditor5.filter.admin:
   js:
     js/ckeditor5.filter.admin.js: {}

core/modules/ckeditor5/ckeditor5.module

@@ -397,7 +397,6 @@ function _ckeditor5_get_langcode_mapping($lang = FALSE) {
  */
 function ckeditor5_library_info_alter(&$libraries, $extension) {
   if ($extension === 'filter') {
-    $libraries['drupal.filter.admin']['dependencies'][] = 'ckeditor5/ie11.filter.warnings';
     $libraries['drupal.filter.admin']['dependencies'][] = 'ckeditor5/drupal.ckeditor5.filter.admin';
   }
 

core/modules/ckeditor5/css/ie-warnings.css

-.quickedit-field.quickedit-highlighted.ck5-ie11,
-.quickedit-form.quickedit-highlighted.ck5-ie11,
-.quickedit-field .quickedit-highlighted.ck5-ie11 {
-  cursor: default;
-  box-shadow: 0 0 0 1px #f00, 0 0 0 2px #f00;
-}
-
-.quickedit .icon.ck5-ie11 {
-  margin-left: 0.5em;
-  padding-left: 1.5em;
-}
-
-.quickedit .icon.ck5-ie11:before {
-  background-image: url(../../../misc/icons/e32700/error.svg);
-  background-position: left center;
-  background-size: 1.3em;
-}

core/modules/ckeditor5/js/ie11.filter.warnings.es6.js

-/**
- * @file
- * Provides IE11 compatibility warnings when choosing a text editor.
- */
-
-((Drupal, once) => {
-  /**
-   * Presents a warning when selecting CKEditor 5 as a text format's text editor.
-   *
-   * @type {Drupal~behavior}
-   */
-  Drupal.behaviors.ckEditor5warn = {
-    attach: function attach() {
-      const isIE11 = !!document.documentMode;
-      const editorSelect = once(
-        'editor-ie11-warning',
-        '[data-drupal-selector="filter-format-edit-form"] [data-drupal-selector="edit-editor-editor"], [data-drupal-selector="filter-format-add-form"] [data-drupal-selector="edit-editor-editor"]',
-      );
-
-      if (typeof editorSelect[0] !== 'undefined') {
-        const select = editorSelect[0];
-
-        // Add a container for messages above the text format select element.
-        const selectMessageContainer = document.createElement('div');
-        select.parentNode.after(selectMessageContainer, select);
-        const selectMessages = new Drupal.Message(selectMessageContainer);
-        const editorSettings = document.querySelector(
-          '#editor-settings-wrapper',
-        );
-
-        /**
-         * Adds IE11 compatibility warnings to the message container.
-         */
-        const addIE11Warning = () => {
-          selectMessages.add(
-            Drupal.t(
-              'CKEditor 5 is not compatible with Internet Explorer. Text fields using CKEditor 5 will fall back to plain HTML editing without CKEditor for users of Internet Explorer.',
-            ),
-            {
-              type: 'warning',
-              id: 'ie_11_warning',
-            },
-          );
-          if (isIE11) {
-            // https://www.drupal.org/docs/system-requirements/browser-requirements
-            selectMessages.add(
-              Drupal.t(
-                'Text editor toolbar settings are not available in Internet Explorer. They will be available in other <a href="@supported-browsers">supported browsers</a>.',
-                {
-                  '@supported-browsers':
-                    'https://www.drupal.org/docs/system-requirements/browser-requirements',
-                },
-              ),
-              {
-                type: 'error',
-                id: 'ie_11_error',
-              },
-            );
-            editorSettings.hidden = true;
-          }
-        };
-
-        /**
-         * Adds a warning if the selected editor is CKEditor 5, otherwise clears
-         * any existing IE11 warnings.
-         */
-        const updateWarningStatus = () => {
-          if (
-            select.value === 'ckeditor5' &&
-            !select.hasAttribute('data-error-switching-to-ckeditor5')
-          ) {
-            addIE11Warning();
-          } else {
-            if (selectMessages.select('ie_11_warning')) {
-              selectMessages.remove('ie_11_warning');
-            }
-            if (selectMessages.select('ie_11_error')) {
-              selectMessages.remove('ie_11_error');
-            }
-          }
-        };
-
-        updateWarningStatus();
-
-        // This observer listens for two different attribute changes that, when
-        // they occur, may require adding or removing the IE11 warnings.
-        // - If the disabled attribute was removed, which is potentially due to
-        //   an AJAX update having completed.
-        // - If the data-error-switching-to-ckeditor5 attribute was removed,
-        //   which means a switch to CKEditor 5 that was previously blocked due
-        //   to validation errors has resumed and completed.
-        const editorSelectObserver = new MutationObserver((mutations) => {
-          for (let i = 0; i < mutations.length; i++) {
-            // When the select input is no longer disabled, the AJAX request
-            // is complete and the UI is in a state where it can be determined
-            // if the ckeditor_stylesheets warning is needed.
-            const switchToCKEditor5Complete =
-              mutations[i].type === 'attributes' &&
-              mutations[i].attributeName === 'disabled' &&
-              !select.disabled;
-            const fixedErrorsPreventingSwitchToCKEditor5 =
-              mutations[i].type === 'attributes' &&
-              mutations[i].attributeName ===
-                'data-error-switching-to-ckeditor5' &&
-              !select.hasAttribute('data-error-switching-to-ckeditor5');
-            if (
-              switchToCKEditor5Complete ||
-              fixedErrorsPreventingSwitchToCKEditor5
-            ) {
-              updateWarningStatus();
-            }
-          }
-        });
-
-        editorSelectObserver.observe(select, {
-          attributes: true,
-        });
-      }
-    },
-  };
-})(Drupal, once);

core/modules/ckeditor5/js/ie11.filter.warnings.js

-/**
-* DO NOT EDIT THIS FILE.
-* See the following change record for more information,
-* https://www.drupal.org/node/2815083
-* @preserve
-**/
-
-((Drupal, once) => {
-  Drupal.behaviors.ckEditor5warn = {
-    attach: function attach() {
-      const isIE11 = !!document.documentMode;
-      const editorSelect = once('editor-ie11-warning', '[data-drupal-selector="filter-format-edit-form"] [data-drupal-selector="edit-editor-editor"], [data-drupal-selector="filter-format-add-form"] [data-drupal-selector="edit-editor-editor"]');
-
-      if (typeof editorSelect[0] !== 'undefined') {
-        const select = editorSelect[0];
-        const selectMessageContainer = document.createElement('div');
-        select.parentNode.after(selectMessageContainer, select);
-        const selectMessages = new Drupal.Message(selectMessageContainer);
-        const editorSettings = document.querySelector('#editor-settings-wrapper');
-
-        const addIE11Warning = () => {
-          selectMessages.add(Drupal.t('CKEditor 5 is not compatible with Internet Explorer. Text fields using CKEditor 5 will fall back to plain HTML editing without CKEditor for users of Internet Explorer.'), {
-            type: 'warning',
-            id: 'ie_11_warning'
-          });
-
-          if (isIE11) {
-            selectMessages.add(Drupal.t('Text editor toolbar settings are not available in Internet Explorer. They will be available in other <a href="@supported-browsers">supported browsers</a>.', {
-              '@supported-browsers': 'https://www.drupal.org/docs/system-requirements/browser-requirements'
-            }), {
-              type: 'error',
-              id: 'ie_11_error'
-            });
-            editorSettings.hidden = true;
-          }
-        };
-
-        const updateWarningStatus = () => {
-          if (select.value === 'ckeditor5' && !select.hasAttribute('data-error-switching-to-ckeditor5')) {
-            addIE11Warning();
-          } else {
-            if (selectMessages.select('ie_11_warning')) {
-              selectMessages.remove('ie_11_warning');
-            }
-
-            if (selectMessages.select('ie_11_error')) {
-              selectMessages.remove('ie_11_error');
-            }
-          }
-        };
-
-        updateWarningStatus();
-        const editorSelectObserver = new MutationObserver(mutations => {
-          for (let i = 0; i < mutations.length; i++) {
-            const switchToCKEditor5Complete = mutations[i].type === 'attributes' && mutations[i].attributeName === 'disabled' && !select.disabled;
-            const fixedErrorsPreventingSwitchToCKEditor5 = mutations[i].type === 'attributes' && mutations[i].attributeName === 'data-error-switching-to-ckeditor5' && !select.hasAttribute('data-error-switching-to-ckeditor5');
-
-            if (switchToCKEditor5Complete || fixedErrorsPreventingSwitchToCKEditor5) {
-              updateWarningStatus();
-            }
-          }
-        });
-        editorSelectObserver.observe(select, {
-          attributes: true
-        });
-      }
-    }
-  };
-})(Drupal, once);
\ No newline at end of file

core/modules/ckeditor5/js/ie11.user.warnings.es6.js

-/**
- * @file
- * Provide warnings when attempting to load CKEditor 5 on IE11.
- */
-
-((Drupal) => {
-  const isIE11 = !!document.documentMode;
-
-  // If the browser is IE11, create an alternate version of
-  // Drupal.editors.ckeditor5 that provides warnings. In IE11, the incompatible
-  // Javascript of CKEditor 5 prevents Drupal.editors.ckeditor5 from being
-  // created. Features such as Quick Edit that require the presence of a
-  // Drupal.editors.ckeditor5, even for fields that do not use CKEditor 5.
-  if (isIE11) {
-    // Explicitly set the global CKEditor5 object to null. This ensures code
-    // expecting the existence of the object does not fail, but is easily
-    // distinguishable from a valid CKEditor5 object.
-    window.CKEditor5 = null;
-
-    // This will reference a MutationObserver used by several functions in
-    // Drupal.editors.ckeditor5. It is declared here and not the editor object
-    // in order to work with IE11 object scope.
-    let quickEditLabelObserver = null;
-
-    /**
-     * @namespace
-     */
-    Drupal.editors.ckeditor5 = {
-      /**
-       * Provides a warning when trying to attach CKEditor 5 to a field in IE11.
-       *
-       * @param {HTMLElement} element
-       *   The element the editor would have been attached to.
-       */
-      attach: function attach(element) {
-        // Add a Drupal.Message container above the textarea and use it to
-        // provide a warning message to IE11 users.
-        const editorMessageContainer = document.createElement('div');
-        element.parentNode.insertBefore(editorMessageContainer, element);
-        const editorMessages = new Drupal.Message(editorMessageContainer);
-        editorMessages.add(
-          Drupal.t(
-            'A rich text editor is available for this field when used with <a href="@supported-browsers">supported browsers</a> other than Internet Explorer.',
-            {
-              '@supported-browsers':
-                'https://www.drupal.org/docs/system-requirements/browser-requirements',
-            },
-          ),
-          {
-            type: 'warning',
-          },
-        );
-      },
-
-      /**
-       * Editor detach callback.
-       */
-      detach: function detach() {
-        const quickEditToolbar = document.querySelector(
-          '#quickedit-entity-toolbar .quickedit-toolbar',
-        );
-        if (quickEditToolbar) {
-          // Remove classes that style the Quick Edit toolbar as a warning.
-          quickEditToolbar.classList.remove('ck5-ie11');
-          quickEditToolbar.classList.add('icon-pencil');
-
-          // Disconnect the observer from the Quick Edit label that converts the
-          // label to a warning. A warning isn't needed for fields not using
-          // CKEditor 5.
-          quickEditLabelObserver.disconnect();
-        }
-      },
-
-      /**
-       * Registers a callback which CKEditor 5 will call on change:data event.
-       */
-      onChange: function onChange() {
-        // Intentionally empty.
-      },
-
-      /**
-       * Provides a warning when Quick Edit tries to attach CKEditor 5 in IE11.
-       *
-       * @param {HTMLElement} element
-       *   The element the editor would have been attached to.
-       *
-       * @see Drupal.quickedit.editors.editor
-       */
-      attachInlineEditor: function attachInlineEditor(element) {
-        const quickEditToolbar = document.querySelector(
-          '#quickedit-entity-toolbar .quickedit-toolbar',
-        );
-
-        const notEditableAlert = Drupal.t('Field Not Editable');
-        const notEditableMessage = Drupal.t(
-          'CKEditor 5 is not compatible with IE11.',
-        );
-
-        /**
-         * Changes the Quick Edit label to a warning.
-         *
-         * @param {Element} toolbarLabel
-         *   The Quick Edit toolbar label element.
-         */
-        function quickEditLabelWarnIE11(toolbarLabel) {
-          // Disconnect the observer to prevent infinite recursion.
-          quickEditLabelObserver.disconnect();
-
-          // Change the quickEdit toolbar label to a warning that informs
-          // IE11 users that they can't edit the field due to CKEditor not
-          // working with IE11.
-          toolbarLabel.innerHTML = `<div><b>${notEditableAlert}</b><div>${notEditableMessage}</div></div>`;
-          quickEditLabelObserver.observe(toolbarLabel, { childList: true });
-        }
-
-        if (quickEditToolbar) {
-          quickEditToolbar.classList.add('ck5-ie11');
-          quickEditToolbar.classList.remove('icon-pencil');
-          element.classList.add('ck5-ie11');
-
-          // Prepare variables that will be used for changing the QuickEdit
-          // toolbar label to a warning.
-          const toolbarLabel = quickEditToolbar.querySelector(
-            '.quickedit-toolbar-label',
-          );
-
-          // Updating the Quick Edit label to display as a warning is triggered
-          // via an observer. An observer us used as there are multiple
-          // Quick Edit Backbone View events that alter the contents of this
-          // label. An observer is used to guarantee the warning persists
-          // without having to override multiple Backbone event handlers.
-          quickEditLabelObserver = new MutationObserver((mutations) => {
-            for (let i = 0; i < mutations.length; i++) {
-              if (mutations[i].type === 'childList') {
-                quickEditLabelWarnIE11(toolbarLabel);
-              }
-            }
-          });
-          quickEditLabelObserver.observe(toolbarLabel, { childList: true });
-        }
-      },
-    };
-  }
-})(Drupal);

core/modules/ckeditor5/js/ie11.user.warnings.js

-/**
-* DO NOT EDIT THIS FILE.
-* See the following change record for more information,
-* https://www.drupal.org/node/2815083
-* @preserve
-**/
-
-(Drupal => {
-  const isIE11 = !!document.documentMode;
-
-  if (isIE11) {
-    window.CKEditor5 = null;
-    let quickEditLabelObserver = null;
-    Drupal.editors.ckeditor5 = {
-      attach: function attach(element) {
-        const editorMessageContainer = document.createElement('div');
-        element.parentNode.insertBefore(editorMessageContainer, element);
-        const editorMessages = new Drupal.Message(editorMessageContainer);
-        editorMessages.add(Drupal.t('A rich text editor is available for this field when used with <a href="@supported-browsers">supported browsers</a> other than Internet Explorer.', {
-          '@supported-browsers': 'https://www.drupal.org/docs/system-requirements/browser-requirements'
-        }), {
-          type: 'warning'
-        });
-      },
-      detach: function detach() {
-        const quickEditToolbar = document.querySelector('#quickedit-entity-toolbar .quickedit-toolbar');
-
-        if (quickEditToolbar) {
-          quickEditToolbar.classList.remove('ck5-ie11');
-          quickEditToolbar.classList.add('icon-pencil');
-          quickEditLabelObserver.disconnect();
-        }
-      },
-      onChange: function onChange() {},
-      attachInlineEditor: function attachInlineEditor(element) {
-        const quickEditToolbar = document.querySelector('#quickedit-entity-toolbar .quickedit-toolbar');
-        const notEditableAlert = Drupal.t('Field Not Editable');
-        const notEditableMessage = Drupal.t('CKEditor 5 is not compatible with IE11.');
-
-        function quickEditLabelWarnIE11(toolbarLabel) {
-          quickEditLabelObserver.disconnect();
-          toolbarLabel.innerHTML = `<div><b>${notEditableAlert}</b><div>${notEditableMessage}</div></div>`;
-          quickEditLabelObserver.observe(toolbarLabel, {
-            childList: true
-          });
-        }
-
-        if (quickEditToolbar) {
-          quickEditToolbar.classList.add('ck5-ie11');
-          quickEditToolbar.classList.remove('icon-pencil');
-          element.classList.add('ck5-ie11');
-          const toolbarLabel = quickEditToolbar.querySelector('.quickedit-toolbar-label');
-          quickEditLabelObserver = new MutationObserver(mutations => {
-            for (let i = 0; i < mutations.length; i++) {
-              if (mutations[i].type === 'childList') {
-                quickEditLabelWarnIE11(toolbarLabel);
-              }
-            }
-          });
-          quickEditLabelObserver.observe(toolbarLabel, {
-            childList: true
-          });
-        }
-      }
-    };
-  }
-})(Drupal);
\ No newline at end of file

core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5AllowedTagsTest.php

@@ -403,21 +403,6 @@ public function testMediaElementAllowedTags() {
     $this->assertHtmlEsqueFieldValueEquals('filters[filter_html][settings][allowed_html]', $this->allowedElements);
   }
 
-  /**
-   * Tests the presence of the IE warning when CKEditor 5 is selected.
-   */
-  public function testInternetExplorerWarning() {
-    $page = $this->getSession()->getPage();
-    $assert_session = $this->assertSession();
-    $warning_text = 'CKEditor 5 is not compatible with Internet Explorer. Text fields using CKEditor 5 will fall back to plain HTML editing without CKEditor for users of Internet Explorer.';
-    $this->createNewTextFormat($page, $assert_session);
-    $assert_session->waitForText($warning_text);
-    $page->selectFieldOption('editor[editor]', 'None');
-    $this->getSession()->getDriver()->executeScript("document.querySelector('#drupal-live-announce').innerHTML = ''");
-    $assert_session->assertNoElementAfterWait('css', '.messages--warning');
-    $assert_session->pageTextNotContains($warning_text);
-  }
-
   /**
    * Tests full HTML text format.
    */

core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5Test.php

@@ -51,9 +51,6 @@ public function testExistingContent() {
     // Change the node to use the new text format.
     $this->drupalGet('node/1/edit');
 
-    // Confirm that the JavaScript that generates IE11 warnings loads.
-    $assert_session->elementExists('css', 'script[src*="ckeditor5/js/ie11.user.warnings.js"]');
-
     $page->selectFieldOption('body[0][format]', 'ckeditor5');
     $this->assertNotEmpty($assert_session->waitForText('Change text format?'));
     $page->pressButton('Continue');

core/modules/quickedit/tests/src/FunctionalJavascript/CKEditor5IntegrationTest.php

@@ -226,9 +226,6 @@ public function testArticleNode() {
       'node/1/body/en/full' => 'candidate',
     ]);
 
-    // Confirm that the JavaScript that generates IE11 warnings loads.
-    $assert_session->elementExists('css', 'script[src*="ckeditor5/js/ie11.user.warnings.js"]');
-
     // Click the body field.
     hold_test_response(TRUE);
     $this->click('[data-quickedit-field-id="node/1/body/en/full"]');