nostr-web-components/lib/text.js

collection of web components that provide quick access to basic nostr things

import * as nip27 from "@nostr/tools/nip27";
import { naddrEncode, neventEncode, nprofileEncode, npubEncode } from "@nostr/tools/nip19";
import { nostrLink, relayLink, shorten, shortenURL } from "./utils.js";
import { fetchNostrUser } from "./nostr.js";
function renderText(wrapper, content) {
  for (let block of nip27.parse(content)) {
    switch (block.type) {
      case "text":
        let span = document.createElement("span");
        span.setAttribute("part", "text");
        span.textContent = block.text;
        wrapper.appendChild(span);
        break;
      case "reference": {
        let a = document.createElement("a");
        a.setAttribute("part", "reference");
        a.target = "_blank";
        if ("id" in block.pointer) {
          a.setAttribute("part", "nevent");
          let code = neventEncode(block.pointer);
          a.href = nostrLink(code);
          a.target = "_blank";
          a.textContent = shorten(code);
        } else if ("identifier" in block.pointer) {
          a.setAttribute("part", "naddr");
          let code = naddrEncode(block.pointer);
          a.href = nostrLink(code);
          a.target = "_blank";
          a.textContent = shorten(code);
        } else {
          a.setAttribute("part", "npub reference");
          let nprofile = nprofileEncode(block.pointer);
          a.href = nostrLink(nprofile);
          a.target = "_blank";
          let npub = npubEncode(block.pointer.pubkey);
          a.textContent = shorten(npub);
          let pp = block.pointer;
          setTimeout(async () => {
            let nu = await fetchNostrUser(pp.pubkey, pp.relays || []);
            a.textContent = nu.shortName;
          }, 10);
        }
        wrapper.appendChild(a);
        break;
      }
      case "url": {
        let a = document.createElement("a");
        a.href = block.url;
        a.textContent = shortenURL(block.url);
        a.setAttribute("part", "url");
        a.target = "_blank";
        wrapper.appendChild(a);
        break;
      }
      case "image": {
        let a = document.createElement("a");
        a.href = block.url;
        a.setAttribute("part", "image");
        let img = document.createElement("img");
        img.style.width = "100%";
        img.src = block.url;
        img.loading = "lazy";
        a.appendChild(img);
        wrapper.appendChild(a);
        break;
      }
      case "video": {
        let video = document.createElement("video");
        video.setAttribute("part", "video");
        video.style.width = "100%";
        video.src = block.url;
        video.controls = true;
        video.muted = true;
        video.playsInline = true;
        wrapper.appendChild(video);
        break;
      }
      case "audio": {
        let audio = document.createElement("audio");
        audio.setAttribute("part", "audio");
        audio.style.width = "100%";
        audio.src = block.url;
        audio.controls = true;
        wrapper.appendChild(audio);
        break;
      }
      case "relay": {
        let a = document.createElement("a");
        a.href = relayLink(block.url);
        a.setAttribute("part", "relay");
        a.target = "_blank";
        wrapper.appendChild(a);
        break;
      }
      default:
        break;
    }
  }
}
export {
  renderText
};