🐛 fix(ckeditor5-react): prevent ckeditor from loading on server side

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 (
     <div className={classNames('ckeditor-field', className)}>
       <CKEditor
         // @ts-ignore CK editor is weird anyway
-        editor={editor}
+        editor={editor || defaultEditor?.classicEditor}
         config={config}
         data={value}
         onChange={onChange_}

packages/addon-ckeditor5-react/lib/addons.ts

@@ -1,6 +1,5 @@
 import type { ReactFieldObject, AddonObject } from '@oakjs/react';
 import { omit } from '@oakjs/react';
-import ClassicEditor from '@oakjs/ckeditor5-build-custom';
 
 import Field, { CKEditorFieldProps } from './Field';
 
@@ -13,7 +12,7 @@ export const ckeditorField = ({
   render: Field,
   ...omit(props, ['onChange']),
   props: {
-    editor: editor || ClassicEditor,
+    editor,
     config: {
       ...config,
       link: {