Replace text with more than just links?

Contribute Feature
,

AI-generated summary

The discussion revolves around replacing text with custom HTML in Discourse. Shauny wants to replace tone indicators with HTML that includes a title tag explaining what it means and a link to the list.

Initially, zogstrip suggests using Watched Words to achieve this, but MarcP points out that Markdown & HTML do not work with Watched Words.

Akshine provides an alternative solution using two theme components, with the second one being a custom solution that uses a tooltip component to allow HTML. Shauny finds this solution promising but encounters two issues: the URL not working and the popup not displaying on mobile.

Akshine helps troubleshoot these issues, providing updates to the component. However, the solution requires a recent Discourse feature, and Shauny is hesitant to upgrade from the stable release. Akshine offers to explore a workaround, and zogstrip mentions a potential fix in a GitHub pull request.

1

I know you can easily set it to replace text with links, but I’d like to replace text with some custom HTML that will highlight and underline some text and include “title” tags.

The reason some people on our forums use tone indicators, but for new people they need explaining a lot. If I could have an abbr tag wrapped around them with a title tag explaining what it means and a link to the list, that would be perfect.

Is this possible? Would it require a theme component? I have no idea how to make one of those.

1 Like
Watched Words Reference Guide
2

You could setup Watched Words to automatically replace those tone indicators with an <a href=“ https://toneindicators.carrd.co/#masterlist”><abbr title=“Joking”>/j</abbr></a> for example?

3 Likes
3

Oh can you do that? I thought you could only replace with links or words, not HTML. I will try it thank you!

1 Like
4

Oh, wow, didn’t realise quite how flexible that feature was!

1 Like
5

Hmm it didn’t work

IMG_7418
IMG_74181179×552 104 KB

1 Like
6

I believe Markdown & HTML do not work with Watched Words:

2 Likes
7

Ok so is there any other way to do this please? :folded_hands:

1 Like
8

Well, that’s awkward. I guess I shouldn’t reply on meta before my morning coffee :sweat_smile:

Will have a look if it’s an easy fix / addition.

5 Likes
10

As an alternative, you have two theme components:

6 Likes
11

The second one is what I’m looking for, thank you so much!

2 Likes
12

Hmmm it doesn’t quite work, there are 2 issues:

  1. The URL doesn’t work, it tries to load the page as part of my forum.
  2. Clicking it on mobile doesn’t make the popup show, it just flickers in and out of view

:pensive_face:

1 Like
13

You need to add target="_blank" inside the <a> element.

Let me test that.

EDIT: A long press on it displays the tooltip but seems to display the selection toolbar as well. I’m checking if I’m missing something.

14

Long press doesn’t work for me. I’m on an iPhone. It just goes crazy but if you tap it lots of times it eventually stays open.

15

@Shauny Update the component and see if it helps.

16

Yes that’s better thanks, long pressing does work. I do wonder if it’s possible to have it work with normal taps though as I don’t know if people would figure that out on their own!

1 Like
17

Can you try the latest version? It “should” work with one tap on mobile now.

1 Like
18

Doesn’t work at all now :-/

1 Like
19

Indeed. I could not test on a real mobile device, only a desktop (mobile view). Let me see how I can fix it.

20

Actually, it works. I tested it on a production Discourse instance with a mobile, but it relies on a feature introduced recently (3 weeks ago, #23071). You will have to upgrade your Discourse to make it work.

21

Ah ok. I’m on the stable release. I don’t plan to move to the beta just for this. I guess I will have to wait :cry: