diff --git a/app/globals.css b/app/globals.css index c23c8897..ae584c7a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -296,14 +296,32 @@ pre.shiki { @apply py-[1.5px]; } -/* Underline mention nodes when selected in ProseMirror */ +.ProseMirror:focus-within .selection-highlight { + background-color: transparent; +} + .ProseMirror .atMention.ProseMirror-selectednode, .ProseMirror .didMention.ProseMirror-selectednode { - text-decoration: underline; + @apply text-accent-contrast; + @apply px-0.5; + @apply -mx-[3px]; /* extra px to account for the border*/ + @apply -my-px; /*to account for the border*/ + @apply rounded-[4px]; + @apply box-decoration-clone; + background-color: rgba(var(--accent-contrast), 0.2); + border: 1px solid rgba(var(--accent-contrast), 1); } -.ProseMirror:focus-within .selection-highlight { - background-color: transparent; +.mention { + @apply cursor-pointer; + @apply text-accent-contrast; + @apply px-0.5; + @apply -mx-[3px]; + @apply -my-px; /*to account for the border*/ + @apply rounded-[4px]; + @apply box-decoration-clone; + background-color: rgba(var(--accent-contrast), 0.2); + border: 1px solid transparent; } .multiselected:focus-within .selection-highlight { diff --git a/app/lish/[did]/[publication]/[rkey]/BaseTextBlock.tsx b/app/lish/[did]/[publication]/[rkey]/BaseTextBlock.tsx index 6c6de80d..d947705d 100644 --- a/app/lish/[did]/[publication]/[rkey]/BaseTextBlock.tsx +++ b/app/lish/[did]/[publication]/[rkey]/BaseTextBlock.tsx @@ -2,6 +2,7 @@ import { UnicodeString } from "@atproto/api"; import { PubLeafletRichtextFacet } from "lexicons/api"; import { didToBlueskyUrl } from "src/utils/mentionUtils"; import { AtMentionLink } from "components/AtMentionLink"; +import { ProfilePopover } from "components/ProfilePopover"; type Facet = PubLeafletRichtextFacet.Main; export function BaseTextBlock(props: { @@ -27,9 +28,7 @@ export function BaseTextBlock(props: { let isDidMention = segment.facet?.find( PubLeafletRichtextFacet.isDidMention, ); - let isAtMention = segment.facet?.find( - PubLeafletRichtextFacet.isAtMention, - ); + let isAtMention = segment.facet?.find(PubLeafletRichtextFacet.isAtMention); let isUnderline = segment.facet?.find(PubLeafletRichtextFacet.isUnderline); let isItalic = segment.facet?.find(PubLeafletRichtextFacet.isItalic); let isHighlighted = segment.facet?.find( @@ -45,9 +44,11 @@ export function BaseTextBlock(props: { ${isHighlighted ? "highlight bg-highlight-1" : ""}`.replaceAll("\n", " "); // Split text by newlines and insert
tags - const textParts = segment.text.split('\n'); + const textParts = segment.text.split("\n"); const renderedText = textParts.flatMap((part, i) => - i < textParts.length - 1 ? [part,
] : [part] + i < textParts.length - 1 + ? [part,
] + : [part], ); if (isCode) { @@ -58,15 +59,10 @@ export function BaseTextBlock(props: { ); } else if (isDidMention) { children.push( - - {renderedText} - , + {renderedText}} + />, ); } else if (isAtMention) { children.push( diff --git a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx index 6dcfadd1..c24a83a2 100644 --- a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx +++ b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx @@ -119,9 +119,9 @@ export const PostHeaderLayout = (props: { {props.postTitle ? props.postTitle : "Untitled"} {props.postDescription ? ( -

+

{props.postDescription} -

+
) : null}
{props.postInfo} diff --git a/components/AtMentionLink.tsx b/components/AtMentionLink.tsx index ad7ee4ba..ba1cc629 100644 --- a/components/AtMentionLink.tsx +++ b/components/AtMentionLink.tsx @@ -24,7 +24,7 @@ export function AtMentionLink({ isPublication || isDocument ? ( {icon} {children} diff --git a/components/Blocks/TextBlock/RenderYJSFragment.tsx b/components/Blocks/TextBlock/RenderYJSFragment.tsx index 35c1cb7f..89d48d03 100644 --- a/components/Blocks/TextBlock/RenderYJSFragment.tsx +++ b/components/Blocks/TextBlock/RenderYJSFragment.tsx @@ -6,6 +6,7 @@ import * as base64 from "base64-js"; import { didToBlueskyUrl } from "src/utils/mentionUtils"; import { AtMentionLink } from "components/AtMentionLink"; import { Delta } from "src/utils/yjsFragmentToString"; +import { ProfilePopover } from "components/ProfilePopover"; type BlockElements = "h1" | "h2" | "h3" | null | "blockquote" | "p"; export function RenderYJSFragment({ @@ -63,12 +64,18 @@ export function RenderYJSFragment({ ); } - if (node.constructor === XmlElement && node.nodeName === "hard_break") { + if ( + node.constructor === XmlElement && + node.nodeName === "hard_break" + ) { return
; } // Handle didMention inline nodes - if (node.constructor === XmlElement && node.nodeName === "didMention") { + if ( + node.constructor === XmlElement && + node.nodeName === "didMention" + ) { const did = node.getAttribute("did") || ""; const text = node.getAttribute("text") || ""; return ( @@ -77,7 +84,7 @@ export function RenderYJSFragment({ target="_blank" rel="noopener noreferrer" key={index} - className="text-accent-contrast hover:underline cursor-pointer" + className="mention" > {text} @@ -85,7 +92,10 @@ export function RenderYJSFragment({ } // Handle atMention inline nodes - if (node.constructor === XmlElement && node.nodeName === "atMention") { + if ( + node.constructor === XmlElement && + node.nodeName === "atMention" + ) { const atURI = node.getAttribute("atURI") || ""; const text = node.getAttribute("text") || ""; return ( @@ -161,4 +171,3 @@ function attributesToStyle(d: Delta) { return props; } - diff --git a/components/Blocks/TextBlock/schema.ts b/components/Blocks/TextBlock/schema.ts index a82aa7e3..2e6a444c 100644 --- a/components/Blocks/TextBlock/schema.ts +++ b/components/Blocks/TextBlock/schema.ts @@ -147,7 +147,7 @@ let baseSchema = { toDOM(node) { // NOTE: This rendering should match the AtMentionLink component in // components/AtMentionLink.tsx. If you update one, update the other. - let className = "atMention text-accent-contrast"; + let className = "atMention mention"; let aturi = new AtUri(node.attrs.atURI); if (aturi.collection === "pub.leaflet.publication") className += " font-bold"; @@ -168,7 +168,8 @@ let baseSchema = { "img", { src: `/api/pub_icon?at_uri=${encodeURIComponent(node.attrs.atURI)}`, - class: "inline-block w-5 h-5 rounded-full mr-1 align-text-top", + class: + "inline-block w-4 h-4 rounded-full mt-[3px] mr-1 align-text-top", alt: "", width: "16", height: "16", @@ -214,7 +215,7 @@ let baseSchema = { return [ "span", { - class: "didMention text-accent-contrast", + class: "didMention mention", "data-did": node.attrs.did, }, node.attrs.text, diff --git a/components/ProfilePopover.tsx b/components/ProfilePopover.tsx index bc76d7e0..98a9ff3f 100644 --- a/components/ProfilePopover.tsx +++ b/components/ProfilePopover.tsx @@ -45,7 +45,7 @@ export const ProfilePopover = (props: {
) : ( -
Profile not found
+
Profile not found
)} ); diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx index 6f698b0f..f872d0d5 100644 --- a/components/Tooltip.tsx +++ b/components/Tooltip.tsx @@ -26,7 +26,7 @@ export const Tooltip = (props: { props.skipDelayDuration ? props.skipDelayDuration : 300 } > - + {props.trigger}