Add copy-as-markdown button functionality

Signed-off-by: Yordis Prieto <yordis.prieto@gmail.com>

Author: yordis

assets/css/_html.css

@@ -27,6 +27,7 @@
 @import "autocomplete.css";
 @import "tooltips.css"; /* must remain below functions */
 @import "copy-button.css";
+@import "copy-markdown-button.css";
 @import "settings.css";
 @import "toast.css";
 @import "screen-reader.css";

assets/css/copy-markdown-button.css

@@ -0,0 +1,17 @@
+.copy-markdown-button {
+  & svg[aria-live="polite"] {
+    display: none;
+  }
+}
+
+.copy-markdown-button.clicked {
+  color: var(--success);
+
+  & svg[aria-live="polite"] {
+    display: block;
+  }
+
+  & svg:first-child {
+    display: none;
+  }
+}

assets/js/copy-markdown-button.js

@@ -0,0 +1,72 @@
+import buttonHtml from './handlebars/templates/markdown-copy-button.html'
+import { qsAll } from './helpers'
+
+/** @type {HTMLButtonElement} */
+let buttonTemplate
+
+/**
+ * Initializes copy-as-markdown buttons.
+ * Fetches the .md version of the page and copies it to clipboard.
+ * Only adds buttons if the markdown file exists.
+ */
+
+window.addEventListener('exdoc:loaded', initializeCopyMarkdownButtons)
+
+function initializeCopyMarkdownButtons () {
+  if (!('clipboard' in navigator)) {
+    return
+  }
+
+  const markdownUrl = getMarkdownUrl()
+
+  qsAll('.top-heading.heading-with-actions').forEach(container => {
+    if (container.querySelector('.copy-markdown-button')) return
+
+    if (!buttonTemplate) {
+      const div = document.createElement('div')
+      div.innerHTML = buttonHtml
+      buttonTemplate = div.firstChild
+    }
+
+    const button = buttonTemplate.cloneNode(true)
+    button.addEventListener('click', () => handleCopyMarkdown(button, markdownUrl))
+    container.appendChild(button)
+    console.log('Added copy-markdown button')
+  })
+}
+
+function getMarkdownUrl () {
+  const url = new URL(window.location.href)
+  // Replace .html with markdown/filename.md
+  // e.g., /doc/ExDoc.Markdown.html -> /doc/markdown/ExDoc.Markdown.md
+  const markdownPath = url.pathname.replace(/([^/]+)\.html$/, 'markdown/$1.md')
+  return url.origin + markdownPath
+}
+
+async function handleCopyMarkdown (button, markdownUrl) {
+  const originalInnerHTML = button.innerHTML
+
+  try {
+    const response = await fetch(markdownUrl)
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch markdown: ${response.status}`)
+    }
+
+    const markdownContent = await response.text()
+
+    await navigator.clipboard.writeText(markdownContent)
+
+    button.classList.add('clicked')
+    button.disabled = true
+
+    setTimeout(() => {
+      button.classList.remove('clicked')
+      button.disabled = false
+      button.innerHTML = originalInnerHTML
+    }, 3000)
+  } catch (error) {
+    console.error('Failed to copy markdown:', error)
+    button.disabled = false
+  }
+}

assets/js/entry/html.js

@@ -11,6 +11,7 @@ import '../makeup'
 import '../search-bar'
 import '../tooltips/tooltips'
 import '../copy-button'
+import '../copy-markdown-button'
 import '../search-page'
 import '../settings'
 import '../keyboard-shortcuts'

assets/js/handlebars/templates/markdown-copy-button.html

@@ -0,0 +1,9 @@
+<button class="copy-markdown-button icon-action" title="Copy as Markdown" aria-label="Copy as Markdown">
+  <svg role="img" aria-label="copy-markdown" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+  </svg>
+  <svg aria-live="polite" role="img" aria-label="copied" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
+  </svg>
+</button>