Add support for CKEditor5

Created on 15 June 2023, over 1 year ago

Problem/Motivation
Needs support for CKEditor5 to work with Drupal 10.

Remaining tasks
Implement a CKEditor5 plugin to generate the tooltip markup.

User interface changes
Provide a button for the CKEditor5 toolbar.

✨ Feature request
Status

Active

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States drupgirl

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @drupgirl
  • Assigned to Foxy-vikvik
  • @foxy-vikvik opened merge request.
  • First commit to issue fork.
  • πŸ‡¬πŸ‡§United Kingdom iancawthorne

    Just wondering where things stood with this issue? I've tried applying the patch with no success in seeing tippy working in ckeditor 5.

  • Status changed to Needs work 10 months ago
  • πŸ‡¬πŸ‡§United Kingdom Rob230

    There are a few things wrong with merge request 6. The first is that it doesn't even apply by composer, although I can't see why. Something wrong with the diff generated by drupalcode? It rejects the changes to .info.yml even though they are simple changes that could easily be made, and it also creates a b directory and puts loads of files into it, when these are files that should be created.

    If I checkout the merge request branch directly then I can get the changes, and it works for upgrading CKEditor and adding Tippy to the bar. But Tippy itself doesn't work. There is an error in tippy.js that tippy is undefined. I tried passing tippy in the closure but the code in tippy-bundle.umd.min.js actually depends on popperjs, which as far as I can tell doesn't exist.

    The dependency for ckeditor/tippyjs is on core/popperjs which doesn't exist because it was removed in Drupal 10. I tried installing and enabling the popperjs module, and replacing core/popperjs with a dependency on the popperjs Drupal module and updating the library dependency. This resolved the console errors, but tippy still doesn't work.

    When you select some text and choose the tippy toolbar item, it shows the dialog with text and tooltip options, both blank. Entering something in the tooltip box causes an error in ckeditor5-dll.js:5:597480 - Uncaught CKEditorError: view-writer-invalid-position-container. The source gets updated with this:

    <tippy class="tippy-tooltip-text" data-tippy-content="[object Object]">

  • Status changed to Needs review 9 months ago
  • πŸ‡¬πŸ‡§United Kingdom stefank

    Hi all,

    Here is a different approach. Instead of using CKEditor5 ContextualBalloon, I have taken the step to use Drupal dialog, same as it was on CKeditor4. this way, the user has a textarea field and with combination with https://www.drupal.org/project/ckeditor_tippy/issues/3316775 ✨ Html support Needs review the user has full potential to create formatted tooltip, without needing the enter HTML tags manually.
    Feel free to clean up the code and make improvements. Let's keep the ball rolling.

  • πŸ‡¬πŸ‡§United Kingdom iancawthorne

    Which version of the module is the patch for @stefank? I can't get it to apply to 1.0.8.

  • πŸ‡¬πŸ‡§United Kingdom stefank

    @iancawthorne

    should be for 1.0.x. Applied cleanly while testing.

  • πŸ‡¬πŸ‡§United Kingdom iancawthorne

    Attached is what I'm seeing with the version set to 1.0.8 or 1.0.x with composer and using cweagans/composer-patches

  • πŸ‡¬πŸ‡§United Kingdom stefank

    Hi @iancawthorne,

    Attaching new patch, which should apply cleanly using composer.

  • πŸ‡¬πŸ‡§United Kingdom stefank

    Updated D10 core version support.

  • πŸ‡¬πŸ‡§United Kingdom iancawthorne

    Thanks @stefank. I can apply the patch from #11 and #12 cleanly.

    However, when I go to a configure url for a text format which uses a ckeditor, I get the following php error:

    Error: Call to undefined function Drupal\ckeditor_tippy\Plugin\CKEditorPlugin\drupal_get_path() in Drupal\ckeditor_tippy\Plugin\CKEditorPlugin\DrupalImageTippyTooltip->getFile() (line 53 of modules/contrib/ckeditor_tippy/src/Plugin/CKEditorPlugin/DrupalImageTippyTooltip.php).

  • πŸ‡¬πŸ‡§United Kingdom iancawthorne

    A further and more positive update... ignore #13 (unless you have problems)... I found out I needed to completely remove the previous ckeditor4 editor from any text formats. Then apply the patch. Then add ckeditor5 to the text formats.

    The patch applies cleanly and from my testing, I can successfully add, edit and use tooltips. +1 for this patch to be committed please.

  • πŸ‡·πŸ‡΄Romania badeadrian

    Attaching new patch for version 1.0.9.

  • πŸ‡·πŸ‡΄Romania badeadrian

    Patch 13 does not apply cleanly. The following patch should apply to version 1.0.9 without any issues.
    Sorry about that.

Production build 0.71.5 2024