wba/frontend/src/js/component/wb-json-viewer.js

import { h, Component } from 'preact';
import WBIdTools from 'wb-id-tools';
import urlForObject from 'url-for-object';

function detectIds(value) {
  const matches = WBIdTools.detectIdentifiers(value);
  matches.sort((a, b) => (a.index - b.index));
  const res = [];
  let ofs = 0;
  for (let i = 0; i < matches.length; i++) {
    const { index } = matches[i];
    const id = matches[i][0];
    const typeName = WBIdTools.typeName(id);
    const url = (typeName === 'group' ? '/browse/' + id :
      typeName === 'collection' ? '/collection-browse/' + id :
      urlForObject({ uuid: id }));
    res.push(value.substring(ofs, index));
    res.push(h('a', { href: url }, id));
    ofs = index + id.length;
  }
  res.push(value.substring(ofs));
  return res;
}

class WBJsonViewer extends Component {
  render({ value, stringify }) {
    if (stringify)
      value = JSON.stringify(value, null, 2);
    return (
      <div class="wb-json-viewer">{ detectIds(value) }</div>
    );
  }
}

WBJsonViewer.defaultProps = {
  stringify: true
};

export default WBJsonViewer;