Text component problem

Not sure if I found this code in an Issue on here or on Stack Overflow, but this code here replaces the Divs with a <br/> when you press the enter key. I placed this code in the same file as my grapes-config

var iframeBody = editor.Canvas.getBody();
	$(iframeBody).on("keydown", "[contenteditable]", e => {
		// trap the return key being pressed
		if (e.keyCode === 13) {
				e.preventDefault();
				// insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line)
				e.target.ownerDocument.execCommand("insertHTML", false, "<br><br>");
				// prevent the default behaviour of return key pressed
				return false;
		}
	});

I looked into this myself a few days ago...apparently there's an insertBrOnReturn option for execCommand, but the browser support is terrible. A solution like this is probably better.

@artf How would you want this to change? Should hitting enter insert <br> tags as shown in the top answer on the that SO discussion? Would you want to expose this as a configuration option?

I've found a solution to my needs using CKEditor and overriding the native "text" component creating my own. My text component now is a div with a css class that identifies the component:

comps.addType('text', {
      model: textModel.extend({
        defaults: Object.assign({}, textModel.prototype.defaults, {
          tagName: 'div',
          name: 'Texto',
          draggable: '*',
          droppable: false
        }),
      },
      {
        isComponent: function(el) {
          if(el.tagName == 'DIV' && el.classList.contains('txt')){
            return {type: 'text'};
          }
        },
      })
/*...*/

Now, typing ENTER does not create a new component. Nevertheless, this solution do not solve this problem, for those who don't want to use third party text editors.