Unverified Commit 6c0fe615 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3238257 by hooroomoo, Wim Leers: Fragment link pointing to <textarea>... 

Issue #3238257 by hooroomoo, Wim Leers: Fragment link pointing to <textarea> should be redirected to CKEditor 5 instance when CKEditor 5 replaced that textarea

(cherry picked from commit 365cb3aa)
parent d672dfa5

core/modules/ckeditor5/js/ckeditor5.es6.js

+23 −0
Original line number Diff line number Diff line
@@ -534,6 +534,29 @@ 
    },

  };



  // Redirect on hash change when the original hash has an associated CKEditor 5.

  function redirectTextareaFragmentToCKEditor5Instance() {

    const hash = window.location.hash.substr(1);

    const element = document.getElementById(hash);

    if (element) {

      const editorID = getElementId(element);

      const editor = Drupal.CKEditor5Instances.get(editorID);

      if (editor) {

        // Give the CKEditor 5 instance an ID.

        editor.sourceElement.nextElementSibling.setAttribute(

          'id',

          `cke_${hash}`,

        );

        window.location.replace(`#cke_${hash}`);

      }

    }

  }



  $(window).on(

    'hashchange.ckeditor',

    redirectTextareaFragmentToCKEditor5Instance,

  );



  // Respond to new dialogs that are opened by CKEditor, closing the AJAX loader.

  $(window).on('dialog:beforecreate', () => {

    $('.ckeditor5-dialog-loading').animate(

core/modules/ckeditor5/js/ckeditor5.js

+17 −0
Original line number Diff line number Diff line
@@ -328,6 +328,23 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len 
      Drupal.ckeditor5.saveCallback = saveCallback;

    }

  };



  function redirectTextareaFragmentToCKEditor5Instance() {

    var hash = window.location.hash.substr(1);

    var element = document.getElementById(hash);



    if (element) {

      var editorID = getElementId(element);

      var editor = Drupal.CKEditor5Instances.get(editorID);



      if (editor) {

        editor.sourceElement.nextElementSibling.setAttribute('id', "cke_".concat(hash));

        window.location.replace("#cke_".concat(hash));

      }

    }

  }



  $(window).on('hashchange.ckeditor', redirectTextareaFragmentToCKEditor5Instance);

  $(window).on('dialog:beforecreate', function () {

    $('.ckeditor5-dialog-loading').animate({

      top: '-40px'

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

0 → 100644
+124 −0
Original line number Diff line number Diff line 
<?php



namespace Drupal\Tests\ckeditor5\FunctionalJavascript;



use Drupal\Core\Entity\Entity\EntityFormDisplay;

use Drupal\editor\Entity\Editor;

use Drupal\field\Entity\FieldConfig;

use Drupal\field\Entity\FieldStorageConfig;

use Drupal\filter\Entity\FilterFormat;

use Drupal\FunctionalJavascriptTests\WebDriverTestBase;

use Drupal\node\Entity\NodeType;

use Drupal\Tests\TestFileCreationTrait;

use Drupal\user\RoleInterface;



/**

 * Tests that the fragment link points to CKEditor 5.

 *

 * @group ckeditor5

 * @internal

 */

class CKEditor5FragmentLinkTest extends WebDriverTestBase {



  use TestFileCreationTrait;



  /**

   * {@inheritdoc}

   */

  protected $defaultTheme = 'stark';



  /**

   * {@inheritdoc}

   */

  protected static $modules = ['node', 'ckeditor5'];



  /**

   * {@inheritdoc}

   */

  protected function setUp(): void {

    parent::setUp();



    // Create a text format and associate CKEditor 5.

    FilterFormat::create([

      'format' => 'ckeditor5',

      'name' => 'CKEditor 5 with image upload',

      'roles' => [RoleInterface::AUTHENTICATED_ID],

    ])->save();

    Editor::create([

      'format' => 'ckeditor5',

      'editor' => 'ckeditor5',

    ])->save();



    // Create a node type for testing.

    NodeType::create(['type' => 'page', 'name' => 'page'])->save();



    $field_storage = FieldStorageConfig::loadByName('node', 'body');



    // Create a body field instance for the 'page' node type.

    FieldConfig::create([

      'field_storage' => $field_storage,

      'bundle' => 'page',

      'label' => 'Body',

      'settings' => ['display_summary' => TRUE],

      'required' => TRUE,

    ])->save();



    // Assign widget settings for the 'default' form mode.

    EntityFormDisplay::create([

      'targetEntityType' => 'node',

      'bundle' => 'page',

      'mode' => 'default',

      'status' => TRUE,

    ])->setComponent('body', ['type' => 'text_textarea_with_summary'])

      ->save();



    $this->account = $this->drupalCreateUser([

      'administer nodes',

      'create page content',

    ]);

    $this->drupalLogin($this->account);

  }



  /**

   * Tests if the fragment link to a textarea works with CKEditor 5 enabled.

   */

  public function testFragmentLink() {

    $session = $this->getSession();

    $web_assert = $this->assertSession();

    $ckeditor_class = '.ck-editor';

    $ckeditor_id = '#cke_edit-body-0-value';



    $this->drupalGet('node/add/page');



    $session->getPage();



    // Add a bottom margin to the title field to be sure the body field is not

    // visible.

    $session->executeScript("document.getElementById('edit-title-0-value').style.marginBottom = window.innerHeight*2 +'px';");



    $this->assertSession()->waitForElementVisible('css', $ckeditor_id);

    // Check that the CKEditor5-enabled body field is currently not visible in

    // the viewport.

    $web_assert->assertNotVisibleInViewport('css', $ckeditor_class, 'topLeft', 'CKEditor5-enabled body field is visible.');



    $before_url = $session->getCurrentUrl();



    // Trigger a hash change with as target the hidden textarea.

    $session->executeScript("location.hash = '#edit-body-0-value';");



    // Check that the CKEditor5-enabled body field is visible in the viewport.

    // The hash change adds an ID to the CKEditor 5 instance so check its visibility using the ID now.

    $web_assert->assertVisibleInViewport('css', $ckeditor_id, 'topLeft', 'CKEditor5-enabled body field is not visible.');



    // Use JavaScript to go back in the history instead of

    // \Behat\Mink\Session::back() because that function doesn't work after a

    // hash change.

    $session->executeScript("history.back();");



    $after_url = $session->getCurrentUrl();



    // Check that going back in the history worked.

    self::assertEquals($before_url, $after_url, 'History back works.');

  }



}

core/modules/inline_form_errors/tests/src/FunctionalJavascript/FormErrorHandlerCKEditor5Test.php

0 → 100644
+120 −0
Original line number Diff line number Diff line 
<?php



namespace Drupal\Tests\inline_form_errors\FunctionalJavascript;



use Drupal\Core\Entity\Entity\EntityFormDisplay;

use Drupal\editor\Entity\Editor;

use Drupal\field\Entity\FieldConfig;

use Drupal\field\Entity\FieldStorageConfig;

use Drupal\filter\Entity\FilterFormat;

use Drupal\FunctionalJavascriptTests\WebDriverTestBase;

use Drupal\node\Entity\NodeType;

use Drupal\user\RoleInterface;



/**

 * Tests the inline errors fragment link to a CKEditor5-enabled textarea.

 *

 * @group ckeditor5

 */

class FormErrorHandlerCKEditor5Test extends WebDriverTestBase {



  /**

   * {@inheritdoc}

   */

  protected static $modules = [

    'node',

    'ckeditor5',

    'inline_form_errors',

  ];



  /**

   * {@inheritdoc}

   */

  protected $defaultTheme = 'stark';



  /**

   * {@inheritdoc}

   */

  protected function setUp(): void {

    parent::setUp();



    // Create a text format and associate CKEditor 5.

    FilterFormat::create([

      'format' => 'ckeditor5',

      'name' => 'CKEditor 5 with image upload',

      'roles' => [RoleInterface::AUTHENTICATED_ID],

    ])->save();

    Editor::create([

      'format' => 'ckeditor5',

      'editor' => 'ckeditor5',

    ])->save();



    // Create a node type for testing.

    NodeType::create(['type' => 'page', 'name' => 'page'])->save();



    $field_storage = FieldStorageConfig::loadByName('node', 'body');



    // Create a body field instance for the 'page' node type.

    FieldConfig::create([

      'field_storage' => $field_storage,

      'bundle' => 'page',

      'label' => 'Body',

      'settings' => ['display_summary' => TRUE],

      'required' => TRUE,

    ])->save();



    // Assign widget settings for the 'default' form mode.

    EntityFormDisplay::create([

      'targetEntityType' => 'node',

      'bundle' => 'page',

      'mode' => 'default',

      'status' => TRUE,

    ])->setComponent('body', ['type' => 'text_textarea_with_summary'])

      ->save();



    $account = $this->drupalCreateUser([

      'administer nodes',

      'create page content',

    ]);

    $this->drupalLogin($account);

  }



  /**

   * Tests if the fragment link to a textarea works with CKEditor 5 enabled.

   */

  public function testFragmentLink() {

    $session = $this->getSession();

    $web_assert = $this->assertSession();

    $ckeditor_class = '.ck-editor';

    $ckeditor_id = '#cke_edit-body-0-value';



    $this->drupalGet('node/add/page');



    // Only enter a title in the node add form and leave the body field empty.

    $edit = ['edit-title-0-value' => 'Test inline form error with CKEditor 5'];



    $this->submitForm($edit, 'Save');



    $this->assertSession()->waitForElement('css', '#cke_edit-body-0-value');

    // Add a bottom margin to the title field to be sure the body field is not

    // visible.

    $session->executeScript("document.getElementById('edit-title-0-value').style.marginBottom = window.innerHeight*2 + 'px';");



    // Check that the CKEditor5-enabled body field is currently not visible in

    // the viewport.

    $web_assert->assertNotVisibleInViewport('css', $ckeditor_class, 'topLeft', 'CKEditor5-enabled body field is not visible.');



    // Check if we can find the error fragment link within the errors summary

    // message.



    $errors_link = $this->assertSession()->waitForElementVisible('css', 'a[href$="#edit-body-0-value"]');

    $this->assertNotEmpty($errors_link, 'Error fragment link is visible.');



    $errors_link->click();



    // Check that the CKEditor5-enabled body field is visible in the viewport.

    // The hash change adds an ID to the CKEditor 5 instance so check its visibility using the ID now.

    $web_assert->assertVisibleInViewport('css', $ckeditor_id, 'topLeft', 'CKEditor5-enabled body field is visible.');

  }



}