🐛 fix: Fix hotlog

Author: canisminor1990

src/editor-kernel/kernel.ts

@@ -27,6 +27,8 @@ import { createEmptyEditorState } from './utils';
 templateSettings.interpolate = /{{([\S\s]+?)}}/g;
 
 export class Kernel extends EventEmitter implements IEditorKernel {
+  // Global hot reload flag
+  private static globalHotReloadMode: boolean | undefined = undefined;
   private dataTypeMap: Map<string, DataSource>;
   private plugins: Array<IEditorPluginConstructor<any> & { __config: any }> = [];
   private pluginsInstances: Array<IEditorPlugin<any>> = [];
@@ -47,7 +49,61 @@ export class Kernel extends EventEmitter implements IEditorKernel {
     super();
     this.dataTypeMap = new Map<string, DataSource>();
     // Enable hot reload mode in development
-    this.hotReloadMode = typeof process !== 'undefined' && process.env?.NODE_ENV === 'development';
+    this.hotReloadMode = this.detectDevelopmentMode();
+  }
+
+  private detectDevelopmentMode(): boolean {
+    // Check global override first
+    if (Kernel.globalHotReloadMode !== undefined) {
+      return Kernel.globalHotReloadMode;
+    }
+
+    // Multiple ways to detect development mode
+    if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
+      return true;
+    }
+
+    // Check for common development indicators
+    if (typeof window !== 'undefined') {
+      // Webpack HMR
+      if ((window as any).webpackHotUpdate) {
+        return true;
+      }
+      // Vite HMR
+      if ((window as any).__vite_plugin_react_preamble_installed__) {
+        return true;
+      }
+      // Next.js development
+      if ((window as any).__NEXT_DATA__?.buildId === 'development') {
+        return true;
+      }
+    }
+
+    // Check for localhost or development URLs
+    if (typeof window !== 'undefined' && window.location) {
+      const hostname = window.location.hostname;
+      if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname.endsWith('.local')) {
+        return true;
+      }
+    }
+
+    // Default to development mode for better DX
+    return true;
+  }
+
+  /**
+   * Globally enable or disable hot reload mode for all kernel instances
+   * @param enabled Whether to enable hot reload mode globally
+   */
+  static setGlobalHotReloadMode(enabled: boolean): void {
+    Kernel.globalHotReloadMode = enabled;
+  }
+
+  /**
+   * Reset global hot reload mode to automatic detection
+   */
+  static resetGlobalHotReloadMode(): void {
+    Kernel.globalHotReloadMode = undefined;
   }
 
   getLexicalEditor(): LexicalEditor | null {
@@ -72,10 +128,21 @@ export class Kernel extends EventEmitter implements IEditorKernel {
   }
 
   setRootElement(dom: HTMLElement) {
-    for (const plugin of this.plugins) {
-      const instance = new plugin(this, plugin.__config);
-      this.pluginsInstances.push(instance);
+    // Check if editor is already initialized to prevent re-initialization
+    if (this.editor) {
+      console.warn('[Editor] Editor is already initialized, updating root element only');
+      this.editor.setRootElement(dom);
+      return this.editor;
     }
+
+    // Initialize plugins if not already done
+    if (this.pluginsInstances.length === 0) {
+      for (const plugin of this.plugins) {
+        const instance = new plugin(this, plugin.__config);
+        this.pluginsInstances.push(instance);
+      }
+    }
+
     const editor = (this.editor = createEditor({
       // @ts-expect-error Inject into lexical editor instance
       __kernel: this,
@@ -164,13 +231,29 @@ export class Kernel extends EventEmitter implements IEditorKernel {
           const index = this.plugins.findIndex((p) => p.pluginName === plugin.pluginName);
           if (index !== -1) {
             this.plugins.splice(index, 1);
+            // Also remove corresponding plugin instance if it exists
+            const instanceIndex = this.pluginsInstances.findIndex((instance) => {
+              return (instance.constructor as any).pluginName === plugin.pluginName;
+            });
+            if (instanceIndex !== -1) {
+              const oldInstance = this.pluginsInstances[instanceIndex];
+              if (oldInstance.destroy) {
+                oldInstance.destroy();
+              }
+              this.pluginsInstances.splice(instanceIndex, 1);
+            }
           }
         } else {
           throw new Error(
             `Plugin with name "${plugin.pluginName}" is already registered with a different implementation.`,
           );
         }
       } else {
+        // Same plugin, just update config if provided
+        if (config !== undefined) {
+          // @ts-expect-error not error
+          plugin.__config = config;
+        }
         return this; // If plugin already exists, don't register again
       }
     }
@@ -197,15 +280,35 @@ export class Kernel extends EventEmitter implements IEditorKernel {
   }
 
   registerService<T>(serviceId: IServiceID<T>, service: T): void {
-    if (this.serviceMap.has(serviceId.__serviceId)) {
+    const serviceIdString = serviceId.__serviceId;
+
+    if (this.serviceMap.has(serviceIdString)) {
       if (this.hotReloadMode) {
         // In hot reload mode, allow service override with warning
-        console.warn(`[Hot Reload] Overriding service with ID "${serviceId.__serviceId}"`);
+        console.warn(`[Hot Reload] Overriding service with ID "${serviceIdString}"`);
+        this.serviceMap.set(serviceIdString, service);
+        return;
       } else {
-        throw new Error(`Service with ID "${serviceId.__serviceId}" is already registered.`);
+        // Check if it's the same service instance
+        const existingService = this.serviceMap.get(serviceIdString);
+        if (existingService === service) {
+          // Same service instance, no need to re-register
+          console.warn(
+            `[Editor] Service "${serviceIdString}" is already registered with the same instance`,
+          );
+          return;
+        }
+
+        // Different service instance in production mode
+        console.error(
+          `[Editor] Attempting to register duplicate service "${serviceIdString}". Enable hot reload mode if this is intended.`,
+        );
+        throw new Error(`Service with ID "${serviceIdString}" is already registered.`);
       }
     }
-    this.serviceMap.set(serviceId.__serviceId, service);
+
+    this.serviceMap.set(serviceIdString, service);
+    console.debug(`[Editor] Registered service: ${serviceIdString}`);
   }
 
   /**

src/index.ts

@@ -12,3 +12,29 @@ export * from './plugins/slash';
 export * from './plugins/table';
 export * from './plugins/upload';
 export type { IEditor } from './types';
+
+// Hot reload utilities
+export { Kernel } from './editor-kernel/kernel';
+
+/**
+ * Enable hot reload mode globally for all editor instances
+ * Call this in your app's entry point during development
+ */
+export function enableHotReload(): void {
+  if (typeof window !== 'undefined') {
+    const { Kernel } = require('./editor-kernel/kernel');
+    Kernel.setGlobalHotReloadMode(true);
+    console.log('[LobeHub Editor] Hot reload mode enabled globally');
+  }
+}
+
+/**
+ * Disable hot reload mode globally
+ */
+export function disableHotReload(): void {
+  if (typeof window !== 'undefined') {
+    const { Kernel } = require('./editor-kernel/kernel');
+    Kernel.setGlobalHotReloadMode(false);
+    console.log('[LobeHub Editor] Hot reload mode disabled globally');
+  }
+}

src/plugins/common/react/ReactPlainText.tsx

@@ -37,7 +37,7 @@ const ReactPlainText = memo<ReactPlainTextProps>(
       editor.registerPlugin(CommonPlugin, {
         theme: restTheme ? { ...themeStyles, ...restTheme } : themeStyles,
       });
-    }, []);
+    }, [editor, restTheme, themeStyles]);
 
     useEffect(() => {
       const container = editorContainerRef.current;
@@ -51,7 +51,7 @@ const ReactPlainText = memo<ReactPlainTextProps>(
       return editor.getLexicalEditor()?.registerUpdateListener(() => {
         onChange?.(editor);
       });
-    }, []);
+    }, [editor, type, content, onChange]);
 
     return (
       <div className={cx(styles.root, styles.variant, className)} style={style}>

src/types/kernel.ts

@@ -219,4 +219,9 @@ export interface IEditorPluginConstructor<IConfig> {
   new (kernel: IEditorKernel, config?: IConfig): IEditorPlugin<IConfig>;
 }
 
+export interface IKernelStatic {
+  resetGlobalHotReloadMode(): void;
+  setGlobalHotReloadMode(enabled: boolean): void;
+}
+
 export type IPlugin<T = any> = IEditorPluginConstructor<T> | [IEditorPluginConstructor<T>, T?];