tiptop-editor 1.6.5 → 2.0.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.

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/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

@@ -31,7 +31,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;