@pixerate/editor-react 0.11.0 → 0.12.0

package/README.md

@@ -58,11 +58,35 @@ export function Document() {
 
 `useEditor` is TipTap's `useEditor` preloaded with `createRichTextPreset()`: headings, lists, task lists, links, text alignment, colors and highlights, and images. Mentions and markdown are opt-in via `richTextOptions: { mention: true, markdown: true }`.
 
+## Comments and tracked changes
+
+```tsx
+import { Comments, TrackChanges } from "@pixerate/editor";
+import { CommentsPanel, ReviewToolbar, CommentButton, BubbleMenu } from "@pixerate/editor-react";
+
+const editor = useEditor({ extensions: [Comments.configure({ author: me }), TrackChanges.configure({ author: me })] });
+
+<ReviewToolbar editor={editor} />        {/* toggle tracking, prev/next, accept/reject (all) */}
+<BubbleMenu editor={editor}><CommentButton editor={editor} /></BubbleMenu>
+<CommentsPanel editor={editor} />        {/* threads: reply, resolve, delete, click to select */}
+```
+
+`useComments(editorOrStore)` and `useTrackChanges(editor)` expose the same state for custom UIs.
+
+`useEditor({ fileImport: true, richClipboard: true })` imports dropped/pasted `.md`, `.html`, `.txt` and `.rtf` files at the drop position and copies lossless slices between editors. `useFileImport(editor)` returns `{ openFilePicker, importFiles, accept, isImporting, error }` for an import button. `usePromptEditor({ fileImport: true })` imports dropped files as plain text.
+
+`useAgentToolProvider(registry, provider)` registers an agent tool provider (see `ToolRegistry` in `@pixerate/editor/agent`) while the component is mounted. Memoize the provider:
+
+```tsx
+const provider = useMemo(() => editor && createRichTextToolProvider(editor, { id: "doc" }), [editor]);
+useAgentToolProvider(registry, provider);
+```
+
 ## More exports
 
 | Import | Exports |
 | :--- | :--- |
-| `@pixerate/editor-react` | `usePromptEditor`, `useEditor`, `EditorContent`, `BubbleMenu`, `TemplateRenderer`, `useHistory`, `useHistoryShortcuts`, `useNavigationGuard`, `useDismissGuard`, `EditorSlotsProvider` / `useEditorSlots`, `SpreadsheetEditor` / `useSpreadsheetEditor`, `DirtyTracker` |
+| `@pixerate/editor-react` | `usePromptEditor`, `useEditor`, `EditorContent`, `BubbleMenu`, `TemplateRenderer`, `useHistory`, `useHistoryShortcuts`, `useNavigationGuard`, `useDismissGuard`, `EditorSlotsProvider` / `useEditorSlots`, `SpreadsheetEditor` / `useSpreadsheetEditor`, `FormulaHints`, `DirtyTracker` |
 | `@pixerate/editor-react/image-editor` | `ImageEditor`, `useImageEditor`: crop, rotate/flip, adjustments, annotations, depth masks, and `onInpaint` / `onRemoveBackground` AI hooks |
 | `@pixerate/editor-react/canvas` | `useCanvasGraph`, `useCanvasLayout`, `useCanvasClipboard`, `useCanvasDocking`, `useCanvasShortcuts`, `useCanvasExplosion`, `useStreamingCanvas`, `AgentPresenceLayer`, plus the pure layout helpers from `@pixerate/editor/canvas` |
 

package/dist/canvas/index.cjs

@@ -21,46 +21,83 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var canvas_exports = {};
 __export(canvas_exports, {
   AgentPresenceLayer: () => AgentPresenceLayer,
-  ManualClock: () => import_canvas6.ManualClock,
-  blendLayout: () => import_canvas6.blendLayout,
-  boundsOf: () => import_canvas6.boundsOf,
-  calculateDagreReflowDisplacement: () => import_canvas6.calculateDagreReflowDisplacement,
-  calculateDirectionalDisplacement: () => import_canvas6.calculateDirectionalDisplacement,
-  canvasHeight: () => import_canvas6.canvasHeight,
-  centerNodes: () => import_canvas6.centerNodes,
-  centre: () => import_canvas6.centre,
-  computeNodesBoundingBox: () => import_canvas6.computeNodesBoundingBox,
-  connectedOnly: () => import_canvas6.connectedOnly,
-  createBezierTrajectory: () => import_canvas6.createBezierTrajectory,
-  createFanOutTrajectory: () => import_canvas6.createFanOutTrajectory,
-  defaultEasing: () => import_canvas6.defaultEasing,
-  ensureLayout: () => import_canvas6.ensureLayout,
-  estimateCanvasHeight: () => import_canvas6.estimateCanvasHeight,
-  estimateNodeSize: () => import_canvas6.estimateNodeSize,
-  flowSide: () => import_canvas6.flowSide,
-  getCenteredNodePosition: () => import_canvas6.getCenteredNodePosition,
-  getLayoutedNodes: () => import_canvas6.getLayoutedNodes,
-  isEventFromTextInput: () => import_canvas6.isEventFromTextInput,
-  isValidCanvasNode: () => import_canvas6.isValidCanvasNode,
-  isValidUrl: () => import_canvas6.isValidUrl,
-  layoutBounds: () => import_canvas6.layoutBounds,
-  linearPositionTrajectory: () => import_canvas6.linearPositionTrajectory,
-  linearTrajectory: () => import_canvas6.linearTrajectory,
-  overlaps: () => import_canvas6.overlaps,
-  parseCanvasClipboardData: () => import_canvas6.parseCanvasClipboardData,
-  placeBeside: () => import_canvas6.placeBeside,
-  realClock: () => import_canvas6.realClock,
-  remapPastedNodes: () => import_canvas6.remapPastedNodes,
-  repositionNodesTo: () => import_canvas6.repositionNodesTo,
-  runMultiNodeTransition: () => import_canvas6.runMultiNodeTransition,
-  serializeCanvasNodes: () => import_canvas6.serializeCanvasNodes,
+  CONNECTION_LINE_TYPES: () => import_canvas8.CONNECTION_LINE_TYPES,
+  CanvasGuidesLayer: () => CanvasGuidesLayer,
+  CanvasScenesStore: () => import_canvas8.CanvasScenesStore,
+  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas8.DEFAULT_ARRANGE_SHORTCUTS,
+  ManualClock: () => import_canvas9.ManualClock,
+  alignNodes: () => import_canvas8.alignNodes,
+  applyNodeUpdates: () => import_canvas8.applyNodeUpdates,
+  blendLayout: () => import_canvas9.blendLayout,
+  boundsOf: () => import_canvas9.boundsOf,
+  calculateDagreReflowDisplacement: () => import_canvas9.calculateDagreReflowDisplacement,
+  calculateDirectionalDisplacement: () => import_canvas9.calculateDirectionalDisplacement,
+  canvasHeight: () => import_canvas9.canvasHeight,
+  centerNodes: () => import_canvas9.centerNodes,
+  centre: () => import_canvas9.centre,
+  computeNodesBoundingBox: () => import_canvas9.computeNodesBoundingBox,
+  computeSnapGuides: () => import_canvas8.computeSnapGuides,
+  connectedOnly: () => import_canvas9.connectedOnly,
+  createBezierTrajectory: () => import_canvas9.createBezierTrajectory,
+  createCanvasScenesStore: () => import_canvas8.createCanvasScenesStore,
+  createFanOutTrajectory: () => import_canvas9.createFanOutTrajectory,
+  createGuideIndex: () => import_canvas8.createGuideIndex,
+  createNodeGuideIndex: () => import_canvas8.createNodeGuideIndex,
+  defaultEasing: () => import_canvas9.defaultEasing,
+  distributeNodes: () => import_canvas8.distributeNodes,
+  ensureLayout: () => import_canvas9.ensureLayout,
+  estimateCanvasHeight: () => import_canvas9.estimateCanvasHeight,
+  estimateNodeSize: () => import_canvas9.estimateNodeSize,
+  findConnectorSnap: () => import_canvas8.findConnectorSnap,
+  fitViewportToNodes: () => import_canvas8.fitViewportToNodes,
+  fitViewportToRect: () => import_canvas8.fitViewportToRect,
+  flowSide: () => import_canvas9.flowSide,
+  getAbsolutePosition: () => import_canvas8.getAbsolutePosition,
+  getCenteredNodePosition: () => import_canvas9.getCenteredNodePosition,
+  getLayoutedNodes: () => import_canvas9.getLayoutedNodes,
+  getNodeRect: () => import_canvas8.getNodeRect,
+  getNodeSize: () => import_canvas8.getNodeSize,
+  handlePoint: () => import_canvas8.handlePoint,
+  invertNodeUpdates: () => import_canvas8.invertNodeUpdates,
+  isEventFromTextInput: () => import_canvas9.isEventFromTextInput,
+  isLocked: () => import_canvas8.isLocked,
+  isValidCanvasNode: () => import_canvas9.isValidCanvasNode,
+  isValidUrl: () => import_canvas9.isValidUrl,
+  layoutBounds: () => import_canvas9.layoutBounds,
+  linearPositionTrajectory: () => import_canvas9.linearPositionTrajectory,
+  linearTrajectory: () => import_canvas9.linearTrajectory,
+  lockNodes: () => import_canvas8.lockNodes,
+  matchArrangeShortcut: () => import_canvas8.matchArrangeShortcut,
+  matchSize: () => import_canvas8.matchSize,
+  nearestHandlePositions: () => import_canvas8.nearestHandlePositions,
+  oppositePosition: () => import_canvas8.oppositePosition,
+  overlaps: () => import_canvas9.overlaps,
+  parseCanvasClipboardData: () => import_canvas9.parseCanvasClipboardData,
+  parseCanvasScenes: () => import_canvas8.parseCanvasScenes,
+  placeBeside: () => import_canvas9.placeBeside,
+  positionToSide: () => import_canvas8.positionToSide,
+  readStyleSize: () => import_canvas8.readStyleSize,
+  realClock: () => import_canvas9.realClock,
+  remapPastedNodes: () => import_canvas9.remapPastedNodes,
+  reorderNodes: () => import_canvas8.reorderNodes,
+  repositionNodesTo: () => import_canvas9.repositionNodesTo,
+  runMultiNodeTransition: () => import_canvas9.runMultiNodeTransition,
+  serializeCanvasNodes: () => import_canvas9.serializeCanvasNodes,
+  sideToPosition: () => import_canvas8.sideToPosition,
+  snapNodeDrag: () => import_canvas8.snapNodeDrag,
+  toggleLockNodes: () => import_canvas8.toggleLockNodes,
+  unlockNodes: () => import_canvas8.unlockNodes,
+  useCanvasArrange: () => useCanvasArrange,
+  useCanvasArrangeShortcuts: () => useCanvasArrangeShortcuts,
   useCanvasClipboard: () => useCanvasClipboard,
   useCanvasDocking: () => useCanvasDocking,
   useCanvasExplosion: () => useCanvasExplosion,
   useCanvasGraph: () => useCanvasGraph,
   useCanvasLayout: () => useCanvasLayout,
+  useCanvasScenes: () => useCanvasScenes,
   useCanvasShortcuts: () => useCanvasShortcuts,
-  useStreamingCanvas: () => useStreamingCanvas
+  useStreamingCanvas: () => useStreamingCanvas,
+  withStyleSize: () => import_canvas8.withStyleSize
 });
 module.exports = __toCommonJS(canvas_exports);
 
@@ -805,12 +842,191 @@ function useCanvasExplosion(target) {
   };
 }
 
-// src/canvas/index.ts
+// src/canvas/useCanvasArrange.ts
+var import_react8 = require("react");
 var import_canvas6 = require("@pixerate/editor/canvas");
+function useCanvasArrange(options) {
+  const [guides, setGuides] = (0, import_react8.useState)([]);
+  const nodesRef = (0, import_react8.useRef)(options.nodes);
+  nodesRef.current = options.nodes;
+  const optionsRef = (0, import_react8.useRef)(options);
+  optionsRef.current = options;
+  const controller = (0, import_react8.useMemo)(
+    () => (0, import_canvas6.createCanvasArrangeController)({
+      getNodes: () => nodesRef.current,
+      setNodes: (next) => {
+        nodesRef.current = next;
+        optionsRef.current.setNodes(next);
+      },
+      getSelectedIds: () => optionsRef.current.getSelectedIds?.() ?? nodesRef.current.filter((n) => n.selected).map((n) => n.id),
+      get history() {
+        return optionsRef.current.history;
+      },
+      getZoom: () => optionsRef.current.zoom ?? 1,
+      get guides() {
+        return optionsRef.current.guides;
+      },
+      get snapping() {
+        return optionsRef.current.snapping;
+      },
+      get rectOptions() {
+        return optionsRef.current.rectOptions;
+      },
+      onGuidesChange: setGuides
+    }),
+    []
+  );
+  return (0, import_react8.useMemo)(() => ({ ...controller, guides }), [controller, guides]);
+}
+function useCanvasArrangeShortcuts(options) {
+  const optionsRef = (0, import_react8.useRef)(options);
+  optionsRef.current = options;
+  const { targetElement, enabled = true } = options;
+  (0, import_react8.useEffect)(() => {
+    if (!enabled) return;
+    const target = targetElement ?? (typeof window !== "undefined" ? window : null);
+    if (!target) return;
+    function handleKeyDown(event) {
+      const { arrange, scenes, bindings } = optionsRef.current;
+      const action = (0, import_canvas6.matchArrangeShortcut)(event, bindings);
+      if (!action) return;
+      let handled = false;
+      if (action === "nextScene" || action === "previousScene") {
+        if (scenes) {
+          scenes[action === "nextScene" ? "next" : "previous"]();
+          handled = true;
+        }
+      } else {
+        handled = arrange.runAction(action);
+      }
+      if (handled) event.preventDefault();
+    }
+    target.addEventListener("keydown", handleKeyDown);
+    return () => target.removeEventListener("keydown", handleKeyDown);
+  }, [targetElement, enabled]);
+}
+
+// src/canvas/useCanvasScenes.ts
+var import_react9 = require("react");
+var import_canvas7 = require("@pixerate/editor/canvas");
+function useCanvasScenes(options = {}) {
+  const optionsRef = (0, import_react9.useRef)(options);
+  optionsRef.current = options;
+  const storeRef = (0, import_react9.useRef)(null);
+  if (!storeRef.current) storeRef.current = options.store ?? new import_canvas7.CanvasScenesStore(options);
+  const store = storeRef.current;
+  const state = (0, import_react9.useSyncExternalStore)(
+    (listener) => store.subscribe(listener),
+    () => store.getState(),
+    () => store.getState()
+  );
+  const actions = (0, import_react9.useMemo)(() => {
+    const show = (scene) => {
+      if (scene) {
+        optionsRef.current.setViewport?.(scene.viewport, { duration: optionsRef.current.duration ?? 300 });
+      }
+      return scene;
+    };
+    return {
+      store,
+      /** Saves the current viewport (or `viewport`) as a new scene. */
+      capture(name, extra = {}) {
+        const viewport = extra.viewport ?? optionsRef.current.getViewport?.();
+        if (!viewport) throw new Error("[useCanvasScenes] capture() needs a viewport or a getViewport option.");
+        return store.add({ viewport, name, nodeIds: extra.nodeIds }, extra.index);
+      },
+      /** Saves a scene framing the given nodes in a container of `size`. */
+      captureNodes(nodes, ids, size, name, fit) {
+        const viewport = (0, import_canvas7.fitViewportToNodes)(nodes, size, ids, fit);
+        return viewport ? store.add({ viewport, name, nodeIds: ids }) : void 0;
+      },
+      /** Replaces a scene's viewport with the live one. */
+      recapture(id) {
+        const viewport = optionsRef.current.getViewport?.();
+        return viewport ? store.update(id, { viewport }) : void 0;
+      },
+      update: (id, patch) => store.update(id, patch),
+      rename: (id, name) => store.rename(id, name),
+      move: (id, toIndex) => store.move(id, toIndex),
+      reorder: (ids) => store.reorder(ids),
+      remove: (id) => store.remove(id),
+      clear: () => store.clear(),
+      goTo: (id) => show(store.goTo(id)),
+      next: () => show(store.next()),
+      previous: () => show(store.previous()),
+      toJSON: () => store.toJSON(),
+      serialize: () => store.serialize(),
+      load: (input) => store.load(input)
+    };
+  }, [store]);
+  return {
+    ...actions,
+    scenes: state.scenes,
+    currentId: state.currentId,
+    currentIndex: state.currentIndex,
+    current: state.currentIndex === -1 ? null : state.scenes[state.currentIndex]
+  };
+}
+
+// src/canvas/CanvasGuidesLayer.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_VIEWPORT = { x: 0, y: 0, zoom: 1 };
+function CanvasGuidesLayer({
+  guides,
+  viewport = DEFAULT_VIEWPORT,
+  color = "#f59e0b",
+  spacingColor = "#ec4899",
+  className = ""
+}) {
+  if (!guides || guides.length === 0) return null;
+  const sx = (x) => x * viewport.zoom + viewport.x;
+  const sy = (y) => y * viewport.zoom + viewport.y;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      className: `pixerate-canvas-guides ${className}`,
+      style: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        overflow: "visible",
+        zIndex: 10
+      },
+      "aria-hidden": "true",
+      children: guides.map((guide, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "line",
+        {
+          "data-kind": guide.kind,
+          x1: sx(guide.x1),
+          y1: sy(guide.y1),
+          x2: sx(guide.x2),
+          y2: sy(guide.y2),
+          stroke: guide.kind === "spacing" ? spacingColor : color,
+          strokeWidth: 1,
+          strokeDasharray: guide.kind === "centre" ? "4 3" : void 0,
+          shapeRendering: "crispEdges"
+        },
+        i
+      ))
+    }
+  );
+}
+
+// src/canvas/index.ts
+var import_canvas8 = require("@pixerate/editor/canvas");
+var import_canvas9 = require("@pixerate/editor/canvas");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AgentPresenceLayer,
+  CONNECTION_LINE_TYPES,
+  CanvasGuidesLayer,
+  CanvasScenesStore,
+  DEFAULT_ARRANGE_SHORTCUTS,
   ManualClock,
+  alignNodes,
+  applyNodeUpdates,
   blendLayout,
   boundsOf,
   calculateDagreReflowDisplacement,
@@ -819,36 +1035,67 @@ var import_canvas6 = require("@pixerate/editor/canvas");
   centerNodes,
   centre,
   computeNodesBoundingBox,
+  computeSnapGuides,
   connectedOnly,
   createBezierTrajectory,
+  createCanvasScenesStore,
   createFanOutTrajectory,
+  createGuideIndex,
+  createNodeGuideIndex,
   defaultEasing,
+  distributeNodes,
   ensureLayout,
   estimateCanvasHeight,
   estimateNodeSize,
+  findConnectorSnap,
+  fitViewportToNodes,
+  fitViewportToRect,
   flowSide,
+  getAbsolutePosition,
   getCenteredNodePosition,
   getLayoutedNodes,
+  getNodeRect,
+  getNodeSize,
+  handlePoint,
+  invertNodeUpdates,
   isEventFromTextInput,
+  isLocked,
   isValidCanvasNode,
   isValidUrl,
   layoutBounds,
   linearPositionTrajectory,
   linearTrajectory,
+  lockNodes,
+  matchArrangeShortcut,
+  matchSize,
+  nearestHandlePositions,
+  oppositePosition,
   overlaps,
   parseCanvasClipboardData,
+  parseCanvasScenes,
   placeBeside,
+  positionToSide,
+  readStyleSize,
   realClock,
   remapPastedNodes,
+  reorderNodes,
   repositionNodesTo,
   runMultiNodeTransition,
   serializeCanvasNodes,
+  sideToPosition,
+  snapNodeDrag,
+  toggleLockNodes,
+  unlockNodes,
+  useCanvasArrange,
+  useCanvasArrangeShortcuts,
   useCanvasClipboard,
   useCanvasDocking,
   useCanvasExplosion,
   useCanvasGraph,
   useCanvasLayout,
+  useCanvasScenes,
   useCanvasShortcuts,
-  useStreamingCanvas
+  useStreamingCanvas,
+  withStyleSize
 });
 //# sourceMappingURL=index.cjs.map