How to make jointJs rectangle text responsive so that the text remains inside a rectangle? - jointjs

Question

I am creating a rectangle and writing a text inside it, but the text comes out of the rectangle:
Is there any way to keep the text within the rectangle in jointJs?
Here is my code:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({ el: $('#paper'), width: 650, height: 250, gridSize: 1, model: graph });
var r1 = new joint.shapes.basic.Rect({
position: { x: 20, y: 20 },
size: { width: 200, height: 200 },
attrs: { rect: { fill: '#E74C3C' }, text: { text: 'this text is coming out from rectangle' ,
fontSize: 14,
fill: '#2b7aff'} }
});
graph.addCells([r1]);

Answer 1

Actually i found the answer of my question from jointJs documentation
https://resources.jointjs.com/docs/jointjs/v2.0/joint.html#util.breakText
but there is a problem they(jointjs) described only two parameters
as
joint.util.breakText('this is quite a long text', { width: 50 })
// 'this is\nquite a\nlong\ntext'
but actually there is a third parameter "styles" that is also required
so actual solution is
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({ el: $('#paper'), width: 650, height: 250, gridSize: 1, model: graph });
var text = joint.util.breakText('This is very very very very very very very very very very very very very very very very very very very very very very long text', { width: 20, height:20}, {lineHeight: 1.2});
var r1 = new joint.shapes.basic.Rect({
position: { x: 70, y: 30 },
size: { width: 100, height: 80 },
attrs: { rect: { fill: '#F1C40F' }, text: { text: text } }
});
r1.embed(r1);
graph.addCells([r1]);