How can I find out if a word/s are bold within a TextLayer.

Robert

I'm trying to create a small plugin that parses a paragraph from sketch, and converts it into segments that I can then use in a calling application. I need to be able to distinguish bold, italics etc, and also underlines, but I can't find any of these on the text layer's style, or elsewhere on the object.

For example, given the string: 'The quick brown fox jumps over the lazy dog', it would need to return out of that an array of javascript objects, in this case three (I can't make the third segment underlined in this editor, but in my example it would be in sketch:

[{text: "The ", font:regular, colour:white }, 
{text: "quick brown fox", font:bold, colour:white }, 
{text: " jumps over the lazy dog", font:regular, colour:white, decoration: underline}
]

So far this is what I have:

var sketch = require('sketch')

var document = sketch.getSelectedDocument()

var selectedLayers = document.selectedLayers
var selectedCount = selectedLayers.length

if (selectedCount === 0) {
  console.log("There are no segments selected");
} else {
  console.log('Selected layers:');
  selectedLayers.forEach(function (layer, i) {
  
    var conversionObject = {
      "ix": i,
      "name": layer.name,
      "text": layer.text,
      "colour" : layer.style.textColor
    }

    //TODO: Push object into array    

    //console.log(layer.text.type)    
    console.log(layer.style.textColor);  
  })
}

Am I going about this the wrong way, is there a better way to get each individual word from the layer rather than viewing it as a whole?

kevgski

If you want to get the subparts of the text layer you can do this:

let sketch = require('sketch')
let doc = sketch.getSelectedDocument()
let selectedLayer = doc.selectedLayers.layers[0]

console.log(selectedLayer.fragments)

https://developer.sketch.com/reference/api/#fragments

If you want to be able to distinguish between styles then you will need to drop down to native APIs.

See this post here for more details: https://sketchplugins.com/d/1404-how-to-get-a-list-of-nsfonts-from-a-mixed-attributed-string/2

kevgski

So if you want to get an array of NSAttributedStrings rather than an array of NSFonts you could do something like this:

let sketch = require('sketch')
let doc = sketch.getSelectedDocument()
let selectedLayer = doc.selectedLayers.layers[0]

const attrStr = selectedLayer.sketchObject.attributedStringValue()
let limitRange = NSMakeRange(0, attrStr.length())
let effectiveRange = MOPointer.alloc().init()

const attrs = []
 
while (limitRange.length > 0) {
  attrStr.attribute_atIndex_longestEffectiveRange_inRange(
    NSFontAttributeName,
    limitRange.location,
    effectiveRange,
    limitRange
  )
  attrs.push(attrStr.attributedSubstringFromRange(effectiveRange.value()))
  limitRange = NSMakeRange(
    NSMaxRange(effectiveRange.value()),
    NSMaxRange(limitRange) - NSMaxRange(effectiveRange.value())
  )
}

console.log(attrs)

kevgski

Here is as far as I got. Hope it helps!

let sketch = require('sketch')
let doc = sketch.getSelectedDocument()
let selectedLayer = doc.selectedLayers.layers[0]

const attrStr = selectedLayer.sketchObject.attributedStringValue()
let limitRange = NSMakeRange(0, attrStr.length())
let effectiveRange = MOPointer.alloc().init()

const attrs = []
 
while (limitRange.length > 0) {

  let string,fontWeight, color
  let font = attrStr.attribute_atIndex_longestEffectiveRange_inRange(
    NSFontAttributeName,
    limitRange.location,
    effectiveRange,
    limitRange
  )

  let subAttrString = attrStr.attributedSubstringFromRange(effectiveRange.value())
  let subStringAttributes = subAttrString.attributesAtIndex_effectiveRange(
    0,
    NSMakeRange(0,subAttrString.length())
  )
  color = subStringAttributes.objectForKey("MSAttributedStringColorAttribute").hexValue()
  string = subAttrString.string()
  fontWeight = NSFontManager.sharedFontManager().weightOfFont(font)
  attrs.push({
    "text": string,
    "fontWeight": fontWeight,
    "colorHex": "#" + color,
    "range": NSStringFromRange(effectiveRange.value())
  })
  limitRange = NSMakeRange(
    NSMaxRange(effectiveRange.value()),
    NSMaxRange(limitRange) - NSMaxRange(effectiveRange.value())
  )
}

console.log(attrs)

You'll want to look at https://developer.apple.com/documentation/foundation/nsattributedstring?language=objc

Color was particularly annoying to get at since its not under NSForegroundColorAttributeName but rather a custom "MSAttributedStringColorAttribute"

Font weight was also annoying but its been solved before: https://sketchplugins.com/d/193-how-to-get-font-weight/4

kevgski

Looks like you can also use Sketch's .treeAsDictionary() as a handy workaround (https://sketchplugins.com/d/193-how-to-get-font-weight/9)

let sketch = require('sketch')
let doc = sketch.getSelectedDocument()
let selectedLayer = doc.selectedLayers.layers[0]

let attributes = selectedLayer.sketchObject.attributedString().treeAsDictionary().value.attributes

let convertedAttributes = []

for (let i=0; i< attributes.count(); i++) {
  let subStringAttrs = attributes[i]
  convertedAttributes.push({
    "name": subStringAttrs.NSFont.name,
    "family": subStringAttrs.NSFont.family,
    "color": subStringAttrs.MSAttributedStringColorAttribute.value,
    "length": subStringAttrs.length,
    "location": subStringAttrs.location,
    "text": subStringAttrs.text,
    "underline": subStringAttrs.NSUnderline || 0
  })
}

console.log(convertedAttributes)

but getting fontweight from the substring is still annoying

kevgski

My earlier attempt with the cocoa methods were incorrect. This should work better:

let sketch = require('sketch')
let doc = sketch.getSelectedDocument()
let selectedLayer = doc.selectedLayers.layers[0]

const attrStr = selectedLayer.sketchObject.attributedStringValue()
let limitRange = NSMakeRange(0, attrStr.length())
let effectiveRange = MOPointer.alloc().init()
let length = attrStr.length()

let substringProperties = []

while(limitRange.length > 0) {
  let attributes = attrStr.attributesAtIndex_longestEffectiveRange_inRange(
      limitRange.location,
      effectiveRange,
      limitRange)
  )
  let fontWeightValue = NSFontManager.sharedFontManager().weightOfFont(attributes.NSFont)
  let attributedSubstring = attrStr.attributedSubstringFromRange(effectiveRange.value())
  
  let property = {
      "string":attributedSubstring.string(),
      "fontWeight": fontWeightValue,
      "colorHex": "#" + attributes.MSAttributedStringColorAttribute.hexValue(),
      "range": { 
        "location": effectiveRange.value().location,
        "length": effectiveRange.value().length
      },
      "fontDisplayName": attributes.NSFont.displayName(),
      "fontFamilyName": attributes.NSFont.familyName(),
      "fontName": attributes.NSFont.fontName(),
      "underline":attributes.NSUnderline || 0,
  }

  substringProperties.push(property)
  
  limitRange = NSMakeRange(
        NSMaxRange(effectiveRange.value()),
        NSMaxRange(limitRange) - NSMaxRange(effectiveRange.value())
  )
}

console.log(substringProperties)

Robert

kevgski Thanks so much for this, works a treat.