@tribe-nest/forge 1.13.0

package/src/ui/headless/community/lexical.ts

@@ -0,0 +1,131 @@
+// Dependency-free Lexical-state helpers. Community post/reply bodies are stored
+// as Lexical JSON on the backend (which flattens them server-side via
+// services/community/lexical.ts). Forge composes states from plain text +
+// mention tokens and renders them without pulling the Lexical runtime in —
+// mirrors the ChatRoom philosophy of zero heavyweight editor deps.
+
+export interface LexicalNodeJson {
+  type: string;
+  version: number;
+  [key: string]: unknown;
+  children?: LexicalNodeJson[];
+}
+
+export interface MentionRef {
+  accountId: string;
+  /** The display name the token was inserted with (rendered as @name). */
+  name: string;
+}
+
+const textNode = (text: string): LexicalNodeJson => ({
+  type: "text",
+  version: 1,
+  text,
+  detail: 0,
+  format: 0,
+  mode: "normal",
+  style: "",
+});
+
+// The backend mention parser (extractMentionAccountIds) accepts the target
+// account under accountId | id | mentionId and reads `mentionName` for the
+// flattened text — we set both accountId and mentionName.
+const mentionNode = (mention: MentionRef): LexicalNodeJson => ({
+  type: "mention",
+  version: 1,
+  accountId: mention.accountId,
+  mentionName: mention.name,
+  text: `@${mention.name}`,
+  detail: 0,
+  format: 0,
+  mode: "segmented",
+  style: "",
+});
+
+const paragraphNode = (children: LexicalNodeJson[]): LexicalNodeJson => ({
+  type: "paragraph",
+  version: 1,
+  children,
+  direction: null,
+  format: "",
+  indent: 0,
+});
+
+/**
+ * Split one line of text into text + mention nodes. A mention only matches on
+ * its literal `@Name` token (the composer inserts them verbatim).
+ */
+function lineToChildren(line: string, mentions: MentionRef[]): LexicalNodeJson[] {
+  if (!mentions.length) return line ? [textNode(line)] : [];
+
+  // Longest names first so "@Ann Lee" wins over "@Ann".
+  const sorted = [...mentions].sort((a, b) => b.name.length - a.name.length);
+  const children: LexicalNodeJson[] = [];
+  let rest = line;
+
+  while (rest.length) {
+    let earliest: { index: number; mention: MentionRef } | null = null;
+    for (const mention of sorted) {
+      const idx = rest.indexOf(`@${mention.name}`);
+      if (idx !== -1 && (earliest === null || idx < earliest.index)) {
+        earliest = { index: idx, mention };
+      }
+    }
+    if (!earliest) {
+      children.push(textNode(rest));
+      break;
+    }
+    if (earliest.index > 0) children.push(textNode(rest.slice(0, earliest.index)));
+    children.push(mentionNode(earliest.mention));
+    rest = rest.slice(earliest.index + earliest.mention.name.length + 1);
+  }
+
+  return children;
+}
+
+/**
+ * Build a Lexical editor state (JSON) from plain text + mention refs. Each
+ * newline becomes a paragraph; `@Name` occurrences of tracked mentions become
+ * mention nodes the backend turns into notifications.
+ */
+export function buildLexicalState(text: string, mentions: MentionRef[] = []): { root: LexicalNodeJson } {
+  const lines = text.replace(/\r\n/g, "\n").split("\n");
+  return {
+    root: {
+      type: "root",
+      version: 1,
+      direction: null,
+      format: "",
+      indent: 0,
+      children: lines.map((line) => paragraphNode(lineToChildren(line, mentions))),
+    },
+  };
+}
+
+/** Which tracked mentions still literally appear in the text (post-edit). */
+export function mentionsInText(text: string, mentions: MentionRef[]): MentionRef[] {
+  return mentions.filter((m) => text.includes(`@${m.name}`));
+}
+
+const BLOCK_TYPES = new Set(["paragraph", "heading", "quote", "listitem", "code"]);
+
+/** Flatten a Lexical state (or any unknown JSON) to plain text — preview/fallback. */
+export function lexicalToPlainText(body: unknown): string {
+  if (!body || typeof body !== "object") return typeof body === "string" ? body : "";
+  const root = (body as { root?: LexicalNodeJson }).root ?? (body as LexicalNodeJson);
+  const parts: string[] = [];
+
+  const walk = (node: LexicalNodeJson) => {
+    if (typeof node.text === "string") parts.push(node.text as string);
+    else if (node.type === "mention" && typeof node.mentionName === "string") parts.push(`@${node.mentionName}`);
+    if (Array.isArray(node.children)) for (const child of node.children) walk(child);
+    if (node.type && BLOCK_TYPES.has(node.type)) parts.push("\n");
+  };
+
+  walk(root);
+  return parts
+    .join(" ")
+    .replace(/[ \t]+/g, " ")
+    .replace(/\s*\n\s*/g, "\n")
+    .trim();
+}

package/src/ui/headless/community/replyTree.ts

@@ -0,0 +1,51 @@
+import type { CommunityReply } from "../../../data/queries/useCommunity";
+
+export interface ReplyNode {
+  reply: CommunityReply;
+  children: ReplyNode[];
+  /** Depth in the FULL tree (0 = direct reply to the post). */
+  depth: number;
+}
+
+/**
+ * Assemble the nested reply tree from the flat, chronologically-ordered pages
+ * the API returns. Nesting is UNLIMITED in the data model; capping what is
+ * rendered (display cap 3 levels + "continue thread") is the component's job.
+ *
+ * Replies whose parent isn't in the loaded set (archived, or on an unloaded
+ * page) surface at the top level rather than disappearing.
+ */
+export function buildReplyTree(replies: CommunityReply[]): ReplyNode[] {
+  const nodes = new Map<string, ReplyNode>();
+  const roots: ReplyNode[] = [];
+
+  for (const reply of replies) {
+    nodes.set(reply.id, { reply, children: [], depth: 0 });
+  }
+  for (const reply of replies) {
+    const node = nodes.get(reply.id)!;
+    const parent = reply.parentReplyId ? nodes.get(reply.parentReplyId) : undefined;
+    if (parent) parent.children.push(node);
+    else roots.push(node);
+  }
+
+  const stamp = (list: ReplyNode[], depth: number) => {
+    for (const node of list) {
+      node.depth = depth;
+      stamp(node.children, depth + 1);
+    }
+  };
+  stamp(roots, 0);
+
+  return roots;
+}
+
+/** Find one node in a tree by reply id (used to re-root a "continue thread" view). */
+export function findReplyNode(tree: ReplyNode[], replyId: string): ReplyNode | null {
+  for (const node of tree) {
+    if (node.reply.id === replyId) return node;
+    const found = findReplyNode(node.children, replyId);
+    if (found) return found;
+  }
+  return null;
+}

package/src/ui/headless/community/richLexical.ts

@@ -0,0 +1,314 @@
+// DOM → Lexical-state serializer for the rich community composer. The
+// contentEditable div is the source of truth; here we walk its DOM and emit the
+// exact Lexical JSON shapes CommunityRichText renders and the create-post API
+// stores — WITHOUT pulling the Lexical runtime into forge. Mirrors the node
+// shapes in ./lexical.ts (buildLexicalState) so plain-text and rich content
+// round-trip through the same renderer.
+
+import type { LexicalNodeJson, MentionRef } from "./lexical";
+
+// Lexical text-format bitmask (matches CommunityRichText):
+const FORMAT_BOLD = 1;
+const FORMAT_ITALIC = 2;
+const FORMAT_STRIKETHROUGH = 4;
+const FORMAT_UNDERLINE = 8;
+
+interface InlineFormat {
+  format: number;
+  /** When inside an <a>, the nearest ancestor link URL. */
+  linkUrl: string | null;
+}
+
+const textNode = (text: string, format: number): LexicalNodeJson => ({
+  type: "text",
+  version: 1,
+  text,
+  detail: 0,
+  format,
+  mode: "normal",
+  style: "",
+});
+
+const mentionNode = (accountId: string, name: string): LexicalNodeJson => ({
+  type: "mention",
+  version: 1,
+  accountId,
+  mentionName: name,
+  text: `@${name}`,
+  detail: 0,
+  format: 0,
+  mode: "segmented",
+  style: "",
+});
+
+const linebreakNode = (): LexicalNodeJson => ({ type: "linebreak", version: 1 });
+
+const linkNode = (url: string, children: LexicalNodeJson[]): LexicalNodeJson => ({
+  type: "link",
+  version: 1,
+  url,
+  rel: "noopener noreferrer",
+  target: "_blank",
+  title: null,
+  children,
+  direction: null,
+  format: "",
+  indent: 0,
+});
+
+const paragraphNode = (children: LexicalNodeJson[]): LexicalNodeJson => ({
+  type: "paragraph",
+  version: 1,
+  children,
+  direction: null,
+  format: "",
+  indent: 0,
+});
+
+const headingNode = (tag: string, children: LexicalNodeJson[]): LexicalNodeJson => ({
+  type: "heading",
+  version: 1,
+  tag,
+  children,
+  direction: null,
+  format: "",
+  indent: 0,
+});
+
+const quoteNode = (children: LexicalNodeJson[]): LexicalNodeJson => ({
+  type: "quote",
+  version: 1,
+  children,
+  direction: null,
+  format: "",
+  indent: 0,
+});
+
+const listNode = (listType: "bullet" | "number", children: LexicalNodeJson[]): LexicalNodeJson => ({
+  type: "list",
+  version: 1,
+  listType,
+  tag: listType === "number" ? "ol" : "ul",
+  start: 1,
+  children,
+  direction: null,
+  format: "",
+  indent: 0,
+});
+
+const listItemNode = (children: LexicalNodeJson[], value: number): LexicalNodeJson => ({
+  type: "listitem",
+  version: 1,
+  value,
+  children,
+  direction: null,
+  format: "",
+  indent: 0,
+});
+
+const isElement = (n: Node): n is HTMLElement => n.nodeType === 1;
+const isText = (n: Node): n is Text => n.nodeType === 3;
+
+/** Tag-driven format bits contributed by an inline wrapper element. */
+function tagFormatBit(tag: string): number {
+  switch (tag) {
+    case "b":
+    case "strong":
+      return FORMAT_BOLD;
+    case "i":
+    case "em":
+      return FORMAT_ITALIC;
+    case "u":
+      return FORMAT_UNDERLINE;
+    case "s":
+    case "strike":
+    case "del":
+      return FORMAT_STRIKETHROUGH;
+    default:
+      return 0;
+  }
+}
+
+/** Inline-format bits contributed by an element's own style attribute. */
+function styleFormatBits(el: HTMLElement): number {
+  let bits = 0;
+  const style = el.style;
+  const fw = style.fontWeight;
+  if (fw === "bold" || fw === "bolder" || (fw !== "" && Number(fw) >= 600)) bits |= FORMAT_BOLD;
+  if (style.fontStyle === "italic") bits |= FORMAT_ITALIC;
+  const deco = `${style.textDecoration} ${style.textDecorationLine}`;
+  if (deco.includes("underline")) bits |= FORMAT_UNDERLINE;
+  if (deco.includes("line-through")) bits |= FORMAT_STRIKETHROUGH;
+  return bits;
+}
+
+const BLOCK_TAGS = new Set(["p", "div", "ul", "ol", "li", "blockquote", "h1", "h2", "h3", "h4", "h5", "h6"]);
+
+/** Serialize inline content (text runs, mentions, links, <br>) under a block. */
+function serializeInline(nodes: NodeListOf<ChildNode> | ChildNode[], inherited: InlineFormat): LexicalNodeJson[] {
+  const out: LexicalNodeJson[] = [];
+
+  const push = (child: LexicalNodeJson) => {
+    // Wrap text/mention runs in a link node if we're inside an <a>.
+    if (inherited.linkUrl) {
+      const last = out[out.length - 1];
+      if (last && last.type === "link" && last.url === inherited.linkUrl && Array.isArray(last.children)) {
+        last.children.push(child);
+        return;
+      }
+      out.push(linkNode(inherited.linkUrl, [child]));
+      return;
+    }
+    out.push(child);
+  };
+
+  nodes.forEach((node) => {
+    if (isText(node)) {
+      const text = node.textContent ?? "";
+      if (text.length) push(textNode(text, inherited.format));
+      return;
+    }
+    if (!isElement(node)) return;
+
+    const tag = node.tagName.toLowerCase();
+
+    if (tag === "br") {
+      push(linebreakNode());
+      return;
+    }
+
+    // Mention chip: a non-editable span carrying the account id.
+    const accountId = node.getAttribute("data-account-id");
+    if (accountId) {
+      const name = (node.getAttribute("data-mention-name") ?? node.textContent ?? "").replace(/^@/, "");
+      push(mentionNode(accountId, name));
+      return;
+    }
+
+    if (tag === "a") {
+      const url = node.getAttribute("href") || "#";
+      const nested = serializeInline(node.childNodes, { format: inherited.format, linkUrl: url });
+      // serializeInline already wraps in link nodes when linkUrl is set.
+      for (const child of nested) push(child);
+      return;
+    }
+
+    // Inline formatting wrapper (b/strong/i/em/u/s) or a styled span.
+    const nextFormat = inherited.format | tagFormatBit(tag) | styleFormatBits(node);
+    const nested = serializeInline(node.childNodes, { format: nextFormat, linkUrl: inherited.linkUrl });
+    for (const child of nested) push(child);
+  });
+
+  return out;
+}
+
+/**
+ * Walk block-level children of the contentEditable root, emitting paragraph /
+ * heading / quote / list block nodes. Loose inline nodes at the root (text the
+ * browser left un-wrapped) collect into an implicit paragraph.
+ */
+function serializeBlocks(root: HTMLElement): LexicalNodeJson[] {
+  const blocks: LexicalNodeJson[] = [];
+  let looseInline: LexicalNodeJson[] = [];
+
+  const flushLoose = () => {
+    if (looseInline.length) {
+      blocks.push(paragraphNode(looseInline));
+      looseInline = [];
+    }
+  };
+
+  const emitList = (el: HTMLElement) => {
+    const listType: "bullet" | "number" = el.tagName.toLowerCase() === "ol" ? "number" : "bullet";
+    const items: LexicalNodeJson[] = [];
+    let value = 1;
+    el.childNodes.forEach((li) => {
+      if (isElement(li) && li.tagName.toLowerCase() === "li") {
+        // Nested lists inside an <li> render as their own list block below the
+        // item content; keep it lean by flattening inline content only.
+        const inline = serializeInline(li.childNodes, { format: 0, linkUrl: null });
+        items.push(listItemNode(inline, value));
+        value += 1;
+      }
+    });
+    if (items.length) blocks.push(listNode(listType, items));
+  };
+
+  const emitBlockElement = (el: HTMLElement) => {
+    const tag = el.tagName.toLowerCase();
+    if (tag === "ul" || tag === "ol") {
+      flushLoose();
+      emitList(el);
+      return;
+    }
+    if (tag === "blockquote") {
+      flushLoose();
+      blocks.push(quoteNode(serializeInline(el.childNodes, { format: 0, linkUrl: null })));
+      return;
+    }
+    if (tag === "h1" || tag === "h2" || tag === "h3" || tag === "h4" || tag === "h5" || tag === "h6") {
+      flushLoose();
+      blocks.push(headingNode(tag, serializeInline(el.childNodes, { format: 0, linkUrl: null })));
+      return;
+    }
+    // p / div → paragraph.
+    flushLoose();
+    blocks.push(paragraphNode(serializeInline(el.childNodes, { format: 0, linkUrl: null })));
+  };
+
+  root.childNodes.forEach((node) => {
+    if (isText(node)) {
+      const text = node.textContent ?? "";
+      if (text.length) looseInline.push(textNode(text, 0));
+      return;
+    }
+    if (!isElement(node)) return;
+    const tag = node.tagName.toLowerCase();
+    if (tag === "br") {
+      looseInline.push(linebreakNode());
+      return;
+    }
+    if (BLOCK_TAGS.has(tag)) {
+      emitBlockElement(node);
+      return;
+    }
+    // Inline element sitting directly at root → gather into a paragraph.
+    for (const child of serializeInline([node], { format: 0, linkUrl: null })) looseInline.push(child);
+  });
+
+  flushLoose();
+  if (!blocks.length) blocks.push(paragraphNode([]));
+  return blocks;
+}
+
+/** Serialize a contentEditable root element to a Lexical editor state. */
+export function serializeRichToLexical(root: HTMLElement): { root: LexicalNodeJson } {
+  return {
+    root: {
+      type: "root",
+      version: 1,
+      direction: null,
+      format: "",
+      indent: 0,
+      children: serializeBlocks(root),
+    },
+  };
+}
+
+/** Collect unique mention refs (chips) present in a contentEditable root. */
+export function collectMentions(root: HTMLElement): MentionRef[] {
+  const seen = new Map<string, MentionRef>();
+  root.querySelectorAll<HTMLElement>("[data-account-id]").forEach((el) => {
+    const accountId = el.getAttribute("data-account-id");
+    if (!accountId || seen.has(accountId)) return;
+    const name = (el.getAttribute("data-mention-name") ?? el.textContent ?? "").replace(/^@/, "");
+    seen.set(accountId, { accountId, name });
+  });
+  return [...seen.values()];
+}
+
+/** Whether the editor holds any real content (text or a mention chip). */
+export function isRichEmpty(root: HTMLElement): boolean {
+  if (root.querySelector("[data-account-id]")) return false;
+  return (root.textContent ?? "").trim().length === 0;
+}

package/src/ui/headless/community/useCommunityAttachmentUpload.ts

@@ -0,0 +1,137 @@
+import axios from "axios";
+import { useCallback, useRef, useState } from "react";
+import { useForge } from "../../../provider/ForgeProvider";
+import { attachmentKind, type AttachmentKind } from "../chat/attachmentKind";
+import type { CommunityAttachmentInput } from "../../../data/queries/useCommunity";
+
+export interface PendingCommunityAttachment {
+  id: string;
+  file: File;
+  kind: AttachmentKind;
+  /** objectURL for image/video/audio local preview, revoked on clear/remove. */
+  previewUrl?: string;
+  progress: number;
+  status: "pending" | "uploading" | "done" | "error";
+  uploaded?: CommunityAttachmentInput;
+}
+
+const MAX_ATTACHMENTS = 10;
+/** Max size for a single community attachment (100MB). Mirrors the backend cap. */
+export const MAX_COMMUNITY_ATTACHMENT_BYTES = 100 * 1024 * 1024;
+let counter = 0;
+const nextId = () => `catt-${Date.now()}-${counter++}`;
+
+/** Map the shared preview kind onto the community attachment enum the API accepts. */
+const toApiType = (kind: AttachmentKind): CommunityAttachmentInput["type"] => {
+  if (kind === "image" || kind === "video" || kind === "audio") return kind;
+  if (kind === "pdf") return "document";
+  return "other";
+};
+
+/**
+ * Headless attachment composer for community posts/replies: stage local files
+ * (with previews), upload to R2 via the member-scoped presigned endpoint
+ * (POST /public/community/attachments/presigned-url — same flow as chat's
+ * useChatAttachmentUpload), and hand back `CommunityAttachmentInput[]`.
+ */
+export function useCommunityAttachmentUpload() {
+  const { client, profileId } = useForge();
+  const [pending, setPending] = useState<PendingCommunityAttachment[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const pendingRef = useRef<PendingCommunityAttachment[]>([]);
+  pendingRef.current = pending;
+
+  const patch = useCallback((id: string, updates: Partial<PendingCommunityAttachment>) => {
+    setPending((prev) => prev.map((p) => (p.id === id ? { ...p, ...updates } : p)));
+  }, []);
+
+  const addFiles = useCallback((files: FileList | File[]) => {
+    const incoming = Array.from(files);
+    const oversized = incoming.filter((f) => f.size > MAX_COMMUNITY_ATTACHMENT_BYTES);
+    const allowed = incoming.filter((f) => f.size <= MAX_COMMUNITY_ATTACHMENT_BYTES);
+    setError(
+      oversized.length
+        ? `${oversized.length === 1 ? `"${oversized[0].name}" exceeds` : `${oversized.length} files exceed`} the 100MB limit and ${oversized.length === 1 ? "was" : "were"} skipped.`
+        : null,
+    );
+    setPending((prev) => {
+      const room = MAX_ATTACHMENTS - prev.length;
+      const next = allowed.slice(0, Math.max(0, room)).map((file) => {
+        const kind = attachmentKind({ fileType: file.type, fileName: file.name });
+        const previewUrl =
+          typeof URL !== "undefined" && (kind === "image" || kind === "video" || kind === "audio")
+            ? URL.createObjectURL(file)
+            : undefined;
+        return { id: nextId(), file, kind, previewUrl, progress: 0, status: "pending" as const };
+      });
+      return [...prev, ...next];
+    });
+  }, []);
+
+  const removeFile = useCallback((id: string) => {
+    setPending((prev) => {
+      const target = prev.find((p) => p.id === id);
+      if (target?.previewUrl) URL.revokeObjectURL(target.previewUrl);
+      return prev.filter((p) => p.id !== id);
+    });
+  }, []);
+
+  const clear = useCallback(() => {
+    pendingRef.current.forEach((p) => p.previewUrl && URL.revokeObjectURL(p.previewUrl));
+    setPending([]);
+    setError(null);
+  }, []);
+
+  /** Upload every staged file and return the send-ready attachment inputs. */
+  const uploadAll = useCallback(async (): Promise<CommunityAttachmentInput[]> => {
+    const items = pendingRef.current;
+    const uploaded: CommunityAttachmentInput[] = [];
+
+    for (const item of items) {
+      if (item.status === "done" && item.uploaded) {
+        uploaded.push(item.uploaded);
+        continue;
+      }
+      patch(item.id, { status: "uploading", progress: 0 });
+      try {
+        const { data } = await client.post<{ presignedUrl: string; remoteUrl: string }>(
+          "/public/community/attachments/presigned-url",
+          { fileName: item.file.name, profileId },
+        );
+        await axios.put(data.presignedUrl, item.file, {
+          headers: { "Content-Type": item.file.type || "application/octet-stream" },
+          onUploadProgress: (e) => {
+            const total = e.total ?? item.file.size;
+            if (total) patch(item.id, { progress: Math.round((e.loaded / total) * 100) });
+          },
+        });
+        const attachment: CommunityAttachmentInput = {
+          url: data.remoteUrl,
+          type: toApiType(item.kind),
+          size: item.file.size,
+          name: item.file.name,
+        };
+        patch(item.id, { status: "done", progress: 100, uploaded: attachment });
+        uploaded.push(attachment);
+      } catch (err) {
+        patch(item.id, { status: "error" });
+        setError(`Couldn't upload "${item.file.name}". Please try again.`);
+        throw err;
+      }
+    }
+
+    return uploaded;
+  }, [client, profileId, patch]);
+
+  return {
+    pending,
+    error,
+    addFiles,
+    removeFile,
+    uploadAll,
+    clear,
+    isUploading: pending.some((p) => p.status === "uploading"),
+    hasPending: pending.length > 0,
+    canAddMore: pending.length < MAX_ATTACHMENTS,
+  };
+}