diff --git a/js/build/split_paragraph.js b/js/build/split_paragraph.js index 1e71d32..703530d 100644 --- a/js/build/split_paragraph.js +++ b/js/build/split_paragraph.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.CKEditor5=e():(t.CKEditor5=t.CKEditor5||{},t.CKEditor5.split_paragraph=e())}(self,(function(){return function(){var t={"ckeditor5/src/core.js":function(t,e,r){t.exports=r("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/ui.js":function(t,e,r){t.exports=r("dll-reference CKEditor5.dll")("./src/ui.js")},"dll-reference CKEditor5.dll":function(t){"use strict";t.exports=CKEditor5.dll}},e={};function r(o){var a=e[o];if(void 0!==a)return a.exports;var s=e[o]={exports:{}};return t[o](s,s.exports,r),s.exports}r.d=function(t,e){for(var o in e)r.o(e,o)&&!r.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)};var o={};return function(){"use strict";r.d(o,{default:function(){return i}});var t=r("ckeditor5/src/core.js"),e=r("ckeditor5/src/ui.js");class a extends t.Command{execute(){const{model:t,sourceElement:e}=this.editor,r=Drupal.t("[Splitting in progress... ⌛]"),o=this.editor.getData();t.change((e=>{e.insertText(r,t.document.selection.getFirstPosition())}));const s=(new DOMParser).parseFromString(this.editor.getData(),"text/html").body,[i,n,d]=a.splitNode(s,r);if(!d||!i||!n)return void this.editor.setData(o);const l=e.closest(".paragraphs-subform").closest("tr"),p=l.querySelector("[data-paragraphs-split-text-type]").dataset.paragraphsSplitTextType,c=[...l.parentNode.children].filter((t=>t.querySelector(".paragraphs-actions"))).indexOf(l)+1;window._splitParagraph={data:{first:i.outerHTML,second:n.outerHTML},selector:e.dataset.drupalSelector};const u=e.closest(".field--widget-paragraphs").querySelector("input.paragraph-type-add-delta.modal");u.value=c;const h=u.getAttribute("data-drupal-selector").substr(5).replace(/-add-more-add-more-delta$/,"-"+p+"-add-more").replace(/_/g,"-");e.closest(".field--widget-paragraphs").querySelector('[data-drupal-selector^="'+h+'"]').dispatchEvent(new Event("mousedown"))}refresh(){this.isEnabled=!!this.editor.sourceElement.closest(".field--widget-paragraphs")?.querySelector("input.paragraph-type-add-delta.modal")}static splitNode(t,e){const r=t=>{if(t.nodeType===Node.TEXT_NODE){const r=t.data.indexOf(e);if(r>=0){const o=t.data.substring(0,r),a=t.data.substring(r+e.length);return[o?document.createTextNode(o):null,a?document.createTextNode(a):null,!0]}return[t,null,!1]}const o=[],a=[];let s=!1;if(t.childNodes.forEach((t=>{if(s)a.push(t);else{const[e,i,n]=r(t);s=n,e&&o.push(e),i&&a.push(i)}})),!s)return[t,null,!1];const i=t.cloneNode(),n=t.cloneNode();return o.forEach((t=>{i.appendChild(t)})),a.forEach((t=>{n.appendChild(t)})),[i.childNodes.length>0?i:null,n.childNodes.length>0?n:null,s]};return r(t)}}class s extends t.Plugin{init(){this.editor.ui.componentFactory.add("splitParagraph",(t=>{const r=this.editor.commands.get("splitParagraph"),o=new e.ButtonView(t);return o.set({label:this.editor.t("Split Paragraph"),icon:'\r\n\r\n\r\n\x3c!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --\x3e\r\n\r\n\t\r\n',tooltip:!0}),o.bind("isOn","isEnabled").to(r,"value","isEnabled"),this.listenTo(o,"execute",(()=>this.editor.execute("splitParagraph"))),o})),this.editor.commands.add("splitParagraph",new a(this.editor))}afterInit(){if(window._splitParagraph){if("string"==typeof window._splitParagraph.data.second){const t=this.editor.sourceElement.closest("tr"),e=t?.previousElementSibling;e&&e.querySelector(`[data-drupal-selector="${window._splitParagraph.selector}"]`)&&setTimeout((()=>{this.editor.setData(window._splitParagraph.data.second),window._splitParagraph.data.second=null}),0)}"string"==typeof window._splitParagraph.data.first&&this.editor.sourceElement.dataset.drupalSelector===window._splitParagraph.selector&&setTimeout((()=>{this.editor.setData(window._splitParagraph.data.first),window._splitParagraph.data.first=null}),0)}}}var i={SplitParagraph:s}}(),o=o.default}()})); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.CKEditor5=e():(t.CKEditor5=t.CKEditor5||{},t.CKEditor5.split_paragraph=e())}(self,(function(){return function(){var t={"ckeditor5/src/core.js":function(t,e,r){t.exports=r("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/ui.js":function(t,e,r){t.exports=r("dll-reference CKEditor5.dll")("./src/ui.js")},"dll-reference CKEditor5.dll":function(t){"use strict";t.exports=CKEditor5.dll}},e={};function r(o){var a=e[o];if(void 0!==a)return a.exports;var s=e[o]={exports:{}};return t[o](s,s.exports,r),s.exports}r.d=function(t,e){for(var o in e)r.o(e,o)&&!r.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)};var o={};return function(){"use strict";r.d(o,{default:function(){return i}});var t=r("ckeditor5/src/core.js"),e=r("ckeditor5/src/ui.js");class a extends t.Command{execute(){const{model:t,sourceElement:e}=this.editor,r=Drupal.t("[Splitting in progress... ⌛]"),o=this.editor.getData();t.change((e=>{e.insertText(r,t.document.selection.getFirstPosition())}));const s=(new DOMParser).parseFromString(this.editor.getData(),"text/html").body,[i,d,n]=a.splitNode(s,r);if(!n||!i||!d)return void this.editor.setData(o);const l=e.closest(".paragraphs-subform").closest("tr.draggable"),p=l.querySelector("[data-paragraphs-split-text-type]").dataset.paragraphsSplitTextType,c=[...l.parentNode.children].filter((t=>t.querySelector(".paragraphs-actions"))).indexOf(l)+1;window._splitParagraph={data:{first:i.outerHTML,second:d.outerHTML},selector:e.dataset.drupalSelector};const u=e.closest(".field--widget-paragraphs").querySelector("input.paragraph-type-add-delta.modal");u.value=c;const h=u.getAttribute("data-drupal-selector").substr(5).replace(/-add-more-add-more-delta$/,"-"+p+"-add-more").replace(/_/g,"-");e.closest(".field--widget-paragraphs").querySelector('[data-drupal-selector^="'+h+'"]').dispatchEvent(new Event("mousedown"))}refresh(){this.isEnabled=!!this.editor.sourceElement.closest(".field--widget-paragraphs")?.querySelector("input.paragraph-type-add-delta.modal")}static splitNode(t,e){const r=t=>{if(t.nodeType===Node.TEXT_NODE){const r=t.data.indexOf(e);if(r>=0){const o=t.data.substring(0,r),a=t.data.substring(r+e.length);return[o?document.createTextNode(o):null,a?document.createTextNode(a):null,!0]}return[t,null,!1]}const o=[],a=[];let s=!1;if(t.childNodes.forEach((t=>{if(s)a.push(t);else{const[e,i,d]=r(t);s=d,e&&o.push(e),i&&a.push(i)}})),!s)return[t,null,!1];const i=t.cloneNode(),d=t.cloneNode();return o.forEach((t=>{i.appendChild(t)})),a.forEach((t=>{d.appendChild(t)})),[i.childNodes.length>0?i:null,d.childNodes.length>0?d:null,s]};return r(t)}}class s extends t.Plugin{init(){this.editor.ui.componentFactory.add("splitParagraph",(t=>{const r=this.editor.commands.get("splitParagraph"),o=new e.ButtonView(t);return o.set({label:this.editor.t("Split Paragraph"),icon:'\r\n\r\n\r\n\x3c!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --\x3e\r\n\r\n\t\r\n',tooltip:!0}),o.bind("isOn","isEnabled").to(r,"value","isEnabled"),this.listenTo(o,"execute",(()=>this.editor.execute("splitParagraph"))),o})),this.editor.commands.add("splitParagraph",new a(this.editor))}afterInit(){if(window._splitParagraph){if(console.log(this.editor.sourceElement.dataset.drupalSelector),console.log(this.editor.sourceElement.dataset.drupalSelector.match(window._splitParagraph.selector.replace(/-[0-9]+-?/,"-[0-9]+-"))),"string"==typeof window._splitParagraph.data.second){const t=this.editor.sourceElement.closest("tr.draggable"),e=t?.previousElementSibling;e&&this.editor.sourceElement.dataset.drupalSelector.match(window._splitParagraph.selector.replace(/-[0-9]+-?/,"-[0-9]+-"))&&setTimeout((()=>{this.editor.setData(window._splitParagraph.data.second),window._splitParagraph.data.second=null}),0)}"string"==typeof window._splitParagraph.data.first&&this.editor.sourceElement.dataset.drupalSelector===window._splitParagraph.selector&&setTimeout((()=>{this.editor.setData(window._splitParagraph.data.first),window._splitParagraph.data.first=null}),0)}}}var i={SplitParagraph:s}}(),o=o.default}()})); \ No newline at end of file diff --git a/js/ckeditor5_plugins/split_paragraph/src/index.js b/js/ckeditor5_plugins/split_paragraph/src/index.js index 79f2988..8a4c98c 100644 --- a/js/ckeditor5_plugins/split_paragraph/src/index.js +++ b/js/ckeditor5_plugins/split_paragraph/src/index.js @@ -39,11 +39,14 @@ class SplitParagraph extends Plugin { afterInit() { // Set value of the new paragraph. if (window._splitParagraph) { + console.log(this.editor.sourceElement.dataset.drupalSelector); + console.log(this.editor.sourceElement.dataset.drupalSelector.match(window._splitParagraph.selector.replace(/-[0-9]+-?/, '-[0-9]+-'))); if (typeof window._splitParagraph.data.second === 'string') { - const paragraph = this.editor.sourceElement.closest('tr'); + const paragraph = this.editor.sourceElement.closest('tr.draggable'); + // this.editor.sourceElement. // closest('.field--widget-paragraphs').querySelector('tr'); const previousParagraph = paragraph?.previousElementSibling; - if (previousParagraph && previousParagraph.querySelector(`[data-drupal-selector="${window._splitParagraph.selector}"]`)) { + if (previousParagraph && this.editor.sourceElement.dataset.drupalSelector.match(window._splitParagraph.selector.replace(/-[0-9]+-?/, '-[0-9]+-'))) { // Defer to wait until init is complete. setTimeout(() => { this.editor.setData(window._splitParagraph.data.second); diff --git a/js/ckeditor5_plugins/split_paragraph/src/splitparagraphcommand.js b/js/ckeditor5_plugins/split_paragraph/src/splitparagraphcommand.js index 25e4f06..7156d63 100644 --- a/js/ckeditor5_plugins/split_paragraph/src/splitparagraphcommand.js +++ b/js/ckeditor5_plugins/split_paragraph/src/splitparagraphcommand.js @@ -25,7 +25,7 @@ export default class SplitParagraphCommand extends Command { } // Get paragraph type and position. - const paragraph = sourceElement.closest('.paragraphs-subform').closest('tr'); + const paragraph = sourceElement.closest('.paragraphs-subform').closest('tr.draggable'); const paragraphType = paragraph.querySelector('[data-paragraphs-split-text-type]').dataset.paragraphsSplitTextType; const paragraphDelta = [...paragraph.parentNode.children].filter(el => el.querySelector('.paragraphs-actions')).indexOf(paragraph) + 1; diff --git a/tests/src/FunctionalJavascript/ParagraphsFeaturesSplitTextTest.php b/tests/src/FunctionalJavascript/ParagraphsFeaturesSplitTextTest.php index 6fbe39a..235ee20 100644 --- a/tests/src/FunctionalJavascript/ParagraphsFeaturesSplitTextTest.php +++ b/tests/src/FunctionalJavascript/ParagraphsFeaturesSplitTextTest.php @@ -403,7 +403,6 @@ public function testSplitTextFeature() { $ck_editor_id_para_1_text_0 = $page->find('xpath', '(//*[@data-drupal-selector="edit-field-paragraphs-1"]//textarea)[1]')->getAttribute('data-ckeditor5-id'); $ck_editor_id_para_1_text_1 = $page->find('xpath', '(//*[@data-drupal-selector="edit-field-paragraphs-1"]//textarea)[2]')->getAttribute('data-ckeditor5-id'); $ck_editor_id_para_1_text_2 = $page->find('xpath', '(//*[@data-drupal-selector="edit-field-paragraphs-1"]//textarea)[3]')->getAttribute('data-ckeditor5-id'); - static::assertEquals( $paragraph_content_0_text_0, $driver->evaluateScript("Drupal.CKEditor5Instances.get('$ck_editor_id_para_0_text_0').getData();") @@ -417,15 +416,11 @@ public function testSplitTextFeature() { $driver->evaluateScript("Drupal.CKEditor5Instances.get('$ck_editor_id_para_0_text_2').getData();") ); static::assertEquals( - // @todo Fix me, order should be different. - // '', - $paragraph_content_1, + '', $driver->evaluateScript("Drupal.CKEditor5Instances.get('$ck_editor_id_para_1_text_0').getData();") ); static::assertEquals( - // Fix me, order should be different. - // $paragraph_content_1, - '', + $paragraph_content_1, $driver->evaluateScript("Drupal.CKEditor5Instances.get('$ck_editor_id_para_1_text_1').getData();") ); static::assertEquals(