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

Comments

Anonymous’s picture

Szabocs Páll created an issue. See original summary.

a.milkovsky’s picture

Status: Needs review » Reviewed & tested by the community

Looks good and works nice with CKEditor 5.

volkerk’s picture

Status: Reviewed & tested by the community » Needs work

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.

Anonymous’s picture

Status: Needs work » Needs review

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).

googletorp’s picture

Status: Needs review » Needs work

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.

Anonymous’s picture

dima.iluschenko’s picture

Any updates there?

a.milkovsky’s picture

@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.

foreveryo’s picture

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

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

Thanks!

foreveryo’s picture

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?

greenskin’s picture

Issue summary: View changes

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

greenskin’s picture

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

volkerk’s picture

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

daniel.bosen’s picture

Status: Needs work » Reviewed & tested by the community

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

volkerk’s picture

Status: Reviewed & tested by the community » Fixed

  • volkerk authored 34517160 on 2.x
    Issue #3400542 by Szabocs Páll, volkerk, a.milkovsky, googletorp, daniel...
a.milkovsky’s picture

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.

volkerk’s picture

greenskin’s picture

Status: Fixed » Needs work

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 whereas Layout Paragraphs widget has class . field--widget-layout-paragraphs.

volkerk’s picture

Status: Needs work » Fixed

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

Status: Fixed » Closed (fixed)

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

capellic’s picture

Great to see this functionality returned! Thanks!!