Editable Cell

my solution:

editor.Components.addType('cell', {
    isComponent(el) {
      if (!(['td', 'th'].indexOf(el.tagName?.toLowerCase()) >= 0)) {
        return false;
      }

      const allChildNodes: Node[] = [];
      function collectChildNodes(arr: Node) {
        const { childNodes } = arr;
        if (childNodes.length > 0) {
          for (let index = 0; index < childNodes.length; index += 1) {
            const arrayChildNode = childNodes[index];
            if (arrayChildNode.childNodes?.length > 0) {
              collectChildNodes(arrayChildNode);
            } else {
              allChildNodes.push(arrayChildNode);
            }
          }
        } else {
          allChildNodes.push(arr);
        }
      }
      collectChildNodes(el);

      return !allChildNodes.every(
        (item) => item.nodeType === 3 || item.nodeName?.toLowerCase() === 'br',
      );
    },
  });

collect all childNodes, if all childNode is textNode or br element，I think it is not a td, back to a Text Wrapper and the user can edit the content

You should wrap the text in some other tag. If you can't change the content you should probably have to extend the original component Eg. inside isComponent make some kind of change

isComponent(el) {
      let result = '';
      const tag = el.tagName;

      if (tag == 'TD' || tag == 'TH') {
        result = {
          type: 'cell',
          tagName: tag.toLowerCase()
        };

		if ( /* eg. el has one textnode element  */ ) {
			result.components = `<div>${el.innerText}</div>`
		}
      }

      return result;
    }

I have same issue, Waiting for the answer.... #1257