react-change-highlight/src/Util/createShadowDOM.ts

React component to highlight the changed content immediately and bring focus of the user into the changed part

import React from "react";

const createShadowDOM = (currentChild, setShadowItemFn) => {
  if (!currentChild) return;

  const children = currentChild.props.children;

  if (Array.isArray(children)) {
    React.Children.forEach(children, child => {
      if (typeof child === "object") createShadowDOM(child, setShadowItemFn);
      else if (child.toString().trim().length) {
        setNewChild();
      }
    });
  } else if (typeof children === "object") {
    createShadowDOM(children, setShadowItemFn);
  } else if (children?.toString().trim().length) {
    setNewChild();
  }

  function setNewChild() {
    setShadowItemFn(child => {
      if (child) return [...child, currentChild];
      return [currentChild];
    });
  }
};

export default createShadowDOM;