Interacting with subsections of text.

We have recently introduced support for the tag and PointerLinkTagEvents to allow RegisterCallback on subsections of text. You’ll find a sample below that uses the tag along with the new events to implement a hyperlink that opens a web URL. We also introduced the tag that implements the hyperlink logic natively.

List of new Events:

  • PointerDownLinkTagEvent
  • PointerUpLinkTagEvent
  • PointerMoveLinkTagEvent
  • PointerOutLinkTagEvent
  • PointerOverLinkTagEvent

Note that these new Events were added to the UnityEngine.UIElements.Experimental namespace. The reasoning is that this is a temporary solution for interacting with subsections of the text. In the future, we are looking to add support for VisualElement to be embedded inside TextElement. Once this is supported, interacting with subsections of text will be identical to interacting with any other VisualElement. This will also extend all USS styles to subsections of text, allowing to easily animate with USS transitions.

This feature is currently available in 2023.1 and 2022.2.0b4

8334369–1094991–LinkTagSample.unitypackage (1.77 KB)

7 Likes

I’m not sure if this is the right place to ask about it but using link tag can we implement things like adding effects to sections of texts?
Like a shake effect, resizing text or changing color, etc?
Can we get access to the vertex of each letter?

1 Like

Hi @Ruchir !

Yes, this is definitely the right place to ask. We currently only support interaction with the PointerEvents. As for animating sections of the text (shake effect, resizing text, changing color and more) we are working on our solution. To provide a more cohesive integration with UITK, we would like to allow users to leverage the existing USS and transform properties to achieve those animations. Hence why we are not exposing the text vertices as TMP does.

Hi, is it possible to make TextField also support rich text and text interaction? This function is very important to me, even imgui supports these, I hope uitoolkit can support it as soon as possible, thank you very much.

Hello @ytds0304 !

Yes adding rich text support to TextField is one of the next features we want to tackle.

2 Likes

The linked package seems to be missing the cursor asset… no big deal but just thought I’d point that out

1 Like

Will UI Toolkit links support EditorGUI.hyperLinkClicked?

Hi @ErnestSurys ! Thanks for asking.

The same functionality and more can be achieved using the and the tag. Have you looked into the sample shared with the initial post ?

Just to make sure we capture your need, were you looking to catch ANY hyperlink clicked in the Editor? Or just within your own UI?

Hello,
here is my use case:
I was making a stack-trace view and wanted the same behavior of opening the file at a specific line from the Console window.
I checked the CsReference repo and noticed that to open the file Console Window is using a callback that is always registered to EditorGUI.hyperLinkClicked and the method to open the file within it is internal.
This is mentioned in the documentation as well, although it does not explain how to format the path with the line number:

The logic for opening a file like that is missing in the UI toolkit’s href tag, at least it wasn’t working for me.
In the end, I used the tag together with the public API I found InternalEditorUtility.OpenFileAtLineExternal(filePath, line) this API is undocumented but provides the exact behavior that I needed.

1 Like

Hello, how long will it take for TextField to support rich text?

HI @ytds0304 , unfortunately other priorities had precedence over adding richText support for TextFields in 2023.2. I am sorry, but at the moment, I am unable to specify a precise date.

The PointerUpLinkTagEvent stops working after a while in very strange ways. I am overlaying a popup, with buttons inside. When I click on the buttons, oftentimes the text stops working afterwards.

That is, assume I create the popup, add it to the hierarchy, interact with it (particularly the buttons), then close it (i.e., remove it from the hierarchy), and then try to interact with the text on my screen. Such a text has the PointerUpLinkTagEvent attached to individual words, but for some reason, it stops working.

I thought it had something to do with event propagation, but I doubt it because I already tried removing the calls I was doing to that kind of methods.

Unity, is this experimental tool bug-free? I can’t explain why the PointerUpLinkTagEvent would sometimes work, and sometimes it would not.

Shouldn’t this be called

  • PointerExitLinkTagEvent
  • PointerEnterLinkTagEvent

(instad of Out / Over)
?

And where is the Clicked Event?

I suspect garbage collection in C# may be doing some very weird stuff with event callbacks. Ultimately, I was only able to workaround the issue by registering and unregistering the callbacks constantly on all of my text labels. In other words, I am resetting everything. I read on this thread ( https://discussions.unity.com/t/825605 ) proposals to make it easier to debug events. It would be ideal if I could see in the debugger the callbacks attached to the events of a visual element.

UPDATE: I don’t know why it seems I need to “force reset” the labels to apply the links, but I’ve also realized that modifying the string to a new value, and then to the old value, helped to make sure the link events worked.

Hey,

I do have an issue with this example.
While using a simple Rich text link the link turns black instead of blue.

I am using the same exact rich text link as the example. I am simply putting the UIDocument “LinkTag” from the package in a new scene in a UI document with a default panel settings.

Without any additionnal code, the first line is correctly themed but not clickable while the second line is clickable but not themed properly (underline but not blue).

Do you know where this could be coming from ?
I am using Unity 2023.2.5f1.

Any update on when this will be available?

I’m looking for some solution to be able to make certain words in a text have a pill-shaped background and make them hoverable and clickable. Is there any way to do this today?

The rich text is working and is very simple. It is simply not FULLY working as intended since the color is not working properly. There is an easy but dirty patch by adding a color tag with it…

You can add a clickable link by simple putting your link in this format :
<color=blue>Google

To detect a click on the link, you can look into the provided package, there is an implementation with some code.

Bump!

Hey, any updates on this?

Is there a way to do this in the newest version?

1 Like