Adjust fabricjs text box size to match the text selection

Question

I have a piece of code that creates a new Textbox this way:

new fabric.Textbox('Ajouter du texte')

The problem is the text box is to small compare to its content:

If I set a fixed width, I get some padding around:

new fabric.Textbox('Ajouter du texte', {width: 350})

How can I adjust the text box size to match the text selection size? I can't find anything about how to get the selection dimensions.

I'm using fabric version 4.0.0-beta.5.

Answer 1

The solution I keep for now is to increase the width gradually till I get no more than 1 line:

const text = new fabric.Textbox("Ajouter du texte")

while (text.textLines.length > 1) {
  text.set({width: text.getScaledWidth() + 1})
}

Feel free to propose a better solution, so I can update the accepted answer.

[EDIT]

To make it work during text edition:

function adjustTextWidth(evt: fabric.IEvent) {
  if (evt.target instanceof fabric.IText) {
    const text = evt.target.text || ""
    while (evt.target.textLines.length > text.split("\n").length) {
      evt.target.set({width: evt.target.getScaledWidth() + 1})
    }
  }
}

canvas.on("text:changed", adjustTextWidth)

[EDIT2]

I found a better way to achieve my goal:

fabric.Textbox.prototype._wordJoiners = /[]/;

This way, the space is not considered a word joiner and the text breaks only when the user types Enter. I also added this function to adjust the textbox width when text is removed:

function fitTextboxToContent(text: fabric.IText) {
  const textLinesMaxWidth = text.textLines.reduce((max, _, i) => Math.max(max, text.getLineWidth(i)), 0);
  text.set({width: textLinesMaxWidth});
}