feat(share): floating share bar for text selected in posts and comments

packages/shared/src/components/comments/CommentContainer.tsx

@@ -6,6 +6,7 @@ import type { Comment } from '../../graphql/comments';
 import { getCommentHash } from '../../graphql/comments';
 import type { Post } from '../../graphql/posts';
 import Markdown from '../Markdown';
+import { useSelectionShareArea } from '../post/SelectionShareProvider';
 import { ProfileImageLink } from '../profile/ProfileImageLink';
 import { ProfileLink } from '../profile/ProfileLink';
 import { ProfileTooltip } from '../profile/ProfileTooltip';
@@ -45,6 +46,11 @@ export interface CommentContainerProps {
   showContextHeader?: boolean;
   actions?: ReactNode;
   onClick?: () => void;
+  /**
+   * Opens a reply to this comment seeded with the given markdown quote. Without
+   * it the selection bar still copies and shares, it just cannot quote.
+   */
+  onQuote?: (markdownQuote: string) => void;
 }
 
 export default function CommentContainer({
@@ -61,7 +67,10 @@ export default function CommentContainer({
   showContextHeader,
   actions,
   onClick,
+  onQuote,
 }: CommentContainerProps): ReactElement {
+  // Scoped to the comment's own prose: not its header, badges or action row.
+  const contentRef = useSelectionShareArea({ post, comment, onQuote });
   const isCommentReferenced = commentHash === getCommentHash(comment.id);
   const { author } = comment;
   const companies = author?.companies;
@@ -174,12 +183,15 @@ export default function CommentContainer({
           linkToComment && 'pointer-events-none',
         )}
       >
-        <Markdown
-          className={className.markdown}
-          content={comment.contentHtml}
-          appendTooltipTo={appendTooltipTo}
-        />
-        <ContentEmbeds embeds={comment.contentEmbeds} variant="comment" />
+        {/* `display: contents` — a node for `Node.contains`, no layout box. */}
+        <div className="contents" data-selection-area ref={contentRef}>
+          <Markdown
+            className={className.markdown}
+            content={comment.contentHtml}
+            appendTooltipTo={appendTooltipTo}
+          />
+          <ContentEmbeds embeds={comment.contentEmbeds} variant="comment" />
+        </div>
         {actions}
       </div>
     </article>

packages/shared/src/components/comments/MainComment.tsx

@@ -13,6 +13,7 @@ import {
   LogEvent,
   NotificationCtaPlacement,
   NotificationPromptSource,
+  Origin,
   TargetType,
 } from '../../lib/log';
 import type { CommentMarkdownInputProps } from '../fields/MarkdownInput/CommentMarkdownInput';
@@ -170,6 +171,15 @@ export default function MainComment({
                 commentId: selected.id,
               })
             }
+            onQuote={(quote) =>
+              onReplyTo({
+                username: comment.author?.username ?? null,
+                parentCommentId: comment.id,
+                commentId: comment.id,
+                quote,
+                origin: Origin.TextSelection,
+              })
+            }
             onEdit={({ id, lastUpdatedAt }) =>
               onEdit({ commentId: id, lastUpdatedAt })
             }

packages/shared/src/components/comments/SubComment.tsx

@@ -6,6 +6,7 @@ import type { Comment } from '../../graphql/comments';
 import type { CommentBoxProps } from './CommentBox';
 import CommentBox from './CommentBox';
 import type { CommentMarkdownInputProps } from '../fields/MarkdownInput/CommentMarkdownInput';
+import { Origin } from '../../lib/log';
 import { useComments } from '../../hooks/post';
 import { useEditCommentProps } from '../../hooks/post/useEditCommentProps';
 
@@ -75,6 +76,15 @@ function SubComment({
               commentId: selected.id,
             })
           }
+          onQuote={(quote) =>
+            onReplyTo({
+              username: comment.author?.username ?? null,
+              parentCommentId: parentComment.id,
+              commentId: comment.id,
+              quote,
+              origin: Origin.TextSelection,
+            })
+          }
           isModalThread={isModalThread}
         >
           {!isModalThread && (

packages/shared/src/components/highlights/HighlightItem.spec.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
 import type { PostHighlightFeed } from '../../graphql/highlights';
 import { HighlightItem } from './HighlightItem';
+import { TestBootProvider } from '../../../__tests__/helpers/boot';
 
 const scrollIntoView = jest.fn();
 const summary = 'A concise summary for the expanded highlight item.';
@@ -19,6 +21,16 @@ const highlight: PostHighlightFeed = {
   },
 };
 
+// The expanded summary carries the selection share bar, which reads auth and
+// react-query for its copy/share actions.
+const renderItem = (props: { defaultExpanded?: boolean } = {}) =>
+  render(
+    <TestBootProvider client={new QueryClient()}>
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <HighlightItem highlight={highlight} {...props} />
+    </TestBootProvider>,
+  );
+
 beforeAll(() => {
   Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
     configurable: true,
@@ -32,11 +44,15 @@ beforeEach(() => {
 
 describe('HighlightItem', () => {
   it('should expand when the route-driven default changes after mount', () => {
-    const { rerender } = render(<HighlightItem highlight={highlight} />);
+    const { rerender } = renderItem();
 
     expect(screen.queryByText(summary)).not.toBeInTheDocument();
 
-    rerender(<HighlightItem highlight={highlight} defaultExpanded />);
+    rerender(
+      <TestBootProvider client={new QueryClient()}>
+        <HighlightItem highlight={highlight} defaultExpanded />
+      </TestBootProvider>,
+    );
 
     expect(screen.getByText(summary)).toBeInTheDocument();
     expect(screen.getByRole('link', { name: /read more/i })).toHaveAttribute(
@@ -45,4 +61,16 @@ describe('HighlightItem', () => {
     );
     expect(scrollIntoView).toHaveBeenCalled();
   });
+
+  it('binds the share bar to the expanded summary, not the headline', () => {
+    renderItem({ defaultExpanded: true });
+
+    const summaryNode = screen.getByText(summary);
+    const bound = summaryNode.closest('[data-selection-area]');
+
+    expect(bound).not.toBeNull();
+    expect(bound).not.toContainElement(
+      screen.getByRole('button', { name: /the first highlight/i }),
+    );
+  });
 });

packages/shared/src/components/highlights/HighlightItem.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import type { PostHighlightFeed } from '../../graphql/highlights';
 import { stripHtmlTags } from '../../lib/strings';
 import { PostType } from '../../graphql/posts';
+import { PostSelectionArea } from '../post/PostSelectionArea';
 import { ArrowIcon } from '../icons/Arrow';
 import { IconSize } from '../Icon';
 import Link from '../utilities/Link';
@@ -80,7 +81,15 @@ export const HighlightItem = ({
       </button>
       {expanded && tldr && (
         <div className="flex flex-col gap-3 px-4 pb-3">
-          <p className="text-text-secondary typo-markdown">{tldr}</p>
+          {/*
+            Only the expanded summary is quotable. The headline sits inside the
+            expand/collapse button, where a drag toggles the row instead of
+            selecting, so binding the bar to it would raise nothing.
+            The query fetches enough of the post for the bar and its logging.
+          */}
+          <PostSelectionArea canQuote={false} post={highlight.post}>
+            <p className="text-text-secondary typo-markdown">{tldr}</p>
+          </PostSelectionArea>
           <Link href={highlight.post.commentsPermalink}>
             <a className="flex items-center gap-1 font-bold text-text-link typo-footnote hover:underline">
               Read more

packages/shared/src/components/highlights/HighlightsPage.tsx

@@ -14,6 +14,7 @@ import {
 import { Tab, TabContainer } from '../tabs/TabContainer';
 import { DigestCTA } from './DigestCTA';
 import { HighlightItem } from './HighlightItem';
+import { SelectionShareProvider } from '../post/SelectionShareProvider';
 
 const MAJOR_HEADLINES_LABEL = 'Headlines';
 const ALL_HIGHLIGHTS_LABEL = 'All';
@@ -74,15 +75,18 @@ const HighlightFeedList = ({
   }
 
   return (
-    <div className="flex flex-col">
-      {highlights.map((highlight) => (
-        <HighlightItem
-          key={highlight.id}
-          highlight={highlight}
-          defaultExpanded={highlight.id === expandedId}
-        />
-      ))}
-    </div>
+    // One watcher for the whole list, not one per row.
+    <SelectionShareProvider>
+      <div className="flex flex-col">
+        {highlights.map((highlight) => (
+          <HighlightItem
+            key={highlight.id}
+            highlight={highlight}
+            defaultExpanded={highlight.id === expandedId}
+          />
+        ))}
+      </div>
+    </SelectionShareProvider>
   );
 };
 

packages/shared/src/components/post/BasePostContent.tsx

@@ -6,6 +6,7 @@ import PostEngagements from './PostEngagements';
 import type { BasePostContentProps } from './common';
 import { PostHeaderActions } from './PostHeaderActions';
 import { ButtonSize } from '../buttons/common';
+import { SelectionShareProvider } from './SelectionShareProvider';
 
 const Custom404 = dynamic(
   () => import(/* webpackChunkName: "custom404" */ '../Custom404'),
@@ -47,7 +48,9 @@ export function BasePostContent({
   }
 
   return (
-    <>
+    // One selection watcher for the whole post: its content and its comments
+    // both register with this, and it renders the single bar between them.
+    <SelectionShareProvider>
       {isPostPage && (
         <GoBackHeaderMobile
           className={classNames(className.header, '-mx-4 bg-background-subtle')}
@@ -70,6 +73,6 @@ export function BasePostContent({
           shouldOnboardAuthor={shouldOnboardAuthor}
         />
       )}
-    </>
+    </SelectionShareProvider>
   );
 }

packages/shared/src/components/post/NewComment.tsx

@@ -52,7 +52,13 @@ const focusInputById = (inputId: string, remainingFrames = 30): void => {
 
   const input = document.getElementById(inputId);
   if (input) {
-    input.focus();
+    // Bring the composer into view before focusing. A draft can arrive from far
+    // up the page — quoting a selection from the post body, say — and a bare
+    // `focus()` jumps the scroll position instead of moving to it. Scrolling
+    // first, with focus not stealing the scroll, keeps that motion smooth.
+    // Optional-chained: jsdom does not implement `scrollIntoView`.
+    input.scrollIntoView?.({ behavior: 'smooth', block: 'center' });
+    input.focus({ preventScroll: true });
     return;
   }
 
@@ -117,26 +123,45 @@ function NewCommentComponent(
   }, [isComposerOpen, onComposerOpenChange]);
 
   useEffect(() => {
-    if (
-      !shouldHandleCommentQuery ||
-      !hasCommentQuery ||
-      (post.type !== PostType.Welcome && post.type !== PostType.Poll)
-    ) {
+    if (!shouldHandleCommentQuery || !hasCommentQuery) {
       return;
     }
 
-    const { comment, ...query } = router.query;
-    const origin =
+    if (!user) {
+      // Opening a composer nobody can post from is worse than not opening one.
+      // The query param stays put, so the draft survives the login round-trip
+      // and this effect picks it up again once the user comes back.
+      showLogin({ trigger: AuthTriggers.NewComment });
+      return;
+    }
+
+    const { comment, commentOrigin, ...query } = router.query;
+    // Callers that know where the draft came from say so (the text-selection
+    // share bar does); otherwise fall back to the post type, as before.
+    const originByPostType =
       post.type === PostType.Poll
         ? Origin.PollCommentButton
         : Origin.SquadChecklist;
+    const origin = (commentOrigin as Origin) ?? originByPostType;
 
     onShowComment(origin, comment as string);
+    // A draft handed over through the URL has no click behind it to scroll the
+    // page, so the composer would open unseen below the fold.
+    focusInputById(inputId);
 
     router.replace({ pathname: router.pathname, query }, undefined, {
       shallow: true,
     });
-  }, [post, hasCommentQuery, onShowComment, router, shouldHandleCommentQuery]);
+  }, [
+    post,
+    hasCommentQuery,
+    inputId,
+    onShowComment,
+    router,
+    shouldHandleCommentQuery,
+    showLogin,
+    user,
+  ]);
 
   const onCommentClick = (origin: Origin) => {
     if (!user) {