Styles not working with enter key when selectionStart != selectionEnd

[glashtin]

If you select some text and then hit the enter key it will remove the text and create a line break however the styles are not correct anymore.

For example got to http://fabricjs.com/test/misc/itext.html highlight the red 'e' in the first box then press enter.

[kangax]

Looks correct to me in dev Chrome. Which browser are you seeing it on?

[glashtin]

Version 38.0.2064.0 canary
and IE 11.0.9600.17107
Windows 8.1

[glashtin]

I have fixed this on mine, I believe all I did was change itext_behavior.mixin.js to the following. However my version is so much different from your version now I can not be for sure and it is not tested on your version of the code. I had to add text wrapping and make it it does not scale for my project, so there are many other differences between our code.

/**
 * Inserts a character where cursor is (replacing selection if one exists)
 * @param {String} _chars Characters to insert
 */
insertChars: function(_chars) {
        if (this.selectionStart != this.selectionEnd) {
            this._removeCharsFromTo(this.selectionStart, this.selectionEnd);
            this.selectionEnd = this.selectionStart;

        }

  var isEndOfLine = this.text.slice(this.selectionStart, this.selectionStart + 1) === '\n';

  this.text = this.text.slice(0, this.selectionStart) + _chars + this.text.slice(this.selectionEnd);

  if (this.selectionStart === this.selectionEnd) {
    this.insertStyleObjects(_chars, isEndOfLine, this.copiedStyles);
  }
  // else if (this.selectionEnd - this.selectionStart > 1) {
    // TODO: replace styles properly
    // console.log('replacing MORE than 1 char');
  // }

  this.selectionStart += _chars.length;
  this.selectionEnd = this.selectionStart;

  if (this.canvas) {
    // TODO: double renderAll gets rid of text box shift happenning sometimes
    // need to find out what exactly causes it and fix it
    this.canvas.renderAll().renderAll();
  }

  this.setCoords();
  this.fire('changed');
  this.canvas && this.canvas.fire('text:changed', { target: this });
},

[kangax]

Hm, I can't reproduce it on Chrome 37 on Mac, so it might be Windows issue. I'll check it when I get a chance.

[kangax]

@Kienz @asturur if any of you can check this on Windows, that would be great

[sorich87]

I'm able to reproduce this on Chrome on Mac. See https://monosnap.com/file/Xda4BpQ0R0gtSnIAG9mpBZlD2Efumw.

[kangax]

I just tried in Chrome on Mac and still not seeing this exact issue. I only see extra space added on the next line when pressing enter.