Anki Forums

Modifying field name in editor

Hi,
following situation: I am trying to add a clickable element to each displayed field in the editor.
Ideally, I would put it where the field’s name is, because there is much unused space to the right.
So basically this:
image

I can append my button to the field with code like

// append a button to the first field label
document.querySelector('.fname').innerHTML += '<div>my-button</div>';

Works fine in 2.1.41 until I change the note type, which then doesn’t update the names anymore (E.g. if I change from Cloze to Basic, I will still have the first field named Text, and the second named Extra. I have looked through the editor typescript code, but could not really pin it down on anything. Maybe @hengiesel knows what could be the issue here?

Have a look at this post. It contains valuable information. It also contains links to some add-ons which do something very similar to what you want to do, like my Ze Frozen Fields.

Generally, don’t replace HTML, but append it as a child:

var myDiv = document.createElement("div")
myDiv.attribute = ...
getEditorField(0).labelContainer.appendChild(myDiv)

Also in the post, read about the pattern for add-ons which work with editor_will_load_note.

Let me know if that helps you :slight_smile:

2 Likes

Thanks a lot, I went with your approach of createElement and appendChild and it now works.

Cannot use that hook unfortunately. I see lots of useful hooks have been added in the past year or so, but I try to support from 2.1.22 upwards, which rules out a lot of them.