Hi,

I’m trying to create a plugin with a UI elements library. I have a document with all the components I want to list and the plugin will have an image preview of each. When clicking the image, the component will be cloned on the current page.

My current code looks like this

 <div class="image-gallery">

    <div>

      <a href="#" class="gallery-image" data-file-id="9JkYmYgxjpGzBUNiJESfdi" data-node-id="3698-1207">

        <img class="thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/310px-Placeholder_view_vector.svg.png" alt="Gallery Image">

      </a>

    </div>

  </div>



<script>

    document.addEventListener("DOMContentLoaded", function() {

      // Find the image element

      const imageElement = document.querySelector(".gallery-image");



      // Add a click event listener to the image

      imageElement.addEventListener("click", function(event) {

        event.preventDefault();

        

        // Get the data attributes with file ID and node ID

        const fileId = imageElement.getAttribute("data-file-id");

        const nodeId = imageElement.getAttribute("data-node-id");

        

          // Use the Figma API to clone the component

          const node = figma.getNodeById(nodeId);

          const clone = node.clone();



          // Parent the clone under the current page

          const currentPage = figma.currentPage;

          currentPage.appendChild(clone);

      });

    });

  </script>

What am I missing because it’s not working?

Thanks in advance!