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.

oscarotero

Ok, finally I have something that might work:
https://github.com/marketgoo/sketch-copies/blob/master/src/replace.js

The function replace() changes the text of a layer maintaining the same formats. For example, if we have this layer:

You have 3 new notifications

And we want to change to:

Hello, you have 3 notifications

It can be done as following:

replace(textLayer, "Hello, you have <strong>3 notifications</strong>");

This allows to use the same copies in sketch and in the code.
Any suggestion to improve it will be welcome.
Thanks!

kevgski

Nice! What you are trying to do is a pretty tough problem because not all fonts have bold weights so the transformation that you are trying to do is lossy.

kevgski

Was playing around with this some more and wanted to see if I could just pass in arbitrary HTML with no relation to the selected text layer. The idea is to use :initWithHTML:documentAttributes on NSAttributedString https://developer.apple.com/documentation/foundation/nsattributedstring/1525953-initwithhtml?language=objc

const sketch = require("sketch");
const document = sketch.getSelectedDocument();
let MSAttributedStringColorAttribute = "MSAttributedStringColorAttribute"

let selection = document.selectedLayers.layers[0]
let currentFont = selection.sketchObject.font()
let color = selection.sketchObject.textColor()
const colorSpace = document.sketchObject.colorSpace()

// generate attributed string from HTML
// https://stackoverflow.com/a/23569944
let html = NSString.alloc().initWithString("hello <strong><em>testing</em> hi there</strong>")
let data = html.dataUsingEncoding(NSUTF8StringEncoding)
let attrString = NSMutableAttributedString.alloc().initWithHTML_documentAttributes(data,nil)

let block = __mocha__.createBlock_function('v40@?0@"NSDictionary"8{_NSRange=QQ}16^c32', (attrs,range,stop) => {
  // merge properties from html attributed string with current selected font
  // https://stackoverflow.com/a/51376546
  let oldFont = attrs.NSFont
  let newFontDescriptor = oldFont.fontDescriptor()
        .fontDescriptorWithFamily(currentFont.familyName())
        .fontDescriptorWithSymbolicTraits(oldFont.fontDescriptor().symbolicTraits())
  let newFont = NSFont.fontWithDescriptor_size(newFontDescriptor,currentFont.pointSize())
  attrString.removeAttribute_range(NSFontAttributeName,range.rangeValue())
  attrString.addAttribute_value_range(NSFontAttributeName,newFont,range.rangeValue())
})
let range = NSMakeRange(0,attrString.length())
attrString.enumerateAttributesInRange_options_usingBlock(range,nil,block)

// use selected text color to be applied to resulting attributed string
attrString.removeAttribute_range(NSForegroundColorAttributeName,range)
attrString.addAttribute_value_range(MSAttributedStringColorAttribute,color,range)

// convert attributedstring to sketch variant 
let msAttrString = MSAttributedString.alloc().initWithAttributedString_colorSpace_convert(attrString,colorSpace,false)
selection.sketchObject.attributedString = msAttrString

// fix for buggy inspector (probably need some validation method called)
document.sketchObject.actionsController().actionForID("MSEditAction").performAction(nil)
document.sketchObject.actionsController().actionForID("MSEditAction").performAction(nil)

Getting the color to be applied to the layer without changing the symbolicTraits or the bolding / italics / etc proved to be the hardest part. For some reason specifying the MSAttributedStringColorAttribute needs some extra validation in order for the inspector to show the proper color. To get around this, going into and out of the edit state at the end seems to fix it.

oscarotero

My idea wasn't evaluate the html elements (that it's imposible due things like Hello <span>Word</span>, Hello <strong class="red">Word</strong>, Hello <custom-element>Word</custom-element>, etc. Only detect the different fragments in the text (using html tags for that) and in the textLayout and correlate them, maintaining the current styles applied (the first fragment in html with the first fragment in the textLayout and so on). This allows to use the same copies in development and design, for example loading a json like this:

{
    "title": "Welcome to <strong>{ productName }</strong>"
}

Other thing that I want to do is adding the ability to insert variables in the copies (to replace { productName } with any value.

kevgski

Ahh I see, makes sense! I understand your solution a bit more now. 👍️