Get textContent layer

[thanhnt3105]

Hi everyone. I want to draw some rectangle in a page in Reactjs/Nextjs. When drawing, a layer is created in front of page, and I can not select the textContent layer of this page. I have an idea that I will create a component from the textLayer, then I place it in front of the drawing layer. How can I do that?

[jonasermert]

// TextLayerComponent.jsx
import React from 'react';

const TextLayerComponent = ({ textContent }) => {
  return (
    <div className="text-layer">
      {textContent}
    </div>
  );
};

export default TextLayerComponent;

// DrawingLayerComponent.jsx
import React from 'react';

const DrawingLayerComponent = () => {
  return (
    <div className="drawing-layer">
      {/* Your drawing logic goes here */}
    </div>
  );
};

export default DrawingLayerComponent;

// YourPageComponent.jsx
import React from 'react';
import TextLayerComponent from './TextLayerComponent';
import DrawingLayerComponent from './DrawingLayerComponent';

const YourPageComponent = () => {
  const textContent = "Your text content goes here";

  return (
    <div>
      {/* Text layer */}
      <TextLayerComponent textContent={textContent} />

      {/* Drawing layer */}
      <DrawingLayerComponent />
    </div>
  );
};

export default YourPageComponent;

/* styles.css or your preferred styling approach */
.text-layer {
  position: relative;
  z-index: 1; 
}

.drawing-layer {
  position: relative;
  z-index: 2; 
  
}