@jant/core 0.3.34 → 0.3.36

package/src/client/tiptap/link-toolbar.ts

@@ -0,0 +1,371 @@
+/**
+ * Link Toolbar Extension
+ *
+ * Floating toolbar for link editing with two modes:
+ * - Input mode: light popup with URL field + confirm button (speech-bubble arrow)
+ * - Preview mode: dark tooltip showing truncated URL + edit/delete buttons
+ *
+ * Replaces the browser prompt() dialog for link creation.
+ */
+
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import type { EditorState } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+
+const linkToolbarKey = new PluginKey("linkToolbar");
+
+type Mode = "hidden" | "input" | "preview";
+let currentMode: Mode = "hidden";
+
+/** Returns true when the link input popup is visible. Used by bubble menu to hide itself. */
+export function isLinkToolbarInputActive(): boolean {
+  return currentMode === "input";
+}
+
+// SVG icons (14×14 for preview buttons, 16×16 for confirm)
+const ICON_ENTER = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 10 4 15 9 20"/><path d="M20 4v7a4 4 0 0 1-4 4H4"/></svg>`;
+const ICON_EDIT = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>`;
+const ICON_TRASH = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>`;
+
+interface LinkRange {
+  from: number;
+  to: number;
+  href: string;
+}
+
+/** Find the extent of a link mark around the cursor position. */
+function getLinkRange(state: EditorState): LinkRange | null {
+  const { selection } = state;
+  if (!selection.empty) return null;
+
+  const $pos = selection.$from;
+  const linkType = state.schema.marks.link;
+  if (!linkType) return null;
+
+  const marks = $pos.marks();
+  const linkMark = marks.find((m) => m.type === linkType);
+  if (!linkMark) return null;
+
+  // Walk the parent node's children to find the text range covered by this link
+  const parent = $pos.parent;
+  const parentOffset = $pos.start();
+  let from = 0;
+  let to = 0;
+  let found = false;
+  let offset = 0;
+
+  for (let i = 0; i < parent.childCount; i++) {
+    const child = parent.child(i);
+    const childFrom = parentOffset + offset;
+    const childTo = childFrom + child.nodeSize;
+
+    if (
+      child.marks.some(
+        (m) => m.type === linkType && m.attrs.href === linkMark.attrs.href,
+      )
+    ) {
+      if (!found) {
+        from = childFrom;
+        found = true;
+      }
+      to = childTo;
+    } else if (found) {
+      break;
+    }
+
+    offset += child.nodeSize;
+  }
+
+  if (!found) return null;
+  return { from, to, href: linkMark.attrs.href as string };
+}
+
+export const LinkToolbar = Extension.create({
+  name: "linkToolbar",
+
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+
+    // DOM elements
+    let inputEl: HTMLElement | null = null;
+    let previewEl: HTMLElement | null = null;
+    let inputField: HTMLInputElement | null = null;
+
+    // State
+    let savedFrom = 0;
+    let savedTo = 0;
+    let suppressNextUpdate = false;
+    let outsideClickHandler: ((e: MouseEvent) => void) | null = null;
+
+    function createElements() {
+      // --- Input popup ---
+      inputEl = document.createElement("div");
+      inputEl.className = "tiptap-link-input";
+      inputEl.style.display = "none";
+
+      inputField = document.createElement("input");
+      inputField.type = "url";
+      inputField.className = "tiptap-link-input-field";
+      inputField.placeholder = "https://";
+
+      const confirmBtn = document.createElement("button");
+      confirmBtn.type = "button";
+      confirmBtn.className = "tiptap-link-input-confirm";
+      confirmBtn.innerHTML = ICON_ENTER;
+      confirmBtn.title = "Apply link";
+
+      inputEl.appendChild(inputField);
+      inputEl.appendChild(confirmBtn);
+
+      // Input key handling
+      inputField.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          confirmLink();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          hideAll();
+          editor.commands.focus();
+        }
+      });
+
+      // Confirm button
+      confirmBtn.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        confirmLink();
+      });
+
+      // Prevent input popup clicks from bubbling
+      inputEl.addEventListener("mousedown", (e) => {
+        e.stopPropagation();
+      });
+
+      // --- Preview tooltip ---
+      previewEl = document.createElement("div");
+      previewEl.className = "tiptap-link-preview";
+      previewEl.style.display = "none";
+
+      const urlSpan = document.createElement("span");
+      urlSpan.className = "tiptap-link-preview-url";
+
+      const editBtn = document.createElement("button");
+      editBtn.type = "button";
+      editBtn.className = "tiptap-link-preview-btn";
+      editBtn.innerHTML = ICON_EDIT;
+      editBtn.title = "Edit link";
+
+      const deleteBtn = document.createElement("button");
+      deleteBtn.type = "button";
+      deleteBtn.className = "tiptap-link-preview-btn";
+      deleteBtn.innerHTML = ICON_TRASH;
+      deleteBtn.title = "Remove link";
+
+      previewEl.appendChild(urlSpan);
+      previewEl.appendChild(editBtn);
+      previewEl.appendChild(deleteBtn);
+
+      // Edit button — switch to input with current href
+      editBtn.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        const url = urlSpan.textContent ?? "";
+        const range = getLinkRange(editor.state);
+        if (range) {
+          showInput(editor.view, url, range.from, range.to);
+        }
+      });
+
+      // Delete button — remove link
+      deleteBtn.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        hideAll();
+        editor.chain().focus().unsetLink().run();
+      });
+
+      // Prevent preview clicks from bubbling
+      previewEl.addEventListener("mousedown", (e) => {
+        e.stopPropagation();
+      });
+    }
+
+    function positionAbove(
+      el: HTMLElement,
+      view: EditorView,
+      from: number,
+      to: number,
+    ) {
+      const start = view.coordsAtPos(from);
+      const end = view.coordsAtPos(to);
+      const cx = (start.left + end.right) / 2;
+      const top = start.top;
+
+      const dialog = view.dom.closest("dialog");
+      const offsetX = dialog?.getBoundingClientRect().left ?? 0;
+      const offsetY = dialog?.getBoundingClientRect().top ?? 0;
+
+      el.style.display = "flex";
+      const rect = el.getBoundingClientRect();
+      el.style.left = `${cx - rect.width / 2 - offsetX}px`;
+      el.style.top = `${top - rect.height - 8 - offsetY}px`;
+    }
+
+    function showInput(
+      view: EditorView,
+      href: string,
+      from?: number,
+      to?: number,
+    ) {
+      if (!inputEl || !inputField) return;
+
+      // Save selection range
+      if (from !== undefined && to !== undefined) {
+        savedFrom = from;
+        savedTo = to;
+      } else {
+        savedFrom = view.state.selection.from;
+        savedTo = view.state.selection.to;
+      }
+
+      // Hide preview if showing
+      if (previewEl) previewEl.style.display = "none";
+
+      currentMode = "input";
+      inputField.value = href;
+      positionAbove(inputEl, view, savedFrom, savedTo);
+
+      // Focus field after a tick so positioning is settled
+      const field = inputField;
+      requestAnimationFrame(() => {
+        field.focus();
+        field.select();
+      });
+
+      // Register outside-click handler
+      removeOutsideClickHandler();
+      outsideClickHandler = (e: MouseEvent) => {
+        if (inputEl && !inputEl.contains(e.target as Node)) {
+          hideAll();
+          // Don't refocus editor here — user clicked somewhere intentionally
+        }
+      };
+      // Use setTimeout so the current click doesn't immediately trigger it
+      setTimeout(() => {
+        if (outsideClickHandler) {
+          document.addEventListener("mousedown", outsideClickHandler, true);
+        }
+      }, 0);
+    }
+
+    function showPreview(view: EditorView, range: LinkRange) {
+      if (!previewEl) return;
+
+      currentMode = "preview";
+      const urlSpan = previewEl.querySelector(".tiptap-link-preview-url");
+      if (urlSpan) {
+        // Truncate display URL
+        const display =
+          range.href.length > 40 ? range.href.slice(0, 40) + "…" : range.href;
+        urlSpan.textContent = display;
+        urlSpan.setAttribute("title", range.href);
+      }
+
+      positionAbove(previewEl, view, range.from, range.to);
+    }
+
+    function hideAll() {
+      if (inputEl) inputEl.style.display = "none";
+      if (previewEl) previewEl.style.display = "none";
+      currentMode = "hidden";
+      removeOutsideClickHandler();
+    }
+
+    function removeOutsideClickHandler() {
+      if (outsideClickHandler) {
+        document.removeEventListener("mousedown", outsideClickHandler, true);
+        outsideClickHandler = null;
+      }
+    }
+
+    function confirmLink() {
+      if (!inputField) return;
+      const url = inputField.value.trim();
+      hideAll();
+
+      if (url) {
+        // Restore selection and apply link
+        editor
+          .chain()
+          .focus()
+          .setTextSelection({ from: savedFrom, to: savedTo })
+          .setLink({ href: url })
+          .run();
+      } else {
+        // Empty URL — remove link if one existed
+        editor
+          .chain()
+          .focus()
+          .setTextSelection({ from: savedFrom, to: savedTo })
+          .unsetLink()
+          .run();
+      }
+
+      // Suppress the next update so the newly-created link doesn't trigger preview
+      suppressNextUpdate = true;
+    }
+
+    return [
+      new Plugin({
+        key: linkToolbarKey,
+        view(editorView) {
+          createElements();
+          const dialog = editorView.dom.closest("dialog");
+          if (inputEl) (dialog ?? document.body).appendChild(inputEl);
+          if (previewEl) (dialog ?? document.body).appendChild(previewEl);
+
+          // Listen for bubble menu link button
+          const handler = () => {
+            showInput(editorView, "");
+          };
+          editorView.dom.addEventListener("tiptap:open-link-input", handler);
+
+          return {
+            update(view) {
+              if (suppressNextUpdate) {
+                suppressNextUpdate = false;
+                return;
+              }
+
+              // While input is open, just reposition
+              if (currentMode === "input") {
+                if (inputEl) {
+                  positionAbove(inputEl, view, savedFrom, savedTo);
+                }
+                return;
+              }
+
+              // Detect link under cursor for preview mode
+              const range = getLinkRange(view.state);
+              if (range) {
+                showPreview(view, range);
+              } else if (currentMode === "preview") {
+                hideAll();
+              }
+            },
+            destroy() {
+              editorView.dom.removeEventListener(
+                "tiptap:open-link-input",
+                handler,
+              );
+              removeOutsideClickHandler();
+              inputEl?.remove();
+              previewEl?.remove();
+              inputEl = null;
+              previewEl = null;
+              currentMode = "hidden";
+            },
+          };
+        },
+      }),
+    ];
+  },
+});

package/src/client/tiptap/more-break.ts

@@ -0,0 +1,50 @@
+/**
+ * MoreBreak Node Extension
+ *
+ * Custom Tiptap node that renders as a dashed "Read More" separator.
+ * Atom node — not editable, but selectable and deletable.
+ * Server-side renders to <!--more--> for excerpt splitting.
+ */
+
+import { Node } from "@tiptap/core";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    moreBreak: {
+      insertMoreBreak: () => ReturnType;
+    };
+  }
+}
+
+export const MoreBreak = Node.create({
+  name: "moreBreak",
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: false,
+
+  parseHTML() {
+    return [{ tag: "div[data-more-break]" }];
+  },
+
+  renderHTML() {
+    return [
+      "div",
+      {
+        "data-more-break": "",
+        class: "tiptap-more-break",
+      },
+      "Read More ↓",
+    ];
+  },
+
+  addCommands() {
+    return {
+      insertMoreBreak:
+        () =>
+        ({ commands }) => {
+          return commands.insertContent({ type: this.name });
+        },
+    };
+  },
+});

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

@@ -0,0 +1,140 @@
+/**
+ * Paste Image Extension
+ *
+ * Intercepts paste events containing images and either:
+ * - Uploads inline (if post has a title → image becomes part of body)
+ * - Dispatches as attachment (if no title → goes to attachment strip)
+ */
+
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+const pasteImagePluginKey = new PluginKey("pasteImage");
+
+export const PasteImage = Extension.create({
+  name: "pasteImage",
+
+  addStorage() {
+    return {
+      hasTitle: false,
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const extension = this;
+
+    return [
+      new Plugin({
+        key: pasteImagePluginKey,
+        props: {
+          handlePaste(view, event) {
+            const items = event.clipboardData?.items;
+            if (!items) return false;
+
+            const imageFiles: File[] = [];
+            for (const item of items) {
+              if (item.type.startsWith("image/")) {
+                const file = item.getAsFile();
+                if (file) imageFiles.push(file);
+              }
+            }
+
+            if (imageFiles.length === 0) return false;
+
+            event.preventDefault();
+
+            const hasTitle = extension.storage.hasTitle;
+
+            if (hasTitle) {
+              // Upload and insert inline
+              for (const file of imageFiles) {
+                uploadAndInsertImage(file, extension.editor);
+              }
+            } else {
+              // Dispatch as attachment (existing flow)
+              const files = imageFiles.map((file) => ({
+                file,
+                clientId: crypto.randomUUID(),
+              }));
+              document.dispatchEvent(
+                new CustomEvent("jant:files-selected", {
+                  bubbles: true,
+                  detail: { files },
+                }),
+              );
+            }
+
+            return true;
+          },
+        },
+      }),
+    ];
+  },
+});
+
+async function uploadAndInsertImage(
+  file: File,
+  editor: import("@tiptap/core").Editor,
+) {
+  // Insert placeholder
+  const placeholderUrl = URL.createObjectURL(file);
+  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 };
+
+    // Replace placeholder URL with actual URL in the document
+    const { doc } = editor.state;
+    let replaced = false;
+    doc.descendants((node, pos) => {
+      if (
+        replaced ||
+        node.type.name !== "image" ||
+        node.attrs.src !== placeholderUrl
+      ) {
+        return;
+      }
+
+      editor
+        .chain()
+        .focus()
+        .command(({ tr }) => {
+          tr.setNodeMarkup(pos, undefined, {
+            ...node.attrs,
+            src: data.url,
+          });
+          return true;
+        })
+        .run();
+      replaced = true;
+    });
+  } catch {
+    // Remove the placeholder image on failure
+    const { doc } = editor.state;
+    doc.descendants((node, pos) => {
+      if (node.type.name === "image" && node.attrs.src === placeholderUrl) {
+        editor
+          .chain()
+          .command(({ tr }) => {
+            tr.delete(pos, pos + node.nodeSize);
+            return true;
+          })
+          .run();
+      }
+    });
+  } finally {
+    URL.revokeObjectURL(placeholderUrl);
+  }
+}