Image Attachment to a Text Object

100%

Image Attachment to a Text Object

✓ Published0🌍 Public

Last edited Jun 10, 2020

Created on Jun 10, 2020

This example demonstrates how to embed an image attachment directly into a specific position within a text object in Sketch. The code uses the Sketch API to access the selected layer and its editing delegate, then modifies its `NSTextStorage` by replacing a character range with an attributed string containing the attachment. It relies on `NSFileWrapper`, `NSTextAttachment`, and `NSAttributedString` to load and insert the image, setting its display bounds. The image path is hardcoded to a local file, and the insertion occurs at character index 4 while editing is active.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist d491c1b772929648bf84c486fc5a745c

This sketch plugin example demonstrates modifying font attributes, specifically applying small-caps settings, to text within a selected layer in Sketch. It shows how to retrieve font information for each character range in a text layer using the Sketch API, apply a new font descriptor with the desired attribute via `NSFontDescriptor` and `NSDictionary`, and update the text storage with the modified attributes. The code relies on the `sketch` library and Sketch’s internal `NSFont` and `TextStorage` classes to perform the attribute substitution.

KKevinGutowski

66% match

Loading thumbnail…

NSAttributedString attributes

This example demonstrates programmatic manipulation of rich text attributes within a Sketch document. It shows how to access selected layers, locate the application’s Plugins menu, and log the first menu item’s title. The code then explores setting a variety of text attributes—such as superscript, underline style, stroke width, and writing direction—on an `NSAttributedString` object loaded from an RTF file. The implementation relies on Sketch’s JavaScript API, including `sketch.getSelectedDocument()`, `NSAttributedString`, and methods like `addAttribute_value_forRange`, with several experimental calls commented out.

KKevinGutowski

64% match

Loading thumbnail…

Attempting to set font attributes during selection

This example demonstrates how to modify font attributes of selected text within a Sketch document. It uses the Sketch JavaScript API and the CoreText framework to apply small-caps styling to the first five characters of a text layer. The script accesses the document's selected text layer, checks if it is in editing mode, then retrieves the text storage and font descriptor to construct a modified font with the small-caps feature enabled. It applies the new font attribute to the specified range and finalizes the changes with the text storage editing methods.

KKevinGutowski

63% match

Loading thumbnail…

Gist 9d6f5a0980393c12aca5243aae8947e0

This example demonstrates how to modify font attributes for a selected range of text within a Sketch document using the Sketch JavaScript API. It applies small-caps styling by accessing the text layer’s editing delegate and text storage, then constructs an `NSFontFeatureSettingsAttribute` dictionary to adjust the font descriptor. The code specifically uses `NSFontFeatureTypeIdentifierKey` and `NSFontFeatureSelectorIdentifierKey` for the `kLowerCaseType` and `kLowerCaseSmallCapsSelector` settings, then creates a new `NSFont` with `NSFontDescriptor` and applies it to the selected range via `addAttributes:range:`.

KKevinGutowski

61% match

Loading thumbnail…

Add a URL to a text layer

This example shows how to add hyperlinks to text layers in Sketch by assigning URLs directly to selected text or its active text range. When a user selects one or more text layers and runs the script, it prompts for a URL, then applies that link either to the entire layer or to the specific highlighted portion when text is being edited. The code uses the Sketch JavaScript API, specifically `sketch.getSelectedDocument()`, `layer.sketchObject.addAttribute_value()`, and `UI.getInputFromUser()`, along with `NSLinkAttributeName` and the `textStorage.addAttribute_value_range()` method for formatting range selection. After updating, it reloads the inspector to reflect the changes.

KKevinGutowski

61% match

Loading thumbnail…

Get Insertion Point Color

This example shows how to retrieve the color of the text insertion point caret within Sketch’s text-editing mode. It reads the currently selected text layer and, if the layer is actively being edited, logs the numeric caret color returned by the native `textView.insertionPointColor()` API. The snippet relies on Sketch’s CoreText framework, using `sketch/ui` to display a warning message when no editable text is selected and `sketch/dom` to access the selected layer’s editing delegate. The code is provided as a single JavaScript file, with no external dependencies or data source.

KKevinGutowski

59% match

Loading thumbnail…

Change font size programmatically

This example demonstrates how to programmatically change the font size of a selected text layer within a Sketch document. It shows the direct manipulation of a text layer’s typographic properties through the Sketch JavaScript API. The code uses the `sketch` library to access the document, retrieves the first selected layer, and applies a new font size using `NSFont.fontWithDescriptor_size` with a value of 12. After modifying the layer’s `_object`, it calls the inspector controller’s `reload()` method to refresh the UI and reflect the change.

KKevinGutowski

58% match

Loading thumbnail…

Insertion Blinker turned White

A Sketch plugin script demonstrates converting selected text in a text layer to small caps by modifying its font. It accesses the text layer through Sketch's DOM API and checks if the layer is in editing mode using `sketchObject.isEditingText()`. When active, it applies the new font via `textView.setFont()` and calls `didChangeText()` to refresh the view. The script builds a font descriptor with `NSFontFeatureSettingsAttribute` for lowercase small caps, using CoreText APIs like `kLowerCaseType` and `kLowerCaseSmallCapsSelector`, then creates the font with `NSFont.fontWithDescriptor_size()`.

KKevinGutowski

56% match