How to change the text of a Text layer with multiple styles?

oscarotero

Hi. I'm working on a plugin to handle and synchronize copies from an external source (json files, Google spreadsheets, etc). My problem is that there're some layers that can contain multiple styles, for example:

You have 3 new notifications

Here, the fragment "3 new" is in bold. If I update the text of the layer, this style is removed. How can I keep these fragments styles and only change the text?

I have been searching for a solution, and found this discussion: https://sketchplugins.com/d/1363-modify-text-content-while-preserving-varied-styling but, as @kevgski said, it crashes Sketch.

Is there any other way to do that?

kevgski

Looks like there is some discussion around it here: https://stackoverflow.com/questions/30267591/replace-entire-text-string-in-nsattributedstring-without-modifying-other-attribu/34628596#34628596

Changing the text of a mutable string will not do the jobs, since it will only keep the attributes of the first character and apply this to all of the text. Which seems to be by design, since it is part of the documentation.

So if you want to copy all attributes or change the string, you need to copy all attributes manually. Then you can create a MutableAttributedString and change the text. Afterwards you apply all the attributes to the new MutableAttributedString.

Haven't completely thought through all the necessary code for that but unfortunately what you are asking for isn't easily supported by the OS out of the box.

kevgski

Here's one approach for how you might doing this. Say your text layer looks like this:

Type hello something

and we want it to look like this

Type hi something

You could do something like this:

let sketch = require('sketch')
let document = sketch.getSelectedDocument()
let text = document.selectedLayers.layers[0]

document.sketchObject.actionsController().actionForID("MSEditAction").performAction(nil)

let range = NSMakeRange(5,5)
let textView = text.sketchObject.editingDelegate().textView()
textView.setSelectedRange(range)
textView.insertText("hi")

document.sketchObject.actionsController().actionForID("MSEditAction").performAction(nil)

Essentially it's just mimicing what you would do if you were to manually go in and edit the text.

Note: if folks know a better way to go in and out of the text editing state please do share! I seem to have forgotten how to do that.

kevgski

Another approach involves listing out all the attributes and their ranges.

let document = sketch.getSelectedDocument()
let text = document.selectedLayers.layers[0]

let attrStr = text.sketchObject.attributedStringValue()

let attributes = []
let block = __mocha__.createBlock_function('v40@?0@"NSDictionary"8{_NSRange=QQ}16^c32', (attrs,range,stop) => {
  attributes.push({
    "attributes": attrs,
    "range": range
  })
})
let range = NSMakeRange(0,attrStr.length())
attrStr.enumerateAttributesInRange_options_usingBlock(range,nil,block)
console.log(attributes)

Then depending on what part of the string you want to edit you can then also update the attributes and apply them to the layer.

let sketch = require('sketch')
let document = sketch.getSelectedDocument()
let text = document.selectedLayers.layers[0]

let attrStr = text.sketchObject.attributedStringValue()

let attributes = []
let block = __mocha__.createBlock_function('v40@?0@"NSDictionary"8{_NSRange=QQ}16^c32', (attrs,range,stop) => {
  attributes.push({
    "attributes": attrs,
    "range": range
  })
})
let range = NSMakeRange(0,attrStr.length())
attrStr.enumerateAttributesInRange_options_usingBlock(range,nil,block)

let newSubstr = "Hi"
// build a new substring from the attributes of the existing string that you want to use
let newAttrSubstr = NSAttributedString.new().initWithString_attributes(newSubstr,attributes[1].attributes)

let newAttrStr = NSMutableAttributedString.new().initWithAttributedString(attrStr)
// you'll need to know the range of the string that you are wanting to replace
newAttrStr.replaceCharactersInRange_withAttributedString(NSMakeRange(5,5),newAttrSubstr)

let colorSpace = document.sketchObject.colorSpace()
let sketchAttrString = MSAttributedString.alloc().initWithAttributedString_colorSpace_convert(newAttrStr,colorSpace,false)
sketchAttrString.attributedString = newAttrStr
text.sketchObject.setAttributedString(sketchAttrString)

I also figured out why Sketch was crashing from before. That's because that's because :setAttributedString on the text layer is expecting a MSAttributedString not a NSAttributedString. Making one isn't too difficult.

kevgski

If you don't wanna use that block nonsense I've done something similar in the past with a while loop and :attributesAtIndex:longestEffectiveRange:inRange

https://sketchplugins.com/d/2297-how-can-i-find-out-if-a-words-are-bold-within-a-textlayer/6

oscarotero

Hi, @kevgski
Many thanks for your help. I'll try it and let you know if it works. (I'm not familiarized with native macos code, but I'll give a try)

As a suggestion, I think it would be great if the javascript API had any helper for that. I can see that Text layer has the "fragments" property, not sure if it's exactly the same.

kevgski

As a suggestion, I think it would be great if the javascript API had any helper for that. I can see that Text layer has the "fragments" property, not sure if it's exactly the same.

Unfortunately, what you are asking about is pretty complicated and isn't supported out of the box from MacOS! :/ Personally, I think adding something like this to the JS API is a bit out of scope but can see how substring manipulations are pretty tricky.