Quote posts

.github/workflows/test-ruby.yml

@@ -6,6 +6,7 @@ on:
     branches:
       - 'main'
       - 'stable-*'
+      - 'merge-upstream'
   pull_request:
 
 env:

app/controllers/api/v1/statuses_controller.rb

@@ -76,7 +76,8 @@ def create
       content_type: status_params[:content_type],
       allowed_mentions: status_params[:allowed_mentions],
       idempotency: request.headers['Idempotency-Key'],
-      with_rate_limit: true
+      with_rate_limit: true,
+      quote_id: status_params[:quote_id].presence
     )
 
     render json: @status, serializer: serializer_for_status
@@ -159,6 +160,7 @@ def status_params
       :visibility,
       :language,
       :scheduled_at,
+      :quote_id,
       :content_type,
       allowed_mentions: [],
       media_ids: [],

app/helpers/context_helper.rb

@@ -42,6 +42,7 @@ module ContextHelper
       'cipherText' => 'toot:cipherText',
     },
     suspended: { 'toot' => 'http://joinmastodon.org/ns#', 'suspended' => 'toot:suspended' },
+    quote_uri: { 'fedibird' => 'http://fedibird.com/ns#', 'quoteUri' => 'fedibird:quoteUri' },
   }.freeze
 
   def full_context

app/helpers/formatting_helper.rb

@@ -19,7 +19,17 @@ def extract_status_plain_text(status)
   module_function :extract_status_plain_text
 
   def status_content_format(status)
-    html_aware_format(status.text, status.local?, preloaded_accounts: [status.account] + (status.respond_to?(:active_mentions) ? status.active_mentions.map(&:account) : []), content_type: status.content_type)
+    base = html_aware_format(status.text, status.local?, preloaded_accounts: [status.account] + (status.respond_to?(:active_mentions) ? status.active_mentions.map(&:account) : []), content_type: status.content_type)
+
+    if status.quote? && status.local?
+      after_html = begin
+        "<span class=\"quote-inline\"><a href=\"#{status.quote.to_log_permalink}\" class=\"status-link unhandled-link\" target=\"_blank\">#{status.quote.to_log_permalink}</a></span>"
+      end.html_safe # rubocop:disable Rails/OutputSafety
+
+      base + after_html
+    else
+      base
+    end
   end
 
   def rss_status_content_format(status)

app/javascript/flavours/glitch/actions/compose.js

@@ -90,6 +90,9 @@ export const COMPOSE_CHANGE_MEDIA_ORDER       = 'COMPOSE_CHANGE_MEDIA_ORDER';
 export const COMPOSE_SET_STATUS = 'COMPOSE_SET_STATUS';
 export const COMPOSE_FOCUS = 'COMPOSE_FOCUS';
 
+export const COMPOSE_QUOTE        = 'COMPOSE_QUOTE';
+export const COMPOSE_QUOTE_CANCEL = 'COMPOSE_QUOTE_CANCEL';
+
 const messages = defineMessages({
   uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
   uploadErrorPoll:  { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
@@ -152,6 +155,23 @@ export function cancelReplyCompose() {
   };
 }
 
+export function quoteCompose(status) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: COMPOSE_QUOTE,
+      status: status,
+    });
+
+    ensureComposeIsVisible(getState);
+  };
+}
+
+export function cancelQuoteCompose() {
+  return {
+    type: COMPOSE_QUOTE_CANCEL,
+  };
+}
+
 export function resetCompose() {
   return {
     type: COMPOSE_RESET,
@@ -240,6 +260,7 @@ export function submitCompose(overridePrivacy = null) {
         status,
         content_type: getState().getIn(['compose', 'content_type']),
         in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
+        quote_id: getState().getIn(['compose', 'quote_id'], null),
         media_ids: media.map(item => item.get('id')),
         media_attributes,
         sensitive: getState().getIn(['compose', 'sensitive']) || (spoilerText.length > 0 && media.size !== 0),

app/javascript/flavours/glitch/actions/importer/normalizer.js

@@ -59,6 +59,8 @@ export function normalizeStatus(status, normalOldStatus, settings) {
     normalStatus.contentHtml = normalOldStatus.get('contentHtml');
     normalStatus.spoilerHtml = normalOldStatus.get('spoilerHtml');
     normalStatus.hidden = normalOldStatus.get('hidden');
+    normalStatus.quote = normalOldStatus.get('quote');
+    normalStatus.quote_hidden = normalOldStatus.get('quote_hidden');
 
     if (normalOldStatus.get('translation')) {
       normalStatus.translation = normalOldStatus.get('translation');
@@ -72,6 +74,35 @@ export function normalizeStatus(status, normalOldStatus, settings) {
     normalStatus.contentHtml  = emojify(normalStatus.content, emojiMap);
     normalStatus.spoilerHtml  = emojify(escapeTextContentForBrowser(spoilerText), emojiMap);
     normalStatus.hidden       = (spoilerText.length > 0 || normalStatus.sensitive) && autoHideCW(settings, spoilerText);
+
+    if (status.quote && status.quote.id) {
+      const quote_spoilerText = status.quote.spoiler_text || '';
+      const quote_searchContent = [quote_spoilerText, status.quote.content].join('\n\n').replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n');
+
+      const quote_emojiMap = makeEmojiMap(normalStatus.quote.emojis);
+
+      const quote_account_emojiMap = makeEmojiMap(status.quote.account.emojis);
+      const displayName = normalStatus.quote.account.display_name.length === 0 ? normalStatus.quote.account.username : normalStatus.quote.account.display_name;
+      normalStatus.quote.account.display_name_html = emojify(escapeTextContentForBrowser(displayName), quote_account_emojiMap);
+      normalStatus.quote.search_index = domParser.parseFromString(quote_searchContent, 'text/html').documentElement.textContent;
+      let docElem = domParser.parseFromString(normalStatus.quote.content, 'text/html').documentElement;
+      Array.from(docElem.querySelectorAll('span.quote-inline'), span => span.remove());
+      Array.from(docElem.querySelectorAll('p,br'), line => {
+        let parentNode = line.parentNode;
+        if (line.nextSibling) {
+          parentNode.insertBefore(document.createTextNode(' '), line.nextSibling);
+        }
+      });
+      let _contentHtml = docElem.textContent;
+      normalStatus.quote.contentHtml  = '<p>'+emojify(_contentHtml.slice(0, 150), quote_emojiMap) + (_contentHtml.slice(150) ? '...' : '')+'</p>';
+      normalStatus.quote.spoilerHtml  = emojify(escapeTextContentForBrowser(quote_spoilerText), quote_emojiMap);
+      normalStatus.quote_hidden       = (quote_spoilerText.length > 0 || normalStatus.quote.sensitive) && autoHideCW(settings, quote_spoilerText);
+
+      // delete the quote link!!!!
+      let parentDocElem = domParser.parseFromString(normalStatus.contentHtml, 'text/html').documentElement;
+      Array.from(parentDocElem.querySelectorAll('span.quote-inline'), span => span.remove());
+      normalStatus.contentHtml = parentDocElem.children[1].innerHTML;
+    }
   }
 
   if (normalOldStatus) {

app/javascript/flavours/glitch/api_types/statuses.ts

@@ -122,4 +122,5 @@ export interface ApiStatusJSON {
   // glitch-soc additions
   local_only?: boolean;
   content_type?: string;
+  quotable?: boolean;
 }

app/javascript/flavours/glitch/components/quote_content.jsx

@@ -0,0 +1,104 @@
+import PropTypes from "prop-types";
+import {useCallback} from "react";
+
+import {defineMessages, injectIntl} from "react-intl";
+
+import ImmutablePropTypes from "react-immutable-proptypes";
+
+import QuoteIcon from "@/material-icons/400-24px/format_quote-fill.svg?react";
+import {Avatar} from "flavours/glitch/components/avatar";
+import {Icon} from "flavours/glitch/components/icon";
+import {RelativeTimestamp} from "flavours/glitch/components/relative_timestamp";
+
+const messages = defineMessages({
+  edited: {id: 'status.edited', defaultMessage: 'Edited {date}'},
+});
+
+const QuoteContent = ({
+  quoteStatus,
+  parseClick,
+  intl
+}) => {
+  let quoteStatusContent = {__html: quoteStatus.get('contentHtml')};
+  let quoteStatusAccount = quoteStatus.get('account');
+  let quoteStatusDisplayName = {__html: quoteStatusAccount.get('display_name_html')};
+  const handle = quoteStatus.getIn(['account', 'acct']);
+  const accountURL = quoteStatus.getIn(['account', 'url']);
+  const statusID = quoteStatus.get('id');
+  const createdAt = quoteStatus.get('created_at');
+  const editedAt = quoteStatus.get('edited_at');
+
+  const handleAccountClick = useCallback((e) => {
+    parseClick(e, `/@${handle}`);
+  }, [handle, parseClick]);
+
+  const handleStatusClick = useCallback((e) => {
+    parseClick(e, `/@${handle}/${statusID}`);
+  }, [handle, statusID, parseClick]);
+
+  return (
+    <div className={"status__quote"} onClick={handleStatusClick}>
+      <blockquote>
+        <div className={"quote__header"}>
+          <a href={accountURL} onClick={handleAccountClick}
+            className={"quote__author"}
+            data-hover-card-account={quoteStatus.getIn(['account', 'id'])}>
+            <Icon
+              fixedWidth
+              aria-hidden='true'
+              key='icon-quote-right'
+              icon={QuoteIcon} />
+            <Avatar account={quoteStatusAccount} size={24} />
+            <bdi>
+              <span className='quote__display-name'>
+                <strong className={"display-name__html"}
+                  dangerouslySetInnerHTML={quoteStatusDisplayName} />
+              </span>
+            </bdi>
+            <span
+              className={"quote__account deemphasized"}>
+              @{handle}
+            </span>
+
+          </a>
+          <span className={"quote__spacer deemphasized"}>
+              ·
+          </span>
+          <a href={quoteStatus.get('url')}
+            onClick={handleStatusClick}
+            className={"quote__datetime deemphasized"}>
+            <RelativeTimestamp timestamp={createdAt} />{editedAt && <abbr
+              title={intl.formatMessage(messages.edited, {
+                date: intl.formatDate(editedAt, {
+                  year: 'numeric',
+                  month: 'short',
+                  day: '2-digit',
+                  hour: '2-digit',
+                  minute: '2-digit'
+                })
+              })}> *</abbr>}
+
+          </a>
+        </div>
+        <div>
+          <a className={"quote__content-link"}
+            href={quoteStatus.get('url')}
+            onClick={handleStatusClick}
+            target='_blank' rel='noopener noreferrer'
+          >
+            <p className={"quote__content"} dangerouslySetInnerHTML={quoteStatusContent} />
+          </a>
+
+        </div>
+      </blockquote>
+    </div>
+  );
+};
+
+QuoteContent.propTypes = {
+  quoteStatus: ImmutablePropTypes.map.isRequired,
+  parseClick: PropTypes.func.isRequired,
+  intl: PropTypes.object.isRequired,
+};
+
+export default injectIntl(QuoteContent);

app/javascript/flavours/glitch/components/status.jsx

@@ -86,6 +86,7 @@ class Status extends ImmutablePureComponent {
     rootId: PropTypes.string,
     onClick: PropTypes.func,
     onReply: PropTypes.func,
+    onQuote: PropTypes.func,
     onFavourite: PropTypes.func,
     onReblog: PropTypes.func,
     onBookmark: PropTypes.func,
@@ -730,7 +731,7 @@ class Status extends ImmutablePureComponent {
       if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) {
         background = attachments.getIn([0, 'preview_url']);
       }
-    } else if (status.get('card') && settings.get('inline_preview_cards') && !this.props.muted) {
+    } else if (!status.get('quote') && status.get('card') && settings.get('inline_preview_cards') && !this.props.muted) {
       media.push(
         <Card
           onOpenMedia={this.handleOpenMedia}

app/javascript/flavours/glitch/components/status_action_bar.jsx

@@ -10,6 +10,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import BookmarkIcon from '@/material-icons/400-24px/bookmark-fill.svg?react';
 import BookmarkBorderIcon from '@/material-icons/400-24px/bookmark.svg?react';
+import FormatQuoteIcon from '@/material-icons/400-24px/format_quote-fill.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
@@ -46,6 +47,7 @@ const messages = defineMessages({
   replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
   reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
   reblog_private: { id: 'status.reblog_private', defaultMessage: 'Boost with original visibility' },
+  quote: { id: 'status.quote', defaultMessage: 'Quote' },
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
@@ -74,6 +76,7 @@ class StatusActionBar extends ImmutablePureComponent {
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
     onReblog: PropTypes.func,
+    onQuote: PropTypes.func,
     onDelete: PropTypes.func,
     onDirect: PropTypes.func,
     onMention: PropTypes.func,
@@ -140,6 +143,17 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   };
 
+  handleQuoteClick = () => {
+    const { signedIn } = this.props.identity;
+
+    if (signedIn) {
+      this.props.onQuote(this.props.status, this.context.router.history);
+    } else {
+      // TODO(ariadne): Add an interaction modal for quoting specifically.
+      this.props.onInteractionModal('reply', this.props.status);
+    }
+  };
+
   handleBookmarkClick = (e) => {
     this.props.onBookmark(this.props.status, e);
   };
@@ -217,6 +231,7 @@ class StatusActionBar extends ImmutablePureComponent {
 
     let menu = [];
     let reblogIcon = 'retweet';
+    let quoteIcon = 'quote-right';
     let replyIcon;
     let replyIconComponent;
     let replyTitle;
@@ -299,6 +314,7 @@ class StatusActionBar extends ImmutablePureComponent {
     const reblogPrivate = status.getIn(['account', 'id']) === me && status.get('visibility') === 'private';
 
     let reblogTitle, reblogIconComponent;
+    let quoteTitle, quoteIconComponent;
 
     if (status.get('reblogged')) {
       reblogTitle = intl.formatMessage(messages.cancel_reblog_private);
@@ -314,6 +330,19 @@ class StatusActionBar extends ImmutablePureComponent {
       reblogIconComponent = RepeatDisabledIcon;
     }
 
+    // quotes
+    if (publicStatus) {
+      quoteTitle = intl.formatMessage(messages.quote);
+      quoteIconComponent = FormatQuoteIcon;
+    } else if (reblogPrivate) {
+      quoteTitle = intl.formatMessage(messages.reblog_private);
+      quoteIconComponent = FormatQuoteIcon;
+    } else {
+      quoteTitle = intl.formatMessage(messages.cannot_reblog);
+      quoteIconComponent = FormatQuoteIcon;
+    }
+
+
     const filterButton = this.props.onFilter && (
       <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' iconComponent={VisibilityIcon} onClick={this.handleHideClick} />
     );
@@ -330,6 +359,7 @@ class StatusActionBar extends ImmutablePureComponent {
           obfuscateCount
         />
         <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={reblogIcon} iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
+        <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} /* active={status.get('reblogged')} */ title={quoteTitle} icon={quoteIcon} iconComponent={quoteIconComponent} onClick={this.handleQuoteClick} />
         <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
         <IconButton className='status__action-bar-button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />