Feature Request: How to pass ReactElement as region content?

[laubonghaudoi]

Currently, the content of a region can only be string | HTMLElement:

wavesurfer.js/src/plugins/regions.ts

Line 70 in e519c20

content?: string | HTMLElement

This makes rendering stylized content very difficult. I want to render a flex box with several lines of text inside a region and I am using React. So currently I have to use some hacky ways like this:

const styleRegionContent = (region: Region) => {
  // I have to do all these hakcy styling because the wavesurfer api doesn't allow custom styling regions

  // This is the style for the parent div of the region
  region.element.style.cssText +=
    "display:flex; flex-direction:column; height:100%; justify-content:space-around;";

  // This is the style of the child 'region-content' div:
  const contentDiv = region.element.querySelector(
    'div[part="region-content"]'
  ) as HTMLDivElement;
  if (contentDiv) {
    contentDiv.style.cssText +=
      "display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-top: 0.5rem; padding-bottom: 1.5rem;";
  }

  const leftHandleDiv = region.element.querySelector(
    'div[part="region-handle region-handle-left"]'
  ) as HTMLDivElement;
  if (leftHandleDiv) {
    leftHandleDiv.style.cssText += `border-left: 2px dashed ${HANDLE_COLOR};`;
  }

  const rightHandleDiv = region.element.querySelector(
    'div[part="region-handle region-handle-right"]'
  ) as HTMLDivElement;
  if (rightHandleDiv) {
    rightHandleDiv.style.cssText += `border-right: 2px dashed ${HANDLE_COLOR};`;
  }
};

// ...
// And then every time I create a region I have to do this
const region = regionsPlugin.addRegion({
  id: subtitle.id.toString(),
  start,
  end,
  content,
  color: REGION_COLOR,
  drag: true,
  resize: true,
  minLength: 0.1,
});

styleRegionContent(region);

which doesn't look very clean nor efficient. Am I missing something or it's actually the intended way to render content? If yes I want to request a feature that allows us to style content just like this:

// This would save so much effort and potential pitfalls
regionsPlugin.addRegion({
  id: subtitle.id.toString(),
  start,
  end,
  content: <div className="m-4 text-black flex justify-between"><p>First row</p><p>Second row</p></div>,
  color: REGION_COLOR,
  drag: true,
  resize: true,
  minLength: 0.1,
});
// and this 
region.setOptions({
  content: <div className="m-4 text-black flex justify-between"><p>First row</p><p>Second row</p></div>
});

Btw I am building a free web subtitle editor so that's why this feature is important to visualize the subtitles, you can find the codes here: https://github.com/laubonghaudoi/subtitle-editor/blob/03dd23ca5623a1358d911fb46626d6d0b671853f/components/waveform-visualizer.tsx#L45

[katspaugh]

You can do something like this:

import { createRoot } from 'react-dom/client'

...

const secondRow = <div className="m-4 text-black flex justify-between"><p>First row</p><p>Second row</p></div>

useEffect(() => {
  const content = document.createDocumentFragment()
  createRoot(content).render(secondRow)
  wavesurferRegions.addRegion({
     start: 1,
     end: 2,
    content
  })
}, [wavesurferRegions, secondRow])

Alternatively:

const contentRef = useRef()

const secondRow = <div ref={contentRef} className="m-4 text-black flex justify-between"><p>First row</p><p>Second row</p></div>

useEffect(() => {
  if (!contentRef.current) return
  wavesurferRegions.addRegion({
     start: 1,
     end: 2,
    content: contentRef.current.cloneNode(true)
  })
}, [wavesurferRegions])

[laubonghaudoi]

Thanks! Since I am rendering dynamic content for each region, the second approach using useRef() doesn't work for me. And for the first approach, I found that it doesn't accept TailwindCSS's classes so I have to specify the styles directly:

const RegionContent = ({
  startTime,
  endTime,
  text,
}: {
  startTime: string;
  endTime: string;
  text: string;
}) => {
  return (
    <>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          padding: "1rem",
        }}
      >
        <em>{startTime}</em>
        <em>{endTime}</em>
      </div>
      <div
        style={{
          padding: "1rem",
        }}
      >
        {text}
      </div>
    </>
  );
};

...
// Within the component UseEffect() block
      // 1) Create a DOM container for the React root
      const container = document.createElement("div");
      createRoot(container).render(
        <RegionContent
          startTime={subtitle.startTime}
          endTime={subtitle.endTime}
          text={subtitle.text}
        />
      );

      // Create the new region
      const region = regionsPlugin.addRegion({
        id: subtitle.id.toString(),
        start,
        end,
        content: container,
        color: REGION_COLOR,
        drag: true,
        resize: true,
        minLength: 0.1,
      });

But this is nearly the same as my current codes. Both are essentially doing document.createElement("div"); Also this approach has another limitation. It is only stylizing the children within <div region-content> and I can't stylize the <div region-content> itself, nor the region-handle. So if I want to stylize the region-handle, the only way to do that is like my original hacky codes?

[katspaugh]

Wavesurfer elements are inside a Shadow DOM, that's why your Tailwind classes don't work.
Here's an example on how to customize the styles of internal Region elements: https://wavesurfer.xyz/examples/?styling.js