Skip to main content

DHTMLX RichText. Highlight all mentions example

Live example​

Mentions inserted from a trigger become links you can target with CSS. This demo types @ to mention people, then highlights every mention of one selected person at once. Switching the person updates which mentions light up, all through CSS.

const widget = new richtext.Richtext("#richtext", {
    value,
    triggers: [{ trigger: "@", data: people }]
});

function changeUser(user){
    widget.container.setAttribute("data-user", user);
}

changeUser(people[0].id);

let selectors = [];
people.forEach(person => {
    selectors.push(`#richtext[data-user="${person.id}"] a[data-token="@"][data-token-id="${person.id}"]`);
});

const style = document.createElement("style");
style.textContent = `${selectors.join(",")}{background: #fb8500; color: #fff;}`;
document.head.appendChild(style);
<!-- auxiliary controls for interacting with the sample -->
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">
<section class="dhx_sample-controls">
	<label for="user" class="dhx_sample-label">User:</label>
	<select name="user" class="dhx_select dhx_sample-input" id="user" onchange="changeUser(this.value)">
		<option value="alice" selected>alice_nova</option>
		<option value="bob">b0b_c4t</option>
		<option value="charlie">charlie_x</option>
		<option value="diana">diana.92</option>
	</select>
</section>

<!-- component container -->
<div id="richtext" style="width: 100%; height: calc(100% - 60px);"></div>

<!-- dataset -->

<script>
const people = [
	    {
	        id: "alice",
	        label: "alice_nova",
	        name: "Alice Johnson",
	        image: "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_05.jpg",
	        url: "mailto:alice@example.com",
	    },
	    {
	        id: "bob",
	        label: "b0b_c4t",
	        name: "Robert Smith",
	        image: "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_02.jpg",
	        url: "mailto:bob@example.com",
	    },
	    {
	        id: "charlie",
	        label: "charlie_x",
	        name: "Charles Brown",
	        image: "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_03.jpg",
	        url: "mailto:charlie@example.com",
	    },
	    {
	        id: "diana",
	        label: "diana.92",
	        name: "Diana Williams",
	        image: "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_09.jpg",
	        url: "mailto:diana@example.com",
	    },
	];
	const mentionLinks = people.map(
	    person =>
	        `<a href="${person.url}" data-token="@" data-token-id="${person.id}">@${person.label}</a>`
	);
	const value = `<h2>Project Discussion</h2>
	<p>Hi team, I've been reviewing the latest requirements and I think we need some help with the following areas:</p>
	<ul>
	<li>Frontend implementation - maybe ${mentionLinks[0]} can take the lead?</li>
	<li>Backend API design - ${mentionLinks[1]} has the most experience here</li>
	<li>Database optimization - we should ask ${mentionLinks[2]} for advice</li>
	<li>Testing strategy - ${mentionLinks[3]} just finished a similar project</li>
	</ul>
	<p>Also, could someone help me understand the deployment process? ${mentionLinks[0]} and ${mentionLinks[1]} can you share your thoughts?</p>
	<p>${mentionLinks[0]} ${mentionLinks[1]} ${mentionLinks[2]} ${mentionLinks[3]} Looking forward to your feedback!</p>`;
</script>

Use case​

Use it when readers need to see all references to one person or tag, like reviewing who is mentioned in a long note, or spotting a name across a document. Each mention is inserted as a link that carries the person's id, so a CSS rule can match every mention of that id. The demo sets an attribute on the container to pick the active person and lets CSS do the highlighting, with no per-mention scripting. To make it yours, generate a CSS rule per id and switch the active one on your container.

How to do this in your app​

  • Insert mentions with a trigger: { trigger: "@", data: people } inserts each pick as a link carrying the person's id.
  • Pick the active person: set an attribute on the container, like data-user, to the id you want to highlight.
  • Match with CSS: build a selector per person that targets the container attribute and the mention id, then color those links.
  • Switch at runtime: change the container attribute to move the highlight to a different person.

Good to know​

  • Highlighting is pure CSS here: once the rules exist, switching the active person is just changing one attribute, with no DOM walking.
  • Each mention carries its id: the inserted link holds the person's id, which is what the CSS selector matches.
  • It scales with your data: the demo builds one selector per person up front, so any number of mentions of that person highlight together.

API reference​

Additional resources​