Page Editor: Added contents click handling for TinyMCE editor

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);
+    });
 }

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.