Merge e3d9b4405b into 3b52dca405

app/helpers/context_helper.rb

@@ -26,6 +26,12 @@ module ContextHelper
     suspended: { 'toot' => 'http://joinmastodon.org/ns#', 'suspended' => 'toot:suspended' },
     attribution_domains: { 'toot' => 'http://joinmastodon.org/ns#', 'attributionDomains' => { '@id' => 'toot:attributionDomains', '@type' => '@id' } },
     quote_requests: { 'QuoteRequest' => 'https://w3id.org/fep/044f#QuoteRequest' },
+    quotes: {
+      'quote' => 'https://w3id.org/fep/044f#quote',
+      'quoteUri' => 'http://fedibird.com/ns#quoteUri',
+      '_misskey_quote' => 'https://misskey-hub.net/ns#_misskey_quote',
+      'quoteAuthorization' => 'https://w3id.org/fep/044f#quoteAuthorization',
+    },
     interaction_policies: {
       'gts' => 'https://gotosocial.org/ns#',
       'interactionPolicy' => { '@id' => 'gts:interactionPolicy', '@type' => '@id' },

app/javascript/mastodon/components/account_bio.tsx

@@ -1,12 +1,30 @@
+import { useCallback } from 'react';
+
 import { useLinks } from 'mastodon/hooks/useLinks';
 
-export const AccountBio: React.FC<{
+interface AccountBioProps {
   note: string;
   className: string;
-}> = ({ note, className }) => {
+  dropdownAccountId?: string;
-  const handleClick = useLinks();
+}
 
-  if (note.length === 0 || note === '<p></p>') {
+export const AccountBio: React.FC<AccountBioProps> = ({
+  note,
+  className,
+  dropdownAccountId,
+}) => {
+  const handleClick = useLinks(!!dropdownAccountId);
+  const handleNodeChange = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (!dropdownAccountId || !node || node.childNodes.length === 0) {
+        return;
+      }
+      addDropdownToHashtags(node, dropdownAccountId);
+    },
+    [dropdownAccountId],
+  );
+
+  if (note.length === 0) {
     return null;
   }
 
@@ -15,6 +33,28 @@ export const AccountBio: React.FC<{
       className={`${className} translate`}
       dangerouslySetInnerHTML={{ __html: note }}
       onClickCapture={handleClick}
+      ref={handleNodeChange}
     />
   );
 };
+
+function addDropdownToHashtags(node: HTMLElement | null, accountId: string) {
+  if (!node) {
+    return;
+  }
+  for (const childNode of node.childNodes) {
+    if (!(childNode instanceof HTMLElement)) {
+      continue;
+    }
+    if (
+      childNode instanceof HTMLAnchorElement &&
+      (childNode.classList.contains('hashtag') ||
+        childNode.innerText.startsWith('#')) &&
+      !childNode.dataset.menuHashtag
+    ) {
+      childNode.dataset.menuHashtag = accountId;
+    } else if (childNode.childNodes.length > 0) {
+      addDropdownToHashtags(childNode, accountId);
+    }
+  }
+}

app/javascript/mastodon/features/account_timeline/components/account_header.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import { NavLink } from 'react-router-dom';
 
+import { AccountBio } from '@/mastodon/components/account_bio';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import LockIcon from '@/material-icons/400-24px/lock.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
@@ -773,7 +774,6 @@ export const AccountHeader: React.FC<{
     );
   }
 
-  const content = { __html: account.note_emojified };
   const displayNameHtml = { __html: account.display_name_html };
   const fields = account.fields;
   const isLocal = !account.acct.includes('@');
@@ -897,12 +897,11 @@ export const AccountHeader: React.FC<{
                   <AccountNote accountId={accountId} />
                 )}
 
-                {account.note.length > 0 && account.note !== '<p></p>' && (
+                <AccountBio
-                  <div
+                  note={account.note_emojified}
-                    className='account__header__content translate'
+                  dropdownAccountId={accountId}
-                    dangerouslySetInnerHTML={content}
+                  className='account__header__content'
                 />
-                )}
 
                 <div className='account__header__fields'>
                   <dl>

app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx

@@ -18,6 +18,11 @@ import { useAppSelector, useAppDispatch } from 'mastodon/store';
 import { EmbeddedStatusContent } from './embedded_status_content';
 
 export type Mention = RecordOf<{ url: string; acct: string }>;
+export type MediaAttachment = RecordOf<{
+  id: string;
+  type: string;
+  description?: string;
+}>;
 
 export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   statusId,
@@ -117,9 +122,14 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   const language = status.get('language') as string;
   const mentions = status.get('mentions') as ImmutableList<Mention>;
   const expanded = !status.get('hidden') || !contentWarning;
-  const mediaAttachmentsSize = (
+  const mediaAttachments = status.get(
-    status.get('media_attachments') as ImmutableList<unknown>
+    'media_attachments',
-  ).size;
+  ) as ImmutableList<MediaAttachment>;
+  const mediaAttachmentsWithDescription = mediaAttachments.filter(
+    (attachment) => !!attachment.get('description'),
+  );
+  const uncaptionedMediaCount =
+    mediaAttachments.size - mediaAttachmentsWithDescription.size;
 
   return (
     <div
@@ -153,26 +163,46 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
         />
       )}
 
-      {expanded && (poll || mediaAttachmentsSize > 0) && (
+      {expanded && !!poll && (
-        <div className='notification-group__embedded-status__attachments reply-indicator__attachments'>
+        <div
-          {!!poll && (
+          className='notification-group__embedded-status__attachments reply-indicator__attachments'
-            <>
+          key='poll-indicator'
+        >
           <Icon icon={BarChart4BarsIcon} id='bar-chart-4-bars' />
-              <FormattedMessage
+          <FormattedMessage id='reply_indicator.poll' defaultMessage='Poll' />
-                id='reply_indicator.poll'
+        </div>
-                defaultMessage='Poll'
-              />
-            </>
       )}
-          {mediaAttachmentsSize > 0 && (
+
-            <>
+      {expanded &&
+        mediaAttachmentsWithDescription.size > 0 &&
+        mediaAttachmentsWithDescription.map((attachment) => (
+          <div
+            className='notification-group__embedded-status__attachments reply-indicator__attachments'
+            key={`media-description-${attachment.get('id')}}`}
+          >
             <Icon icon={PhotoLibraryIcon} id='photo-library' />
+            <span>{attachment.get('description')}</span>
+          </div>
+        ))}
+
+      {expanded && uncaptionedMediaCount > 0 && (
+        <div
+          className='notification-group__embedded-status__attachments reply-indicator__attachments'
+          key='uncaptioned-media-indicator'
+        >
+          <Icon icon={PhotoLibraryIcon} id='photo-library' />
+          {mediaAttachmentsWithDescription.size > 0 ? (
+            <FormattedMessage
+              id='reply_indicator.other_attachments'
+              defaultMessage='{count, plural, one {# other attachment} other {# other attachments}}'
+              values={{ count: uncaptionedMediaCount }}
+            />
+          ) : (
             <FormattedMessage
               id='reply_indicator.attachments'
               defaultMessage='{count, plural, one {# attachment} other {# attachments}}'
-                values={{ count: mediaAttachmentsSize }}
+              values={{ count: uncaptionedMediaCount }}
             />
-            </>
           )}
         </div>
       )}

app/javascript/mastodon/hooks/useLinks.ts

@@ -8,13 +8,14 @@ import { openURL } from 'mastodon/actions/search';
 import { useAppDispatch } from 'mastodon/store';
 
 const isMentionClick = (element: HTMLAnchorElement) =>
-  element.classList.contains('mention');
+  element.classList.contains('mention') &&
+  !element.classList.contains('hashtag');
 
 const isHashtagClick = (element: HTMLAnchorElement) =>
   element.textContent?.[0] === '#' ||
   element.previousSibling?.textContent?.endsWith('#');
 
-export const useLinks = () => {
+export const useLinks = (skipHashtags?: boolean) => {
   const history = useHistory();
   const dispatch = useAppDispatch();
 
@@ -61,12 +62,12 @@ export const useLinks = () => {
       if (isMentionClick(target)) {
         e.preventDefault();
         void handleMentionClick(target);
-      } else if (isHashtagClick(target)) {
+      } else if (isHashtagClick(target) && !skipHashtags) {
         e.preventDefault();
         handleHashtagClick(target);
       }
     },
-    [handleMentionClick, handleHashtagClick],
+    [skipHashtags, handleMentionClick, handleHashtagClick],
   );
 
   return handleClick;

app/javascript/mastodon/locales/en.json

@@ -754,6 +754,7 @@
   "relative_time.today": "today",
   "reply_indicator.attachments": "{count, plural, one {# attachment} other {# attachments}}",
   "reply_indicator.cancel": "Cancel",
+  "reply_indicator.other_attachments": "{count, plural, one {# other attachment} other {# other attachments}}",
   "reply_indicator.poll": "Poll",
   "report.block": "Block",
   "report.block_explanation": "You will not see their posts. They will not be able to see your posts or follow you. They will be able to tell that they are blocked.",

app/javascript/mastodon/models/account.ts

@@ -126,6 +126,9 @@ export function createAccountFromServerJSON(serverJSON: ApiAccountJSON) {
       ? accountJSON.username
       : accountJSON.display_name;
 
+  const accountNote =
+    accountJSON.note && accountJSON.note !== '<p></p>' ? accountJSON.note : '';
+
   return AccountFactory({
     ...accountJSON,
     moved: moved?.id,
@@ -142,8 +145,8 @@ export function createAccountFromServerJSON(serverJSON: ApiAccountJSON) {
       escapeTextContentForBrowser(displayName),
       emojiMap,
     ),
-    note_emojified: emojify(accountJSON.note, emojiMap),
+    note_emojified: emojify(accountNote, emojiMap),
-    note_plain: unescapeHTML(accountJSON.note),
+    note_plain: unescapeHTML(accountNote),
     url:
       accountJSON.url.startsWith('http://') ||
       accountJSON.url.startsWith('https://')

app/javascript/styles/mastodon/components.scss

@@ -10771,6 +10771,12 @@ noscript {
       font-size: 15px;
       line-height: 22px;
       color: $dark-text-color;
+
+      span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 }