Fix Social Highlighter functionality

Author: webstackdev

package-lock.json

@@ -75,6 +75,7 @@
   "dependencies": {
     "@adobe/remark-gridtables": "^3.0.19",
     "@astrojs/check": "0.9.8",
+    "@astrojs/compiler-rs": "0.1.6",
     "@astrojs/db": "^0.20.1",
     "@astrojs/mdx": "5.0.3",
     "@astrojs/preact": "5.1.1",

package.json

@@ -0,0 +1,10 @@
+import { isType1Element } from '@components/scripts/assertions/elements'
+
+export const SELECTORS = {
+  analyticsState: 'vercel-analytics-state:last-of-type',
+} as const
+
+export const queryAnalyticsStateElement = (root: ParentNode = document): HTMLElement | null => {
+  const element = root.querySelector(SELECTORS.analyticsState)
+  return isType1Element(element) && element instanceof HTMLElement ? element : null
+}

src/components/Analytics/client/selectors.ts

@@ -13,11 +13,10 @@ const pathname = Astro.url.pathname
 ></vercel-analytics-state>
 
 <script>
+  import { queryAnalyticsStateElement } from './client/selectors'
   import { computeRoute, inject, pageview } from '@vercel/analytics'
 
-  const analyticsState = document.querySelector(
-    'vercel-analytics-state:last-of-type'
-  ) as HTMLElement | null
+  const analyticsState = queryAnalyticsStateElement()
   const pathname = analyticsState?.dataset['pathname'] ?? window.location.pathname
   const params = JSON.parse(analyticsState?.dataset['params'] ?? '{}')
   const mode = analyticsState?.dataset['mode'] === 'development' ? 'development' : 'production'

src/components/Analytics/index.astro

@@ -39,6 +39,13 @@ const mockPlatforms = vi.hoisted<MockPlatform[]>(() => [
     getShareUrl: ({ text, url }) =>
       `https://social.example/bluesky?text=${encodeURIComponent(`${text ?? ''} ${url ?? ''}`.trim())}`,
   },
+  {
+    id: 'reddit',
+    ariaLabel: 'Share on Reddit',
+    icon: 'reddit',
+    getShareUrl: ({ url }) =>
+      `https://social.example/reddit?url=${encodeURIComponent(url ?? '')}`,
+  },
   {
     id: 'mastodon',
     ariaLabel: 'Share on Mastodon',
@@ -169,6 +176,8 @@ describe('HighlighterElement', () => {
       const dialog = element.querySelector('.share-dialog') as HTMLElement | null
       expect(dialog?.getAttribute('role')).toBe('toolbar')
       expect(dialog?.querySelector('.share-dialog__text')?.textContent).toBe('Share Selection')
+      expect(element.querySelectorAll('site-tooltip')).toHaveLength(mockPlatforms.length)
+      expect(Array.from(element.querySelectorAll('.share-button')).every(button => !button.hasAttribute('title'))).toBe(true)
 
       const describedBy = trigger?.getAttribute('aria-describedby')
       expect(describedBy).toBeTruthy()
@@ -247,6 +256,40 @@ describe('HighlighterElement', () => {
     })
   })
 
+  test('does not use native share on desktop browsers', async () => {
+    await renderHighlighter(async ({ element, window }) => {
+      const shareSpy = vi.fn().mockResolvedValue(undefined)
+      const openSpy = vi.spyOn(window, 'open').mockReturnValue(null)
+      ;(window.navigator as Navigator & { share?: typeof shareSpy }).share = shareSpy
+      window.matchMedia = vi.fn().mockReturnValue({ matches: false }) as typeof window.matchMedia
+
+      getShareButton(element, 'reddit').click()
+      await flushMicrotasks()
+
+      expect(shareSpy).not.toHaveBeenCalled()
+      expect(openSpy).toHaveBeenCalledWith(
+        expect.stringContaining('https://social.example/reddit'),
+        '_blank',
+        'noopener,noreferrer'
+      )
+      openSpy.mockRestore()
+    })
+  })
+
+  test('passes unquoted share text to Mastodon modal', async () => {
+    await renderHighlighter(async ({ element }) => {
+      getShareButton(element, 'mastodon').click()
+      await flushMicrotasks()
+
+      expect(mockMastodonModal.openModal).toHaveBeenCalledWith(
+        expect.stringContaining(`${defaultProps.content} http://localhost/`)
+      )
+      expect(mockMastodonModal.openModal).not.toHaveBeenCalledWith(
+        expect.stringContaining(`"${defaultProps.content}"`)
+      )
+    })
+  })
+
   test('opens Mastodon modal and emits share event', async () => {
     await renderHighlighter(async ({ element }) => {
       const shareListener = vi.fn()

src/components/Social/Highlighter/client/__tests__/index.spec.ts

@@ -4,9 +4,10 @@
  * Uses LoadableScript pattern for optimized loading
  */
 
-import type { ShareData } from '@components/Social/common'
+import type { ShareData, SharePlatform } from '@components/Social/common'
 import { platforms, nativeShare } from '@components/Social/common'
 import { MastodonModal } from '@components/Social/Mastodon/client'
+import { initializeTooltipHost } from '@components/Tooltip/client'
 import { addScriptBreadcrumb } from '@components/scripts/errors'
 import { handleScriptError } from '@components/scripts/errors/handler'
 import {
@@ -25,11 +26,16 @@ import {
   queryShareButtons,
   queryShareDialog,
   queryShareIcon,
+  queryShareTooltipHosts,
 } from './selectors'
 
 const SCRIPT_NAME = 'Highlighter'
 const COMPONENT_TAG_NAME = 'highlighter-element'
 const ICON_BANK_ID = 'highlighter-icon-bank'
+const TOOLTIP_TRIGGER_CLASSES =
+  'inline-flex items-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-spotlight'
+const TOOLTIP_POPUP_CLASSES =
+  'pointer-events-none absolute left-1/2 top-full z-(--z-content-floating) mt-2 hidden -translate-x-1/2 max-w-64 rounded-md border border-trim bg-page-inverse px-2 py-1 text-sm leading-tight text-page-base shadow-elevated whitespace-nowrap'
 
 let highlighterInstanceCounter = 0
 const VISIBLE_SHARE_LABEL = 'Share Selection'
@@ -100,13 +106,15 @@ export class HighlighterElement extends LitElement {
     this.bindTriggerButton()
     this.bindWrapperListeners()
     this.bindShareButtons()
+    this.initializeShareTooltips()
     this.applyThemeStyles()
   }
 
   protected override updated(): void {
     this.bindTriggerButton()
     this.bindWrapperListeners()
     this.bindShareButtons()
+    this.initializeShareTooltips()
     this.applyThemeStyles()
   }
 
@@ -144,19 +152,7 @@ export class HighlighterElement extends LitElement {
         >
           <span class="share-dialog__text">${VISIBLE_SHARE_LABEL}</span>
           <span class="share-dialog__buttons">
-            ${platforms.map(
-              platform => html`
-                <button
-                  type="button"
-                  class="share-button"
-                  data-platform="${platform.id}"
-                  aria-label="${platform.ariaLabel}"
-                  title="${platform.ariaLabel}"
-                >
-                  ${this.renderPlatformIcon(platform.id)}
-                </button>
-              `
-            )}
+            ${platforms.map(platform => this.renderShareButton(platform))}
           </span>
           <span class="share-dialog__arrow"></span>
         </span>
@@ -268,6 +264,31 @@ export class HighlighterElement extends LitElement {
     return iconMarkup ? unsafeHTML(iconMarkup) : null
   }
 
+  private renderShareButton(platform: SharePlatform) {
+    return html`
+      <site-tooltip class="relative inline-flex">
+        <span data-tooltip-trigger class="${TOOLTIP_TRIGGER_CLASSES}">
+          <button
+            type="button"
+            class="share-button"
+            data-platform="${platform.id}"
+            aria-label="${platform.ariaLabel}"
+          >
+            ${this.renderPlatformIcon(platform.id)}
+          </button>
+        </span>
+        <span
+          data-tooltip-popup
+          role="tooltip"
+          aria-hidden="true"
+          class="${TOOLTIP_POPUP_CLASSES}"
+        >
+          ${platform.ariaLabel}
+        </span>
+      </site-tooltip>
+    `
+  }
+
   private getIconMarkup(iconName: string): string | null {
     if (!iconName) {
       return null
@@ -306,6 +327,11 @@ export class HighlighterElement extends LitElement {
     }
   }
 
+  private initializeShareTooltips(): void {
+    const tooltipHosts = queryShareTooltipHosts(this)
+    tooltipHosts.forEach(host => initializeTooltipHost(host))
+  }
+
   private applyFocusVisibleStyles(): void {
     if (!this.triggerButton) {
       return
@@ -403,12 +429,28 @@ export class HighlighterElement extends LitElement {
   private getShareData(): ShareData {
     const text = this.getHighlightedText()
     return {
-      text: `"${text}"`,
+      text,
       url: window.location.href,
       title: document.title,
     }
   }
 
+  private shouldUseNativeShare(): boolean {
+    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+      return false
+    }
+
+    if (typeof navigator.share !== 'function') {
+      return false
+    }
+
+    const hasTouchPoints = navigator.maxTouchPoints > 0
+    const prefersCoarsePointer =
+      typeof window.matchMedia === 'function' && window.matchMedia('(pointer: coarse)').matches
+
+    return hasTouchPoints || prefersCoarsePointer
+  }
+
   /**
    * Handle share action for a specific platform
    */
@@ -428,7 +470,7 @@ export class HighlighterElement extends LitElement {
       }
 
       // Try native share first on mobile
-      if (typeof navigator.share === 'function') {
+      if (this.shouldUseNativeShare()) {
         const shared = await nativeShare(data)
         if (shared) {
           this.emitShareEvent(platformId, data)

src/components/Social/Highlighter/client/index.ts

@@ -3,6 +3,7 @@ import {
   isSpanElement,
   isType1Element,
 } from '@components/scripts/assertions/elements'
+import type { TooltipElement } from '@components/Tooltip/client'
 import { ClientScriptError } from '@components/scripts/errors'
 
 export const SELECTORS = {
@@ -11,6 +12,7 @@ export const SELECTORS = {
   dialog: '.share-dialog',
   dialogArrow: '.share-dialog__arrow',
   shareButton: '.share-button',
+  tooltipHost: 'site-tooltip',
   shareIcon: 'svg.share-icon',
   status: '[data-highlighter-status]',
 } as const
@@ -36,6 +38,12 @@ export const queryShareButtons = (context: Element): HTMLButtonElement[] => {
   )
 }
 
+export const queryShareTooltipHosts = (context: Element): TooltipElement[] => {
+  return Array.from(context.querySelectorAll(SELECTORS.tooltipHost)).filter(
+    (node): node is TooltipElement => isType1Element(node) && node.tagName === 'SITE-TOOLTIP'
+  )
+}
+
 export const queryShareDialogArrow = (context: Element): HTMLSpanElement | null => {
   const arrow = context.querySelector(SELECTORS.dialogArrow)
   return isSpanElement(arrow) ? arrow : null

src/components/Social/Highlighter/client/selectors.ts

@@ -142,6 +142,7 @@ describe('MastodonModalElement', () => {
       expect(closeButton?.className).toContain('after:rounded-none')
 
       const shareText = element.querySelector('#share-text') as HTMLTextAreaElement | null
+      expect(shareText?.readOnly).toBe(false)
       expect(shareText?.className).toContain('outline-none')
       expect(shareText?.className).toContain('focus-visible:outline-none')
       expect(shareText?.className).toContain('focus-visible:ring-0')
@@ -200,6 +201,25 @@ describe('MastodonModalElement', () => {
     })
   })
 
+  test('allows editing the share text before submit', async () => {
+    await renderModal(async ({ element, window }) => {
+      element.openModal('Original share text')
+      await flushMicrotasks()
+
+      const textarea = element.querySelector('#share-text') as HTMLTextAreaElement | null
+      expect(textarea).toBeTruthy()
+
+      if (!textarea) {
+        return
+      }
+
+      textarea.value = 'Edited share text'
+      textarea.dispatchEvent(new window.Event('input', { bubbles: true }))
+
+      expect(element.shareText).toBe('Edited share text')
+    })
+  })
+
   test('submits share request when instance is valid', async () => {
     await renderModal(async ({ element, window }) => {
       const openSpy = vi.spyOn(window, 'open').mockReturnValue(null)
@@ -208,8 +228,11 @@ describe('MastodonModalElement', () => {
       await flushMicrotasks()
 
       const input = element.querySelector('#mastodon-instance') as HTMLInputElement
+      const textarea = element.querySelector('#share-text') as HTMLTextAreaElement
       input.value = 'mastodon.social'
       input.dispatchEvent(new window.Event('input', { bubbles: true }))
+      textarea.value = 'Updated share copy'
+      textarea.dispatchEvent(new window.Event('input', { bubbles: true }))
 
       const rememberCheckbox = element.querySelector('#remember-instance') as HTMLInputElement
       rememberCheckbox.checked = true
@@ -221,6 +244,7 @@ describe('MastodonModalElement', () => {
       await flushMicrotasks()
 
       expect(mockIsMastodonInstance).toHaveBeenCalledWith('mastodon.social')
+  expect(mockBuildShareUrl).toHaveBeenCalledWith('mastodon.social', 'Updated share copy')
       expect(mockSaveInstance).toHaveBeenCalled()
       expect(mockSetCurrentInstance).toHaveBeenCalledWith('mastodon.social')
       expect(openSpy).toHaveBeenCalledWith(