cms-block-editor 1.0.7 → 1.0.9

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 [Your Name]
+Copyright (c) 2024 Samuel Clinton
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -71,6 +71,8 @@ Main editor component with full editing capabilities.
 **Props:**
 - `value?: string` - Initial editor state (JSON string)
 - `onChange?: (state: any) => void` - Callback fired when content changes
+- `onImageAdded?: (file: File) => Promise<string>` - Custom image upload handler that returns the image URL
+- `useBase64Url?: boolean` - Use base64 encoding for images (default: `true`)
 
 ### CMSRenderer
 
@@ -92,7 +94,7 @@ Read-only renderer for displaying saved content.
 - Code blocks
 
 ### Media
-- **Images**: Upload from computer, resize with 8-point handles, drag-and-drop positioning
+- **Images**: Upload from computer, resize with 8-point handles, drag-and-drop positioning, custom upload handler support
 - **YouTube**: Embed videos with custom sizing
 - **Embeds**: Support for 8+ platforms with automatic URL detection
 - **Tables**: Visual builder with configurable dimensions, header rows, and professional styling
@@ -130,6 +132,47 @@ Read-only renderer for displaying saved content.
 
 ## Advanced Usage
 
+### Custom Image Upload
+
+Upload images to your server instead of using base64 encoding:
+
+```tsx
+import { CMSBlockEditor } from 'cms-block-editor';
+
+function Editor() {
+  const [content, setContent] = useState('');
+
+  const handleImageUpload = async (file: File): Promise<string> => {
+    // Upload to your server
+    const formData = new FormData();
+    formData.append('image', file);
+    
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData,
+    });
+    
+    const data = await response.json();
+    return data.url; // Return the uploaded image URL
+  };
+
+  return (
+    <CMSBlockEditor 
+      value={content}
+      onChange={(state) => setContent(JSON.stringify(state))}
+      onImageAdded={handleImageUpload}
+      useBase64Url={false}
+    />
+  );
+}
+```
+
+**Image Upload Options:**
+
+- **With `onImageAdded`**: Provide a custom upload handler that uploads the file to your server and returns the URL
+- **With `useBase64Url={true}`** (default): Images are encoded as base64 strings (no server upload needed)
+- **With `useBase64Url={false}` and no `onImageAdded`**: Image upload will be disabled
+
 ### With Persistence
 
 ```tsx

package/dist/index.d.mts

@@ -4,8 +4,10 @@ import { LexicalEditor } from 'lexical';
 interface CMSBlockEditorProps {
     value?: string;
     onChange?: (state: any) => void;
+    onImageAdded?: (file: File) => Promise<string>;
+    useBase64Url?: boolean;
 }
-declare function CMSBlockEditor({ value, onChange }: CMSBlockEditorProps): react_jsx_runtime.JSX.Element;
+declare function CMSBlockEditor({ value, onChange, onImageAdded, useBase64Url }: CMSBlockEditorProps): react_jsx_runtime.JSX.Element;
 
 interface CMSRendererProps {
     content: string;

package/dist/index.mjs

@@ -4152,7 +4152,10 @@ function ToolbarPlugin() {
 import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
 import { useEffect as useEffect9 } from "react";
 import { $getSelection as $getSelection7, $isRangeSelection as $isRangeSelection7, COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW2, DRAGOVER_COMMAND, DROP_COMMAND } from "lexical";
-function ImageUploadPlugin() {
+function ImageUploadPlugin({
+  onImageAdded,
+  useBase64Url = true
+}) {
   const [editor] = useLexicalComposerContext8();
   useEffect9(() => {
     const removeDragOverListener = editor.registerCommand(
@@ -4165,25 +4168,41 @@ function ImageUploadPlugin() {
     );
     const removeDropListener = editor.registerCommand(
       DROP_COMMAND,
-      (event) => {
+      //@ts-ignore
+      async (event) => {
         event.preventDefault();
         const files = event.dataTransfer?.files;
         if (files && files.length > 0) {
           const file = files[0];
           if (file.type.startsWith("image/")) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-              const url = e.target?.result;
-              const alt = file.name.replace(/\.[^/.]+$/, "");
-              editor.update(() => {
-                const selection = $getSelection7();
-                if ($isRangeSelection7(selection)) {
-                  const imageNode = new ImageNode(url, alt);
-                  selection.insertNodes([imageNode]);
-                }
+            let url;
+            const alt = file.name.replace(/\.[^/.]+$/, "");
+            if (onImageAdded) {
+              try {
+                url = await onImageAdded(file);
+              } catch (error) {
+                console.error("Error uploading image:", error);
+                return false;
+              }
+            } else if (useBase64Url) {
+              url = await new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                  resolve(e.target?.result);
+                };
+                reader.readAsDataURL(file);
               });
-            };
-            reader.readAsDataURL(file);
+            } else {
+              console.warn("No image upload handler provided and useBase64Url is false");
+              return false;
+            }
+            editor.update(() => {
+              const selection = $getSelection7();
+              if ($isRangeSelection7(selection)) {
+                const imageNode = new ImageNode(url, alt);
+                selection.insertNodes([imageNode]);
+              }
+            });
             return true;
           }
         }
@@ -4195,7 +4214,7 @@ function ImageUploadPlugin() {
       removeDragOverListener();
       removeDropListener();
     };
-  }, [editor]);
+  }, [editor, onImageAdded, useBase64Url]);
   return null;
 }
 
@@ -5532,7 +5551,11 @@ function EmbedPlugin() {
 
 // src/core/EditorShell.tsx
 import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
-function EditorShell({ onChange }) {
+function EditorShell({
+  onChange,
+  onImageAdded,
+  useBase64Url
+}) {
   return /* @__PURE__ */ jsxs14("div", { className: "cms-editor-shell", children: [
     /* @__PURE__ */ jsx14(ToolbarPlugin, {}),
     /* @__PURE__ */ jsx14(
@@ -5548,7 +5571,7 @@ function EditorShell({ onChange }) {
     /* @__PURE__ */ jsx14(LexicalLinkPlugin, {}),
     /* @__PURE__ */ jsx14(LexicalTablePlugin, {}),
     /* @__PURE__ */ jsx14(SlashCommandPlugin, {}),
-    /* @__PURE__ */ jsx14(ImageUploadPlugin, {}),
+    /* @__PURE__ */ jsx14(ImageUploadPlugin, { onImageAdded, useBase64Url }),
     /* @__PURE__ */ jsx14(LinkPlugin, {}),
     /* @__PURE__ */ jsx14(SectionEditorPlugin, {}),
     /* @__PURE__ */ jsx14(EmbedPlugin, {}),
@@ -5613,8 +5636,20 @@ function createEditorConfig(value) {
 
 // src/core/CMSBlockEditor.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
-function CMSBlockEditor({ value, onChange }) {
-  return /* @__PURE__ */ jsx15(LexicalComposer, { initialConfig: createEditorConfig(value), children: /* @__PURE__ */ jsx15(EditorShell, { onChange }) });
+function CMSBlockEditor({
+  value,
+  onChange,
+  onImageAdded,
+  useBase64Url = true
+}) {
+  return /* @__PURE__ */ jsx15(LexicalComposer, { initialConfig: createEditorConfig(value), children: /* @__PURE__ */ jsx15(
+    EditorShell,
+    {
+      onChange,
+      onImageAdded,
+      useBase64Url
+    }
+  ) });
 }
 
 // src/core/CMSRenderer.tsx