Aligned some editor events, Changed wysiwyg custom styles loading

- Removed old 'editor-*-update' commands to instead use the aligned
  'editor::replace' command that we already have.
- Changed the way custom styles are loaded for the WYSIWYG editor so we
  don't need an API call but instead scape content from the parent page
  header using comments as identifiers. Added tests to ensure comments
  exist and align.

diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index 9e66a064077d94749bdf99a2c0e8a9eecdd45bf2..f38bd71dfc7ea456a9e5e46f74140035ba777c91 100644 (file)
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -107,14 +107,6 @@ class HomeController extends Controller
         return view('home.default', $commonData);
     }
 
-    /**
-     * Get custom head HTML, Used in ajax calls to show in editor.
-     */
-    public function customHeadContent()
-    {
-        return view('common.custom-head');
-    }
-
     /**
      * Show the view for /robots.txt.
      */

diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js
index a14047d2f430155083b614773abe1a05f246bb38..e41ab15f622ad1386c19f416679a01da1377d8ce 100644 (file)
--- a/resources/js/components/markdown-editor.js
+++ b/resources/js/components/markdown-editor.js
@@ -98,11 +98,6 @@ class MarkdownEditor {
             toolbarLabel.closest('.markdown-editor-wrap').classList.add('active');
         });
 
-        window.$events.listen('editor-markdown-update', value => {
-            this.cm.setValue(value);
-            this.updateAndRender();
-        });
-
         this.codeMirrorSetup();
         this.listenForBookStackEditorEvents();
 

diff --git a/resources/js/components/page-editor.js b/resources/js/components/page-editor.js
index 5f35e64992c50b793bdebf33edcb46a634fea4b9..dae8071220720d6126c81f77406f88c77af5e2a0 100644 (file)
--- a/resources/js/components/page-editor.js
+++ b/resources/js/components/page-editor.js
@@ -158,8 +158,10 @@ class PageEditor {
 
         this.draftDisplay.innerText = this.editingPageText;
         this.toggleDiscardDraftVisibility(false);
-        window.$events.emit('editor-html-update', response.data.html || '');
-        window.$events.emit('editor-markdown-update', response.data.markdown || response.data.html);
+        window.$events.emit('editor::replace', {
+            html: response.data.html,
+            markdown: response.data.markdown,
+        });
 
         this.titleElem.value = response.data.name;
         window.setTimeout(() => {

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index f1eca334838a013a45534c2c800b6c5c129dc9af..0b43b9c79bc306af492986732b972f2c4283b9a8 100644 (file)
--- a/resources/js/wysiwyg/config.js
+++ b/resources/js/wysiwyg/config.js
@@ -138,16 +138,16 @@ function gatherPlugins(options) {
 }
 
 /**
- * Load custom HTML head content from the settings into the editor.
- * TODO: We should be able to get this from current parent page?
- * @param {Editor} editor
+ * Fetch custom HTML head content from the parent page head into the editor.
  */
-function loadCustomHeadContent(editor) {
-    window.$http.get(window.baseUrl('/custom-head-content')).then(resp => {
-        if (!resp.data) return;
-        let head = editor.getDoc().querySelector('head');
-        head.innerHTML += resp.data;
-    });
+function fetchCustomHeadContent() {
+    const headContentLines = document.head.innerHTML.split("\n");
+    const startLineIndex = headContentLines.findIndex(line => line.trim() === '<!-- Start: custom user content -->');
+    const endLineIndex = headContentLines.findIndex(line => line.trim() === '<!-- End: custom user content -->');
+    if (startLineIndex === -1 || endLineIndex === -1) {
+        return ''
+    }
+    return headContentLines.slice(startLineIndex + 1, endLineIndex).join('\n');
 }
 
 /**
@@ -176,15 +176,6 @@ function getSetupCallback(options) {
             window.$events.emit('editor-html-change', content);
         }
 
-        // TODO - Update to standardise across both editors
-        // Use events within listenForBookStackEditorEvents instead (Different event signature)
-        window.$events.listen('editor-html-update', html => {
-            editor.setContent(html);
-            editor.selection.select(editor.getBody(), true);
-            editor.selection.collapse(false);
-            editorChange(html);
-        });
-
         // Custom handler hook
         window.$events.emitPublic(options.containerElement, 'editor-tinymce::setup', {editor});
 
@@ -253,7 +244,9 @@ export function build(options) {
             }
         },
         init_instance_callback(editor) {
-            loadCustomHeadContent(editor);
+            let head = editor.getDoc().querySelector('head');
+            console.log(fetchCustomHeadContent());
+            head.innerHTML += fetchCustomHeadContent();
         },
         setup(editor) {
             for (const [key, config] of Object.entries(toolBarGroupButtons)) {

diff --git a/resources/views/common/custom-head.blade.php b/resources/views/common/custom-head.blade.php
index 6f88bd43f7a9cd77d8d1aec9a85c665fadb27e7c..7f2e93cdc993e4713d07cd17791e0b4094ac2464 100644 (file)
--- a/resources/views/common/custom-head.blade.php
+++ b/resources/views/common/custom-head.blade.php
@@ -1,7 +1,7 @@
 @inject('headContent', 'BookStack\Theming\CustomHtmlHeadContentProvider')
 
 @if(setting('app-custom-head') && \Route::currentRouteName() !== 'settings')
-<!-- Custom user content -->
+<!-- Start: custom user content -->
 {!! $headContent->forWeb() !!}
-<!-- End custom user content -->
+<!-- End: custom user content -->
 @endif
\ No newline at end of file

diff --git a/routes/web.php b/routes/web.php
index 7a12acc31bbddb49f1deb5352440f85ec9ea2ec2..ad4fb9067dc46c6bf65c69522a19dc079ac866b8 100644 (file)
--- a/routes/web.php
+++ b/routes/web.php
@@ -206,7 +206,6 @@ Route::middleware('auth')->group(function () {
     // Other Pages
     Route::get('/', [HomeController::class, 'index']);
     Route::get('/home', [HomeController::class, 'index']);
-    Route::get('/custom-head-content', [HomeController::class, 'customHeadContent']);
 
     // Settings
     Route::get('/settings', [SettingController::class, 'index'])->name('settings');

diff --git a/tests/Settings/CustomHeadContentTest.php b/tests/Settings/CustomHeadContentTest.php
index 36c8a4c0fcc68f283cfcbf08fd8bb33bff6df582..eeeab3f45a062c023fa7a89ad8c6b1f56e049701 100644 (file)
--- a/tests/Settings/CustomHeadContentTest.php
+++ b/tests/Settings/CustomHeadContentTest.php
@@ -14,6 +14,15 @@ class CustomHeadContentTest extends TestCase
         $resp->assertSee('console.log("cat")', false);
     }
 
+    public function test_content_wrapped_in_specific_html_comments()
+    {
+        // These comments are used to identify head content for editor injection
+        $this->setSettings(['app-custom-head' => '<script>console.log("cat");</script>']);
+        $resp = $this->get('/login');
+        $resp->assertSee('<!-- Start: custom user content -->', false);
+        $resp->assertSee('<!-- End: custom user content -->', false);
+    }
+
     public function test_configured_content_does_not_show_on_settings_page()
     {
         $this->setSettings(['app-custom-head' => '<script>console.log("cat");</script>']);