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:
- Highlight that element on the screen,
- Display the contents of that in the sidebar.
- 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.