@pixerate/editor-react 0.13.0 → 0.15.0

package/dist/index.js

@@ -6,11 +6,17 @@ import {
   useFillHandle,
   useSpreadsheetClipboard,
   useSpreadsheetEditor
-} from "./chunk-MHTAR3RS.js";
+} from "./chunk-QVQYYHJ5.js";
 import {
   ImageEditor,
   useImageEditor
-} from "./chunk-TL27COKM.js";
+} from "./chunk-LPFZMZ3L.js";
+import {
+  CommandPalette,
+  useCommandPalette,
+  useCommandShortcuts,
+  useRegisterCommands
+} from "./chunk-4ZC2WCUO.js";
 
 // src/hooks/usePromptEditor.ts
 import { useMemo, useEffect, useRef } from "react";
@@ -406,7 +412,7 @@ function useDismissGuard({
 }
 
 // src/hooks/useHistory.ts
-import { useSyncExternalStore, useRef as useRef4, useCallback as useCallback3 } from "react";
+import { useSyncExternalStore, useRef as useRef4, useCallback as useCallback3, useMemo as useMemo2 } from "react";
 import {
   HistoryManager,
   createHistoryManager
@@ -428,6 +434,7 @@ function useHistory(managerOrOptions) {
     () => manager.getState(),
     () => manager.getState()
   );
+  const entries = useMemo2(() => manager.getEntries(), [manager, state]);
   const undo = useCallback3(() => manager.undo(), [manager]);
   const redo = useCallback3(() => manager.redo(), [manager]);
   const clear = useCallback3(() => manager.clear(), [manager]);
@@ -443,60 +450,105 @@ function useHistory(managerOrOptions) {
     (name, fn) => manager.batch(name, fn),
     [manager]
   );
+  const goTo = useCallback3((index) => manager.goTo(index), [manager]);
+  const mark = useCallback3(() => manager.mark(), [manager]);
+  const revertTo = useCallback3(
+    (m) => manager.revertTo(m),
+    [manager]
+  );
+  const beginGesture = useCallback3(
+    (key) => manager.beginGesture(key),
+    [manager]
+  );
+  const endGesture = useCallback3(() => manager.endGesture(), [manager]);
   return {
     ...state,
     manager,
+    entries,
     undo,
     redo,
     clear,
     execute,
     executeMerged,
-    batch
+    batch,
+    goTo,
+    mark,
+    revertTo,
+    beginGesture,
+    endGesture
   };
 }
 
+// src/hooks/useHistoryDirty.ts
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef5, useState as useState3, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import {
+  DirtyTracker,
+  bindDirtyToHistory
+} from "@pixerate/editor";
+function useHistoryDirty(options) {
+  const getValueRef = useRef5(options.getValue);
+  getValueRef.current = options.getValue;
+  const [tracker] = useState3(
+    () => options.tracker ?? new DirtyTracker(options.getValue(), {
+      isEqual: options.isEqual,
+      normalize: options.normalize
+    })
+  );
+  const bindingRef = useRef5(null);
+  useEffect3(() => {
+    const binding = bindDirtyToHistory({
+      history: options.history,
+      getValue: () => getValueRef.current(),
+      tracker
+    });
+    bindingRef.current = binding;
+    return () => {
+      binding.destroy();
+      if (bindingRef.current === binding) bindingRef.current = null;
+    };
+  }, [options.history, tracker]);
+  const isDirty = useSyncExternalStore2(
+    useCallback4((onChange) => tracker.subscribe(onChange), [tracker]),
+    () => tracker.dirty,
+    () => tracker.dirty
+  );
+  const markClean = useCallback4(
+    () => tracker.markClean(getValueRef.current()),
+    [tracker]
+  );
+  const suppress = useCallback4(
+    (fn) => bindingRef.current ? bindingRef.current.suppress(fn) : tracker.suppress(fn),
+    [tracker]
+  );
+  const refresh = useCallback4(
+    () => tracker.update(getValueRef.current()),
+    [tracker]
+  );
+  return { isDirty, markClean, suppress, refresh, tracker };
+}
+
 // src/hooks/useHistoryShortcuts.ts
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
+import { matchHistoryShortcut } from "@pixerate/editor/commands";
 function useHistoryShortcuts(manager, options = {}) {
   const {
     enabled = true,
     target,
     ignoreEditableElements = true
   } = options;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!enabled) return;
     const eventTarget = target ?? (typeof window !== "undefined" ? window : null);
     if (!eventTarget) return;
     const handleKeyDown = (event) => {
       const e = event;
-      const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
-      const modifier = isMac ? e.metaKey : e.ctrlKey;
-      if (!modifier) return;
-      if (ignoreEditableElements && typeof document !== "undefined") {
-        const targetEl = e.target || document.activeElement;
-        if (targetEl && targetEl.tagName) {
-          const tagName = targetEl.tagName.toLowerCase();
-          const isInput = tagName === "input" || tagName === "textarea";
-          const isContentEditable = targetEl.isContentEditable || targetEl.getAttribute?.("contenteditable") === "true";
-          if (isInput || isContentEditable) {
-            return;
-          }
-        }
-      }
-      const key = e.key.toLowerCase();
-      if (key === "z" && !e.shiftKey) {
-        if (manager.getState().canUndo) {
-          e.preventDefault();
-          manager.undo();
-        }
-        return;
-      }
-      const isRedoKey = key === "z" && e.shiftKey || !isMac && key === "y" && !e.shiftKey;
-      if (isRedoKey) {
-        if (manager.getState().canRedo) {
-          e.preventDefault();
-          manager.redo();
-        }
+      const action = matchHistoryShortcut(e, { allowInEditable: !ignoreEditableElements });
+      if (action === "undo" && manager.getState().canUndo) {
+        e.preventDefault();
+        manager.undo();
+      } else if (action === "redo" && manager.getState().canRedo) {
+        e.preventDefault();
+        manager.redo();
       }
     };
     eventTarget.addEventListener("keydown", handleKeyDown);
@@ -507,24 +559,24 @@ function useHistoryShortcuts(manager, options = {}) {
 }
 
 // src/hooks/useFileImport.ts
-import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef5, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef6, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
   FileImportController
 } from "@pixerate/editor";
 function useFileImport(editor, options = {}) {
-  const editorRef = useRef5(editor);
+  const editorRef = useRef6(editor);
   editorRef.current = editor;
-  const controller = useMemo2(
+  const controller = useMemo3(
     () => new FileImportController(() => {
       const current = editorRef.current;
       return current && !current.isDestroyed ? current : null;
     }, options),
     []
   );
-  useEffect4(() => {
+  useEffect5(() => {
     controller.setOptions(options);
   });
-  const state = useSyncExternalStore2(controller.subscribe, controller.getState, controller.getState);
+  const state = useSyncExternalStore3(controller.subscribe, controller.getState, controller.getState);
   return {
     ...state,
     accept: controller.accept,
@@ -534,9 +586,9 @@ function useFileImport(editor, options = {}) {
 }
 
 // src/hooks/useAgentToolProvider.ts
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 function useAgentToolProvider(registry, provider) {
-  useEffect5(() => {
+  useEffect6(() => {
     if (!registry || !provider) return;
     return registry.register(provider);
   }, [registry, provider]);
@@ -556,7 +608,7 @@ var EditorContent = ({
 };
 
 // src/components/BubbleMenu.tsx
-import { useEffect as useEffect6, useRef as useRef6, useState as useState3 } from "react";
+import { useEffect as useEffect7, useRef as useRef7, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import {
   BubbleMenuPlugin
@@ -570,12 +622,12 @@ var BubbleMenu = ({
   pluginKey = "bubbleMenu",
   updateDelay
 }) => {
-  const menuEl = useRef6(null);
-  const [mounted, setMounted] = useState3(false);
+  const menuEl = useRef7(null);
+  const [mounted, setMounted] = useState4(false);
   if (!menuEl.current && typeof document !== "undefined") {
     menuEl.current = document.createElement("div");
   }
-  useEffect6(() => {
+  useEffect7(() => {
     if (!editor || !menuEl.current || editor.isDestroyed) {
       return;
     }
@@ -606,7 +658,7 @@ var BubbleMenu = ({
 };
 
 // src/components/TemplateRenderer.tsx
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 import {
   evaluatePromptTokens,
   resolveTemplates
@@ -624,11 +676,11 @@ var TemplateRenderer = ({
   onTemplateClick,
   onVariableClick
 }) => {
-  const displayText = useMemo3(() => {
+  const displayText = useMemo4(() => {
     if (!resolve || templates.length === 0) return content;
     return resolveTemplates(content, templates, { bindings });
   }, [content, templates, resolve, bindings]);
-  const tokens = useMemo3(() => {
+  const tokens = useMemo4(() => {
     return evaluatePromptTokens(displayText, values);
   }, [displayText, values]);
   return /* @__PURE__ */ jsx2("div", { className, children: tokens.map((token, index) => {
@@ -717,7 +769,7 @@ var TemplateRenderer = ({
 };
 
 // src/components/VariableForm.tsx
-import { useId, useMemo as useMemo4, useState as useState4 } from "react";
+import { useId, useMemo as useMemo5, useState as useState5 } from "react";
 import {
   compactVariableValues,
   getVariableFormFields
@@ -733,11 +785,11 @@ var VariableForm = ({
   className = "flex flex-col gap-3 text-sm"
 }) => {
   const idPrefix = useId();
-  const [internal, setInternal] = useState4(
+  const [internal, setInternal] = useState5(
     () => defaultValues ?? {}
   );
   const entered = values ?? internal;
-  const fields = useMemo4(
+  const fields = useMemo5(
     () => getVariableFormFields(content, { templates, bindings }),
     [content, templates, bindings]
   );
@@ -805,11 +857,11 @@ var VariableForm = ({
 };
 
 // src/hooks/useOutline.ts
-import { useMemo as useMemo5, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useMemo as useMemo6, useSyncExternalStore as useSyncExternalStore4 } from "react";
 import { createOutlineStore } from "@pixerate/editor";
 function useOutline(editor) {
-  const store = useMemo5(() => createOutlineStore(editor), [editor]);
-  return useSyncExternalStore3(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const store = useMemo6(() => createOutlineStore(editor), [editor]);
+  return useSyncExternalStore4(store.subscribe, store.getSnapshot, store.getSnapshot);
 }
 
 // src/components/OutlinePanel.tsx
@@ -855,15 +907,17 @@ var OutlinePanel = ({
 
 // src/index.ts
 import {
-  DirtyTracker,
+  DirtyTracker as DirtyTracker2,
   createDirtyTracker,
   defaultIsEqual,
   HistoryManager as HistoryManager2,
-  createHistoryManager as createHistoryManager2
+  createHistoryManager as createHistoryManager2,
+  bindDirtyToHistory as bindDirtyToHistory2,
+  withoutDirty
 } from "@pixerate/editor";
 
 // src/slots.tsx
-import { createContext, useContext, useMemo as useMemo6 } from "react";
+import { createContext, useContext, useMemo as useMemo7 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultSlots = {
   Button: (props) => /* @__PURE__ */ jsx5(
@@ -887,7 +941,7 @@ var defaultSlots = {
 };
 var EditorSlotsContext = createContext(defaultSlots);
 function EditorSlotsProvider({ slots, children }) {
-  const mergedSlots = useMemo6(() => ({ ...defaultSlots, ...slots }), [slots]);
+  const mergedSlots = useMemo7(() => ({ ...defaultSlots, ...slots }), [slots]);
   return /* @__PURE__ */ jsx5(EditorSlotsContext.Provider, { value: mergedSlots, children });
 }
 function useEditorSlots() {
@@ -895,7 +949,7 @@ function useEditorSlots() {
 }
 
 // src/review/useReview.ts
-import { useCallback as useCallback4, useMemo as useMemo7, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo8, useSyncExternalStore as useSyncExternalStore5 } from "react";
 import {
   getCommentStore,
   getTrackChangesStore
@@ -917,23 +971,23 @@ function isCommentStore(value) {
 }
 function useComments(source) {
   const store = isCommentStore(source) ? source : getCommentStore(source);
-  const subscribe = useCallback4(
+  const subscribe = useCallback5(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_COMMENTS;
-  const snapshot = useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
-  return useMemo7(() => ({ ...snapshot, store }), [snapshot, store]);
+  const snapshot = useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
+  return useMemo8(() => ({ ...snapshot, store }), [snapshot, store]);
 }
 function useTrackChanges(editor) {
   const store = getTrackChangesStore(editor ?? null);
-  const subscribe = useCallback4(
+  const subscribe = useCallback5(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_TRACK_CHANGES;
-  const snapshot = useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
-  return useMemo7(() => {
+  const snapshot = useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
+  return useMemo8(() => {
     const run = (fn) => () => {
       if (editor && !editor.isDestroyed) fn(editor);
     };
@@ -953,7 +1007,7 @@ function useTrackChanges(editor) {
 }
 
 // src/review/CommentsPanel.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import {
   formatReviewTime,
   getCommentAuthor
@@ -972,7 +1026,7 @@ var CommentsPanel = ({
   emptyMessage = "No comments yet. Select text and add a comment."
 }) => {
   const { threads, activeThreadId, store } = useComments(storeProp ?? editor);
-  const [showResolved, setShowResolved] = useState5(showResolvedInitial);
+  const [showResolved, setShowResolved] = useState6(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;
@@ -1016,7 +1070,7 @@ var CommentThreadCard = ({
   author,
   formatTime
 }) => {
-  const [draft, setDraft] = useState5("");
+  const [draft, setDraft] = useState6("");
   const isDraft = thread.body === "";
   const quote = thread.anchor?.quote ?? thread.lastQuote ?? "";
   const live = editor && !editor.isDestroyed ? editor : null;
@@ -1126,10 +1180,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 +1228,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",
@@ -1215,9 +1284,10 @@ var CommentButton = ({
 );
 export {
   BubbleMenu,
+  CommandPalette,
   CommentButton,
   CommentsPanel,
-  DirtyTracker,
+  DirtyTracker2 as DirtyTracker,
   EditorContent,
   EditorSlotsProvider,
   FormulaHints,
@@ -1230,10 +1300,13 @@ export {
   SpreadsheetGroupRow,
   TemplateRenderer,
   VariableForm,
+  bindDirtyToHistory2 as bindDirtyToHistory,
   createDirtyTracker,
   createHistoryManager2 as createHistoryManager,
   defaultIsEqual,
   useAgentToolProvider,
+  useCommandPalette,
+  useCommandShortcuts,
   useComments,
   useDismissGuard,
   useEditor2 as useEditor,
@@ -1241,13 +1314,16 @@ export {
   useFileImport,
   useFillHandle,
   useHistory,
+  useHistoryDirty,
   useHistoryShortcuts,
   useImageEditor,
   useNavigationGuard,
   useOutline,
   usePromptEditor,
+  useRegisterCommands,
   useSpreadsheetClipboard,
   useSpreadsheetEditor,
-  useTrackChanges
+  useTrackChanges,
+  withoutDirty
 };
 //# sourceMappingURL=index.js.map