@coze-editor/react 0.1.0-alpha.9c7cf5 → 0.1.0-alpha.ab222a

package/dist/esm/index.js

@@ -1,12 +1,15 @@
 // src/renderer.tsx
-import React2, {
+import React3, {
   useEffect,
   useRef as useRef2,
-  useState as useState2
+  useState as useState3,
+  useMemo
 } from "react";
+import { FacetCombineStrategy } from "@coze-editor/utils";
 import {
   create
 } from "@coze-editor/core";
+import { Facet } from "@codemirror/state";
 
 // src/provider.tsx
 import React, {
@@ -41,10 +44,54 @@ function EditorProvider({ children }) {
   return /* @__PURE__ */ React.createElement(InternalEditorContext.Provider, { value: editor }, /* @__PURE__ */ React.createElement(InternalSetEditorContext.Provider, { value: setEditor }, /* @__PURE__ */ React.createElement(InjectorContext.Provider, { value: injectorRef.current }, children)));
 }
 
+// src/connector.tsx
+import React2, { useState as useState2, useCallback, Fragment } from "react";
+function createPortalConnector() {
+  let add = (id, portal) => {
+  };
+  let remove = (id) => {
+  };
+  function connect(id, portal) {
+    add(id, portal);
+  }
+  function disconnect(id) {
+    remove(id);
+  }
+  function Portal() {
+    const [items, setItems] = useState2([]);
+    const addItem = useCallback((id, portal) => {
+      setItems((prevItems) => {
+        const nextItems = [...prevItems];
+        const index = nextItems.findIndex((item) => item.id === id);
+        if (index > -1) {
+          nextItems[index] = { id, portal };
+        } else {
+          nextItems.push({ id, portal });
+        }
+        return nextItems;
+      });
+    }, []);
+    const removeItem = useCallback((id) => {
+      setItems((items2) => items2.filter((item) => item.id !== id));
+    }, []);
+    add = addItem;
+    remove = removeItem;
+    return /* @__PURE__ */ React2.createElement(Fragment, null, items.map((item) => item.portal));
+  }
+  return {
+    connect,
+    disconnect,
+    Portal
+  };
+}
+
 // src/renderer.tsx
 function firstLetterToUppercase(str) {
   return str.charAt(0).toUpperCase() + str.substring(1);
 }
+var connector = Facet.define({
+  combine: FacetCombineStrategy.First
+});
 function Renderer(props) {
   const {
     plugins,
@@ -56,12 +103,16 @@ function Renderer(props) {
     didMount,
     children
   } = props;
-  const [api, setAPI] = useState2();
+  const [api, setAPI] = useState3();
   const ref = useRef2(null);
   const apiRef = useRef2(null);
   const propsRef = useRef2(null);
   const setEditor = useSetEditor();
   const injector = useInjector();
+  const pc = useMemo(() => createPortalConnector(), []);
+  const connectorRef = useRef2(pc);
+  connectorRef.current = pc;
+  const { Portal } = pc;
   propsRef.current = props;
   useEffect(() => {
     const { render, eventKeys } = create({
@@ -73,7 +124,7 @@ function Renderer(props) {
       root,
       defaultValue,
       options: options ?? {},
-      extensions
+      extensions: [connector.of(connectorRef.current), ...extensions ?? []]
     });
     apiRef.current = exported;
     eventKeys.forEach((eventName) => {
@@ -102,20 +153,20 @@ function Renderer(props) {
   useEffect(() => {
     apiRef.current.$set(props.options ?? {});
   }, [props.options]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { ...domProps, ref }), children);
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { ...domProps, ref }), children, /* @__PURE__ */ React3.createElement(Portal, null));
 }
 
 // src/create-renderer.tsx
-import React3, { useMemo } from "react";
+import React4, { useMemo as useMemo2 } from "react";
 var OriginRenderer = Renderer;
 function createRenderer(plugins, builtinExtensions) {
   return function CustomRenderer(props) {
     const userExtensions = props.extensions;
-    const extensions = useMemo(
+    const extensions = useMemo2(
       () => [...builtinExtensions ?? [], ...userExtensions ?? []],
       [userExtensions]
     );
-    return /* @__PURE__ */ React3.createElement(OriginRenderer, { ...props, extensions, plugins });
+    return /* @__PURE__ */ React4.createElement(OriginRenderer, { ...props, extensions, plugins });
   };
 }
 
@@ -124,6 +175,7 @@ export * from "@coze-editor/core";
 export {
   EditorProvider,
   Renderer,
+  connector,
   createRenderer,
   useEditor,
   useInjector

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/renderer.tsx","../../src/provider.tsx","../../src/create-renderer.tsx","../../src/index.ts"],"sourcesContent":["//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, {\n  type CSSProperties,\n  useEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport {\n  type EditorPluginSpec,\n  type InferEditorAPIFromPlugins,\n  type InferEvents,\n  type InferValues,\n  create,\n} from '@coze-editor/core';\nimport { type Extension } from '@codemirror/state';\n\nimport { useInjector, useSetEditor } from './provider';\n\ntype UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (\n  k: infer I,\n) => void\n  ? I\n  : never;\n\ntype InferReactEvents<T extends Record<string, any>> = UnionToIntersection<{\n  [K in keyof T as `on${Capitalize<string & K>}`]?: (e: T[K]) => void;\n}>;\n\nfunction firstLetterToUppercase(str: string) {\n  return str.charAt(0).toUpperCase() + str.substring(1);\n}\n\ntype InferRendererProps<T extends EditorPluginSpec<string, any, any>[]> = {\n  domProps?: {\n    style?: CSSProperties;\n    className?: string;\n  };\n  defaultValue?: string;\n  root?: Document | ShadowRoot;\n  options?: Partial<InferValues<T[number]>>;\n  extensions?: Extension[];\n  didMount?: (api: InferEditorAPIFromPlugins<T>) => void;\n  children?: ReactNode;\n} & (InferEvents<T[number]> extends Record<string, any>\n  ? InferReactEvents<InferEvents<T[number]>>\n  : unknown);\n\nfunction Renderer<T extends EditorPluginSpec<string, any, any>[]>(\n  props: { plugins: T } & InferRendererProps<T>,\n) {\n  const {\n    plugins,\n    defaultValue,\n    root,\n    options,\n    domProps = {},\n    extensions,\n    didMount,\n    children,\n  } = props;\n\n  const [api, setAPI] = useState<any>();\n  const ref = useRef(null);\n  const apiRef = useRef<any>(null);\n  const propsRef = useRef<typeof props | null>(null);\n  const setEditor = useSetEditor();\n  const injector = useInjector();\n\n  propsRef.current = props;\n\n  useEffect(() => {\n    const { render, eventKeys } = create({\n      plugins,\n      injector,\n    });\n\n    const exported = render({\n      parent: ref.current!,\n      root,\n      defaultValue,\n      options: options ?? {},\n      extensions,\n    });\n\n    apiRef.current = exported;\n\n    eventKeys.forEach((eventName: any) => {\n      exported.$on(eventName, e => {\n        const handler = (propsRef.current as any)?.[\n          `on${firstLetterToUppercase(eventName)}`\n        ];\n        if (typeof handler === 'function') {\n          handler(e);\n        }\n      });\n    });\n\n    if (typeof didMount === 'function') {\n      didMount(exported);\n    }\n\n    setAPI(exported);\n\n    return () => {\n      exported.$destroy();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!api || !setEditor) {\n      return;\n    }\n\n    setEditor(api);\n  }, [api, setEditor]);\n\n  useEffect(() => {\n    apiRef.current.$set(props.options ?? {});\n  }, [props.options]);\n\n  return (\n    <>\n      <div {...domProps} ref={ref} />\n      {children}\n    </>\n  );\n}\n\nexport { Renderer };\n\nexport type { InferRendererProps };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nimport React, {\n  type Dispatch,\n  type ReactNode,\n  createContext,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport { type Injector, createInjector } from '@coze-editor/core';\n\nconst InternalEditorContext = createContext<unknown>(null);\nconst InternalSetEditorContext = createContext<Dispatch<any> | null>(null);\nconst InjectorContext = createContext<Injector | undefined>(undefined);\n\nfunction useEditor<T>(): T {\n  return useContext(InternalEditorContext) as T;\n}\n\nfunction useSetEditor(): Dispatch<any> | null {\n  return useContext(InternalSetEditorContext);\n}\n\nfunction useInjector(): Injector {\n  const injector = useContext(InjectorContext);\n\n  if (!injector) {\n    throw new Error('useInjector should be used in EditorProvider');\n  }\n\n  return injector;\n}\n\nfunction EditorProvider({ children }: { children?: ReactNode }) {\n  const [editor, setEditor] = useState(null);\n  const injectorRef = useRef<Injector | null>(null);\n\n  if (!injectorRef.current) {\n    injectorRef.current = createInjector();\n  }\n\n  return (\n    <InternalEditorContext.Provider value={editor}>\n      <InternalSetEditorContext.Provider value={setEditor}>\n        <InjectorContext.Provider value={injectorRef.current}>\n          {children}\n        </InjectorContext.Provider>\n      </InternalSetEditorContext.Provider>\n    </InternalEditorContext.Provider>\n  );\n}\n\nexport { EditorProvider, useEditor, useSetEditor, useInjector };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nimport React, { useMemo } from 'react';\n\nimport { type EditorPluginSpec } from '@coze-editor/core';\nimport { type Extension } from '@codemirror/state';\n\nimport { Renderer, type InferRendererProps } from './renderer';\n\nconst OriginRenderer: (props: any) => JSX.Element = Renderer;\n\nfunction createRenderer<T extends EditorPluginSpec<string, any, any>[]>(\n  plugins: T,\n  builtinExtensions?: Extension[],\n) {\n  return function CustomRenderer(props: InferRendererProps<T>) {\n    const userExtensions = props.extensions;\n\n    const extensions: Extension[] = useMemo(\n      () => [...(builtinExtensions ?? []), ...(userExtensions ?? [])],\n      [userExtensions],\n    );\n\n    return (\n      <OriginRenderer {...props} extensions={extensions} plugins={plugins} />\n    );\n  };\n}\n\nexport { createRenderer };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nexport { Renderer, type InferRendererProps } from './renderer';\n\nexport { createRenderer } from './create-renderer';\n\nexport { EditorProvider, useEditor, useInjector } from './provider';\n\nexport * from '@coze-editor/core';\n"],"mappings":"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","names":["React","useRef","useState","useState","useRef","React","React","React"]}
+{"version":3,"sources":["../../src/renderer.tsx","../../src/provider.tsx","../../src/connector.tsx","../../src/create-renderer.tsx","../../src/index.ts"],"sourcesContent":["//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, {\n  type CSSProperties,\n  useEffect,\n  useRef,\n  useState,\n  type ReactNode,\n  useMemo,\n} from 'react';\n\nimport { FacetCombineStrategy } from '@coze-editor/utils';\nimport {\n  type EditorPluginSpec,\n  type InferEditorAPIFromPlugins,\n  type InferEvents,\n  type InferValues,\n  create,\n} from '@coze-editor/core';\nimport { Facet, type Extension } from '@codemirror/state';\n\nimport { useInjector, useSetEditor } from './provider';\nimport { type Connector, createPortalConnector } from './connector';\n\ntype UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (\n  k: infer I,\n) => void\n  ? I\n  : never;\n\ntype InferReactEvents<T extends Record<string, any>> = UnionToIntersection<{\n  [K in keyof T as `on${Capitalize<string & K>}`]?: (e: T[K]) => void;\n}>;\n\nfunction firstLetterToUppercase(str: string) {\n  return str.charAt(0).toUpperCase() + str.substring(1);\n}\n\ntype InferRendererProps<T extends EditorPluginSpec<string, any, any>[]> = {\n  domProps?: {\n    style?: CSSProperties;\n    className?: string;\n  };\n  defaultValue?: string;\n  root?: Document | ShadowRoot;\n  options?: Partial<InferValues<T[number]>>;\n  extensions?: Extension[];\n  didMount?: (api: InferEditorAPIFromPlugins<T>) => void;\n  children?: ReactNode;\n} & (InferEvents<T[number]> extends Record<string, any>\n  ? InferReactEvents<InferEvents<T[number]>>\n  : unknown);\n\nconst connector = Facet.define<Connector, Connector>({\n  combine: FacetCombineStrategy.First,\n});\n\nfunction Renderer<T extends EditorPluginSpec<string, any, any>[]>(\n  props: { plugins: T } & InferRendererProps<T>,\n) {\n  const {\n    plugins,\n    defaultValue,\n    root,\n    options,\n    domProps = {},\n    extensions,\n    didMount,\n    children,\n  } = props;\n\n  const [api, setAPI] = useState<any>();\n  const ref = useRef(null);\n  const apiRef = useRef<any>(null);\n  const propsRef = useRef<typeof props | null>(null);\n  const setEditor = useSetEditor();\n  const injector = useInjector();\n\n  const pc = useMemo(() => createPortalConnector(), []);\n  const connectorRef = useRef<Connector>(pc);\n  connectorRef.current = pc;\n  const { Portal } = pc;\n\n  propsRef.current = props;\n\n  useEffect(() => {\n    const { render, eventKeys } = create({\n      plugins,\n      injector,\n    });\n\n    const exported = render({\n      parent: ref.current!,\n      root,\n      defaultValue,\n      options: options ?? {},\n      extensions: [connector.of(connectorRef.current), ...(extensions ?? [])],\n    });\n\n    apiRef.current = exported;\n\n    eventKeys.forEach((eventName: any) => {\n      exported.$on(eventName, e => {\n        const handler = (propsRef.current as any)?.[\n          `on${firstLetterToUppercase(eventName)}`\n        ];\n        if (typeof handler === 'function') {\n          handler(e);\n        }\n      });\n    });\n\n    if (typeof didMount === 'function') {\n      didMount(exported);\n    }\n\n    setAPI(exported);\n\n    return () => {\n      exported.$destroy();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!api || !setEditor) {\n      return;\n    }\n\n    setEditor(api);\n  }, [api, setEditor]);\n\n  useEffect(() => {\n    apiRef.current.$set(props.options ?? {});\n  }, [props.options]);\n\n  return (\n    <>\n      <div {...domProps} ref={ref} />\n      {children}\n      <Portal />\n    </>\n  );\n}\n\nexport { Renderer, connector };\n\nexport type { InferRendererProps };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nimport React, {\n  type Dispatch,\n  type ReactNode,\n  createContext,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport { type Injector, createInjector } from '@coze-editor/core';\n\nconst InternalEditorContext = createContext<unknown>(null);\nconst InternalSetEditorContext = createContext<Dispatch<any> | null>(null);\nconst InjectorContext = createContext<Injector | undefined>(undefined);\n\nfunction useEditor<T>(): T {\n  return useContext(InternalEditorContext) as T;\n}\n\nfunction useSetEditor(): Dispatch<any> | null {\n  return useContext(InternalSetEditorContext);\n}\n\nfunction useInjector(): Injector {\n  const injector = useContext(InjectorContext);\n\n  if (!injector) {\n    throw new Error('useInjector should be used in EditorProvider');\n  }\n\n  return injector;\n}\n\nfunction EditorProvider({ children }: { children?: ReactNode }) {\n  const [editor, setEditor] = useState(null);\n  const injectorRef = useRef<Injector | null>(null);\n\n  if (!injectorRef.current) {\n    injectorRef.current = createInjector();\n  }\n\n  return (\n    <InternalEditorContext.Provider value={editor}>\n      <InternalSetEditorContext.Provider value={setEditor}>\n        <InjectorContext.Provider value={injectorRef.current}>\n          {children}\n        </InjectorContext.Provider>\n      </InternalSetEditorContext.Provider>\n    </InternalEditorContext.Provider>\n  );\n}\n\nexport { EditorProvider, useEditor, useSetEditor, useInjector };\n","import React, { useState, useCallback, Fragment } from 'react';\nimport type { ReactPortal } from 'react';\n\ntype PortalItem = {\n  id: string;\n  portal: ReactPortal;\n};\n\nfunction createPortalConnector() {\n  let add = (id: string, portal: ReactPortal) => {};\n  let remove = (id: string) => {};\n\n  function connect(id: string, portal: ReactPortal) {\n    add(id, portal);\n  }\n\n  function disconnect(id: string) {\n    remove(id);\n  }\n\n  function Portal() {\n    const [items, setItems] = useState<PortalItem[]>([]);\n\n    const addItem = useCallback((id: string, portal: ReactPortal) => {\n      setItems(prevItems => {\n        const nextItems = [...prevItems];\n        const index = nextItems.findIndex(item => item.id === id);\n        if (index > -1) {\n          nextItems[index] = { id, portal };\n        } else {\n          nextItems.push({ id, portal });\n        }\n        return nextItems;\n      });\n    }, []);\n    const removeItem = useCallback((id: string) => {\n      setItems(items => items.filter(item => item.id !== id));\n    }, []);\n\n    add = addItem;\n    remove = removeItem;\n\n    return <Fragment>{items.map(item => item.portal)}</Fragment>;\n  }\n\n  return {\n    connect,\n    disconnect,\n    Portal,\n  };\n}\n\ntype Connector = ReturnType<typeof createPortalConnector>;\n\nexport { createPortalConnector };\nexport type { Connector };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nimport React, { useMemo } from 'react';\n\nimport { type EditorPluginSpec } from '@coze-editor/core';\nimport { type Extension } from '@codemirror/state';\n\nimport { Renderer, type InferRendererProps } from './renderer';\n\nconst OriginRenderer: (props: any) => JSX.Element = Renderer;\n\nfunction createRenderer<T extends EditorPluginSpec<string, any, any>[]>(\n  plugins: T,\n  builtinExtensions?: Extension[],\n) {\n  return function CustomRenderer(props: InferRendererProps<T>) {\n    const userExtensions = props.extensions;\n\n    const extensions: Extension[] = useMemo(\n      () => [...(builtinExtensions ?? []), ...(userExtensions ?? [])],\n      [userExtensions],\n    );\n\n    return (\n      <OriginRenderer {...props} extensions={extensions} plugins={plugins} />\n    );\n  };\n}\n\nexport { createRenderer };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nexport { Renderer, connector, type InferRendererProps } from './renderer';\n\nexport { createRenderer } from './create-renderer';\n\nexport { EditorProvider, useEditor, useInjector } from './provider';\n\nexport * from '@coze-editor/core';\n"],"mappings":"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","names":["React","useRef","useState","React","useState","items","useState","useRef","React","React","useMemo","useMemo","React"]}

package/dist/index.d.mts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { EditorPluginSpec, InferValues, InferEditorAPIFromPlugins, InferEvents, Injector } from '@coze-editor/core';
 export * from '@coze-editor/core';
-import { Extension } from '@codemirror/state';
+import { Extension, Facet } from '@codemirror/state';
 
 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
 type InferReactEvents<T extends Record<string, any>> = UnionToIntersection<{
@@ -20,6 +20,15 @@ type InferRendererProps<T extends EditorPluginSpec<string, any, any>[]> = {
     didMount?: (api: InferEditorAPIFromPlugins<T>) => void;
     children?: ReactNode;
 } & (InferEvents<T[number]> extends Record<string, any> ? InferReactEvents<InferEvents<T[number]>> : unknown);
+declare const connector: Facet<{
+    connect: (id: string, portal: React.ReactPortal) => void;
+    disconnect: (id: string) => void;
+    Portal: () => react_jsx_runtime.JSX.Element;
+}, {
+    connect: (id: string, portal: React.ReactPortal) => void;
+    disconnect: (id: string) => void;
+    Portal: () => react_jsx_runtime.JSX.Element;
+}>;
 declare function Renderer<T extends EditorPluginSpec<string, any, any>[]>(props: {
     plugins: T;
 } & InferRendererProps<T>): react_jsx_runtime.JSX.Element;
@@ -32,4 +41,4 @@ declare function EditorProvider({ children }: {
     children?: ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-export { EditorProvider, type InferRendererProps, Renderer, createRenderer, useEditor, useInjector };
+export { EditorProvider, type InferRendererProps, Renderer, connector, createRenderer, useEditor, useInjector };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { EditorPluginSpec, InferValues, InferEditorAPIFromPlugins, InferEvents, Injector } from '@coze-editor/core';
 export * from '@coze-editor/core';
-import { Extension } from '@codemirror/state';
+import { Extension, Facet } from '@codemirror/state';
 
 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
 type InferReactEvents<T extends Record<string, any>> = UnionToIntersection<{
@@ -20,6 +20,15 @@ type InferRendererProps<T extends EditorPluginSpec<string, any, any>[]> = {
     didMount?: (api: InferEditorAPIFromPlugins<T>) => void;
     children?: ReactNode;
 } & (InferEvents<T[number]> extends Record<string, any> ? InferReactEvents<InferEvents<T[number]>> : unknown);
+declare const connector: Facet<{
+    connect: (id: string, portal: React.ReactPortal) => void;
+    disconnect: (id: string) => void;
+    Portal: () => react_jsx_runtime.JSX.Element;
+}, {
+    connect: (id: string, portal: React.ReactPortal) => void;
+    disconnect: (id: string) => void;
+    Portal: () => react_jsx_runtime.JSX.Element;
+}>;
 declare function Renderer<T extends EditorPluginSpec<string, any, any>[]>(props: {
     plugins: T;
 } & InferRendererProps<T>): react_jsx_runtime.JSX.Element;
@@ -32,4 +41,4 @@ declare function EditorProvider({ children }: {
     children?: ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-export { EditorProvider, type InferRendererProps, Renderer, createRenderer, useEditor, useInjector };
+export { EditorProvider, type InferRendererProps, Renderer, connector, createRenderer, useEditor, useInjector };

package/dist/index.js

@@ -32,6 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   EditorProvider: () => EditorProvider,
   Renderer: () => Renderer,
+  connector: () => connector,
   createRenderer: () => createRenderer,
   useEditor: () => useEditor,
   useInjector: () => useInjector
@@ -39,8 +40,10 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/renderer.tsx
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
+var import_utils = require("@coze-editor/utils");
 var import_core2 = require("@coze-editor/core");
+var import_state = require("@codemirror/state");
 
 // src/provider.tsx
 var import_react = __toESM(require("react"));
@@ -70,10 +73,54 @@ function EditorProvider({ children }) {
   return /* @__PURE__ */ import_react.default.createElement(InternalEditorContext.Provider, { value: editor }, /* @__PURE__ */ import_react.default.createElement(InternalSetEditorContext.Provider, { value: setEditor }, /* @__PURE__ */ import_react.default.createElement(InjectorContext.Provider, { value: injectorRef.current }, children)));
 }
 
+// src/connector.tsx
+var import_react2 = __toESM(require("react"));
+function createPortalConnector() {
+  let add = (id, portal) => {
+  };
+  let remove = (id) => {
+  };
+  function connect(id, portal) {
+    add(id, portal);
+  }
+  function disconnect(id) {
+    remove(id);
+  }
+  function Portal() {
+    const [items, setItems] = (0, import_react2.useState)([]);
+    const addItem = (0, import_react2.useCallback)((id, portal) => {
+      setItems((prevItems) => {
+        const nextItems = [...prevItems];
+        const index = nextItems.findIndex((item) => item.id === id);
+        if (index > -1) {
+          nextItems[index] = { id, portal };
+        } else {
+          nextItems.push({ id, portal });
+        }
+        return nextItems;
+      });
+    }, []);
+    const removeItem = (0, import_react2.useCallback)((id) => {
+      setItems((items2) => items2.filter((item) => item.id !== id));
+    }, []);
+    add = addItem;
+    remove = removeItem;
+    return /* @__PURE__ */ import_react2.default.createElement(import_react2.Fragment, null, items.map((item) => item.portal));
+  }
+  return {
+    connect,
+    disconnect,
+    Portal
+  };
+}
+
 // src/renderer.tsx
 function firstLetterToUppercase(str) {
   return str.charAt(0).toUpperCase() + str.substring(1);
 }
+var connector = import_state.Facet.define({
+  combine: import_utils.FacetCombineStrategy.First
+});
 function Renderer(props) {
   const {
     plugins,
@@ -85,14 +132,18 @@ function Renderer(props) {
     didMount,
     children
   } = props;
-  const [api, setAPI] = (0, import_react2.useState)();
-  const ref = (0, import_react2.useRef)(null);
-  const apiRef = (0, import_react2.useRef)(null);
-  const propsRef = (0, import_react2.useRef)(null);
+  const [api, setAPI] = (0, import_react3.useState)();
+  const ref = (0, import_react3.useRef)(null);
+  const apiRef = (0, import_react3.useRef)(null);
+  const propsRef = (0, import_react3.useRef)(null);
   const setEditor = useSetEditor();
   const injector = useInjector();
+  const pc = (0, import_react3.useMemo)(() => createPortalConnector(), []);
+  const connectorRef = (0, import_react3.useRef)(pc);
+  connectorRef.current = pc;
+  const { Portal } = pc;
   propsRef.current = props;
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const { render, eventKeys } = (0, import_core2.create)({
       plugins,
       injector
@@ -102,7 +153,7 @@ function Renderer(props) {
       root,
       defaultValue,
       options: options ?? {},
-      extensions
+      extensions: [connector.of(connectorRef.current), ...extensions ?? []]
     });
     apiRef.current = exported;
     eventKeys.forEach((eventName) => {
@@ -122,29 +173,29 @@ function Renderer(props) {
       exported.$destroy();
     };
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!api || !setEditor) {
       return;
     }
     setEditor(api);
   }, [api, setEditor]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     apiRef.current.$set(props.options ?? {});
   }, [props.options]);
-  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("div", { ...domProps, ref }), children);
+  return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("div", { ...domProps, ref }), children, /* @__PURE__ */ import_react3.default.createElement(Portal, null));
 }
 
 // src/create-renderer.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var OriginRenderer = Renderer;
 function createRenderer(plugins, builtinExtensions) {
   return function CustomRenderer(props) {
     const userExtensions = props.extensions;
-    const extensions = (0, import_react3.useMemo)(
+    const extensions = (0, import_react4.useMemo)(
       () => [...builtinExtensions ?? [], ...userExtensions ?? []],
       [userExtensions]
     );
-    return /* @__PURE__ */ import_react3.default.createElement(OriginRenderer, { ...props, extensions, plugins });
+    return /* @__PURE__ */ import_react4.default.createElement(OriginRenderer, { ...props, extensions, plugins });
   };
 }
 
@@ -154,6 +205,7 @@ __reExport(index_exports, require("@coze-editor/core"), module.exports);
 0 && (module.exports = {
   EditorProvider,
   Renderer,
+  connector,
   createRenderer,
   useEditor,
   useInjector,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/renderer.tsx","../src/provider.tsx","../src/create-renderer.tsx"],"sourcesContent":["//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nexport { Renderer, type InferRendererProps } from './renderer';\n\nexport { createRenderer } from './create-renderer';\n\nexport { EditorProvider, useEditor, useInjector } from './provider';\n\nexport * from '@coze-editor/core';\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, {\n  type CSSProperties,\n  useEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport {\n  type EditorPluginSpec,\n  type InferEditorAPIFromPlugins,\n  type InferEvents,\n  type InferValues,\n  create,\n} from '@coze-editor/core';\nimport { type Extension } from '@codemirror/state';\n\nimport { useInjector, useSetEditor } from './provider';\n\ntype UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (\n  k: infer I,\n) => void\n  ? I\n  : never;\n\ntype InferReactEvents<T extends Record<string, any>> = UnionToIntersection<{\n  [K in keyof T as `on${Capitalize<string & K>}`]?: (e: T[K]) => void;\n}>;\n\nfunction firstLetterToUppercase(str: string) {\n  return str.charAt(0).toUpperCase() + str.substring(1);\n}\n\ntype InferRendererProps<T extends EditorPluginSpec<string, any, any>[]> = {\n  domProps?: {\n    style?: CSSProperties;\n    className?: string;\n  };\n  defaultValue?: string;\n  root?: Document | ShadowRoot;\n  options?: Partial<InferValues<T[number]>>;\n  extensions?: Extension[];\n  didMount?: (api: InferEditorAPIFromPlugins<T>) => void;\n  children?: ReactNode;\n} & (InferEvents<T[number]> extends Record<string, any>\n  ? InferReactEvents<InferEvents<T[number]>>\n  : unknown);\n\nfunction Renderer<T extends EditorPluginSpec<string, any, any>[]>(\n  props: { plugins: T } & InferRendererProps<T>,\n) {\n  const {\n    plugins,\n    defaultValue,\n    root,\n    options,\n    domProps = {},\n    extensions,\n    didMount,\n    children,\n  } = props;\n\n  const [api, setAPI] = useState<any>();\n  const ref = useRef(null);\n  const apiRef = useRef<any>(null);\n  const propsRef = useRef<typeof props | null>(null);\n  const setEditor = useSetEditor();\n  const injector = useInjector();\n\n  propsRef.current = props;\n\n  useEffect(() => {\n    const { render, eventKeys } = create({\n      plugins,\n      injector,\n    });\n\n    const exported = render({\n      parent: ref.current!,\n      root,\n      defaultValue,\n      options: options ?? {},\n      extensions,\n    });\n\n    apiRef.current = exported;\n\n    eventKeys.forEach((eventName: any) => {\n      exported.$on(eventName, e => {\n        const handler = (propsRef.current as any)?.[\n          `on${firstLetterToUppercase(eventName)}`\n        ];\n        if (typeof handler === 'function') {\n          handler(e);\n        }\n      });\n    });\n\n    if (typeof didMount === 'function') {\n      didMount(exported);\n    }\n\n    setAPI(exported);\n\n    return () => {\n      exported.$destroy();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!api || !setEditor) {\n      return;\n    }\n\n    setEditor(api);\n  }, [api, setEditor]);\n\n  useEffect(() => {\n    apiRef.current.$set(props.options ?? {});\n  }, [props.options]);\n\n  return (\n    <>\n      <div {...domProps} ref={ref} />\n      {children}\n    </>\n  );\n}\n\nexport { Renderer };\n\nexport type { InferRendererProps };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nimport React, {\n  type Dispatch,\n  type ReactNode,\n  createContext,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport { type Injector, createInjector } from '@coze-editor/core';\n\nconst InternalEditorContext = createContext<unknown>(null);\nconst InternalSetEditorContext = createContext<Dispatch<any> | null>(null);\nconst InjectorContext = createContext<Injector | undefined>(undefined);\n\nfunction useEditor<T>(): T {\n  return useContext(InternalEditorContext) as T;\n}\n\nfunction useSetEditor(): Dispatch<any> | null {\n  return useContext(InternalSetEditorContext);\n}\n\nfunction useInjector(): Injector {\n  const injector = useContext(InjectorContext);\n\n  if (!injector) {\n    throw new Error('useInjector should be used in EditorProvider');\n  }\n\n  return injector;\n}\n\nfunction EditorProvider({ children }: { children?: ReactNode }) {\n  const [editor, setEditor] = useState(null);\n  const injectorRef = useRef<Injector | null>(null);\n\n  if (!injectorRef.current) {\n    injectorRef.current = createInjector();\n  }\n\n  return (\n    <InternalEditorContext.Provider value={editor}>\n      <InternalSetEditorContext.Provider value={setEditor}>\n        <InjectorContext.Provider value={injectorRef.current}>\n          {children}\n        </InjectorContext.Provider>\n      </InternalSetEditorContext.Provider>\n    </InternalEditorContext.Provider>\n  );\n}\n\nexport { EditorProvider, useEditor, useSetEditor, useInjector };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nimport React, { useMemo } from 'react';\n\nimport { type EditorPluginSpec } from '@coze-editor/core';\nimport { type Extension } from '@codemirror/state';\n\nimport { Renderer, type InferRendererProps } from './renderer';\n\nconst OriginRenderer: (props: any) => JSX.Element = Renderer;\n\nfunction createRenderer<T extends EditorPluginSpec<string, any, any>[]>(\n  plugins: T,\n  builtinExtensions?: Extension[],\n) {\n  return function CustomRenderer(props: InferRendererProps<T>) {\n    const userExtensions = props.extensions;\n\n    const extensions: Extension[] = useMemo(\n      () => [...(builtinExtensions ?? []), ...(userExtensions ?? [])],\n      [userExtensions],\n    );\n\n    return (\n      <OriginRenderer {...props} extensions={extensions} plugins={plugins} />\n    );\n  };\n}\n\nexport { createRenderer };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACIA,IAAAA,gBAMO;AAEP,IAAAC,eAMO;;;ACfP,mBAOO;AAEP,kBAA8C;AAE9C,IAAM,4BAAwB,4BAAuB,IAAI;AACzD,IAAM,+BAA2B,4BAAoC,IAAI;AACzE,IAAM,sBAAkB,4BAAoC,MAAS;AAErE,SAAS,YAAkB;AACzB,aAAO,yBAAW,qBAAqB;AACzC;AAEA,SAAS,eAAqC;AAC5C,aAAO,yBAAW,wBAAwB;AAC5C;AAEA,SAAS,cAAwB;AAC/B,QAAM,eAAW,yBAAW,eAAe;AAE3C,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,8CAA8C;AAAA,EAChE;AAEA,SAAO;AACT;AAEA,SAAS,eAAe,EAAE,SAAS,GAA6B;AAC9D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,IAAI;AACzC,QAAM,kBAAc,qBAAwB,IAAI;AAEhD,MAAI,CAAC,YAAY,SAAS;AACxB,gBAAY,cAAU,4BAAe;AAAA,EACvC;AAEA,SACE,6BAAAC,QAAA,cAAC,sBAAsB,UAAtB,EAA+B,OAAO,UACrC,6BAAAA,QAAA,cAAC,yBAAyB,UAAzB,EAAkC,OAAO,aACxC,6BAAAA,QAAA,cAAC,gBAAgB,UAAhB,EAAyB,OAAO,YAAY,WAC1C,QACH,CACF,CACF;AAEJ;;;ADpBA,SAAS,uBAAuB,KAAa;AAC3C,SAAO,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,IAAI,UAAU,CAAC;AACtD;AAiBA,SAAS,SACP,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,CAAC;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,KAAK,MAAM,QAAI,wBAAc;AACpC,QAAM,UAAM,sBAAO,IAAI;AACvB,QAAM,aAAS,sBAAY,IAAI;AAC/B,QAAM,eAAW,sBAA4B,IAAI;AACjD,QAAM,YAAY,aAAa;AAC/B,QAAM,WAAW,YAAY;AAE7B,WAAS,UAAU;AAEnB,+BAAU,MAAM;AACd,UAAM,EAAE,QAAQ,UAAU,QAAI,qBAAO;AAAA,MACnC;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,WAAW,OAAO;AAAA,MACtB,QAAQ,IAAI;AAAA,MACZ;AAAA,MACA;AAAA,MACA,SAAS,WAAW,CAAC;AAAA,MACrB;AAAA,IACF,CAAC;AAED,WAAO,UAAU;AAEjB,cAAU,QAAQ,CAAC,cAAmB;AACpC,eAAS,IAAI,WAAW,OAAK;AA5FnC;AA6FQ,cAAM,WAAW,cAAS,YAAT,mBACf,KAAK,uBAAuB,SAAS,CAAC;AAExC,YAAI,OAAO,YAAY,YAAY;AACjC,kBAAQ,CAAC;AAAA,QACX;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,QAAI,OAAO,aAAa,YAAY;AAClC,eAAS,QAAQ;AAAA,IACnB;AAEA,WAAO,QAAQ;AAEf,WAAO,MAAM;AACX,eAAS,SAAS;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,+BAAU,MAAM;AACd,QAAI,CAAC,OAAO,CAAC,WAAW;AACtB;AAAA,IACF;AAEA,cAAU,GAAG;AAAA,EACf,GAAG,CAAC,KAAK,SAAS,CAAC;AAEnB,+BAAU,MAAM;AACd,WAAO,QAAQ,KAAK,MAAM,WAAW,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,SACE,8BAAAC,QAAA,4BAAAA,QAAA,gBACE,8BAAAA,QAAA,cAAC,SAAK,GAAG,UAAU,KAAU,GAC5B,QACH;AAEJ;;;AEhIA,IAAAC,gBAA+B;AAO/B,IAAM,iBAA8C;AAEpD,SAAS,eACP,SACA,mBACA;AACA,SAAO,SAAS,eAAe,OAA8B;AAC3D,UAAM,iBAAiB,MAAM;AAE7B,UAAM,iBAA0B;AAAA,MAC9B,MAAM,CAAC,GAAI,qBAAqB,CAAC,GAAI,GAAI,kBAAkB,CAAC,CAAE;AAAA,MAC9D,CAAC,cAAc;AAAA,IACjB;AAEA,WACE,8BAAAC,QAAA,cAAC,kBAAgB,GAAG,OAAO,YAAwB,SAAkB;AAAA,EAEzE;AACF;;;AHnBA,0BAAc,8BATd;","names":["import_react","import_core","React","React","import_react","React"]}
+{"version":3,"sources":["../src/index.ts","../src/renderer.tsx","../src/provider.tsx","../src/connector.tsx","../src/create-renderer.tsx"],"sourcesContent":["//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nexport { Renderer, connector, type InferRendererProps } from './renderer';\n\nexport { createRenderer } from './create-renderer';\n\nexport { EditorProvider, useEditor, useInjector } from './provider';\n\nexport * from '@coze-editor/core';\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, {\n  type CSSProperties,\n  useEffect,\n  useRef,\n  useState,\n  type ReactNode,\n  useMemo,\n} from 'react';\n\nimport { FacetCombineStrategy } from '@coze-editor/utils';\nimport {\n  type EditorPluginSpec,\n  type InferEditorAPIFromPlugins,\n  type InferEvents,\n  type InferValues,\n  create,\n} from '@coze-editor/core';\nimport { Facet, type Extension } from '@codemirror/state';\n\nimport { useInjector, useSetEditor } from './provider';\nimport { type Connector, createPortalConnector } from './connector';\n\ntype UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (\n  k: infer I,\n) => void\n  ? I\n  : never;\n\ntype InferReactEvents<T extends Record<string, any>> = UnionToIntersection<{\n  [K in keyof T as `on${Capitalize<string & K>}`]?: (e: T[K]) => void;\n}>;\n\nfunction firstLetterToUppercase(str: string) {\n  return str.charAt(0).toUpperCase() + str.substring(1);\n}\n\ntype InferRendererProps<T extends EditorPluginSpec<string, any, any>[]> = {\n  domProps?: {\n    style?: CSSProperties;\n    className?: string;\n  };\n  defaultValue?: string;\n  root?: Document | ShadowRoot;\n  options?: Partial<InferValues<T[number]>>;\n  extensions?: Extension[];\n  didMount?: (api: InferEditorAPIFromPlugins<T>) => void;\n  children?: ReactNode;\n} & (InferEvents<T[number]> extends Record<string, any>\n  ? InferReactEvents<InferEvents<T[number]>>\n  : unknown);\n\nconst connector = Facet.define<Connector, Connector>({\n  combine: FacetCombineStrategy.First,\n});\n\nfunction Renderer<T extends EditorPluginSpec<string, any, any>[]>(\n  props: { plugins: T } & InferRendererProps<T>,\n) {\n  const {\n    plugins,\n    defaultValue,\n    root,\n    options,\n    domProps = {},\n    extensions,\n    didMount,\n    children,\n  } = props;\n\n  const [api, setAPI] = useState<any>();\n  const ref = useRef(null);\n  const apiRef = useRef<any>(null);\n  const propsRef = useRef<typeof props | null>(null);\n  const setEditor = useSetEditor();\n  const injector = useInjector();\n\n  const pc = useMemo(() => createPortalConnector(), []);\n  const connectorRef = useRef<Connector>(pc);\n  connectorRef.current = pc;\n  const { Portal } = pc;\n\n  propsRef.current = props;\n\n  useEffect(() => {\n    const { render, eventKeys } = create({\n      plugins,\n      injector,\n    });\n\n    const exported = render({\n      parent: ref.current!,\n      root,\n      defaultValue,\n      options: options ?? {},\n      extensions: [connector.of(connectorRef.current), ...(extensions ?? [])],\n    });\n\n    apiRef.current = exported;\n\n    eventKeys.forEach((eventName: any) => {\n      exported.$on(eventName, e => {\n        const handler = (propsRef.current as any)?.[\n          `on${firstLetterToUppercase(eventName)}`\n        ];\n        if (typeof handler === 'function') {\n          handler(e);\n        }\n      });\n    });\n\n    if (typeof didMount === 'function') {\n      didMount(exported);\n    }\n\n    setAPI(exported);\n\n    return () => {\n      exported.$destroy();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!api || !setEditor) {\n      return;\n    }\n\n    setEditor(api);\n  }, [api, setEditor]);\n\n  useEffect(() => {\n    apiRef.current.$set(props.options ?? {});\n  }, [props.options]);\n\n  return (\n    <>\n      <div {...domProps} ref={ref} />\n      {children}\n      <Portal />\n    </>\n  );\n}\n\nexport { Renderer, connector };\n\nexport type { InferRendererProps };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nimport React, {\n  type Dispatch,\n  type ReactNode,\n  createContext,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport { type Injector, createInjector } from '@coze-editor/core';\n\nconst InternalEditorContext = createContext<unknown>(null);\nconst InternalSetEditorContext = createContext<Dispatch<any> | null>(null);\nconst InjectorContext = createContext<Injector | undefined>(undefined);\n\nfunction useEditor<T>(): T {\n  return useContext(InternalEditorContext) as T;\n}\n\nfunction useSetEditor(): Dispatch<any> | null {\n  return useContext(InternalSetEditorContext);\n}\n\nfunction useInjector(): Injector {\n  const injector = useContext(InjectorContext);\n\n  if (!injector) {\n    throw new Error('useInjector should be used in EditorProvider');\n  }\n\n  return injector;\n}\n\nfunction EditorProvider({ children }: { children?: ReactNode }) {\n  const [editor, setEditor] = useState(null);\n  const injectorRef = useRef<Injector | null>(null);\n\n  if (!injectorRef.current) {\n    injectorRef.current = createInjector();\n  }\n\n  return (\n    <InternalEditorContext.Provider value={editor}>\n      <InternalSetEditorContext.Provider value={setEditor}>\n        <InjectorContext.Provider value={injectorRef.current}>\n          {children}\n        </InjectorContext.Provider>\n      </InternalSetEditorContext.Provider>\n    </InternalEditorContext.Provider>\n  );\n}\n\nexport { EditorProvider, useEditor, useSetEditor, useInjector };\n","import React, { useState, useCallback, Fragment } from 'react';\nimport type { ReactPortal } from 'react';\n\ntype PortalItem = {\n  id: string;\n  portal: ReactPortal;\n};\n\nfunction createPortalConnector() {\n  let add = (id: string, portal: ReactPortal) => {};\n  let remove = (id: string) => {};\n\n  function connect(id: string, portal: ReactPortal) {\n    add(id, portal);\n  }\n\n  function disconnect(id: string) {\n    remove(id);\n  }\n\n  function Portal() {\n    const [items, setItems] = useState<PortalItem[]>([]);\n\n    const addItem = useCallback((id: string, portal: ReactPortal) => {\n      setItems(prevItems => {\n        const nextItems = [...prevItems];\n        const index = nextItems.findIndex(item => item.id === id);\n        if (index > -1) {\n          nextItems[index] = { id, portal };\n        } else {\n          nextItems.push({ id, portal });\n        }\n        return nextItems;\n      });\n    }, []);\n    const removeItem = useCallback((id: string) => {\n      setItems(items => items.filter(item => item.id !== id));\n    }, []);\n\n    add = addItem;\n    remove = removeItem;\n\n    return <Fragment>{items.map(item => item.portal)}</Fragment>;\n  }\n\n  return {\n    connect,\n    disconnect,\n    Portal,\n  };\n}\n\ntype Connector = ReturnType<typeof createPortalConnector>;\n\nexport { createPortalConnector };\nexport type { Connector };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nimport React, { useMemo } from 'react';\n\nimport { type EditorPluginSpec } from '@coze-editor/core';\nimport { type Extension } from '@codemirror/state';\n\nimport { Renderer, type InferRendererProps } from './renderer';\n\nconst OriginRenderer: (props: any) => JSX.Element = Renderer;\n\nfunction createRenderer<T extends EditorPluginSpec<string, any, any>[]>(\n  plugins: T,\n  builtinExtensions?: Extension[],\n) {\n  return function CustomRenderer(props: InferRendererProps<T>) {\n    const userExtensions = props.extensions;\n\n    const extensions: Extension[] = useMemo(\n      () => [...(builtinExtensions ?? []), ...(userExtensions ?? [])],\n      [userExtensions],\n    );\n\n    return (\n      <OriginRenderer {...props} extensions={extensions} plugins={plugins} />\n    );\n  };\n}\n\nexport { createRenderer };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACIA,IAAAA,gBAOO;AAEP,mBAAqC;AACrC,IAAAC,eAMO;AACP,mBAAsC;;;AClBtC,mBAOO;AAEP,kBAA8C;AAE9C,IAAM,4BAAwB,4BAAuB,IAAI;AACzD,IAAM,+BAA2B,4BAAoC,IAAI;AACzE,IAAM,sBAAkB,4BAAoC,MAAS;AAErE,SAAS,YAAkB;AACzB,aAAO,yBAAW,qBAAqB;AACzC;AAEA,SAAS,eAAqC;AAC5C,aAAO,yBAAW,wBAAwB;AAC5C;AAEA,SAAS,cAAwB;AAC/B,QAAM,eAAW,yBAAW,eAAe;AAE3C,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,8CAA8C;AAAA,EAChE;AAEA,SAAO;AACT;AAEA,SAAS,eAAe,EAAE,SAAS,GAA6B;AAC9D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,IAAI;AACzC,QAAM,kBAAc,qBAAwB,IAAI;AAEhD,MAAI,CAAC,YAAY,SAAS;AACxB,gBAAY,cAAU,4BAAe;AAAA,EACvC;AAEA,SACE,6BAAAC,QAAA,cAAC,sBAAsB,UAAtB,EAA+B,OAAO,UACrC,6BAAAA,QAAA,cAAC,yBAAyB,UAAzB,EAAkC,OAAO,aACxC,6BAAAA,QAAA,cAAC,gBAAgB,UAAhB,EAAyB,OAAO,YAAY,WAC1C,QACH,CACF,CACF;AAEJ;;;ACrDA,IAAAC,gBAAuD;AAQvD,SAAS,wBAAwB;AAC/B,MAAI,MAAM,CAAC,IAAY,WAAwB;AAAA,EAAC;AAChD,MAAI,SAAS,CAAC,OAAe;AAAA,EAAC;AAE9B,WAAS,QAAQ,IAAY,QAAqB;AAChD,QAAI,IAAI,MAAM;AAAA,EAChB;AAEA,WAAS,WAAW,IAAY;AAC9B,WAAO,EAAE;AAAA,EACX;AAEA,WAAS,SAAS;AAChB,UAAM,CAAC,OAAO,QAAQ,QAAI,wBAAuB,CAAC,CAAC;AAEnD,UAAM,cAAU,2BAAY,CAAC,IAAY,WAAwB;AAC/D,eAAS,eAAa;AACpB,cAAM,YAAY,CAAC,GAAG,SAAS;AAC/B,cAAM,QAAQ,UAAU,UAAU,UAAQ,KAAK,OAAO,EAAE;AACxD,YAAI,QAAQ,IAAI;AACd,oBAAU,KAAK,IAAI,EAAE,IAAI,OAAO;AAAA,QAClC,OAAO;AACL,oBAAU,KAAK,EAAE,IAAI,OAAO,CAAC;AAAA,QAC/B;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH,GAAG,CAAC,CAAC;AACL,UAAM,iBAAa,2BAAY,CAAC,OAAe;AAC7C,eAAS,CAAAC,WAASA,OAAM,OAAO,UAAQ,KAAK,OAAO,EAAE,CAAC;AAAA,IACxD,GAAG,CAAC,CAAC;AAEL,UAAM;AACN,aAAS;AAET,WAAO,8BAAAC,QAAA,cAAC,8BAAU,MAAM,IAAI,UAAQ,KAAK,MAAM,CAAE;AAAA,EACnD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;AFdA,SAAS,uBAAuB,KAAa;AAC3C,SAAO,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,IAAI,UAAU,CAAC;AACtD;AAiBA,IAAM,YAAY,mBAAM,OAA6B;AAAA,EACnD,SAAS,kCAAqB;AAChC,CAAC;AAED,SAAS,SACP,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,CAAC;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,KAAK,MAAM,QAAI,wBAAc;AACpC,QAAM,UAAM,sBAAO,IAAI;AACvB,QAAM,aAAS,sBAAY,IAAI;AAC/B,QAAM,eAAW,sBAA4B,IAAI;AACjD,QAAM,YAAY,aAAa;AAC/B,QAAM,WAAW,YAAY;AAE7B,QAAM,SAAK,uBAAQ,MAAM,sBAAsB,GAAG,CAAC,CAAC;AACpD,QAAM,mBAAe,sBAAkB,EAAE;AACzC,eAAa,UAAU;AACvB,QAAM,EAAE,OAAO,IAAI;AAEnB,WAAS,UAAU;AAEnB,+BAAU,MAAM;AACd,UAAM,EAAE,QAAQ,UAAU,QAAI,qBAAO;AAAA,MACnC;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,WAAW,OAAO;AAAA,MACtB,QAAQ,IAAI;AAAA,MACZ;AAAA,MACA;AAAA,MACA,SAAS,WAAW,CAAC;AAAA,MACrB,YAAY,CAAC,UAAU,GAAG,aAAa,OAAO,GAAG,GAAI,cAAc,CAAC,CAAE;AAAA,IACxE,CAAC;AAED,WAAO,UAAU;AAEjB,cAAU,QAAQ,CAAC,cAAmB;AACpC,eAAS,IAAI,WAAW,OAAK;AAxGnC;AAyGQ,cAAM,WAAW,cAAS,YAAT,mBACf,KAAK,uBAAuB,SAAS,CAAC;AAExC,YAAI,OAAO,YAAY,YAAY;AACjC,kBAAQ,CAAC;AAAA,QACX;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,QAAI,OAAO,aAAa,YAAY;AAClC,eAAS,QAAQ;AAAA,IACnB;AAEA,WAAO,QAAQ;AAEf,WAAO,MAAM;AACX,eAAS,SAAS;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,+BAAU,MAAM;AACd,QAAI,CAAC,OAAO,CAAC,WAAW;AACtB;AAAA,IACF;AAEA,cAAU,GAAG;AAAA,EACf,GAAG,CAAC,KAAK,SAAS,CAAC;AAEnB,+BAAU,MAAM;AACd,WAAO,QAAQ,KAAK,MAAM,WAAW,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,SACE,8BAAAC,QAAA,4BAAAA,QAAA,gBACE,8BAAAA,QAAA,cAAC,SAAK,GAAG,UAAU,KAAU,GAC5B,UACD,8BAAAA,QAAA,cAAC,YAAO,CACV;AAEJ;;;AG7IA,IAAAC,gBAA+B;AAO/B,IAAM,iBAA8C;AAEpD,SAAS,eACP,SACA,mBACA;AACA,SAAO,SAAS,eAAe,OAA8B;AAC3D,UAAM,iBAAiB,MAAM;AAE7B,UAAM,iBAA0B;AAAA,MAC9B,MAAM,CAAC,GAAI,qBAAqB,CAAC,GAAI,GAAI,kBAAkB,CAAC,CAAE;AAAA,MAC9D,CAAC,cAAc;AAAA,IACjB;AAEA,WACE,8BAAAC,QAAA,cAAC,kBAAgB,GAAG,OAAO,YAAwB,SAAkB;AAAA,EAEzE;AACF;;;AJnBA,0BAAc,8BATd;","names":["import_react","import_core","React","import_react","items","React","React","import_react","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coze-editor/react",
-  "version": "0.1.0-alpha.9c7cf5",
+  "version": "0.1.0-alpha.ab222a",
   "description": "react",
   "license": "MIT",
   "author": "fengzilong",
@@ -23,7 +23,8 @@
     "lint": "eslint && tsc --noEmit"
   },
   "dependencies": {
-    "@coze-editor/core": "0.1.0-alpha.9c7cf5"
+    "@coze-editor/core": "0.1.0-alpha.ab222a",
+    "@coze-editor/utils": "0.1.0-alpha.ab222a"
   },
   "devDependencies": {
     "@codemirror/state": "^6.4.1",