JSFiddle - React, Tailwind, and code Playground

by Eugene Vilder

HTML

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

CSS

#paper {
  border: solid 1px red;
}

JavaScript

const canvas = new fabric.Canvas('paper');
var clone = fabric.util.object.clone;

fabric.DdpTextParagraph = fabric.util.createClass(fabric.Textbox, {
		ddpFirstCharStyle: {},
    xxx: [],
  	initialize: function (element, options) {
    	options || (options = {});
      this.callSuper('initialize', element, options);
      //this._ddpSetFirstCharStyle();
  	},
    ddpX: function(){
    	this.xxx = this._text.map((char, i)=>{
      	return {
        	char,
          style: this.getStyleAtPosition(i)
        }
      });
      
      console.log('____xxx', this.xxx);
    },
    _onInput: function(e) {
			this._ddpSetFirstCharStyle();
      this.callSuper('onInput', e);
      this._ddpRebuildTextStyles();
    },
    _ddpSetFirstCharStyle: function(){
    	const textLength = this._text.filter(char=>char !== "\n").length;
      
      console.log('_________textLength', textLength);
      if (textLength) {
	    this.set({
	      ddpFirstCharStyle: this.getStyleAtPosition(0)
      });
      
      }
    },
    _ddpRebuildTextStyles: function(){
      let lineIndex = 0, charIndex = 0;  
        
      for (let i=0; i<[...this._text].length; i++) {
      	const char = this._text[i];
        const curCharStyle = this.getStyleAtPosition(i)
        
        if (char === '\n') {
          const prevCharStyle = this.getStyleAtPosition(i-1) || curCharStyle;
          
          console.log('___prevCharStyle', prevCharStyle);
          this.styles[lineIndex] = this.styles[lineIndex] || {};
          this.styles[lineIndex][charIndex] = {
            ...this.styles[lineIndex][charIndex],
            ...prevCharStyle
          }
          lineIndex++;
          charIndex = 0;
        } else {
	        charIndex++;
        }
      }
      
      const textLength = this._text.filter(char=>char !== "\n").length;
      const newLinesOnly = this._text.filter(char=>char === "\n").length === this._text.length;
      if (!textLength || newLinesOnly) {
     ...