diff --git a/dev/relay-broker-api.test.mjs b/dev/relay-broker-api.test.mjs index f594723b..c6818119 100644 --- a/dev/relay-broker-api.test.mjs +++ b/dev/relay-broker-api.test.mjs @@ -124,6 +124,27 @@ test("GIF capability discovery does not depend on join-policy availability", asy } }); +test("GIF discovery retries unsupported relays and caches confirmed support", async () => { + let supported = false; + const descriptor = { + supported_extensions: ["buzz-gif"], + gif: { provider: "klipy", search: "/gifs/search" }, + }; + const h = await harness(() => Response.json(supported ? descriptor : {})); + try { + expect(await (await h.get("gif-info")).json()).toEqual({}); + supported = true; + expect(await (await h.get("gif-info")).json()).toEqual(descriptor); + expect(await (await h.get("gif-info")).json()).toEqual(descriptor); + expect(h.calls.map(({ url }) => url)).toEqual([ + fixtureRelayUrl, + fixtureRelayUrl, + ]); + } finally { + await h.close(); + } +}); + test("GIF search follows the relay-advertised KLIPY path with signed, bounded input", async () => { const responseBody = { result: true, @@ -361,6 +382,72 @@ test("queued request mints fresh auth at dispatch after wall time advances", asy } }); +test("reaction sign and publish preserve kind 7 and reject malformed targets before upstream I/O", async () => { + const h = await harness((call) => + Response.json({ accepted: true, event_id: call.body.id }), + ); + try { + const template = { + ...h.event, + kind: 7, + content: ":party:", + tags: [ + ["h", "c"], + ["e", "a".repeat(64)], + ["emoji", "party", "https://a.test/party.png"], + ], + }; + const response = await h.post("sign", template); + expect(response.status).toBe(200); + const event = await response.json(); + expect(verifyEvent(event)).toBe(true); + expect(event.kind).toBe(7); + expect(event.tags).toEqual(template.tags); + expect((await h.post("publish", event)).status).toBe(200); + expect(h.calls).toHaveLength(1); + expect(h.calls[0].body).toEqual(JSON.parse(JSON.stringify(event))); + for (const length of [62, 63, 64]) { + const content = `:${"a".repeat(length)}:`; + const signed = await h.post("sign", { ...template, content }); + expect(signed.status).toBe(200); + const boundaryEvent = await signed.json(); + expect(boundaryEvent.content).toBe(content); + expect((await h.post("publish", boundaryEvent)).status).toBe(200); + } + expect(h.calls).toHaveLength(4); + for (const route of ["sign", "publish"]) { + for (const tags of [ + [], + [["e", "bad"]], + [["e", "a".repeat(64), "", "reply"]], + [ + ["e", "a".repeat(64)], + ["e", "b".repeat(64)], + ], + ]) { + expect( + (await h.post(route, { ...event, tags: [["h", "c"], ...tags] })) + .status, + ).toBe(400); + } + expect( + (await h.post(route, { ...event, content: "x".repeat(65) })).status, + ).toBe(400); + expect( + (await h.post(route, { ...event, content: `:${"a".repeat(65)}:` })) + .status, + ).toBe(400); + expect( + (await h.post(route, { ...event, content: ` ${"x".repeat(64)}` })) + .status, + ).toBe(400); + } + expect(h.calls).toHaveLength(4); + } finally { + await h.close(); + } +}); + test("both real sign and publish routes admit direct replies but reject arbitrary references before upstream I/O", async () => { const h = await harness((call) => Response.json({ accepted: true, event_id: call.body.id }), diff --git a/dev/relay-broker.mjs b/dev/relay-broker.mjs index 2027d4a1..4df3a188 100644 --- a/dev/relay-broker.mjs +++ b/dev/relay-broker.mjs @@ -20,6 +20,7 @@ import { } from "./sidebar-preferences.mjs"; import { createHostAdmission } from "../src/features/relay/host-admission.ts"; import { relayKlipySearchPath } from "../src/features/relay/gifs.ts"; +import { validReactionContent } from "../src/features/relay/emoji.ts"; // Dev-only relay broker. Holds the local Buzz identity in this Node process and signs NIP-98 reads // for the browser, so no key ever reaches page JavaScript. The dev server loads it whenever // BUZZ_DEV_VIEWER is configured; production builds and tests never load it. @@ -192,7 +193,7 @@ async function relayAuthority(fetch, relay) { export function validMessageTemplate(event) { return ( event && - event.kind === 9 && + [7, 9].includes(event.kind) && typeof event.content === "string" && event.content.trim().length > 0 && Buffer.byteLength(event.content) <= 32000 && @@ -208,6 +209,14 @@ export function validMessageTemplate(event) { ).length === 1 && (() => { const references = event.tags.filter((tag) => tag[0] === "e"); + if (event.kind === 7) + return ( + event.content === event.content.trim() && + validReactionContent(event.content) && + references.length === 1 && + references[0].length === 2 && + /^[0-9a-f]{64}$/.test(references[0][1]) + ); if (!references.length) return true; const [reply] = references; // This write surface supports direct-to-root replies, not arbitrary references. @@ -308,7 +317,10 @@ export function relayBrokerPlugin({ }) .then(async (response) => { if (!response.ok) throw new Error("GIF discovery failed"); - return relayKlipySearchPath(await response.json()); + const path = relayKlipySearchPath(await response.json()); + // A relay can enable GIFs while this broker is still running. + if (!path) gifSearchPaths.delete(relay); + return path; }) .catch((error) => { gifSearchPaths.delete(relay); @@ -413,7 +425,9 @@ export function relayBrokerPlugin({ }); const info = await response.json(); const gifSearchPath = relayKlipySearchPath(info); - gifSearchPaths.set(relay, Promise.resolve(gifSearchPath)); + if (gifSearchPath) + gifSearchPaths.set(relay, Promise.resolve(gifSearchPath)); + else gifSearchPaths.delete(relay); const policyResponse = await fetchUpstream( `${relay}/api/join-policy`, { redirect: "error", signal: AbortSignal.timeout(10000) }, @@ -509,7 +523,7 @@ export function relayBrokerPlugin({ viewer, ...(await getAuthority(relay)), relayUrl: relay, - writeKinds: [9], + writeKinds: [7, 9], sidebarPreferences: true, readState: true, agentLibrary: true, @@ -840,7 +854,7 @@ export function relayBrokerPlugin({ const started = performance.now(); const event = finalizeEvent( { - kind: 9, + kind: filters.kind, content: filters.content, created_at: filters.created_at, tags: filters.tags, diff --git a/docs/channels.md b/docs/channels.md index 75f421de..28ace4f5 100644 --- a/docs/channels.md +++ b/docs/channels.md @@ -260,6 +260,33 @@ Retry while leaving Unicode available and retaining drafts. Only one picker owns Emoji Mart's global dictionary at a time; scoped custom IDs and disposal prevent old community entries leaking into search or Frequent. Historical messages and existing reactions keep their signed emoji URLs after catalog changes. +Emoji-only messages stay at the large 42px size regardless of count; normal text +returns the message to its usual size. Long runs wrap instead of shrinking. +Selecting and copying custom emoji preserves their `:shortcode:` in plain text, +along with surrounding text and line breaks. Pasting into a community with that +emoji available resolves the shortcode through its existing composer catalog. +In the composer, Shift+Left/Right selects each rendered custom emoji as one unit, +preserving its full shortcode for copying, replacement and deletion. Reversing +direction shrinks the selection by one emoji. Visible shortcode text and emoji +that cannot be rendered retain ordinary text selection. +Custom emoji autocomplete adds no trailing space. The native caret uses the +regular composer text size while the emoji preview remains large. + +Message and thread reaction rows have a Lucide smile-plus button after existing +reactions. Messages without reactions do not show it. The Emoji plugin supplies +the emoji-only picker +through its optional conversation tool `reactionComponent`; the shared message +row owns publication. The picker opens outside the scrolling list, closes on +selection or Escape, and returns focus to the plus button. Failed or unconfirmed +reaction delivery offers Retry reaction through the same outbox. Read-only +connections and archived channels do not expose the action. + +The composer shows its GIF tab as soon as relay support is confirmed. Unsupported +results are retried when the picker reopens; the broker caches confirmed support +without retaining negative discovery results. Pickers +without tabs use a search radius equal to the container radius minus the 10px +inset; tabbed pickers keep the smaller 8px search radius. + Emoji uploads and management remain in the existing community workflow. See [the shared catalog/send contract](relay-queries.md#community-emoji). The local diff --git a/docs/relay-queries.md b/docs/relay-queries.md index 62fac93a..4f721bc5 100644 --- a/docs/relay-queries.md +++ b/docs/relay-queries.md @@ -81,7 +81,7 @@ running broker needs one coordinated restart to gain the new filter. Reopening the picker reuses its ready catalog; it is not a manual refresh fallback for an older broker. -`session.messages.send`, `reply`, and `edit` resolve referenced `:shortcodes:` +`session.messages.send`, `reply`, `edit`, and `react` resolve referenced `:shortcodes:` into original-URL emoji tags **before** the outbox assigns identity or signs. Text without shortcode candidates does not wait. A cold/unavailable catalog throws synchronously, so a composer retains its draft; plugins can await `ensure()` or @@ -93,7 +93,10 @@ Message and reaction rendering uses only each event's own emoji tags, never the current palette. Tagged edits replace mappings; legacy tagless edits preserve the original message's mappings. All thumbnails use the captured session's media resolver; unsupported or unloadable images fall back to literal shortcodes. -Uploads/management and reaction authoring are outside this slice. +Reaction authoring uses the existing outbox: kind 7, the loaded message's channel +(`h`) and target (`e`), and event-local custom emoji tags. The development broker +admits bounded reactions with exactly one canonical target and preserves kind 7 +through signing. Uploads and emoji management remain outside this slice. ## Thread views diff --git a/scripts/design-system/check-color.mjs b/scripts/design-system/check-color.mjs index 97c16a53..a869a30e 100644 --- a/scripts/design-system/check-color.mjs +++ b/scripts/design-system/check-color.mjs @@ -34,14 +34,17 @@ import { readdirSync, readFileSync, statSync } from "node:fs"; import { join, relative } from "node:path"; +import { fileURLToPath } from "node:url"; -const SRC = new URL("../../src/shared/design-system", import.meta.url).pathname; -const VIEWER = new URL("../../tests/fixtures/design-system", import.meta.url) - .pathname; -const TOKENS_FILE = new URL( - "../../src/shared/design-system/styles/tokens.css", - import.meta.url, -).pathname; +const SRC = fileURLToPath( + new URL("../../src/shared/design-system", import.meta.url), +); +const VIEWER = fileURLToPath( + new URL("../../tests/fixtures/design-system", import.meta.url), +); +const TOKENS_FILE = fileURLToPath( + new URL("../../src/shared/design-system/styles/tokens.css", import.meta.url), +); /** * Colour utilities that may not carry an opacity modifier. diff --git a/scripts/design-system/check-type.mjs b/scripts/design-system/check-type.mjs index 111e22af..161e6a47 100644 --- a/scripts/design-system/check-type.mjs +++ b/scripts/design-system/check-type.mjs @@ -28,10 +28,14 @@ import { readdirSync, readFileSync, statSync } from "node:fs"; import { join, relative } from "node:path"; - -const SRC = new URL("../../src/shared/design-system", import.meta.url).pathname; -const VIEWER = new URL("../../tests/fixtures/design-system", import.meta.url) - .pathname; +import { fileURLToPath } from "node:url"; + +const SRC = fileURLToPath( + new URL("../../src/shared/design-system", import.meta.url), +); +const VIEWER = fileURLToPath( + new URL("../../tests/fixtures/design-system", import.meta.url), +); /** Size roles a component may use. Kept in sync with typography.css. */ const SIZE_ROLES = [ diff --git a/src/bundled/emoji/CustomEmoji.tsx b/src/bundled/emoji/CustomEmoji.tsx index c54aec6c..1ca574e6 100644 --- a/src/bundled/emoji/CustomEmoji.tsx +++ b/src/bundled/emoji/CustomEmoji.tsx @@ -16,6 +16,8 @@ export function CustomEmoji({ return src && failed !== src ? ( {literal}("emoji"); @@ -43,23 +46,23 @@ export function EmojiPicker({ supported: boolean | undefined; }>(); const [gifDiscoveryRequested, setGifDiscoveryRequested] = useState(false); - const [showGifTab, setShowGifTab] = useState(false); const [perLine, setPerLine] = useState(0); const [error, setError] = useState(); const [attempt, retry] = useState(0); const trigger = useRef(null); const controls = useRef(null); - const host = useRef(null); + const [host, setHost] = useState(null); const search = useRef(""); const onInsert = useRef(insert); onInsert.current = insert; const id = useId(); - const community = communityFromScope(scope); + const community = reaction ? undefined : communityFromScope(scope); const gifs = community ? gifAvailability?.community === community ? gifAvailability.supported : undefined : false; + const showGifTab = gifs === true; const catalog = useSyncExternalStore( session.emoji.subscribe, session.emoji.snapshot, @@ -68,7 +71,9 @@ export function EmojiPicker({ useEffect(() => { // The popover is positioned against the action row; intermediate tool groups // may be narrower and are not its available width. - const container = controls.current?.offsetParent; + const container = reaction + ? document.documentElement + : controls.current?.offsetParent; if (!open || disabled || !(container instanceof HTMLElement)) return; const resize = () => setPerLine( @@ -86,7 +91,7 @@ export function EmojiPicker({ const observer = new ResizeObserver(resize); observer.observe(container); return () => observer.disconnect(); - }, [open, disabled]); + }, [open, disabled, reaction]); useEffect(() => { if ( !community || @@ -120,7 +125,7 @@ export function EmojiPicker({ return () => controller.abort(); }, [community, gifDiscoveryRequested, gifAvailability]); useEffect(() => { - if (!open || disabled) return; + if (!open || disabled || reaction) return; function outside(event: PointerEvent) { if ( event.target instanceof Node && @@ -130,12 +135,11 @@ export function EmojiPicker({ } document.addEventListener("pointerdown", outside); return () => document.removeEventListener("pointerdown", outside); - }, [open, disabled]); + }, [open, disabled, reaction]); // biome-ignore lint/correctness/useExhaustiveDependencies: attempt explicitly retries a failed lazy import. useLayoutEffect(() => { - if (!open || disabled || tab !== "emoji" || !host.current || !perLine) - return; - const container = host.current; + if (!open || disabled || tab !== "emoji" || !host || !perLine) return; + const container = host; let cancelled = false; let dispose: (() => void) | undefined; setError(undefined); @@ -185,8 +189,153 @@ export function EmojiPicker({ perLine, tab, animateTab, + host, ]); - return ( + const picker = ( +
+
+ ); + const button = ( + + ); + const controlsView = (
- - {open && !disabled && ( -
-
- )} + {reaction ? : button} + {reaction ? ( + + + + + + ) : open && !disabled ? ( + picker + ) : null}
); + return reaction ? ( + + {controlsView} + + ) : ( + controlsView + ); } diff --git a/src/bundled/emoji/copy-emoji.ts b/src/bundled/emoji/copy-emoji.ts new file mode 100644 index 00000000..c3d92a46 --- /dev/null +++ b/src/bundled/emoji/copy-emoji.ts @@ -0,0 +1,81 @@ +/** Preserve event-local shortcodes when copying selected custom emoji images. */ +export function copyEmoji(event: ClipboardEvent) { + if (event.defaultPrevented || !event.clipboardData) return; + // Editable controls already copy their source text, including shortcodes. + if ( + event + .composedPath() + .some( + (node) => + node instanceof HTMLElement && + (node.matches("input, textarea") || node.isContentEditable), + ) + ) + return; + const selection = document.getSelection(); + if (!selection || selection.isCollapsed || !selection.rangeCount) return; + const fragments = Array.from({ length: selection.rangeCount }, (_, index) => + selection.getRangeAt(index).cloneContents(), + ); + if ( + !fragments.some((fragment) => + fragment.querySelector("img[data-copy-emoji]"), + ) + ) + return; + const values = fragments.map((fragment) => { + for (const emoji of fragment.querySelectorAll( + "img[data-copy-emoji]", + )) { + emoji.replaceWith( + document.createTextNode(emoji.dataset.copyEmoji ?? emoji.alt), + ); + } + return selectedText(fragment); + }); + event.clipboardData.setData("text/plain", values.join("\n")); + event.preventDefault(); +} + +// Walk the detached selection only: no hidden DOM insertion, image loads or +// changes to the user's selection. Preserve explicit breaks, blocks, and the +// tab/newline boundaries browsers use for table cells and rows. +function selectedText(node: Node): string { + if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? ""; + if (node instanceof Element && node.tagName === "BR") return "\n"; + let text = ""; + let previous: Node | undefined; + for (const child of node.childNodes) { + const value = selectedText(child); + const separator = previous && siblingSeparator(previous, child); + if (separator === "\t") text += separator; + else if ( + text && + value && + separator && + !text.endsWith(separator) && + !value.startsWith(separator) + ) + text += separator; + text += value; + previous = child; + } + return text; +} + +function siblingSeparator(previous: Node | undefined, current: Node) { + const previousTag = previous instanceof Element ? previous.tagName : ""; + const currentTag = current instanceof Element ? current.tagName : ""; + if (/^(TD|TH)$/.test(previousTag) || /^(TD|TH)$/.test(currentTag)) + return "\t"; + if ( + /^(TR|THEAD|TBODY|TFOOT)$/.test(previousTag) || + /^(TR|THEAD|TBODY|TFOOT)$/.test(currentTag) || + /^(DIV|P|LI|OL|UL|SECTION|TABLE|BLOCKQUOTE|PRE|H[1-6])$/.test( + previousTag, + ) || + /^(DIV|P|LI|OL|UL|SECTION|TABLE|BLOCKQUOTE|PRE|H[1-6])$/.test(currentTag) + ) + return "\n"; + return ""; +} diff --git a/src/bundled/emoji/emoji-mart.ts b/src/bundled/emoji/emoji-mart.ts index bc7c49d1..00d33e63 100644 --- a/src/bundled/emoji/emoji-mart.ts +++ b/src/bundled/emoji/emoji-mart.ts @@ -274,7 +274,7 @@ export function mountEmojiMart({ stroke: var(--picker-search-background); } .spacer { - height: 4px; + height: var(--picker-search-top-space, 4px); } .spacer + .flex.flex-middle { padding-bottom: 4px; diff --git a/src/bundled/emoji/index.tsx b/src/bundled/emoji/index.tsx index 6b7bf2a4..54497eab 100644 --- a/src/bundled/emoji/index.tsx +++ b/src/bundled/emoji/index.tsx @@ -3,11 +3,13 @@ import { emojiQuery } from "./emoji-query"; import type { PluginModule } from "../../plugins/api"; import type { ComposerToolProps, + ReactionToolProps, InlineContent, } from "../../features/conversation/contracts"; import { emojiMatches } from "../../features/relay/emoji"; import { EmojiPicker } from "./EmojiPicker"; import { CustomEmoji } from "./CustomEmoji"; +import { copyEmoji } from "./copy-emoji"; export const inject = ["conversation"]; const entries = (content: InlineContent) => @@ -17,6 +19,11 @@ const entries = (content: InlineContent) => : [] : (content.message.emoji ?? []); export const apply: PluginModule["apply"] = (ctx) => { + ctx.effect(() => { + if (typeof document === "undefined") return () => {}; + document.addEventListener("copy", copyEmoji); + return () => document.removeEventListener("copy", copyEmoji); + }); ctx.conversation.registerCompletion({ id: "typeahead", title: "Emoji", @@ -27,6 +34,20 @@ export const apply: PluginModule["apply"] = (ctx) => { ctx.conversation.registerTool({ id: "picker", title: "Emoji", + reactionComponent: ({ + session, + scope, + disabled, + select, + }: ReactionToolProps) => ( + + ), component: ({ session, scope, diff --git a/src/features/conversation/ReactionTool.test.ts b/src/features/conversation/ReactionTool.test.ts new file mode 100644 index 00000000..dd66ecc8 --- /dev/null +++ b/src/features/conversation/ReactionTool.test.ts @@ -0,0 +1,68 @@ +import { expect, it } from "vitest"; +import type { ComponentType } from "react"; +import type { Contribution } from "../../plugins/contributions"; +import type { + ComposerTool, + ComposerToolProps, + ReactionToolProps, +} from "./contracts"; +import { reactionTarget, selectReactionTool } from "./ReactionTool"; + +const Component = () => null; +const ComposerComponent = Component as ComponentType; +const ReactionComponent = Component as ComponentType; +const tool = ( + key: string, + order?: number, + reaction = true, +): Contribution => ({ + key, + pluginId: key, + revision: "one", + id: key, + title: key, + ...(order === undefined ? {} : { order }), + component: ComposerComponent, + ...(reaction ? { reactionComponent: ReactionComponent } : {}), +}); + +it("selects the first reaction provider by declared order, then contribution key", () => { + expect( + selectReactionTool([ + tool("plugin/plain", -100, false), + tool("plugin/z", 1), + tool("plugin/b", -2), + tool("plugin/a", -2), + tool("plugin/default"), + ])?.key, + ).toBe("plugin/a"); +}); + +it.each([undefined, Number.NaN, Number.POSITIVE_INFINITY])( + "treats missing or non-finite order %s as zero", + (order) => { + expect( + selectReactionTool([ + tool("plugin/z", order), + tool("plugin/after", 1), + tool("plugin/before", -1), + ])?.key, + ).toBe("plugin/before"); + }, +); + +it("identifies only reactions with a target", () => { + expect( + reactionTarget({ + kind: 7, + tags: [ + ["h", "channel"], + ["e", "target"], + ], + }), + ).toBe("target"); + expect(reactionTarget({ kind: 7, tags: [["h", "channel"]] })).toBeUndefined(); + expect( + reactionTarget({ kind: 9, tags: [["e", "thread", "", "reply"]] }), + ).toBeUndefined(); +}); diff --git a/src/features/conversation/ReactionTool.tsx b/src/features/conversation/ReactionTool.tsx new file mode 100644 index 00000000..5a69f0f7 --- /dev/null +++ b/src/features/conversation/ReactionTool.tsx @@ -0,0 +1,152 @@ +import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react"; +import type { RelaySession } from "../relay/session"; +import type { EventData } from "../relay/events"; +import type { ComposerTool, ContributionReader } from "./contracts"; +import type { Contribution } from "../../plugins/contributions"; +import { ContributionBoundary, contributionKey } from "./ContributionBoundary"; +import { messageViewKey } from "../messages/view-key"; +import type { Outbox } from "../relay/outbox"; + +const toolOrder = (tool: ComposerTool) => + Number.isFinite(tool.order) ? (tool.order ?? 0) : 0; +export function selectReactionTool( + tools: readonly Contribution[], +) { + return tools + .filter((tool) => tool.reactionComponent) + .sort( + (a, b) => + toolOrder(a) - toolOrder(b) || + (a.key < b.key ? -1 : a.key > b.key ? 1 : 0), + )[0]; +} + +export function ReactionTool({ + registry, + ...props +}: { + registry: ContributionReader; + session: RelaySession; + scope: string; + messageId: string; + disabled: boolean; +}) { + const tools = useSyncExternalStore( + registry.subscribe, + registry.snapshot, + registry.snapshot, + ); + const tool = selectReactionTool(tools); + return tool ? ( + Reactions unavailable} + > + + + ) : null; +} + +function OwnedReactionTool({ + registry, + tool, + session, + scope, + messageId, + disabled, +}: { + registry: ContributionReader; + tool: Contribution; + session: RelaySession; + scope: string; + messageId: string; + disabled: boolean; +}) { + const [error, setError] = useState(); + const alive = useRef(false); + const unavailable = useRef(disabled); + useLayoutEffect(() => { + unavailable.current = disabled; + }); + useLayoutEffect(() => { + alive.current = true; + return () => { + alive.current = false; + }; + }, []); + const Picker = tool.reactionComponent; + return Picker ? ( + <> + { + if ( + !alive.current || + unavailable.current || + !registry.snapshot().includes(tool) + ) + return false; + try { + session.messages.react(messageId, emoji); + setError(undefined); + return true; + } catch (reason) { + setError( + reason instanceof Error + ? reason.message + : "Could not add reaction. Try again.", + ); + return false; + } + }} + /> + {error && {error}} + {session.outbox && ( + + )} + + ) : null; +} + +export function reactionTarget(event: Pick) { + return event.kind === 7 + ? event.tags.find((tag) => tag[0] === "e")?.[1] + : undefined; +} + +function ReactionDelivery({ + outbox, + messageId, +}: { + outbox: Outbox; + messageId: string; +}) { + const operations = useSyncExternalStore( + outbox.subscribe, + outbox.snapshot, + outbox.snapshot, + ); + const operation = operations.find( + (item) => + ["failed", "unknown"].includes(item.delivery) && + reactionTarget(item.event) === messageId, + ); + if (!operation) return null; + return ( + + {operation.delivery === "failed" + ? "Couldn’t add reaction." + : "Reaction delivery not confirmed."}{" "} + + + ); +} diff --git a/src/features/conversation/contracts.ts b/src/features/conversation/contracts.ts index b6bedd04..ac7b47b6 100644 --- a/src/features/conversation/contracts.ts +++ b/src/features/conversation/contracts.ts @@ -18,12 +18,21 @@ export type ComposerToolProps = Readonly<{ insertMention(recipient: Readonly<{ pubkey: string; name: string }>): boolean; focus(): void; }>; +export type ReactionToolProps = Readonly<{ + session: RelaySession; + scope: string; + disabled: boolean; + /** Host-owned reaction intent; revoked when the tool or target is removed. */ + select(emoji: string): boolean; +}>; export type ComposerTool = Readonly<{ id: string; title: string; /** Lower values appear first; defaults to zero. Equal values sort by contribution key. */ order?: number; component: ComponentType; + /** Optional emoji-only chooser for the message reaction row. */ + reactionComponent?: ComponentType; }>; export type InlineContent = Readonly<{ text: string; diff --git a/src/features/messages/ChannelTimeline.tsx b/src/features/messages/ChannelTimeline.tsx index 9db2483c..eb723d62 100644 --- a/src/features/messages/ChannelTimeline.tsx +++ b/src/features/messages/ChannelTimeline.tsx @@ -487,6 +487,8 @@ function Timeline({ ({ initial === null ? { focus: vi.fn(), + style: {}, + children: [], addEventListener: vi.fn(), removeEventListener: vi.fn(), ownerDocument: { @@ -263,7 +265,7 @@ it("enlarges Unicode-only drafts and restores normal text presentation", () => { h.type("πŸ˜€ πŸ™ πŸ‘"); expect(h.input().props["data-single-emoji"]).toBe(true); h.type("πŸ˜€ πŸ™ πŸ‘ πŸ˜„"); - expect(h.input().props["data-single-emoji"]).toBeUndefined(); + expect(h.input().props["data-single-emoji"]).toBe(true); h.type("πŸ˜€ πŸ™ hello"); expect(h.input().props["data-single-emoji"]).toBeUndefined(); }); @@ -278,7 +280,7 @@ it("recognizes an exact custom emoji draft without treating shortcode prose as e expect(usesLargeEmojiPresentation(":party: πŸ˜€ :PARTY:", [party])).toBe(true); expect( usesLargeEmojiPresentation(":party: πŸ˜€ :PARTY: :party:", [party]), - ).toBe(false); + ).toBe(true); }); it.each([undefined, "root"])( diff --git a/src/features/messages/MessageComposer.tsx b/src/features/messages/MessageComposer.tsx index 9639d419..30e44ffa 100644 --- a/src/features/messages/MessageComposer.tsx +++ b/src/features/messages/MessageComposer.tsx @@ -11,9 +11,10 @@ import type { RelaySession } from "../relay/session"; import { readView, writeView } from "../../shared/view-state"; import styles from "./Messages.module.css"; import { messageViewKey } from "./view-key"; +import { extendEmojiSelection } from "./emoji-selection"; import { customEmojiOnlySpans, - isUnicodeEmojiOnly, + isEmojiOnly, leadingCustomEmojiSpans, usesLargeEmojiPresentation, } from "./emoji-size"; @@ -115,16 +116,63 @@ function Composer({ customEmojiSources.every( ({ source }) => !!source && source !== failedCustomEmoji, ); - const showCustomEmojiOnly = - showCustomEmoji && - customEmojiOnly.length > 0 && - customEmojiOnly.length <= 3; + const showCustomEmojiOnly = showCustomEmoji && customEmojiOnly.length > 0; const showLeadingCustomEmoji = showCustomEmoji && !customEmojiOnly.length && !!leadingCustomEmoji.spans.length; const input = useRef(null); const customEmojiMirror = useRef(null); + const customEmojiGroup = useRef(null); + const [customEmojiLayout, setCustomEmojiLayout] = useState({ + left: 0, + top: 0, + height: 48, + }); + useLayoutEffect(() => { + if (!showCustomEmojiOnly) return; + const group = customEmojiGroup.current; + const last = group?.children[customEmojiOnly.length - 1]; + if (!group || !last || !(last instanceof HTMLElement)) return; + const resize = () => { + const lineHeight = Number.parseFloat( + getComputedStyle(input.current ?? group).lineHeight, + ); + const next = { + left: Math.min( + last.offsetLeft + last.offsetWidth + 2, + Math.max(0, group.clientWidth - 2), + ), + top: last.offsetTop, + height: last.offsetTop + lineHeight, + }; + setCustomEmojiLayout((current) => + current.left === next.left && + current.top === next.top && + current.height === next.height + ? current + : next, + ); + }; + resize(); + if (typeof ResizeObserver === "undefined") return; + const observer = new ResizeObserver(resize); + observer.observe(group); + return () => observer.disconnect(); + }, [showCustomEmojiOnly, customEmojiOnly.length]); + useLayoutEffect(() => { + const element = input.current; + if ( + showCustomEmojiOnly && + element && + element.selectionStart === draft.length && + element.selectionEnd === draft.length + ) + element.scrollTop = Math.max( + 0, + customEmojiLayout.height - element.clientHeight, + ); + }, [showCustomEmojiOnly, customEmojiLayout.height, draft.length]); const inlineEmojiGroup = useRef(null); const inlinePrefixMeasure = useRef(null); const [inlineTextIndent, setInlineTextIndent] = useState(0); @@ -190,10 +238,14 @@ function Composer({ useLayoutEffect(() => { const mirror = customEmojiMirror.current; if (mirror) mirror.scrollTop = input.current?.scrollTop ?? 0; + if (customEmojiGroup.current) + customEmojiGroup.current.style.transform = `translateY(-${input.current?.scrollTop ?? 0}px)`; }); function syncCustomEmojiScroll(element: HTMLTextAreaElement) { if (customEmojiMirror.current) customEmojiMirror.current.scrollTop = element.scrollTop; + if (customEmojiGroup.current) + customEmojiGroup.current.style.transform = `translateY(-${element.scrollTop}px)`; } function insert( text: string, @@ -264,7 +316,7 @@ function Composer({ return ( typeof edit.text === "string" && insert( - `${edit.text}${isUnicodeEmojiOnly(edit.text) ? "" : " "}`, + `${edit.text}${isEmojiOnly(edit.text, emojiCatalog.entries) ? "" : " "}`, undefined, query, ) @@ -338,7 +390,9 @@ function Composer({ style={ showCustomEmojiOnly ? { - paddingLeft: `calc(${customEmojiOnly.length * 44}px * var(--buzz-text-scale, 1))`, + paddingLeft: customEmojiLayout.left, + paddingTop: customEmojiLayout.top, + height: customEmojiLayout.height, } : showLeadingCustomEmoji ? { textIndent: `${inlineTextIndent}px` } @@ -395,6 +449,28 @@ function Composer({ ["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key) ) { completion.invalidate(); + if ( + showCustomEmoji && + !event.altKey && + !event.ctrlKey && + !event.metaKey && + (event.key === "ArrowLeft" || event.key === "ArrowRight") + ) { + const next = extendEmojiSelection( + customEmojiSources, + event.currentTarget, + event.key, + ); + if (next) { + event.preventDefault(); + event.currentTarget.setSelectionRange( + next.start, + next.end, + next.direction, + ); + setSelection({ start: next.start, end: next.end }); + } + } return; } if (completion.keys.current?.(event)) return; @@ -411,7 +487,11 @@ function Composer({ }} /> {showCustomEmojiOnly && ( -