From 2d1fe1cd1b6130c2386e58d6badf47e079504c28 Mon Sep 17 00:00:00 2001
From: Ugo Stephant <ugo@poool.fr>
Date: Fri, 25 Oct 2024 11:25:19 +0200
Subject: [PATCH] fix(ckeditor5-react): prevent ckeditor from loading on server
 side

---
 .../addon-ckeditor5-react/lib/Field/index.tsx | 26 +++++++++++++++++--
 packages/addon-ckeditor5-react/lib/addons.ts  |  3 +--
 2 files changed, 25 insertions(+), 4 deletions(-)

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 (
     <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_}
diff --git a/packages/addon-ckeditor5-react/lib/addons.ts b/packages/addon-ckeditor5-react/lib/addons.ts
index 750f8e521..a0c549806 100644
--- a/packages/addon-ckeditor5-react/lib/addons.ts
+++ b/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: {