feat: add a "git blame" esque hover over for Markdown text

js/app/packages/block-md/component/MarkdownEditor.tsx

@@ -71,6 +71,11 @@ import {
   wordcountPlugin,
 } from '@core/component/LexicalMarkdown/plugins';
 import { actionsPlugin } from '@core/component/LexicalMarkdown/plugins/actions/actionsPlugin';
+import {
+  BlameTooltip,
+  blameTooltipPlugin,
+  createBlameTooltipStore,
+} from '@core/component/LexicalMarkdown/plugins/blame-tooltip';
 import {
   CONVERT_CHECKBOXES_TO_TASKS,
   checkboxToTaskPlugin,
@@ -920,6 +925,9 @@ export function MarkdownEditor(props: {
     },
   });
 
+  const [blameTooltipStore, setBlameTooltipStore] = createBlameTooltipStore();
+  plugins.use(blameTooltipPlugin({ setState: (s) => setBlameTooltipStore(s) }));
+
   const [wordcountStats, setWordcountStats] = createWordcountStatsStore();
   plugins.use(
     wordcountPlugin({ setStore: setWordcountStats, debounceTime: 200 })
@@ -1003,6 +1011,7 @@ export function MarkdownEditor(props: {
             {getBlankMarkdownPlaceholder(canEdit())}
           </div>
         </Show>
+        <BlameTooltip state={blameTooltipStore} documentId={blockId} />
         <DecoratorRenderer editor={editor} />
         <NodeAccessoryRenderer editor={editor} store={accessoryStore} />
 

js/app/packages/core/component/LexicalMarkdown/plugins/blame-tooltip/BlameTooltip.tsx

@@ -0,0 +1,109 @@
+import { UserIcon } from '@core/component/UserIcon';
+import { ENABLE_GIT_BLAME } from '@core/constant/featureFlags';
+import { macroIdToEmail, tryMacroId, useDisplayNameParts } from '@core/user';
+import { formatRelativeTimestamp } from '@entity';
+import { syncServiceClient } from '@service-sync/client';
+import { createScheduled, debounce } from '@solid-primitives/scheduled';
+import { createQuery } from '@tanstack/solid-query';
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  Show,
+  untrack,
+} from 'solid-js';
+import type { Store } from 'solid-js/store';
+import type { BlameTooltipState } from './blameTooltipPlugin';
+
+const FETCH_DELAY_MS = 400;
+const SHOW_DELAY_MS = 500;
+
+function UserLine(props: { userId: string; editedAt: Date }) {
+  const macroId = tryMacroId(props.userId);
+  const { firstName } = useDisplayNameParts(macroId);
+  const name = () =>
+    firstName() || (macroId ? macroIdToEmail(macroId) : props.userId);
+
+  return (
+    <span class="inline-flex items-center gap-1">
+      <UserIcon id={props.userId} size="sm" suppressClick showTooltip={false} />
+      {name()}, {formatRelativeTimestamp(props.editedAt)}
+    </span>
+  );
+}
+
+export function BlameTooltip(props: {
+  state: Store<BlameTooltipState>;
+  documentId: string;
+}) {
+  const [visible, setVisible] = createSignal(false);
+  let shownAtX = 0;
+  let shownAtY = 0;
+  let showTimer: ReturnType<typeof setTimeout> | null = null;
+
+  // Only commits to a new nodeId after FETCH_DELAY_MS of hover stillness.
+  const scheduled = createScheduled((fn) => debounce(fn, FETCH_DELAY_MS));
+  const queriedNodeId = createMemo<string | null>((prev) => {
+    const active = props.state.hovering ? props.state.nodeId : null;
+    return scheduled() ? active : prev;
+  }, null);
+
+  const hide = () => {
+    if (showTimer) clearTimeout(showTimer);
+    showTimer = null;
+    setVisible(false);
+  };
+
+  const query = createQuery(() => ({
+    queryKey: ['blame', props.documentId, queriedNodeId()],
+    queryFn: async () => {
+      const res = await syncServiceClient.getNodeBlame({
+        documentId: props.documentId,
+        nodeId: queriedNodeId()!,
+      });
+      return res.isOk() ? res.value : null;
+    },
+    enabled: ENABLE_GIT_BLAME() && queriedNodeId() !== null,
+    staleTime: Infinity,
+  }));
+
+  // Drive visibility based on cursor stillness (x/y).
+  createEffect(() => {
+    const { hovering, x, y } = props.state;
+
+    if (!hovering) return hide();
+
+    // After shown: any pointer move dismisses.
+    if (untrack(visible)) {
+      if (x !== shownAtX || y !== shownAtY) hide();
+      return;
+    }
+
+    // Pre-show: each move restarts the show timer.
+    if (showTimer) clearTimeout(showTimer);
+    showTimer = setTimeout(() => {
+      shownAtX = x;
+      shownAtY = y;
+      setVisible(true);
+    }, SHOW_DELAY_MS);
+  });
+
+  onCleanup(hide);
+
+  return (
+    <Show when={visible() && query.data?.userId ? query.data : null}>
+      {(b) => (
+        <div
+          class="fixed z-50 text-xs text-ink-secondary/70 pointer-events-none"
+          style={{
+            left: `${props.state.x + 12}px`,
+            top: `${props.state.y + 12}px`,
+          }}
+        >
+          <UserLine userId={b().userId!} editedAt={b().editedAt} />
+        </div>
+      )}
+    </Show>
+  );
+}

js/app/packages/core/component/LexicalMarkdown/plugins/blame-tooltip/blameTooltipPlugin.ts

@@ -0,0 +1,108 @@
+import { isTouchDevice } from '@core/mobile/isTouchDevice';
+import { mergeRegister } from '@lexical/utils';
+import { $getId } from '@lexical-core';
+import {
+  $getNearestNodeFromDOMNode,
+  $isTextNode,
+  type LexicalEditor,
+  type LexicalNode,
+} from 'lexical';
+import { createStore } from 'solid-js/store';
+
+export type BlameTooltipState = {
+  hovering: boolean;
+  x: number;
+  y: number;
+  nodeId: string | null;
+};
+
+export function createBlameTooltipStore() {
+  return createStore<BlameTooltipState>({
+    hovering: false,
+    x: 0,
+    y: 0,
+    nodeId: null,
+  });
+}
+
+type BlameTooltipPluginProps = {
+  setState: (state: Partial<BlameTooltipState>) => void;
+};
+
+/**
+ * Given a DOM element under the cursor, find the stable Lexical id of the
+ * nearest ancestor text-bearing node. Must be called inside `editor.read()`
+ * so the Lexical state is readable.
+ *
+ * Returns null when the cursor isn't over a text node, or when no ancestor
+ * has been assigned a stable id yet (typically transient nodes).
+ */
+function $resolveHoveredNodeId(target: HTMLElement): string | null {
+  const node = $getNearestNodeFromDOMNode(target);
+  if (!node || !$isTextNode(node)) return null;
+
+  let cursor: LexicalNode | null = node;
+  while (cursor) {
+    const id = $getId(cursor);
+    if (id) return id;
+    cursor = cursor.getParent();
+  }
+  return null;
+}
+
+function registerBlameTooltipPlugin(
+  editor: LexicalEditor,
+  props: BlameTooltipPluginProps
+) {
+  const handlePointerMove = (e: MouseEvent) => {
+    if (isTouchDevice()) return;
+    const target = e.target;
+    if (!(target instanceof HTMLElement)) {
+      props.setState({ hovering: false, nodeId: null });
+      return;
+    }
+
+    // Suppress while the user has a text selection — that's when the
+    // formatting popup shows and the tooltip would compete with it.
+    const sel = window.getSelection();
+    if (sel && !sel.isCollapsed && sel.toString().length > 0) {
+      props.setState({ hovering: false, nodeId: null });
+      return;
+    }
+
+    const nodeId = editor.read(() => $resolveHoveredNodeId(target));
+    if (nodeId === null) {
+      props.setState({ hovering: false, nodeId: null });
+      return;
+    }
+    props.setState({
+      hovering: true,
+      x: e.clientX,
+      y: e.clientY,
+      nodeId,
+    });
+  };
+
+  const dismiss = () => {
+    props.setState({ hovering: false, nodeId: null });
+  };
+
+  return mergeRegister(
+    editor.registerRootListener((root, prevRoot) => {
+      if (root) {
+        root.addEventListener('pointermove', handlePointerMove);
+        root.addEventListener('pointerleave', dismiss);
+        root.addEventListener('pointerdown', dismiss);
+      }
+      if (prevRoot) {
+        prevRoot.removeEventListener('pointermove', handlePointerMove);
+        prevRoot.removeEventListener('pointerleave', dismiss);
+        prevRoot.removeEventListener('pointerdown', dismiss);
+      }
+    })
+  );
+}
+
+export function blameTooltipPlugin(props: BlameTooltipPluginProps) {
+  return (editor: LexicalEditor) => registerBlameTooltipPlugin(editor, props);
+}

js/app/packages/core/component/LexicalMarkdown/plugins/blame-tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from './BlameTooltip';
+export * from './blameTooltipPlugin';

js/app/packages/core/component/LexicalMarkdown/plugins/index.ts

@@ -1,5 +1,6 @@
 export * from './actions';
 export * from './await';
+export * from './blame-tooltip';
 export * from './checklist';
 export * from './code';
 export * from './comments';

js/app/packages/core/component/LexicalMarkdown/plugins/pluginManager.ts

@@ -21,7 +21,7 @@ import { checklistPlugin } from './checklist/';
 import { customDeletePlugin } from './custom-delete';
 import { markdownShortcutsPlugin } from './markdown-shortcuts';
 
-type PluginFunction = (editor: LexicalEditor) => () => void;
+export type PluginFunction = (editor: LexicalEditor) => () => void;
 
 /**
  * Create a binding between a LexicalEditor and the ability to register plugins

js/app/packages/core/component/TopBar/ShareButton.tsx

@@ -291,7 +291,7 @@ function MobileShareDrawer(props: MobileShareDrawerProps) {
 
   const mobileTabs = createMemo((): TabItem[] => {
     const tabs: TabItem[] = [{ value: 'share', label: 'Share' }];
-    if ((props.recipients?.length ?? 0) > 0 || !!props.owner)
+    if ((props.recipients?.length ?? 0) > 0 || props.owner)
       tabs.push({ value: 'people', label: 'People' });
     if (
       props.userPermissions === Permissions.OWNER &&

js/app/packages/core/constant/featureFlags.ts

@@ -154,6 +154,15 @@ export const ENABLE_BEARER_TOKEN_AUTH = resolveFeatureFlag(
   false
 );
 
+export const ENABLE_GIT_BLAME_FLAG = 'enable-git-blame';
+export const ENABLE_GIT_BLAME_OVERRIDE =
+  resolveFeatureFlag('ENABLE_GIT_BLAME', DEV_MODE_ENV) || undefined;
+
+export function ENABLE_GIT_BLAME(): boolean {
+  if (ENABLE_GIT_BLAME_OVERRIDE !== undefined) return ENABLE_GIT_BLAME_OVERRIDE;
+  return analytics.posthog.isFeatureEnabled(ENABLE_GIT_BLAME_FLAG) ?? false;
+}
+
 export const ENABLE_MARKDOWN_SEARCH_TEXT = resolveFeatureFlag(
   'ENABLE_MARKDOWN_SEARCH_TEXT',
   DEV_MODE_ENV

js/app/packages/service-clients/service-sync/client.ts

@@ -179,6 +179,36 @@ export const syncServiceClient = {
 
     return ok(response.value as MetadataResponse);
   },
+  /**
+   * Look up who last edited a given Lexical node and when. `user_id` is a
+   * MacroId resolved server-side; `null` if the peer has no recorded user
+   * (anonymous edits or legacy data not yet mirrored locally).
+   */
+  async getNodeBlame(args: { documentId: string; nodeId: string }) {
+    const token = await getPermissionToken('document', args.documentId);
+
+    const response = await syncFetch<{
+      peer_id: string;
+      user_id: string | null;
+      timestamp_ms: number;
+    }>(`/document/${args.documentId}/blame/${args.nodeId}`, {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      method: 'GET',
+    });
+
+    if (response.isErr()) {
+      return err(response.error);
+    }
+    const { peer_id, user_id, timestamp_ms } = response.value;
+    return ok({
+      peerId: peer_id,
+      userId: user_id,
+      editedAt: new Date(timestamp_ms),
+    });
+  },
   async getSnapshot(args: { documentId: string }) {
     const token = await getPermissionToken('document', args.documentId);
     const response = await platformFetch(

rust/sync-service/database/user-peer-mapping/migrations/0002_add_blame.sql

@@ -0,0 +1,7 @@
+CREATE TABLE blame (
+    document_id  TEXT NOT NULL,
+    node_id      TEXT NOT NULL,
+    peer_id      TEXT NOT NULL,
+    timestamp_ms INTEGER NOT NULL,
+    PRIMARY KEY (document_id, node_id)
+);