fix: exchangeCenterTitleBar

src/main.ts

@@ -16,7 +16,7 @@ import {
     getRightTitleBar,
     getTitlebarText,
     removeAllPageHeaderButtons,
-    removeAllTitleBarButtons,
+    removeAllTitleBarButtons, removeTitlebarText,
     restoreCenterTitlebar,
 } from './utils';
 import { lucideIcons } from './lucide';
@@ -40,7 +40,7 @@ export default class TopBarButtonsPlugin extends Plugin {
     settings!: TopBarButtonsSettings;
     iconList: string[] = obsiIcons.concat(lucideIcons);
     listener!: () => void;
-    titlebarText: string[] = [];
+    titlebarText: Element[] = [];
     windows: Document[] = [];
 
     addPageHeaderButton(
@@ -152,6 +152,7 @@ export default class TopBarButtonsPlugin extends Plugin {
     // before any button is added, the parent needs to be removed and the
     // own parent added; this requires checks in the settings modal when
     // buttons are added and removed
+/*
     addInitialCenterTitleBarButtons(doc: Document) {
         if (this.settings.titleCenter.length > 0) {
             const center = exchangeCenterTitleBar(doc);
@@ -163,6 +164,7 @@ export default class TopBarButtonsPlugin extends Plugin {
             }
         }
     }
+*/
 
     addCenterTitleBarButtons(doc: Document) {
         if (this.settings.titleCenter.length > 0) {
@@ -179,9 +181,13 @@ export default class TopBarButtonsPlugin extends Plugin {
     initTitleBar(doc: Document) {
         this.addLeftTitleBarButtons(doc);
         this.addRightTitleBarButtons(doc);
-        this.titlebarText.push(getTitlebarText(doc));
+        // store the element so that it can be restored later on
         if (this.settings.titleCenter.length > 0) {
-            this.addInitialCenterTitleBarButtons(doc);
+            this.titlebarText.push(getTitlebarText(doc));
+            removeTitlebarText(doc)
+            // could be passed; maybe for next refactoring
+            const newActions = exchangeCenterTitleBar(doc)
+            this.addCenterTitleBarButtons(doc);
         }
     }
     async onload() {
@@ -192,8 +198,8 @@ export default class TopBarButtonsPlugin extends Plugin {
 
         this.app.workspace.onLayoutReady(() => {
             if (Platform.isDesktopApp) {
-                this.initTitleBar(document)
                 this.windows.push(document)
+                this.initTitleBar(document)
             }
             if (Platform.isMobile || this.settings.desktop) {
                 this.addButtonsToAllLeaves();

src/ui/commandSuggester.ts

@@ -8,10 +8,12 @@ import type {
 } from '../interfaces';
 import type TopBarButtonsPlugin from '../main';
 import {
+    exchangeCenterTitleBar,
+    getTitlebarText,
     removeAllTitleBarButtons,
     removeCenterTitleBarButtons,
     removeLeftTitleBarButtons,
-    removeRightTitleBarButtons,
+    removeRightTitleBarButtons, removeTitlebarText,
     restoreCenterTitlebar,
 } from '../utils';
 
@@ -92,8 +94,14 @@ export default class CommandSuggester extends FuzzySuggestModal<Command> {
             } else if (this.type === 'title-center') {
                 // initial button is added
                 if (centerCounter === 0) {
+                    this.plugin.titlebarText = [];
                     for (let i = 0; i < this.plugin.windows.length; i++) {
-                        this.plugin.addInitialCenterTitleBarButtons(this.plugin.windows[i])
+                        const doc = this.plugin.windows[i]
+                        this.plugin.titlebarText.push(getTitlebarText(doc));
+                        removeTitlebarText(doc)
+                        // could be passed; maybe for next refactoring
+                        const newActions = exchangeCenterTitleBar(doc)
+                        this.plugin.addCenterTitleBarButtons(doc)
                     }
                     // all buttons removed
                 } else if (this.plugin.settings.titleCenter.length === 0) {

src/ui/iconPicker.ts

@@ -10,9 +10,11 @@ import {
 import type TopBarButtonsPlugin from '../main';
 import type { Buttons, TitleOrPage } from 'src/interfaces';
 import {
+    exchangeCenterTitleBar,
+    getTitlebarText,
     removeCenterTitleBarButtons,
     removeLeftTitleBarButtons,
-    removeRightTitleBarButtons,
+    removeRightTitleBarButtons, removeTitlebarText,
     restoreCenterTitlebar,
 } from '../utils';
 
@@ -138,8 +140,14 @@ export default class IconPicker extends FuzzySuggestModal<string> {
         } else {
             // initial button is added
             if (centerCounter === 0) {
+                this.plugin.titlebarText = [];
                 for (let i = 0; i < this.plugin.windows.length; i++) {
-                    this.plugin.addInitialCenterTitleBarButtons(this.plugin.windows[i])
+                    const doc = this.plugin.windows[i]
+                    this.plugin.titlebarText.push(getTitlebarText(doc));
+                    removeTitlebarText(doc)
+                    // could be passed; maybe for next refactoring
+                    const newActions = exchangeCenterTitleBar(doc)
+                    this.plugin.addCenterTitleBarButtons(doc)
                 }
             } else if (settings.titleCenter.length === 0) {
                 for (let i = 0; i < this.plugin.windows.length; i++) {

src/utils.ts

@@ -1,9 +1,5 @@
-import { Platform, setIcon } from 'obsidian';
-import {
-    PLUGIN_CLASS_NAME,
-    TITLEBAR_CENTER,
-    TITLEBAR_CLASS,
-} from './constants';
+import {Platform, setIcon} from 'obsidian';
+import {PLUGIN_CLASS_NAME, TITLEBAR_CENTER, TITLEBAR_CLASS,} from './constants';
 
 // General purpose utility functions
 
@@ -77,26 +73,25 @@ export function removeSingleButton(
 // Center title bar utility functions
 
 export function getTitlebarText(doc: Document) {
-    const titlebarText = document.getElementsByClassName('titlebar-text')[0];
-    return titlebarText.getText();
+    return doc.getElementsByClassName('titlebar-text')[0]
 }
 
-export function removeTitlebarText() {
-    const titlebarText = document.getElementsByClassName('titlebar-text');
-    removeElements(titlebarText);
+export function removeTitlebarText(doc: Document) {
+    const titlebarText = doc.getElementsByClassName('titlebar-text')[0];
+    titlebarText.detach();
 }
 
-export function restoreCenterTitlebar(text: string, doc: Document) {
+export function restoreCenterTitlebar(titlebarText: Element, doc: Document) {
     const centerTitlebar = doc.getElementsByClassName(
         `${PLUGIN_CLASS_NAME} ${TITLEBAR_CENTER}`
     )[0];
     // needed for ununload if no center buttons are defined
     if (centerTitlebar !== undefined) {
-        centerTitlebar.classList.remove(
-            ...[PLUGIN_CLASS_NAME, TITLEBAR_CENTER]
-        );
-        centerTitlebar.addClass('titlebar-text');
-        centerTitlebar.innerHTML = text;
+        const inner = centerTitlebar.parentElement
+        centerTitlebar.detach()
+        if (inner) {
+            inner.insertBefore(titlebarText, inner.children[0])
+        }
     }
 }
 
@@ -109,10 +104,11 @@ export function removeCenterTitleBarButtons(doc: Document) {
 }
 
 export function exchangeCenterTitleBar(doc: Document): Element {
-    const centerTitleBar = doc.getElementsByClassName('titlebar-text')[0];
-    centerTitleBar.classList.remove('titlebar-text');
-    centerTitleBar.addClasses([PLUGIN_CLASS_NAME, TITLEBAR_CENTER]);
-    centerTitleBar.innerHTML = '';
+    const centerTitleBar = createDiv({cls: [PLUGIN_CLASS_NAME, 'titlebar-center']})
+    const parent = doc.getElementsByClassName('titlebar-inner')[0]
+    if (parent) {
+        parent.insertBefore(centerTitleBar, parent.children[0])
+    }
     return centerTitleBar;
 }