code.ts

// This plugin will find links within a text node and create on canvas meta cards
// of an image, title, description and link based on the <meta> tags in the head
// of a webpage at the relative links

// This file holds the main code for the plugins. It has access to the *document*.
// You can access browser APIs in the <script> tag inside "ui.html" which has a
// full browser environment (see documentation).

// This shows the HTML page in "ui.html".
figma.showUI(__html__, { visible: false });

let hyperlinksProcessed = 0;
let hyperlinkErrors = 0;
let cardsToCreate = 0;

// Find text nodes within selection
const selectedTextNodes = figma.currentPage.selection.filter(
  (node) => node.type === "TEXT"
) as TextNode[];
if (selectedTextNodes.length) {
  const textNode = selectedTextNodes[0];

  const hyperLinks = getHyperlinksFromTextNode(textNode);

  cardsToCreate = hyperLinks.length;
  if (cardsToCreate > 0) {
    hyperLinks.forEach((link) => {
      figma.ui.postMessage({
        function: "fetchMetaTags",
        data: link,
        nodeId: textNode.id,
      });
    });
  } else {
    figma.closePlugin("Select text with a link and re-run this plugin.");
  }
} else {
  figma.closePlugin("Select text with a link and re-run this plugin.");
}

// Extracts all hyperlinks from a text node and returns them as a
// deduped array
function getHyperlinksFromTextNode(textNode) {
  const links = Array.from(textNode.characters).map((char, i) => {
    const link = textNode.getRangeHyperlink(i, i + 1);
    return link.type === "URL" ? link.value : null;
  });

  //Dedupe the array
  return [...new Set(links)].filter((link) => link !== null);
}

// Calls to "parent.postMessage" from within the HTML page will trigger this
// callback. The callback will be passed the "pluginMessage" property of the
// posted message.
figma.ui.onmessage = async (msg) => {
  // One way of distinguishing between different types of messages sent from
  // your HTML page is to use an object with a "type" property like this.
  if (msg.function === "fetchError") {
    hyperlinkErrors++;
  } else if (msg.function === "createMetaCard") {
    const metaTags = msg.data;
    const nodeId = msg.nodeId;
    const imageWidth = 320;
    const cardPadding = 16;

    // Create Metacard Frame
    const cardFrame = figma.createFrame();
    cardFrame.cornerRadius = cardPadding / 2;
    cardFrame.resize(imageWidth + cardPadding * 2, imageWidth);
    cardFrame.layoutMode = "VERTICAL";
    cardFrame.paddingLeft =
      cardFrame.paddingRight =
      cardFrame.paddingTop =
      cardFrame.paddingBottom =
        cardPadding;
    cardFrame.itemSpacing = cardPadding / 2;
    cardFrame.primaryAxisSizingMode = "AUTO";
    cardFrame.counterAxisSizingMode = "FIXED";
    cardFrame.fills = [{ type: "SOLID", color: { r: 1, g: 1, b: 1 } }];
    cardFrame.strokes = [{ type: "SOLID", color: { r: 0, g: 0, b: 0 } }];
    cardFrame.strokeWeight = 2;

    // Create Image
    const img = figma.createImage(metaTags.image.data);
    const rect = figma.createRectangle();
    rect.cornerRadius = cardPadding / 4;
    rect.resize(
      imageWidth,
      imageWidth / (metaTags.image.width / metaTags.image.height)
    );
    rect.fills = [
      {
        imageHash: img.hash,
        scaleMode: "FILL",
        scalingFactor: 0.5,
        type: "IMAGE",
      },
    ];
    cardFrame.appendChild(rect);

    // Create title
    const metaTitle = figma.createText();
    const boldFont = { family: "Inter", style: "Bold" };
    await figma.loadFontAsync(boldFont);
    metaTitle.fontName = boldFont;
    cardFrame.appendChild(metaTitle);
    metaTitle.characters = metaTags.title;
    metaTitle.layoutAlign = "STRETCH";
    metaTitle.hyperlink = {
      type: "URL",
      value: metaTags.hyperlink,
    };
    metaTitle.textDecoration = "UNDERLINE";

    // Create description
    const metaDesc = figma.createText();
    await figma.loadFontAsync({ family: "Inter", style: "Regular" });
    cardFrame.appendChild(metaDesc);
    metaDesc.characters = metaTags.description;
    metaDesc.layoutAlign = "STRETCH";

    // Append the Meta card and place next to the node
    const node = (await figma.getNodeByIdAsync(nodeId)) as SceneNode;
    cardFrame.x =
      node.x +
      node.width +
      hyperlinksProcessed * cardFrame.width +
      (hyperlinksProcessed + 1) * 32;
    cardFrame.y = node.y;
    node.parent.appendChild(cardFrame);

    hyperlinksProcessed++;
  }

  // Make sure to close the plugin when you're done. Otherwise the plugin will
  // keep running, which shows the cancel button at the bottom of the screen.
  if (hyperlinksProcessed + hyperlinkErrors === cardsToCreate) {
    let closeMessage = ``;
    if (hyperlinksProcessed > 0) {
      closeMessage = `Created ${hyperlinksProcessed} meta cards.`;
    }
    if (hyperlinkErrors > 0) {
      closeMessage = `Error processing ${hyperlinkErrors} meta cards.`;
    }
    figma.closePlugin(closeMessage);
  }
};