@jant/core 0.3.36 → 0.3.37

package/src/client/thread-context.ts

@@ -0,0 +1,140 @@
+/**
+ * Thread Context Interactions
+ *
+ * 1. Expand/collapse faded ancestor context via toggle button
+ * 2. Auto-scroll to current post on thread detail pages
+ */
+
+function parsePixelValue(value: string, fallback: number): number {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+function getCollapsedMaxHeight(container: HTMLElement): number {
+  const value = getComputedStyle(container).getPropertyValue(
+    "--site-thread-context-max-height",
+  );
+  return parsePixelValue(value, 188);
+}
+
+function getPendingImages(container: HTMLElement): HTMLImageElement[] {
+  return Array.from(container.querySelectorAll("img")).filter(
+    (image) => !image.complete,
+  );
+}
+
+function waitForContentToSettle(
+  container: HTMLElement,
+  callback: () => void,
+): void {
+  const pendingImages = getPendingImages(container);
+  if (pendingImages.length === 0) {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(callback);
+    });
+    return;
+  }
+
+  let remaining = pendingImages.length;
+  const handleDone = (): void => {
+    remaining -= 1;
+    if (remaining === 0) {
+      callback();
+    }
+  };
+
+  pendingImages.forEach((image) => {
+    image.addEventListener("load", handleDone, { once: true });
+    image.addEventListener("error", handleDone, { once: true });
+  });
+}
+
+function updateThreadContextState(
+  container: HTMLElement,
+  toggle: HTMLElement,
+  allowExpand: boolean,
+): void {
+  const collapsedMaxHeight = getCollapsedMaxHeight(container);
+  const isExpanded = container.classList.contains("expanded");
+  const overflows = container.scrollHeight > collapsedMaxHeight + 1;
+  const showMoreLabel = toggle.dataset.labelMore ?? "Show more";
+  const showLessLabel = toggle.dataset.labelLess ?? "Show less";
+
+  if (!overflows) {
+    if (allowExpand) {
+      container.classList.remove(
+        "thread-context-collapsed",
+        "thread-context-faded",
+        "expanded",
+      );
+    } else {
+      container.classList.add("thread-context-collapsed");
+      container.classList.remove("thread-context-faded", "expanded");
+    }
+    toggle.classList.add("hidden");
+    toggle.textContent = showMoreLabel;
+    toggle.setAttribute("aria-expanded", "false");
+    return;
+  }
+
+  container.classList.add("thread-context-collapsed");
+  container.classList.add("thread-context-faded");
+  toggle.classList.remove("hidden");
+  toggle.textContent = isExpanded ? showLessLabel : showMoreLabel;
+  toggle.setAttribute("aria-expanded", isExpanded ? "true" : "false");
+}
+
+function setupThreadContext(group: HTMLElement): void {
+  const container = group.querySelector<HTMLElement>("[data-thread-context]");
+  const toggle = group.querySelector<HTMLElement>(
+    "[data-thread-context-toggle]",
+  );
+  if (!container || !toggle) return;
+
+  let allowExpand = false;
+  updateThreadContextState(container, toggle, allowExpand);
+
+  waitForContentToSettle(container, () => {
+    allowExpand = true;
+    updateThreadContextState(container, toggle, allowExpand);
+  });
+
+  if ("ResizeObserver" in globalThis) {
+    const observer = new globalThis.ResizeObserver(() => {
+      updateThreadContextState(container, toggle, allowExpand);
+    });
+    observer.observe(container);
+  }
+}
+
+// Expand/collapse: event delegation on toggle buttons
+document.addEventListener("click", (e) => {
+  const toggle = (e.target as HTMLElement).closest<HTMLElement>(
+    "[data-thread-context-toggle]",
+  );
+  if (!toggle) return;
+
+  const container = toggle
+    .closest(".thread-group")
+    ?.querySelector<HTMLElement>("[data-thread-context]");
+  if (!container) return;
+
+  container.classList.toggle("expanded");
+  updateThreadContextState(container, toggle, true);
+});
+
+// Auto-scroll to current post on detail pages
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".thread-group").forEach((group) => {
+    if (group instanceof HTMLElement) {
+      setupThreadContext(group);
+    }
+  });
+
+  const current = document.querySelector("[data-post-current]");
+  if (!current) return;
+
+  requestAnimationFrame(() => {
+    current.scrollIntoView({ behavior: "smooth", block: "center" });
+  });
+});

package/src/client/tiptap/create-editor.ts

@@ -5,7 +5,17 @@
  */
 
 import { Editor, type JSONContent } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { Markdown } from "tiptap-markdown";
+import {
+  Table,
+  TableRow,
+  TableCell,
+  TableHeader,
+} from "@tiptap/extension-table";
 import { createEditorExtensions } from "./extensions.js";
+import { ImageNode } from "./image-node.js";
+import { MoreBreak } from "./more-break.js";
 
 export interface CreateEditorOptions {
   element: HTMLElement;
@@ -28,6 +38,10 @@ export function createTiptapEditor(options: CreateEditorOptions): Editor {
       placeholder: options.placeholder,
     }),
     content: options.content ?? undefined,
+    editorProps: {
+      scrollMargin: { top: 5, right: 5, bottom: 80, left: 5 },
+      scrollThreshold: { top: 5, right: 5, bottom: 80, left: 5 },
+    },
     onUpdate: ({ editor }) => {
       options.onUpdate?.(editor.getJSON());
     },
@@ -38,3 +52,35 @@ export function createTiptapEditor(options: CreateEditorOptions): Editor {
 
   return editor;
 }
+
+/**
+ * Converts TipTap JSON content to Markdown using a headless editor.
+ *
+ * @param json - TipTap JSONContent
+ * @returns Markdown string
+ *
+ * @example
+ * const md = jsonToMarkdown({ type: "doc", content: [...] });
+ */
+export function jsonToMarkdown(json: JSONContent): string {
+  const editor = new Editor({
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+        link: { openOnClick: false, autolink: false },
+      }),
+      Markdown,
+      Table.configure({ resizable: false }),
+      TableRow,
+      TableCell,
+      TableHeader,
+      ImageNode,
+      MoreBreak,
+    ],
+    content: json,
+  });
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const md = ((editor as any).storage.markdown.getMarkdown as () => string)();
+  editor.destroy();
+  return md;
+}

package/src/client/tiptap/extensions.ts

@@ -7,6 +7,7 @@
 import type { Extensions } from "@tiptap/core";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
+import { Markdown } from "tiptap-markdown";
 import {
   Table,
   TableRow,
@@ -42,6 +43,10 @@ export function createEditorExtensions(
     Placeholder.configure({
       placeholder: options.placeholder ?? "Write something…",
     }),
+    Markdown.configure({
+      transformPastedText: true,
+      transformCopiedText: false,
+    }),
     Table.configure({
       resizable: false,
       HTMLAttributes: { class: "tiptap-table" },

package/src/client/tiptap/image-node.ts

@@ -11,6 +11,7 @@
 import { Node, type Editor } from "@tiptap/core";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import type { EditorView } from "@tiptap/pm/view";
+import { uploadWithMetadata } from "../upload-with-metadata.js";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -307,14 +308,7 @@ class ImageNodeView {
       const file = input.files?.[0];
       if (!file) return;
       try {
-        const formData = new FormData();
-        formData.append("file", file);
-        const response = await fetch("/api/upload", {
-          method: "POST",
-          body: formData,
-        });
-        if (!response.ok) throw new Error(`Upload failed: ${response.status}`);
-        const data = (await response.json()) as { url: string };
+        const data = await uploadWithMetadata(file);
         this.updateAttrs({ src: data.url });
       } catch {
         // Upload failed — keep current image

package/src/client/tiptap/paste-image.ts

@@ -8,6 +8,7 @@
 
 import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { uploadWithMetadata } from "../upload-with-metadata.js";
 
 const pasteImagePluginKey = new PluginKey("pasteImage");
 
@@ -81,19 +82,7 @@ async function uploadAndInsertImage(
   editor.chain().focus().setImage({ src: placeholderUrl }).run();
 
   try {
-    const formData = new FormData();
-    formData.append("file", file);
-
-    const response = await fetch("/api/upload", {
-      method: "POST",
-      body: formData,
-    });
-
-    if (!response.ok) {
-      throw new Error(`Upload failed: ${response.status}`);
-    }
-
-    const data = (await response.json()) as { url: string };
+    const data = await uploadWithMetadata(file);
 
     // Replace placeholder URL with actual URL in the document
     const { doc } = editor.state;

package/src/client/tiptap/slash-commands.ts

@@ -13,6 +13,21 @@ import Suggestion, {
 } from "@tiptap/suggestion";
 import type { Editor, Range } from "@tiptap/core";
 
+// SVG icons (18×18, stroke-based, Lucide style)
+const ICONS = {
+  image: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`,
+  divider: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h18"/></svg>`,
+  readMore: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h18"/><path d="m9 18 3 3 3-3"/><path d="m9 6-3-3-3 3"/><path d="M3 6h18"/></svg>`,
+  table: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>`,
+  code: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`,
+  blockquote: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>`,
+  bulletList: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>`,
+  orderedList: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" x2="21" y1="6" y2="6"/><line x1="10" x2="21" y1="12" y2="12"/><line x1="10" x2="21" y1="18" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>`,
+  h1: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><path d="M17 12l3-2v10"/></svg>`,
+  h2: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><path d="M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1"/></svg>`,
+  h3: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><path d="M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2"/><path d="M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2"/></svg>`,
+} as const;
+
 interface SlashCommandItem {
   label: string;
   icon: string;
@@ -21,116 +36,133 @@ interface SlashCommandItem {
 
 const SLASH_COMMANDS: SlashCommandItem[] = [
   {
-    label: "Heading 1",
-    icon: "H1",
+    label: "Media",
+    icon: ICONS.image,
     command: (editor, range) => {
-      editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .toggleHeading({ level: 1 })
-        .run();
+      editor.chain().focus().deleteRange(range).run();
+      document.dispatchEvent(
+        new CustomEvent("jant:slash-image", { bubbles: true }),
+      );
     },
   },
   {
-    label: "Heading 2",
-    icon: "H2",
+    label: "Divider",
+    icon: ICONS.divider,
+    command: (editor, range) => {
+      editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+    },
+  },
+  {
+    label: "Read More",
+    icon: ICONS.readMore,
     command: (editor, range) => {
       editor
         .chain()
         .focus()
         .deleteRange(range)
-        .toggleHeading({ level: 2 })
+        .insertContent({ type: "moreBreak" })
         .run();
     },
   },
   {
-    label: "Heading 3",
-    icon: "H3",
+    label: "Table",
+    icon: ICONS.table,
     command: (editor, range) => {
       editor
         .chain()
         .focus()
         .deleteRange(range)
-        .toggleHeading({ level: 3 })
+        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
         .run();
     },
   },
   {
-    label: "Bullet List",
-    icon: "•",
-    command: (editor, range) => {
-      editor.chain().focus().deleteRange(range).toggleBulletList().run();
-    },
-  },
-  {
-    label: "Ordered List",
-    icon: "1.",
+    label: "Code Block",
+    icon: ICONS.code,
     command: (editor, range) => {
-      editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+      editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
     },
   },
   {
     label: "Blockquote",
-    icon: '"',
+    icon: ICONS.blockquote,
     command: (editor, range) => {
       editor.chain().focus().deleteRange(range).toggleBlockquote().run();
     },
   },
   {
-    label: "Code Block",
-    icon: "</>",
+    label: "Bullet List",
+    icon: ICONS.bulletList,
     command: (editor, range) => {
-      editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+      editor.chain().focus().deleteRange(range).toggleBulletList().run();
     },
   },
   {
-    label: "Horizontal Rule",
-    icon: "—",
+    label: "Ordered List",
+    icon: ICONS.orderedList,
     command: (editor, range) => {
-      editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+      editor.chain().focus().deleteRange(range).toggleOrderedList().run();
     },
   },
   {
-    label: "Image",
-    icon: "🖼",
+    label: "Heading 1",
+    icon: ICONS.h1,
     command: (editor, range) => {
-      editor.chain().focus().deleteRange(range).run();
-      document.dispatchEvent(
-        new CustomEvent("jant:slash-image", { bubbles: true }),
-      );
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .toggleHeading({ level: 1 })
+        .run();
     },
   },
   {
-    label: "Table",
-    icon: "▦",
+    label: "Heading 2",
+    icon: ICONS.h2,
     command: (editor, range) => {
       editor
         .chain()
         .focus()
         .deleteRange(range)
-        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+        .toggleHeading({ level: 2 })
         .run();
     },
   },
   {
-    label: "Read More",
-    icon: "↓",
+    label: "Heading 3",
+    icon: ICONS.h3,
     command: (editor, range) => {
       editor
         .chain()
         .focus()
         .deleteRange(range)
-        .insertContent({ type: "moreBreak" })
+        .toggleHeading({ level: 3 })
         .run();
     },
   },
 ];
 
+/** Check whether a document already contains a moreBreak node */
+function hasMoreBreak(editor: Editor): boolean {
+  let found = false;
+  editor.state.doc.descendants((node) => {
+    if (node.type.name === "moreBreak") {
+      found = true;
+      return false; // stop traversal
+    }
+    return !found;
+  });
+  return found;
+}
+
 /**
  * Returns the slash commands list, used by both the extension and the + menu.
+ * Omits "Read More" when the document already contains one.
  */
-export function getSlashCommands(): SlashCommandItem[] {
+export function getSlashCommands(editor?: Editor): SlashCommandItem[] {
+  if (editor && hasMoreBreak(editor)) {
+    return SLASH_COMMANDS.filter((item) => item.label !== "Read More");
+  }
   return SLASH_COMMANDS;
 }
 
@@ -139,6 +171,9 @@ let popupEl: HTMLElement | null = null;
 let selectedIndex = 0;
 let filteredItems: SlashCommandItem[] = [];
 let commandFn: ((item: { index: number }) => void) | null = null;
+let editorRef: Editor | null = null;
+let currentRange: Range | null = null;
+let outsideClickHandler: ((e: MouseEvent) => void) | null = null;
 
 function createPopup(): HTMLElement {
   const el = document.createElement("div");
@@ -147,6 +182,34 @@ function createPopup(): HTMLElement {
   return el;
 }
 
+/** Scroll the selected item into view within the popup only (no ancestor scroll) */
+function scrollSelectedIntoView() {
+  if (!popupEl) return;
+  const selected = popupEl.querySelector(
+    ".tiptap-slash-item.is-selected",
+  ) as HTMLElement | null;
+  if (!selected) return;
+  const itemTop = selected.offsetTop;
+  const itemBottom = itemTop + selected.offsetHeight;
+  const scrollTop = popupEl.scrollTop;
+  const viewBottom = scrollTop + popupEl.clientHeight;
+  if (itemTop < scrollTop) {
+    popupEl.scrollTop = itemTop;
+  } else if (itemBottom > viewBottom) {
+    popupEl.scrollTop = itemBottom - popupEl.clientHeight;
+  }
+}
+
+/** Update selection highlight and scroll into view */
+function updateSelection() {
+  popupEl
+    ?.querySelectorAll(".tiptap-slash-item")
+    .forEach((item, i) =>
+      item.classList.toggle("is-selected", i === selectedIndex),
+    );
+  scrollSelectedIntoView();
+}
+
 function renderPopup(
   items: SlashCommandItem[],
   onSelect: (index: number) => void,
@@ -175,37 +238,81 @@ function renderPopup(
     });
     el.addEventListener("mouseenter", () => {
       selectedIndex = parseInt(el.dataset.index ?? "0", 10);
-      popupEl
-        ?.querySelectorAll(".tiptap-slash-item")
-        .forEach((item, i) =>
-          item.classList.toggle("is-selected", i === selectedIndex),
-        );
+      updateSelection();
     });
   });
 }
 
 function destroyPopup() {
+  if (outsideClickHandler) {
+    document.removeEventListener("mousedown", outsideClickHandler, true);
+    outsideClickHandler = null;
+  }
   popupEl?.remove();
   popupEl = null;
   selectedIndex = 0;
   filteredItems = [];
   commandFn = null;
+  editorRef = null;
+  currentRange = null;
 }
 
 /**
  * Position the popup relative to the cursor, accounting for dialog containing block.
  * When a `<dialog>` has CSS animation, it creates a containing block that makes
  * `position: fixed` relative to the dialog instead of the viewport.
+ * Flips above the cursor when there isn't enough space below.
  */
 function positionPopup(
   rect: globalThis.DOMRect,
   container: HTMLElement | null,
 ) {
   if (!popupEl) return;
+
+  // Reset inline max-height so offsetHeight reflects the natural size
+  popupEl.style.maxHeight = "";
+
   const offsetX = container?.getBoundingClientRect().left ?? 0;
   const offsetY = container?.getBoundingClientRect().top ?? 0;
-  popupEl.style.left = `${rect.left - offsetX}px`;
-  popupEl.style.top = `${rect.bottom + 4 - offsetY}px`;
+  const containerHeight = container?.clientHeight ?? window.innerHeight;
+  const popupHeight = popupEl.offsetHeight;
+  const gap = 4;
+
+  const left = rect.left - offsetX;
+  const belowTop = rect.bottom + gap - offsetY;
+  const spaceBelow = containerHeight - belowTop;
+  const spaceAbove = rect.top - offsetY - gap;
+
+  popupEl.style.left = `${left}px`;
+
+  if (popupHeight > spaceBelow && spaceAbove > spaceBelow) {
+    // Not enough space below and more room above — flip
+    const maxH = Math.min(popupHeight, spaceAbove);
+    if (popupHeight > spaceAbove) {
+      popupEl.style.maxHeight = `${spaceAbove}px`;
+    }
+    popupEl.style.top = `${rect.top - offsetY - maxH - gap}px`;
+  } else {
+    // Show below (constrain if needed)
+    if (popupHeight > spaceBelow) {
+      popupEl.style.maxHeight = `${spaceBelow}px`;
+    }
+    popupEl.style.top = `${belowTop}px`;
+  }
+}
+
+/** Install a click-outside handler to dismiss the suggestion on external clicks */
+function installClickOutside() {
+  outsideClickHandler = (e: MouseEvent) => {
+    if (!popupEl || popupEl.contains(e.target as Node)) return;
+    // Click anywhere outside the popup (including inside the editor) — dismiss
+    // by deleting the trigger text so the suggestion plugin deactivates via onExit
+    if (editorRef && currentRange) {
+      const { state, view } = editorRef;
+      view.dispatch(state.tr.delete(currentRange.from, currentRange.to));
+    }
+  };
+  document.addEventListener("mousedown", outsideClickHandler, true);
 }
 
 /**
@@ -219,9 +326,9 @@ export const SlashCommands = Extension.create({
       suggestion: {
         char: "/",
         startOfLine: false,
-        items: ({ query }: { query: string }) => {
+        items: ({ query, editor }: { query: string; editor: Editor }) => {
           const q = query.toLowerCase();
-          return SLASH_COMMANDS.filter((item) =>
+          return getSlashCommands(editor).filter((item) =>
             item.label.toLowerCase().includes(q),
           );
         },
@@ -238,6 +345,8 @@ export const SlashCommands = Extension.create({
               popupEl = createPopup();
               selectedIndex = 0;
               commandFn = props.command;
+              editorRef = props.editor;
+              currentRange = props.range;
               renderPopup(props.items, (index) => props.command({ index }));
 
               // Append inside the closest dialog (top-layer) or body
@@ -249,11 +358,14 @@ export const SlashCommands = Extension.create({
               if (rect) {
                 positionPopup(rect, dialog);
               }
+
+              installClickOutside();
             },
             onUpdate: (
               props: SuggestionProps<SlashCommandItem, { index: number }>,
             ) => {
               commandFn = props.command;
+              currentRange = props.range;
               renderPopup(props.items, (index) => props.command({ index }));
               const rect = props.clientRect?.();
               if (rect) {
@@ -265,30 +377,28 @@ export const SlashCommands = Extension.create({
             onKeyDown: (props: SuggestionKeyDownProps) => {
               const { event } = props;
               if (event.key === "ArrowDown") {
+                event.preventDefault();
                 selectedIndex = (selectedIndex + 1) % filteredItems.length;
-                popupEl
-                  ?.querySelectorAll(".tiptap-slash-item")
-                  .forEach((item, i) =>
-                    item.classList.toggle("is-selected", i === selectedIndex),
-                  );
+                updateSelection();
                 return true;
               }
               if (event.key === "ArrowUp") {
+                event.preventDefault();
                 selectedIndex =
                   (selectedIndex - 1 + filteredItems.length) %
                   filteredItems.length;
-                popupEl
-                  ?.querySelectorAll(".tiptap-slash-item")
-                  .forEach((item, i) =>
-                    item.classList.toggle("is-selected", i === selectedIndex),
-                  );
+                updateSelection();
                 return true;
               }
               if (event.key === "Enter") {
+                event.preventDefault();
                 commandFn?.({ index: selectedIndex });
                 return true;
               }
               if (event.key === "Escape") {
+                // Stop propagation to prevent parent dialog from closing
+                event.stopPropagation();
+                event.preventDefault();
                 destroyPopup();
                 return true;
               }