From 28179cfa8eea4dff94ca51e8e19b0ea46c4d61cb Mon Sep 17 00:00:00 2001
From: Fabian Braun <fsbraun@gmx.de>
Date: Fri, 10 Jan 2025 08:42:52 +0100
Subject: [PATCH] Fix: Block toolbar update failed when adding at the end of
 the document

---
 private/js/tiptap_plugins/cms.styles.js  | 1 -
 private/js/tiptap_plugins/cms.toolbar.js | 7 ++++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/private/js/tiptap_plugins/cms.styles.js b/private/js/tiptap_plugins/cms.styles.js
index 7eb27be..338de9f 100644
--- a/private/js/tiptap_plugins/cms.styles.js
+++ b/private/js/tiptap_plugins/cms.styles.js
@@ -69,7 +69,6 @@ function renderColorMenu(editor) {
 const TextColor = Mark.create({
     name: 'textcolor',
     addOptions() {
-        console.log(this.editor);
         return {
             textColors: {
                 'text-primary': {name: "Primary"},
diff --git a/private/js/tiptap_plugins/cms.toolbar.js b/private/js/tiptap_plugins/cms.toolbar.js
index 231d6ad..168177f 100644
--- a/private/js/tiptap_plugins/cms.toolbar.js
+++ b/private/js/tiptap_plugins/cms.toolbar.js
@@ -81,7 +81,8 @@ function _createBlockToolbarPlugin(editor) {
                 ]);            },
             apply(tr, value, oldState, newState) {
                 if (!oldState.doc.eq(newState.doc) || oldState.selection.eq(newState.selection) === false) {
-                    updateBlockToolbar(editor, newState);
+                    // Let the editor execute the dom update before updating the toolbar
+                    setTimeout(() => updateBlockToolbar(editor, newState), 0);
                 }
                 return value;
             }
@@ -338,7 +339,7 @@ function _createDropdown(editor, item, filter) {
     }
     const title = item.title && item.icon ? `title='${item.title}' ` : '';
     const icon = item.icon || `<span>${item.title}</span>`;
-    return `<span ${title}class="dropdown" role="button">${icon}<div title class="dropdown-content ${item.class || ''}">${dropdown}</div></span>`;
+    return `<span ${title}class="dropdown" tabindex="-1" role="button">${icon}<div title class="dropdown-content ${item.class || ''}">${dropdown}</div></span>`;
 }
 
 function _populateGroup(editor, array, filter) {
@@ -418,7 +419,7 @@ function _createToolbarButton(editor, itemName, filter) {
             </form>`;
         }
         const content = repr.icon || `<span>${repr.title}</span>`;
-        return `<button data-action="${repr.dataaction}" ${cmsplugin}${title}${position}class="${classes}" role="button">
+        return `<button tabindex="-1" data-action="${repr.dataaction}" ${cmsplugin}${title}${position}class="${classes}">
                         ${content}${form}
                     </button>`;
     }