Changing Text on UI-Elements

Things I have tried

I have looked at the Obsidian API and the sample plugin, and searched the forum.

What I’m trying to do

I use folder notes extensively, and because that way they integrate nicely with Nextcloud, I name them all “README.md”.
This gets very annoying, when sometimes you have 20 tabs open, and 10 of them are named “README” (and it’s even worse in the graph view).

I would like to keep that naming scheme, and not switch to naming them after the containing folder (bc. of Nextcloud).

So what I thought about was ‘just’ replacing the text content of the tab titles.

I had some custom CSS, that replaced the titles, but because CSS can’t select based on text content, I could not filter the folder notes, so that was a dead end.

Next thing I did was using JavaScript, to get at the tab elements, and filter them out based on the title, and that mostly works (on hover it still shows “README”, but I could live with that)

// find all tab headers
let tabs = app.dom.appContainerEl.findAll(".workspace-tab-header")
// filter foldernotes
let folderNotes = tabs.filter(tab => tab.find(".workspace-tab-header-inner-title").textContent === "README")

// replace text
for (let tab of folderNotes) {
    let title = "undefined"  // ??? how do I compute the file path from the tab
    tab.find(".workspace-tab-header-inner-title").setText(title)
}

But the problem that I have now, is that I have no way of associating the tab element with an Obsidian URL, so I don’t know what to replace the tab title with.
I have proper metadata in the notes, so I thought maybe I could read it from the editor window, but I think that would only work for the active ones.

Obsidian knows which tabs belong to which file, so it shouldn’t be that hard to do, but I’m not too familiar with JS and electron apps, so I’m probably overlooking something here.

Does anyone have an idea how that could be accomplished? Or if someone knows, that it’s definitely impossible, that’s an answer too =/

Kind regards,
Fynn

PS:

Major bonus points if someone knows how to influence the graph view.
Not just the colour, via CSS and .graph-view.color-text et al., but actually changing the displayed text, although, that’s probably not possible

If someone else is interested, I got it to work:

app.workspace.iterateAllLeaves(leaf => {
    let vs = leaf.getViewState()

    // only work on markdown notes with the title README.md
    if (vs.type !== "markdown" || !vs.state.file.endsWith("/README.md"))
        return

    // get the name of the containing folder (keeps trailing "/", as visual indicator)
    // and set the title accordingly
    let parent = lib.parent(vs.state.file, {relative: true})
    leaf.tabHeaderInnerTitleEl.setText(parent)
})

lib.parent is from somewhere else, and just splits the path, something like path => path.split("/").slice(0, -1).pop() + "/" (a little nicer though)

I shouldn’t have tried to manipulate the DOM directly, I guess.

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.