@pixerate/editor-react 0.36.0 → 0.38.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as _tiptap_core from '@tiptap/core';
 import { Editor } from '@tiptap/core';
-import { Template, ColorGradient, FileImportOptions, RichTextPresetOptions, RichClipboardOptions, HistoryState, HistoryManager, HistoryEntry, Command, MergedExecutionOptions, HistoryMark, HistoryManagerOptions, DirtyTrackerOptions, DirtyTracker, FileImportState, ImportStructureSummary, FileImportController, FileImportControllerOptions, PromptValues, ParseDataSourceOptions, MergeRecordsOptions, MergeRecordsResult, MergeDataSource, MergeRecord, OutlineSnapshot, OutlineHeading, ParagraphStylesSnapshot, StyleRegistry, StyleDefinition, CreateStyleFromSelectionOptions, EditorSlotsMap, CommentStoreSnapshot, CommentStore, TrackChangesSnapshot, TrackedChange, ReviewAuthor, CompareSummary, CompareSource, EditorCompareOptions, FindReplaceSnapshot, FindReplaceMode, FindOptions, TableState, TableAction, TableActionParams, TableToolbarItem } from '@pixerate/editor';
+import { Template, ColorGradient, FileImportOptions, RichTextPresetOptions, RichClipboardOptions, HistoryState, HistoryManager, HistoryEntry, Command, MergedExecutionOptions, HistoryMark, HistoryManagerOptions, DirtyTrackerOptions, DirtyTracker, FileImportState, ImportStructureSummary, FileImportController, FileImportControllerOptions, PromptValues, ParseDataSourceOptions, MergeRecordsOptions, MergeRecordsResult, MergeDataSource, MergeRecord, OutlineSnapshot, OutlineHeading, ParagraphStylesSnapshot, StyleRegistry, StyleDefinition, CreateStyleFromSelectionOptions, EditorSlotsMap, CommentStoreSnapshot, CommentStore, TrackChangesSnapshot, TrackedChange, ReviewAuthor, CompareSummary, CompareSource, EditorCompareOptions, FindReplaceSnapshot, FindReplaceMode, FindOptions, TableState, TableAction, TableActionParams, TableToolbarItem, ChartNodeViewState, ChartNodeViewMount } from '@pixerate/editor';
 export { BindDirtyToHistoryOptions, ColorGradient, Command, CompareSource, CompareSummary, DirtyTracker, DirtyTrackerOptions, EditorCompareOptions, HistoryDirtyBinding, HistoryEntry, HistoryManager, HistoryManagerOptions, HistoryMark, HistoryState, MergeDataSource, MergeOutput, MergeRecord, MergeRecordsResult, MergedExecutionOptions, OutlineHeading, OutlineSnapshot, OutlineTreeItem, ParagraphStylesSnapshot, PromptDiagnostic, PromptValues, RichTextPresetOptions, StyleDefinition, TableAction, TableActionParams, TableState, Template, TemplateVersion, Token, TokenType, VariableFormField, bindDirtyToHistory, createDirtyTracker, createHistoryManager, defaultIsEqual, withoutDirty } from '@pixerate/editor';
 import { UseEditorOptions, EditorContentProps as EditorContentProps$1 } from '@tiptap/react';
 import { HistoryManager as HistoryManager$1 } from '@pixerate/editor/history';
@@ -13,6 +13,7 @@ export { AdjustmentLayersPanel, AdjustmentLayersPanelProps, ControlSlider, Contr
 export { CommandPalette, CommandPaletteProps, UseCommandPaletteOptions, UseCommandPaletteResult, UseCommandShortcutsOptions, useCommandPalette, useCommandShortcuts, useRegisterCommands } from './commands/index.cjs';
 export { RecoveryPrompt, RecoveryPromptProps, UseAutosaveOptions, UseAutosaveResult, useAutosave } from './persistence/index.cjs';
 export { AssetMentionChips, AssetMentionChipsProps, GenerationHistory, GenerationHistoryProps, GenerationSettings, GenerationSettingsProps, JobProgress, JobProgressProps, UseGenerationRecordsResult, UseJobProgressOptions, useGenerationPlan, useGenerationRecords, useJobProgress } from './generation/index.cjs';
+import { ChartTheme } from '@pixerate/editor/chart';
 import '@pixerate/editor/spreadsheet';
 import '@pixerate/editor/image-editor';
 import '@pixerate/editor/commands';
@@ -756,4 +757,29 @@ interface TableBubbleMenuProps extends Omit<BubbleMenuProps, "editor" | "childre
  */
 declare const TableBubbleMenu: React__default.FC<TableBubbleMenuProps>;
 
-export { BubbleMenu, type BubbleMenuProps, 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, 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, useAgentToolProvider, useComments, useDismissGuard, useDocumentCompare, useDocxExport, useEditor, useEditorSlots, useFileImport, useFindReplace, useHistory, useHistoryDirty, useHistoryShortcuts, useMergePreview, useNavigationGuard, useOutline, useParagraphStyles, usePromptEditor, useTableMenu, useTrackChanges };
+interface ChartNodeViewProps {
+    /** What the editor's `chart` node passes (see `ChartNodeViewState`). */
+    state: ChartNodeViewState;
+    /** Chart colours (default: the CSS-variable theme). */
+    theme?: Partial<ChartTheme>;
+    /** Show the data grid under the chart while editing (default `true`). */
+    showDataGrid?: boolean;
+}
+/**
+ * A chart inside a rich-text document: read-only until clicked, then editable on the canvas
+ * with the data grid and the inspector in a panel below (side by side when there is room). "Done", Escape or moving the
+ * selection away closes it. Edits are written back to the document as undo steps.
+ */
+declare function ChartNodeView({ state, theme, showDataGrid }: ChartNodeViewProps): React__default.JSX.Element;
+interface ReactChartNodeViewOptions extends Omit<ChartNodeViewProps, 'state'> {
+    /** Draw something else for each chart (default `ChartNodeView`). */
+    component?: React__default.ComponentType<ChartNodeViewProps>;
+}
+/**
+ * The `nodeView` for the core `chart` node, drawing `ChartNodeView` in its own React root:
+ * `createRichTextPreset({ chart: { nodeView: createReactChartNodeView() } })`. Works with any
+ * TipTap editor (it does not need `EditorContent`); app context does not reach the chart.
+ */
+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 };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _tiptap_core from '@tiptap/core';
 import { Editor } from '@tiptap/core';
-import { Template, ColorGradient, FileImportOptions, RichTextPresetOptions, RichClipboardOptions, HistoryState, HistoryManager, HistoryEntry, Command, MergedExecutionOptions, HistoryMark, HistoryManagerOptions, DirtyTrackerOptions, DirtyTracker, FileImportState, ImportStructureSummary, FileImportController, FileImportControllerOptions, PromptValues, ParseDataSourceOptions, MergeRecordsOptions, MergeRecordsResult, MergeDataSource, MergeRecord, OutlineSnapshot, OutlineHeading, ParagraphStylesSnapshot, StyleRegistry, StyleDefinition, CreateStyleFromSelectionOptions, EditorSlotsMap, CommentStoreSnapshot, CommentStore, TrackChangesSnapshot, TrackedChange, ReviewAuthor, CompareSummary, CompareSource, EditorCompareOptions, FindReplaceSnapshot, FindReplaceMode, FindOptions, TableState, TableAction, TableActionParams, TableToolbarItem } from '@pixerate/editor';
+import { Template, ColorGradient, FileImportOptions, RichTextPresetOptions, RichClipboardOptions, HistoryState, HistoryManager, HistoryEntry, Command, MergedExecutionOptions, HistoryMark, HistoryManagerOptions, DirtyTrackerOptions, DirtyTracker, FileImportState, ImportStructureSummary, FileImportController, FileImportControllerOptions, PromptValues, ParseDataSourceOptions, MergeRecordsOptions, MergeRecordsResult, MergeDataSource, MergeRecord, OutlineSnapshot, OutlineHeading, ParagraphStylesSnapshot, StyleRegistry, StyleDefinition, CreateStyleFromSelectionOptions, EditorSlotsMap, CommentStoreSnapshot, CommentStore, TrackChangesSnapshot, TrackedChange, ReviewAuthor, CompareSummary, CompareSource, EditorCompareOptions, FindReplaceSnapshot, FindReplaceMode, FindOptions, TableState, TableAction, TableActionParams, TableToolbarItem, ChartNodeViewState, ChartNodeViewMount } from '@pixerate/editor';
 export { BindDirtyToHistoryOptions, ColorGradient, Command, CompareSource, CompareSummary, DirtyTracker, DirtyTrackerOptions, EditorCompareOptions, HistoryDirtyBinding, HistoryEntry, HistoryManager, HistoryManagerOptions, HistoryMark, HistoryState, MergeDataSource, MergeOutput, MergeRecord, MergeRecordsResult, MergedExecutionOptions, OutlineHeading, OutlineSnapshot, OutlineTreeItem, ParagraphStylesSnapshot, PromptDiagnostic, PromptValues, RichTextPresetOptions, StyleDefinition, TableAction, TableActionParams, TableState, Template, TemplateVersion, Token, TokenType, VariableFormField, bindDirtyToHistory, createDirtyTracker, createHistoryManager, defaultIsEqual, withoutDirty } from '@pixerate/editor';
 import { UseEditorOptions, EditorContentProps as EditorContentProps$1 } from '@tiptap/react';
 import { HistoryManager as HistoryManager$1 } from '@pixerate/editor/history';
@@ -13,6 +13,7 @@ export { AdjustmentLayersPanel, AdjustmentLayersPanelProps, ControlSlider, Contr
 export { CommandPalette, CommandPaletteProps, UseCommandPaletteOptions, UseCommandPaletteResult, UseCommandShortcutsOptions, useCommandPalette, useCommandShortcuts, useRegisterCommands } from './commands/index.js';
 export { RecoveryPrompt, RecoveryPromptProps, UseAutosaveOptions, UseAutosaveResult, useAutosave } from './persistence/index.js';
 export { AssetMentionChips, AssetMentionChipsProps, GenerationHistory, GenerationHistoryProps, GenerationSettings, GenerationSettingsProps, JobProgress, JobProgressProps, UseGenerationRecordsResult, UseJobProgressOptions, useGenerationPlan, useGenerationRecords, useJobProgress } from './generation/index.js';
+import { ChartTheme } from '@pixerate/editor/chart';
 import '@pixerate/editor/spreadsheet';
 import '@pixerate/editor/image-editor';
 import '@pixerate/editor/commands';
@@ -756,4 +757,29 @@ interface TableBubbleMenuProps extends Omit<BubbleMenuProps, "editor" | "childre
  */
 declare const TableBubbleMenu: React__default.FC<TableBubbleMenuProps>;
 
-export { BubbleMenu, type BubbleMenuProps, 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, 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, useAgentToolProvider, useComments, useDismissGuard, useDocumentCompare, useDocxExport, useEditor, useEditorSlots, useFileImport, useFindReplace, useHistory, useHistoryDirty, useHistoryShortcuts, useMergePreview, useNavigationGuard, useOutline, useParagraphStyles, usePromptEditor, useTableMenu, useTrackChanges };
+interface ChartNodeViewProps {
+    /** What the editor's `chart` node passes (see `ChartNodeViewState`). */
+    state: ChartNodeViewState;
+    /** Chart colours (default: the CSS-variable theme). */
+    theme?: Partial<ChartTheme>;
+    /** Show the data grid under the chart while editing (default `true`). */
+    showDataGrid?: boolean;
+}
+/**
+ * A chart inside a rich-text document: read-only until clicked, then editable on the canvas
+ * with the data grid and the inspector in a panel below (side by side when there is room). "Done", Escape or moving the
+ * selection away closes it. Edits are written back to the document as undo steps.
+ */
+declare function ChartNodeView({ state, theme, showDataGrid }: ChartNodeViewProps): React__default.JSX.Element;
+interface ReactChartNodeViewOptions extends Omit<ChartNodeViewProps, 'state'> {
+    /** Draw something else for each chart (default `ChartNodeView`). */
+    component?: React__default.ComponentType<ChartNodeViewProps>;
+}
+/**
+ * The `nodeView` for the core `chart` node, drawing `ChartNodeView` in its own React root:
+ * `createRichTextPreset({ chart: { nodeView: createReactChartNodeView() } })`. Works with any
+ * TipTap editor (it does not need `EditorContent`); app context does not reach the chart.
+ */
+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 };

package/dist/index.js

@@ -1,3 +1,9 @@
+import {
+  ChartCanvas,
+  ChartDataGrid,
+  ChartInspector,
+  chartButtonClass
+} from "./chunk-IH5ZIOK3.js";
 import {
   FormulaHints,
   NameManager,
@@ -2241,10 +2247,84 @@ var TableBubbleMenu = ({
   pluginKey = "tableBubbleMenu",
   ...rest
 }) => /* @__PURE__ */ jsx16(BubbleMenu, { editor, pluginKey, shouldShow: shouldShowTableBubbleMenu, ...rest, children: children ?? /* @__PURE__ */ jsx16(TableToolbar, { editor, ...toolbarProps }) });
+
+// src/chart-node/ChartNodeView.tsx
+import { createRoot } from "react-dom/client";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function ChartNodeView({ state, theme, showDataGrid = true }) {
+  const { controller, editing, editable, selected, width, height, setEditing } = state;
+  const open = () => {
+    if (editable && !editing) setEditing(true);
+  };
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: `not-prose my-2 rounded-md border bg-background p-1 ${selected ? "border-primary ring-1 ring-primary" : "border-border"}`,
+      "data-chart-node-view": "",
+      "data-editing": editing ? "" : void 0,
+      onKeyDown: (e) => {
+        if (editing && e.key === "Escape") {
+          e.stopPropagation();
+          setEditing(false);
+        }
+      },
+      children: [
+        editing && /* @__PURE__ */ jsxs13("div", { className: "mb-1 flex items-center justify-between gap-2 px-1", "data-chart-node-toolbar": "", children: [
+          /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: "Editing chart" }),
+          /* @__PURE__ */ jsx17("button", { type: "button", className: chartButtonClass, "data-action": "done", onClick: () => setEditing(false), children: "Done" })
+        ] }),
+        /* @__PURE__ */ jsx17(
+          "div",
+          {
+            className: editable && !editing ? "cursor-pointer" : void 0,
+            onClick: open,
+            title: editable && !editing ? "Click to edit the chart" : void 0,
+            "data-chart-node-canvas": "",
+            children: /* @__PURE__ */ jsx17(ChartCanvas, { controller, width: width ?? 640, height, responsive: width === null, editable: editing, theme })
+          }
+        ),
+        editing && // Wraps by the document's width, not the viewport's: side by side when there is room.
+        /* @__PURE__ */ jsxs13("div", { className: "mt-2 flex flex-wrap items-start gap-2", "data-chart-node-panel": "", children: [
+          showDataGrid && /* @__PURE__ */ jsx17("div", { className: "min-w-0 flex-[1_1_20rem] overflow-x-auto", children: /* @__PURE__ */ jsx17(ChartDataGrid, { controller }) }),
+          /* @__PURE__ */ jsx17(ChartInspector, { controller, className: "max-h-96 min-w-0 flex-[1_1_16rem] overflow-y-auto rounded-md border border-border p-3" })
+        ] })
+      ]
+    }
+  );
+}
+function createReactChartNodeView(options = {}) {
+  const { component: Component = ChartNodeView, ...props } = options;
+  return (dom, state) => {
+    const root = createRoot(dom);
+    let latest = state;
+    let scheduled = false;
+    let destroyed = false;
+    const schedule = () => {
+      if (scheduled) return;
+      scheduled = true;
+      queueMicrotask(() => {
+        scheduled = false;
+        if (!destroyed) root.render(/* @__PURE__ */ jsx17(Component, { ...props, state: latest }));
+      });
+    };
+    schedule();
+    return {
+      update: (next) => {
+        latest = next;
+        schedule();
+      },
+      destroy: () => {
+        destroyed = true;
+        queueMicrotask(() => root.unmount());
+      }
+    };
+  };
+}
 export {
   AdjustmentLayersPanel,
   AssetMentionChips,
   BubbleMenu,
+  ChartNodeView,
   CommandPalette,
   CommentButton,
   CommentsPanel,
@@ -2286,6 +2366,7 @@ export {
   bindDirtyToHistory2 as bindDirtyToHistory,
   createDirtyTracker,
   createHistoryManager2 as createHistoryManager,
+  createReactChartNodeView,
   defaultIsEqual,
   useAgentToolProvider,
   useAutosave,