From 97cb7607efebb28ebc16592eacdbb7a894730158 Mon Sep 17 00:00:00 2001
From: quicksketch <nate@quicksketch.org>
Date: Thu, 5 Dec 2024 20:26:46 -0800
Subject: [PATCH] Issue #22: Add support for CKEditor 5.

---
 insert.js | 69 ++++++++++++++++++++++++++-----------------------------
 1 file changed, 32 insertions(+), 37 deletions(-)

diff --git a/insert.js b/insert.js
index 5eb56e1..dc5ba91 100644
--- a/insert.js
+++ b/insert.js
@@ -20,6 +20,29 @@ Backdrop.behaviors.insert.attach = function(context) {
   // Add the click handler to the insert button.
   $('.insert-button:not(.insert-processed)', context).addClass('insert-processed').click(insert);
 
+  // CKEditor 5 does not keep track of the last active editor.
+  // See https://github.com/backdrop/backdrop-issues/issues/6770
+  // Keep track of the last-focused CKEditor 5 instance.
+  if (typeof(insertCKEditor) === 'undefined') {
+    insertCKEditor = false;
+  }
+  if (typeof(Backdrop.ckeditor5) !== 'undefined') {
+    // We need to wait until the CKEditor instance is created. A basic timeout
+    // is used here, but it's not guaranteed the instance will exist yet.
+    window.setTimeout(function() {
+      Backdrop.ckeditor5.instances.forEach(function (editor, editorId) {
+        if (!editor.insertEnabled) {
+          editor.insertEnabled = true;
+          editor.editing.view.document.on('change:isFocused', function (evt, data, isFocused) {
+            if (isFocused) {
+              insertCKEditor = editor;
+            }
+          });
+        }
+      });
+    }, 2000);
+  }
+
   function insertSetActive() {
     insertTextarea = this;
     this.insertHasFocus = true;
@@ -129,44 +152,16 @@ Backdrop.insert = {
       Backdrop.insert.activateTabPane(editorElement);
       tinyMCE.activeEditor.execCommand('mceInsertContent', false, content);
     }
-    // WYSIWYG support, should work in all editors if available.
-    else if (Backdrop.wysiwyg && Backdrop.wysiwyg.activeId) {
-      editorElement = document.getElementById(Backdrop.wysiwyg.activeId);
-      Backdrop.insert.activateTabPane(editorElement);
-      Backdrop.wysiwyg.instances[Backdrop.wysiwyg.activeId].insert(content)
-    }
-    // FCKeditor module support.
-    else if (typeof(FCKeditorAPI) != 'undefined' && typeof(fckActiveId) != 'undefined') {
-      editorElement = document.getElementById(fckActiveId);
-      Backdrop.insert.activateTabPane(editorElement);
-      FCKeditorAPI.Instances[fckActiveId].InsertHtml(content);
-    }
-    // Direct FCKeditor support (only body field supported).
-    else if (typeof(FCKeditorAPI) != 'undefined') {
-      // Try inserting into the body.
-      if (FCKeditorAPI.Instances[insertTextarea.id]) {
-        editorElement = insertTextarea;
-        Backdrop.insert.activateTabPane(editorElement);
-        FCKeditorAPI.Instances[insertTextarea.id].InsertHtml(content);
-      }
-      // Try inserting into the first instance we find (may occur with very
-      // old versions of FCKeditor).
-      else {
-        for (var n in FCKeditorAPI.Instances) {
-          editorElement = document.getElementById(n);
-          Backdrop.insert.activateTabPane(editorElement);
-          FCKeditorAPI.Instances[n].InsertHtml(content);
-          break;
-        }
-      }
-    }
-    // CKeditor module support.
-    else if (typeof(CKEDITOR) != 'undefined' && typeof(Backdrop.ckeditorActiveId) != 'undefined') {
-      editorElement = document.getElementById(Backdrop.ckeditorActiveId);
-      Backdrop.insert.activateTabPane(editorElement);
-      CKEDITOR.instances[Backdrop.ckeditorActiveId].insertHtml(content);
+    // CKEditor 5 module support.
+    // See https://ckeditor.com/docs/ckeditor5/latest/framework/how-tos.html#how-to-insert-some-content-into-the-editor
+    else if (insertCKEditor && insertCKEditor.sourceElement) {
+      Backdrop.insert.activateTabPane(insertCKEditor.sourceElement);
+      var insertPosition = insertCKEditor.model.document.selection.getFirstPosition();
+      var viewFragment = insertCKEditor.data.processor.toView(content);
+      var modelFragment = insertCKEditor.data.toModel(viewFragment);
+      insertCKEditor.model.insertContent(modelFragment, insertPosition);
     }
-    // Direct CKeditor support (only body field supported).
+    // Direct CKEditor 4 support (only body field supported).
     else if (typeof(CKEDITOR) != 'undefined' && CKEDITOR.instances[insertTextarea.id]) {
       editorElement = insertTextarea;
       Backdrop.insert.activateTabPane(editorElement);