From 99e405f80f4be5c3b6cc89afe4a1fd5c4c0cd385 Mon Sep 17 00:00:00 2001
From: Dan Brown <development@danb.me>
Date: Tue, 26 May 2026 12:58:48 +0100
Subject: [PATCH] Page Editor: Added contents click handling for TinyMCE editor

---
 resources/js/wysiwyg-tinymce/common-events.js |  7 +++++++
 resources/js/wysiwyg-tinymce/scrolling.js     | 17 +++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/resources/js/wysiwyg-tinymce/common-events.js b/resources/js/wysiwyg-tinymce/common-events.js
index d0a5acdc2..6f3d34f1f 100644
--- a/resources/js/wysiwyg-tinymce/common-events.js
+++ b/resources/js/wysiwyg-tinymce/common-events.js
@@ -1,3 +1,5 @@
+import {scrollToHeader} from "./scrolling";
+
 /**
  * @param {Editor} editor
  */
@@ -30,4 +32,9 @@ export function listen(editor) {
             editor.focus();
         }
     });
+
+    // Focus on a specific heading
+    window.$events.listen('editor::focus-heading', ({index}) => {
+        scrollToHeader(editor, index);
+    });
 }
diff --git a/resources/js/wysiwyg-tinymce/scrolling.js b/resources/js/wysiwyg-tinymce/scrolling.js
index 92f8f1583..b4f07984e 100644
--- a/resources/js/wysiwyg-tinymce/scrolling.js
+++ b/resources/js/wysiwyg-tinymce/scrolling.js
@@ -15,6 +15,23 @@ function scrollToText(editor, scrollId) {
     editor.focus();
 }
 
+/**
+ * Scroll to a specific header of the given index, relative to all headers in the content.
+ * @param {Editor} editor
+ * @param {Number} index
+ */
+export function scrollToHeader(editor, index) {
+    const headers = editor.dom.select('h1, h2, h3, h4, h5, h6');
+    const targetHeader = headers[index];
+
+    if (targetHeader) {
+        targetHeader.scrollIntoView();
+        editor.selection.select(targetHeader, true);
+        editor.selection.collapse(false);
+        editor.focus();
+    }
+}
+
 /**
  * Scroll to a section dictated by the current URL query string, if present.
  * Used when directly editing a specific section of the page.