@pixerate/editor-react 0.10.0 → 0.10.1

package/dist/index.cjs

@@ -64,6 +64,8 @@ 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,
@@ -104,6 +106,7 @@ function usePromptEditor({
   const templateKey = (0, import_react.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 = (0, import_react.useMemo)(() => {
     if (userColorMap) return userColorMap;
     const map = /* @__PURE__ */ new Map();
@@ -111,7 +114,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 = (0, import_react.useRef)(/* @__PURE__ */ new Set());
   const StarterKitExt = import_starter_kit.default?.configure ? import_starter_kit.default : import_starter_kit.default?.default?.configure ? import_starter_kit.default?.default : import_starter_kit.default;
   const PlaceholderExt = import_extension_placeholder.default?.configure ? import_extension_placeholder.default : import_extension_placeholder.default?.default?.configure ? import_extension_placeholder.default?.default : import_extension_placeholder.default;
   const editor = (0, import_react2.useEditor)(
@@ -141,11 +146,13 @@ function usePromptEditor({
         const plainText = (0, import_editor.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 (0, import_editor.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;
@@ -183,7 +190,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"
         },
@@ -215,51 +222,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 = import_model.Node.fromJSON(schema, nodeJson);
-              nodes.push(node);
-            } catch {
-            }
-          });
-          const parsedSlice = import_model.Slice.maxOpen(import_model.Fragment.fromArray(nodes));
-          const tr = view.state.tr.replaceSelection(parsedSlice);
-          view.dispatch(tr);
+          view.dispatch(
+            view.state.tr.replaceSelection((0, import_editor.plainTextToSlice)(text, schema))
+          );
           return true;
         },
         clipboardTextParser: (text, context, _plain, view) => {
           const schema = context?.doc?.type?.schema || context?.schema || view?.state?.schema;
           if (!schema) return import_model.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 = import_model.Node.fromJSON(schema, nodeJson);
-              nodes.push(node);
-            } catch {
-            }
-          });
-          return import_model.Slice.maxOpen(import_model.Fragment.fromArray(nodes));
+          return (0, import_editor.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]
   );
   (0, import_react.useEffect)(() => {
     if (editor && !editor.isDestroyed) {
       editor.setEditable(isEditing);
     }
   }, [editor, isEditing]);
+  (0, import_react.useEffect)(() => {
+    if (!editor || editor.isDestroyed) return;
+    if (normalizeNewlines(content) === (0, import_editor.getEditorText)(editor)) return;
+    const { from, to } = editor.state.selection;
+    editor.commands.setContent((0, import_editor.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]);
+  (0, import_react.useEffect)(() => {
+    if (!editor || editor.isDestroyed) return;
+    editor.setOptions({
+      editorProps: {
+        ...editor.options.editorProps,
+        attributes: {
+          ...editor.options.editorProps.attributes,
+          class: className || DEFAULT_CLASS_NAME
+        }
+      }
+    });
+  }, [editor, className]);
+  (0, import_react.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;
 }