How to add a permanent prefix to every cell in a column on edit?

Getting help Questions
1

I was wondering if there was a way to make the beginning of each cell start with some dynamic variable (this.code in this case)? This is my custom editor

class CustomEditor extends Handsontable.editors.TextEditor {
    constructor(props) {
    	super(props);
    }
    
    setValue(newValue){
        const cellVal = this.cellProperties.instance.getDataAtCell(this.row, this.col);
        this.TEXTAREA.value = (cellVal && cellVal.match(new RegExp(`^${this.code}.*`))) ?
            newValue :
            this.code;
    }
    
    createElements() {
		super.createElements();
		this.TEXTAREA = document.createElement('input');
		this.TEXTAREA.className = 'handsontableInput';
		this.textareaStyle = this.TEXTAREA.style;
		Handsontable.dom.empty(this.TEXTAREA_PARENT);
		this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
    }
}

and using the wrapper for react, I pass the code into the editor on every render call like this

render() {
	CustomEditor.prototype.code = this.props.code;
    ...
}

and it currently adds the code on double click of the empty cell, and preserves it’s value if it starts with the code already, very nice. I wish to make it so that the code is not able to be deleted, so one can only add to the code. Is this possible?

2

Hey @eastmanmarcusc

you may want to try the https://handsontable.com/docs/7.0.0/Hooks.html#event:beforeKeyDown hook. The event.key should them block delete and backspace.

3

Thanks @aleksandra_budnik, that hook is very helpful. It works when I am deleting one character at a time, but not when they highlight part of the code and delete that. Is there a way to see what the cell will look like after the key down event so I can reject it based off of that? The event.target.value contains the value before the change. This is what I have so far and works to prevent single deletes once it gets down to just the code (also tried with afterDocumentKeyDown):

beforeKeyDown: (event) => {
    if(event.target.value.length <= this.props.code.length &&
        event.key === "Backspace" || event.key === "Delete") {
            event.preventDefault();
    }
},
4

you could try to use the focus event to get the input’s value. I do not have anything in the official API and I would need to dig deep to check if there’s any internal method.