[DrupalHtmlEngine] CKEditor 5 saves content as single line HTML making revision diffing impossible

I can confirm this happens, and that it is annoying.

I found the same question on StackOverflow, but no answer yet: https://stackoverflow.com/questions/71733317/ckeditor5-html-output-forma...

There's also an official feature request about this: https://github.com/ckeditor/ckeditor5/issues/8668

One of the suggestions in the github issue was to use a 3rd party formatter.

I just realized that we could totally do this in our own DrupalHtmlEngine plugin 🤔

This very simplistic patch already improves

input

<p>
    Hello!
</p>
<ul>
    <li>
        1
    </li>
    <li>
        2
    </li>
</ul>
<p>
    … diffable HTML!
</p>

Output in HEAD

<p>Hello!</p><ul><li>1</li><li>2</li></ul><p>… diffable HTML!</p>

Output with patch

<p>Hello!
</p>
<ul><li>1
</li>
<li>2
</li>
</ul>
<p>… diffable HTML!
</p>

Clearly too naïve, more work needed. But this at least is a starting point :)

Patch:

diff --git a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalHtmlEngine/src/drupalhtmlbuilder.js b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalHtmlEngine/src/drupalhtmlbuilder.js
index 5e0321664c..136c369e91 100644
--- a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalHtmlEngine/src/drupalhtmlbuilder.js
+++ b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalHtmlEngine/src/drupalhtmlbuilder.js
@@ -64,6 +64,8 @@ export default class DrupalHtmlBuilder {
     } else if (node.nodeType === Node.COMMENT_NODE) {
       this._appendComment(node);
     }
+    // Make the stored HTML diffable.
+    this._append("\n");
   }
 
   /**

(followed by yarn --cwd ./core run build:ckeditor5)

Thanks for putting that together.

Might this be a better approach?

diff --git a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalHtmlEngine/src/drupalhtmlbuilder.js b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalHtmlEngine/src/drupalhtmlbuilder.js
index 5e0321664c..9f8f909154 100644
--- a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalHtmlEngine/src/drupalhtmlbuilder.js
+++ b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalHtmlEngine/src/drupalhtmlbuilder.js
@@ -87,6 +87,9 @@ export default class DrupalHtmlBuilder {
       this._append(nodeName);
       this._append('>');
     }
+
+    // Make the stored HTML diffable.
+    this._append("\n");
   }
 
   /**
@@ -156,6 +159,9 @@ export default class DrupalHtmlBuilder {
     this._append('<!--');
     this._append(node.textContent);
     this._append('-->');
+
+    // Make the stored HTML diffable.
+    this._append("\n");
   }
 
   /**

Sure! 😄

Maybe better still: leading whitespace, to show the tag nesting level? OTOH, if something gets wrapped or unwrapped in some tag, that would then cause many lines to change, versus #7 and #8 which would show that indeed the text inside tags did not change 🤔

I defer to all of you users of the Diff module! 😊

In Backdrop-land we ended up porting the code used by CKEditor's Source plugin. The exact output shown while in source mode is what I would expect to be saved to the field.

That port exists in Backdrop here: ckeditor5.formatter.js.

When the content is saved to the field, we run the formatter, like this:

      // Manually get the data from CKEditor.
      let newData = editor.getData();
      // Format the data with newlines/indentation.
      newData = Backdrop.ckeditor5.formatHtml(newData);
      // Destroying the editor updates the element.value. 
      editor.destroy();
      // Set the element.value again with the formatted string.
      element.value = newData;

I also considered/tried building the formatting into the HTML engine (we ported DrupalHtmlEngine into our module as well). But I ran into a different problem in that when using CKEditor's "Source" button, the internal formatter expects all the HTML to be on one line. If you run the formatter on already-formatted HTML, you end up with lots of issues like double-indented lines and extra new lines added when viewing the source within CKEditor.

Thanks so much for letting us know that, @quicksketch! 🙏😊

I know this is a long stretch, but … any chance you'd be interested in creating a merge request against Drupal core, to port this wonderful logic from Backdrop? 😄 (It's so cool to have contributions flowing in both directions! I hope you like what you've found in CKEditor 5 — I definitely missed working with you this time around: you were so instrumental in getting CKEditor 4 in Drupal core!)