Text line-height, character and paragraph

[eeegor]

First of all, thank you! This library is awesome 👍

I was wondering if it's possible to use props for text paragraph styles?

In the json output (from sketch-json) it looks like this:

"textStyle": {
  "_class": "textStyle",
  "encodedAttributes": {
    ...
    "paragraphStyle": {
      "_class": "paragraphStyle",
      "alignment": 0,
      "maximumLineHeight": 40,
      "minimumLineHeight": 40,
      "paragraphSpacing": 100
    }
  }
},

Thanks

[dbanksdesign]

So it looks like you can't set it in the constructor... yet. But we should definitely add that in. Here is where the constructor is populating those fields: https://github.com/amzn/sketch-constructor/blob/master/models/TextStyle/TextStyle.js#L49 Just something we haven't implemented yet.

In the meantime you can always construct the TextStyle class and then directly set those attributes:

const textStyle = new TextStyle({ /* args */ });
textStyle.encodedAttributes.paragraphStyle.maximumLineHeight = 40;

That is obviously gross and not how I envisioned people using this library. If you are keen to, you can open up a PR and we can get that in. If not, I can probably put it together sometime next week. What I would expect is the constructor to take those attributes and set them like this:

const textStyle = new TextStyle({
  maxiumLineHeight: 40,
  minimumLineHeight: 40,
  paragraphSpacing: 100
});

[eeegor]

@dbanksdesign thanks for the detailed instructions 👏, will try

[eeegor]

@dbanksdesign tried to follow your suggestion, but with no success so far...

1. First problem I run into is here: new Text() with style property causes Sketch to crash #25, my PR fix: wrap args.style with Style.TextStyle #26 solves this
2. If I do

const textStyle = new TextStyle({ /* args */ });
textStyle.encodedAttributes.paragraphStyle.maximumLineHeight = 40;

and inspect the Text, indeed I see the correct paragraphStyles, but the rendered Sketch file does not use the provided values 😢

I was wondering if attributedString has something to do with it – If I manually create a Sketch file with an Text Element with line-height, and convert the .sketch to .zip and then to json it has my values in both places: encodedAttributes.paragraphStyle & attributedString.attributes[0].attributes.paragraphStyle

Thanks for help!

[dbanksdesign]

ahh good to know about the attributedString thing. We kind of do something similar in the Text component where we just apply the styles to both the TextStyle and attributed string:
https://github.com/amzn/sketch-constructor/blob/master/models/Text/Text.js#L81

But we don't add the paragraphStyle in there... so we gotta do that.

Glad someone is finding these issues...