@pixerate/editor-react 0.13.0 → 0.14.0

package/dist/index.d.cts

@@ -4,7 +4,7 @@ import { Template, ColorGradient, FileImportOptions, RichTextPresetOptions, Rich
 export { ColorGradient, Command, DirtyTracker, DirtyTrackerOptions, HistoryManager, HistoryManagerOptions, HistoryState, OutlineHeading, OutlineSnapshot, OutlineTreeItem, PromptDiagnostic, PromptValues, RichTextPresetOptions, Template, TemplateVersion, Token, TokenType, VariableFormField, createDirtyTracker, createHistoryManager, defaultIsEqual } from '@pixerate/editor';
 import { UseEditorOptions, EditorContentProps as EditorContentProps$1 } from '@tiptap/react';
 import { ToolRegistry, AgentToolProvider } from '@pixerate/editor/agent';
-import React__default from 'react';
+import React$1 from 'react';
 import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 export { FormulaHints, FormulaHintsProps, SpreadsheetContextMenu, SpreadsheetContextMenuProps, SpreadsheetEditor, SpreadsheetEditorProps, SpreadsheetGroupRow, SpreadsheetGroupRowProps, useFillHandle, useSpreadsheetClipboard, useSpreadsheetEditor } from './spreadsheet/index.cjs';
 export { ImageEditor, ImageEditorProps, UseImageEditorReturn, useImageEditor } from './image-editor/index.cjs';
@@ -210,18 +210,18 @@ declare function useAgentToolProvider(registry: ToolRegistry | null | undefined,
 interface EditorContentProps extends EditorContentProps$1 {
     className?: string;
 }
-declare const EditorContent: React__default.FC<EditorContentProps>;
+declare const EditorContent: React$1.FC<EditorContentProps>;
 
 interface BubbleMenuProps {
     editor: Editor | null;
     className?: string;
-    children: React__default.ReactNode;
+    children: React$1.ReactNode;
     tippyOptions?: BubbleMenuPluginProps["tippyOptions"];
     shouldShow?: BubbleMenuPluginProps["shouldShow"];
     pluginKey?: BubbleMenuPluginProps["pluginKey"];
     updateDelay?: BubbleMenuPluginProps["updateDelay"];
 }
-declare const BubbleMenu: React__default.FC<BubbleMenuProps>;
+declare const BubbleMenu: React$1.FC<BubbleMenuProps>;
 
 interface TemplateRendererProps {
     /** Raw prompt or text string to render */
@@ -246,7 +246,7 @@ interface TemplateRendererProps {
     /** Click callback for variable badges */
     onVariableClick?: (variableName: string) => void;
 }
-declare const TemplateRenderer: React__default.FC<TemplateRendererProps>;
+declare const TemplateRenderer: React$1.FC<TemplateRendererProps>;
 
 interface VariableFormProps {
     /** Prompt whose variables become form fields */
@@ -272,7 +272,7 @@ interface VariableFormProps {
  * using its default as the placeholder. Variables only used by `{?name}`
  * conditions render as checkboxes.
  */
-declare const VariableForm: React__default.FC<VariableFormProps>;
+declare const VariableForm: React$1.FC<VariableFormProps>;
 
 /**
  * Subscribes to an editor's heading outline. Returns the headings (flat and
@@ -287,9 +287,9 @@ declare function useOutline(editor: Editor | null | undefined): OutlineSnapshot;
 interface OutlinePanelProps {
     editor: Editor | null;
     /** Heading shown above the list. Pass `null` to hide it. */
-    title?: React__default.ReactNode;
+    title?: React$1.ReactNode;
     /** Content shown when the document has no headings. */
-    emptyState?: React__default.ReactNode;
+    emptyState?: React$1.ReactNode;
     /** Deepest heading level listed. Defaults to 6. */
     maxLevel?: number;
     /** Whether clicking an entry focuses the editor. Defaults to `true`. */
@@ -308,16 +308,16 @@ interface OutlinePanelProps {
  * Clicking an entry moves the caret to that heading; the entry for the
  * section containing the selection is highlighted.
  */
-declare const OutlinePanel: React__default.FC<OutlinePanelProps>;
+declare const OutlinePanel: React$1.FC<OutlinePanelProps>;
 
 interface EditorSlotsProviderProps {
     slots?: Partial<EditorSlotsMap>;
-    children: React__default.ReactNode;
+    children: React$1.ReactNode;
 }
 /**
  * Context provider allowing consumers to inject custom design system components into the editor.
  */
-declare function EditorSlotsProvider({ slots, children }: EditorSlotsProviderProps): React__default.JSX.Element;
+declare function EditorSlotsProvider({ slots, children }: EditorSlotsProviderProps): React$1.JSX.Element;
 /**
  * Hook to access injected design system slots.
  */
@@ -365,27 +365,36 @@ interface CommentsPanelProps {
  * thread selects its text in the editor. Threads with an empty body are
  * drafts (e.g. created by `CommentButton`) and show a compose box.
  */
-declare const CommentsPanel: React__default.FC<CommentsPanelProps>;
+declare const CommentsPanel: React$1.FC<CommentsPanelProps>;
 
 interface ReviewToolbarProps {
     editor: Editor | null;
     className?: string;
+    /**
+     * Show the current change's author and description (e.g. "Alice: Formatted:
+     * Bold"). Defaults to `true`.
+     */
+    showDescription?: boolean;
+    /** Class of the description label. */
+    descriptionClassName?: string;
 }
 /**
- * Toolbar for tracked changes: toggle tracking, step through changes, and
- * accept or reject the current change or all changes.
+ * Toolbar for tracked changes: toggle tracking, step through changes
+ * (insertions, deletions, formatting and block changes, with a description
+ * of the current one), and accept or reject the current change or all
+ * changes.
  */
-declare const ReviewToolbar: React__default.FC<ReviewToolbarProps>;
+declare const ReviewToolbar: React$1.FC<ReviewToolbarProps>;
 
 interface CommentButtonProps {
     editor: Editor | null;
     className?: string;
-    children?: React__default.ReactNode;
+    children?: React$1.ReactNode;
 }
 /**
  * Adds a draft comment on the selection; drop it into a `BubbleMenu`. The
  * draft is completed in `CommentsPanel`.
  */
-declare const CommentButton: React__default.FC<CommentButtonProps>;
+declare const CommentButton: React$1.FC<CommentButtonProps>;
 
 export { BubbleMenu, type BubbleMenuProps, CommentButton, type CommentButtonProps, CommentsPanel, type CommentsPanelProps, EditorContent, type EditorContentProps, EditorSlotsProvider, type EditorSlotsProviderProps, type HistoryShortcutsOptions, OutlinePanel, type OutlinePanelProps, ReviewToolbar, type ReviewToolbarProps, TemplateRenderer, type TemplateRendererProps, type UseCommentsResult, type UseDismissGuardOptions, type UseDismissGuardReturn, type UseFileImportResult, type UseHistoryResult, type UseNavigationGuardOptions, type UseNavigationGuardReturn, type UsePromptEditorProps, type UseRichEditorProps, type UseTrackChangesResult, VariableForm, type VariableFormProps, useAgentToolProvider, useComments, useDismissGuard, useEditor, useEditorSlots, useFileImport, useHistory, useHistoryShortcuts, useNavigationGuard, useOutline, usePromptEditor, useTrackChanges };

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { Template, ColorGradient, FileImportOptions, RichTextPresetOptions, Rich
 export { ColorGradient, Command, DirtyTracker, DirtyTrackerOptions, HistoryManager, HistoryManagerOptions, HistoryState, OutlineHeading, OutlineSnapshot, OutlineTreeItem, PromptDiagnostic, PromptValues, RichTextPresetOptions, Template, TemplateVersion, Token, TokenType, VariableFormField, createDirtyTracker, createHistoryManager, defaultIsEqual } from '@pixerate/editor';
 import { UseEditorOptions, EditorContentProps as EditorContentProps$1 } from '@tiptap/react';
 import { ToolRegistry, AgentToolProvider } from '@pixerate/editor/agent';
-import React__default from 'react';
+import React$1 from 'react';
 import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 export { FormulaHints, FormulaHintsProps, SpreadsheetContextMenu, SpreadsheetContextMenuProps, SpreadsheetEditor, SpreadsheetEditorProps, SpreadsheetGroupRow, SpreadsheetGroupRowProps, useFillHandle, useSpreadsheetClipboard, useSpreadsheetEditor } from './spreadsheet/index.js';
 export { ImageEditor, ImageEditorProps, UseImageEditorReturn, useImageEditor } from './image-editor/index.js';
@@ -210,18 +210,18 @@ declare function useAgentToolProvider(registry: ToolRegistry | null | undefined,
 interface EditorContentProps extends EditorContentProps$1 {
     className?: string;
 }
-declare const EditorContent: React__default.FC<EditorContentProps>;
+declare const EditorContent: React$1.FC<EditorContentProps>;
 
 interface BubbleMenuProps {
     editor: Editor | null;
     className?: string;
-    children: React__default.ReactNode;
+    children: React$1.ReactNode;
     tippyOptions?: BubbleMenuPluginProps["tippyOptions"];
     shouldShow?: BubbleMenuPluginProps["shouldShow"];
     pluginKey?: BubbleMenuPluginProps["pluginKey"];
     updateDelay?: BubbleMenuPluginProps["updateDelay"];
 }
-declare const BubbleMenu: React__default.FC<BubbleMenuProps>;
+declare const BubbleMenu: React$1.FC<BubbleMenuProps>;
 
 interface TemplateRendererProps {
     /** Raw prompt or text string to render */
@@ -246,7 +246,7 @@ interface TemplateRendererProps {
     /** Click callback for variable badges */
     onVariableClick?: (variableName: string) => void;
 }
-declare const TemplateRenderer: React__default.FC<TemplateRendererProps>;
+declare const TemplateRenderer: React$1.FC<TemplateRendererProps>;
 
 interface VariableFormProps {
     /** Prompt whose variables become form fields */
@@ -272,7 +272,7 @@ interface VariableFormProps {
  * using its default as the placeholder. Variables only used by `{?name}`
  * conditions render as checkboxes.
  */
-declare const VariableForm: React__default.FC<VariableFormProps>;
+declare const VariableForm: React$1.FC<VariableFormProps>;
 
 /**
  * Subscribes to an editor's heading outline. Returns the headings (flat and
@@ -287,9 +287,9 @@ declare function useOutline(editor: Editor | null | undefined): OutlineSnapshot;
 interface OutlinePanelProps {
     editor: Editor | null;
     /** Heading shown above the list. Pass `null` to hide it. */
-    title?: React__default.ReactNode;
+    title?: React$1.ReactNode;
     /** Content shown when the document has no headings. */
-    emptyState?: React__default.ReactNode;
+    emptyState?: React$1.ReactNode;
     /** Deepest heading level listed. Defaults to 6. */
     maxLevel?: number;
     /** Whether clicking an entry focuses the editor. Defaults to `true`. */
@@ -308,16 +308,16 @@ interface OutlinePanelProps {
  * Clicking an entry moves the caret to that heading; the entry for the
  * section containing the selection is highlighted.
  */
-declare const OutlinePanel: React__default.FC<OutlinePanelProps>;
+declare const OutlinePanel: React$1.FC<OutlinePanelProps>;
 
 interface EditorSlotsProviderProps {
     slots?: Partial<EditorSlotsMap>;
-    children: React__default.ReactNode;
+    children: React$1.ReactNode;
 }
 /**
  * Context provider allowing consumers to inject custom design system components into the editor.
  */
-declare function EditorSlotsProvider({ slots, children }: EditorSlotsProviderProps): React__default.JSX.Element;
+declare function EditorSlotsProvider({ slots, children }: EditorSlotsProviderProps): React$1.JSX.Element;
 /**
  * Hook to access injected design system slots.
  */
@@ -365,27 +365,36 @@ interface CommentsPanelProps {
  * thread selects its text in the editor. Threads with an empty body are
  * drafts (e.g. created by `CommentButton`) and show a compose box.
  */
-declare const CommentsPanel: React__default.FC<CommentsPanelProps>;
+declare const CommentsPanel: React$1.FC<CommentsPanelProps>;
 
 interface ReviewToolbarProps {
     editor: Editor | null;
     className?: string;
+    /**
+     * Show the current change's author and description (e.g. "Alice: Formatted:
+     * Bold"). Defaults to `true`.
+     */
+    showDescription?: boolean;
+    /** Class of the description label. */
+    descriptionClassName?: string;
 }
 /**
- * Toolbar for tracked changes: toggle tracking, step through changes, and
- * accept or reject the current change or all changes.
+ * Toolbar for tracked changes: toggle tracking, step through changes
+ * (insertions, deletions, formatting and block changes, with a description
+ * of the current one), and accept or reject the current change or all
+ * changes.
  */
-declare const ReviewToolbar: React__default.FC<ReviewToolbarProps>;
+declare const ReviewToolbar: React$1.FC<ReviewToolbarProps>;
 
 interface CommentButtonProps {
     editor: Editor | null;
     className?: string;
-    children?: React__default.ReactNode;
+    children?: React$1.ReactNode;
 }
 /**
  * Adds a draft comment on the selection; drop it into a `BubbleMenu`. The
  * draft is completed in `CommentsPanel`.
  */
-declare const CommentButton: React__default.FC<CommentButtonProps>;
+declare const CommentButton: React$1.FC<CommentButtonProps>;
 
 export { BubbleMenu, type BubbleMenuProps, CommentButton, type CommentButtonProps, CommentsPanel, type CommentsPanelProps, EditorContent, type EditorContentProps, EditorSlotsProvider, type EditorSlotsProviderProps, type HistoryShortcutsOptions, OutlinePanel, type OutlinePanelProps, ReviewToolbar, type ReviewToolbarProps, TemplateRenderer, type TemplateRendererProps, type UseCommentsResult, type UseDismissGuardOptions, type UseDismissGuardReturn, type UseFileImportResult, type UseHistoryResult, type UseNavigationGuardOptions, type UseNavigationGuardReturn, type UsePromptEditorProps, type UseRichEditorProps, type UseTrackChangesResult, VariableForm, type VariableFormProps, useAgentToolProvider, useComments, useDismissGuard, useEditor, useEditorSlots, useFileImport, useHistory, useHistoryShortcuts, useNavigationGuard, useOutline, usePromptEditor, useTrackChanges };

package/dist/index.js

@@ -6,7 +6,7 @@ import {
   useFillHandle,
   useSpreadsheetClipboard,
   useSpreadsheetEditor
-} from "./chunk-MHTAR3RS.js";
+} from "./chunk-25S5EHH4.js";
 import {
   ImageEditor,
   useImageEditor
@@ -1126,10 +1126,13 @@ var CommentThreadCard = ({
 
 // src/review/ReviewToolbar.tsx
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var defaultDescriptionClass = "max-w-[16rem] truncate px-1 text-xs text-muted-foreground";
 var buttonClass2 = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
 var ReviewToolbar = ({
   editor,
-  className = "flex flex-wrap items-center gap-1 rounded-md border border-border bg-background p-1 text-sm"
+  className = "flex flex-wrap items-center gap-1 rounded-md border border-border bg-background p-1 text-sm",
+  showDescription = true,
+  descriptionClassName = defaultDescriptionClass
 }) => {
   const review = useTrackChanges(editor);
   const count = review.changes.length;
@@ -1171,6 +1174,18 @@ var ReviewToolbar = ({
         children: "\u203A"
       }
     ),
+    showDescription && current && /* @__PURE__ */ jsxs6(
+      "span",
+      {
+        className: descriptionClassName,
+        "data-change-type": current.type,
+        title: `${current.author.name}: ${current.description}`,
+        children: [
+          current.author.name ? `${current.author.name}: ` : "",
+          current.description
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx7("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
     /* @__PURE__ */ jsx7(
       "button",