Unable to stop Backspace or Delete key from removing a custom component

[redfellow]

Describe the bug
I am unable to stop Backspace or Delete key from removing a component, and also se-linebreaker helper appears on top of the component when mouseovering it.

To Reproduce
Steps to reproduce the behavior:

1. Add custom HTML into the editing area's root:

<content-viewer2-textinput class="se-component __se__tag" contenteditable="false"><h3>Component title</h3><div>.. additional code </div> </content-viewer2-textinput>

2. Position cursor either above or below element, and you can remove it with Backspace or Delete
3. Hover mouse cursor within the component and we see the "add new line" helper element, and clicking it adds a paragraph inside the component

Expected behavior
The component will not be affected by Backspace or Delete. Add new line helper is not ever visible inside the component.

Desktop (please complete the following information):

• OS: Windows, MacOs
• Browser Chrome
• Version 141

Suneditor version

• v2.47.3

[JiHong88]

Please share your editor options settings.

[redfellow]

Please share your editor options settings.

{
	"defaultTag": "p",
	"mode": "classic",
	"mediaAutoSelect": false,
	"resizingBar": false,
	"showPathLabel": true,
	"resizeEnable": false,
	"imageResizing": false,
	"videoResizing": false,
	"stickyToolbar": 73,
	"plugins": [
		{
			"name": "pagebreak",
			"display": "command",
			"title": "Pakotettu sivunvaihto",
			"innerHTML": "<i class=\"far fa-file-dashed-line\"></i>",
			"buttonClass": ""
		},
		{
			"name": "inputs.textinput",
			"display": "command",
			"title": "formelements.inputs.textinput",
			"innerHTML": "<i class=\"far fa-line-columns\"></i>",
			"buttonClass": ""
		},
		{
			"name": "headings-plus-1",
			"display": "command",
			"title": "Kasvata otsikkotasoja",
			"innerHTML": "+1",
			"buttonClass": ""
		},
		{
			"name": "headings-minus-1",
			"display": "command",
			"title": "Pienennä otsikkotasoja",
			"innerHTML": "-1",
			"buttonClass": ""
		}
	],
	"formats": [
		{
			"tag": "p",
			"name": "Leipäteksti",
			"command": "replace",
			"N_order": 2,
			"class": ""
		},
		{
			"tag": "h2",
			"name": "Otsikko H2",
			"command": "replace",
			"N_order": 3,
			"class": ""
		},
		{
			"tag": "h3",
			"name": "Otsikko H3",
			"command": "replace",
			"N_order": 4,
			"class": ""
		},
		{
			"tag": "h4",
			"name": "Otsikko H4",
			"command": "replace",
			"N_order": 5,
			"class": ""
		},
		{
			"tag": "h5",
			"name": "Otsikko H5",
			"command": "replace",
			"N_order": 6,
			"class": ""
		},
		{
			"tag": "h6",
			"name": "Otsikko H6",
			"command": "replace",
			"N_order": 7,
			"class": ""
		},
		{
			"tag": "pre",
			"name": "Koodi",
			"command": "free",
			"N_order": 9,
			"class": ""
		},
		{
			"tag": "div",
			"name": "Tyyli",
			"command": "replace",
			"N_order": 999,
			"class": ""
		}
	],
	"placeholder": "Sisältö...",
	"height": "auto",
	"allowedClassNames": ".*",
	"addTagsWhitelist": ".*",
	"attributesBlacklist": {
		"all": "style|data-darkreader.*",
		"stato-span": "none",
		"p": "none",
		"div": "none"
	},
	"attributesWhitelist": {
		"all": ".*"
	}
}

[redfellow]

I was able to work around the issue by using editor.onKeyDown

editor.onKeyDown = function(e, core) {
	const keyCode = e.keyCode;
	const range = core.getRange();
	const selectionNode = core.getSelectionNode();
	const util = core.util;

	if (keyCode === 8 || keyCode === 46) {
		const formatEl = util.getFormatElement(selectionNode, null);

		if (keyCode === 8) {
			let prevSibling = formatEl ? formatEl.previousElementSibling : null;
			let rootComponent = prevSibling.classList.contains("custom-component") && prevSibling.parentNode.classList.contains("sun-editor-editable");
			let atStart = range.startOffset === 0;
			if (rootComponent && atStart) {
				e.preventDefault();
				e.stopPropagation();
				return false;
			}
		}
		else if (keyCode === 46) {
			const nextSibling = formatEl ? formatEl.nextElementSibling : null;
			let rootComponent = nextSibling.classList.contains("custom-component") && nextSibling.parentNode.classList.contains("sun-editor-editable");
			let atEnd = range.endOffset === selectionNode.textContent.length;
			if (rootComponent && atEnd) {
					e.preventDefault();
					e.stopPropagation();
					return false;
			}
		}
	}

	return undefined;
};