Custom plugin that add input, radio and checkbox groups.

[SergiuPlesco]

Issue:
1 After the element is added into the editor the cursor jumps to the beginning of the editor container
2. After adding a table the cursor is not focused (expected to be at the end of the table and if enter key pressed to go to the line)

Below is how i am creating the plugin and how inserting elements in the editor itself.

`const InputTag = {
name: "InputTag",
display: "submenu",
add(core: CoreType, targetElement: HTMLElement) {
const listDiv = this.setSubmenu(core);
const self = this;
listDiv.querySelectorAll(".se-btn-list").forEach((btn: any) => {
btn.addEventListener("click", self.onClick.bind(core, core));
});
core.initMenuTarget(this.name, targetElement, listDiv);
},

setSubmenu(core: CoreType): HTMLElement {
const listDiv = core.util.createElement("DIV");
listDiv.className = "se-submenu se-list-layer";
listDiv.innerHTML =
'

' +
'

' +
"
• " +
  'Input' +
  "
" +
"
• " +
  'Textarea' +
  "
" +
"
• " +
  'Group

' +
"";
return listDiv;
},

onClick(core: CoreType, e: any) {
const targetValue = e.target.value;

const triggerModal = (globalThis as any).globalModalHandle;

const ID = `inputId${generateId()}`;

if (targetValue === "group") {
  core.functions.insertHTML(
    `<div><span class="se-custom-tag ${ID}">custom element</span></div>`
  );
  triggerModal(ID, tagTypes[targetValue]);
  core.submenuOff();
  return;
}

const tagID = `input-id-${generateId()}`;
const defaultTag =
  tagTypes[targetValue] === GROUP_TYPE ? "input" : targetValue;

const box = core.util.createElement("div");
const span = core.util.createElement("span");
span.className = `se-custom-tag inputId${generateId()}`;

const node = core.util.createElement(defaultTag);
node.setAttribute("class", "se-custom-tag");
node.setAttribute("id", tagID);
node.setAttribute("name", `field${generateId()}`);
node.setAttribute("data-input-type", tagTypes[targetValue]);

triggerModal(tagID, tagTypes[targetValue]);
if (tagTypes[targetValue] === TEXTAREA_TYPE) {
  span.appendChild(node);
  box.appendChild(span);
}
core.functions.insertHTML(
  tagTypes[targetValue] === TEXTAREA_TYPE ? box : node
);
core.submenuOff();

},
};

export default InputTag;`

const generateRadioCheckbox = (formValues: any, elementID: string) => { const emptyBox = document.querySelector(.${elementID}) as HTMLElement; if (!emptyBox) return; emptyBox.textContent = ""; emptyBox.className = ${
emptyBox.className
} radio-group radioCollection select-group GROUP_TYPE ${
formValues.isRequired ? "required" : ""
}; emptyBox.style.display = "inline-flex"; emptyBox.style.verticalAlign = "bottom"; if (formValues.isDisplayedOnRow) { emptyBox.className = ${emptyBox.className} row`;
} else {
emptyBox.classList.remove("row");
}

const inputName = `name${generateId()}`;

if (formValues.label) {
  emptyBox.className = `${emptyBox.className} wrapper-radio-label`;

  const wrapper = document.createElement("span");
  wrapper.className = "se-custom-tag radio-label";
  wrapper.textContent = formValues.label || "";
  emptyBox.appendChild(wrapper);
}

const options = generateOptions(formValues.fields);
options.forEach((item: any) => {
  const randomInputName = `name${generateId()}`;
  const label = document.createElement("label");
  label.textContent = item.option;
  label.className = "se-custom-tag radio-wrapper";

  if (formValues.fontSize) {
    label.style.fontSize = `${formValues.fontSize}px`;
  }

  if (formValues.fontFamily) {
    label.style.fontFamily = `${formValues.fontFamily}`;
  }

  const radioButton = document.createElement("input");
  radioButton.type = formValues.type;
  radioButton.name =
    formValues.type === "checkbox" ? randomInputName : inputName;
  radioButton.value = item.option;

  label.insertBefore(radioButton, label.firstChild);
  emptyBox.appendChild(label);
});

if (formValues.isRequired) {
  // const span = document.createElement("span");
  // span.className = "se-custom-tag errorMessage";
  // span.textContent = "Field is required";
  // span.style.color = "red";
  // span.style.flexBasis = "100%";
  // span.style.display = "flex";
  // emptyBox.appendChild(span);
}

};
`

Can anyone point me into the right direction to solve this?
Thanks