@coze-editor/react 0.1.0-alpha.0fd19e

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 coze-dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/esm/index.js

@@ -0,0 +1,129 @@
+// src/renderer.tsx
+import React2, {
+  useEffect,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import {
+  create
+} from "@coze-editor/core";
+
+// src/provider.tsx
+import React, {
+  createContext,
+  useContext,
+  useRef,
+  useState
+} from "react";
+import { createInjector } from "@coze-editor/core";
+var InternalEditorContext = createContext(null);
+var InternalSetEditorContext = createContext(null);
+var InjectorContext = createContext(void 0);
+function useEditor() {
+  return useContext(InternalEditorContext);
+}
+function useSetEditor() {
+  return useContext(InternalSetEditorContext);
+}
+function useInjector() {
+  const injector = useContext(InjectorContext);
+  if (!injector) {
+    throw new Error("useInjector should be used in EditorProvider");
+  }
+  return injector;
+}
+function EditorProvider({ children }) {
+  const [editor, setEditor] = useState(null);
+  const injectorRef = useRef(null);
+  if (!injectorRef.current) {
+    injectorRef.current = createInjector();
+  }
+  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/renderer.tsx
+function firstLetterToUppercase(str) {
+  return str.charAt(0).toUpperCase() + str.substring(1);
+}
+function Renderer(props) {
+  const {
+    plugins,
+    defaultValue,
+    options,
+    domProps = {},
+    extensions,
+    didMount,
+    children
+  } = props;
+  const [api, setAPI] = useState2();
+  const ref = useRef2(null);
+  const apiRef = useRef2(null);
+  const propsRef = useRef2(null);
+  const setEditor = useSetEditor();
+  const injector = useInjector();
+  propsRef.current = props;
+  useEffect(() => {
+    const { render, eventKeys } = create({
+      plugins,
+      injector
+    });
+    const exported = render({
+      parent: ref.current,
+      defaultValue,
+      options: options ?? {},
+      extensions
+    });
+    apiRef.current = exported;
+    eventKeys.forEach((eventName) => {
+      exported.$on(eventName, (e) => {
+        var _a;
+        const handler = (_a = propsRef.current) == null ? void 0 : _a[`on${firstLetterToUppercase(eventName)}`];
+        if (typeof handler === "function") {
+          handler(e);
+        }
+      });
+    });
+    if (typeof didMount === "function") {
+      didMount(exported);
+    }
+    setAPI(exported);
+    return () => {
+      exported.$destroy();
+    };
+  }, []);
+  useEffect(() => {
+    if (!api || !setEditor) {
+      return;
+    }
+    setEditor(api);
+  }, [api, setEditor]);
+  useEffect(() => {
+    apiRef.current.$set(props.options ?? {});
+  }, [props.options]);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { ...domProps, ref }), children);
+}
+
+// src/create-renderer.tsx
+import React3, { useMemo } from "react";
+var OriginRenderer = Renderer;
+function createRenderer(plugins, builtinExtensions) {
+  return function CustomRenderer(props) {
+    const userExtensions = props.extensions;
+    const extensions = useMemo(
+      () => [...builtinExtensions ?? [], ...userExtensions ?? []],
+      [userExtensions]
+    );
+    return /* @__PURE__ */ React3.createElement(OriginRenderer, { ...props, extensions, plugins });
+  };
+}
+
+// src/index.ts
+export * from "@coze-editor/core";
+export {
+  EditorProvider,
+  Renderer,
+  createRenderer,
+  useEditor,
+  useInjector
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +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  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    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      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"]}

package/dist/index.d.mts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties, ReactNode } from 'react';
+import { EditorPluginSpec, InferValues, InferEditorAPIFromPlugins, InferEvents, Injector } from '@coze-editor/core';
+export * from '@coze-editor/core';
+import { Extension } 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<{
+    [K in keyof T as `on${Capitalize<string & K>}`]?: (e: T[K]) => void;
+}>;
+type InferRendererProps<T extends EditorPluginSpec<string, any, any>[]> = {
+    domProps?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    defaultValue?: string;
+    options?: Partial<InferValues<T[number]>>;
+    extensions?: Extension[];
+    didMount?: (api: InferEditorAPIFromPlugins<T>) => void;
+    children?: ReactNode;
+} & (InferEvents<T[number]> extends Record<string, any> ? InferReactEvents<InferEvents<T[number]>> : unknown);
+declare function Renderer<T extends EditorPluginSpec<string, any, any>[]>(props: {
+    plugins: T;
+} & InferRendererProps<T>): react_jsx_runtime.JSX.Element;
+
+declare function createRenderer<T extends EditorPluginSpec<string, any, any>[]>(plugins: T, builtinExtensions?: Extension[]): (props: InferRendererProps<T>) => react_jsx_runtime.JSX.Element;
+
+declare function useEditor<T>(): T;
+declare function useInjector(): Injector;
+declare function EditorProvider({ children }: {
+    children?: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { EditorProvider, type InferRendererProps, Renderer, createRenderer, useEditor, useInjector };

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties, ReactNode } from 'react';
+import { EditorPluginSpec, InferValues, InferEditorAPIFromPlugins, InferEvents, Injector } from '@coze-editor/core';
+export * from '@coze-editor/core';
+import { Extension } 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<{
+    [K in keyof T as `on${Capitalize<string & K>}`]?: (e: T[K]) => void;
+}>;
+type InferRendererProps<T extends EditorPluginSpec<string, any, any>[]> = {
+    domProps?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    defaultValue?: string;
+    options?: Partial<InferValues<T[number]>>;
+    extensions?: Extension[];
+    didMount?: (api: InferEditorAPIFromPlugins<T>) => void;
+    children?: ReactNode;
+} & (InferEvents<T[number]> extends Record<string, any> ? InferReactEvents<InferEvents<T[number]>> : unknown);
+declare function Renderer<T extends EditorPluginSpec<string, any, any>[]>(props: {
+    plugins: T;
+} & InferRendererProps<T>): react_jsx_runtime.JSX.Element;
+
+declare function createRenderer<T extends EditorPluginSpec<string, any, any>[]>(plugins: T, builtinExtensions?: Extension[]): (props: InferRendererProps<T>) => react_jsx_runtime.JSX.Element;
+
+declare function useEditor<T>(): T;
+declare function useInjector(): Injector;
+declare function EditorProvider({ children }: {
+    children?: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { EditorProvider, type InferRendererProps, Renderer, createRenderer, useEditor, useInjector };

package/dist/index.js

@@ -0,0 +1,160 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  EditorProvider: () => EditorProvider,
+  Renderer: () => Renderer,
+  createRenderer: () => createRenderer,
+  useEditor: () => useEditor,
+  useInjector: () => useInjector
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/renderer.tsx
+var import_react2 = __toESM(require("react"));
+var import_core2 = require("@coze-editor/core");
+
+// src/provider.tsx
+var import_react = __toESM(require("react"));
+var import_core = require("@coze-editor/core");
+var InternalEditorContext = (0, import_react.createContext)(null);
+var InternalSetEditorContext = (0, import_react.createContext)(null);
+var InjectorContext = (0, import_react.createContext)(void 0);
+function useEditor() {
+  return (0, import_react.useContext)(InternalEditorContext);
+}
+function useSetEditor() {
+  return (0, import_react.useContext)(InternalSetEditorContext);
+}
+function useInjector() {
+  const injector = (0, import_react.useContext)(InjectorContext);
+  if (!injector) {
+    throw new Error("useInjector should be used in EditorProvider");
+  }
+  return injector;
+}
+function EditorProvider({ children }) {
+  const [editor, setEditor] = (0, import_react.useState)(null);
+  const injectorRef = (0, import_react.useRef)(null);
+  if (!injectorRef.current) {
+    injectorRef.current = (0, import_core.createInjector)();
+  }
+  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/renderer.tsx
+function firstLetterToUppercase(str) {
+  return str.charAt(0).toUpperCase() + str.substring(1);
+}
+function Renderer(props) {
+  const {
+    plugins,
+    defaultValue,
+    options,
+    domProps = {},
+    extensions,
+    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 setEditor = useSetEditor();
+  const injector = useInjector();
+  propsRef.current = props;
+  (0, import_react2.useEffect)(() => {
+    const { render, eventKeys } = (0, import_core2.create)({
+      plugins,
+      injector
+    });
+    const exported = render({
+      parent: ref.current,
+      defaultValue,
+      options: options ?? {},
+      extensions
+    });
+    apiRef.current = exported;
+    eventKeys.forEach((eventName) => {
+      exported.$on(eventName, (e) => {
+        var _a;
+        const handler = (_a = propsRef.current) == null ? void 0 : _a[`on${firstLetterToUppercase(eventName)}`];
+        if (typeof handler === "function") {
+          handler(e);
+        }
+      });
+    });
+    if (typeof didMount === "function") {
+      didMount(exported);
+    }
+    setAPI(exported);
+    return () => {
+      exported.$destroy();
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (!api || !setEditor) {
+      return;
+    }
+    setEditor(api);
+  }, [api, setEditor]);
+  (0, import_react2.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);
+}
+
+// src/create-renderer.tsx
+var import_react3 = __toESM(require("react"));
+var OriginRenderer = Renderer;
+function createRenderer(plugins, builtinExtensions) {
+  return function CustomRenderer(props) {
+    const userExtensions = props.extensions;
+    const extensions = (0, import_react3.useMemo)(
+      () => [...builtinExtensions ?? [], ...userExtensions ?? []],
+      [userExtensions]
+    );
+    return /* @__PURE__ */ import_react3.default.createElement(OriginRenderer, { ...props, extensions, plugins });
+  };
+}
+
+// src/index.ts
+__reExport(index_exports, require("@coze-editor/core"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EditorProvider,
+  Renderer,
+  createRenderer,
+  useEditor,
+  useInjector,
+  ...require("@coze-editor/core")
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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  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    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      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":"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","names":["import_react","import_core","React","React","import_react","React"]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@coze-editor/react",
+  "version": "0.1.0-alpha.0fd19e",
+  "description": "react",
+  "license": "MIT",
+  "author": "fengzilong",
+  "maintainers": [],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.less",
+    "**/*.sass",
+    "**/*.scss"
+  ],
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "vite --force",
+    "lint": "eslint && tsc --noEmit"
+  },
+  "dependencies": {
+    "@coze-editor/core": "0.1.0-alpha.0fd19e"
+  },
+  "devDependencies": {
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.1",
+    "@coze-arch/ts-config": "workspace:*",
+    "@coze-editor/eslint-config": "workspace:*",
+    "@types/node": "^22",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "eslint": "9.14.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.8.2"
+  },
+  "peerDependencies": {
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.1",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0"
+  },
+  "packageManager": "pnpm@9.15.0",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "test:main": "./src/index.ts"
+}