Hi I have a Reac/NextJS page which looks like this:

import Layout from "@/components/app/Layout";
import Sidebar from "@/components/app/Sidebar";

export default function SiteIndex() {
  return (
    <Layout>
      <div className="flex">
        <Sidebar />
        <div className="m-5">
            <iframe src="/page.htm"></iframe>
        </div>
      </div>

    </Layout>
  );
}

It has an iframe included inside it.

What I need is that when the user hovers over any HTML element in the iframe, I want to do the following:

1. Highlight that element on the screen,
2. Display the contents of that in the sidebar.
3. Make that element editable. it doesn't have to be saved. But just editable.

Is it possible to do? How can we achieve that using reactjs/javascript?

Not sure if this is relevant but say if the nextjs project is on example.com, the iframe is coming from test.example.com. I have access to both domains/projects.