@coze-editor/react 0.1.0-alpha.323b5c → 0.1.0-alpha.5a549c
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/esm/index.js
CHANGED
|
@@ -49,6 +49,7 @@ function Renderer(props) {
|
|
|
49
49
|
const {
|
|
50
50
|
plugins,
|
|
51
51
|
defaultValue,
|
|
52
|
+
root,
|
|
52
53
|
options,
|
|
53
54
|
domProps = {},
|
|
54
55
|
extensions,
|
|
@@ -69,6 +70,7 @@ function Renderer(props) {
|
|
|
69
70
|
});
|
|
70
71
|
const exported = render({
|
|
71
72
|
parent: ref.current,
|
|
73
|
+
root,
|
|
72
74
|
defaultValue,
|
|
73
75
|
options: options ?? {},
|
|
74
76
|
extensions
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +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 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":";AAIA,OAAOA;AAAA,EAEL;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,OAEK;AAEP;AAAA,EAKE;AAAA,OACK;;;ACfP,OAAO;AAAA,EAGL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAwB,sBAAsB;AAE9C,IAAM,wBAAwB,cAAuB,IAAI;AACzD,IAAM,2BAA2B,cAAoC,IAAI;AACzE,IAAM,kBAAkB,cAAoC,MAAS;AAErE,SAAS,YAAkB;AACzB,SAAO,WAAW,qBAAqB;AACzC;AAEA,SAAS,eAAqC;AAC5C,SAAO,WAAW,wBAAwB;AAC5C;AAEA,SAAS,cAAwB;AAC/B,QAAM,WAAW,WAAW,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,IAAI,SAAS,IAAI;AACzC,QAAM,cAAc,OAAwB,IAAI;AAEhD,MAAI,CAAC,YAAY,SAAS;AACxB,gBAAY,UAAU,eAAe;AAAA,EACvC;AAEA,SACE,oCAAC,sBAAsB,UAAtB,EAA+B,OAAO,UACrC,oCAAC,yBAAyB,UAAzB,EAAkC,OAAO,aACxC,oCAAC,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;
|
|
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":";AAIA,OAAOA;AAAA,EAEL;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,OAEK;AAEP;AAAA,EAKE;AAAA,OACK;;;ACfP,OAAO;AAAA,EAGL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAwB,sBAAsB;AAE9C,IAAM,wBAAwB,cAAuB,IAAI;AACzD,IAAM,2BAA2B,cAAoC,IAAI;AACzE,IAAM,kBAAkB,cAAoC,MAAS;AAErE,SAAS,YAAkB;AACzB,SAAO,WAAW,qBAAqB;AACzC;AAEA,SAAS,eAAqC;AAC5C,SAAO,WAAW,wBAAwB;AAC5C;AAEA,SAAS,cAAwB;AAC/B,QAAM,WAAW,WAAW,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,IAAI,SAAS,IAAI;AACzC,QAAM,cAAc,OAAwB,IAAI;AAEhD,MAAI,CAAC,YAAY,SAAS;AACxB,gBAAY,UAAU,eAAe;AAAA,EACvC;AAEA,SACE,oCAAC,sBAAsB,UAAtB,EAA+B,OAAO,UACrC,oCAAC,yBAAyB,UAAzB,EAAkC,OAAO,aACxC,oCAAC,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,IAAIC,UAAc;AACpC,QAAM,MAAMC,QAAO,IAAI;AACvB,QAAM,SAASA,QAAY,IAAI;AAC/B,QAAM,WAAWA,QAA4B,IAAI;AACjD,QAAM,YAAY,aAAa;AAC/B,QAAM,WAAW,YAAY;AAE7B,WAAS,UAAU;AAEnB,YAAU,MAAM;AACd,UAAM,EAAE,QAAQ,UAAU,IAAI,OAAO;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,YAAU,MAAM;AACd,QAAI,CAAC,OAAO,CAAC,WAAW;AACtB;AAAA,IACF;AAEA,cAAU,GAAG;AAAA,EACf,GAAG,CAAC,KAAK,SAAS,CAAC;AAEnB,YAAU,MAAM;AACd,WAAO,QAAQ,KAAK,MAAM,WAAW,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,SACE,gBAAAC,OAAA,cAAAA,OAAA,gBACE,gBAAAA,OAAA,cAAC,SAAK,GAAG,UAAU,KAAU,GAC5B,QACH;AAEJ;;;AEhIA,OAAOC,UAAS,eAAe;AAO/B,IAAM,iBAA8C;AAEpD,SAAS,eACP,SACA,mBACA;AACA,SAAO,SAAS,eAAe,OAA8B;AAC3D,UAAM,iBAAiB,MAAM;AAE7B,UAAM,aAA0B;AAAA,MAC9B,MAAM,CAAC,GAAI,qBAAqB,CAAC,GAAI,GAAI,kBAAkB,CAAC,CAAE;AAAA,MAC9D,CAAC,cAAc;AAAA,IACjB;AAEA,WACE,gBAAAC,OAAA,cAAC,kBAAgB,GAAG,OAAO,YAAwB,SAAkB;AAAA,EAEzE;AACF;;;ACnBA,cAAc;","names":["React","useRef","useState","useState","useRef","React","React","React"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -14,6 +14,7 @@ type InferRendererProps<T extends EditorPluginSpec<string, any, any>[]> = {
|
|
|
14
14
|
className?: string;
|
|
15
15
|
};
|
|
16
16
|
defaultValue?: string;
|
|
17
|
+
root?: Document | ShadowRoot;
|
|
17
18
|
options?: Partial<InferValues<T[number]>>;
|
|
18
19
|
extensions?: Extension[];
|
|
19
20
|
didMount?: (api: InferEditorAPIFromPlugins<T>) => void;
|
package/dist/index.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ type InferRendererProps<T extends EditorPluginSpec<string, any, any>[]> = {
|
|
|
14
14
|
className?: string;
|
|
15
15
|
};
|
|
16
16
|
defaultValue?: string;
|
|
17
|
+
root?: Document | ShadowRoot;
|
|
17
18
|
options?: Partial<InferValues<T[number]>>;
|
|
18
19
|
extensions?: Extension[];
|
|
19
20
|
didMount?: (api: InferEditorAPIFromPlugins<T>) => void;
|
package/dist/index.js
CHANGED
|
@@ -78,6 +78,7 @@ function Renderer(props) {
|
|
|
78
78
|
const {
|
|
79
79
|
plugins,
|
|
80
80
|
defaultValue,
|
|
81
|
+
root,
|
|
81
82
|
options,
|
|
82
83
|
domProps = {},
|
|
83
84
|
extensions,
|
|
@@ -98,6 +99,7 @@ function Renderer(props) {
|
|
|
98
99
|
});
|
|
99
100
|
const exported = render({
|
|
100
101
|
parent: ref.current,
|
|
102
|
+
root,
|
|
101
103
|
defaultValue,
|
|
102
104
|
options: options ?? {},
|
|
103
105
|
extensions
|
package/dist/index.js.map
CHANGED
|
@@ -1 +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 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;
|
|
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":"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","names":["import_react","import_core","React","React","import_react","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coze-editor/react",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.5a549c",
|
|
4
4
|
"description": "react",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "fengzilong",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"lint": "eslint && tsc --noEmit"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@coze-editor/core": "0.1.0-alpha.
|
|
26
|
+
"@coze-editor/core": "0.1.0-alpha.5a549c"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@codemirror/state": "^6.4.1",
|