feat(core): peek view api enhancements (#7288)

upstream https://github.com/toeverything/blocksuite/pull/7390
fix AF-917

packages/frontend/component/src/lit-react/index.ts

@@ -1,2 +1,3 @@
 export { createComponent as createReactComponentFromLit } from './create-component';
 export * from './lit-portal';
+export { toReactNode } from './to-react-node';

packages/frontend/component/src/lit-react/to-react-node.ts

@@ -0,0 +1,35 @@
+import { LitElement, type TemplateResult } from 'lit';
+import React, { createElement, type ReactNode } from 'react';
+
+import { createComponent } from './create-component';
+
+export class LitTemplateWrapper extends LitElement {
+  static override get properties() {
+    return {
+      template: { type: Object },
+    };
+  }
+  template: TemplateResult | null = null;
+  // do not enable shadow root
+  override createRenderRoot() {
+    return this;
+  }
+
+  override render() {
+    return this.template;
+  }
+}
+
+window.customElements.define('affine-lit-template-wrapper', LitTemplateWrapper);
+
+const TemplateWrapper = createComponent({
+  elementClass: LitTemplateWrapper,
+  react: React,
+});
+
+export const toReactNode = (template?: TemplateResult | string): ReactNode => {
+  if (!template) return null;
+  return typeof template === 'string'
+    ? template
+    : createElement(TemplateWrapper, { template });
+};