ckeditor5-1.0.x-dev/tests/src/FunctionalJavascript/CKEditor5AllowedTagsTest.php

<?php

namespace Drupal\Tests\ckeditor5\FunctionalJavascript;

use Drupal\filter\Entity\FilterFormat;
use Drupal\node\Entity\Node;
use Symfony\Component\Yaml\Yaml;

// cspell:ignore imageUpload nofilter noeditor

/**
 * Tests for CKEditor5.
 *
 * @group ckeditor5
 */
class CKEditor5AllowedTagsTest extends CKEditor5TestBase {

  /**
   * {@inheritdoc}
   */
  protected static $modules = [
    'node',
    'ckeditor',
    'ckeditor5',
    'media',
    'media_library',
  ];

  /**
   * The default CKEditor 5 allowed elements.
   *
   * @var string
   */
  protected $allowedElements = '<p> <br> <h1> <h2> <h3> <h4> <h5> <h6> <strong> <em>';

  /**
   * The element that must be allowed when media embed is enabled.
   *
   * @var string
   */
  protected $mediaElement = '<drupal-media data-entity-type data-entity-uuid alt>';

  /**
   * The default allowed elements when adding a non-CKEditor 5 editor.
   *
   * @var string
   */
  protected $defaultElementsWhenAddingNotCkeditor5 = "<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>";

  /**
   * The default allowed elements when updating a non-CKEditor 5 editor.
   *
   * This is slightly different than when adding, as saving this value strips
   * invalid attributes.
   *
   * @var string
   */
  protected $defaultElementsWhenUpdatingNotCkeditor5 = '<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <img src alt data-entity-type data-entity-uuid>';

  /**
   * Test enabling CKEditor 5 in a way that triggers validation.
   */
  public function testEnablingToVersion5Validation() {
    $page = $this->getSession()->getPage();
    $assert_session = $this->assertSession();

    $this->createNewTextFormat($page, $assert_session, 'ckeditor');
    $page->selectFieldOption('editor[editor]', 'ckeditor');
    $assert_session->assertWaitOnAjaxRequest();
    $page->checkField('filters[filter_html][status]');
    $assert_session->assertWaitOnAjaxRequest();
    $page->selectFieldOption('editor[editor]', 'ckeditor5');
    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->pageTextContains('CKEditor 5 needs at least the <p> and <br> tags to be allowed to be able to function. They are not allowed by the "Limit allowed HTML tags and correct faulty HTML" (filter_html) filter.');

    // Add the tags that must be included in the html filter for CKEditor 5
    // defaults.
    $allowed_html_field = $assert_session->fieldExists('filters[filter_html][settings][allowed_html]');
    $allowed_html_field->setValue('<p> <br>');

    // Confirm there are no longer any warnings.
    $assert_session->waitForElementRemoved('css', '[data-drupal-messages] [role="alert"]');

    $page->pressButton('update-ckeditor5-allowed-tags');
    $assert_session->assertWaitOnAjaxRequest();
    $this->saveNewTextFormat($page, $assert_session);
  }

  /**
   * Confirm that switching to CKEditor 5 from another editor updates tags.
   */
  public function testSwitchToVersion5() {
    $page = $this->getSession()->getPage();
    $assert_session = $this->assertSession();

    $this->createNewTextFormat($page, $assert_session, 'ckeditor');
    $assert_session->assertWaitOnAjaxRequest();

    // Enable the HTML filter.
    $this->assertTrue($page->hasUncheckedField('filters[filter_html][status]'));
    $page->checkField('filters[filter_html][status]');
    $assert_session->assertWaitOnAjaxRequest();

    // Confirm the allowed HTML tags are the defaults for non-Ckeditor5 editors.
    $assert_session->fieldValueEquals('filters[filter_html][settings][allowed_html]', $this->defaultElementsWhenAddingNotCkeditor5);

    $this->saveNewTextFormat($page, $assert_session);
    $assert_session->pageTextContains('Added text format ckeditor');

    // Return to the config form to confirm that switching text editors on
    // existing formats will properly switch allowed tags.
    $this->drupalGet('admin/config/content/formats/manage/ckeditor');
    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->fieldValueEquals('filters[filter_html][settings][allowed_html]', $this->defaultElementsWhenUpdatingNotCkeditor5);

    $page->selectFieldOption('editor[editor]', 'ckeditor5');
    $assert_session->assertWaitOnAjaxRequest();

    $this->assertTrue($page->find('css', '[name="editor[editor]"]')->hasClass('error'));
    $this->assertNotEmpty($assert_session->waitForElement('css', '[data-ckeditor5-allowed-tags-info]'));
    $assert_session->fieldValueEquals('filters[filter_html][settings][allowed_html]', $this->defaultElementsWhenUpdatingNotCkeditor5);

    $allowed_html_field = $assert_session->fieldExists('filters[filter_html][settings][allowed_html]');
    $allowed_html_field->setValue('<p> <br>');

    $page->pressButton('update-ckeditor5-allowed-tags');
    $assert_session->assertWaitOnAjaxRequest();
    $this->assertFalse($page->find('css', '[name="editor[editor]"]')->hasClass('error'));
    $page->pressButton('Save configuration');

    $assert_session->pageTextContains('The text format ckeditor has been updated');
  }

  /**
   * Tests the language config form.
   */
  public function testLanguageConfigForm() {
    $page = $this->getSession()->getPage();
    $assert_session = $this->assertSession();

    $this->createNewTextFormat($page, $assert_session);
    $assert_session->assertWaitOnAjaxRequest();

    // The language plugin config form should not be present.
    $assert_session->elementNotExists('css', '[data-drupal-selector="edit-editor-settings-plugins-language"]');

    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-textPartLanguage'));
    $this->triggerKeyUp('.ckeditor5-toolbar-item-textPartLanguage', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();

    // The language plugin config form should now be present.
    $assert_session->elementExists('css', '[data-drupal-selector="edit-editor-settings-plugins-language"]');
  }

  /**
   * Tests that the img tag is added after enabling image uploads.
   */
  public function testImgAddedViaUploadPlugin() {
    $page = $this->getSession()->getPage();
    $assert_session = $this->assertSession();

    $this->createNewTextFormat($page, $assert_session);
    $assert_session->assertWaitOnAjaxRequest();

    $allowed_html_field = $assert_session->fieldExists('filters[filter_html][settings][allowed_html]');
    $this->assertTrue($allowed_html_field->hasAttribute('readonly'));

    // Allowed tags are currently the default, with no <img>.
    $this->assertEquals($this->allowedElements, $allowed_html_field->getValue());

    // The image upload settings form should not be present.
    $assert_session->elementNotExists('css', '[data-drupal-selector="edit-editor-settings-plugins-ckeditor5imageupload"]');

    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-uploadImage'));
    $this->triggerKeyUp('.ckeditor5-toolbar-item-uploadImage', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();

    // The image upload settings form should now be present.
    $assert_session->elementExists('css', '[data-drupal-selector="edit-editor-settings-plugins-ckeditor5imageupload"]');

    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-active .ckeditor5-toolbar-item-uploadImage'));

    // The image upload plugin is enabled, but <img> not yet allowed.
    $this->assertEquals($this->allowedElements, $allowed_html_field->getValue());

    $page->clickLink('Image Upload');
    $assert_session->waitForText('Enable image uploads');
    $this->assertTrue($page->hasUncheckedField('editor[settings][plugins][ckeditor5.imageUpload][image_upload][status]'));
    $page->checkField('editor[settings][plugins][ckeditor5.imageUpload][image_upload][status]');
    $assert_session->assertWaitOnAjaxRequest();

    // Enabling image uploads adds <img> with several attributes to allowed
    // tags.
    $this->assertEquals($this->allowedElements . ' <img src alt data-entity-uuid data-entity-type height width>', $allowed_html_field->getValue());

    // Also enabling the caption filter will add the data-caption attribute to
    // <img>.
    $this->assertTrue($page->hasUncheckedField('filters[filter_caption][status]'));
    $page->checkField('filters[filter_caption][status]');
    $assert_session->assertWaitOnAjaxRequest();
    $this->assertEquals($this->allowedElements . ' <img src alt data-entity-uuid data-entity-type height width data-caption>', $allowed_html_field->getValue());

    // Also enabling the alignment filter will add the data-align attribute to
    // <img>.
    $this->assertTrue($page->hasUncheckedField('filters[filter_align][status]'));
    $page->checkField('filters[filter_align][status]');
    $assert_session->assertWaitOnAjaxRequest();
    $this->assertEquals($this->allowedElements . ' <img src alt data-entity-uuid data-entity-type height width data-caption data-align>', $allowed_html_field->getValue());

    // Disable image upload.
    $page->clickLink('Image Upload');
    $assert_session->waitForText('Enable image uploads');
    $this->assertTrue($page->hasCheckedField('editor[settings][plugins][ckeditor5.imageUpload][image_upload][status]'));
    $page->uncheckField('editor[settings][plugins][ckeditor5.imageUpload][image_upload][status]');
    $assert_session->assertWaitOnAjaxRequest();

    // Confirm <img> is no longer an allowed tag, once image upload disabled.
    $this->assertEquals($this->allowedElements, $allowed_html_field->getValue());
  }

  /**
   * Test filter_html allowed tags.
   */
  public function testAllowedTags() {
    $page = $this->getSession()->getPage();
    $assert_session = $this->assertSession();

    $this->createNewTextFormat($page, $assert_session);
    $assert_session->assertWaitOnAjaxRequest();

    // Confirm the "allowed tags" field is  read only, and the value
    // matches the tags required by CKEditor.
    // Allowed HTML field is readonly and its wrapper has a form-disabled class.
    $this->assertNotEmpty($assert_session->waitForElement('css', '.js-form-item-filters-filter-html-settings-allowed-html.form-disabled'));
    $allowed_html_field = $assert_session->fieldExists('filters[filter_html][settings][allowed_html]');
    $this->assertTrue($allowed_html_field->hasAttribute('readonly'));
    $this->assertSame($this->allowedElements, $allowed_html_field->getValue());
    $this->saveNewTextFormat($page, $assert_session);

    $assert_session->pageTextContains('Added text format ckeditor5');
    $assert_session->pageTextContains('Text formats and editors');

    // Confirm the filter config was updated with the correct allowed tags.
    $this->assertSame($this->allowedElements, FilterFormat::load('ckeditor5')->filters('filter_html')->getConfiguration()['settings']['allowed_html']);

    $page->find('css', '[data-drupal-selector="edit-formats-ckeditor5"]')->clickLink('Configure');
    $assert_session->assertWaitOnAjaxRequest();

    // Add the block quote plugin to the CKEditor 5 toolbar.
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-blockQuote'));
    $this->triggerKeyUp('.ckeditor5-toolbar-item-blockQuote', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();

    $allowed_with_blockquote = $this->allowedElements . ' <blockquote cite>';
    $assert_session->fieldExists('filters[filter_html][settings][allowed_html]');
    $assert_session->fieldValueEquals('filters[filter_html][settings][allowed_html]', $allowed_with_blockquote);

    $page->pressButton('Save configuration');
    $assert_session->pageTextContains('The text format ckeditor5 has been updated.');

    // Flush caches so the updated config can be checked.
    drupal_flush_all_caches();

    // Confirm that the tags required by the newly-added plugins were correctly
    // saved.
    $this->assertSame($allowed_with_blockquote, FilterFormat::load('ckeditor5')->filters('filter_html')->getConfiguration()['settings']['allowed_html']);

    $page->find('css', '[data-drupal-selector="edit-formats-ckeditor5"]')->clickLink('Configure');

    // And for good measure, confirm the correct tags are in the form field when
    // returning to the form.
    $assert_session->fieldValueEquals('filters[filter_html][settings][allowed_html]', $allowed_with_blockquote);
  }

  /**
   * Test that <drupal-media> is added to allowed tags when media embed enabled.
   */
  public function testMediaElementAllowedTags() {
    $page = $this->getSession()->getPage();
    $assert_session = $this->assertSession();

    $this->createNewTextFormat($page, $assert_session);

    // Allowed HTML field is readonly and its wrapper has a form-disabled class.
    $this->assertNotEmpty($assert_session->waitForElement('css', '.js-form-item-filters-filter-html-settings-allowed-html.form-disabled'));
    $allowed_html_field = $assert_session->fieldExists('filters[filter_html][settings][allowed_html]');
    $this->assertTrue($allowed_html_field->hasAttribute('readonly'));

    // Allowed tags are currently the default, with no <drupal-media>.
    $this->assertEquals($this->allowedElements, $allowed_html_field->getValue());

    // Enable media embed.
    $this->assertTrue($page->hasUncheckedField('filters[media_embed][status]'));
    $page->checkField('filters[media_embed][status]');
    $assert_session->assertWaitOnAjaxRequest();
    $assert_session->pageTextContains('Media types selectable in the Media Library');

    $allowed_with_media = $this->allowedElements . ' ' . $this->mediaElement;
    $assert_session->pageTextContains('Media types selectable in the Media Library');
    $assert_session->fieldValueEquals('filters[filter_html][settings][allowed_html]', $allowed_with_media);
    $this->saveNewTextFormat($page, $assert_session);
    $assert_session->pageTextContains('Added text format ckeditor5.');

    // Confirm <drupal-media> was added to allowed tags on save, as a result of
    // enabling the media embed filter.
    $this->assertSame($allowed_with_media, FilterFormat::load('ckeditor5')->filters('filter_html')->getConfiguration()['settings']['allowed_html']);

    $page->find('css', '[data-drupal-selector="edit-formats-ckeditor5"]')->clickLink('Configure');

    // Confirm that <drupal-media> is now included in the "Allowed tags" form
    // field.
    $assert_session->fieldValueEquals('filters[filter_html][settings][allowed_html]', $allowed_with_media);

    // Disable media embed.
    $this->assertTrue($page->hasCheckedField('filters[media_embed][status]'));
    $page->uncheckField('filters[media_embed][status]');
    $assert_session->assertWaitOnAjaxRequest();

    // Confirm allowed tags no longer has <drupal-media>.
    $assert_session->fieldValueEquals('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 11. Fields using CKEditor 5 will still be editable but without the benefits of CKEditor.';
    $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.
   */
  public function testFullHtml() {
    FilterFormat::create(
      Yaml::parseFile('core/profiles/standard/config/install/filter.format.full_html.yml')
    )->save();
    FilterFormat::create(
      Yaml::parseFile('core/profiles/standard/config/install/filter.format.basic_html.yml')
    )->save();

    $page = $this->getSession()->getPage();
    $assert_session = $this->assertSession();

    // Add a node with text rendered via the Plain Text format.
    $this->drupalGet('node/add');
    $page->fillField('title[0][value]', 'My test content');
    $page->fillField('body[0][value]', '<p><a style="color:red;" foo="bar" hreflang="en" href="https://example.com"><abbr title="National Aeronautics and Space Administration">NASA</abbr> is an acronym.</a></p>');
    $page->pressButton('Save');

    // Configure Full HTML text format to use CKEditor 5.
    $this->drupalGet('admin/config/content/formats/manage/full_html');
    $page->checkField('roles[authenticated]');
    $page->selectFieldOption('editor[editor]', 'ckeditor5');
    $assert_session->assertWaitOnAjaxRequest();
    $page->pressButton('Save configuration');
    $this->assertTrue($assert_session->waitForText('The text format Full HTML has been updated.'));

    // Change the node's text format to Full HTML.
    $this->drupalGet('node/1/edit');
    $page->selectFieldOption('body[0][format]', 'full_html');
    $this->assertNotEmpty($assert_session->waitForText('Change text format?'));
    $page->pressButton('Continue');

    // Ensure the editor is loaded and ensure that arbitrary markup is retained.
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ck-editor'));
    $page->pressButton('Save');

    $assert_session->responseContains('<p><a style="color:red;" href="https://example.com" hreflang="en" foo="bar"><abbr title="National Aeronautics and Space Administration">NASA</abbr> is an acronym.</a></p>');

    // Ensure attributes are retained after enabling link plugin.
    $this->drupalGet('admin/config/content/formats/manage/full_html');
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-link'));
    $this->triggerKeyUp('.ckeditor5-toolbar-item-link', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();
    $page->pressButton('Save configuration');

    $this->drupalGet('node/1/edit');
    $page->pressButton('Save');

    $assert_session->responseContains('<p><a style="color:red;" href="https://example.com" hreflang="en" foo="bar"><abbr title="National Aeronautics and Space Administration">NASA</abbr> is an acronym.</a></p>');

    // Configure Basic HTML text format to use CKE5 and enable the link plugin.
    $this->drupalGet('admin/config/content/formats/manage/basic_html');
    $page->checkField('roles[authenticated]');
    $page->selectFieldOption('editor[editor]', 'ckeditor5');
    $assert_session->assertWaitOnAjaxRequest();
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-link'));
    $this->triggerKeyUp('.ckeditor5-toolbar-item-link', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();
    $page->pressButton('Save configuration');
    $this->assertTrue($assert_session->waitForText('The text format Basic HTML has been updated.'));

    // Change the node's text format to Basic HTML.
    $this->drupalGet('node/1/edit');
    $page->selectFieldOption('body[0][format]', 'basic_html');
    $this->assertNotEmpty($assert_session->waitForText('Change text format?'));
    $page->pressButton('Continue');
    $assert_session->assertWaitOnAjaxRequest();
    $page->pressButton('Save');

    // The `style` and foo` attributes should have been removed, as should the
    // `<abbr>` tag.
    $assert_session->responseContains('<p><a href="https://example.com" hreflang="en">NASA is an acronym.</a></p>');
  }

  /**
   * Ensures that additional attributes are retained.
   */
  public function testAdditionalAttributes() {
    $page = $this->getSession()->getPage();
    $assert_session = $this->assertSession();

    // Add a node with text rendered via the Plain Text format.
    // TRICKY: <blockquote cite hreflang> does not make sense; this is only to
    // be able to verify that CKEditor 5's GHS is configured correctly to only
    // allow these additional attributes on the appropriate tags.
    $this->drupalGet('node/add');
    $page->fillField('title[0][value]', 'My test content');
    $page->fillField('body[0][value]', '<blockquote cite="https://www.drupal.org/association" hreflang="en"><p>The Drupal Association is the non-profit organization focused on accelerating <a href="http://drupal.org" hreflang="en">Drupal</a>, fostering the growth of the Drupal community, and supporting the project’s vision to create a safe, secure, and open web for everyone.</p></blockquote><img src="/sites/default/files/picture.jpg" width="10" height="20">');
    $page->pressButton('Save');

    $this->createNewTextFormat($page, $assert_session);
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-blockQuote'));
    $this->triggerKeyUp('.ckeditor5-toolbar-item-blockQuote', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-link'));
    $this->triggerKeyUp('.ckeditor5-toolbar-item-link', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-uploadImage'));
    $this->triggerKeyUp('.ckeditor5-toolbar-item-uploadImage', 'ArrowDown');
    $assert_session->assertWaitOnAjaxRequest();
    $page->clickLink('Image Upload');
    $page->checkField('editor[settings][plugins][ckeditor5.imageUpload][image_upload][status]');
    $assert_session->assertWaitOnAjaxRequest();
    $this->saveNewTextFormat($page, $assert_session);

    $this->drupalGet('node/1/edit');
    $page->selectFieldOption('body[0][format]', 'ckeditor5');
    $this->assertNotEmpty($assert_session->waitForText('Change text format?'));
    $page->pressButton('Continue');
    $assert_session->assertWaitOnAjaxRequest();
    $page->pressButton('Save');

    // TRICKY: note how the `hreflang` attribute was stripped from <blockquote>.
    $expected_markup = '<blockquote cite="https://www.drupal.org/association"><p>The Drupal Association is the non-profit organization focused on accelerating <a href="http://drupal.org" hreflang="en">Drupal</a>, fostering the growth of the Drupal community, and supporting the project’s vision to create a safe, secure, and open web for everyone.</p></blockquote>';
    $this->assertSame($expected_markup . '<img src="/sites/default/files/picture.jpg" width="10" height="20">', Node::load(1)->get('body')->value);
    $assert_session->responseContains($expected_markup);

    // img is checked separately because DrupalCI is rendering the img with
    // XHTML syntax.
    $assert_session->elementExists('xpath', '//img[@src="/sites/default/files/picture.jpg" and @width="10" and @height="20"]');
  }

}