feat(Quote Replies): Add action buttons to replies in post notes (meatballs menu)

src/features/quote_replies/index.js

@@ -8,10 +8,13 @@ import { notify } from '../../utils/notifications.js';
 import { getPreferences } from '../../utils/preferences.js';
 import { buildSvg } from '../../utils/remixicon.js';
 import { apiFetch, navigate } from '../../utils/tumblr_helpers.js';
-import { userBlogs } from '../../utils/user.js';
+import { userBlogNames, userBlogs } from '../../utils/user.js';
+import { registerReplyMeatballItem, unregisterReplyMeatballItem } from '../../utils/meatballs.js';
+import { timelineObject } from '../../utils/react_props.js';
 
 const storageKey = 'quote_replies.draftLocation';
 const buttonClass = 'xkit-quote-replies';
+const meatballButtonId = 'quote-replies';
 const dropdownButtonClass = 'xkit-quote-replies-dropdown';
 
 export const styleElement = buildStyle(`
@@ -90,7 +93,7 @@ const processNotifications = notifications => notifications.forEach(async notifi
     {
       click () {
         this.disabled = true;
-        quoteReply(tumblelogName, notificationProps)
+        quoteActivityReply(tumblelogName, notificationProps)
           .catch(showErrorModal)
           .finally(() => { this.disabled = false; });
       }
@@ -99,7 +102,7 @@ const processNotifications = notifications => notifications.forEach(async notifi
   ));
 });
 
-const processGenericReply = async (notificationProps) => {
+const createGenericActivityReplyPost = async (notificationProps) => {
   const {
     subtype: type,
     timestamp,
@@ -117,7 +120,7 @@ const processGenericReply = async (notificationProps) => {
       ? bodyDescriptionContent.text.slice(summaryFormatting.start + 1, summaryFormatting.end - 1)
       : bodyDescriptionContent.text;
 
-    return await processReply({ type, timestamp, targetPostId, targetTumblelogName, targetPostSummary });
+    return await createActivityReplyPost({ type, timestamp, targetPostId, targetTumblelogName, targetPostSummary });
   } catch (exception) {
     console.error(exception);
     console.debug('[XKit] Falling back to generic quote content due to fetch/parse failure');
@@ -150,7 +153,7 @@ const processGenericReply = async (notificationProps) => {
   return { content, tags };
 };
 
-const processReply = async ({ type, timestamp, targetPostId, targetTumblelogName, targetPostSummary }) => {
+const createActivityReplyPost = async ({ type, timestamp, targetPostId, targetTumblelogName, targetPostSummary }) => {
   const { response } = await apiFetch(
     `/v2/blog/${targetTumblelogName}/post/${targetPostId}/notes/timeline`,
     { queryParams: { mode: 'replies', before_timestamp: `${timestamp + 1}000000` } }
@@ -163,36 +166,93 @@ const processReply = async ({ type, timestamp, targetPostId, targetTumblelogName
     throw new Error('Reply not found.');
   }
 
+  const { content: replyContent, blog: { name: replyingBlogName, uuid: replyingBlogUuid } } = reply;
+  const targetPostUrl = `https://${targetTumblelogName}.tumblr.com/post/${targetPostId}`;
+
+  return createReplyPost({ type, replyingBlogName, replyingBlogUuid, targetPostSummary, targetPostUrl, replyContent });
+};
+
+const createReplyPost = ({ type, replyingBlogName, replyingBlogUuid, targetPostSummary, targetPostUrl, replyContent }) => {
   const verbiage = {
     reply: 'replied to your post',
     reply_to_comment: 'replied to you in a post',
     note_mention: 'mentioned you on a post'
   }[type];
-  const text = `@${reply.blog.name} ${verbiage} \u201C${targetPostSummary.replace(/\n/g, ' ')}\u201D:`;
+  const text = `@${replyingBlogName} ${verbiage} \u201C${targetPostSummary.replace(/\n/g, ' ')}\u201D:`;
   const formatting = [
-    { start: 0, end: reply.blog.name.length + 1, type: 'mention', blog: { uuid: reply.blog.uuid } },
-    { start: text.indexOf('\u201C'), end: text.length - 1, type: 'link', url: `https://${targetTumblelogName}.tumblr.com/post/${targetPostId}` }
+    { start: 0, end: replyingBlogName.length + 1, type: 'mention', blog: { uuid: replyingBlogUuid } },
+    { start: text.indexOf('\u201C'), end: text.length - 1, type: 'link', url: targetPostUrl }
   ];
 
   const content = [
     { type: 'text', text, formatting },
-    Object.assign(reply.content[0], { subtype: 'indented' }),
+    Object.assign(replyContent[0], { subtype: 'indented' }),
     { type: 'text', text: '\u200B' }
   ];
   const tags = [
     ...originalPostTag ? [originalPostTag] : [],
-    ...tagReplyingBlog ? [reply.blog.name] : []
+    ...tagReplyingBlog ? [replyingBlogName] : []
   ].join(',');
 
   return { content, tags };
 };
 
-const quoteReply = async (tumblelogName, notificationProps) => {
-  const uuid = userBlogs.find(({ name }) => name === tumblelogName).uuid;
-
+const quoteActivityReply = async (tumblelogName, notificationProps) => {
   const { content, tags } = notificationProps.type === 'generic'
-    ? await processGenericReply(notificationProps)
-    : await processReply(notificationProps);
+    ? await createGenericActivityReplyPost(notificationProps)
+    : await createActivityReplyPost(notificationProps);
+
+  openQuoteReplyDraft(tumblelogName, content, tags);
+};
+
+const determineNoteReplyType = ({ noteProps, parentNoteProps }) => {
+  if (userBlogNames.includes(noteProps.note.blogName)) return false;
+  if (noteProps.communityId) return false;
+
+  if (parentNoteProps && userBlogNames.includes(parentNoteProps.note.blogName)) {
+    return {
+      type: 'reply_to_comment',
+      targetBlogName: parentNoteProps.note.blogName
+    };
+  }
+  if (userBlogNames.includes(noteProps.blog.name)) {
+    return {
+      type: 'reply',
+      targetBlogName: noteProps.blog.name
+    };
+  }
+  for (const { formatting = [] } of noteProps.note.content) {
+    for (const { type, blog } of formatting) {
+      if (type === 'mention' && userBlogNames.includes(blog.name)) {
+        return {
+          type: 'note_mention',
+          targetBlogName: blog.name
+        };
+      }
+    }
+  }
+  return false;
+};
+
+const quoteNoteReply = async ({ currentTarget }) => {
+  const {
+    noteProps: {
+      note: { blogName: replyingBlogName, content: replyContent }
+    }
+  } = currentTarget.__notePropsData;
+
+  const { type, targetBlogName } = determineNoteReplyType(currentTarget.__notePropsData);
+
+  const { summary: targetPostSummary, postUrl: targetPostUrl } = await timelineObject(currentTarget.closest(keyToCss('meatballMenu')));
+  const replyingBlogUuid = await apiFetch(`/v2/blog/${replyingBlogName}/info?fields[blogs]=uuid`)
+    .then(({ response: { blog: { uuid } } }) => uuid);
+
+  const { content, tags } = createReplyPost({ type, replyingBlogName, replyingBlogUuid, targetPostSummary, targetPostUrl, replyContent });
+  openQuoteReplyDraft(targetBlogName, content, tags);
+};
+
+const openQuoteReplyDraft = async (tumblelogName, content, tags) => {
+  const uuid = userBlogs.find(({ name }) => name === tumblelogName).uuid;
 
   const { response: { id: responseId, displayText } } = await apiFetch(`/v2/blog/${uuid}/posts`, { method: 'POST', body: { content, state: 'draft', tags } });
 
@@ -217,6 +277,13 @@ export const main = async function () {
 
   pageModifications.register(notificationSelector, processNotifications);
 
+  registerReplyMeatballItem({
+    id: meatballButtonId,
+    label: 'Quote this reply',
+    notePropsFilter: notePropsData => Boolean(determineNoteReplyType(notePropsData)),
+    onclick: event => quoteNoteReply(event).catch(showErrorModal)
+  });
+
   const { [storageKey]: draftLocation } = await browser.storage.local.get(storageKey);
   browser.storage.local.remove(storageKey);
 
@@ -227,6 +294,8 @@ export const main = async function () {
 
 export const clean = async function () {
   pageModifications.unregister(processNotifications);
+  unregisterReplyMeatballItem(meatballButtonId);
+
   $(`.${buttonClass}`).remove();
 };
 

src/main_world/test_parent_element.js

@@ -0,0 +1,13 @@
+export default function testParentElement (selector) {
+  const element = this;
+  const reactKey = Object.keys(element).find(key => key.startsWith('__reactFiber'));
+  let fiber = element[reactKey];
+
+  while (fiber !== null) {
+    if (fiber.stateNode?.matches?.(selector)) {
+      return true;
+    } else {
+      fiber = fiber.return;
+    }
+  }
+}

src/main_world/unbury_note_props.js

@@ -0,0 +1,18 @@
+export default function unburyNoteProps () {
+  const noteElement = this;
+  const reactKey = Object.keys(noteElement).find(key => key.startsWith('__reactFiber'));
+  let fiber = noteElement[reactKey];
+
+  const resultsByReplyId = {};
+  while (fiber !== null) {
+    const props = fiber.memoizedProps || {};
+    if (typeof props?.note?.replyId === 'string') {
+      // multiple sets of props correspond to each replyId;
+      // prefer the last set, as it contains the most information
+      resultsByReplyId[props.note.replyId] = props;
+    }
+    fiber = fiber.return;
+  }
+  const [noteProps, parentNoteProps] = Object.values(resultsByReplyId);
+  return { noteProps, parentNoteProps };
+}

src/utils/meatballs.js

@@ -3,14 +3,15 @@ import { dom } from './dom.js';
 import { postSelector } from './interface.js';
 import { pageModifications } from './mutations.js';
 import { inject } from './inject.js';
-import { blogData, timelineObject } from './react_props.js';
+import { blogData, notePropsObjects, timelineObject } from './react_props.js';
 
 const postHeaderSelector = `${postSelector} article > header`;
 const blogHeaderSelector = `[style*="--blog-title-color"] > div > div > header, ${keyToCss('blogCardHeaderBar')}`;
 
 const meatballItems = {
   post: {},
-  blog: {}
+  blog: {},
+  reply: {}
 };
 
 /**
@@ -49,6 +50,24 @@ export const unregisterBlogMeatballItem = id => {
   $(`[data-xkit-blog-meatball-button="${id}"]`).remove();
 };
 
+/**
+ * Add a custom button to post replies' meatball menus.
+ * @param {object} options - Destructured
+ * @param {string} options.id - Identifier for this button (must be unique)
+ * @param {string|Function} options.label - Button text to display. May be a function accepting the note component props data of the reply element being actioned on.
+ * @param {Function} options.onclick - Button click listener function
+ * @param {Function} [options.notePropsFilter] - Filter function, called with the note component props data of the reply element being actioned on. Must return true for button to be added.
+ */
+export const registerReplyMeatballItem = function ({ id, label, onclick, notePropsFilter }) {
+  meatballItems.reply[id] = { label, onclick, filter: notePropsFilter };
+  pageModifications.trigger(addMeatballItems);
+};
+
+export const unregisterReplyMeatballItem = id => {
+  delete meatballItems.reply[id];
+  $(`[data-xkit-reply-meatball-button="${id}"]`).remove();
+};
+
 const addMeatballItems = meatballMenus => meatballMenus.forEach(async meatballMenu => {
   const inPostHeader = await inject('/main_world/test_header_element.js', [postHeaderSelector], meatballMenu);
   if (inPostHeader) {
@@ -68,6 +87,20 @@ const addMeatballItems = meatballMenus => meatballMenus.forEach(async meatballMe
       reactData: await blogData(meatballMenu),
       reactDataKey: '__blogData'
     });
+    return;
+  }
+  const inPostFooter = await inject('/main_world/test_parent_element.js', ['footer *'], meatballMenu);
+  if (inPostFooter) {
+    const __notePropsData = await notePropsObjects(meatballMenu);
+
+    if (__notePropsData?.noteProps?.note?.type === 'reply') {
+      addTypedMeatballItems({
+        meatballMenu,
+        type: 'reply',
+        reactData: __notePropsData,
+        reactDataKey: '__notePropsData'
+      });
+    }
   }
 });
 

src/utils/react_props.js

@@ -18,6 +18,21 @@ export const notificationObject = weakMemoize(notificationElement =>
   inject('/main_world/unbury_notification.js', [], notificationElement)
 );
 
+/**
+ * @typedef NotePropsData
+ * @property {object} noteProps - A note element's buried note component props
+ * @property {object} [parentNoteProps] - A note element's parent reply's buried note component props, if it is a threaded reply
+ */
+
+/**
+ * @param {Element} noteElement - An on-screen post note element
+ * @returns {Promise<NotePropsData>} - An object containing the element's buried note component props and, if it is a
+ *                                threaded reply, its parents' buried note component props values
+ */
+export const notePropsObjects = weakMemoize(noteElement =>
+  inject('/main_world/unbury_note_props.js', [], noteElement)
+);
+
 /**
  * @param {Element} meatballMenu - An on-screen meatball menu element in a blog modal header or blog card
  * @returns {Promise<object>} - The post's buried blog or blogSettings property. Some blog data fields, such as "followed," are not available in blog cards.