Out of curiosity -> how does connect work internally?

[addlistener]

Just started learning about craft.js. I am just wondering how it works from the experienced craft devs.

It seems that a connect function does it all.

import { useNode } from "@craftjs/core";

const TextComponent = ({ text }) => {
  const {
    connectors: { connect, drag },
  } = useNode();

  return (
    <div ref={(ref) => connect(drag(ref))}>
      <h2>{text}</h2>
    </div>
  );
};

A normal WYSIWYG editor is probably more complex than this. So how does it work internally from a big picture? Specifically how does it load editor state and sync to an iframe?

I searched for such blog posts and found nothing.