How to change text in multiple lines / places of a Textbox in FabricJS? - algorithm

Question

I need to replace text of particular selection when the input value has been changed.
On the initial rendering, I get an object of selections and fields.
Secondly, inputs get values of fields.
Assume I'm changing a value of the Line input, since this field controls two lines, both of those green texts should be replaced with the new one.
http://jsfiddle.net/hkvmLwfu/
Tnx
////////////////////////////////////////////////////////////////////////
/////////////// THIS FUNCTION NEEDS TO BE DEVELOPED ////////////////////
////////////////////////////////////////////////////////////////////////
function replaceTextBySelection(fieldId, fieldValue, canvas, text){
}
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
var canvas = new fabric.Canvas('paper');
canvas.setHeight(300);
canvas.setWidth(500);
var text = new fabric.Textbox('Sample Line 1 Line 2 Line 3', {
left: 50,
top: 10,
fontFamily: 'arial',
fill: '#333',
fontSize: 50
});
canvas.add(text);
canvas.renderAll();
const fields = {
FIELD_1: {
value: "Sample",
color: '#F00'
},
FIELD_2: {
value: "Line",
color: '#0F0'
}
}
selections = [
{
rowId: 0,
offset: 0,
length: 6,
field: "FIELD_1"
},
{
rowId: 1,
offset: 0,
length: 4,
field: "FIELD_2"
},
{
rowId: 2,
offset: 0,
length: 4,
field: "FIELD_2"
}
]
selections.map((obj)=>{
text.setSelectionStart(obj.offset);
text.setSelectionEnd(obj.offset + obj.length);
text.setSelectionStyles();
for (let i = text.selectionStart; i < text.selectionEnd; i++) {
text.insertCharStyleObject(obj.rowId, i, {
textBackgroundColor: fields[obj.field].color
})
}
canvas.renderAll();
return obj;
});
$('#FIELD_1').val( fields['FIELD_1'].value );
$('#FIELD_2').val( fields['FIELD_2'].value );
$("input").keyup(function(t){
replaceTextBySelection(this.id, this.value, canvas, text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<input type="text" id="FIELD_1" />
<br/>
<input type="text" id="FIELD_2" />

Answer 1

Your example complicates things because the selections object reasons about rows, but the text doesn't actually contain rows, only spaces that get wrapped to a new line.
It gets easier if you define your text instead as
var text = new fabric.Textbox('Sample\nLine 1\nLine 2\nLine 3', {
left: 50,
top: 10,
fontFamily: 'arial',
fill: '#333',
fontSize: 50
});
Using this text I have created a functional example: http://jsfiddle.net/hkvmLwfu/12/. I'm not sure this is entirely how you want it, but you should be able to pick it up from here.

Answer 2

Just use \n where you want to break the line. It will work like <br/>.