@pixerate/editor-react 0.10.0 → 0.10.2

package/dist/index.d.cts

@@ -11,7 +11,11 @@ export { ImageEditor, ImageEditorProps, UseImageEditorReturn, useImageEditor } f
 import '@pixerate/editor/image-editor';
 
 interface UsePromptEditorProps {
-    /** The initial or controlled content of the editor as plain text */
+    /**
+     * The editor content as plain text. Changes from the parent (e.g. clearing
+     * after submit) are applied to the editor; echoes of the editor's own
+     * updates via `onContentChange` are ignored.
+     */
     content: string;
     /** Callback fired when the editor content changes (returns plain text) */
     onContentChange: (text: string) => void;
@@ -43,7 +47,10 @@ interface UsePromptEditorProps {
     clearSlashCommand?: () => void;
     /** Whether a slash command menu is currently active */
     slashCommandActive?: boolean;
-    /** Callback fired when certain milestones are reached (e.g., used_variable, used_magic) */
+    /**
+     * Callback fired the first time each milestone is reached while the editor
+     * is mounted: `used_variable` ({variable}) and `used_magic` (__instruction__).
+     */
     onMilestone?: (milestone: string) => void;
     /** DOM element ID of the container, used for positioning popovers */
     containerId?: string;
@@ -216,7 +223,7 @@ declare function useSpreadsheetEditor(options?: SpreadsheetControllerOptions): {
     registerDataSource: (ds: SpreadsheetDataSource) => void;
     setPrimaryDataSource: (id: string | undefined) => void;
     recalculateAll: () => void;
-    exportToTsv: () => string;
+    exportToTsv: (range?: CellRange | null) => string;
     importFromTsv: (data: string) => void;
     undo: () => void;
     redo: () => void;

package/dist/index.d.ts

@@ -11,7 +11,11 @@ export { ImageEditor, ImageEditorProps, UseImageEditorReturn, useImageEditor } f
 import '@pixerate/editor/image-editor';
 
 interface UsePromptEditorProps {
-    /** The initial or controlled content of the editor as plain text */
+    /**
+     * The editor content as plain text. Changes from the parent (e.g. clearing
+     * after submit) are applied to the editor; echoes of the editor's own
+     * updates via `onContentChange` are ignored.
+     */
     content: string;
     /** Callback fired when the editor content changes (returns plain text) */
     onContentChange: (text: string) => void;
@@ -43,7 +47,10 @@ interface UsePromptEditorProps {
     clearSlashCommand?: () => void;
     /** Whether a slash command menu is currently active */
     slashCommandActive?: boolean;
-    /** Callback fired when certain milestones are reached (e.g., used_variable, used_magic) */
+    /**
+     * Callback fired the first time each milestone is reached while the editor
+     * is mounted: `used_variable` ({variable}) and `used_magic` (__instruction__).
+     */
     onMilestone?: (milestone: string) => void;
     /** DOM element ID of the container, used for positioning popovers */
     containerId?: string;
@@ -216,7 +223,7 @@ declare function useSpreadsheetEditor(options?: SpreadsheetControllerOptions): {
     registerDataSource: (ds: SpreadsheetDataSource) => void;
     setPrimaryDataSource: (id: string | undefined) => void;
     recalculateAll: () => void;
-    exportToTsv: () => string;
+    exportToTsv: (range?: CellRange | null) => string;
     importFromTsv: (data: string) => void;
     undo: () => void;
     redo: () => void;

package/dist/index.js

@@ -8,18 +8,22 @@ import { useMemo, useEffect, useRef } from "react";
 import { useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
-import { Slice, Fragment, Node as ProsemirrorNode } from "@tiptap/pm/model";
+import { Slice } from "@tiptap/pm/model";
 import {
   GradientText,
   TemplateSuggestions,
   LoadingNode,
   plainTextToTipTapHtml,
-  getEditorText
+  plainTextToSlice,
+  getEditorText,
+  tokenizePrompt
 } from "@pixerate/editor";
 var DEFAULT_TEMPLATES = [];
 var DEFAULT_COLOR_MAP = /* @__PURE__ */ new Map([
   ["default", { from: "#f43f5e", to: "#8b5cf6" }]
 ]);
+var DEFAULT_CLASS_NAME = "w-full border border-input rounded-md p-3 font-mono text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-primary whitespace-pre-wrap break-words";
+var normalizeNewlines = (text) => text.replace(/\r\n?/g, "\n");
 function usePromptEditor({
   content,
   onContentChange,
@@ -60,6 +64,7 @@ function usePromptEditor({
   const templateKey = useMemo(() => {
     return (templates || []).map((t) => `${t.id || t.name}:${t.latestVersion || ""}`).sort().join(",");
   }, [templates]);
+  const colorMapKey = userColorMap ? JSON.stringify(Array.from(userColorMap.entries())) : "";
   const resolvedColorMap = useMemo(() => {
     if (userColorMap) return userColorMap;
     const map = /* @__PURE__ */ new Map();
@@ -67,7 +72,9 @@ function usePromptEditor({
       map.set(t.name, { from: "#f43f5e", to: "#8b5cf6" });
     });
     return map.size > 0 ? map : DEFAULT_COLOR_MAP;
-  }, [userColorMap, templateKey]);
+  }, [colorMapKey, templateKey]);
+  const jsonVariablesKey = (jsonVariables || []).join("\0");
+  const reachedMilestonesRef = useRef(/* @__PURE__ */ new Set());
   const StarterKitExt = StarterKit?.configure ? StarterKit : StarterKit?.default?.configure ? StarterKit?.default : StarterKit;
   const PlaceholderExt = Placeholder?.configure ? Placeholder : Placeholder?.default?.configure ? Placeholder?.default : Placeholder;
   const editor = useEditor(
@@ -97,11 +104,13 @@ function usePromptEditor({
         const plainText = getEditorText(ed);
         onContentChangeRef.current?.(plainText);
         if (onMilestoneRef.current) {
-          if (plainText.match(/(?<!\{)\{([^{}]+)\}(?!\})/g)) {
-            onMilestoneRef.current("used_variable");
-          }
-          if (plainText.match(/__([^_]+)__/g)) {
-            onMilestoneRef.current("used_magic");
+          const reached = reachedMilestonesRef.current;
+          for (const token of tokenizePrompt(plainText)) {
+            const milestone = token.type === "variable" ? "used_variable" : token.type === "instruction" ? "used_magic" : null;
+            if (milestone && !reached.has(milestone)) {
+              reached.add(milestone);
+              onMilestoneRef.current(milestone);
+            }
           }
         }
         const { state, view } = ed;
@@ -139,7 +148,7 @@ function usePromptEditor({
       },
       editorProps: {
         attributes: {
-          class: className || "w-full border border-input rounded-md p-3 font-mono text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-primary whitespace-pre-wrap break-words",
+          class: className || DEFAULT_CLASS_NAME,
           role: "textbox",
           "aria-label": "Prompt editor"
         },
@@ -171,51 +180,61 @@ function usePromptEditor({
           event.preventDefault();
           const schema = view.state.schema;
           if (!schema) return false;
-          const blocks = text.replace(/\r\n?/g, "\n").split("\n");
-          const nodes = [];
-          blocks.forEach((line) => {
-            const nodeJson = { type: "paragraph" };
-            if (line.length > 0) {
-              nodeJson.content = [{ type: "text", text: line }];
-            }
-            try {
-              const node = ProsemirrorNode.fromJSON(schema, nodeJson);
-              nodes.push(node);
-            } catch {
-            }
-          });
-          const parsedSlice = Slice.maxOpen(Fragment.fromArray(nodes));
-          const tr = view.state.tr.replaceSelection(parsedSlice);
-          view.dispatch(tr);
+          view.dispatch(
+            view.state.tr.replaceSelection(plainTextToSlice(text, schema))
+          );
           return true;
         },
         clipboardTextParser: (text, context, _plain, view) => {
           const schema = context?.doc?.type?.schema || context?.schema || view?.state?.schema;
           if (!schema) return Slice.empty;
-          const blocks = text.replace(/\r\n?/g, "\n").split("\n");
-          const nodes = [];
-          blocks.forEach((line) => {
-            const nodeJson = { type: "paragraph" };
-            if (line.length > 0) {
-              nodeJson.content = [{ type: "text", text: line }];
-            }
-            try {
-              const node = ProsemirrorNode.fromJSON(schema, nodeJson);
-              nodes.push(node);
-            } catch {
-            }
-          });
-          return Slice.maxOpen(Fragment.fromArray(nodes));
+          return plainTextToSlice(text, schema);
         }
       }
     },
-    [resolvedColorMap, templateKey, isEditing, placeholder, speed]
+    // Only options baked into extensions recreate the editor; editable state,
+    // placeholder, class names and content are applied to the live instance.
+    [resolvedColorMap, templateKey, speed, jsonVariablesKey]
   );
   useEffect(() => {
     if (editor && !editor.isDestroyed) {
       editor.setEditable(isEditing);
     }
   }, [editor, isEditing]);
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+    if (normalizeNewlines(content) === getEditorText(editor)) return;
+    const { from, to } = editor.state.selection;
+    editor.commands.setContent(plainTextToTipTapHtml(content), false);
+    const max = editor.state.doc.content.size;
+    editor.commands.setTextSelection({
+      from: Math.min(from, max),
+      to: Math.min(to, max)
+    });
+  }, [editor, content]);
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+    editor.setOptions({
+      editorProps: {
+        ...editor.options.editorProps,
+        attributes: {
+          ...editor.options.editorProps.attributes,
+          class: className || DEFAULT_CLASS_NAME
+        }
+      }
+    });
+  }, [editor, className]);
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+    const placeholderExt = editor.extensionManager.extensions.find(
+      (ext) => ext.name === "placeholder"
+    );
+    if (!placeholderExt || placeholderExt.options.placeholder === placeholder) {
+      return;
+    }
+    placeholderExt.options.placeholder = placeholder;
+    editor.view.dispatch(editor.state.tr);
+  }, [editor, placeholder]);
   return editor;
 }
 
@@ -518,7 +537,7 @@ var BubbleMenu = ({
 // src/components/TemplateRenderer.tsx
 import { useMemo as useMemo3 } from "react";
 import {
-  tokenizePrompt,
+  tokenizePrompt as tokenizePrompt2,
   resolveTemplates
 } from "@pixerate/editor";
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -536,7 +555,7 @@ var TemplateRenderer = ({
     return resolveTemplates(content, templates);
   }, [content, templates, resolve]);
   const tokens = useMemo3(() => {
-    return tokenizePrompt(displayText);
+    return tokenizePrompt2(displayText);
   }, [displayText]);
   return /* @__PURE__ */ jsx2("div", { className, children: tokens.map((token, index) => {
     if (token.type === "template") {
@@ -597,41 +616,37 @@ import {
 } from "@pixerate/editor";
 
 // src/spreadsheet/useSpreadsheetEditor.ts
-import { useState as useState4, useMemo as useMemo4, useCallback as useCallback4 } from "react";
+import { useState as useState4, useRef as useRef5, useCallback as useCallback4 } from "react";
 import {
   SpreadsheetController
 } from "@pixerate/editor";
 function useSpreadsheetEditor(options = {}) {
-  const [doc, setDoc] = useState4(() => ({
-    id: options.document?.id || `sheet_${Date.now()}`,
-    name: options.document?.name || "Sheet 1",
-    columns: options.document?.columns || [],
-    rows: options.document?.rows || [],
-    cells: options.document?.cells || {},
-    createdAt: options.document?.createdAt || Date.now(),
-    updatedAt: options.document?.updatedAt || Date.now()
-  }));
-  const [activeCell, setActiveCell] = useState4(null);
-  const [selectedRange, setSelectedRange] = useState4(null);
-  const [editingCell, setEditingCell] = useState4(null);
-  const [draftValue, setDraftValue] = useState4("");
-  const controller = useMemo4(() => {
-    return new SpreadsheetController({
+  const optionsRef = useRef5(options);
+  optionsRef.current = options;
+  const settersRef = useRef5({});
+  const [controller] = useState4(
+    () => new SpreadsheetController({
       ...options,
       onDocumentChange: (updated) => {
-        setDoc({ ...updated });
-        options.onDocumentChange?.(updated);
+        settersRef.current.setDoc?.({ ...updated });
+        optionsRef.current.onDocumentChange?.(updated);
       },
       onSelectionChange: (active, range) => {
-        setActiveCell(active);
-        setSelectedRange(range);
-        options.onSelectionChange?.(active, range);
+        settersRef.current.setActiveCell?.(active);
+        settersRef.current.setSelectedRange?.(range);
+        optionsRef.current.onSelectionChange?.(active, range);
       },
       onCellCommit: (rowId, colId, raw, value) => {
-        options.onCellCommit?.(rowId, colId, raw, value);
+        optionsRef.current.onCellCommit?.(rowId, colId, raw, value);
       }
-    });
-  }, []);
+    })
+  );
+  const [doc, setDoc] = useState4(() => ({ ...controller.document }));
+  const [activeCell, setActiveCell] = useState4(controller.activeCell);
+  const [selectedRange, setSelectedRange] = useState4(controller.selectedRange);
+  const [editingCell, setEditingCell] = useState4(null);
+  const [draftValue, setDraftValue] = useState4("");
+  settersRef.current = { setDoc, setActiveCell, setSelectedRange };
   const setCellValue = useCallback4((rowId, colId, raw) => {
     controller.setCellValue(rowId, colId, raw);
     setDoc({ ...controller.document });
@@ -749,7 +764,7 @@ function useSpreadsheetEditor(options = {}) {
     registerDataSource,
     setPrimaryDataSource,
     recalculateAll,
-    exportToTsv: () => controller.exportToTsv(),
+    exportToTsv: (range) => controller.exportToTsv(range),
     importFromTsv: (data) => {
       controller.importFromTsv(data);
       setDoc({ ...controller.document });
@@ -760,7 +775,7 @@ function useSpreadsheetEditor(options = {}) {
 }
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-import { useRef as useRef5, useState as useState5, useMemo as useMemo5, useEffect as useEffect5, useCallback as useCallback5 } from "react";
+import { useRef as useRef6, useState as useState5, useMemo as useMemo4, useEffect as useEffect5, useCallback as useCallback5 } from "react";
 import {
   indexToColName
 } from "@pixerate/editor";
@@ -775,23 +790,42 @@ var SpreadsheetEditor = ({
 }) => {
   const defaultState = useSpreadsheetEditor();
   const state = externalState || defaultState;
-  const gridRef = useRef5(null);
+  const gridRef = useRef6(null);
   const [resizingColId, setResizingColId] = useState5(null);
   const [hoveredColId, setHoveredColId] = useState5(null);
   const [resizeStartX, setResizeStartX] = useState5(0);
   const [resizeStartWidth, setResizeStartWidth] = useState5(0);
-  const activeRawValue = useMemo5(() => {
+  const activeRawValue = useMemo4(() => {
     if (!state.activeCell) return "";
     const row = state.document.rows[state.activeCell.row];
     const col = state.document.columns[state.activeCell.col];
     if (!row || !col) return "";
     return state.getCell(row.id, col.id).raw;
   }, [state.activeCell, state.document]);
-  const coordLabel = useMemo5(() => {
+  const coordLabel = useMemo4(() => {
     if (!state.activeCell) return "--";
     const colName = indexToColName(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
+  const [formulaDraft, setFormulaDraft] = useState5(null);
+  const activeColumn = state.activeCell ? state.document.columns[state.activeCell.col] : void 0;
+  const formulaBarReadOnly = readOnly || !state.activeCell || !!activeColumn?.readOnly;
+  useEffect5(() => {
+    setFormulaDraft(null);
+  }, [state.activeCell?.row, state.activeCell?.col]);
+  const commitFormulaBar = () => {
+    if (state.editingCell) {
+      state.commitEditing();
+      return;
+    }
+    if (formulaDraft === null || !state.activeCell) return;
+    const row = state.document.rows[state.activeCell.row];
+    const col = state.document.columns[state.activeCell.col];
+    if (row && col && !formulaBarReadOnly && formulaDraft !== activeRawValue) {
+      state.setCellValue(row.id, col.id, formulaDraft);
+    }
+    setFormulaDraft(null);
+  };
   const handleCellClick = useCallback5((rIdx, cIdx, e) => {
     if (state.editingCell && (state.editingCell.row !== rIdx || state.editingCell.col !== cIdx)) {
       state.commitEditing();
@@ -850,16 +884,19 @@ var SpreadsheetEditor = ({
         e.preventDefault();
         state.setCellValue(row.id, col.id, "");
       }
-    } else if ((e.metaKey || e.ctrlKey) && e.key === "z") {
+    } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") {
       e.preventDefault();
       if (e.shiftKey) {
         state.redo();
       } else {
         state.undo();
       }
-    } else if ((e.metaKey || e.ctrlKey) && e.key === "c") {
+    } else if (e.ctrlKey && !e.metaKey && e.key.toLowerCase() === "y") {
       e.preventDefault();
-      const tsv = state.exportToTsv();
+      state.redo();
+    } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "c") {
+      e.preventDefault();
+      const tsv = state.exportToTsv(state.selectedRange);
       navigator.clipboard?.writeText(tsv);
     } else if (!readOnly && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
       const col = state.document.columns[state.activeCell.col];
@@ -868,6 +905,10 @@ var SpreadsheetEditor = ({
       }
     }
   }, [readOnly, state]);
+  const stateRef = useRef6(state);
+  stateRef.current = state;
+  const onColumnResizeRef = useRef6(onColumnResize);
+  onColumnResizeRef.current = onColumnResize;
   useEffect5(() => {
     if (!resizingColId) return;
     if (typeof document !== "undefined") {
@@ -886,7 +927,7 @@ var SpreadsheetEditor = ({
       if (rafId === null) {
         rafId = requestAnimationFrame(() => {
           rafId = null;
-          state.setColumnWidth(resizingColId, pendingWidth);
+          stateRef.current.setColumnWidth(resizingColId, pendingWidth);
         });
       }
     };
@@ -896,11 +937,8 @@ var SpreadsheetEditor = ({
         rafId = null;
       }
       if (hasDragged) {
-        state.setColumnWidth(resizingColId, pendingWidth);
-        const col = state.document.columns.find((c) => c.id === resizingColId);
-        if (col && onColumnResize) {
-          onColumnResize(col.id, col.width || pendingWidth);
-        }
+        stateRef.current.setColumnWidth(resizingColId, pendingWidth);
+        onColumnResizeRef.current?.(resizingColId, pendingWidth);
       }
       setResizingColId(null);
       if (typeof document !== "undefined") {
@@ -921,7 +959,7 @@ var SpreadsheetEditor = ({
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [resizingColId, resizeStartX, resizeStartWidth, state, onColumnResize]);
+  }, [resizingColId, resizeStartX, resizeStartWidth]);
   const measureElementContentWidth = useCallback5((el, container) => {
     if (typeof document === "undefined") return 0;
     let maxW = el.scrollWidth || 0;
@@ -1053,25 +1091,29 @@ var SpreadsheetEditor = ({
               type: "text",
               className: "flex-1 bg-transparent px-2 py-0.5 outline-none font-sans text-xs text-foreground placeholder:text-muted-foreground/60 focus:bg-background focus:ring-1 focus:ring-primary rounded",
               placeholder: "Enter a value or formula (e.g. =SUM(A1:A5))",
-              value: state.editingCell ? state.draftValue : activeRawValue,
+              "aria-label": "Formula bar",
+              readOnly: formulaBarReadOnly,
+              value: state.editingCell ? state.draftValue : formulaDraft ?? activeRawValue,
+              onFocus: () => {
+                if (!state.editingCell) setFormulaDraft(activeRawValue);
+              },
               onChange: (e) => {
-                if (state.activeCell) {
+                if (state.editingCell) {
                   state.setDraftValue(e.target.value);
+                } else if (state.activeCell) {
+                  setFormulaDraft(e.target.value);
                 }
               },
+              onBlur: () => commitFormulaBar(),
               onKeyDown: (e) => {
+                e.stopPropagation();
                 if (e.key === "Enter") {
                   e.preventDefault();
-                  if (state.activeCell) {
-                    const row = state.document.rows[state.activeCell.row];
-                    const col = state.document.columns[state.activeCell.col];
-                    if (row && col) {
-                      state.setCellValue(row.id, col.id, e.target.value);
-                    }
-                  }
+                  commitFormulaBar();
                 } else if (e.key === "Escape") {
                   e.preventDefault();
-                  state.cancelEditing();
+                  setFormulaDraft(null);
+                  if (state.editingCell) state.cancelEditing();
                 }
               }
             }
@@ -1197,7 +1239,7 @@ var SpreadsheetEditor = ({
 };
 
 // src/slots.tsx
-import { createContext, useContext, useMemo as useMemo6 } from "react";
+import { createContext, useContext, useMemo as useMemo5 } from "react";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultSlots = {
   Button: (props) => /* @__PURE__ */ jsx4(
@@ -1221,7 +1263,7 @@ var defaultSlots = {
 };
 var EditorSlotsContext = createContext(defaultSlots);
 function EditorSlotsProvider({ slots, children }) {
-  const mergedSlots = useMemo6(() => ({ ...defaultSlots, ...slots }), [slots]);
+  const mergedSlots = useMemo5(() => ({ ...defaultSlots, ...slots }), [slots]);
   return /* @__PURE__ */ jsx4(EditorSlotsContext.Provider, { value: mergedSlots, children });
 }
 function useEditorSlots() {