Treat line height as float and move editor field

Extensions/BBText/JsExtension.js

@@ -71,6 +71,14 @@ module.exports = {
         .setLabel(_('Base size'))
         .setGroup(_('Font'));
 
+      objectProperties
+        .getOrCreate('lineHeight')
+        .setValue((objectContent.lineHeight || 0).toString())
+        .setType('number')
+        .setLabel(_('Line height'))
+        .setGroup(_('Font'))
+        .setAdvanced(true);
+
       objectProperties
         .getOrCreate('align')
         .setValue(objectContent.align)
@@ -115,6 +123,7 @@ module.exports = {
       text: '[b]bold[/b] [i]italic[/i] [size=15]smaller[/size] [font=times]times[/font] font\n[spacing=12]spaced out[/spacing]\n[outline=yellow]outlined[/outline] [shadow=red]DropShadow[/shadow] ',
       opacity: 255,
       fontSize: 20,
+      lineHeight: 0,
       visible: true,
       color: '0;0;0',
       fontFamily: 'Arial',
@@ -350,6 +359,19 @@ module.exports = {
         expressionLabel: _('Get the base font size'),
         expressionDescription: _('Get the base font size'),
       },
+      {
+        functionName: 'LineHeight',
+        iconPath: 'res/actions/textPadding24_black.png',
+        type: 'number',
+        instructionLabel: _('Line height'),
+        paramLabel: _('Line height'),
+        conditionDescription: _('Compare the line height of the text.'),
+        conditionSentence: _('the line height'),
+        actionDescription: _('Set line height'),
+        actionSentence: _('the line height'),
+        expressionLabel: _('Get the line height'),
+        expressionDescription: _('Get the line height'),
+      },
       {
         functionName: 'FontFamily',
         iconPath: 'res/actions/font24.png',
@@ -528,6 +550,7 @@ module.exports = {
             tagStyle: 'bbcode',
             wordWrapWidth: 250, // This value is the default wrapping width of the runtime object.
             align: 'left',
+            lineHeight: 0,
           },
         };
 
@@ -580,6 +603,12 @@ module.exports = {
           this._pixiObject.dirty = true;
         }
 
+        const lineHeight = object.content.lineHeight || 0;
+        if (lineHeight !== this._pixiObject.textStyles.default.lineHeight) {
+          this._pixiObject.textStyles.default.lineHeight = lineHeight;
+          this._pixiObject.dirty = true;
+        }
+
         const fontResourceName = object.content.fontFamily;
 
         if (this._fontResourceName !== fontResourceName) {

Extensions/BBText/bbtextruntimeobject-pixi-renderer.ts

@@ -32,6 +32,7 @@ namespace gdjs {
           wordWrap: runtimeObject._wrapping,
           wordWrapWidth: runtimeObject._wrappingWidth,
           align: runtimeObject._textAlign as PIXI.TextStyleAlign | undefined,
+          lineHeight: runtimeObject._lineHeight,
         },
       });
       instanceContainer
@@ -44,6 +45,7 @@ namespace gdjs {
       this.updatePosition();
       this.updateAngle();
       this.updateOpacity();
+      this.updateLineHeight();
     }
 
     getRendererObject() {
@@ -102,6 +104,13 @@ namespace gdjs {
       this._pixiObject.dirty = true;
     }
 
+    updateLineHeight(): void {
+      //@ts-ignore Private member usage.
+      this._pixiObject.textStyles.default.lineHeight = this._object._lineHeight;
+      this._pixiObject.dirty = true;
+      this.updatePosition();
+    }
+
     updatePosition(): void {
       if (this._object.isWrapping() && this._pixiObject.width !== 0) {
         const alignmentX =

Extensions/BBText/bbtextruntimeobject.ts

@@ -20,6 +20,7 @@ namespace gdjs {
       /** Alignment of the text: "left", "center" or "right" */
       align: 'left' | 'center' | 'right';
       verticalTextAlignment: 'top' | 'center' | 'bottom';
+      lineHeight?: float;
     };
   };
   export type BBTextObjectData = ObjectData & BBTextObjectDataType;
@@ -35,6 +36,7 @@ namespace gdjs {
     align: string;
     vta: string;
     hidden: boolean;
+    lh: float;
   };
 
   export type BBTextObjectNetworkSyncData = ObjectNetworkSyncData &
@@ -61,6 +63,7 @@ namespace gdjs {
 
     _textAlign: string;
     _verticalTextAlignment: string;
+    _lineHeight: float = 0;
 
     _renderer: gdjs.BBTextRuntimeObjectRenderer;
 
@@ -87,6 +90,7 @@ namespace gdjs {
       this._textAlign = objectData.content.align;
       this._verticalTextAlignment =
         objectData.content.verticalTextAlignment || 'top';
+      this._lineHeight = objectData.content.lineHeight || 0;
       this.hidden = !objectData.content.visible;
 
       this._renderer = new gdjs.BBTextRuntimeObjectRenderer(
@@ -142,6 +146,9 @@ namespace gdjs {
           newObjectData.content.verticalTextAlignment
         );
       }
+      if (oldObjectData.content.lineHeight !== newObjectData.content.lineHeight) {
+        this.setLineHeight(newObjectData.content.lineHeight || 0);
+      }
       return true;
     }
 
@@ -158,6 +165,7 @@ namespace gdjs {
         align: this._textAlign,
         vta: this._verticalTextAlignment,
         hidden: this.hidden,
+        lh: this._lineHeight,
       };
     }
 
@@ -196,6 +204,9 @@ namespace gdjs {
       if (this.hidden !== undefined) {
         this.hide(networkSyncData.hidden);
       }
+      if (this._lineHeight !== undefined) {
+        this.setLineHeight(networkSyncData.lh);
+      }
     }
 
     override extraInitializationFromInitialInstance(
@@ -267,6 +278,16 @@ namespace gdjs {
       return this._fontFamily;
     }
 
+    getLineHeight(): number {
+      return this._lineHeight;
+    }
+
+    setLineHeight(value: float): void {
+      this._lineHeight = value;
+      this._renderer.updateLineHeight();
+      this.invalidateHitboxes();
+    }
+
     /**
      * @deprecated Use `setTextAlignment` instead
      */

Extensions/BitmapText/JsExtension.js

@@ -103,6 +103,14 @@ module.exports = {
         .setLabel(_('Text scale'))
         .setGroup(_('Appearance'));
 
+      objectProperties
+        .getOrCreate('lineHeight')
+        .setValue((objectContent.lineHeight || 0).toString())
+        .setType('number')
+        .setLabel(_('Line height'))
+        .setGroup(_('Appearance'))
+        .setAdvanced(true);
+
       objectProperties
         .getOrCreate('tint')
         .setValue(objectContent.tint)
@@ -117,6 +125,7 @@ module.exports = {
       opacity: 255,
       scale: 1,
       fontSize: 20,
+      lineHeight: 0,
       tint: '255;255;255',
       bitmapFontResourceName: '',
       textureAtlasResourceName: '',
@@ -413,6 +422,21 @@ module.exports = {
       .setFunctionName('setWrappingWidth')
       .setGetter('getWrappingWidth');
 
+    object
+      .addExpressionAndConditionAndAction(
+        'number',
+        'LineHeight',
+        _('Line height'),
+        _('the line height of the text'),
+        _('the line height'),
+        '',
+        'res/actions/textPadding24_black.png'
+      )
+      .addParameter('object', _('Bitmap text'), 'BitmapTextObject', false)
+      .useStandardParameters('number', gd.ParameterOptions.makeNewOptions())
+      .setFunctionName('setLineHeight')
+      .setGetter('getLineHeight');
+
     return extension;
   },
 
@@ -674,6 +698,12 @@ module.exports = {
         const align = object.content.align;
         this._pixiObject.align = align;
 
+        const lineHeight = object.content.lineHeight || 0;
+        if (this._pixiObject.lineHeight !== lineHeight) {
+          this._pixiObject.lineHeight = lineHeight;
+          this._pixiObject.dirty = true;
+        }
+
         const color = object.content.tint;
         this._pixiObject.tint =
           objectsRenderingService.rgbOrHexToHexNumber(color);

Extensions/BitmapText/bitmaptextruntimeobject-pixi-renderer.ts

@@ -42,6 +42,7 @@ namespace gdjs {
       this.updateScale();
       this.updateWrappingWidth();
       this.updateTint();
+      this.updateLineHeight();
     }
 
     getRendererObject() {
@@ -134,6 +135,13 @@ namespace gdjs {
       this.updatePosition();
     }
 
+    updateLineHeight(): void {
+      // @ts-ignore
+      this._pixiObject.lineHeight = this._object._lineHeight;
+      this._pixiObject.dirty = true;
+      this.updatePosition();
+    }
+
     updateTextContent(): void {
       this._pixiObject.text = this._object._text;
       this.updatePosition();

Extensions/BitmapText/bitmaptextruntimeobject.ts

@@ -20,6 +20,8 @@ namespace gdjs {
       /** Alignment of the text. */
       align: 'left' | 'center' | 'right';
       verticalTextAlignment: 'top' | 'center' | 'bottom';
+      /** Line height of the text. */
+      lineHeight?: float;
     };
   };
   export type BitmapTextObjectData = ObjectData & BitmapTextObjectDataType;
@@ -35,6 +37,7 @@ namespace gdjs {
     wwidth: float;
     align: string;
     vta: string;
+    lh: float;
   };
 
   export type BitmapTextObjectNetworkSyncData = ObjectNetworkSyncData &
@@ -66,6 +69,7 @@ namespace gdjs {
     _wrappingWidth: float;
     _textAlign: string;
     _verticalTextAlignment: string;
+    _lineHeight: float = 0;
 
     _renderer: gdjs.BitmapTextRuntimeObjectPixiRenderer;
 
@@ -92,6 +96,7 @@ namespace gdjs {
       this._textAlign = objectData.content.align;
       this._verticalTextAlignment =
         objectData.content.verticalTextAlignment || 'top';
+      this._lineHeight = objectData.content.lineHeight || 0;
 
       this._renderer = new gdjs.BitmapTextRuntimeObjectRenderer(
         this,
@@ -151,6 +156,9 @@ namespace gdjs {
           newObjectData.content.verticalTextAlignment
         );
       }
+      if (oldObjectData.content.lineHeight !== newObjectData.content.lineHeight) {
+        this.setLineHeight(newObjectData.content.lineHeight || 0);
+      }
 
       return true;
     }
@@ -168,6 +176,7 @@ namespace gdjs {
         wwidth: this._wrappingWidth,
         align: this._textAlign,
         vta: this._verticalTextAlignment,
+        lh: this._lineHeight,
       };
     }
 
@@ -206,6 +215,9 @@ namespace gdjs {
       if (this._verticalTextAlignment !== undefined) {
         this.setVerticalTextAlignment(networkSyncData.vta);
       }
+      if (this._lineHeight !== undefined) {
+        this.setLineHeight(networkSyncData.lh);
+      }
     }
 
     /**
@@ -391,6 +403,16 @@ namespace gdjs {
       return this._opacity;
     }
 
+    getLineHeight(): number {
+      return this._lineHeight;
+    }
+
+    setLineHeight(value: float): void {
+      this._lineHeight = value;
+      this._renderer.updateLineHeight();
+      this.invalidateHitboxes();
+    }
+
     /**
      * Set the wrapping width.
      * @param width The new width in pixels.

Extensions/TextObject/Extension.cpp

@@ -355,6 +355,18 @@ void DeclareTextObjectExtension(gd::PlatformExtension& extension) {
       .UseStandardOperatorParameters("number",
                                      gd::ParameterOptions::MakeNewOptions());
 
+  obj.AddExpressionAndConditionAndAction("number", "LineHeight",
+                _("Line height"),
+                _("the line height of the text"),
+                _("the line height"),
+                _("Font"),
+                "res/actions/textPadding24_black.png")
+      .AddParameter("object", _("Object"), "Text")
+      .UseStandardParameters(
+          "number",
+          gd::ParameterOptions::MakeNewOptions().SetDescription(
+              _("Line height")));
+
   obj.AddAction("SetTextAlignment",
                 _("Alignment"),
                 _("Change the text alignment of a multiline text object."),

Extensions/TextObject/JsExtension.cpp

@@ -62,6 +62,14 @@ class TextObjectJsExtension : public gd::PlatformExtension {
     GetAllConditionsForObject("TextObject::Text")["TextObject::Padding"]
         .SetFunctionName("getPadding");
 
+    GetAllExpressionsForObject("TextObject::Text")["LineHeight"]
+        .SetFunctionName("getLineHeight");
+    GetAllConditionsForObject("TextObject::Text")["TextObject::Text::LineHeight"]
+        .SetFunctionName("getLineHeight");
+    GetAllActionsForObject("TextObject::Text")["TextObject::Text::SetLineHeight"]
+        .SetFunctionName("setLineHeight")
+        .SetGetter("getLineHeight");
+
     GetAllActionsForObject("TextObject::Text")["TextObject::SetTextAlignment"]
         .SetFunctionName("setTextAlignment")
         .SetGetter("getTextAlignment");

Extensions/TextObject/TextObject.cpp

@@ -18,30 +18,17 @@ This project is released under the MIT License.
 using namespace std;
 
 TextObject::TextObject()
-    : text("Text"),
-      characterSize(20),
-      fontName(""),
-      smoothed(true),
-      bold(false),
-      italic(false),
-      underlined(false),
-      color("0;0;0"),
-      textAlignment("left"),
-      verticalTextAlignment("top"),
-      isOutlineEnabled(false),
-      outlineThickness(2),
-      outlineColor("255;255;255"),
-      isShadowEnabled(false),
-      shadowColor("0;0;0"),
-      shadowOpacity(127),
-      shadowAngle(90),
-      shadowDistance(4),
-      shadowBlurRadius(2) {}
+    : text("Text"), characterSize(20), fontName(""), smoothed(true),
+      bold(false), italic(false), underlined(false), color("0;0;0"),
+      textAlignment("left"), verticalTextAlignment("top"),
+      isOutlineEnabled(false), outlineThickness(2), outlineColor("255;255;255"),
+      isShadowEnabled(false), shadowColor("0;0;0"), shadowOpacity(127),
+      shadowAngle(90), shadowDistance(4), shadowBlurRadius(2), lineHeight(0) {}
 
 TextObject::~TextObject() {};
 
-bool TextObject::UpdateProperty(const gd::String& propertyName,
-                                const gd::String& newValue) {
+bool TextObject::UpdateProperty(const gd::String &propertyName,
+                                const gd::String &newValue) {
   if (propertyName == "text") {
     text = newValue;
     return true;
@@ -110,6 +97,10 @@ bool TextObject::UpdateProperty(const gd::String& propertyName,
     shadowBlurRadius = newValue.To<double>();
     return true;
   }
+  if (propertyName == "lineHeight") {
+    lineHeight = newValue.To<double>();
+    return true;
+  }
 
   return false;
 }
@@ -164,7 +155,8 @@ std::map<gd::String, gd::PropertyDescriptor> TextObject::GetProperties() const {
       .AddChoice("center", _("Center"))
       .AddChoice("right", _("Right"))
       .SetLabel(_("Alignment"))
-      .SetDescription(_("Alignment of the text when multiple lines are displayed"))
+      .SetDescription(
+          _("Alignment of the text when multiple lines are displayed"))
       .SetGroup(_("Font"))
       .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
@@ -178,6 +170,14 @@ std::map<gd::String, gd::PropertyDescriptor> TextObject::GetProperties() const {
       .SetGroup(_("Font"))
       .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
+  objectProperties["lineHeight"]
+      .SetValue(gd::String::From(lineHeight))
+      .SetType("number")
+      .SetLabel(_("Line height"))
+      .SetGroup(_("Font"))
+      .SetAdvanced()
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
+
   objectProperties["isOutlineEnabled"]
       .SetValue(isOutlineEnabled ? "true" : "false")
       .SetType("boolean")
@@ -258,16 +258,17 @@ std::map<gd::String, gd::PropertyDescriptor> TextObject::GetProperties() const {
   return objectProperties;
 }
 
-void TextObject::DoUnserializeFrom(gd::Project& project,
-                                   const gd::SerializerElement& element) {
+void TextObject::DoUnserializeFrom(gd::Project &project,
+                                   const gd::SerializerElement &element) {
   // Compatibility with GD <= 5.3.188
   // end of compatibility code
   bool isLegacy = !element.HasChild("content");
-  auto& content = isLegacy ? element : element.GetChild("content");
+  auto &content = isLegacy ? element : element.GetChild("content");
 
   SetFontName(content.GetChild("font", 0, "Font").GetValue().GetString());
   SetTextAlignment(content.GetChild("textAlignment").GetValue().GetString());
-  SetVerticalTextAlignment(content.GetStringAttribute("verticalTextAlignment", "top"));
+  SetVerticalTextAlignment(
+      content.GetStringAttribute("verticalTextAlignment", "top"));
   SetCharacterSize(content.GetChild("characterSize", 0, "CharacterSize")
                        .GetValue()
                        .GetInt());
@@ -275,6 +276,7 @@ void TextObject::DoUnserializeFrom(gd::Project& project,
   bold = content.GetBoolAttribute("bold");
   italic = content.GetBoolAttribute("italic");
   underlined = content.GetBoolAttribute("underlined");
+  SetLineHeight(content.GetDoubleAttribute("lineHeight", 0));
 
   // Compatibility with GD <= 5.3.188
   if (isLegacy) {
@@ -307,7 +309,7 @@ void TextObject::DoUnserializeFrom(gd::Project& project,
   }
 }
 
-void TextObject::DoSerializeTo(gd::SerializerElement& element) const {
+void TextObject::DoSerializeTo(gd::SerializerElement &element) const {
   // Allow users to rollback to 5.3.188 or older releases without loosing their
   // configuration.
   // TODO Remove this in a few releases.
@@ -323,9 +325,9 @@ void TextObject::DoSerializeTo(gd::SerializerElement& element) const {
             "r", colorComponents.size() == 3 ? colorComponents[0].To<int>() : 0)
         .SetAttribute(
             "g", colorComponents.size() == 3 ? colorComponents[1].To<int>() : 0)
-        .SetAttribute(
-            "b",
-            colorComponents.size() == 3 ? colorComponents[2].To<int>() : 0);
+        .SetAttribute("b", colorComponents.size() == 3
+                               ? colorComponents[2].To<int>()
+                               : 0);
     element.SetAttribute("smoothed", smoothed);
     element.SetAttribute("bold", bold);
     element.SetAttribute("italic", italic);
@@ -333,11 +335,12 @@ void TextObject::DoSerializeTo(gd::SerializerElement& element) const {
   }
   // end of compatibility code
 
-  auto& content = element.AddChild("content");
+  auto &content = element.AddChild("content");
   content.AddChild("text").SetValue(GetText());
   content.AddChild("font").SetValue(GetFontName());
   content.AddChild("textAlignment").SetValue(GetTextAlignment());
-  content.AddChild("verticalTextAlignment").SetValue(GetVerticalTextAlignment());
+  content.AddChild("verticalTextAlignment")
+      .SetValue(GetVerticalTextAlignment());
   content.AddChild("characterSize").SetValue(GetCharacterSize());
   content.AddChild("color").SetValue(GetColor());
 
@@ -345,6 +348,7 @@ void TextObject::DoSerializeTo(gd::SerializerElement& element) const {
   content.SetAttribute("bold", bold);
   content.SetAttribute("italic", italic);
   content.SetAttribute("underlined", underlined);
+  content.SetAttribute("lineHeight", lineHeight);
 
   content.SetAttribute("isOutlineEnabled", isOutlineEnabled);
   content.SetAttribute("outlineThickness", outlineThickness);
@@ -358,6 +362,6 @@ void TextObject::DoSerializeTo(gd::SerializerElement& element) const {
   content.SetAttribute("shadowBlurRadius", shadowBlurRadius);
 }
 
-void TextObject::ExposeResources(gd::ArbitraryResourceWorker& worker) {
+void TextObject::ExposeResources(gd::ArbitraryResourceWorker &worker) {
   worker.ExposeFont(fontName);
 }

Extensions/TextObject/TextObject.h

@@ -67,6 +67,9 @@ class GD_EXTENSION_API TextObject : public gd::ObjectConfiguration {
     verticalTextAlignment = verticalTextAlignment_;
   };
 
+  void SetLineHeight(double value) { lineHeight = value; };
+  double GetLineHeight() const { return lineHeight; };
+
   bool IsBold() const { return bold; };
   void SetBold(bool enable) { bold = enable; };
   bool IsItalic() const { return italic; };
@@ -137,4 +140,5 @@ class GD_EXTENSION_API TextObject : public gd::ObjectConfiguration {
   double shadowAngle;
   double shadowDistance;
   double shadowBlurRadius;
+  double lineHeight;
 };

Extensions/TextObject/textruntimeobject-pixi-renderer.ts

@@ -64,6 +64,7 @@ namespace gdjs {
       style.wordWrap = this._object._wrapping;
       style.wordWrapWidth = this._object._wrappingWidth;
       style.breakWords = true;
+      style.lineHeight = this._object._lineHeight;
       style.stroke = gdjs.rgbToHexNumber(
         this._object._outlineColor[0],
         this._object._outlineColor[1],

Extensions/TextObject/textruntimeobject.ts

@@ -8,6 +8,7 @@ namespace gdjs {
     content: {
       /** The size of the characters */
       characterSize: number;
+      lineHeight?: number;
       /** The font name */
       font: string;
       /** Is Bold? */
@@ -43,6 +44,7 @@ namespace gdjs {
     str: string;
     o: float;
     cs: number;
+    lh: float;
     fn: string;
     b: boolean;
     i: boolean;
@@ -101,6 +103,7 @@ namespace gdjs {
     _shadowAngle: float;
     _shadowBlur: float;
 
+    _lineHeight: float = 0;
     _padding: integer = 5;
     _str: string;
     _renderer: gdjs.TextRuntimeObjectRenderer;
@@ -128,6 +131,7 @@ namespace gdjs {
       this._str = content.text;
       this._textAlign = content.textAlignment || 'left';
       this._verticalTextAlignment = content.verticalTextAlignment || 'top';
+      this._lineHeight = content.lineHeight || 0;
 
       this._isOutlineEnabled = content.isOutlineEnabled;
       this._outlineThickness = content.outlineThickness;
@@ -184,6 +188,9 @@ namespace gdjs {
       ) {
         this.setVerticalTextAlignment(newContent.verticalTextAlignment);
       }
+      if (oldContent.lineHeight !== newContent.lineHeight) {
+        this.setLineHeight(newContent.lineHeight || 0);
+      }
       if (oldContent.isOutlineEnabled !== newContent.isOutlineEnabled) {
         this.setOutlineEnabled(newContent.isOutlineEnabled);
       }
@@ -220,6 +227,7 @@ namespace gdjs {
         str: this._str,
         o: this.opacity,
         cs: this._characterSize,
+        lh: this._lineHeight,
         fn: this._fontName,
         b: this._bold,
         i: this._italic,
@@ -255,6 +263,9 @@ namespace gdjs {
       if (networkSyncData.cs !== undefined) {
         this.setCharacterSize(networkSyncData.cs);
       }
+      if (networkSyncData.lh !== undefined) {
+        this.setLineHeight(networkSyncData.lh);
+      }
       if (networkSyncData.fn !== undefined) {
         this.setFontName(networkSyncData.fn);
       }
@@ -913,6 +924,23 @@ namespace gdjs {
       this._renderer.updateStyle();
     }
 
+    /**
+     * Get line height of the text object.
+     */
+    getLineHeight(): number {
+      return this._lineHeight;
+    }
+
+    /**
+     * Set line height of the text object.
+     * @param value The new line height in pixels.
+     */
+    setLineHeight(value: float): void {
+      this._lineHeight = value;
+      this._renderer.updateStyle();
+      this.invalidateHitboxes();
+    }
+
     /**
      * Get padding of the text object.
      * @return number of pixels around the text before it gets cropped

newIDE/app/src/ObjectEditor/Editors/TextEditor.js

@@ -56,12 +56,12 @@ export default class TextEditor extends React.Component<EditorProps, void> {
       resourceManagementProps,
       renderObjectNameField,
     } = this.props;
-    const textObjectConfiguration = gd.asTextObjectConfiguration(
-      objectConfiguration
-    );
+    const textObjectConfiguration =
+      gd.asTextObjectConfiguration(objectConfiguration);
 
     const textAlignment = textObjectConfiguration.getTextAlignment();
-    const verticalTextAlignment = textObjectConfiguration.getVerticalTextAlignment();
+    const verticalTextAlignment =
+      textObjectConfiguration.getVerticalTextAlignment();
 
     return (
       <ColumnStackLayout noMargin>
@@ -82,7 +82,7 @@ export default class TextEditor extends React.Component<EditorProps, void> {
               margin="none"
               style={styles.sizeTextField}
               value={textObjectConfiguration.getCharacterSize()}
-              onChange={value => {
+              onChange={(value) => {
                 textObjectConfiguration.setCharacterSize(
                   parseInt(value, 10) || 0
                 );
@@ -99,7 +99,7 @@ export default class TextEditor extends React.Component<EditorProps, void> {
                 textObjectConfiguration.getColor(),
                 255
               )}
-              onChangeComplete={color => {
+              onChangeComplete={(color) => {
                 const rgbString = rgbColorToRGBString(color.rgb);
                 textObjectConfiguration.setColor(rgbString);
                 this.forceUpdate();
@@ -211,13 +211,23 @@ export default class TextEditor extends React.Component<EditorProps, void> {
           fullWidth
           canBeReset
           initialResourceName={textObjectConfiguration.getFontName()}
-          onChange={resourceName => {
+          onChange={(resourceName) => {
             textObjectConfiguration.setFontName(resourceName);
             this.forceUpdate();
           }}
           floatingLabelText={<Trans>Choose a font</Trans>}
           hintText={<Trans>Choose a font</Trans>}
         />
+        <SemiControlledTextField
+          floatingLabelText={<Trans>Line height</Trans>}
+          type="number"
+          fullWidth
+          value={textObjectConfiguration.getLineHeight()}
+          onChange={(value) => {
+            textObjectConfiguration.setLineHeight(parseFloat(value) || 0);
+            this.forceUpdate();
+          }}
+        />
         <Line noMargin>
           <SemiControlledTextField
             floatingLabelText={<Trans>Initial text to display</Trans>}
@@ -230,7 +240,7 @@ export default class TextEditor extends React.Component<EditorProps, void> {
             rows={8}
             rowsMax={8}
             value={textObjectConfiguration.getText()}
-            onChange={value => {
+            onChange={(value) => {
               textObjectConfiguration.setText(value);
               this.forceUpdate();
               this.props.onSizeUpdated();
@@ -259,7 +269,7 @@ export default class TextEditor extends React.Component<EditorProps, void> {
               disableAlpha
               fullWidth
               color={textObjectConfiguration.getOutlineColor()}
-              onChange={color => {
+              onChange={(color) => {
                 const rgbString =
                   color.length === 0 ? '' : rgbOrHexToRGBString(color);
                 textObjectConfiguration.setOutlineColor(rgbString);
@@ -273,7 +283,7 @@ export default class TextEditor extends React.Component<EditorProps, void> {
               floatingLabelText={<Trans>Thickness</Trans>}
               type="number"
               value={textObjectConfiguration.getOutlineThickness()}
-              onChange={value => {
+              onChange={(value) => {
                 textObjectConfiguration.setOutlineThickness(
                   parseInt(value, 10) || 0
                 );
@@ -304,7 +314,7 @@ export default class TextEditor extends React.Component<EditorProps, void> {
               floatingLabelText={<Trans>Distance</Trans>}
               type="number"
               value={textObjectConfiguration.getShadowDistance()}
-              onChange={value => {
+              onChange={(value) => {
                 textObjectConfiguration.setShadowDistance(
                   parseInt(value, 10) || 0
                 );
@@ -318,7 +328,7 @@ export default class TextEditor extends React.Component<EditorProps, void> {
               floatingLabelText={<Trans>Angle</Trans>}
               type="number"
               value={textObjectConfiguration.getShadowAngle()}
-              onChange={value => {
+              onChange={(value) => {
                 textObjectConfiguration.setShadowAngle(
                   parseInt(value, 10) || 0
                 );
@@ -334,7 +344,7 @@ export default class TextEditor extends React.Component<EditorProps, void> {
               disableAlpha
               fullWidth
               color={textObjectConfiguration.getShadowColor()}
-              onChange={color => {
+              onChange={(color) => {
                 const rgbString =
                   color.length === 0 ? '' : rgbOrHexToRGBString(color);
                 textObjectConfiguration.setShadowColor(rgbString);
@@ -348,7 +358,7 @@ export default class TextEditor extends React.Component<EditorProps, void> {
               floatingLabelText={<Trans>Opacity (0 - 255)</Trans>}
               type="number"
               value={textObjectConfiguration.getShadowOpacity()}
-              onChange={value => {
+              onChange={(value) => {
                 textObjectConfiguration.setShadowOpacity(
                   parseInt(value, 10) || 0
                 );
@@ -363,7 +373,7 @@ export default class TextEditor extends React.Component<EditorProps, void> {
             floatingLabelText={<Trans>Blur radius</Trans>}
             type="number"
             value={textObjectConfiguration.getShadowBlurRadius()}
-            onChange={value => {
+            onChange={(value) => {
               textObjectConfiguration.setShadowBlurRadius(
                 parseInt(value, 10) || 0
               );

newIDE/app/src/ObjectsRendering/Renderers/RenderedTextInstance.js

@@ -13,6 +13,7 @@ export default class RenderedTextInstance extends RenderedInstance {
   _isItalic: boolean = false;
   _isBold: boolean = false;
   _characterSize: number = 0;
+  _lineHeight: number = 0;
   _wrapping: boolean = false;
   _wrappingWidth: number = 0;
   _styleFontDirty: boolean = true;
@@ -97,6 +98,7 @@ export default class RenderedTextInstance extends RenderedInstance {
       textObjectConfiguration.isItalic() !== this._isItalic ||
       textObjectConfiguration.isBold() !== this._isBold ||
       textObjectConfiguration.getCharacterSize() !== this._characterSize ||
+      textObjectConfiguration.getLineHeight() !== this._lineHeight ||
       textObjectConfiguration.getTextAlignment() !== this._textAlignment ||
       textObjectConfiguration.getVerticalTextAlignment() !==
         this._verticalTextAlignment ||
@@ -118,6 +120,7 @@ export default class RenderedTextInstance extends RenderedInstance {
       this._isItalic = textObjectConfiguration.isItalic();
       this._isBold = textObjectConfiguration.isBold();
       this._characterSize = textObjectConfiguration.getCharacterSize();
+      this._lineHeight = textObjectConfiguration.getLineHeight();
       this._textAlignment = textObjectConfiguration.getTextAlignment();
       this._verticalTextAlignment = textObjectConfiguration.getVerticalTextAlignment();
       this._color = textObjectConfiguration.getColor();
@@ -172,6 +175,7 @@ export default class RenderedTextInstance extends RenderedInstance {
       style.wordWrapWidth = this._wrappingWidth <= 1 ? 1 : this._wrappingWidth;
       style.breakWords = true;
       style.align = this._textAlignment;
+      style.lineHeight = this._lineHeight;
 
       style.stroke = rgbStringToHexNumber(this._outlineColor);
       style.strokeThickness = this._isOutlineEnabled