Fossil Forum

There are often times when I need to get the SHA of a version from the UI timeline (merge, diff, ...) but it's very difficult copy it. The problem is that it's a link and if you get anywhere near it to highlight it to copy, you click on it and now you're somewhere else. Ideally, I'd like to double-click it to select, and ctrl-c to copy it. However, a context menu would work too.

I asked Google how to do a custom context menu and it gave me the code below. If one uses a class instead of an id, it's simple to implement for each SHA (I know, it's only code...):

<!-- The Target Link -->
<a href="https://example.com" id="custom-link">Right-click me!</a>

<!-- Custom Context Menu -->
<div id="custom-menu" style="display: none; position: absolute; background: white; box-shadow: 2px 2px 10px rgba(0,0,0,0.2); z-index: 1000;">
  <ul style="list-style: none; margin: 0; padding: 10px;">
    <li style="padding: 8px 12px; cursor: pointer;" onclick="alert('Action 1 clicked!')">Action 1</li>
    <li style="padding: 8px 12px; cursor: pointer;" onclick="alert('Action 2 clicked!')">Action 2</li>
  </ul>
</div>

<script>
  const link = document.getElementById('custom-link');
  const text = link.textContent; // get the visible SHA
  const menu = document.getElementById('custom-menu');

  // 1. Show custom menu
  link.addEventListener('contextmenu', (event) => {
    event.preventDefault(); // Prevent default browser menu

    // 2. Position the menu
    menu.style.display = 'block';
    menu.style.left = `${event.pageX}px`;
    menu.style.top = `${event.pageY}px`;
  });

  // 3. Hide menu on click elsewhere
  document.addEventListener('click', () => {
    menu.style.display = 'none';
  });
</script>

To put data in the copy buffer:

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Text successfully copied to clipboard');
  } catch (err) {
    console.error('Failed to copy text: ', err);
  }
}

// Usage
copyToClipboard('Hello, World!');

````