-
+
+ ),
+};
+
+/** Freeform / welcome / share squad posts — `SquadPostContent`. */
+export const SurfaceSquadPost: Story = {
+ render: () => (
+
+
+ ),
+};
+
+/** Redesigned post page and modal — `PostFocusCard`. */
+export const SurfaceFocusCard: Story = {
+ render: () => (
+
+
+ ),
+};
+
+/** Collections — `CollectionPostContent`. Newly covered. */
+export const SurfaceCollectionPost: Story = {
+ render: () => (
+
+
+ ),
+};
+
+/** Polls — `PollPostContent`. The question and options are quotable. */
+export const SurfacePollPost: Story = {
+ render: () => (
+
+
+ ),
+};
+
+/** Briefs — `BriefPostContent`. Long generated prose, the best quote source. */
+export const SurfaceBriefPost: Story = {
+ render: () => (
+
+
+ ),
+};
+
+/** Social / Twitter posts — `SocialTwitterPostContent`. */
+export const SurfaceSocialPost: Story = {
+ render: () => (
+
+
+ ),
+};
+
+// -- Dismissal --------------------------------------------------------------
+
+/** Click away, press Escape, or collapse the selection — all drop the bar. */
+export const Dismissal: Story = {
+ render: () => (
+
+
+ ),
+};
+
+// -- Comments and replies ----------------------------------------------------
+
+const comment = {
+ id: 'comment-1',
+ permalink: 'https://daily.dev/posts/how-to-ship-fast#c-comment-1',
+ author: { id: '2', username: 'ido', name: 'Ido Shamun' },
+} as unknown as Comment;
+
+const CommentSurface = (): ReactElement => {
+ const rootRef = useRef(null);
+ const [reply, setReply] = React.useState(null);
+
+ useAutoRaise(rootRef);
+
+ return (
+
+
+ ),
+};
+
+/**
+ * The action row under a comment is chrome, so selecting it raises nothing —
+ * only the comment's own prose is quotable.
+ */
+export const IgnoredCommentActions: Story = {
+ render: () => (
+
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+ Upvote · Reply · Share
+
+ }
+ >
+
-
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+
+ }
+ >
+
- {author ? (
-
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+ #webdev · 6 min read · From daily.dev
+
+ }
+ >
+
- null}
- className={{
- container: 'min-w-0 !p-0 hover:bg-transparent',
- textWrapper: 'min-w-0',
- }}
- />
-
+
+
+
+
);
};
diff --git a/packages/shared/src/components/post/poll/PollPostContent.tsx b/packages/shared/src/components/post/poll/PollPostContent.tsx
index 5aec9f26ba..4cc9f0467b 100644
--- a/packages/shared/src/components/post/poll/PollPostContent.tsx
+++ b/packages/shared/src/components/post/poll/PollPostContent.tsx
@@ -27,6 +27,7 @@ import { Typography, TypographyType } from '../../typography/Typography';
import { DiscussIcon } from '../../icons';
import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
import type { Post } from '../../../graphql/posts';
+import { PostSelectionArea } from '../PostSelectionArea';
type PollPostContentRawProps = Omit & { post: Post };
@@ -201,55 +202,57 @@ function PollPostContentRaw({
{shouldShowBanner && isUserSource && isLaptop && (
+
+ ),
+ play: async () => {
+ await new Promise((resolve) => {
+ setTimeout(resolve, 400);
+ });
+
+ const trigger = globalThis.document.querySelector(
+ '[data-testid="selectionShareBar"] [aria-label="Share"]',
+ );
+
+ trigger?.click();
+ },
+};
+
+/**
+ * Tooltip copy. One or two words each — the bar sits directly over the text the
+ * reader just selected, so a full sentence in a tooltip hides what they are
+ * looking at. Screen readers still get the long form from `aria-label`.
+ */
+export const Tooltips: Story = {
+ render: () => (
+
+
+ ),
+ play: async () => {
+ await new Promise((resolve) => {
+ setTimeout(resolve, 400);
+ });
+
+ const quote = globalThis.document.querySelector(
+ '[data-testid="selectionShareBar"] [aria-label="Quote in a comment"]',
+ );
+
+ quote?.dispatchEvent(
+ new MouseEvent('mouseover', { bubbles: true, cancelable: true }),
+ );
+ },
+};
+
+/**
+ * Quote sends the selection to the comment composer as a markdown blockquote,
+ * via `?comment=`. Storybook stubs the router, so nothing navigates here — the
+ * payload below is what the composer receives.
+ */
+export const QuoteInComment: Story = {
+ render: () => {
+ const [quote, setQuote] = React.useState(null);
+
+ return (
+
+ {quote ?? 'Nothing quoted yet.'}
+
+ }
+ onQuote={setQuote}
+ >
+
+ );
+ },
+};
+
+// -- Devices ----------------------------------------------------------------
+
+/**
+ * Mobile: identical bar, but "Copy link" hands off to the native share sheet
+ * when the device exposes `navigator.share`, and the position clamps to the
+ * *visual* viewport so pinch-zoom cannot push it off screen.
+ */
+export const Mobile: Story = {
+ globals: { viewport: { value: 'mobile1', isRotated: false } },
+ render: () => (
+
+
+ ),
+};
+
+// -- Selection shapes -------------------------------------------------------
+
+/** A couple of words — the shortest selection the hook accepts. */
+export const ShortSelection: Story = {
+ render: () => (
+
+
+ ),
+};
+
+/** A selection spanning several paragraphs still gets one bar. */
+export const MultiParagraphSelection: Story = {
+ render: () => (
+
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+
+ ),
+};
+
+/** Selections inside code blocks behave the same — copy text keeps the code. */
+export const CodeBlockSelection: Story = {
+ render: () => (
+
+
+ ),
+};
+
+// -- Nothing should happen --------------------------------------------------
+
+/** Under two characters is treated as an accidental tap: no bar. */
+export const IgnoredTinySelection: Story = {
+ render: () => (
+
+
+ ),
+};
+
+/** Selections outside the post body are ignored entirely. */
+export const IgnoredOutsideBody: Story = {
+ render: () => (
+
+ {secondParagraph}
+
+ }
+ >
+
+ ),
+};
+
+/**
+ * A drag that starts inside the body and ends outside it is ignored too — both
+ * the anchor and the focus node have to be inside.
+ */
+const CrossingBoundary = (): ReactElement => {
+ const rootRef = useRef(null);
+
+ useAutoRaise(rootRef);
+
+ return (
+
+
+ }
+ >
+
+
-
+ 0 && (
-
- From{' '}
-
+
-
- )
- }
- isVideoType={isVideoType}
- readTime={article.readTime}
- />
-
- {isVideoType && (
- onShowUpvoted(post.id, upvotes)}
- onCommentsClick={scrollToComment}
- // Spacing in this column is governed by its `gap-4`; drop the stats
- // row's own bottom margin so the gap above the action bar matches
- // the gap below it.
- className="!mb-0"
- />
-
- {isCollection &&
-
+ {author ? (
+
-
+ null}
+ className={{
+ container: 'min-w-0 !p-0 hover:bg-transparent',
+ textWrapper: 'min-w-0',
+ }}
+ />
+
+ ) : (
+ article.source && (
+
+
- ) : (
- article.source && (
-
-
-
- {sharedVia && (
-
+
-
- Shared via
-
- )}
- {sharedVia.name}
-
-
-
- }
- >
-
Shared post
- )} - {!isShared && isCollection && ( -Collection
- )} - {/* Title and image are top-aligned columns. The cover image opens a +
+ {sharedVia && (
+
-
+ Shared via
+
+ )}
+ {sharedVia.name}
+
+
+
+ }
+ >
+
+ Shared post +
+ )} + {!isShared && isCollection && ( +Collection
+ )} + {/* Title and image are top-aligned columns. The cover image opens a lightbox rather than navigating away. The read button lives in the title column (right under the title) so it hugs the title regardless of the image height — a short title next to a tall image keeps the button close instead of dragging it down. */} -
-
- {!isVideoType && article.image && (
-
-
+
- {renderReadButton('w-fit')}
+
+
+
+ {title}
+
+ {renderReadButton('w-fit')}
+
+ {!isVideoType && article.image && (
+
)}
- data-testid="post-modal-title"
- >
- {title}
-
- {renderReadButton('w-fit')}
+ + {title} +
+ {renderReadButton('w-fit')} +- {article.domain} -
+ ))
)}
- >
- {/* Embed YouTube's native player directly so the first click
- plays inside the iframe with sound — no custom overlay or
- muted autoplay. */}
-
- )}
-
- {article.contentHtml ? (
- <>
- - {article.summary} -
- )) - )} - -
-
- )}
-
-
- {
- focusCommentRef.current = fn;
- }}
+
+
+ onShowUpvoted(post.id, upvotes)}
+ onCommentsClick={scrollToComment}
+ // Spacing in this column is governed by its `gap-4`; drop the stats
+ // row's own bottom margin so the gap above the action bar matches
+ // the gap below it.
+ className="!mb-0"
+ />
+
+ {isCollection &&
+
+ )}
+
+
+ {
+ focusCommentRef.current = fn;
+ }}
+ post={post}
+ origin={origin}
+ />
+
-
- {post?.title}
-
- ReactElement;
+}): ReactElement => {
+ const layer = classNames(
+ className,
+ 'col-start-1 row-start-1 transition-[opacity,transform,filter] duration-200 motion-reduce:transition-none',
+ EASE_OUT_EXPO,
+ );
+
+ return (
+
+ >();
+ const setOpen = useCallback(
+ (next: boolean) => {
+ setOpenState(next);
+ onOpenChange?.(next);
+ },
+ [onOpenChange],
+ );
+
+ const triggerIcon = icon ??
- Share
-
{list}
diff --git a/packages/shared/src/graphql/highlights.ts b/packages/shared/src/graphql/highlights.ts
index 208e416486..ef8d8b2110 100644
--- a/packages/shared/src/graphql/highlights.ts
+++ b/packages/shared/src/graphql/highlights.ts
@@ -29,6 +29,19 @@ export interface PostHighlightFeed {
commentsPermalink: string;
summary?: string;
contentHtml?: string;
+ // Enough of a post for the selection share bar: the link it copies, and
+ // the fields `postLogEvent` reads so a share from here is not a hollow
+ // event. Deliberately short of a full Post — this is a list query.
+ title?: string;
+ permalink?: string;
+ image?: string;
+ createdAt?: string;
+ readTime?: number;
+ numComments?: number;
+ numUpvotes?: number;
+ tags?: string[];
+ source?: { id: string; type: string };
+ author?: { id: string };
sharedPost?: {
summary?: string;
contentHtml?: string;
@@ -120,6 +133,21 @@ export const POST_HIGHLIGHT_FEED_FRAGMENT = gql`
commentsPermalink
summary
contentHtml
+ title
+ permalink
+ image
+ createdAt
+ readTime
+ numComments
+ numUpvotes
+ tags
+ source {
+ id
+ type
+ }
+ author {
+ id
+ }
sharedPost {
summary
contentHtml
diff --git a/packages/shared/src/hooks/post/useComments.ts b/packages/shared/src/hooks/post/useComments.ts
index cd7b6db9a1..0b7576c6d3 100644
--- a/packages/shared/src/hooks/post/useComments.ts
+++ b/packages/shared/src/hooks/post/useComments.ts
@@ -11,6 +11,13 @@ import type { CommentWrite, CommentWriteProps } from './common';
interface ReplyTo extends CommentWriteProps {
username: string | null;
+ /**
+ * Markdown to seed the composer with — a blockquote of text the reader
+ * selected in the comment they are replying to.
+ */
+ quote?: string;
+ /** What opened the composer. Defaults to the reply button. */
+ origin?: Origin;
}
interface UseComments extends CommentWrite {
@@ -33,12 +40,15 @@ export const useComments = (post: Post): UseComments => {
return null;
}
- const { username, parentCommentId } = replyTo ?? {};
+ const { username, parentCommentId, quote } = replyTo ?? {};
+ const mention = getReplyToInitialContent(username ?? undefined);
return {
...(parentCommentId ? { parentCommentId } : {}),
...(username ? { replyTo: username } : {}),
- initialContent: getReplyToInitialContent(username ?? undefined),
+ // The quote leads, the mention follows it, so the cursor lands after the
+ // handle with the quoted text already above.
+ initialContent: [quote, mention].filter(Boolean).join('') || undefined,
};
}, [replyTo]);
@@ -51,7 +61,7 @@ export const useComments = (post: Post): UseComments => {
if (!isNullOrUndefined(params)) {
logEvent(
postLogEvent(LogEvent.OpenComment, post, {
- extra: { origin: Origin.PostCommentButton },
+ extra: { origin: params?.origin ?? Origin.PostCommentButton },
...(logOpts && logOpts),
}),
);
diff --git a/packages/shared/src/hooks/useSelectionAnchor.ts b/packages/shared/src/hooks/useSelectionAnchor.ts
new file mode 100644
index 0000000000..709a0be696
--- /dev/null
+++ b/packages/shared/src/hooks/useSelectionAnchor.ts
@@ -0,0 +1,78 @@
+import type { RefObject } from 'react';
+import { useLayoutEffect, useState } from 'react';
+import type { TextSelectionRect } from './useTextSelectionShare';
+import { useEventListener } from './useEventListener';
+import { useVisualViewport } from './utils/useVisualViewport';
+
+// Breathing room between the selection and the bar.
+const ANCHOR_GAP = 8;
+// Below this distance from the top of the viewport there is no room above the
+// selection, so the bar flips underneath it.
+const FLIP_THRESHOLD = 64;
+const VIEWPORT_MARGIN = 8;
+
+export interface SelectionAnchor {
+ left: number;
+ top: number;
+ flipsBelow: boolean;
+ /** False until the bar has been measured; anchoring before that would jump. */
+ isMeasured: boolean;
+}
+
+const readViewportOffset = () => ({
+ left: globalThis?.window?.visualViewport?.offsetLeft ?? 0,
+ top: globalThis?.window?.visualViewport?.offsetTop ?? 0,
+});
+
+/**
+ * Places a fixed-position bar against a selection: centred above it, flipped
+ * below when there is no room, and clamped so it never leaves the viewport.
+ *
+ * Clamping uses the *visual* viewport. Pinch-zoom pans the visual viewport
+ * without moving the layout viewport a `fixed` element sits in, so a bar
+ * anchored to layout coordinates drifts off screen on a zoomed phone.
+ */
+export const useSelectionAnchor = (
+ rect: TextSelectionRect | null,
+ barRef: RefObject,
+): SelectionAnchor => {
+ const [barWidth, setBarWidth] = useState(null);
+ const { width: viewportWidth } = useVisualViewport();
+ const [viewportOffset, setViewportOffset] = useState(readViewportOffset);
+
+ useLayoutEffect(() => {
+ if (barRef.current) {
+ setBarWidth(barRef.current.offsetWidth);
+ }
+
+ // Read the pan offset here too, not only on the next `scroll`. A reader who
+ // pinch-zoomed and panned *before* selecting — the usual order on mobile —
+ // would otherwise be clamped against a stale origin until they panned again.
+ setViewportOffset(readViewportOffset());
+ }, [barRef, rect]);
+
+ useEventListener(
+ rect ? globalThis?.window?.visualViewport : null,
+ 'scroll',
+ () => setViewportOffset(readViewportOffset()),
+ );
+
+ if (!rect) {
+ return { left: 0, top: 0, flipsBelow: false, isMeasured: false };
+ }
+
+ const availableWidth = viewportWidth || globalThis?.window?.innerWidth || 0;
+ const half = (barWidth ?? 0) / 2;
+ const minCenter = viewportOffset.left + VIEWPORT_MARGIN + half;
+ const maxCenter =
+ viewportOffset.left + availableWidth - VIEWPORT_MARGIN - half;
+ const center = rect.left + (rect.right - rect.left) / 2;
+ const flipsBelow = rect.top - viewportOffset.top < FLIP_THRESHOLD;
+
+ return {
+ left: Math.min(Math.max(center, minCenter), Math.max(minCenter, maxCenter)),
+ top: flipsBelow ? rect.bottom + ANCHOR_GAP : rect.top - ANCHOR_GAP,
+ flipsBelow,
+ isMeasured: barWidth !== null,
+ };
+};
diff --git a/packages/shared/src/hooks/useTextSelectionShare.spec.ts b/packages/shared/src/hooks/useTextSelectionShare.spec.ts
new file mode 100644
index 0000000000..047c2e6dfe
--- /dev/null
+++ b/packages/shared/src/hooks/useTextSelectionShare.spec.ts
@@ -0,0 +1,100 @@
+import { act, renderHook } from '@testing-library/react';
+import { useTextSelectionShare } from './useTextSelectionShare';
+
+const rect = {
+ top: 200,
+ bottom: 220,
+ left: 40,
+ right: 260,
+ width: 220,
+ height: 20,
+};
+
+const mockSelection = ({
+ text,
+ node,
+ isCollapsed = false,
+}: {
+ text: string;
+ node: Node | null;
+ isCollapsed?: boolean;
+}) => {
+ const range = { getBoundingClientRect: () => rect } as unknown as Range;
+
+ window.getSelection = jest.fn().mockReturnValue({
+ isCollapsed,
+ rangeCount: isCollapsed ? 0 : 1,
+ anchorNode: node,
+ focusNode: node,
+ toString: () => text,
+ getRangeAt: () => range,
+ });
+};
+
+const setup = () => {
+ const container = document.createElement('div');
+ const child = document.createTextNode('some post body text');
+ container.appendChild(child);
+ document.body.appendChild(container);
+
+ const resolveArea = (node: Node | null) =>
+ node && container.contains(node) ? container : null;
+ const { result } = renderHook(() => useTextSelectionShare({ resolveArea }));
+
+ return { result, container, child };
+};
+
+afterEach(() => {
+ document.body.innerHTML = '';
+ jest.restoreAllMocks();
+});
+
+describe('useTextSelectionShare', () => {
+ it('exposes the selected text and its rect once the selection ends', () => {
+ const { result, child } = setup();
+
+ mockSelection({ text: 'post body', node: child });
+ act(() => {
+ document.dispatchEvent(new MouseEvent('mouseup'));
+ });
+
+ expect(result.current.text).toEqual('post body');
+ expect(result.current.rect).toEqual({
+ top: rect.top,
+ bottom: rect.bottom,
+ left: rect.left,
+ right: rect.right,
+ });
+ });
+
+ it('ignores selections made outside the container', () => {
+ const { result } = setup();
+ const outside = document.createTextNode('sidebar text');
+ document.body.appendChild(outside);
+
+ mockSelection({ text: 'sidebar text', node: outside });
+ act(() => {
+ document.dispatchEvent(new MouseEvent('mouseup'));
+ });
+
+ expect(result.current.text).toBeNull();
+ });
+
+ it('clears once the selection collapses', () => {
+ const { result, child } = setup();
+
+ mockSelection({ text: 'post body', node: child });
+ act(() => {
+ document.dispatchEvent(new MouseEvent('mouseup'));
+ });
+ expect(result.current.text).toEqual('post body');
+
+ mockSelection({ text: '', node: child, isCollapsed: true });
+ act(() => {
+ document.dispatchEvent(new Event('selectionchange'));
+ });
+
+ expect(result.current.text).toBeNull();
+ expect(result.current.rect).toBeNull();
+ });
+});
diff --git a/packages/shared/src/hooks/useTextSelectionShare.ts b/packages/shared/src/hooks/useTextSelectionShare.ts
new file mode 100644
index 0000000000..04e5d6c51e
--- /dev/null
+++ b/packages/shared/src/hooks/useTextSelectionShare.ts
@@ -0,0 +1,168 @@
+import { useCallback, useRef, useState } from 'react';
+import { useEventListener } from './useEventListener';
+
+export interface TextSelectionRect {
+ top: number;
+ bottom: number;
+ left: number;
+ right: number;
+}
+
+export interface UseTextSelectionShareProps {
+ /**
+ * Maps a selection boundary to the registered region that owns it, or null
+ * when the boundary falls outside every watched region. A selection counts
+ * only when both ends resolve to the *same* region, so a drag that starts in
+ * a post and ends in a comment belongs to neither.
+ */
+ resolveArea: (node: Node | null) => HTMLElement | null;
+}
+
+export interface UseTextSelectionShare {
+ /** The trimmed selected text, or null when there is no usable selection. */
+ text: string | null;
+ /** Viewport-space rect of the selection, for anchoring a fixed element. */
+ rect: TextSelectionRect | null;
+ /** The region the selection sits in, for the caller to attribute it. */
+ area: HTMLElement | null;
+ clear: () => void;
+}
+
+// Two characters, not two words: enough to drop a stray click-drag without
+// second-guessing someone who genuinely wants to quote one short word.
+const MIN_SELECTION_LENGTH = 2;
+
+// Keys that can move a selection boundary. Every other keystroke — typing in
+// the composer the bar just opened, for instance — leaves the selection alone,
+// so there is nothing to re-read.
+const SELECTION_KEYS = new Set([
+ 'ArrowLeft',
+ 'ArrowRight',
+ 'ArrowUp',
+ 'ArrowDown',
+ 'Home',
+ 'End',
+ 'PageUp',
+ 'PageDown',
+ 'a',
+ 'A',
+]);
+
+const toRect = (range: Range): TextSelectionRect | null => {
+ const { top, bottom, left, right, width, height } =
+ range.getBoundingClientRect();
+
+ // A range that collapsed or scrolled into a display:none ancestor reports an
+ // all-zero rect; anchoring to it would pin the bar to the top-left corner.
+ if (!width && !height) {
+ return null;
+ }
+
+ return { top, bottom, left, right };
+};
+
+/**
+ * Watches for a completed text selection inside any registered region and
+ * exposes the selected text, a viewport rect to anchor a floating bar to, and
+ * the region that owns it. The rect is recomputed on scroll/resize so the bar
+ * follows the selection.
+ *
+ * One instance is meant to serve a whole page: mounting it per item would put
+ * four document listeners on every comment in a thread.
+ */
+export const useTextSelectionShare = ({
+ resolveArea,
+}: UseTextSelectionShareProps): UseTextSelectionShare => {
+ const [text, setText] = useState(null);
+ const [rect, setRect] = useState(null);
+ const [area, setArea] = useState(null);
+ const rangeRef = useRef(null);
+
+ const clear = useCallback(() => {
+ rangeRef.current = null;
+ setText(null);
+ setRect(null);
+ setArea(null);
+ }, []);
+
+ const readSelection = useCallback(() => {
+ const selection = globalThis?.window?.getSelection?.();
+
+ if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+ clear();
+ return;
+ }
+
+ const owner = resolveArea(selection.anchorNode);
+
+ // Resolve before reading the string: `toString()` is O(selection length)
+ // and most selections on a page are outside any watched region.
+ if (!owner || resolveArea(selection.focusNode) !== owner) {
+ clear();
+ return;
+ }
+
+ const selected = selection.toString().trim();
+
+ if (selected.length < MIN_SELECTION_LENGTH) {
+ clear();
+ return;
+ }
+
+ const range = selection.getRangeAt(0);
+ const nextRect = toRect(range);
+
+ if (!nextRect) {
+ clear();
+ return;
+ }
+
+ rangeRef.current = range;
+ setText(selected);
+ setRect(nextRect);
+ setArea(owner);
+ }, [clear, resolveArea]);
+
+ const target = globalThis?.document;
+
+ // Selection *end* — mouse release, touch release, or a keyboard selection.
+ useEventListener(target, 'mouseup', readSelection);
+ useEventListener(target, 'touchend', readSelection);
+ useEventListener(target, 'keyup', (event: KeyboardEvent) => {
+ if (SELECTION_KEYS.has(event.key)) {
+ readSelection();
+ }
+ });
+
+ // A click elsewhere collapses the selection without firing another mouseup on
+ // the container, so drop the bar as soon as the browser reports it collapsed.
+ useEventListener(target, 'selectionchange', () => {
+ const selection = globalThis?.window?.getSelection?.();
+
+ if (!selection || selection.isCollapsed) {
+ clear();
+ }
+ });
+
+ const followTarget = rect ? globalThis?.window : null;
+
+ const follow = useCallback(() => {
+ if (!rangeRef.current) {
+ return;
+ }
+
+ const nextRect = toRect(rangeRef.current);
+
+ if (!nextRect) {
+ clear();
+ return;
+ }
+
+ setRect(nextRect);
+ }, [clear]);
+
+ useEventListener(followTarget, 'scroll', follow, true);
+ useEventListener(followTarget, 'resize', follow);
+
+ return { text, rect, area, clear };
+};
diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts
index 9696707fa6..da77b32664 100644
--- a/packages/shared/src/lib/log.ts
+++ b/packages/shared/src/lib/log.ts
@@ -108,6 +108,7 @@ export enum Origin {
GameCenter = 'game center',
DevCard = 'devcard',
CopyMyFeed = 'copy my feed',
+ TextSelection = 'text selection',
}
export enum LogEvent {
diff --git a/packages/shared/src/lib/share.ts b/packages/shared/src/lib/share.ts
index b6bb78125b..3651f7adeb 100644
--- a/packages/shared/src/lib/share.ts
+++ b/packages/shared/src/lib/share.ts
@@ -10,6 +10,7 @@ export enum ShareProvider {
LinkedIn = 'linkedin',
Telegram = 'telegram',
Email = 'email',
+ CopyText = 'copy text',
}
export const getWhatsappShareLink = (link: string): string =>
diff --git a/packages/shared/src/lib/strings.ts b/packages/shared/src/lib/strings.ts
index a673ffa7f4..76eb2aeaff 100644
--- a/packages/shared/src/lib/strings.ts
+++ b/packages/shared/src/lib/strings.ts
@@ -176,3 +176,22 @@ export const truncateAtWordBoundary = (
* Used for validating user input like emoji shortcuts or mentions.
*/
export const specialCharsRegex = /[^A-Za-z0-9_.]/;
+
+/**
+ * Renders a text selection as a markdown blockquote for a comment composer.
+ */
+export const buildCommentQuote = (selection: string): string =>
+ `${selection
+ .split('\n')
+ .map((line) => `> ${line}`.trimEnd())
+ .join('\n')}\n\n`;
+
+// Long enough for any quote worth reading, short enough that the resulting URL
+// and history entry stay sane once encoded.
+const MAX_URL_TEXT_LENGTH = 1000;
+
+/** Caps text that has to survive a round-trip through a query string. */
+export const truncateForUrl = (value: string): string =>
+ value.length > MAX_URL_TEXT_LENGTH
+ ? `${value.slice(0, MAX_URL_TEXT_LENGTH).trimEnd()}…`
+ : value;
diff --git a/packages/storybook/stories/components/SelectionShareBar.stories.tsx b/packages/storybook/stories/components/SelectionShareBar.stories.tsx
new file mode 100644
index 0000000000..99b4e6f980
--- /dev/null
+++ b/packages/storybook/stories/components/SelectionShareBar.stories.tsx
@@ -0,0 +1,994 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ReactElement, ReactNode, RefObject } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { SelectionShareBar } from '@dailydotdev/shared/src/components/post/SelectionShareBar';
+import {
+ SelectionShareProvider,
+ useSelectionShareArea,
+} from '@dailydotdev/shared/src/components/post/SelectionShareProvider';
+import { getLogContextStatic } from '@dailydotdev/shared/src/contexts/LogContext';
+import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
+import {
+ FeaturesReadyContext,
+ GrowthBookProvider,
+} from '@dailydotdev/shared/src/components/GrowthBookProvider';
+import { BootApp } from '@dailydotdev/shared/src/lib/boot';
+import type { LoggedUser } from '@dailydotdev/shared/src/lib/user';
+import type { Post } from '@dailydotdev/shared/src/graphql/posts';
+import type { Comment } from '@dailydotdev/shared/src/graphql/comments';
+import { fn } from 'storybook/test';
+
+const mockUser = {
+ id: '1',
+ name: 'Test User',
+ username: 'testuser',
+ email: 'test@example.com',
+ image: 'https://daily-now-res.cloudinary.com/image/upload/placeholder.jpg',
+ providers: ['google'],
+ createdAt: '2024-01-01T00:00:00.000Z',
+ permalink: 'https://daily.dev/testuser',
+} as unknown as LoggedUser;
+
+const post = {
+ id: 'post-1',
+ title: 'How to ship fast without breaking everything',
+ commentsPermalink: 'https://daily.dev/posts/how-to-ship-fast',
+ permalink: 'https://daily.dev/r/how-to-ship-fast',
+ source: { id: 'daily', name: 'daily.dev', handle: 'daily' },
+ author: { id: '1', name: 'Ido Shamun' },
+} as unknown as Post;
+
+const paragraph =
+ 'Shipping fast is not about typing faster. It is about shrinking the distance between a decision and the moment a real developer feels its effect.';
+
+const secondParagraph =
+ 'Every layer between those two points is either helping or in the way, and most of them are in the way. Removing one is worth more than speeding up all of them.';
+
+// ---------------------------------------------------------------------------
+// Selection harness
+// ---------------------------------------------------------------------------
+
+// The bar only exists while the browser reports a live selection, so every
+// story fakes one instead of asking the reviewer to drag a cursor. The element
+// carrying this attribute is the one whose contents get selected.
+const AUTO_SELECT = 'data-autoselect';
+const autoSelect = { [AUTO_SELECT]: true };
+
+const raiseBar = (root: ParentNode | null): void => {
+ const target = root?.querySelector(`[${AUTO_SELECT}]`);
+
+ if (!target) {
+ return;
+ }
+
+ const doc = target.ownerDocument;
+ const win = doc.defaultView;
+
+ if (!win) {
+ return;
+ }
+
+ const range = doc.createRange();
+ range.selectNodeContents(target);
+
+ const selection = win.getSelection();
+ selection?.removeAllRanges();
+ selection?.addRange(range);
+
+ // The hook listens for selection *end*, not `selectionchange`, so replay the
+ // event a real mouse release would have produced.
+ target.dispatchEvent(new win.MouseEvent('mouseup', { bubbles: true }));
+};
+
+// Raise the bar once the story has mounted. An effect is used rather than a
+// `play` function because it also fires in the docs view and does not depend on
+// Storybook's instrumentation timing.
+const useAutoRaise = (root: RefObject, enabled = true): void => {
+ useEffect(() => {
+ if (!enabled) {
+ return undefined;
+ }
+
+ // One tick for the bar to attach its document listeners.
+ const timeout = setTimeout(() => raiseBar(root.current), 120);
+
+ return () => clearTimeout(timeout);
+ }, [enabled, root]);
+};
+
+// Marks a region quotable exactly the way the app does, so the stories exercise
+// the real provider/registration path rather than the bar in isolation.
+const Area = ({
+ children,
+ className,
+ comment,
+ onQuote,
+}: {
+ children: ReactNode;
+ className?: string;
+ comment?: Comment;
+ onQuote?: (markdownQuote: string) => void;
+}): ReactElement => {
+ const ref = useSelectionShareArea({ post, comment, onQuote });
+
+ return (
+ (null);
+
+ useAutoRaise(stageRef, autoRaise);
+
+ const onRaise = useCallback(() => {
+ // The bar's own outside-click handler runs on this very click and clears
+ // the selection, so re-select on the next tick.
+ setTimeout(() => raiseBar(stageRef.current), 0);
+ }, []);
+
+ return (
+
+
+ );
+};
+
+// ---------------------------------------------------------------------------
+// Bodies — stand-ins for the three surfaces the bar is wired into. They carry
+// the same typography as the real bodies; the real components (PostContent,
+// SquadPostContent, PostFocusCard) pull in routing, feed queries and lazy
+// modals that do not belong in a story.
+// ---------------------------------------------------------------------------
+
+/**
+ * `selectable={false}` moves the auto-selection target out of the body, so a
+ * story can prove that selecting something *outside* raises nothing. Leaving it
+ * on would select the body instead and the story would silently pass.
+ */
+const ArticleBody = ({
+ selectable = true,
+}: {
+ selectable?: boolean;
+}): ReactElement => (
+ <>
+
+
+
+ feature.defaultValue as any,
+ }}
+ >
+ false,
+ }}
+ >
+
+
+
+
+
+ );
+ };
+
+const meta: Meta = {
+ title: 'Components/Share/SelectionShareBar',
+ component: SelectionShareBar,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: [
+ 'Floating share bar anchored to a text selection inside a post body.',
+ 'Ships to every user — there is no feature flag or experiment behind it.',
+ '',
+ 'Every story fakes a selection on load, so the bar is visible without dragging a cursor.',
+ 'Clicking anywhere dismisses it — hit **Raise the bar again** to bring it back.',
+ 'Use the Storybook theme toggle to check dark and light; both are supported.',
+ ].join('\n'),
+ },
+ },
+ },
+ decorators: [withProviders()],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+// -- Placement --------------------------------------------------------------
+
+/** Default: the bar floats centred above the selection, 8px clear of it. */
+export const AboveSelection: Story = {
+ render: () => (
+
+
+ ),
+};
+
+/**
+ * Under 64px from the top of the viewport there is no room above the
+ * selection, so the bar flips underneath it.
+ */
+export const FlippedBelow: Story = {
+ render: () => (
+
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+
+ ),
+};
+
+/**
+ * A short selection hard against the left edge would centre the bar partly
+ * off-screen, so the position is clamped to 8px inside the viewport.
+ */
+export const ClampedToLeftEdge: Story = {
+ globals: { viewport: { value: 'mobile1', isRotated: false } },
+ render: () => (
+
+ The bar sits 8px from the edge, not centred over the word.
+
+ }
+ >
+
+ ),
+};
+
+/** The same clamp on the other side. */
+export const ClampedToRightEdge: Story = {
+ globals: { viewport: { value: 'mobile1', isRotated: false } },
+ render: () => (
+
+
+ ),
+};
+
+/**
+ * The rect is recomputed on scroll (capture phase, so inner scrollers count),
+ * so the bar tracks the selection instead of hanging in place.
+ */
+export const FollowsWhileScrolling: Story = {
+ render: () => (
+
+
+ }
+ >
+
-
-
+
- Why did you vote this way?
+
+
-
+
+ {post?.title}
+
+
+
- )}
+ )}
+
+
-
-
+ Why did you vote this way?
+
+
+ {children}
+
+ );
+};
+
+interface StageProps {
+ /** What to look at in this story. */
+ hint?: ReactNode;
+ /** Post body — the container the bar is bound to. */
+ children: ReactNode;
+ /** Rendered outside the body. Selecting it must never raise the bar. */
+ outside?: ReactNode;
+ className?: string;
+ bodyClassName?: string;
+ showRaiseButton?: boolean;
+ /** Off when an enclosing story owns the selection. */
+ autoRaise?: boolean;
+ /** Intercepts the quote action instead of writing it to the URL. */
+ onQuote?: (markdownQuote: string) => void;
+}
+
+const Stage = ({
+ hint,
+ children,
+ outside,
+ className,
+ bodyClassName,
+ showRaiseButton = true,
+ autoRaise = true,
+ onQuote,
+}: StageProps): ReactElement => {
+ const stageRef = useRef
+ {!!hint &&
+ {hint}
} + + {children} + + {outside} + {showRaiseButton && ( + + )} +{post.title}
++ Ido Shamun · daily.dev · 6 min read +
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */} ++ {paragraph} +
+{secondParagraph}
+ +); + +const SquadBody = (): ReactElement => ( + <> +
+
+ 🥑
+
+
+
+ Ido Shamun
+
+ Frontend Squad · 2h
+
+
+ + A rule of thumb for shipping under pressure +
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */} ++ {paragraph} +
+{secondParagraph}
+ +); + +const FocusCardBody = (): ReactElement => ( + <> + +{post.title}
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */} ++ {paragraph} +
+
+ #webdev
+ #productivity
+
+
+);
+
+const CollectionBody = (): ReactElement => (
+ <>
+ + What changed in frontend tooling this month +
++ Last updated today · 6 sources +
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */} ++ {paragraph} +
+{secondParagraph}
+ +); + +const PollBody = (): ReactElement => ( + <> + {/* eslint-disable-next-line react/jsx-props-no-spreading */} ++ Do you write tests before or after the implementation? +
+
+ {['Before, always', 'After, usually', 'Depends on the change'].map(
+ (option) => (
+
+
+);
+
+const BriefBody = (): ReactElement => (
+ <>
+
+ {option}
+
+ ),
+ )}
+ Today
+Your presidential briefing
++ 3m read · 12 Sources +
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */} +
+
+
+);
+
+const SocialBody = (): ReactElement => (
+ <>
+ What matters today
+{paragraph}
+{secondParagraph}
+
+
+ @idoshamun
+
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+ + {paragraph} +
+{secondParagraph}
+ +); + +// --------------------------------------------------------------------------- +// Providers +// --------------------------------------------------------------------------- + +// The bar ships unflagged, so these providers only supply the contexts it +// reads — auth, logging and react-query. There is no experiment to simulate. +const withProviders = + () => + (Story: React.ComponentType): React.ReactElement => { + const queryClient = new QueryClient({ + defaultOptions: { queries: { retry: false, staleTime: Infinity } }, + }); + // Mock the short-URL resolution so copy/share actions don't hit network. + queryClient.setQueryData(['shortUrl'], 'https://dly.to/abc123'); + + const LogContext = getLogContextStatic(); + + return ( +{paragraph}
++ {/* eslint-disable-next-line react/jsx-props-no-spreading */} + shipping +
++ {/* eslint-disable-next-line react/jsx-props-no-spreading */} + shipping +
+{secondParagraph}
+{paragraph}
+{secondParagraph}
+{paragraph}
+{secondParagraph}
+{paragraph}
++ Shipping fast is not about{' '} + {/* eslint-disable-next-line react/jsx-props-no-spreading */} + typing faster. It is about shrinking the + distance between a decision and the moment a real developer feels its + effect. +
+
+
+ {paragraph}
+{secondParagraph}
+{paragraph}
+{paragraph}
+
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+
+ {`const [, copyText] = useCopyText();\ncopyText({ textToCopy: selection });`}
+
+
+ + Shipping fast is not about typing faster + {/* eslint-disable-next-line react/jsx-props-no-spreading */} + . It is about shrinking the distance + between a decision and its effect. +
+{paragraph}
+
+
+ );
+};
+
+export const IgnoredCrossingBoundary: Story = {
+ render: () => + Expected: no bar. The selection starts in the body and ends in the + comment below it. +
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */} +
+
+
+
+ {paragraph}
++ Great post — bookmarking this one. +
+3 comments
+
+
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+
+ + Completely agree — the second point is the one people miss. +
++ Another post’s headline, listed inside the digest feed +
++ daily.dev · 4 min read +
+Today
+Your personalized digest
+12 posts · 6 sources
+ + ), +}; + +// -- Surfaces --------------------------------------------------------------- + +/** Article & video posts — `PostContent`. Page and modal. */ +export const SurfaceArticlePost: Story = { + render: () => ( +
+
+
+
+
+
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+
+
+ );
+};
+
+/**
+ * A comment or reply. The bar targets the comment, not the post: copy link
+ * yields the comment permalink, sharing logs `ShareComment`, and quote opens a
+ * reply to that comment seeded with the blockquote.
+ */
+export const SurfaceComment: Story = {
+ render: () => (
+ + Selecting inside a comment raises the bar for that comment — copy link + gives the comment permalink, quote opens a reply to it. +
+
+ Ido Shamun
+ @ido · 1h
+
+ + {secondParagraph} +
+ +
+ Upvote
+ Reply
+
+
+ {reply ?? 'Reply composer is empty.'}
+
+ {secondParagraph}
+ + ), +}; diff --git a/packages/storybook/stories/components/ShareActions.stories.tsx b/packages/storybook/stories/components/ShareActions.stories.tsx index 0857b12c55..7dfecbbb5d 100644 --- a/packages/storybook/stories/components/ShareActions.stories.tsx +++ b/packages/storybook/stories/components/ShareActions.stories.tsx @@ -111,3 +111,28 @@ export const IconOpenOnHover: Story = { export const Inline: Story = { args: { variant: 'inline' }, }; + +/** + * The popover, opened on load so its layout can be reviewed directly. Four + * fixed columns sized to their content: identical padding on every side, a + * short last row left-aligned with the grid above it, and no heading — the + * popover only ever opens from a share control. + */ +export const OpenPopover: Story = { + args: { variant: 'icon' }, + parameters: { layout: 'fullscreen' }, + decorators: [ + (Story) => ( +
+
+ ),
+ ],
+ play: async ({ canvasElement }) => {
+ await new Promise