Allow user to rename tabs

[tennis-aa]

Allow user to rename tabs

[brrd]

We won't add this feature because I think this is out of the scope of electron-tabs, which is intended to be generic and "KISS" lib.

Why not accessing title element with tab.spans.title, as we do in :

electron-tabs/src/index.ts

Line 415 in 49525b8

const span = this.spans.title;

By the way, be aware that contenteditable does not filter out HTML elements, so pasting a h1 or several paragraphs in the tab would lead to a broken display. I guess you do want raw text, so you probably need to use window.prompt instead. Untested example:

 function tab_init(tab) {
    const tabTitle = tab.spans.title;
    tab.setTitle("Page " + tabGroup.newTabId);
    tabTitle.addEventListener("click", function() {
        const newTitle = window.prompt("Please type the new title");
        tab.setTitle(newTitle);
    });
  }

[tennis-aa]

Thank you for the quick reply. tab.spans.title is exactly what I was looking for.

I have a few comments if anybody else is looking for this functionality.

window.prompt is not supported by electron, so you would have to write your own prompt function (electron/electron#472).

What I ended up using is the following:

function tab_init(tab) {
  tab.setTitle("Page " + tabGroup.newTabId);
  let tab_title = tab.spans.title;
  tab.element.addEventListener("click", function() {
    tab_title.setAttribute("contenteditable", true);
  });
  tab_title.addEventListener("blur", function() {
    tab_title.setAttribute("contenteditable", false);
    if (tab_title.textContent == "") tab_title.textContent = "No title";
    tab_title.textContent = tab_title.textContent;
  });
}

contenteditable does not filter out pasted html elements, so I am filtering it out myself (tab_title.textContent = tab_title.textContent;).

I am not calling tab.setTitle() because it modifies the innerHTML of the title span so html code would be rendered.