@jant/core 0.6.15 → 0.7.0

package/src/client/smart-collection-page-actions.ts

@@ -0,0 +1,208 @@
+/**
+ * Smart collection page owner menu.
+ *
+ * The same menu shape a collection page has, item for item — Edit, Add to
+ * navigation, Edit navigation, Delete — with one difference: Edit opens the
+ * dialog rather than navigating to an editor page, because a smart collection
+ * has no editor page. There is no Edit button beside the title either; a
+ * collection page has none, and the menu is where a page keeps its owner
+ * actions.
+ */
+
+import { getCollectionsDirectoryPath } from "../lib/collection-paths.js";
+import { addSmartCollectionToNavigation } from "./collection-navigation.js";
+import { NAVIGATION_SETTINGS_PATH } from "../lib/settings-paths.js";
+import { showConfirmDialog } from "./confirm.js";
+import { showToast, showToastWithAction } from "./toast.js";
+import { openSmartCollectionDialog } from "./smart-collection-dialog-host.js";
+
+interface PageActionLabels {
+  addToNavigation: string;
+  addingToNavigation: string;
+  addedToNavigation: string;
+  editNavigation: string;
+  addToNavigationFailed: string;
+  confirmDelete: string;
+  deleteCollection: string;
+  cancel: string;
+  saveFailed: string;
+  deleted: string;
+}
+
+const parseLabels = (value: string | undefined): PageActionLabels => {
+  const empty: PageActionLabels = {
+    addToNavigation: "",
+    addingToNavigation: "",
+    addedToNavigation: "",
+    editNavigation: "",
+    addToNavigationFailed: "",
+    confirmDelete: "",
+    deleteCollection: "",
+    cancel: "",
+    saveFailed: "",
+    deleted: "",
+  };
+  if (!value) return empty;
+  try {
+    return { ...empty, ...(JSON.parse(value) as Partial<PageActionLabels>) };
+  } catch {
+    return empty;
+  }
+};
+
+document
+  .querySelectorAll<HTMLElement>("[data-smart-collection-page-actions]")
+  .forEach((root) => {
+    if (root.dataset.smartCollectionPageActionsInitialized === "true") return;
+
+    const labels = parseLabels(root.dataset.collectionPageLabels);
+    const smartCollectionId = root.dataset.smartCollectionId;
+    const redirectUrl =
+      root.dataset.collectionPageRedirectUrl || getCollectionsDirectoryPath();
+    const trigger = root.querySelector<HTMLElement>(
+      "[data-collection-page-action='toggle-menu']",
+    );
+    const menu = root.querySelector<HTMLElement>("[data-collection-page-menu]");
+    const addToNavigationButton = root.querySelector<HTMLButtonElement>(
+      "[data-collection-page-action='add-to-navigation']",
+    );
+    const editNavigationLink = root.querySelector<HTMLAnchorElement>(
+      "[data-collection-page-edit-navigation]",
+    );
+
+    if (!smartCollectionId || !trigger || !menu) return;
+
+    const closeMenu = (focusTrigger = false) => {
+      if (menu.hidden) return;
+      menu.hidden = true;
+      trigger.setAttribute("aria-expanded", "false");
+      if (focusTrigger) trigger.focus();
+    };
+
+    const openMenu = (focusFirstItem = false) => {
+      menu.hidden = false;
+      trigger.setAttribute("aria-expanded", "true");
+      if (focusFirstItem) {
+        menu.querySelector<HTMLElement>("[role='menuitem']")?.focus();
+      }
+    };
+
+    const handleEdit = async () => {
+      closeMenu(false);
+      const changed = await openSmartCollectionDialog({ smartCollectionId });
+      // The address, the title, the conditions, and the count can all have
+      // moved, so the page is re-read rather than patched in place.
+      if (changed) window.location.reload();
+    };
+
+    const handleDelete = async () => {
+      closeMenu(false);
+      const confirmed = await showConfirmDialog({
+        message: labels.confirmDelete,
+        confirmLabel: labels.deleteCollection,
+        cancelLabel: labels.cancel,
+        tone: "danger",
+      });
+      if (!confirmed) return;
+
+      try {
+        const res = await fetch(`/api/smart-collections/${smartCollectionId}`, {
+          method: "DELETE",
+        });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        showToast(labels.deleted);
+        window.location.href = redirectUrl;
+      } catch {
+        showToast(labels.saveFailed, "error");
+      }
+    };
+
+    const handleAddToNavigation = async () => {
+      if (!addToNavigationButton || addToNavigationButton.disabled) return;
+
+      closeMenu(false);
+      const label = addToNavigationButton.querySelector<HTMLElement>(
+        ".collections-page-menu-item-label",
+      );
+      addToNavigationButton.disabled = true;
+      if (label) label.textContent = labels.addingToNavigation;
+
+      try {
+        await addSmartCollectionToNavigation(smartCollectionId);
+
+        addToNavigationButton.hidden = true;
+        if (editNavigationLink) editNavigationLink.hidden = false;
+        root.dataset.collectionInNavigation = "true";
+        showToastWithAction(labels.addedToNavigation, {
+          label: labels.editNavigation,
+          href:
+            editNavigationLink?.getAttribute("href") ??
+            NAVIGATION_SETTINGS_PATH,
+        });
+      } catch {
+        showToast(labels.addToNavigationFailed, "error");
+      } finally {
+        addToNavigationButton.disabled = false;
+        if (label) label.textContent = labels.addToNavigation;
+      }
+    };
+
+    trigger.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (menu.hidden) openMenu(false);
+      else closeMenu(false);
+    });
+
+    trigger.addEventListener("keydown", (event) => {
+      if (
+        event.key === "Enter" ||
+        event.key === " " ||
+        event.key === "ArrowDown"
+      ) {
+        event.preventDefault();
+        if (menu.hidden) openMenu(true);
+        else closeMenu(false);
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeMenu(true);
+      }
+    });
+
+    menu.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeMenu(true);
+      }
+    });
+
+    root.addEventListener("click", (event) => {
+      const target = event.target as HTMLElement | null;
+      const actionEl = target?.closest<HTMLElement>(
+        "[data-collection-page-action]",
+      );
+      if (!actionEl || !root.contains(actionEl)) return;
+
+      const action = actionEl.dataset.collectionPageAction;
+      if (action === "edit") {
+        event.preventDefault();
+        void handleEdit();
+      }
+      if (action === "delete") {
+        event.preventDefault();
+        void handleDelete();
+      }
+      if (action === "add-to-navigation") {
+        event.preventDefault();
+        void handleAddToNavigation();
+      }
+    });
+
+    document.addEventListener("click", (event) => {
+      if (!(event.target instanceof Node)) return;
+      if (!root.contains(event.target)) closeMenu(false);
+    });
+
+    root.dataset.smartCollectionPageActionsInitialized = "true";
+  });

package/src/client/tiptap/__tests__/bubble-menu.test.ts

@@ -0,0 +1,110 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import { createEditorExtensions } from "../extensions.js";
+import { clearFormatting, toggleMarkAndExit } from "../bubble-menu.js";
+
+const editors: Editor[] = [];
+
+function createEditor(content: string): Editor {
+  const element = document.createElement("div");
+  document.body.appendChild(element);
+
+  const editor = new Editor({
+    element,
+    extensions: createEditorExtensions(),
+    content,
+  });
+
+  editors.push(editor);
+  return editor;
+}
+
+function getBubbleMenu(editor: Editor): HTMLElement {
+  const el = (editor.options.element as HTMLElement)
+    .closest("body")
+    ?.querySelector<HTMLElement>(".tiptap-bubble-menu");
+  if (!el) throw new Error("Bubble menu was never created");
+  return el;
+}
+
+function isVisible(editor: Editor): boolean {
+  return getBubbleMenu(editor).style.display !== "none";
+}
+
+afterEach(() => {
+  while (editors.length) editors.pop()?.destroy();
+  document.body.innerHTML = "";
+});
+
+describe("bubble menu visibility", () => {
+  it("stays hidden while the selection is empty", () => {
+    const editor = createEditor("<p>A quiet note</p>");
+    editor.commands.focus();
+
+    expect(isVisible(editor)).toBe(false);
+  });
+
+  it("shows for a text selection", () => {
+    const editor = createEditor("<p>A quiet note</p>");
+    editor.view.dispatch(
+      editor.state.tr.setSelection(
+        TextSelection.create(editor.state.doc, 1, 8),
+      ),
+    );
+
+    expect(isVisible(editor)).toBe(true);
+  });
+
+  it("shows for select-all, which is an AllSelection rather than a text selection", () => {
+    const editor = createEditor("<p>First line</p><p>Second line</p>");
+    editor.commands.selectAll();
+
+    expect(isVisible(editor)).toBe(true);
+  });
+
+  it("stays hidden when select-all covers an empty document", () => {
+    const editor = createEditor("<p></p>");
+    editor.commands.selectAll();
+
+    expect(isVisible(editor)).toBe(false);
+  });
+
+  it("hides again once the selection collapses", () => {
+    const editor = createEditor("<p>A quiet note</p>");
+    editor.commands.selectAll();
+    expect(isVisible(editor)).toBe(true);
+
+    editor.commands.setTextSelection(2);
+
+    expect(isVisible(editor)).toBe(false);
+  });
+});
+
+describe("bubble menu actions on a document-wide selection", () => {
+  it("bolds the whole document and leaves the cursor outside the mark", () => {
+    const editor = createEditor("<p>First line</p><p>Second line</p>");
+    editor.commands.selectAll();
+
+    toggleMarkAndExit(editor, "bold");
+
+    expect(editor.getHTML()).toBe(
+      "<p><strong>First line</strong></p><p><strong>Second line</strong></p>",
+    );
+    expect(editor.state.selection.empty).toBe(true);
+    expect(editor.state.storedMarks ?? []).toHaveLength(0);
+  });
+
+  it("clears formatting across every selected block", () => {
+    const editor = createEditor(
+      "<h2>A heading</h2><p><strong>bold</strong> and <em>italic</em></p>",
+    );
+    editor.commands.selectAll();
+
+    clearFormatting(editor);
+
+    expect(editor.getHTML()).toBe("<p>A heading</p><p>bold and italic</p>");
+  });
+});

package/src/client/tiptap/__tests__/floating-position.test.ts

@@ -1,7 +1,12 @@
 // @vitest-environment happy-dom
 
 import { describe, expect, it } from "vitest";
-import { getFloatingPosition } from "../floating-position.js";
+import {
+  getFloatingArrowOffset,
+  getFloatingPosition,
+  getVisibleAnchorRect,
+  getVisibleClipRect,
+} from "../floating-position.js";
 
 describe("getFloatingPosition", () => {
   const containerRect = {
@@ -72,3 +77,133 @@ describe("getFloatingPosition", () => {
     expect(layout.top).toBe(8);
   });
 });
+
+describe("getVisibleAnchorRect", () => {
+  // A three-line selection in a text column running from x=100 to x=300,
+  // inside a scroll region showing y=50..250.
+  const clipRect = { left: 100, top: 50, width: 220, height: 200 };
+  const lines = [
+    { left: 180, right: 300, top: 60, bottom: 80 },
+    { left: 100, right: 300, top: 80, bottom: 100 },
+    { left: 100, right: 160, top: 100, bottom: 120 },
+  ];
+
+  it("centers on the whole selection but hugs its first line", () => {
+    const anchor = getVisibleAnchorRect(lines, clipRect);
+
+    expect(anchor).toEqual({ left: 100, right: 300, top: 60, bottom: 80 });
+  });
+
+  it("ignores an enclosing block rect when picking the first line", () => {
+    const anchor = getVisibleAnchorRect(
+      [{ left: 100, right: 300, top: 60, bottom: 120 }, ...lines],
+      clipRect,
+    );
+
+    expect(anchor?.bottom).toBe(80);
+  });
+
+  it("anchors to the first line still on screen when the selection scrolls past the top", () => {
+    const anchor = getVisibleAnchorRect(
+      [
+        { left: 100, right: 300, top: -40, bottom: -20 },
+        { left: 100, right: 300, top: -20, bottom: 0 },
+        ...lines,
+      ],
+      clipRect,
+    );
+
+    expect(anchor).toEqual({ left: 100, right: 300, top: 60, bottom: 80 });
+  });
+
+  it("clips a selection that overruns the scroll region", () => {
+    const anchor = getVisibleAnchorRect(
+      [{ left: 100, right: 300, top: 20, bottom: 400 }],
+      clipRect,
+    );
+
+    expect(anchor).toEqual({ left: 100, right: 300, top: 50, bottom: 250 });
+  });
+
+  it("returns null when nothing is visible", () => {
+    const anchor = getVisibleAnchorRect(
+      [{ left: 100, right: 300, top: 300, bottom: 320 }],
+      clipRect,
+    );
+
+    expect(anchor).toBeNull();
+  });
+});
+
+describe("getVisibleClipRect", () => {
+  function stubRect(
+    el: HTMLElement,
+    rect: { left: number; top: number; width: number; height: number },
+  ) {
+    const measured = {
+      ...rect,
+      right: rect.left + rect.width,
+      bottom: rect.top + rect.height,
+      x: rect.left,
+      y: rect.top,
+      toJSON: () => rect,
+    };
+    el.getBoundingClientRect = () => measured;
+  }
+
+  it("narrows the container down to a scrolling ancestor", () => {
+    const scroller = document.createElement("div");
+    scroller.style.overflowY = "auto";
+    const content = document.createElement("div");
+    scroller.appendChild(content);
+    document.body.appendChild(scroller);
+    stubRect(scroller, { left: 100, top: 120, width: 300, height: 200 });
+
+    const clip = getVisibleClipRect(content, {
+      left: 100,
+      top: 50,
+      width: 320,
+      height: 400,
+    });
+
+    expect(clip).toEqual({ left: 100, top: 120, width: 300, height: 200 });
+    scroller.remove();
+  });
+
+  it("keeps the container when no ancestor reports a clipping region", () => {
+    const plain = document.createElement("div");
+    const content = document.createElement("div");
+    plain.appendChild(content);
+    document.body.appendChild(plain);
+    const containerRect = { left: 100, top: 50, width: 320, height: 400 };
+
+    expect(getVisibleClipRect(content, containerRect)).toEqual(containerRect);
+    plain.remove();
+  });
+});
+
+describe("getFloatingArrowOffset", () => {
+  const containerRect = { left: 100, top: 50, width: 320, height: 240 };
+
+  it("points at the anchor center", () => {
+    const offset = getFloatingArrowOffset({
+      anchorRect: { left: 200, right: 240, top: 70, bottom: 90 },
+      containerRect,
+      floatingLeft: 60,
+      floatingWidth: 160,
+    });
+
+    expect(offset).toBe(60);
+  });
+
+  it("stays inside the surface when it is clamped away from the anchor", () => {
+    const offset = getFloatingArrowOffset({
+      anchorRect: { left: 400, right: 420, top: 70, bottom: 90 },
+      containerRect,
+      floatingLeft: 8,
+      floatingWidth: 160,
+    });
+
+    expect(offset).toBe(150);
+  });
+});

package/src/client/tiptap/__tests__/inline-image-upload.test.ts

@@ -5,9 +5,11 @@ import { Editor, type JSONContent } from "@tiptap/core";
 import StarterKit from "@tiptap/starter-kit";
 import { ImageNode } from "../image-node.js";
 import {
+  adoptPendingInlineImageUploads,
   rehostInlineImage,
   resolveInlineImageUrls,
   hasPendingInlineImagePlaceholders,
+  uploadAndInsertInlineImage,
 } from "../inline-image-upload.js";
 
 const editors: Editor[] = [];
@@ -141,3 +143,38 @@ describe("resolveInlineImageUrls + hasPendingInlineImagePlaceholders", () => {
     expect(resolved).toBe(json);
   });
 });
+
+describe("adoptPendingInlineImageUploads", () => {
+  it("hands an in-flight upload on through a second adoption", async () => {
+    const first = createEditor();
+    let finishUpload: (value: { url: string }) => void = () => {};
+    const insert = uploadAndInsertInlineImage(
+      first,
+      new File(["image"], "shot.png", { type: "image/png" }),
+      () =>
+        new Promise((resolve) => {
+          finishUpload = resolve;
+        }),
+    );
+    expect(imageSrcs(first)[0]?.startsWith("blob:")).toBe(true);
+
+    // Content can move more than once — fullscreen hands it to compose, and a
+    // format switch then rebuilds compose's editor under it.
+    const second = createEditor();
+    second.commands.setContent(first.getJSON());
+    adoptPendingInlineImageUploads(second);
+
+    const third = createEditor();
+    third.commands.setContent(second.getJSON());
+    const adopted = adoptPendingInlineImageUploads(third);
+    expect(adopted).toHaveLength(1);
+    // Submitting from here still knows the image is on its way.
+    expect(hasPendingInlineImagePlaceholders(third.getJSON())).toBe(true);
+
+    finishUpload({ url: "https://cdn.test/shot.webp" });
+    await insert;
+    await Promise.all(adopted);
+
+    expect(imageSrcs(third)).toEqual(["https://cdn.test/shot.webp"]);
+  });
+});

package/src/client/tiptap/__tests__/link-input-rules.test.ts

@@ -0,0 +1,121 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import { createMarkdownContentExtensions } from "../../../lib/markdown-manager.js";
+import { LinkInputRules } from "../link-input-rules.js";
+
+const editors: Editor[] = [];
+
+function createEditor(): Editor {
+  const element = document.createElement("div");
+  document.body.appendChild(element);
+
+  const editor = new Editor({
+    element,
+    extensions: [...createMarkdownContentExtensions(), LinkInputRules],
+    content: "<p></p>",
+  });
+
+  editors.push(editor);
+  return editor;
+}
+
+function type(editor: Editor, text: string): void {
+  const view = editor.view;
+  for (const character of text) {
+    const { from, to } = view.state.selection;
+    const handled = view.someProp("handleTextInput", (handler) =>
+      handler(view, from, to, character, () =>
+        view.state.tr.insertText(character, from, to),
+      ),
+    );
+    if (!handled) {
+      view.dispatch(view.state.tr.insertText(character, from, to));
+    }
+  }
+}
+
+afterEach(() => {
+  while (editors.length > 0) {
+    editors.pop()?.destroy();
+  }
+  document.body.innerHTML = "";
+});
+
+describe("LinkInputRules", () => {
+  it("converts a typed sms Markdown link into a link mark", () => {
+    const editor = createEditor();
+
+    type(editor, "[xxx](sms:xxxxx@xx.com)");
+
+    expect(editor.getJSON().content?.[0]).toMatchObject({
+      type: "paragraph",
+      content: [
+        {
+          type: "text",
+          text: "xxx",
+          marks: [
+            {
+              type: "link",
+              attrs: {
+                href: "sms:xxxxx@xx.com",
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it.each(["tel:+15551234567", "sms:+15551234567"])(
+    "auto-links a bare %s action URL",
+    (href) => {
+      const editor = createEditor();
+
+      type(editor, `${href} `);
+
+      expect(editor.getJSON().content?.[0]?.content?.[0]).toMatchObject({
+        type: "text",
+        text: href,
+        marks: [
+          {
+            type: "link",
+            attrs: { href },
+          },
+        ],
+      });
+    },
+  );
+
+  it("leaves executable Markdown links as typed text", () => {
+    const editor = createEditor();
+
+    type(editor, "[unsafe](javascript:alert(1))");
+
+    expect(editor.state.doc.textContent).toBe("[unsafe](javascript:alert(1))");
+    expect(JSON.stringify(editor.getJSON())).not.toContain('"type":"link"');
+  });
+
+  it("uses the same action-link policy for TipTap link commands", () => {
+    const editor = createEditor();
+    editor.commands.insertContent("Message");
+    editor.commands.setTextSelection({ from: 1, to: 8 });
+
+    expect(editor.commands.setLink({ href: "sms:xxxxx@xx.com" })).toBe(true);
+    expect(editor.getJSON().content?.[0]?.content?.[0]).toMatchObject({
+      marks: [
+        {
+          type: "link",
+          attrs: { href: "sms:xxxxx@xx.com" },
+        },
+      ],
+    });
+
+    editor.commands.unsetLink();
+    expect(editor.commands.setLink({ href: "javascript:alert(1)" })).toBe(
+      false,
+    );
+    expect(JSON.stringify(editor.getJSON())).not.toContain("javascript:");
+  });
+});