tiptop-editor 1.6.5 → 2.1.0

package/README.md

@@ -25,6 +25,32 @@ https://tiptap.dev/docs/ui-components/templates/notion-like-editor
 npm install tiptop-editor
 ```
 
+## Setup
+
+This package requires HeroUI v3. Add its styles import to your CSS entry file:
+
+```css
+@import "tailwindcss";
+@import "@heroui/styles";
+```
+
+No `HeroUIProvider` wrapper is needed in your app — HeroUI v3 works without a root provider.
+
+If you use the toast notifications, render `Toast.Provider` once near the root of your app:
+
+```tsx
+import { Toast } from '@heroui/react'
+
+export function App() {
+  return (
+    <>
+      <YourApp />
+      <Toast.Provider placement="top end" />
+    </>
+  )
+}
+```
+
 ## Basic Usage
 
 ```tsx
@@ -122,6 +148,7 @@ Supported slots:
 - `selectionMenuAppend`
 - `tableMenuPrepend`
 - `tableMenuAppend`
+- `dragHandleDropdown`
 
 Each slot accepts either:
 
@@ -140,6 +167,24 @@ Each slot accepts either:
 />
 ```
 
+The `dragHandleDropdown` slot injects additional items into the block drag-handle dropdown. The slot content must be wrapped in a `<Dropdown.Section>`:
+
+```tsx
+import { Dropdown, Label } from '@heroui/react'
+
+<TiptopEditor
+  slots={{
+    dragHandleDropdown: ({ editor }) => (
+      <Dropdown.Section>
+        <Dropdown.Item id="ai_rewrite" textValue="AI Rewrite" onPress={() => console.log('AI rewrite', editor)}>
+          <Label>AI Rewrite</Label>
+        </Dropdown.Item>
+      </Dropdown.Section>
+    ),
+  }}
+/>
+```
+
 ### Use the editor context hook
 
 For slotted components, you can consume the current editor instance through `useTiptopEditor()` instead of passing `editor` down manually.
@@ -192,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
 
@@ -322,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/TiptopDragHandle.d.ts

@@ -1,5 +1,6 @@
 import { Editor } from '@tiptap/react';
-declare const TiptopDragHandle: ({ editor }: {
+declare const TiptopDragHandle: ({ editor, dragHandleSlot }: {
     editor: Editor;
+    dragHandleSlot?: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TiptopDragHandle;

package/dist/components/editor/TiptopEditor.stories.d.ts

@@ -15,3 +15,5 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Frameless: Story;
 export declare const WithSlots: Story;
+export declare const ViewMode: Story;
+export declare const WithDragHandleSlot: Story;

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/components/ui/EditorButton.d.ts

@@ -1,4 +1,4 @@
 import { EditorButtonProps } from '../../types';
 import { default as React } from 'react';
-declare const _default: React.MemoExoticComponent<({ editor, buttonKey, tooltipText, isIconOnly, color, variant, isDisabled, icon, iconClass, text, withActive, onPressed, }: EditorButtonProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ editor, buttonKey, tooltipText, isIconOnly, variant, isDisabled, icon, iconClass, text, withActive, onPressed, }: EditorButtonProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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;
@@ -31,7 +32,7 @@ export declare const updateNodeByPos: (editor: Editor, find: {
     id?: string;
     pos?: number;
 }, attrs: Record<string, string | boolean | number | File | null>) => void;
-export declare const showToast: (title?: string, color?: "primary" | "default" | "foreground" | "secondary" | "success" | "warning" | "danger" | undefined, description?: string) => void;
+export declare const showToast: (title?: string, color?: "accent" | "default" | "success" | "warning" | "danger" | undefined, description?: string) => void;
 export declare const getUploaderAtPos: (state: Editor["state"], pos: number) => {
     pos: number;
     start: number;