@pixerate/editor-react 0.39.0 → 0.41.0

package/dist/index.d.cts

@@ -6,7 +6,7 @@ import { UseEditorOptions, EditorContentProps as EditorContentProps$1 } from '@t
 import { HistoryManager as HistoryManager$1 } from '@pixerate/editor/history';
 import { DocxExportState, DocxExportReport, DocxExportController, DocxExportControllerOptions } from '@pixerate/editor/export';
 import React__default from 'react';
-import { ToolRegistry, AgentToolProvider } from '@pixerate/editor/tools';
+import { ToolRegistry, AgentToolProvider, ToolBridgeStatus, ConnectToolBridgeOptions } from '@pixerate/editor/tools';
 import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 export { FormulaHints, FormulaHintsProps, NameManager, NameManagerProps, SheetTabs, SheetTabsProps, SpreadsheetConditionalFormatPanel, SpreadsheetContextMenu, SpreadsheetContextMenuProps, SpreadsheetDataValidationPanel, SpreadsheetEditor, SpreadsheetEditorProps, SpreadsheetGroupRow, SpreadsheetGroupRowProps, SpreadsheetRulePanelProps, SpreadsheetValidationDialog, SpreadsheetValidationDialogProps, SpreadsheetViewportOptions, SpreadsheetViewportState, useFillHandle, useSpreadsheetClipboard, useSpreadsheetEditor, useSpreadsheetViewport } from './spreadsheet/index.cjs';
 export { AdjustmentLayersPanel, AdjustmentLayersPanelProps, ControlSlider, ControlSliderProps, CurvesEditor, CurvesEditorProps, Histogram, HistogramProps, ImageEditor, ImageEditorProps, RefineEdgePanel, RefineEdgePanelProps, SelectionOptionsBar, SelectionOptionsBarProps, UseImageEditorReturn, useImageEditor, useImageHistogram } from './image-editor/index.cjs';
@@ -282,6 +282,20 @@ declare const ExportDocxButton: React__default.FC<ExportDocxButtonProps>;
  */
 declare function useAgentToolProvider(registry: ToolRegistry | null | undefined, provider: AgentToolProvider | null | undefined): void;
 
+interface UseToolBridgeResult {
+    status: ToolBridgeStatus | "off";
+    /** Why the last connection ended (e.g. "Bad token"), when the bridge said. */
+    detail?: string;
+    /** The id the bridge gave this editor (`list_editors`). */
+    editorId: string | null;
+}
+/**
+ * Connects a `ToolRegistry` to a local MCP bridge (`pixerate-mcp-bridge`) while mounted, so an
+ * MCP client can call the page's tools. Pass `null` options to stay disconnected. Memoize the
+ * options: changing `url`, `token` or `name` reconnects.
+ */
+declare function useToolBridge(registry: ToolRegistry | null | undefined, options: ConnectToolBridgeOptions | null): UseToolBridgeResult;
+
 interface EditorContentProps extends EditorContentProps$1 {
     className?: string;
 }
@@ -782,4 +796,4 @@ interface ReactChartNodeViewOptions extends Omit<ChartNodeViewProps, 'state'> {
  */
 declare function createReactChartNodeView(options?: ReactChartNodeViewOptions): ChartNodeViewMount;
 
-export { BubbleMenu, type BubbleMenuProps, ChartNodeView, type ChartNodeViewProps, CommentButton, type CommentButtonProps, CommentsPanel, type CommentsPanelProps, EditorContent, type EditorContentProps, EditorSlotsProvider, type EditorSlotsProviderProps, ExportDocxButton, type ExportDocxButtonProps, FindReplaceBar, type FindReplaceBarProps, type HistoryShortcutsOptions, InsertTableGrid, type InsertTableGridProps, MergePreview, type MergePreviewProps, type MergePreviewState, OutlinePanel, type OutlinePanelProps, type ReactChartNodeViewOptions, ReviewToolbar, type ReviewToolbarProps, StylesGallery, type StylesGalleryProps, TableBubbleMenu, type TableBubbleMenuProps, TableToolbar, type TableToolbarProps, TemplateRenderer, type TemplateRendererProps, TrackedChangesList, type TrackedChangesListProps, type UseCommentsResult, type UseDismissGuardOptions, type UseDismissGuardReturn, type UseDocumentCompareResult, type UseDocxExportResult, type UseFileImportResult, type UseFindReplaceResult, type UseHistoryDirtyOptions, type UseHistoryDirtyResult, type UseHistoryResult, type UseMergePreviewOptions, type UseNavigationGuardOptions, type UseNavigationGuardReturn, type UseParagraphStylesResult, type UsePromptEditorProps, type UseRichEditorProps, type UseTableMenuResult, type UseTrackChangesResult, VariableForm, type VariableFormProps, createReactChartNodeView, useAgentToolProvider, useComments, useDismissGuard, useDocumentCompare, useDocxExport, useEditor, useEditorSlots, useFileImport, useFindReplace, useHistory, useHistoryDirty, useHistoryShortcuts, useMergePreview, useNavigationGuard, useOutline, useParagraphStyles, usePromptEditor, useTableMenu, useTrackChanges };
+export { BubbleMenu, type BubbleMenuProps, ChartNodeView, type ChartNodeViewProps, CommentButton, type CommentButtonProps, CommentsPanel, type CommentsPanelProps, EditorContent, type EditorContentProps, EditorSlotsProvider, type EditorSlotsProviderProps, ExportDocxButton, type ExportDocxButtonProps, FindReplaceBar, type FindReplaceBarProps, type HistoryShortcutsOptions, InsertTableGrid, type InsertTableGridProps, MergePreview, type MergePreviewProps, type MergePreviewState, OutlinePanel, type OutlinePanelProps, type ReactChartNodeViewOptions, ReviewToolbar, type ReviewToolbarProps, StylesGallery, type StylesGalleryProps, TableBubbleMenu, type TableBubbleMenuProps, TableToolbar, type TableToolbarProps, TemplateRenderer, type TemplateRendererProps, TrackedChangesList, type TrackedChangesListProps, type UseCommentsResult, type UseDismissGuardOptions, type UseDismissGuardReturn, type UseDocumentCompareResult, type UseDocxExportResult, type UseFileImportResult, type UseFindReplaceResult, type UseHistoryDirtyOptions, type UseHistoryDirtyResult, type UseHistoryResult, type UseMergePreviewOptions, type UseNavigationGuardOptions, type UseNavigationGuardReturn, type UseParagraphStylesResult, type UsePromptEditorProps, type UseRichEditorProps, type UseTableMenuResult, type UseToolBridgeResult, type UseTrackChangesResult, VariableForm, type VariableFormProps, createReactChartNodeView, useAgentToolProvider, useComments, useDismissGuard, useDocumentCompare, useDocxExport, useEditor, useEditorSlots, useFileImport, useFindReplace, useHistory, useHistoryDirty, useHistoryShortcuts, useMergePreview, useNavigationGuard, useOutline, useParagraphStyles, usePromptEditor, useTableMenu, useToolBridge, useTrackChanges };

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { UseEditorOptions, EditorContentProps as EditorContentProps$1 } from '@t
 import { HistoryManager as HistoryManager$1 } from '@pixerate/editor/history';
 import { DocxExportState, DocxExportReport, DocxExportController, DocxExportControllerOptions } from '@pixerate/editor/export';
 import React__default from 'react';
-import { ToolRegistry, AgentToolProvider } from '@pixerate/editor/tools';
+import { ToolRegistry, AgentToolProvider, ToolBridgeStatus, ConnectToolBridgeOptions } from '@pixerate/editor/tools';
 import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 export { FormulaHints, FormulaHintsProps, NameManager, NameManagerProps, SheetTabs, SheetTabsProps, SpreadsheetConditionalFormatPanel, SpreadsheetContextMenu, SpreadsheetContextMenuProps, SpreadsheetDataValidationPanel, SpreadsheetEditor, SpreadsheetEditorProps, SpreadsheetGroupRow, SpreadsheetGroupRowProps, SpreadsheetRulePanelProps, SpreadsheetValidationDialog, SpreadsheetValidationDialogProps, SpreadsheetViewportOptions, SpreadsheetViewportState, useFillHandle, useSpreadsheetClipboard, useSpreadsheetEditor, useSpreadsheetViewport } from './spreadsheet/index.js';
 export { AdjustmentLayersPanel, AdjustmentLayersPanelProps, ControlSlider, ControlSliderProps, CurvesEditor, CurvesEditorProps, Histogram, HistogramProps, ImageEditor, ImageEditorProps, RefineEdgePanel, RefineEdgePanelProps, SelectionOptionsBar, SelectionOptionsBarProps, UseImageEditorReturn, useImageEditor, useImageHistogram } from './image-editor/index.js';
@@ -282,6 +282,20 @@ declare const ExportDocxButton: React__default.FC<ExportDocxButtonProps>;
  */
 declare function useAgentToolProvider(registry: ToolRegistry | null | undefined, provider: AgentToolProvider | null | undefined): void;
 
+interface UseToolBridgeResult {
+    status: ToolBridgeStatus | "off";
+    /** Why the last connection ended (e.g. "Bad token"), when the bridge said. */
+    detail?: string;
+    /** The id the bridge gave this editor (`list_editors`). */
+    editorId: string | null;
+}
+/**
+ * Connects a `ToolRegistry` to a local MCP bridge (`pixerate-mcp-bridge`) while mounted, so an
+ * MCP client can call the page's tools. Pass `null` options to stay disconnected. Memoize the
+ * options: changing `url`, `token` or `name` reconnects.
+ */
+declare function useToolBridge(registry: ToolRegistry | null | undefined, options: ConnectToolBridgeOptions | null): UseToolBridgeResult;
+
 interface EditorContentProps extends EditorContentProps$1 {
     className?: string;
 }
@@ -782,4 +796,4 @@ interface ReactChartNodeViewOptions extends Omit<ChartNodeViewProps, 'state'> {
  */
 declare function createReactChartNodeView(options?: ReactChartNodeViewOptions): ChartNodeViewMount;
 
-export { BubbleMenu, type BubbleMenuProps, ChartNodeView, type ChartNodeViewProps, CommentButton, type CommentButtonProps, CommentsPanel, type CommentsPanelProps, EditorContent, type EditorContentProps, EditorSlotsProvider, type EditorSlotsProviderProps, ExportDocxButton, type ExportDocxButtonProps, FindReplaceBar, type FindReplaceBarProps, type HistoryShortcutsOptions, InsertTableGrid, type InsertTableGridProps, MergePreview, type MergePreviewProps, type MergePreviewState, OutlinePanel, type OutlinePanelProps, type ReactChartNodeViewOptions, ReviewToolbar, type ReviewToolbarProps, StylesGallery, type StylesGalleryProps, TableBubbleMenu, type TableBubbleMenuProps, TableToolbar, type TableToolbarProps, TemplateRenderer, type TemplateRendererProps, TrackedChangesList, type TrackedChangesListProps, type UseCommentsResult, type UseDismissGuardOptions, type UseDismissGuardReturn, type UseDocumentCompareResult, type UseDocxExportResult, type UseFileImportResult, type UseFindReplaceResult, type UseHistoryDirtyOptions, type UseHistoryDirtyResult, type UseHistoryResult, type UseMergePreviewOptions, type UseNavigationGuardOptions, type UseNavigationGuardReturn, type UseParagraphStylesResult, type UsePromptEditorProps, type UseRichEditorProps, type UseTableMenuResult, type UseTrackChangesResult, VariableForm, type VariableFormProps, createReactChartNodeView, useAgentToolProvider, useComments, useDismissGuard, useDocumentCompare, useDocxExport, useEditor, useEditorSlots, useFileImport, useFindReplace, useHistory, useHistoryDirty, useHistoryShortcuts, useMergePreview, useNavigationGuard, useOutline, useParagraphStyles, usePromptEditor, useTableMenu, useTrackChanges };
+export { BubbleMenu, type BubbleMenuProps, ChartNodeView, type ChartNodeViewProps, CommentButton, type CommentButtonProps, CommentsPanel, type CommentsPanelProps, EditorContent, type EditorContentProps, EditorSlotsProvider, type EditorSlotsProviderProps, ExportDocxButton, type ExportDocxButtonProps, FindReplaceBar, type FindReplaceBarProps, type HistoryShortcutsOptions, InsertTableGrid, type InsertTableGridProps, MergePreview, type MergePreviewProps, type MergePreviewState, OutlinePanel, type OutlinePanelProps, type ReactChartNodeViewOptions, ReviewToolbar, type ReviewToolbarProps, StylesGallery, type StylesGalleryProps, TableBubbleMenu, type TableBubbleMenuProps, TableToolbar, type TableToolbarProps, TemplateRenderer, type TemplateRendererProps, TrackedChangesList, type TrackedChangesListProps, type UseCommentsResult, type UseDismissGuardOptions, type UseDismissGuardReturn, type UseDocumentCompareResult, type UseDocxExportResult, type UseFileImportResult, type UseFindReplaceResult, type UseHistoryDirtyOptions, type UseHistoryDirtyResult, type UseHistoryResult, type UseMergePreviewOptions, type UseNavigationGuardOptions, type UseNavigationGuardReturn, type UseParagraphStylesResult, type UsePromptEditorProps, type UseRichEditorProps, type UseTableMenuResult, type UseToolBridgeResult, type UseTrackChangesResult, VariableForm, type VariableFormProps, createReactChartNodeView, useAgentToolProvider, useComments, useDismissGuard, useDocumentCompare, useDocxExport, useEditor, useEditorSlots, useFileImport, useFindReplace, useHistory, useHistoryDirty, useHistoryShortcuts, useMergePreview, useNavigationGuard, useOutline, useParagraphStyles, usePromptEditor, useTableMenu, useToolBridge, useTrackChanges };

package/dist/index.js

@@ -3,7 +3,7 @@ import {
   ChartDataGrid,
   ChartInspector,
   chartButtonClass
-} from "./chunk-IYHD5Q65.js";
+} from "./chunk-SIEOYRHX.js";
 import {
   FormulaHints,
   NameManager,
@@ -682,6 +682,31 @@ function useAgentToolProvider(registry, provider) {
   }, [registry, provider]);
 }
 
+// src/hooks/useToolBridge.ts
+import { useEffect as useEffect8, useState as useState4 } from "react";
+import { connectToolBridge } from "@pixerate/editor/tools";
+function useToolBridge(registry, options) {
+  const [state, setState] = useState4({ status: "off", editorId: null });
+  const key = options ? JSON.stringify([options.url, options.token, options.name, options.kind, options.reconnect]) : null;
+  useEffect8(() => {
+    if (!registry || !options) {
+      setState({ status: "off", editorId: null });
+      return;
+    }
+    let connection;
+    connection = connectToolBridge(registry, {
+      ...options,
+      onStatus: (status, detail) => {
+        setState({ status, detail, editorId: connection?.editorId ?? null });
+        options.onStatus?.(status, detail);
+      }
+    });
+    setState({ status: connection.status, editorId: null });
+    return () => connection?.close();
+  }, [registry, key]);
+  return state;
+}
+
 // src/components/EditorContent.tsx
 import {
   EditorContent as TipTapEditorContent
@@ -696,7 +721,7 @@ var EditorContent = ({
 };
 
 // src/components/BubbleMenu.tsx
-import { useEffect as useEffect8, useRef as useRef8, useState as useState4 } from "react";
+import { useEffect as useEffect9, useRef as useRef8, useState as useState5 } from "react";
 import { createPortal } from "react-dom";
 import {
   BubbleMenuPlugin
@@ -711,11 +736,11 @@ var BubbleMenu = ({
   updateDelay
 }) => {
   const menuEl = useRef8(null);
-  const [mounted, setMounted] = useState4(false);
+  const [mounted, setMounted] = useState5(false);
   if (!menuEl.current && typeof document !== "undefined") {
     menuEl.current = document.createElement("div");
   }
-  useEffect8(() => {
+  useEffect9(() => {
     if (!editor || !menuEl.current || editor.isDestroyed) {
       return;
     }
@@ -858,7 +883,7 @@ var TemplateRenderer = ({
 };
 
 // src/components/VariableForm.tsx
-import { useId, useMemo as useMemo6, useState as useState5 } from "react";
+import { useId, useMemo as useMemo6, useState as useState6 } from "react";
 import {
   compactVariableValues,
   getVariableFormFields
@@ -874,7 +899,7 @@ var VariableForm = ({
   className = "flex flex-col gap-3 text-sm"
 }) => {
   const idPrefix = useId();
-  const [internal, setInternal] = useState5(
+  const [internal, setInternal] = useState6(
     () => defaultValues ?? {}
   );
   const entered = values ?? internal;
@@ -946,10 +971,10 @@ var VariableForm = ({
 };
 
 // src/components/MergePreview.tsx
-import { useId as useId2, useState as useState7 } from "react";
+import { useId as useId2, useState as useState8 } from "react";
 
 // src/hooks/useMergePreview.ts
-import { useCallback as useCallback5, useMemo as useMemo7, useState as useState6 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo7, useState as useState7 } from "react";
 import {
   extractVariables,
   matchFields,
@@ -960,10 +985,10 @@ import {
 } from "@pixerate/editor";
 function useMergePreview(options) {
   const { template, templates, bindings, parseOptions } = options;
-  const [sourceText, setSourceTextState] = useState6(options.initialSource ?? "");
-  const [overrides, setOverrides] = useState6({});
-  const [index, setIndexState] = useState6(0);
-  const [result, setResult] = useState6(null);
+  const [sourceText, setSourceTextState] = useState7(options.initialSource ?? "");
+  const [overrides, setOverrides] = useState7({});
+  const [index, setIndexState] = useState7(0);
+  const [result, setResult] = useState7(null);
   const source = useMemo7(
     () => parseDataSource(sourceText, parseOptions),
     [sourceText, parseOptions]
@@ -1084,7 +1109,7 @@ var MergePreview = ({
     separator,
     maxOutputs
   });
-  const [copied, setCopied] = useState7(false);
+  const [copied, setCopied] = useState8(false);
   const { source, result } = merge;
   const copy = async () => {
     try {
@@ -1321,7 +1346,7 @@ function useParagraphStyles(editor) {
 }
 
 // src/components/StylesGallery.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var camel = (property) => property.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
 var keepSelection = (event) => event.preventDefault();
@@ -1337,9 +1362,9 @@ var StylesGallery = ({
   onChange
 }) => {
   const styles = useParagraphStyles(editor);
-  const [open, setOpen] = useState8(false);
-  const [creating, setCreating] = useState8(false);
-  const [name, setName] = useState8("");
+  const [open, setOpen] = useState9(false);
+  const [creating, setCreating] = useState9(false);
+  const [name, setName] = useState9("");
   const list = showAllStyles ? styles.styles : styles.gallery;
   const current = styles.currentStyle;
   const expanded = variant === "gallery" || open;
@@ -1556,7 +1581,7 @@ function useTrackChanges(editor) {
 }
 
 // src/review/CommentsPanel.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import {
   formatReviewTime,
   getCommentAuthor
@@ -1575,7 +1600,7 @@ var CommentsPanel = ({
   emptyMessage = "No comments yet. Select text and add a comment."
 }) => {
   const { threads, activeThreadId, store } = useComments(storeProp ?? editor);
-  const [showResolved, setShowResolved] = useState9(showResolvedInitial);
+  const [showResolved, setShowResolved] = useState10(showResolvedInitial);
   const author = authorProp ?? getCommentAuthor(editor) ?? { id: "anonymous", name: "Anonymous" };
   const visible = threads.filter((t) => showResolved || !t.resolved);
   const resolvedCount = threads.filter((t) => t.resolved).length;
@@ -1619,7 +1644,7 @@ var CommentThreadCard = ({
   author,
   formatTime
 }) => {
-  const [draft, setDraft] = useState9("");
+  const [draft, setDraft] = useState10("");
   const isDraft = thread.body === "";
   const quote = thread.anchor?.quote ?? thread.lastQuote ?? "";
   const live = editor && !editor.isDestroyed ? editor : null;
@@ -1833,12 +1858,12 @@ var CommentButton = ({
 );
 
 // src/review/useDocumentCompare.ts
-import { useCallback as useCallback7, useMemo as useMemo12, useRef as useRef9, useState as useState10 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo12, useRef as useRef9, useState as useState11 } from "react";
 import {
   applyDocumentComparison
 } from "@pixerate/editor";
 function useDocumentCompare(editor, options) {
-  const [summary, setSummary] = useState10(null);
+  const [summary, setSummary] = useState11(null);
   const defaults = useRef9(options);
   defaults.current = options;
   const compare = useCallback7(
@@ -1944,7 +1969,7 @@ function useFindReplace(editor) {
 }
 
 // src/find-replace/FindReplaceBar.tsx
-import { useEffect as useEffect9, useRef as useRef10, useState as useState11 } from "react";
+import { useEffect as useEffect10, useRef as useRef10, useState as useState12 } from "react";
 import { FIND_OPTION_TOGGLES, formatFindStatus } from "@pixerate/editor";
 import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var inputClass = "min-w-0 flex-1 rounded border border-input bg-background px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring";
@@ -1960,9 +1985,9 @@ var FindReplaceBar = ({
 }) => {
   const find = useFindReplace(editor);
   const findInput = useRef10(null);
-  const [moreOpen, setMoreOpen] = useState11(false);
+  const [moreOpen, setMoreOpen] = useState12(false);
   const visible = find.available && (alwaysOpen || find.open);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!visible || find.focusRequest === 0) return;
     findInput.current?.focus();
     findInput.current?.select();
@@ -2171,7 +2196,7 @@ var TableToolbar = ({
 };
 
 // src/tables/InsertTableGrid.tsx
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var keepSelection3 = (event) => event.preventDefault();
 var InsertTableGrid = ({
@@ -2185,7 +2210,7 @@ var InsertTableGrid = ({
   onInsert
 }) => {
   const table = useTableMenu(editor);
-  const [hover, setHover] = useState12(null);
+  const [hover, setHover] = useState13(null);
   const status = table.actions.insertTable;
   const disabled = !editor || !status.enabled;
   const insert = (size) => {
@@ -2399,6 +2424,7 @@ export {
   useSpreadsheetEditor,
   useSpreadsheetViewport,
   useTableMenu,
+  useToolBridge,
   useTrackChanges,
   withoutDirty
 };