@beyondwork/docx-react-component 1.0.41 → 1.0.42

package/src/runtime/comment-presentation.ts

@@ -0,0 +1,223 @@
+import * as Y from "yjs";
+
+import type {
+  CommentAudience,
+  CommentAttachment,
+  CommentBody,
+  CommentLabel,
+  CommentMention,
+  CommentPresentation,
+  CommentPresentationAction,
+  CommentPresentationReply,
+  CommentPresentationSnapshot,
+  CommentReaction,
+} from "../api/comment-presentation-types.ts";
+import { sanitizeMarkdown, sha256Hex } from "./markdown-sanitizer.ts";
+
+const MAP_KEY = "commentPresentation";
+
+export interface PresentationStoreHandle {
+  get(commentId: string): CommentPresentation | undefined;
+  snapshot(): CommentPresentationSnapshot;
+  apply(action: CommentPresentationAction): Promise<CommentPresentation>;
+  ingestRemote(entry: CommentPresentation): void;
+  subscribe(fn: (changedIds: string[]) => void): () => void;
+  destroy(): void;
+}
+
+export function createPresentationStore(ydoc: Y.Doc): PresentationStoreHandle {
+  const yMap = ydoc.getMap<CommentPresentation>(MAP_KEY);
+  const listeners = new Set<(ids: string[]) => void>();
+
+  const onChange = (event: Y.YMapEvent<CommentPresentation>): void => {
+    if (listeners.size === 0) return;
+    const ids = Array.from(event.keysChanged);
+    for (const fn of listeners) fn(ids);
+  };
+  yMap.observe(onChange);
+
+  const seed = (commentId: string): CommentPresentation =>
+    yMap.get(commentId) ?? {
+      commentId,
+      audience: "internal",
+      body: emptyBody(),
+      replies: [],
+      mentions: [],
+      attachments: [],
+      reactions: [],
+      labels: [],
+    };
+
+  return {
+    get: (id) => cloneMaybe(yMap.get(id)),
+    snapshot: () => ({
+      schemaVersion: 1,
+      entries: Array.from(yMap.values()).map(clone),
+    }),
+    ingestRemote: (entry) => {
+      yMap.set(entry.commentId, clone(entry));
+    },
+    subscribe: (fn) => {
+      listeners.add(fn);
+      return () => {
+        listeners.delete(fn);
+      };
+    },
+    destroy: () => {
+      yMap.unobserve(onChange);
+      listeners.clear();
+    },
+    async apply(action) {
+      const prev = seed(action.commentId);
+      const next = await reducePresentation(prev, action);
+      yMap.set(action.commentId, next);
+      return clone(next);
+    },
+  };
+}
+
+export async function reducePresentation(
+  prev: CommentPresentation,
+  action: CommentPresentationAction,
+): Promise<CommentPresentation> {
+  switch (action.type) {
+    case "set-body": {
+      const body = await buildBody(action.text);
+      const next: CommentPresentation = { ...prev, body };
+      if (action.audience) next.audience = action.audience;
+      return next;
+    }
+    case "set-audience":
+      return { ...prev, audience: action.audience };
+    case "set-reply-body": {
+      const body = await buildBody(action.text);
+      return { ...prev, replies: upsertReply(prev.replies, action.entryId, body) };
+    }
+    case "add-mention":
+      return { ...prev, mentions: [...prev.mentions, { ...action.mention }] };
+    case "add-attachment":
+      return {
+        ...prev,
+        attachments: [...prev.attachments, { ...action.attachment }],
+      };
+    case "remove-attachment":
+      return {
+        ...prev,
+        attachments: prev.attachments.filter((a) => a.id !== action.attachmentId),
+      };
+    case "toggle-reaction": {
+      const match = (r: CommentReaction): boolean =>
+        r.emoji === action.emoji && r.authorId === action.authorId;
+      if (prev.reactions.some(match)) {
+        return { ...prev, reactions: prev.reactions.filter((r) => !match(r)) };
+      }
+      return {
+        ...prev,
+        reactions: [
+          ...prev.reactions,
+          {
+            emoji: action.emoji,
+            authorId: action.authorId,
+            reactedAt: action.now,
+          },
+        ],
+      };
+    }
+    case "set-labels":
+      return { ...prev, labels: action.labels.map((l) => ({ ...l })) };
+  }
+}
+
+async function buildBody(raw: string): Promise<CommentBody> {
+  const { text, sanitized } = sanitizeMarkdown(raw);
+  const digest = `sha256:${await sha256Hex(text)}`;
+  const body: CommentBody = { format: "markdown", text, digest };
+  if (sanitized) body.sanitized = true;
+  return body;
+}
+
+function emptyBody(): CommentBody {
+  return {
+    format: "markdown",
+    text: "",
+    digest:
+      "sha256:e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
+  };
+}
+
+function upsertReply(
+  replies: CommentPresentationReply[],
+  entryId: string,
+  body: CommentBody,
+): CommentPresentationReply[] {
+  const idx = replies.findIndex((r) => r.entryId === entryId);
+  if (idx < 0) return [...replies, { entryId, body }];
+  const next = replies.slice();
+  next[idx] = { entryId, body };
+  return next;
+}
+
+function clone(entry: CommentPresentation): CommentPresentation {
+  return {
+    commentId: entry.commentId,
+    audience: entry.audience,
+    body: cloneBody(entry.body),
+    replies: entry.replies.map((r) => ({
+      entryId: r.entryId,
+      body: cloneBody(r.body),
+    })),
+    mentions: entry.mentions.map(cloneMention),
+    attachments: entry.attachments.map(cloneAttachment),
+    reactions: entry.reactions.map((r) => ({ ...r })),
+    labels: entry.labels.map(cloneLabel),
+  };
+}
+
+function cloneMaybe(
+  entry: CommentPresentation | undefined,
+): CommentPresentation | undefined {
+  return entry ? clone(entry) : undefined;
+}
+
+function cloneBody(body: CommentBody): CommentBody {
+  const copy: CommentBody = {
+    format: body.format,
+    text: body.text,
+    digest: body.digest,
+  };
+  if (body.sanitized) copy.sanitized = true;
+  return copy;
+}
+
+function cloneMention(mention: CommentMention): CommentMention {
+  const copy: CommentMention = {
+    userId: mention.userId,
+    displayName: mention.displayName,
+    offsetInBody: mention.offsetInBody,
+  };
+  if (mention.entryId !== undefined) copy.entryId = mention.entryId;
+  return copy;
+}
+
+function cloneAttachment(a: CommentAttachment): CommentAttachment {
+  const copy: CommentAttachment = {
+    id: a.id,
+    kind: a.kind,
+    displayName: a.displayName,
+  };
+  if (a.mimeType !== undefined) copy.mimeType = a.mimeType;
+  if (a.relationshipId !== undefined) copy.relationshipId = a.relationshipId;
+  if (a.href !== undefined) copy.href = a.href;
+  if (a.byteLength !== undefined) copy.byteLength = a.byteLength;
+  if (a.width !== undefined) copy.width = a.width;
+  if (a.height !== undefined) copy.height = a.height;
+  return copy;
+}
+
+function cloneLabel(label: CommentLabel): CommentLabel {
+  const copy: CommentLabel = { key: label.key, text: label.text };
+  if (label.color !== undefined) copy.color = label.color;
+  return copy;
+}
+
+export type { CommentAudience };