Dashboard: can't click on a link

[dwertheimer]

when i see a link in a task on the Dashboard:

It correctly identifies it as a link but you can't click on it because the link to the item in the note is wrapping it:

<a class="content">get back to 
    <a class="externalLink" href="https://mail.google.com/mail/u/0/#inbox/FMfcgzQcpnRqqrswgvXLdChkWNQZGGbV"><i class="fa-regular fa-globe pad-right"></i>Richard Cooperstein
    </a>
</a>

[dwertheimer]

A link inside of a link is invalid HTML
Here's ChatGPTs suggestion on how to refactor this:

Event Delegation with Click Event Handling

Instead of wrapping the entire content in an tag, use a div with a click handler that:
Checks if the click target is already a link (has href attribute)
If it's a link, lets the browser handle it naturally
If it's not a link, programmatically triggers your "show line in editor" action
This is the cleanest approach because it preserves semantic HTML and lets inner links work naturally.

change:

<a className="content" onClick={handleTaskClick}>
  {dangerouslySetInnerHTML content}
</a>

to

<div 
  className="content clickable-content" 
  onClick={handleTaskClick}
  style={{cursor: 'pointer'}}
>
  {dangerouslySetInnerHTML content}
</div>

And modify handleTaskClick to check if the clicked element or its parent is already a link before proceeding with your action.

function handleTaskClick(e: MouseEvent) {
  // Check if the clicked element or any of its parents is already a link
  let target = e.target
  let isLink = false
  
  // Walk up the DOM tree to see if we clicked on or inside a link
  while (target && target !== e.currentTarget) {
    if (target.tagName === 'A' && target.hasAttribute('href')) {
      isLink = true
      break
    }
    target = target.parentElement
  }
  
  // If we clicked on a link, let the browser handle it naturally
  if (isLink) {
    return
  }
  
  // Otherwise, proceed with the original task click logic
  const { modifierName } = extractModifierKeys(e)
  const dataObjectToPassToFunction = {
    actionType: 'showLineInEditorFromFilename',
    modifierKey: modifierName,
    item,
  }
  sendActionToPlugin(dataObjectToPassToFunction.actionType, dataObjectToPassToFunction, 'Item clicked', true)
}

[dwertheimer]

@jgclark

I am seeing a different bug today that may be related. See the todo in the note and the Dashboard version of it:

The console log seems to say:

[WebView Log] 2025-10-08 16:10:03 | DEBUG | changeBareLinksToHTMLLink :: => !!! buy epic passes <a class="externalLink" href="www.beavercreek.com"><i class="fa-regular fa-globe pad-right"></i>www.beavercreek.com</a> for family (breakeven at 4 days of skiing) for family (breakeven at 4 days of skiing) @repeat(2/7) ^sleu9a >2025-10-07

The theme doesn't seem to matter.

The Dashboard HTML seems to read:

I have no clue where that code is coming from

[dwertheimer]

Maybe here:

I'm not sure or why all this ellipsizing would be happening

[dwertheimer]

Here's the rawContent of that line:

* !!! buy epic passes www.beavercreek.com for family (breakeven at 4 days of skiing) for family (breakeven at 4 days of skiing) @repeat(2/7) ^sleu9a >2025-10-07

[dwertheimer]

One clue that may help:

• if the task above has no "!" at the front, or one or two, it's fine
• but if the task has 3 or more !'s it breaks
• and what's really weird is that the way it breaks (the output) is different if you have !!! or !!!! or !!!! or !!!!

[jgclark]

I can reproduce this second case. Weird.
I've found the function that's going wrong (truncateHTML()) -- which adds ellipsis when truncating -- but despite adding tests with exactly your phrase it passes the tests.
But I have worked out that the number of !!! is a red herring. It's because it makes it exactly (or not) the length when truncation kicks in. Not that that helps me yet.

[jgclark]

OK. I figured it out, and pushed a fix.

[dwertheimer]

@jgclark Thanks for solving the ellipsis issue. Did you also solve the original issue which I guess was unrelated (a link within a link)?

[jgclark]

Sorry, I didn't address that part of it.
The answer on your second case is that if you use a full URL (https://www.beavercreek.com/) it works. One without the protocol doesn't work. And that's down to the WebKit engine, or whatever tech is underneath the HTMLWindow.

On your first case of a Gmail link, assuming that it was a markdown link, it also works for me.