From 8e8129d71c3c925b63f8d543ff8e6a09203f0129 Mon Sep 17 00:00:00 2001
From: southseact-3d <hetheringtonliam7@gmail.com>
Date: Tue, 10 Feb 2026 18:13:13 +0000
Subject: [PATCH] Fix Editor.js plugin loading errors in blog admin

- Add multiple fallback global variable names for Editor.js plugins
- Add debug logging to track plugin availability
- Add error handling for editor initialization
- Ensure at least paragraph tool is available before initializing
- Fix ReferenceError: List is not defined when opening post modal
---
 chat/public/js/blog-admin.js | 217 ++++++++++++++++++++++++-----------
 1 file changed, 148 insertions(+), 69 deletions(-)

diff --git a/chat/public/js/blog-admin.js b/chat/public/js/blog-admin.js
index df25af0..e6246f7 100644
--- a/chat/public/js/blog-admin.js
+++ b/chat/public/js/blog-admin.js
@@ -279,75 +279,148 @@ function initEditor(savedContent = null) {
   if (editor) {
     editor.destroy();
   }
-  
+
+  // Check if Editor.js and plugins are loaded
+  if (typeof EditorJS === 'undefined') {
+    console.error('EditorJS is not loaded');
+    showStatus('Editor failed to load. Please refresh the page.', 'error');
+    return;
+  }
+
+  // Map plugin names to their global variables with multiple possible names
+  const HeaderClass = window.Header || window.EditorJSHeader;
+  const ParagraphClass = window.Paragraph || window.EditorJSParagraph;
+  const ListClass = window.List || window.EditorjsList || window.EditorJSList;
+  const LinkToolClass = window.LinkTool || window.Link || window.EditorJSLink;
+  const ImageToolClass = window.ImageTool || window.Image || window.EditorJSImage;
+  const EmbedClass = window.Embed || window.EditorJSEmbed;
+  const CodeToolClass = window.CodeTool || window.Code || window.EditorJSCode;
+  const QuoteClass = window.Quote || window.EditorJSQuote;
+  const TableClass = window.Table || window.EditorJSTable;
+  const MarkerClass = window.Marker || window.EditorJSMarker;
+
+  // Log available plugins for debugging
+  console.log('Editor.js plugins availability:', {
+    EditorJS: typeof EditorJS,
+    Header: typeof HeaderClass,
+    Paragraph: typeof ParagraphClass,
+    List: typeof ListClass,
+    LinkTool: typeof LinkToolClass,
+    ImageTool: typeof ImageToolClass,
+    Embed: typeof EmbedClass,
+    CodeTool: typeof CodeToolClass,
+    Quote: typeof QuoteClass,
+    Table: typeof TableClass,
+    Marker: typeof MarkerClass
+  });
+
+  // Build tools object dynamically, only including available plugins
+  const tools = {};
+
+  if (HeaderClass) {
+    tools.header = {
+      class: HeaderClass,
+      config: {
+        levels: [2, 3, 4, 5, 6],
+        defaultLevel: 2
+      }
+    };
+  }
+
+  if (ParagraphClass) {
+    tools.paragraph = {
+      class: ParagraphClass,
+      inlineToolbar: true
+    };
+  }
+
+  if (ListClass) {
+    tools.list = {
+      class: ListClass,
+      inlineToolbar: true
+    };
+  }
+
+  if (LinkToolClass) {
+    tools.link = {
+      class: LinkToolClass,
+      config: {
+        endpoint: '/api/fetch-url'
+      }
+    };
+  }
+
+  if (ImageToolClass) {
+    tools.image = {
+      class: ImageToolClass,
+      config: {
+        endpoints: {
+          byFile: '/api/admin/blogs/upload-image'
+        },
+        field: 'image',
+        types: 'image/*'
+      }
+    };
+  }
+
+  if (EmbedClass) {
+    tools.embed = {
+      class: EmbedClass,
+      config: {
+        services: {
+          youtube: true,
+          vimeo: true,
+          twitter: true,
+          codepen: true
+        }
+      }
+    };
+  }
+
+  if (CodeToolClass) {
+    tools.code = {
+      class: CodeToolClass
+    };
+  }
+
+  if (QuoteClass) {
+    tools.quote = {
+      class: QuoteClass,
+      inlineToolbar: true,
+      config: {
+        quotePlaceholder: 'Enter a quote',
+        captionPlaceholder: 'Quote\'s author'
+      }
+    };
+  }
+
+  if (TableClass) {
+    tools.table = {
+      class: TableClass,
+      inlineToolbar: true,
+      config: {
+        rows: 2,
+        cols: 2
+      }
+    };
+  }
+
+  if (MarkerClass) {
+    tools.marker = {
+      class: MarkerClass
+    };
+  }
+
+  // Ensure at least paragraph tool is available
+  if (!tools.paragraph) {
+    console.error('No paragraph tool available');
+    showStatus('Editor tools failed to load. Please refresh the page.', 'error');
+    return;
+  }
+
   const editorConfig = {
     holder: 'editor',
-    tools: {
-      header: {
-        class: Header,
-        config: {
-          levels: [2, 3, 4, 5, 6],
-          defaultLevel: 2
-        }
-      },
-      paragraph: {
-        class: Paragraph,
-        inlineToolbar: true
-      },
-      list: {
-        class: List,
-        inlineToolbar: true
-      },
-      link: {
-        class: LinkTool,
-        config: {
-          endpoint: '/api/fetch-url' // Optional: for link previews
-        }
-      },
-      image: {
-        class: ImageTool,
-        config: {
-          endpoints: {
-            byFile: '/api/admin/blogs/upload-image'
-          },
-          field: 'image',
-          types: 'image/*'
-        }
-      },
-      embed: {
-        class: Embed,
-        config: {
-          services: {
-            youtube: true,
-            vimeo: true,
-            twitter: true,
-            codepen: true
-          }
-        }
-      },
-      code: {
-        class: CodeTool
-      },
-      quote: {
-        class: Quote,
-        inlineToolbar: true,
-        config: {
-          quotePlaceholder: 'Enter a quote',
-          captionPlaceholder: 'Quote\'s author'
-        }
-      },
-      table: {
-        class: Table,
-        inlineToolbar: true,
-        config: {
-          rows: 2,
-          cols: 2
-        }
-      },
-      marker: {
-        class: Marker
-      }
-    },
+    tools: tools,
     placeholder: 'Start writing your post...',
     data: savedContent || {
       blocks: [
@@ -361,8 +434,14 @@ function initEditor(savedContent = null) {
     },
     readOnly: currentEditingPost?.source === 'repo'
   };
-  
-  editor = new EditorJS(editorConfig);
+
+  try {
+    editor = new EditorJS(editorConfig);
+    console.log('Editor.js initialized successfully');
+  } catch (error) {
+    console.error('Failed to initialize Editor.js:', error);
+    showStatus('Failed to initialize editor: ' + error.message, 'error');
+  }
 }
 
 // Handle post form submission