How to get a React Component of blocksuite?

[UndefinedVoidNull]

I noticed blocksuite is based on Web Component implemented by Lit.

And I want to use blocksuite in my React project. That's because Web Component is not working great in React for things like the props, events, and so on. So I tried to use createComponent in @lit/react to create a wrapper for React.

But I got this type of Error/Warning React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined

When I print the wrapped components, they look like this

Then I found Affine is using a customized version of @lit/react in packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.ts (Is this a typo? Should it be lit-adpater?)

Then I tried to export adpated like this

export const adapted = {
  DocEditor: createReactComponentFromLit({
    react: React,
    elementClass: PageEditor,
  }),
  DocTitle: createReactComponentFromLit({
    react: React,
    elementClass: DocTitle,
  }),
  PageMetaTags: createReactComponentFromLit({
    react: React,
    elementClass: DocMetaTags,
  }),
  EdgelessEditor: createReactComponentFromLit({
    react: React,
    elementClass: EdgelessEditor,
  }),
  BiDirectionalLinkPanel: createReactComponentFromLit({
    react: React,
    elementClass: BiDirectionalLinkPanel,
  }),
};

Then import adapted and using adapted.XXX in my React project.
But still encounter the problem like this

Affine is using blocksuite with React just fine, so I just want to know how to use blocksuite with React in my own React project?

[doodlewind]

Maybe the error could be fixed by assigning an empty doc to the editor instance (like #6522)? We have plan on #6490 for official react component integration, which should be coming soon.

[UndefinedVoidNull]

Maybe the error could be fixed by assigning an empty doc to the editor instance (like #6522)? We have plan on #6490 for official react component integration, which should be coming soon.

Thank you. 😊 Really excited about React integration coming.

Using lit-adaper.ts in Affine and assigning an empty doc would not throwing Errors directly. But still got some weird behaviors.

But use createComponent in @lit/react still throwing an Uncaught TypeError: Cannot read properties of undefined (reading 'slots')