Ability to rename history entries

[sidharthv96]

Is your feature request related to a problem? Please describe.
It's hard to keep track of history as the names are randomly generated.

Describe the solution you'd like
It should be possible to rename history entries

Describe alternatives you've considered
None

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 30 days

[yurenchen000]

I search usage everywhere and found nothing.
Is it possible today?

wish meaningful name for saved entries.
otherwise is hard to pick out the right save-point.

Did I miss something?

[yurenchen000]

I temporarily wrote some code to implement the renaming of manually saved entries.
Usage:

• setup: Expand the History Panel, Paste code to F12 console, Enter.
• use: double click on item name to edit, Enter to commit, Esc to cancel
  //NOTE: changed localeStorage maybe need refresh page to reload.

// yurenchen: mermaid.live editor rename manual-save-enties
// - double click on name to edit
// - Enter to confirm
// - Esc to cancle

//rename save entry in localStorage
function manual_save_rename(old_name, new_name){
	var store = JSON.parse(localStorage.manualHistoryStore)
	var found = store.find(o => o.name==old_name)
	if(found){
		found.name = new_name
		localStorage.manualHistoryStore = JSON.stringify(store)
		return true
	}
}

//expand history list
$('#historyList') || $('#saveHistory').closest('.card > div').click()

//bind rename to dblclick & ESC / Enter
setTimeout( _=>{
document.querySelectorAll('#historyList > li .flex-1 .flex-col.text-base-content span:nth-child(1)').forEach( ele => {
	console.log('-', ele)
	ele.ondblclick = function(e){
		// console.log(e.srcElement.innerText)
		var o = e.srcElement
		o._old = o.innerText
		o.contentEditable = true
		o.focus()
	}
	ele.onkeydown=function(e){
		var o = e.srcElement;
		// console.log(e,e.key, e.key)
		switch(e.key){
		case 'Enter':
			o.contentEditable = false
			o.innerText = o.innerText.trim()
			console.log('--rename:', o._old, o.innerText)
			manual_save_rename(o._old, o.innerText)
			return false
		case 'Escape':
			console.log('--cancel:', o._old, o.innerText)
			o.contentEditable = false
			o.innerText = o._old
			return false
		}
	}
})
},500)

[sidharthv96]

@yurenchen000 can you raise a PR to allow easy editing of history entries?

Maybe an edit button near the name, clicking it turns the label into a text box, which can be edited and saved.

[yurenchen000]

@yurenchen000 can you raise a PR to allow easy editing of history entries?

Maybe an edit button near the name, clicking it turns the label into a text box, which can be edited and saved.

I haven't read the Live Editor source code,
This is just a temporary rough implementation.

[Soleone]

Without names the history feature's usefulness is very limited.

An alternative approach to manual renaming (which is certainly useful) might be to automatically take the title of the diagram as the name. As a reminder you can have some custom markup at the top of the diagram like this to display a title in the diagram:

---
title: My diagram name
---
classDiagram
    class A

Rendered it looks like this:

---
title: My diagram name
---
classDiagram
    class A