tiptop-editor 2.0.0 → 2.1.0

package/README.md

@@ -237,6 +237,12 @@ export function EditorWithSlots() {
   Controls whether the block drag handle is rendered. Default: `true`.
 - `extraExtensions`
   Appends custom Tiptap extensions after the built-in editor set.
+- `imgUploadUrl`
+  The URL of the server endpoint that receives image uploads.
+- `imgUploadResponseKey`
+  Locates the image URL in the server response. Accepts a top-level key, a dot-separated path, a path array, or a resolver function.
+- `imgUploadHeaders`
+  Custom HTTP headers sent with every image upload request (e.g. `Authorization`).
 
 ## Built-in Extensions
 
@@ -367,6 +373,33 @@ The editor sends a `POST` request with `multipart/form-data` and the file under
   />
   ```
 
+### Sending custom headers
+
+Use `imgUploadHeaders` to attach custom HTTP headers to every upload request. This is the standard way to pass an authorization token or any other API header.
+
+```tsx
+<TiptopEditor
+  editorOptions={{
+    imgUploadUrl: '/api/upload',
+    imgUploadResponseKey: 'url',
+    imgUploadHeaders: {
+      Authorization: 'Bearer YOUR_TOKEN',
+    },
+  }}
+/>
+```
+
+Multiple headers are supported:
+
+```tsx
+imgUploadHeaders: {
+  Authorization: 'Bearer YOUR_TOKEN',
+  'X-Api-Key': 'YOUR_API_KEY',
+}
+```
+
+> **Note**: The editor sends `multipart/form-data`. Do **not** include a `Content-Type` header in `imgUploadHeaders` — the browser sets it automatically with the correct boundary string.
+
 Your server response must include the uploaded image URL at the location you describe with `imgUploadResponseKey`.
 
 Example:

package/dist/components/editor/createDefaultExtensions.d.ts

@@ -3,6 +3,7 @@ import { ImageUploadResponseResolver } from '../../types';
 interface CreateDefaultExtensionsOptions {
     imgUploadUrl?: string;
     imgUploadResponseKey?: ImageUploadResponseResolver;
+    imgUploadHeaders?: Record<string, string>;
 }
-export declare const createDefaultExtensions: ({ imgUploadUrl, imgUploadResponseKey, }: CreateDefaultExtensionsOptions) => Extensions;
+export declare const createDefaultExtensions: ({ imgUploadUrl, imgUploadResponseKey, imgUploadHeaders, }: CreateDefaultExtensionsOptions) => Extensions;
 export {};

package/dist/helpers.d.ts

@@ -19,11 +19,12 @@ export declare const removeAllFormatting: (editor: Editor) => void;
 export declare const transformNodeToAlternative: (editor: Editor, targetOption: SlashCommandGroupCommandsProps) => void;
 export declare const addOrUpdateLink: (editor: Editor, url: string) => void;
 export declare const unsetLink: (editor: Editor) => void;
-export declare const uploadWithProgress: ({ file, url, onProgress, signal }: {
+export declare const uploadWithProgress: ({ file, url, onProgress, signal, headers }: {
     file: File;
     url: string;
     onProgress: (percent: number) => boolean | void;
     signal?: AbortSignal;
+    headers?: Record<string, string>;
 }) => Promise<Record<string, unknown>>;
 export declare const getValueAtPath: (source: Record<string, unknown>, path: string | string[]) => unknown;
 export declare const generateUniqueId: () => string;