View source
<?php
namespace Drupal\Tests\ckeditor5\FunctionalJavascript;
use Drupal\ckeditor5\Plugin\Editor\CKEditor5;
use Drupal\Core\Language\LanguageManager;
use Drupal\editor\Entity\Editor;
use Drupal\file\Entity\File;
use Drupal\filter\Entity\FilterFormat;
use Drupal\node\Entity\Node;
use Drupal\Tests\ckeditor5\Traits\CKEditor5TestTrait;
use Drupal\Tests\TestFileCreationTrait;
use Drupal\user\RoleInterface;
use Symfony\Component\Validator\ConstraintViolation;
class CKEditor5Test extends CKEditor5TestBase {
use TestFileCreationTrait;
use CKEditor5TestTrait;
protected static $modules = [
'media_library',
];
public function testExistingContent() {
$page = $this
->getSession()
->getPage();
$assert_session = $this
->assertSession();
$this
->drupalGet('node/add');
$page
->fillField('title[0][value]', 'My test content');
$page
->fillField('body[0][value]', '<p>This is test content</p>');
$page
->pressButton('Save');
$assert_session
->responseNotContains('<p>This is test content</p>');
$assert_session
->responseContains('<p>This is test content</p>');
$this
->addNewTextFormat($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');
$this
->assertNotEmpty($assert_session
->waitForElement('css', '.ck-editor'));
$page
->pressButton('Save');
$assert_session
->responseContains('<p>This is test content</p>');
$assert_session
->responseNotContains('<p>This is test content</p>');
}
public function testAttributeEncoding() {
$page = $this
->getSession()
->getPage();
$assert_session = $this
->assertSession();
FilterFormat::create([
'format' => 'ckeditor5',
'name' => 'CKEditor 5 with image upload',
'roles' => [
RoleInterface::AUTHENTICATED_ID,
],
])
->save();
Editor::create([
'format' => 'ckeditor5',
'editor' => 'ckeditor5',
'settings' => [
'toolbar' => [
'items' => [
'uploadImage',
],
],
'plugins' => [
'ckeditor5_imageResize' => [
'allow_resize' => FALSE,
],
],
],
'image_upload' => [
'status' => TRUE,
'scheme' => 'public',
'directory' => 'inline-images',
'max_size' => '',
],
])
->save();
$this
->assertSame([], array_map(function (ConstraintViolation $v) {
return (string) $v
->getMessage();
}, iterator_to_array(CKEditor5::validatePair(Editor::load('ckeditor5'), FilterFormat::load('ckeditor5')))));
$this
->drupalGet('node/add');
$this
->waitForEditor();
$page
->fillField('title[0][value]', 'My test content');
$this
->click('.ck-content');
$this
->assertNotEmpty($image_upload_field = $page
->find('css', '.ck-file-dialog-button input[type="file"]'));
$image = $this
->getTestFiles('image')[0];
$image_upload_field
->attachFile($this->container
->get('file_system')
->realpath($image->uri));
$assert_session
->waitForElementVisible('css', '.ck-widget.image');
$this
->assertNotEmpty($assert_session
->waitForElementVisible('css', '.ck-balloon-panel .ck-text-alternative-form'));
$alt_override_input = $page
->find('css', '.ck-balloon-panel .ck-text-alternative-form input[type=text]');
$this
->assertSame('', $alt_override_input
->getValue());
$alt_override_input
->setValue('</em> Kittens & llamas are cute');
$this
->getBalloonButton('Save')
->click();
$page
->pressButton('Save');
$uploaded_image = File::load(1);
$image_uuid = $uploaded_image
->uuid();
$image_url = $this->container
->get('file_url_generator')
->generateString($uploaded_image
->getFileUri());
$this
->drupalGet('node/1');
$this
->assertNotEmpty($assert_session
->waitForElement('xpath', sprintf('//img[@alt="</em> Kittens & llamas are cute" and @data-entity-uuid="%s" and @data-entity-type="file"]', $image_uuid)));
$this
->assertEquals(sprintf('<img data-entity-uuid="%s" data-entity-type="file" src="%s" alt="</em> Kittens & llamas are cute">', $image_uuid, $image_url), Node::load(1)
->get('body')->value);
}
public function testHeadingsPlugin() {
$page = $this
->getSession()
->getPage();
$assert_session = $this
->assertSession();
$this
->addNewTextFormat($page, $assert_session);
$this
->drupalGet('admin/config/content/formats/manage/ckeditor5');
$this
->assertHtmlEsqueFieldValueEquals('filters[filter_html][settings][allowed_html]', '<br> <p> <h2> <h3> <h4> <h5> <h6> <strong> <em>');
$this
->drupalGet('node/add');
$this
->assertNotEmpty($assert_session
->waitForElement('css', '.ck-heading-dropdown button'));
$page
->find('css', '.ck-heading-dropdown button')
->click();
$headings_dropdown = $page
->findAll('css', '.ck-heading-dropdown li .ck-button__label');
$available_headings = [];
foreach ($headings_dropdown as $item) {
$available_headings[] = $item
->getText();
}
$this
->assertSame([
'Paragraph',
'Heading 2',
'Heading 3',
'Heading 4',
'Heading 5',
'Heading 6',
], $available_headings);
$this
->drupalGet('admin/config/content/formats/manage/ckeditor5');
$this
->assertTrue($page
->hasUncheckedField('editor[settings][plugins][ckeditor5_heading][enabled_headings][heading1]'));
$page
->checkField('editor[settings][plugins][ckeditor5_heading][enabled_headings][heading1]');
$assert_session
->assertWaitOnAjaxRequest();
$this
->assertTrue($page
->hasCheckedField('editor[settings][plugins][ckeditor5_heading][enabled_headings][heading1]'));
$this
->assertTrue($page
->hasCheckedField('editor[settings][plugins][ckeditor5_heading][enabled_headings][heading2]'));
$page
->uncheckField('editor[settings][plugins][ckeditor5_heading][enabled_headings][heading2]');
$assert_session
->assertWaitOnAjaxRequest();
$this
->assertTrue($page
->hasUncheckedField('editor[settings][plugins][ckeditor5_heading][enabled_headings][heading2]'));
$this
->assertTrue($page
->hasCheckedField('editor[settings][plugins][ckeditor5_heading][enabled_headings][heading4]'));
$page
->uncheckField('editor[settings][plugins][ckeditor5_heading][enabled_headings][heading4]');
$assert_session
->assertWaitOnAjaxRequest();
$this
->assertTrue($page
->hasUncheckedField('editor[settings][plugins][ckeditor5_heading][enabled_headings][heading4]'));
$this
->assertHtmlEsqueFieldValueEquals('filters[filter_html][settings][allowed_html]', '<br> <p> <h1> <h3> <h5> <h6> <strong> <em>');
$this
->assertTrue($page
->hasUncheckedField('editor[settings][plugins][ckeditor5_heading][enabled_headings][heading4]'));
$page
->pressButton('Save configuration');
$this
->drupalGet('node/add');
$this
->assertNotEmpty($assert_session
->waitForElement('css', '.ck-heading-dropdown button'));
$page
->find('css', '.ck-heading-dropdown button')
->click();
$headings_dropdown = $page
->findAll('css', '.ck-heading-dropdown li .ck-button__label');
$available_headings = [];
foreach ($headings_dropdown as $item) {
$available_headings[] = $item
->getText();
}
$this
->assertSame([
'Paragraph',
'Heading 1',
'Heading 3',
'Heading 5',
'Heading 6',
], $available_headings);
}
public function testLanguageOfPartsPlugin() {
$page = $this
->getSession()
->getPage();
$assert_session = $this
->assertSession();
$this
->createNewTextFormat($page, $assert_session);
$this
->assertNotEmpty($assert_session
->waitForElement('css', '.ckeditor5-toolbar-item-textPartLanguage'));
$this
->triggerKeyUp('.ckeditor5-toolbar-item-textPartLanguage', 'ArrowDown');
$assert_session
->assertWaitOnAjaxRequest();
$assert_session
->waitForElement('css', '[role=alert][data-drupal-message-type="warning"]:contains("The Language plugin needs another plugin to create <span>, for it to be able to create the following attributes: <span lang dir>. Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.")');
$this
->assertNotEmpty($assert_session
->elementExists('css', '.ckeditor5-toolbar-item-sourceEditing'));
$this
->triggerKeyUp('.ckeditor5-toolbar-item-sourceEditing', 'ArrowDown');
$assert_session
->assertWaitOnAjaxRequest();
$page
->clickLink('Source editing');
$this
->assertNotNull($assert_session
->waitForElementVisible('css', '[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-sourceediting-allowed-tags"]'));
$javascript = <<<JS
const allowedTags = document.querySelector('[data-drupal-selector="edit-editor-settings-plugins-ckeditor5-sourceediting-allowed-tags"]');
allowedTags.value = '<span>';
allowedTags.dispatchEvent(new Event('input'));
JS;
$this
->getSession()
->executeScript($javascript);
$this
->triggerKeyUp('.ckeditor5-toolbar-item-undo', 'ArrowDown');
$assert_session
->assertWaitOnAjaxRequest();
$assert_session
->waitForElementRemoved('css', '[data-drupal-messages] [role="alert"]');
$languages = LanguageManager::getUnitedNationsLanguageList();
$this
->languageOfPartsPluginTestHelper($page, $assert_session, $languages, "un");
$this
->drupalGet('admin/config/content/formats/manage/ckeditor5');
$languages = LanguageManager::getStandardLanguageList();
$this
->languageOfPartsPluginTestHelper($page, $assert_session, $languages, "all");
}
public function languageOfPartsPluginTestHelper($page, $assert_session, $predefined_languages, $option) {
$this
->assertNotEmpty($assert_session
->waitForElement('css', 'a[href^="#edit-editor-settings-plugins-ckeditor5-language"]'));
$vertical_tab_link = $page
->find('xpath', "//ul[contains(@class, 'vertical-tabs__menu')]/li/a[starts-with(@href, '#edit-editor-settings-plugins-ckeditor5-language')]");
$vertical_tab_link
->click();
$page
->selectFieldOption('editor[settings][plugins][ckeditor5_language][language_list]', $option);
$assert_session
->assertWaitOnAjaxRequest();
$page
->pressButton('Save configuration');
$this
->drupalGet('node/add');
$this
->assertNotEmpty($assert_session
->waitForText('Choose language'));
$page
->find('css', '.ck-text-fragment-language-dropdown button')
->click();
$current_languages = $page
->findAll('css', '.ck-text-fragment-language-dropdown li .ck-button__label');
array_shift($current_languages);
$languages = [];
foreach ($current_languages as $item) {
$languages[] = $item
->getText();
}
$predefined_languages = array_column($predefined_languages, 0);
asort($predefined_languages);
$this
->assertSame(array_values($predefined_languages), $languages);
}
public function testActiveTabsMaintained() {
$page = $this
->getSession()
->getPage();
$assert_session = $this
->assertSession();
$this
->createNewTextFormat($page, $assert_session);
$assert_session
->assertWaitOnAjaxRequest();
$this
->assertNotEmpty($assert_session
->waitForElementVisible('css', 'a[href^="#edit-filters-filter-html-settings"]'));
$this
->assertTrue($page
->hasUncheckedField('filters[media_embed][status]'));
$page
->checkField('filters[media_embed][status]');
$assert_session
->assertWaitOnAjaxRequest();
$assert_session
->responseContains('Media types selectable in the Media Library');
$assert_session
->assertWaitOnAjaxRequest();
$this
->assertNotEmpty($assert_session
->waitForElement('css', '.ckeditor5-toolbar-item-uploadImage'));
$this
->triggerKeyUp('.ckeditor5-toolbar-item-uploadImage', 'ArrowDown');
$this
->assertNotEmpty($assert_session
->waitForElement('css', 'a[href^="#edit-editor-settings-plugins-ckeditor5-imageupload"]'));
$this
->assertNotEmpty($assert_session
->waitForElement('css', '.ckeditor5-toolbar-active .ckeditor5-toolbar-item-uploadImage'));
$assert_session
->assertWaitOnAjaxRequest();
$page
->clickLink('Image Upload');
$assert_session
->waitForText('Enable image uploads');
$this
->assertTrue($page
->hasUncheckedField('editor[settings][plugins][ckeditor5_imageUpload][status]'));
$page
->checkField('editor[settings][plugins][ckeditor5_imageUpload][status]');
$assert_session
->assertWaitOnAjaxRequest();
$this
->assertNotEmpty($assert_session
->waitForElement('css', '.ckeditor5-toolbar-button-heading'));
$this
->triggerKeyUp('.ckeditor5-toolbar-button-heading', 'ArrowDown');
$this
->assertNotEmpty($assert_session
->waitForElement('css', 'a[href^="#edit-editor-settings-plugins-ckeditor5-heading"]'));
$this
->assertNotEmpty($assert_session
->waitForElement('css', '.ckeditor5-toolbar-active .ckeditor5-toolbar-button-heading'));
$assert_session
->assertWaitOnAjaxRequest();
$page
->pressButton('Save configuration');
$assert_session
->pageTextContains('Added text format ckeditor5');
$this
->drupalGet('admin/config/content/formats/');
$this
->drupalGet('admin/config/content/formats/manage/ckeditor5');
$assert_session
->waitForElement('css', '.vertical-tabs__menu-item.is-selected');
$plugin_settings_vertical_tabs = $page
->findAll('css', '#plugin-settings-wrapper .vertical-tabs__menu-item');
$filter_settings = $page
->find('xpath', '//*[contains(@class, "js-form-type-vertical-tabs")]/label[contains(text(), "Filter settings")]/..');
$filter_settings_vertical_tabs = $filter_settings
->findAll('css', '.vertical-tabs__menu-item');
$this
->assertTrue($plugin_settings_vertical_tabs[0]
->hasClass('is-selected'), "Expected plugin tab 1 selected on initial build");
$this
->assertFalse($plugin_settings_vertical_tabs[1]
->hasClass('is-selected'), "Expected plugin tab 2 not selected on initial build");
$this
->assertFalse($filter_settings_vertical_tabs[0]
->hasClass('is-selected'), "Expected filter tab 1 not selected on initial build");
$this
->assertTrue($filter_settings_vertical_tabs[2]
->hasClass('is-selected'), "Expected (visible) filter tab 2 selected on initial build");
$plugin_settings_vertical_tabs[1]
->click();
$filter_settings_vertical_tabs[0]
->click();
$assert_session
->assertWaitOnAjaxRequest();
$this
->assertFalse($plugin_settings_vertical_tabs[0]
->hasClass('is-selected'), "Expected plugin tab 1 deselected after click");
$this
->assertTrue($plugin_settings_vertical_tabs[1]
->hasClass('is-selected'), "Expected plugin tab 2 selected after click");
$this
->assertTrue($filter_settings_vertical_tabs[0]
->hasClass('is-selected'), "Expected filter tab 1 selected after click");
$this
->assertFalse($filter_settings_vertical_tabs[2]
->hasClass('is-selected'), "Expected (visible) filter tab 2 deselected after click");
$this
->assertNotEmpty($assert_session
->waitForElement('css', '.ckeditor5-toolbar-item-blockQuote'));
$this
->triggerKeyUp('.ckeditor5-toolbar-item-blockQuote', 'ArrowDown');
$assert_session
->assertWaitOnAjaxRequest();
$this
->assertFalse($plugin_settings_vertical_tabs[0]
->hasClass('is-selected'), "Expected plugin tab 1 deselected after AJAX refresh");
$this
->assertTrue($plugin_settings_vertical_tabs[1]
->hasClass('is-selected'), "Expected plugin tab 2 selected after AJAX refresh");
$this
->assertTrue($filter_settings_vertical_tabs[0]
->hasClass('is-selected'), "Expected filter tab 1 selected after AJAX refresh");
$this
->assertFalse($filter_settings_vertical_tabs[1]
->hasClass('is-selected'), "Expected filter tab 2 deselected after AJAX refresh");
}
public function testEditorFileReferenceIntegration() {
$page = $this
->getSession()
->getPage();
$assert_session = $this
->assertSession();
$this
->createNewTextFormat($page, $assert_session);
$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][status]');
$assert_session
->assertWaitOnAjaxRequest();
$page
->checkField('filters[editor_file_reference][status]');
$assert_session
->assertWaitOnAjaxRequest();
$this
->saveNewTextFormat($page, $assert_session);
$this
->drupalGet('node/add');
$page
->fillField('title[0][value]', 'My test content');
$this
->click('.ck-content');
$this
->assertNotEmpty($image_upload_field = $page
->find('css', '.ck-file-dialog-button input[type="file"]'));
$image = $this
->getTestFiles('image')[0];
$image_upload_field
->attachFile($this->container
->get('file_system')
->realpath($image->uri));
$this
->assertNotEmpty($assert_session
->waitForElement('css', '.ck-content img[data-entity-uuid]'));
$this
->assertNotEmpty($assert_session
->waitForElementVisible('css', '.image.ck-widget > img'));
$this
->assertNotEmpty($assert_session
->waitForElementVisible('css', '.ck-balloon-panel .ck-text-alternative-form'));
$alt_override_input = $page
->find('css', '.ck-balloon-panel .ck-text-alternative-form input[type=text]');
$alt_override_input
->setValue('There is now alt text');
$this
->getBalloonButton('Save')
->click();
$page
->pressButton('Save');
$uploaded_image = File::load(1);
$image_url = $this->container
->get('file_url_generator')
->generateString($uploaded_image
->getFileUri());
$image_uuid = $uploaded_image
->uuid();
$assert_session
->elementExists('xpath', sprintf('//img[@src="%s" and @loading="lazy" and @width and @height and @data-entity-uuid="%s" and @data-entity-type="file"]', $image_url, $image_uuid));
$this
->assertEquals(sprintf('<img data-entity-uuid="%s" data-entity-type="file" src="%s" alt="There is now alt text">', $image_uuid, $image_url), Node::load(1)
->get('body')->value);
$this
->drupalGet('node/1/edit');
$this
->assertNotEmpty($assert_session
->waitForElement('css', '.ck-editor'));
$page
->pressButton('Save');
$assert_session
->elementExists('xpath', sprintf('//img[@src="%s" and @loading="lazy" and @width and @height and @data-entity-uuid="%s" and @data-entity-type="file"]', $image_url, $image_uuid));
}
public function testEmphasis() {
$page = $this
->getSession()
->getPage();
$assert_session = $this
->assertSession();
$this
->drupalGet('node/add');
$page
->fillField('title[0][value]', 'My test content');
$page
->fillField('body[0][value]', '<p>This is a <em>test!</em></p>');
$page
->pressButton('Save');
$this
->createNewTextFormat($page, $assert_session);
$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');
$this
->assertNotEmpty($assert_session
->waitForElement('css', '.ck-editor'));
$page
->pressButton('Save');
$assert_session
->responseContains('<p>This is a <em>test!</em></p>');
}
public function testListPlugin() {
FilterFormat::create([
'format' => 'test_format',
'name' => 'CKEditor 5 with list',
'roles' => [
RoleInterface::AUTHENTICATED_ID,
],
])
->save();
Editor::create([
'format' => 'test_format',
'editor' => 'ckeditor5',
'settings' => [
'toolbar' => [
'items' => [
'sourceEditing',
'numberedList',
],
],
'plugins' => [
'ckeditor5_list' => [
'reversed' => FALSE,
'startIndex' => FALSE,
],
'ckeditor5_sourceEditing' => [
'allowed_tags' => [],
],
],
],
])
->save();
$this
->assertSame([], array_map(function (ConstraintViolation $v) {
return (string) $v
->getMessage();
}, iterator_to_array(CKEditor5::validatePair(Editor::load('test_format'), FilterFormat::load('test_format')))));
$ordered_list_html = '<ol><li>apple</li><li>banana</li><li>cantaloupe</li></ol>';
$page = $this
->getSession()
->getPage();
$assert_session = $this
->assertSession();
$this
->drupalGet('node/add');
$page
->fillField('title[0][value]', 'My test content');
$this
->pressEditorButton('Source');
$source_text_area = $assert_session
->waitForElement('css', '.ck-source-editing-area textarea');
$source_text_area
->setValue($ordered_list_html);
$this
->pressEditorButton('Source');
$numbered_list_dropdown_selector = '.ck-splitbutton__arrow';
$assert_session
->elementNotExists('css', $numbered_list_dropdown_selector);
$page
->pressButton('Save');
$edit_url = $this
->getSession()
->getCurrentURL() . '/edit';
$this
->drupalGet($edit_url);
$this
->waitForEditor();
$editor = Editor::load('test_format');
$settings = $editor
->getSettings();
$settings['plugins']['ckeditor5_list']['reversed'] = TRUE;
$editor
->setSettings($settings);
$editor
->save();
$this
->getSession()
->reload();
$this
->waitForEditor();
$this
->click($numbered_list_dropdown_selector);
$reversed_order_button_selector = '.ck.ck-button.ck-numbered-list-properties__reversed-order';
$assert_session
->elementExists('css', $reversed_order_button_selector);
$assert_session
->elementTextEquals('css', $reversed_order_button_selector, 'Reversed order');
$start_index_element_selector = '.ck.ck-numbered-list-properties__start-index';
$assert_session
->elementNotExists('css', $start_index_element_selector);
$editor = Editor::load('test_format');
$settings = $editor
->getSettings();
$settings['plugins']['ckeditor5_list']['startIndex'] = TRUE;
$editor
->setSettings($settings);
$editor
->save();
$this
->getSession()
->reload();
$this
->waitForEditor();
$this
->click($numbered_list_dropdown_selector);
$assert_session
->elementExists('css', $reversed_order_button_selector);
$assert_session
->elementTextEquals('css', $reversed_order_button_selector, 'Reversed order');
$assert_session
->elementExists('css', $start_index_element_selector);
}
public function testFilterHtmlAllowedGlobalAttributes() : void {
$page = $this
->getSession()
->getPage();
$assert_session = $this
->assertSession();
$this
->drupalGet('node/add');
$page
->fillField('title[0][value]', 'Multilingual Hello World');
$page
->fillField('body[0][value]', '<p dir="ltr" lang="en">Hello World</p><p dir="rtl" lang="ar">مرحبا بالعالم</p>');
$page
->pressButton('Save');
$this
->createNewTextFormat($page, $assert_session);
$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');
$this
->waitForEditor();
$page
->pressButton('Save');
$assert_session
->responseContains('<p dir="ltr" lang="en" xml:lang="en">Hello World</p><p dir="rtl" lang="ar" xml:lang="ar">مرحبا بالعالم</p>');
}
}