Merge pull request #9 from dialectlabs/feature/unfurl-links-without-preview

unfurl links without preview

Author: zhelezkov

bun.lockb

@@ -39,26 +39,26 @@
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "postcss": "^8.4.38",
+    "eslint-plugin-react": "^7.34.4",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "postcss": "^8.4.39",
     "postcss-prefix-selector": "^1.16.1",
-    "prettier": "^3.2.5",
-    "prettier-plugin-organize-imports": "^3.2.4",
-    "prettier-plugin-tailwindcss": "^0.5.13",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.0.0",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.3",
-    "tsup": "^8.1.0",
-    "typescript": "^5.0.0"
+    "tsup": "^8.2.0",
+    "typescript": "^5.5.3"
   },
   "peerDependencies": {
     "@solana/wallet-adapter-react": "^0.15.0",
     "@solana/wallet-adapter-react-ui": "^0.9.0",
-    "@solana/web3.js": "^1.91.0",
+    "@solana/web3.js": "^1.95.1",
     "react": ">=18",
     "react-dom": ">=18"
   },

package.json

@@ -102,7 +102,6 @@ export function setupTwitterObserver(
     observer.observe(twitterReactRoot, { childList: true, subtree: true });
   });
 }
-
 async function handleNewNode(
   node: Element,
   config: ActionAdapter,
@@ -114,17 +113,32 @@ 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;
+
+  const linkPreview = findLinkPreview(element);
+
+  let container = findContainerInTweet(
+    linkPreview?.card ?? element,
+    Boolean(linkPreview),
+  );
+  if (linkPreview) {
+    anchor = linkPreview.anchor;
+    container && container.remove();
+    container = linkPreview.card.parentElement as HTMLElement;
+  } else {
+    if (container) {
+      return;
+    }
+    const link = findLastLinkInText(element);
+    if (link) {
+      anchor = link.anchor;
+      container = getContainerForLink(link.tweetText);
+    }
   }
 
-  const anchor = linkPreview.children[0] as HTMLAnchorElement;
+  if (!anchor || !container) return;
+
   const shortenedUrl = anchor.href;
   const actionUrl = await resolveTwitterShortenedUrl(shortenedUrl);
   const interstitialData = isInterstitial(actionUrl);
@@ -174,7 +188,7 @@ async function handleNewNode(
     return;
   }
 
-  rootElement.parentElement?.replaceChildren(
+  addMargin(container).replaceChildren(
     createAction({
       originalUrl: actionUrl,
       action,
@@ -242,3 +256,63 @@ function findElementByTestId(element: Element, testId: string) {
   }
   return element.querySelector(`[data-testid="${testId}"]`);
 }
+
+function findContainerInTweet(element: Element, searchUp?: boolean) {
+  const message = searchUp
+    ? (element.closest(`[data-testid="tweet"]`) ??
+      element.closest(`[data-testid="messageEntry"]`))
+    : (findElementByTestId(element, 'tweet') ??
+      findElementByTestId(element, 'messageEntry'));
+
+  if (message) {
+    return message.querySelector('.dialect-wrapper') as HTMLElement;
+  }
+  return null;
+}
+
+function findLinkPreview(element: Element) {
+  const card = findElementByTestId(element, 'card.wrapper');
+  if (!card) {
+    return null;
+  }
+
+  const anchor = card.children[0]?.children[0] as HTMLAnchorElement;
+
+  return anchor ? { anchor, card } : null;
+}
+function findLastLinkInText(element: Element) {
+  const tweetText = findElementByTestId(element, 'tweetText');
+  if (!tweetText) {
+    return null;
+  }
+
+  const links = tweetText.getElementsByTagName('a');
+  if (links.length > 0) {
+    const anchor = links[links.length - 1] as HTMLAnchorElement;
+    return { anchor, tweetText };
+  }
+  return null;
+}
+
+function getContainerForLink(tweetText: Element) {
+  const root = document.createElement('div');
+  root.className = 'dialect-wrapper';
+  const dm = tweetText.closest(`[data-testid="messageEntry"]`);
+  if (dm) {
+    root.classList.add('dialect-dm');
+    tweetText.parentElement?.parentElement?.prepend(root);
+  } else {
+    tweetText.parentElement?.append(root);
+  }
+  return root;
+}
+
+function addMargin(element: HTMLElement) {
+  if (element && element.classList.contains('dialect-wrapper')) {
+    element.style.marginTop = '12px';
+    if (element.classList.contains('dialect-dm')) {
+      element.style.marginBottom = '8px';
+    }
+  }
+  return element;
+}

src/ext/twitter.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
@@ -115,17 +115,17 @@ export const ActionLayout = ({
               <a
                 href={websiteUrl}
                 target="_blank"
-                className="group -mt-1 inline-flex items-center truncate text-subtext hover:cursor-pointer"
+                className="group inline-flex items-center truncate text-subtext hover:cursor-pointer"
                 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="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">