unfurl links without preview

Author: prsvic

src/ext/twitter.tsx

@@ -102,7 +102,6 @@ export function setupTwitterObserver(
     observer.observe(twitterReactRoot, { childList: true, subtree: true });
   });
 }
-
 async function handleNewNode(
   node: Element,
   config: ActionAdapter,
@@ -114,17 +113,25 @@ async function handleNewNode(
   if (!element || element.localName !== 'div') {
     return;
   }
-  const rootElement = findElementByTestId(element, 'card.wrapper');
-  if (!rootElement) {
-    return;
-  }
-  // handle link preview only, assuming that link preview is a must for actions
-  const linkPreview = rootElement.children[0] as HTMLDivElement;
-  if (!linkPreview) {
-    return;
+
+  let anchor;
+  let card;
+  let tweetText;
+
+  const linkPreview = tryLinkPreview(element);
+  if (linkPreview) {
+    anchor = linkPreview.anchor;
+    card = linkPreview.card;
+  } else {
+    const link = tryLinkInText(element);
+    if (link) {
+      anchor = link.anchor;
+      tweetText = link.tweetText;
+    }
   }
 
-  const anchor = linkPreview.children[0] as HTMLAnchorElement;
+  if (!anchor) return;
+
   const shortenedUrl = anchor.href;
   const actionUrl = await resolveTwitterShortenedUrl(shortenedUrl);
   const interstitialData = isInterstitial(actionUrl);
@@ -168,13 +175,22 @@ async function handleNewNode(
     return;
   }
 
+  //double check if link preview appeared after we assumed it is not there
+  const isCardPresent = findCardInTweet(element);
+  if (!card && isCardPresent) {
+    console.log('found card in tweet');
+    return;
+  }
+
   const action = await Action.fetch(actionApiUrl, config).catch(() => null);
 
   if (!action) {
     return;
   }
 
-  rootElement.parentElement?.replaceChildren(
+  const container = card ? card.parentElement : getContainerForLink(tweetText!);
+
+  container?.replaceChildren(
     createAction({
       originalUrl: actionUrl,
       action,
@@ -242,3 +258,50 @@ function findElementByTestId(element: Element, testId: string) {
   }
   return element.querySelector(`[data-testid="${testId}"]`);
 }
+
+function getContainerForLink(tweetText: Element) {
+  const root = document.createElement('div');
+  root.style.paddingTop = '12px';
+  const dm = tweetText.closest(`[data-testid="messageEntry"]`);
+  if (dm) {
+    tweetText.parentElement?.parentElement?.prepend(root);
+    root.style.paddingBottom = '8px';
+  } else {
+    tweetText.parentElement?.append(root);
+  }
+  return root;
+}
+
+function findCardInTweet(element: Element) {
+  const message =
+    findElementByTestId(element, 'tweet') ??
+    findElementByTestId(element, 'messageEntry');
+  if (message) {
+    return findElementByTestId(message, 'card.wrapper');
+  }
+}
+
+function tryLinkPreview(element: Element) {
+  const card = findElementByTestId(element, 'card.wrapper');
+  if (card) {
+    const linkPreview = card.children[0];
+    if (linkPreview) {
+      const anchor = linkPreview.children[0] as HTMLAnchorElement;
+      return { anchor, card };
+    }
+  }
+}
+function tryLinkInText(element: Element) {
+  const tweetText = findElementByTestId(element, 'tweetText');
+  if (!tweetText || tweetText.classList.contains('dialect-link-tweet')) {
+    return;
+  }
+
+  const links = tweetText.getElementsByTagName('a');
+  if (links.length > 0) {
+    //marking tweet as visited
+    tweetText.classList.add('dialect-link-tweet');
+    const anchor = links[links.length - 1] as HTMLAnchorElement;
+    return { anchor, tweetText };
+  }
+}

src/ui/ActionLayout.tsx

@@ -96,7 +96,7 @@ export const ActionLayout = ({
 }: LayoutProps) => {
   return (
     <div className={clsx('blink', stylePresetClassMap[stylePreset])}>
-      <div className="mt-3 w-full cursor-default overflow-hidden rounded-2xl border border-stroke-primary bg-bg-primary shadow-action">
+      <div className="w-full cursor-default overflow-hidden rounded-2xl border border-stroke-primary bg-bg-primary shadow-action">
         {image && (
           <Linkable url={websiteUrl} className="block px-5 pt-5">
             <img
@@ -119,13 +119,13 @@ export const ActionLayout = ({
                 rel="noopener noreferrer"
               >
                 <LinkIcon className="mr-2 text-icon-primary transition-colors group-hover:text-icon-primary-hover motion-reduce:transition-none" />
-                <span className="text-text-link group-hover:text-text-link-hover transition-colors group-hover:underline motion-reduce:transition-none">
+                <span className="text-text-link transition-colors group-hover:text-text-link-hover group-hover:underline motion-reduce:transition-none">
                   {websiteText ?? websiteUrl}
                 </span>
               </a>
             )}
             {websiteText && !websiteUrl && (
-              <span className="text-text-link -mt-1 inline-flex items-center truncate text-subtext">
+              <span className="-mt-1 inline-flex items-center truncate text-subtext text-text-link">
                 {websiteText}
               </span>
             )}
@@ -259,9 +259,9 @@ const ActionInput = ({
   return (
     <div
       className={clsx(
-        'border-input-stroke focus-within:border-input-stroke-selected flex items-center gap-2 rounded-input border transition-colors motion-reduce:transition-none',
+        'flex items-center gap-2 rounded-input border border-input-stroke transition-colors focus-within:border-input-stroke-selected motion-reduce:transition-none',
         {
-          'hover:focus-within:border-input-stroke-selected hover:border-input-stroke-hover':
+          'hover:border-input-stroke-hover hover:focus-within:border-input-stroke-selected':
             !disabled,
         },
       )}
@@ -271,7 +271,7 @@ const ActionInput = ({
         value={value}
         disabled={disabled}
         onChange={extendedChange}
-        className="bg-input-bg text-text-input placeholder:text-text-input-placeholder disabled:text-text-input-disabled my-3 ml-4 flex-1 truncate outline-none"
+        className="my-3 ml-4 flex-1 truncate bg-input-bg text-text-input outline-none placeholder:text-text-input-placeholder disabled:text-text-input-disabled"
       />
       {button && (
         <div className="my-2 mr-2">