Search Unity

Official Interacting with subsections of text.

Discussion in 'UI Toolkit' started by HugoBD-Unity, Aug 3, 2022.

  1. HugoBD-Unity

    HugoBD-Unity

    Unity Technologies

    Joined:
    May 14, 2018
    Posts:
    499
    We have recently introduced support for the <link> tag and PointerLinkTagEvents to allow RegisterCallback on subsections of text. You'll find a sample below that uses the <link> tag along with the new events to implement a hyperlink that opens a web URL. We also introduced the <a href> 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
     

    Attached Files:

    Last edited: Aug 3, 2022
  2. Ruchir

    Ruchir

    Joined:
    May 26, 2015
    Posts:
    934
    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?
     
    adamgolden likes this.
  3. HugoBD-Unity

    HugoBD-Unity

    Unity Technologies

    Joined:
    May 14, 2018
    Posts:
    499
    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.
     
  4. ytds0304

    ytds0304

    Joined:
    Aug 16, 2021
    Posts:
    7
    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.
     
  5. HugoBD-Unity

    HugoBD-Unity

    Unity Technologies

    Joined:
    May 14, 2018
    Posts:
    499
    Hello @ytds0304!

    Yes adding rich text support to TextField is one of the next features we want to tackle.
     
    ytds0304 and Ruchir like this.
  6. monark

    monark

    Joined:
    May 2, 2008
    Posts:
    1,598
    The linked package seems to be missing the cursor asset... no big deal but just thought I'd point that out
     
    EKardelis likes this.
  7. ErnestSurys

    ErnestSurys

    Joined:
    Jan 18, 2018
    Posts:
    94
  8. HugoBD-Unity

    HugoBD-Unity

    Unity Technologies

    Joined:
    May 14, 2018
    Posts:
    499
    Hi @ErnestSurys! Thanks for asking.

    The same functionality and more can be achieved using the <a href> and the <link> tag. Have you looked into the sample shared with the initial post ?
     
  9. antoine-unity

    antoine-unity

    Unity Technologies

    Joined:
    Sep 10, 2015
    Posts:
    780
    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?
     
  10. ErnestSurys

    ErnestSurys

    Joined:
    Jan 18, 2018
    Posts:
    94
    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 <link> tag together with the public API I found `InternalEditorUtility.OpenFileAtLineExternal(filePath, line)` this API is undocumented but provides the exact behavior that I needed.
     
    HugoBD-Unity likes this.
  11. ytds0304

    ytds0304

    Joined:
    Aug 16, 2021
    Posts:
    7
    Hello, how long will it take for TextField to support rich text?
     
  12. HugoBD-Unity

    HugoBD-Unity

    Unity Technologies

    Joined:
    May 14, 2018
    Posts:
    499
    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.
     
  13. joseGuate97

    joseGuate97

    Joined:
    Mar 1, 2018
    Posts:
    57
    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.
     
  14. John_Leorid

    John_Leorid

    Joined:
    Nov 5, 2012
    Posts:
    651
    Shouldn't this be called
    • PointerExitLinkTagEvent
    • PointerEnterLinkTagEvent
    (instad of Out / Over)
    ?

    And where is the Clicked Event?
     
  15. joseGuate97

    joseGuate97

    Joined:
    Mar 1, 2018
    Posts:
    57
    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://forum.unity.com/threads/qui...acks-on-ui-elements-textfield-button.1044016/) 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.
     
    Last edited: Sep 26, 2023
  16. ThomasBERNARD33

    ThomasBERNARD33

    Joined:
    Apr 20, 2022
    Posts:
    15
    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.
     
  17. scottjdaley

    scottjdaley

    Joined:
    Aug 1, 2013
    Posts:
    163
    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?
     
  18. ThomasBERNARD33

    ThomasBERNARD33

    Joined:
    Apr 20, 2022
    Posts:
    15
    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><a href="https://www.google.com/"><u>Google</u></a></color>

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

    D-DutchDave

    Joined:
    May 4, 2018
    Posts:
    36
  20. Ruchir

    Ruchir

    Joined:
    May 26, 2015
    Posts:
    934
    Hey, any updates on this?

    Is there a way to do this in the newest version?
     
    D-DutchDave likes this.
  21. HugoBD-Unity

    HugoBD-Unity

    Unity Technologies

    Joined:
    May 14, 2018
    Posts:
    499
    Hey! Unfortunately, no ETA to share on it yet.
     
    Ruchir likes this.
  22. DrSeltsam

    DrSeltsam

    Joined:
    Jul 24, 2019
    Posts:
    101
    Thanks a lot for adding this! But is there a way to disable the native hyperlink handling when using the <a href> tag (in cases where we have user created text, for example)?
     
  23. HugoBD-Unity

    HugoBD-Unity

    Unity Technologies

    Joined:
    May 14, 2018
    Posts:
    499
    Hi @DrSeltsam!

    At the moment, the only way to disable the <a href> tag would be by disabling rich text or using the <noparse> tag. It's something we'll keep in mind once we add rich text support to TextFields though.
     
    DrSeltsam likes this.
  24. adamgolden

    adamgolden

    Joined:
    Jun 17, 2019
    Posts:
    1,555
    u should also be able to just replace("<", "&lt;"), (">", "&gt;") for example on any string from the user. i would imagine this works in Unity (but could be mistaken.. just figured I'd mention it, since that's an easy/typical solution if so).

    Edit: I wrote the above assuming this meant preventing <a> tags from being parsed as a link within HTML (just showing the < and > symbols instead). If it's plain text with simple replacement for <a> tags only (no other HTML supported), then the above suggestion wouldn't work (because replacement would just show "&lt;" instead of "<" like it would for actual HTML).
     
    Last edited: Apr 13, 2024
    Ruchir likes this.
  25. Unique-Player

    Unique-Player

    Joined:
    May 6, 2017
    Posts:
    78
    When rich text support for TextFields is coming? It is mentioned it was planned for 2022, two years later still not implemented.
     
  26. Unique-Player

    Unique-Player

    Joined:
    May 6, 2017
    Posts:
    78
    This feature was added in 2022, but events are still in experimental stage.
    PointerOverLinkTagEvent - does not trigger the event when pointer is hovering the link. It is triggered only when clicked on the link.
    PointerOutLinkTagEvent - same thing here, triggered when pointer is released over the link, not when it leaves the link area.
    PointerMoveLinkTagEvent - Does not work at all