JSFiddle - React, Tailwind, and code Playground

by Eugene Vilder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

CSS

#paper {
  border: solid 1px red;
}

JavaScript

var clone = fabric.util.object.clone;
fabric.util.object.extend(fabric.Textbox.prototype,{
		onInput: function(e){
			this.callSuper('onInput', e);
			this.ddpFullFillEmptyStyles();
    },
    ddpFullFillEmptyStyles: function(){
    
    console.log(this);
      const lines = this._unwrappedTextLines.length;
      let cntr = 0;
      for (let i=0; i<lines; i++) {
				this.styles[i] = this.styles[i] || {};
        const emptyLine = this._unwrappedTextLines[i].length === 0;
        if (emptyLine) {
            const {lineIndex, charIndex} = this.get2DCursorLocation(cntr-1, true);
            const prevCharStyle = clone(this.styles)[lineIndex][charIndex];
            this.styles[i][0] = prevCharStyle;
            console.log('___xxxzxzx', prevCharStyle);
         } else {
           cntr += this._unwrappedTextLines[i].length-1;
         }
      }
      
    	console.log('___xxxzxzx__', this.styles, this._unwrappedTextLines);
    }
});

const canvas = new fabric.Canvas('paper');

const text = new fabric.Textbox("Style Test", {
    left: 10,
    top: 10,
    width: 50,
    height: 50,
    fontSize: 20,
    fill: 'red'
});

text.setSelectionStyles({
	fill: 'blue',
  fontSize: 40,
  fontFamily: "tahoma"
}, 6, 10).setCoords();

canvas.add(text);
canvas.renderAll();