Split text functionality for CKEditor 5

Created on 9 November 2023, 8 months ago
Updated 20 May 2024, about 1 month ago

Implementation of the split text (split paragraph) functionality for CKEditor5.
Based on the ckeditor5_plugin_starter_template, and as such has the same dependencies.

Uses a custom split function instead of SplitOperation, and the "Add in-between" button from the previous (8.x) version of this project instead of it's own modal.

As such it will need some adjustment to work with version 2.x, but the functionality itself is tested and working.

https://github.com/thunder/paragraphs_features/pull/80

โœจ Feature request
Status

Fixed

Version

2.0

Component

Code

Created by

๐Ÿ‡ฎ๐Ÿ‡นItaly Szabocs Pรกll

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

Comments & Activities

  • Issue created by @Szabocs Pรกll
  • Status changed to RTBC 8 months ago
  • ๐Ÿ‡ฆ๐Ÿ‡นAustria a.milkovsky UTC +2

    Looks good and works nice with CKEditor 5.

  • Status changed to Needs work 7 months ago
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany volkerk

    Tested this in drupal 10.1 standard profile and chrome:

    * Create paragraph type text with text, formatted long field
    * Add paragraphs field to article
    * Add Split Paragraph Button to Basic HTML Input filter

    On the create article (node/add/article) route I get js warning in console

    ckeditor5-dll.js?v=39.0.1:5 toolbarview-item-unavailable {item: 'splitParagraph'} 
    Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-toolbarview-item-unavailable
    

    Pasting some text into the text paragraph, position cursor somewhere in the text and clicking the
    split paragraph buttton in ck toolbar I get

    ckeditor5-dll.js?v=39.0.1:5 Uncaught TypeError: this.splitNode is not a function or its return value is not iterable
        at split_paragraph.js?s42b6u:1:1261
    

    Additionaly there is not build step config for rebuilding the js in build dir.
    Add .nvmrc to specify node version used.

  • Status changed to Needs review 7 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡นItaly Szabocs Pรกll

    The issues above should be fixed now, also added an extra README for CKEditor5.
    Also it no longer uses the Add-in-between, but the add more modal (like did the previous version).

  • Status changed to Needs work 7 months ago
  • ๐Ÿ‡ฉ๐Ÿ‡ฐDenmark googletorp

    The patch at github seems to have a lot of issues.

    Trying to execute the button I get: Uncaught CKEditorError: t.closest(...).querySelector(...) is null

    When using same editor outside paragraphs you also get a similar error on load about querySelector which crashes editors if you have multiple on the same page. In general seems like checks are missing for the different selectors. Example

    document.querySelector('XX').something

    will cause JavaScript TypeError if XX is not present on the page, so you always need to check the output of querySelector and act accordingly if what you expected is not on the page.

  • ๐Ÿ‡ช๐Ÿ‡ธSpain dima.iluschenko Malaga

    Any updates there?

  • ๐Ÿ‡ฆ๐Ÿ‡นAustria a.milkovsky UTC +2

    @dima.iluschenko as a temporary solution, we have created a custom module and added the code from the PR there.
    The solution works for us.

  • ๐Ÿ‡ช๐Ÿ‡ธSpain foreveryo

    @a.milkovsky would mind to share the custom module? :-)

    I tried mergint the PR on my side but the button does not appear :-(

    Thanks!

  • ๐Ÿ‡ช๐Ÿ‡ธSpain foreveryo

    I managed to run it on my side but I had to make several changes mainly to the query selectors as for instance ".paragraphs-container" is not an standard css selector or at least is not existing in Gin theme. Which admin theme do you use?

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States greenSkin

    Pull request #76 was closed in favor of #80.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States greenSkin

    I'm looking for a compatible solution with Layout Paragraphs โ†’ . Pull request #80 does not seem to work with layout paragraphs.

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany volkerk

    @greenSkin Please add a follow-up for layout paragraphs support.

  • Status changed to RTBC 2 months ago
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany daniel.bosen

    I reviewed it on GitHub, the issues I found with the PR have been fixed. lgtm.

  • Status changed to Fixed 2 months ago
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany volkerk
    • volkerk โ†’ authored 34517160 on 2.x
      Issue #3400542 by Szabocs Pรกll, volkerk, a.milkovsky, googletorp, daniel...
  • ๐Ÿ‡ฆ๐Ÿ‡นAustria a.milkovsky UTC +2

    It is nice to have this feature back!
    Note: I would give a credit to Szabocs Pรกll for the initiative and the initial development.

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany volkerk
  • Status changed to Needs work 2 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States greenSkin

    Tested latest and still not working with Layout Paragraphs โ†’ widget. The button shows but is disabled. I'm still seeing use of .field--widget-paragraphs.

  • Status changed to Fixed 2 months ago
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany volkerk

    @greenSkin Please do not reopen fixed issues. Support of layout_paragraphs is a feature request.
    Please open a new issue.

  • Automatically closed - issue fixed for 2 weeks with no activity.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States capellic Austin, Texas

    Great to see this functionality returned! Thanks!!

Production build 0.69.0 2024