@replohq/sandbox-runtime 0.1.0

package/select-mode/symbolicate.js

@@ -0,0 +1,200 @@
+import { isNullish } from "../_vendor/replo-utils/lib/misc.mjs";
+const SYMBOLICATE_ENDPOINT = "/__nextjs_original-stack-frames";
+function isLikelyCompiledLocation(location) {
+  if (!location) {
+    return false;
+  }
+  const filePath = location.filePath;
+  return filePath.includes(".next") || filePath.includes("/chunks/") || filePath.includes("webpack-internal:") || filePath.includes("turbopack:") || filePath.endsWith(".js") || filePath.startsWith("about:");
+}
+function isDependencyOrInternalPath(filePath) {
+  return filePath.includes("node_modules") || filePath.includes("/dist/compiled/") || filePath.startsWith("about:");
+}
+function isServerChunk(filePath) {
+  return filePath.startsWith("about://React/Server") || filePath.includes("/server/chunks/") || filePath.includes(".next-dev/dev/server/") || filePath.includes(".next/server/");
+}
+const NEXT_STATIC_PATH_PATTERN = /\/_next(\/static\/.+)/;
+function getNextDistDir() {
+  try {
+    const distDir = process.env.__NEXT_DIST_DIR;
+    return typeof distDir === "string" && distDir.length > 0 ? distDir : null;
+  } catch {
+    return null;
+  }
+}
+function rewriteBrowserChunkUrlToDistPath(filePath) {
+  if (!/^https?:\/\//.test(filePath)) {
+    return filePath;
+  }
+  const distDir = getNextDistDir();
+  if (!distDir) {
+    return filePath;
+  }
+  let url;
+  try {
+    url = new URL(filePath);
+  } catch {
+    return filePath;
+  }
+  const staticPathMatch = NEXT_STATIC_PATH_PATTERN.exec(url.pathname);
+  if (!staticPathMatch?.[1]) {
+    return filePath;
+  }
+  const normalizedDistDir = distDir.replace(/\\/g, "/").replace(/\/$/, "");
+  return `file://${normalizedDistDir}${staticPathMatch[1]}${url.search}`;
+}
+function normalizeFilePathForSymbolicator(filePath) {
+  let normalized = filePath;
+  if (normalized.startsWith("about://React/Server/")) {
+    normalized = normalized.slice("about://React/Server/".length);
+  }
+  normalized = normalized.replace(/\?\d+$/, "");
+  return rewriteBrowserChunkUrlToDistPath(normalized);
+}
+function toNextStackFrame(location) {
+  return {
+    file: normalizeFilePathForSymbolicator(location.filePath),
+    methodName: location.componentName ?? null,
+    arguments: [],
+    line1: location.lineNumber,
+    column1: location.columnNumber ?? null
+  };
+}
+function extractResolvedFrame(entry) {
+  if (!entry || entry.status !== "fulfilled") {
+    return null;
+  }
+  return entry.value?.originalStackFrame ?? null;
+}
+async function postFrames({
+  frames,
+  isServer
+}) {
+  if (frames.length === 0) {
+    return [];
+  }
+  try {
+    const response = await fetch(SYMBOLICATE_ENDPOINT, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        frames,
+        isServer,
+        isEdgeServer: false,
+        isAppDirectory: true
+      })
+    });
+    if (!response.ok) {
+      console.log("[selectMode] symbolicate: endpoint returned non-OK status", {
+        status: response.status,
+        isServer
+      });
+      return frames.map(() => null);
+    }
+    const parsed = await response.json();
+    if (Array.isArray(parsed)) {
+      return parsed;
+    }
+    return frames.map(() => null);
+  } catch (error) {
+    console.log("[selectMode] symbolicate: fetch failed", {
+      isServer,
+      error
+    });
+    return frames.map(() => null);
+  }
+}
+async function symbolicateFrames(frames) {
+  const serverIndices = [];
+  const clientIndices = [];
+  for (const [index, frame] of frames.entries()) {
+    if (frame.file && isServerChunk(frame.file)) {
+      serverIndices.push(index);
+    } else {
+      clientIndices.push(index);
+    }
+  }
+  const [serverResults, clientResults] = await Promise.all([
+    postFrames({
+      frames: serverIndices.map((index) => frames[index]),
+      isServer: true
+    }),
+    postFrames({
+      frames: clientIndices.map((index) => frames[index]),
+      isServer: false
+    })
+  ]);
+  const merged = frames.map(() => null);
+  for (const [position, index] of serverIndices.entries()) {
+    merged[index] = serverResults[position] ?? null;
+  }
+  for (const [position, index] of clientIndices.entries()) {
+    merged[index] = clientResults[position] ?? null;
+  }
+  return merged;
+}
+function applyResolved({
+  original,
+  frame
+}) {
+  if (!frame || !frame.file || isNullish(frame.line1)) {
+    return original;
+  }
+  return {
+    filePath: frame.file,
+    lineNumber: frame.line1,
+    columnNumber: frame.column1 ?? void 0,
+    componentName: original.componentName
+  };
+}
+function findUserSourceLocation(fiberChain) {
+  return fiberChain.find((entry) => {
+    return !isLikelyCompiledLocation(entry.sourceLocation) && !isDependencyOrInternalPath(entry.sourceLocation.filePath);
+  })?.sourceLocation;
+}
+async function symbolicateSelectedElement(selectedElement) {
+  const targets = [];
+  const fiberChain = selectedElement.fiberChain.map((entry) => ({ ...entry }));
+  for (const entry of fiberChain) {
+    if (isLikelyCompiledLocation(entry.sourceLocation)) {
+      targets.push({
+        location: entry.sourceLocation,
+        apply: (next) => {
+          entry.sourceLocation = next;
+        }
+      });
+    }
+  }
+  let sourceLocation = selectedElement.sourceLocation;
+  if (fiberChain.length === 0 && sourceLocation && isLikelyCompiledLocation(sourceLocation)) {
+    const captured = sourceLocation;
+    targets.push({
+      location: captured,
+      apply: (next) => {
+        sourceLocation = next;
+      }
+    });
+  }
+  if (targets.length === 0) {
+    return selectedElement;
+  }
+  const resolved = await symbolicateFrames(
+    targets.map((target) => toNextStackFrame(target.location))
+  );
+  for (const [index, target] of targets.entries()) {
+    const frame = extractResolvedFrame(resolved[index] ?? null);
+    target.apply(applyResolved({ original: target.location, frame }));
+  }
+  if (fiberChain.length > 0) {
+    sourceLocation = findUserSourceLocation(fiberChain) ?? fiberChain[0].sourceLocation;
+  }
+  return {
+    ...selectedElement,
+    sourceLocation,
+    fiberChain
+  };
+}
+export {
+  symbolicateSelectedElement
+};
+//# sourceMappingURL=symbolicate.js.map

package/select-mode/symbolicate.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../select-mode/symbolicate.ts"],
+  "sourcesContent": ["import type {\n  SelectedElement,\n  SelectModeFiberChainEntry,\n  SelectModeSourceLocation,\n} from \"schemas/generated/selectMode\";\n\nimport { isNullish } from \"replo-utils/lib/misc\";\n\n/**\n * Runtime source-attribution for React 19 + Next.js Turbopack.\n *\n * React 19 removed `fiber._debugSource`; the only per-element source pointer\n * left is `fiber._debugStack`, whose `.stack` references compiled SSR/client\n * chunks. We POST those compiled frames to Next.js's dev-only\n * `/__nextjs_original-stack-frames` endpoint, which symbolicates them through\n * Turbopack's in-memory source maps \u2014 the same mechanism the Next error\n * overlay uses (see `next/dist/server/dev/middleware-turbopack.js`).\n */\n\ntype NextStackFrame = {\n  file: string | null;\n  methodName: string | null;\n  arguments: string[];\n  // Next.js's `/__nextjs_original-stack-frames` reads these as `line1`/`column1`\n  // (1-based) in the request body \u2014 same field names it uses in the response.\n  // Sending `lineNumber`/`column` is silently dropped on the server side.\n  line1: number | null;\n  column1: number | null;\n};\n\ntype ResolvedFrame = {\n  file: string | null;\n  line1?: number | null;\n  column1?: number | null;\n  methodName?: string | null;\n  ignored?: boolean;\n  arguments?: string[];\n};\n\ntype OriginalStackFrameResponse = {\n  originalStackFrame: ResolvedFrame | null;\n  originalCodeFrame: string | null;\n};\n\ntype SettledResponseEntry =\n  | { status: \"fulfilled\"; value: OriginalStackFrameResponse }\n  | { status: \"rejected\"; reason: string };\n\nconst SYMBOLICATE_ENDPOINT = \"/__nextjs_original-stack-frames\";\n\nfunction isLikelyCompiledLocation(\n  location: SelectModeSourceLocation | undefined,\n): boolean {\n  if (!location) {\n    return false;\n  }\n  const filePath = location.filePath;\n  return (\n    filePath.includes(\".next\") ||\n    filePath.includes(\"/chunks/\") ||\n    filePath.includes(\"webpack-internal:\") ||\n    filePath.includes(\"turbopack:\") ||\n    filePath.endsWith(\".js\") ||\n    filePath.startsWith(\"about:\")\n  );\n}\n\n// A resolved source that lives in a dependency or framework internal is never\n// the user's own code. The canonical case is Next's `<Image>`, whose rendered\n// `<img>` symbolicates to\n// `.../node_modules/next/src/client/image-component.tsx` \u2014 useless as an edit\n// target. We skip these and keep walking the ownership chain toward the user's\n// call site. See (Noah, 2026-07-09, REPL-29098).\nfunction isDependencyOrInternalPath(filePath: string): boolean {\n  return (\n    filePath.includes(\"node_modules\") ||\n    filePath.includes(\"/dist/compiled/\") ||\n    filePath.startsWith(\"about:\")\n  );\n}\n\n// React 19 fibers for server-rendered (RSC) elements carry a `_debugStack`\n// whose top frame points at an SSR chunk (e.g. `about://React/Server/file://\n// .../.next-dev/.../server/chunks/ssr/*.js`). The endpoint resolves those\n// against the server bundler context; client chunks go through the client\n// bundler context. Mis-routing returns the compiled chunk unchanged.\nfunction isServerChunk(filePath: string): boolean {\n  return (\n    filePath.startsWith(\"about://React/Server\") ||\n    filePath.includes(\"/server/chunks/\") ||\n    filePath.includes(\".next-dev/dev/server/\") ||\n    filePath.includes(\".next/server/\")\n  );\n}\n\n// Matches the `/_next/static/...` tail of a browser chunk URL's pathname.\n// Capture group 1 is the `/static/...` segment that lives under the dist dir\n// on disk. Mirrors `regexNextStatic` in\n// `next/dist/server/lib/parse-stack.js`.\nconst NEXT_STATIC_PATH_PATTERN = /\\/_next(\\/static\\/.+)/;\n\n// Absolute path to the dev dist dir (e.g.\n// `/workspace/dev/website/.next-dev/dev`). Next.js define-injects this into\n// dev client bundles (see the `__NEXT_DIST_DIR` define in\n// `next/dist/build/define-env.ts`); because the sandbox runtime is transpiled into the\n// host Next app, the replacement reaches this reference too. Outside a Next\n// dev client build the value is absent, so we bail and leave the URL as-is.\nfunction getNextDistDir(): string | null {\n  try {\n    const distDir = process.env.__NEXT_DIST_DIR;\n    return typeof distDir === \"string\" && distDir.length > 0 ? distDir : null;\n  } catch {\n    return null;\n  }\n}\n\n// Turbopack's `/__nextjs_original-stack-frames` backend only resolves source\n// maps for `file://` (or bare filesystem) paths \u2014 it rejects browser chunk\n// URLs (`https://host/_next/static/chunks/X.js`) with \"Unknown url scheme\",\n// which is why client-component frames never symbolicated in the sandbox\n// (everything is served over https) even though it worked for RSC frames that\n// already carry filesystem paths. Rewrite the URL to the on-disk dist path the\n// same way Next's own server-side stack parser does, so the endpoint can map\n// it back to the user's `.tsx`.\nfunction rewriteBrowserChunkUrlToDistPath(filePath: string): string {\n  if (!/^https?:\\/\\//.test(filePath)) {\n    return filePath;\n  }\n  const distDir = getNextDistDir();\n  if (!distDir) {\n    return filePath;\n  }\n  let url: URL;\n  try {\n    url = new URL(filePath);\n  } catch {\n    return filePath;\n  }\n  const staticPathMatch = NEXT_STATIC_PATH_PATTERN.exec(url.pathname);\n  if (!staticPathMatch?.[1]) {\n    return filePath;\n  }\n  const normalizedDistDir = distDir.replace(/\\\\/g, \"/\").replace(/\\/$/, \"\");\n  return `file://${normalizedDistDir}${staticPathMatch[1]}${url.search}`;\n}\n\n// React 19's `_debugStack.stack` for RSC components wraps the SSR chunk URL\n// in an `about://React/Server/` prefix and appends a `?<digits>` cache-buster\n// (e.g. `about://React/Server/file:///.../[root-of-the-server]__abc._.js?21`).\n// Turbopack's source-map lookup matches against the bare chunk URL; with\n// either decoration in place it returns the compiled chunk unchanged. Client\n// components instead carry a plain browser chunk URL, which Turbopack rejects\n// outright unless rewritten to its on-disk `file://` path.\nfunction normalizeFilePathForSymbolicator(filePath: string): string {\n  let normalized = filePath;\n  if (normalized.startsWith(\"about://React/Server/\")) {\n    normalized = normalized.slice(\"about://React/Server/\".length);\n  }\n  normalized = normalized.replace(/\\?\\d+$/, \"\");\n  return rewriteBrowserChunkUrlToDistPath(normalized);\n}\n\nfunction toNextStackFrame(location: SelectModeSourceLocation): NextStackFrame {\n  return {\n    file: normalizeFilePathForSymbolicator(location.filePath),\n    methodName: location.componentName ?? null,\n    arguments: [],\n    line1: location.lineNumber,\n    column1: location.columnNumber ?? null,\n  };\n}\n\nfunction extractResolvedFrame(\n  entry: SettledResponseEntry | null,\n): ResolvedFrame | null {\n  if (!entry || entry.status !== \"fulfilled\") {\n    return null;\n  }\n  return entry.value?.originalStackFrame ?? null;\n}\n\nasync function postFrames({\n  frames,\n  isServer,\n}: {\n  frames: NextStackFrame[];\n  isServer: boolean;\n}): Promise<(SettledResponseEntry | null)[]> {\n  if (frames.length === 0) {\n    return [];\n  }\n  try {\n    const response = await fetch(SYMBOLICATE_ENDPOINT, {\n      method: \"POST\",\n      headers: { \"content-type\": \"application/json\" },\n      body: JSON.stringify({\n        frames,\n        isServer,\n        isEdgeServer: false,\n        isAppDirectory: true,\n      }),\n    });\n    if (!response.ok) {\n      console.log(\"[selectMode] symbolicate: endpoint returned non-OK status\", {\n        status: response.status,\n        isServer,\n      });\n      return frames.map(() => null);\n    }\n    const parsed: unknown = await response.json();\n    if (Array.isArray(parsed)) {\n      // Promise.allSettled-shaped entries; see\n      // node_modules/next/dist/server/dev/middleware-turbopack.js.\n      // Legacy cast - the runtime shape isn't exported as a type.\n      // eslint-disable-next-line replo/no-as-cast\n      return parsed as (SettledResponseEntry | null)[];\n    }\n    return frames.map(() => null);\n  } catch (error) {\n    console.log(\"[selectMode] symbolicate: fetch failed\", {\n      isServer,\n      error,\n    });\n    return frames.map(() => null);\n  }\n}\n\nasync function symbolicateFrames(\n  frames: NextStackFrame[],\n): Promise<(SettledResponseEntry | null)[]> {\n  const serverIndices: number[] = [];\n  const clientIndices: number[] = [];\n  for (const [index, frame] of frames.entries()) {\n    if (frame.file && isServerChunk(frame.file)) {\n      serverIndices.push(index);\n    } else {\n      clientIndices.push(index);\n    }\n  }\n\n  const [serverResults, clientResults] = await Promise.all([\n    postFrames({\n      frames: serverIndices.map((index) => frames[index]!),\n      isServer: true,\n    }),\n    postFrames({\n      frames: clientIndices.map((index) => frames[index]!),\n      isServer: false,\n    }),\n  ]);\n\n  const merged: (SettledResponseEntry | null)[] = frames.map(() => null);\n  for (const [position, index] of serverIndices.entries()) {\n    merged[index] = serverResults[position] ?? null;\n  }\n  for (const [position, index] of clientIndices.entries()) {\n    merged[index] = clientResults[position] ?? null;\n  }\n  return merged;\n}\n\nfunction applyResolved({\n  original,\n  frame,\n}: {\n  original: SelectModeSourceLocation;\n  frame: ResolvedFrame | null;\n}): SelectModeSourceLocation {\n  if (!frame || !frame.file || isNullish(frame.line1)) {\n    return original;\n  }\n  return {\n    filePath: frame.file,\n    lineNumber: frame.line1,\n    columnNumber: frame.column1 ?? undefined,\n    componentName: original.componentName,\n  };\n}\n\n// The innermost chain entry that is a usable edit target: already-symbolicated\n// (still-compiled frames failed to resolve and are useless) and outside\n// dependency/framework code. See (Noah, 2026-07-09, REPL-29098).\nfunction findUserSourceLocation(\n  fiberChain: SelectModeFiberChainEntry[],\n): SelectModeSourceLocation | undefined {\n  return fiberChain.find((entry) => {\n    return (\n      !isLikelyCompiledLocation(entry.sourceLocation) &&\n      !isDependencyOrInternalPath(entry.sourceLocation.filePath)\n    );\n  })?.sourceLocation;\n}\n\nexport async function symbolicateSelectedElement(\n  selectedElement: SelectedElement,\n): Promise<SelectedElement> {\n  const targets: {\n    location: SelectModeSourceLocation;\n    apply: (next: SelectModeSourceLocation) => void;\n  }[] = [];\n\n  const fiberChain: SelectModeFiberChainEntry[] =\n    selectedElement.fiberChain.map((entry) => ({ ...entry }));\n  for (const entry of fiberChain) {\n    if (isLikelyCompiledLocation(entry.sourceLocation)) {\n      targets.push({\n        location: entry.sourceLocation,\n        apply: (next) => {\n          entry.sourceLocation = next;\n        },\n      });\n    }\n  }\n\n  let sourceLocation = selectedElement.sourceLocation;\n  // With a chain present `sourceLocation` is re-derived from it below, so\n  // targeting it here would just duplicate the chain head's round trip.\n  if (\n    fiberChain.length === 0 &&\n    sourceLocation &&\n    isLikelyCompiledLocation(sourceLocation)\n  ) {\n    const captured = sourceLocation;\n    targets.push({\n      location: captured,\n      apply: (next) => {\n        sourceLocation = next;\n      },\n    });\n  }\n\n  if (targets.length === 0) {\n    return selectedElement;\n  }\n\n  const resolved = await symbolicateFrames(\n    targets.map((target) => toNextStackFrame(target.location)),\n  );\n\n  for (const [index, target] of targets.entries()) {\n    const frame = extractResolvedFrame(resolved[index] ?? null);\n    target.apply(applyResolved({ original: target.location, frame }));\n  }\n\n  if (fiberChain.length > 0) {\n    // Fall back to the chain head so we never regress to attributing nothing.\n    sourceLocation =\n      findUserSourceLocation(fiberChain) ?? fiberChain[0]!.sourceLocation;\n  }\n\n  return {\n    ...selectedElement,\n    sourceLocation,\n    fiberChain,\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/select-mode/tiptapInlineEditor.d.ts

@@ -0,0 +1,23 @@
+import type { JSONContent } from "@tiptap/core";
+import type { SelectModeFormatCommand } from "../_vendor/schemas/generated/selectMode";
+export type InlineTiptapEditor = {
+    focus: () => void;
+    focusAndSelectAll: () => void;
+    destroy: () => void;
+    getHTML: () => string;
+    getJSON: () => JSONContent;
+    runFormatCommand: (command: SelectModeFormatCommand) => void;
+};
+export declare function createInlineTiptapEditor({ element, content, onCommit, onEscape, onBlur, onSelectionUpdate, }: {
+    element: HTMLElement;
+    content: string;
+    onCommit: () => void;
+    onEscape: () => void;
+    onBlur: () => void;
+    onSelectionUpdate: (activeMarks: {
+        bold: boolean;
+        italic: boolean;
+        underline: boolean;
+        strike: boolean;
+    }) => void;
+}): InlineTiptapEditor;

package/select-mode/tiptapInlineEditor.js

@@ -0,0 +1,120 @@
+import { Editor, Mark } from "@tiptap/core";
+import Bold from "@tiptap/extension-bold";
+import Document from "@tiptap/extension-document";
+import Italic from "@tiptap/extension-italic";
+import Strike from "@tiptap/extension-strike";
+import Text from "@tiptap/extension-text";
+import Underline from "@tiptap/extension-underline";
+const InlineDocument = Document.extend({
+  content: "inline*"
+});
+const InlineLink = Mark.create({
+  name: "link",
+  inclusive: false,
+  addAttributes() {
+    return {
+      class: { default: null },
+      href: { default: null },
+      rel: { default: null },
+      target: { default: null }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "a[href]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["a", HTMLAttributes, 0];
+  }
+});
+function createInlineTiptapEditor({
+  element,
+  content,
+  onCommit,
+  onEscape,
+  onBlur,
+  onSelectionUpdate
+}) {
+  const originalAttributes = Array.from(
+    element.attributes,
+    ({ name, value }) => ({
+      name,
+      value
+    })
+  );
+  element.replaceChildren();
+  const mount = {
+    mount: element
+  };
+  const editor = new Editor({
+    element: mount,
+    content,
+    extensions: [
+      InlineDocument,
+      Text,
+      Bold,
+      Italic,
+      Underline,
+      Strike,
+      InlineLink
+    ],
+    editorProps: {
+      // Drop the browser's default focus ring on the contenteditable — the
+      // select-mode selection frame already indicates the edit target.
+      attributes: { style: "outline: none;" },
+      handleKeyDown: (_view, event) => {
+        if (event.key === "Enter" && (event.shiftKey || event.metaKey || event.ctrlKey)) {
+          event.preventDefault();
+          onCommit();
+          return true;
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          onEscape();
+          return true;
+        }
+        return false;
+      }
+    },
+    onSelectionUpdate: ({ editor: activeEditor }) => {
+      onSelectionUpdate({
+        bold: activeEditor.isActive("bold"),
+        italic: activeEditor.isActive("italic"),
+        underline: activeEditor.isActive("underline"),
+        strike: activeEditor.isActive("strike")
+      });
+    },
+    onBlur: () => {
+      onBlur();
+    }
+  });
+  return {
+    focus: () => editor.commands.focus(),
+    // Focus the editor with the full text block selected so the user can type
+    // to replace it immediately (or arrow/click to drop the selection).
+    focusAndSelectAll: () => editor.chain().focus().selectAll().run(),
+    destroy: () => {
+      editor.destroy();
+      for (const attribute of Array.from(element.attributes)) {
+        element.removeAttribute(attribute.name);
+      }
+      for (const { name, value } of originalAttributes) {
+        element.setAttribute(name, value);
+      }
+    },
+    getHTML: () => editor.getHTML(),
+    getJSON: () => editor.getJSON(),
+    runFormatCommand: (command) => {
+      const commandRunners = {
+        toggleBold: () => editor.chain().focus().toggleBold().run(),
+        toggleItalic: () => editor.chain().focus().toggleItalic().run(),
+        toggleUnderline: () => editor.chain().focus().toggleUnderline().run(),
+        toggleStrike: () => editor.chain().focus().toggleStrike().run()
+      };
+      commandRunners[command]();
+    }
+  };
+}
+export {
+  createInlineTiptapEditor
+};
+//# sourceMappingURL=tiptapInlineEditor.js.map

package/select-mode/tiptapInlineEditor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../select-mode/tiptapInlineEditor.ts"],
+  "sourcesContent": ["import type { JSONContent } from \"@tiptap/core\";\nimport type { SelectModeFormatCommand } from \"schemas/generated/selectMode\";\n\nimport { Editor, Mark } from \"@tiptap/core\";\nimport Bold from \"@tiptap/extension-bold\";\nimport Document from \"@tiptap/extension-document\";\nimport Italic from \"@tiptap/extension-italic\";\nimport Strike from \"@tiptap/extension-strike\";\nimport Text from \"@tiptap/extension-text\";\nimport Underline from \"@tiptap/extension-underline\";\n\nconst InlineDocument = Document.extend({\n  content: \"inline*\",\n});\n\nconst InlineLink = Mark.create({\n  name: \"link\",\n  inclusive: false,\n  addAttributes() {\n    return {\n      class: { default: null },\n      href: { default: null },\n      rel: { default: null },\n      target: { default: null },\n    };\n  },\n  parseHTML() {\n    return [{ tag: \"a[href]\" }];\n  },\n  renderHTML({ HTMLAttributes }) {\n    return [\"a\", HTMLAttributes, 0];\n  },\n});\n\nexport type InlineTiptapEditor = {\n  focus: () => void;\n  focusAndSelectAll: () => void;\n  destroy: () => void;\n  getHTML: () => string;\n  getJSON: () => JSONContent;\n  runFormatCommand: (command: SelectModeFormatCommand) => void;\n};\n\nexport function createInlineTiptapEditor({\n  element,\n  content,\n  onCommit,\n  onEscape,\n  onBlur,\n  onSelectionUpdate,\n}: {\n  element: HTMLElement;\n  content: string;\n  onCommit: () => void;\n  onEscape: () => void;\n  onBlur: () => void;\n  onSelectionUpdate: (activeMarks: {\n    bold: boolean;\n    italic: boolean;\n    underline: boolean;\n    strike: boolean;\n  }) => void;\n}): InlineTiptapEditor {\n  const originalAttributes = Array.from(\n    element.attributes,\n    ({ name, value }) => ({\n      name,\n      value,\n    }),\n  );\n  // ProseMirror *appends* its contenteditable to the mount node rather than\n  // replacing it, so the element's original text node would survive as a\n  // sibling and render a duplicate copy. The editor's initial content comes\n  // from the `content` option below (not the element's DOM), and the caller\n  // keeps the original HTML for revert, so emptying the node here is safe.\n  element.replaceChildren();\n  const mount = {\n    mount: element,\n  } as unknown as Element; /* eslint-disable-line replo/no-as-cast -- NOTE (Noah Gilmore, 2026-07-16): ProseMirror accepts this documented direct-mount shape at runtime, but Tiptap v2's Editor option incorrectly narrows it to Element. */\n  const editor = new Editor({\n    element: mount,\n    content,\n    extensions: [\n      InlineDocument,\n      Text,\n      Bold,\n      Italic,\n      Underline,\n      Strike,\n      InlineLink,\n    ],\n    editorProps: {\n      // Drop the browser's default focus ring on the contenteditable \u2014 the\n      // select-mode selection frame already indicates the edit target.\n      attributes: { style: \"outline: none;\" },\n      handleKeyDown: (_view, event) => {\n        // Commit on Shift-Enter or Cmd/Ctrl-Enter; a bare Enter inserts a line\n        // break as usual.\n        if (\n          event.key === \"Enter\" &&\n          (event.shiftKey || event.metaKey || event.ctrlKey)\n        ) {\n          event.preventDefault();\n          onCommit();\n          return true;\n        }\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          onEscape();\n          return true;\n        }\n        return false;\n      },\n    },\n    onSelectionUpdate: ({ editor: activeEditor }) => {\n      onSelectionUpdate({\n        bold: activeEditor.isActive(\"bold\"),\n        italic: activeEditor.isActive(\"italic\"),\n        underline: activeEditor.isActive(\"underline\"),\n        strike: activeEditor.isActive(\"strike\"),\n      });\n    },\n    onBlur: () => {\n      onBlur();\n    },\n  });\n\n  return {\n    focus: () => editor.commands.focus(),\n    // Focus the editor with the full text block selected so the user can type\n    // to replace it immediately (or arrow/click to drop the selection).\n    focusAndSelectAll: () => editor.chain().focus().selectAll().run(),\n    destroy: () => {\n      editor.destroy();\n      for (const attribute of Array.from(element.attributes)) {\n        element.removeAttribute(attribute.name);\n      }\n      for (const { name, value } of originalAttributes) {\n        element.setAttribute(name, value);\n      }\n    },\n    getHTML: () => editor.getHTML(),\n    getJSON: () => editor.getJSON(),\n    runFormatCommand: (command) => {\n      const commandRunners: Record<SelectModeFormatCommand, () => void> = {\n        toggleBold: () => editor.chain().focus().toggleBold().run(),\n        toggleItalic: () => editor.chain().focus().toggleItalic().run(),\n        toggleUnderline: () => editor.chain().focus().toggleUnderline().run(),\n        toggleStrike: () => editor.chain().focus().toggleStrike().run(),\n      };\n      commandRunners[command]();\n    },\n  };\n}\n"],
+  "mappings": "AAGA,SAAS,QAAQ,YAAY;AAC7B,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,OAAO,YAAY;AACnB,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,OAAO,eAAe;AAEtB,MAAM,iBAAiB,SAAS,OAAO;AAAA,EACrC,SAAS;AACX,CAAC;AAED,MAAM,aAAa,KAAK,OAAO;AAAA,EAC7B,MAAM;AAAA,EACN,WAAW;AAAA,EACX,gBAAgB;AACd,WAAO;AAAA,MACL,OAAO,EAAE,SAAS,KAAK;AAAA,MACvB,MAAM,EAAE,SAAS,KAAK;AAAA,MACtB,KAAK,EAAE,SAAS,KAAK;AAAA,MACrB,QAAQ,EAAE,SAAS,KAAK;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,YAAY;AACV,WAAO,CAAC,EAAE,KAAK,UAAU,CAAC;AAAA,EAC5B;AAAA,EACA,WAAW,EAAE,eAAe,GAAG;AAC7B,WAAO,CAAC,KAAK,gBAAgB,CAAC;AAAA,EAChC;AACF,CAAC;AAWM,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAYuB;AACrB,QAAM,qBAAqB,MAAM;AAAA,IAC/B,QAAQ;AAAA,IACR,CAAC,EAAE,MAAM,MAAM,OAAO;AAAA,MACpB;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAMA,UAAQ,gBAAgB;AACxB,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,EACT;AACA,QAAM,SAAS,IAAI,OAAO;AAAA,IACxB,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,aAAa;AAAA;AAAA;AAAA,MAGX,YAAY,EAAE,OAAO,iBAAiB;AAAA,MACtC,eAAe,CAAC,OAAO,UAAU;AAG/B,YACE,MAAM,QAAQ,YACb,MAAM,YAAY,MAAM,WAAW,MAAM,UAC1C;AACA,gBAAM,eAAe;AACrB,mBAAS;AACT,iBAAO;AAAA,QACT;AACA,YAAI,MAAM,QAAQ,UAAU;AAC1B,gBAAM,eAAe;AACrB,mBAAS;AACT,iBAAO;AAAA,QACT;AACA,eAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,mBAAmB,CAAC,EAAE,QAAQ,aAAa,MAAM;AAC/C,wBAAkB;AAAA,QAChB,MAAM,aAAa,SAAS,MAAM;AAAA,QAClC,QAAQ,aAAa,SAAS,QAAQ;AAAA,QACtC,WAAW,aAAa,SAAS,WAAW;AAAA,QAC5C,QAAQ,aAAa,SAAS,QAAQ;AAAA,MACxC,CAAC;AAAA,IACH;AAAA,IACA,QAAQ,MAAM;AACZ,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL,OAAO,MAAM,OAAO,SAAS,MAAM;AAAA;AAAA;AAAA,IAGnC,mBAAmB,MAAM,OAAO,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI;AAAA,IAChE,SAAS,MAAM;AACb,aAAO,QAAQ;AACf,iBAAW,aAAa,MAAM,KAAK,QAAQ,UAAU,GAAG;AACtD,gBAAQ,gBAAgB,UAAU,IAAI;AAAA,MACxC;AACA,iBAAW,EAAE,MAAM,MAAM,KAAK,oBAAoB;AAChD,gBAAQ,aAAa,MAAM,KAAK;AAAA,MAClC;AAAA,IACF;AAAA,IACA,SAAS,MAAM,OAAO,QAAQ;AAAA,IAC9B,SAAS,MAAM,OAAO,QAAQ;AAAA,IAC9B,kBAAkB,CAAC,YAAY;AAC7B,YAAM,iBAA8D;AAAA,QAClE,YAAY,MAAM,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI;AAAA,QAC1D,cAAc,MAAM,OAAO,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI;AAAA,QAC9D,iBAAiB,MAAM,OAAO,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI;AAAA,QACpE,cAAc,MAAM,OAAO,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI;AAAA,MAChE;AACA,qBAAe,OAAO,EAAE;AAAA,IAC1B;AAAA,EACF;AACF;",
+  "names": []
+}