diff --git a/packages/addon-ckeditor5-react/lib/Field/index.tsx b/packages/addon-ckeditor5-react/lib/Field/index.tsx index a35007552..5a9e061c4 100644 --- a/packages/addon-ckeditor5-react/lib/Field/index.tsx +++ b/packages/addon-ckeditor5-react/lib/Field/index.tsx @@ -1,7 +1,8 @@ import type { EditorConfig } from '@ckeditor/ckeditor5-core'; import type { EventInfo } from '@ckeditor/ckeditor5-utils'; +import type ClassicEditor from '@oakjs/ckeditor5-build-custom'; import type { Editor } from '@oakjs/ckeditor5-build-custom'; -import { type ComponentPropsWithoutRef, useCallback } from 'react'; +import { type ComponentPropsWithoutRef, useCallback, useEffect, useState } from 'react'; import { CKEditor } from '@ckeditor/ckeditor5-react'; import { type FieldContent, @@ -23,15 +24,36 @@ const CKEditorField = ({ value, onChange, }: CKEditorFieldProps) => { + const [defaultEditor, setDefaultEditor] = useState<{ + classicEditor: typeof ClassicEditor; + }>(); + + const loadEditor = useCallback(async () => { + setDefaultEditor({ + classicEditor: (await import('@oakjs/ckeditor5-build-custom')) + ?.default, + }); + }, []); + + useEffect(() => { + if (!editor && !defaultEditor) { + loadEditor(); + } + }, [editor, defaultEditor, loadEditor]); + const onChange_ = useCallback((_: EventInfo, ed: Editor) => { onChange?.({ value: ed.getData() }); }, []); + if (!editor && !defaultEditor) { + return null; + } + return (