Make tag values that are external links clickable using tag2link (#813)

Author: k-yle

package.json

@@ -52,6 +52,7 @@
     "showdown": "^1.8.6",
     "stream": "^0.0.3",
     "superagent": "^3.5.2",
+    "tag2link": "^2025.5.21",
     "terra-draw": "^1.1.0",
     "terra-draw-maplibre-gl-adapter": "^1.0.1"
   },

src/components/element_info.js

@@ -8,6 +8,7 @@ import { Dropdown } from './dropdown';
 import { Button } from './button';
 import thumbsDown from '../assets/thumbs-down.svg';
 import type { RootStateType } from '../store';
+import { TagValue } from './tag_value.js';
 
 /*
  * Displays info about an element that was created/modified/deleted.
@@ -303,7 +304,9 @@ function TagsTable({ action }) {
                   <span dir="auto">{key}</span>
                 </td>
                 <td>
-                  <span dir="auto">{newval}</span>
+                  <span dir="auto">
+                    <TagValue k={key} v={newval} />
+                  </span>
                 </td>
               </tr>
             );
@@ -314,7 +317,9 @@ function TagsTable({ action }) {
                   <span dir="auto">{key}</span>
                 </td>
                 <td>
-                  <span dir="auto">{newval}</span>
+                  <span dir="auto">
+                    <TagValue k={key} v={newval} />
+                  </span>
                 </td>
               </tr>
             );
@@ -325,7 +330,9 @@ function TagsTable({ action }) {
                   <span dir="auto">{key}</span>
                 </td>
                 <td>
-                  <span dir="auto">{oldval}</span>
+                  <span dir="auto">
+                    <TagValue k={key} v={oldval} />
+                  </span>
                 </td>
               </tr>
             );
@@ -336,9 +343,13 @@ function TagsTable({ action }) {
                   <span dir="auto">{key}</span>
                 </td>
                 <td>
-                  <del dir="auto">{oldval}</del>
+                  <del dir="auto">
+                    <TagValue k={key} v={oldval} />
+                  </del>
                   {' → '}
-                  <ins dir="auto">{newval}</ins>
+                  <ins dir="auto">
+                    <TagValue k={key} v={newval} />
+                  </ins>
                 </td>
               </tr>
             );

src/components/tag_value.js

@@ -0,0 +1,61 @@
+// @ts-check
+import { Fragment } from 'react';
+import tag2linkRaw from 'tag2link';
+
+const RANKS = ['deprecated', 'normal', 'preferred'];
+
+/**
+ * @typedef {{
+ *  key: `Key:${string}`;
+ *  url: string;
+ *  source: string;
+ *  rank: "normal" | "preferred";
+ * }} Tag2LinkItem
+ */
+
+/** @param {Tag2LinkItem[]} input */
+function convertSourceData(input) {
+  /** @type {Record<string, string>} */
+  const output = {};
+
+  const allKeys = new Set(input.map(item => item.key));
+
+  for (const key of allKeys) {
+    // find the item with the best rank
+    const bestDefinition = input
+      .filter(item => item.key === key)
+      .sort((a, b) => RANKS.indexOf(b.rank) - RANKS.indexOf(a.rank))[0];
+
+    output[key.replace('Key:', '')] = bestDefinition.url;
+  }
+
+  return output;
+}
+
+export const TAG2LINK = convertSourceData(tag2linkRaw);
+
+/** @type {React.FC<{ k: string; v: string }>} */
+export const TagValue = ({ k, v }) => {
+  const placeholderUrl = TAG2LINK[k];
+
+  // simple key, not clickable
+  if (!placeholderUrl) return v;
+
+  // clickable values
+  return v.split(';').map((chunk, index) => ((
+    <Fragment key={index}>
+      {!!index && ';'}
+      <a
+        href={
+          /^https?:\/\//i.test(chunk)
+            ? chunk
+            : placeholderUrl.replaceAll('$1', chunk)
+        }
+        target="_blank"
+        rel="noreferrer"
+      >
+        {chunk}
+      </a>
+    </Fragment>
+  )));
+};

src/components/tag_value.test.js

@@ -0,0 +1,27 @@
+import { createElement } from 'react';
+import renderer from 'react-test-renderer';
+import { TagValue } from './tag_value';
+
+describe('TagValue', () => {
+  it.each`
+    tag                                                 | expected
+    ${'highway=primary'}                                | ${[]}
+    ${'wikidata=Q123'}                                  | ${['https://www.wikidata.org/entity/Q123']}
+    ${'wikidata=Q123;Q456'}                             | ${['https://www.wikidata.org/entity/Q123', 'https://www.wikidata.org/entity/Q456']}
+    ${'contact:instagram=bob'}                          | ${['https://www.instagram.com/bob']}
+    ${'contact:instagram=https://instagr.am/bob'}       | ${['https://instagr.am/bob']}
+    ${'contact:instagram=alice;https://instagr.am/bob'} | ${['https://www.instagram.com/alice', 'https://instagr.am/bob']}
+    ${'website=http://example.com'}                     | ${['http://example.com']}
+    ${'ref:FR:CEF=1234'}                                | ${['https://messes.info/lieu/1234']}
+  `('$tag', ({ tag, expected }) => {
+    const [k, v] = tag.split('=');
+    const container = renderer.create(createElement(TagValue, { k, v }));
+
+    const actual = container.root.findAllByType('a');
+    expect(actual).toHaveLength(expected.length);
+
+    for (let i = 0; i < expected.length; i++) {
+      expect(actual[i].props.href).toStrictEqual(expected[i]);
+    }
+  });
+});

yarn.lock

@@ -14381,6 +14381,11 @@ table@4.0.2:
     slice-ansi "1.0.0"
     string-width "^2.1.1"
 
+tag2link@^2025.5.21:
+  version "2025.5.21"
+  resolved "https://registry.yarnpkg.com/tag2link/-/tag2link-2025.5.21.tgz#5f02fd412e854744a141b4d6217e6acf33e23d93"
+  integrity sha512-vcz6/6U5V3QYPA7geLrtzLMqhCwg6OvoGP665DbGgPRSWASjFn0J4jA/NyifD3Tmp2yf8RnEuI6QBvhXGBVSHg==
+
 tailwindcss@^3.0.2:
   version "3.4.15"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.15.tgz#04808bf4bf1424b105047d19e7d4bfab368044a9"