Enhance details and summary handling in content rendering and improve…

… Markdown processing
tztsai · Nov 10, 2024 · acfbbcf · acfbbcf
1 parent 692eae6
commit acfbbcf
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 19 deletions.
diff --git a/content/index.css b/content/index.css
@@ -7,16 +7,19 @@ html, body {
   width: auto !important; max-width: 100% !important;
 }
 
+details {
+  margin-bottom: -24;
+  margin-top: 0;
+}
+
 details summary {
   cursor: pointer;
   align-items: center;
   font-size: inherit;
   h1, h2, h3, h4, h5, h6 {
     display: inline;
   }
-  p {
-    font-family: inherit;
-    font-size: inherit;
+  blockquote {
     font-weight: normal;
     font-style: italic;
     opacity: 0.8;

diff --git a/content/index.js b/content/index.js
@@ -112,35 +112,66 @@ var update = (update) => {
     setTimeout(() => mj.render(), 60)
   }
 
+  // Add details & summary tags to each section separated by headers
   setTimeout(() => {
     document.querySelectorAll('h2, h3, h4').forEach(header => {
       if (header.parentNode.tagName === 'summary') return;
 
       const details = document.createElement('details');
       const summary = document.createElement('summary');
-      details.id = 'det-' + Math.random().toString(36).substring(2, 7);
+      details.id = 'id-' + Math.random().toString(36).substring(2, 7);
       details.appendChild(summary);
-      
+
       let sibling = header.nextElementSibling;
       while (sibling && (!/^H[1-6]$/.test(sibling.tagName) || sibling.tagName > header.tagName)) {
         const nextSibling = sibling.nextElementSibling;
         if (!summary.textContent &&
-          sibling.tagName === 'blockquote' && 
+          sibling.tagName === 'blockquote' &&
           sibling.textContent.trim().startsWith('Summary:')) {
           summary.textContent = sibling.textContent.replace(/^\s*Summary:\s*/m, '');
         } else {
           details.appendChild(sibling);
         }
         sibling = nextSibling;
       }
-      
+
       header.parentNode.replaceChild(details, header);
       summary.insertAdjacentElement('afterbegin', header);
+
+      // Focus on details when hovering over it
+      var lastTriggerTime = 0;
+      details.addEventListener('mouseenter', () => {
+        const now = Date.now();
+        if (now - lastTriggerTime >= 400) {
+          focusOnDetails(details);
+          lastTriggerTime = now;
+        }
+      });
     });
     document.readyState = 'complete';
   }, 80);
 }
 
+var focusedDetails;
+
+var focusOnDetails = (details) => {
+  if (details.open) return;
+  details.open = true;
+  const rect1 = details.getBoundingClientRect();
+  while (focusedDetails && !focusedDetails.contains(details)) {
+    focusedDetails.open = false;
+    focusedDetails = focusedDetails.parentElement.closest('details');
+  }
+  const rect2 = details.getBoundingClientRect();
+  dy = rect2.top - rect1.top;  // keep the top of rect still
+  if (dy < -20)
+    dy += Math.min(rect1.top, rect1.height) * 0.8;  // scroll down
+  else if (dy > 20)
+    dy -= Math.max(rect1.bottom - window.innerHeight, 0);  // scroll up
+  window.scrollBy(0, dy);
+  focusedDetails = details;
+}
+
 var render = (md) => {
   state.markdown = md
   chrome.runtime.sendMessage({

diff --git a/content/mdwise.js b/content/mdwise.js
@@ -1,7 +1,7 @@
 function cleanHtml() {
   const doc = window.document;
   doc.querySelectorAll(
-    'link, style, script, meta, noscript, header, nav, span, footer, div[role="navigation"]'
+    'link, style, script, meta, noscript, header, nav, span, footer, div[role="navigation"], .js-header-wrapper, .js-header, .js-site-search'
   ).forEach(e => e.remove());
 
   chrome.runtime.sendMessage(
@@ -19,8 +19,8 @@ function cleanHtml() {
 }
 
 async function generateSummaries(text) {
-  const useAI = state.settings.useAI;
-  if (!useAI) return;
+  // const useAI = state.useAI;
+  // if (!useAI) return;
 
   // const prompt = `Convert the following text provided by the user to a well-structured Markdown document. For large chunks of text, consider splitting them into smaller subsections. For each section of any level containing too much information for the user to easily digest, **write a brief summary under its header with prefix "> Summary: "**. Do your best to enable the user to clearly and quickly understand the whole document from top level to bottom.`;
   const prompt = `In the given HTML file, for each <details> element, if necessary, write a proper and brief summary of its content.
@@ -31,7 +31,7 @@ async function generateSummaries(text) {
 
   ID: Summary
 
-  The ID is the "id" attribute of the <details> element, e.g. "det-12345".
+  The ID is the "id" attribute of the <details> element, e.g. "id-12345".
   `
 
   const messageJson = {
@@ -73,12 +73,13 @@ async function generateSummaries(text) {
     while (i < splits.length - !done) {
       if (!splits[i].trim()) break;
       try {
-        const [_, id, txt] = splits[i].match(/\s*(det-\w+): ([\s\S]+)/m)
-        const element = document.getElementById(id);
-        if (element) {
-          const p = document.createElement('p');
+        const [_, id, txt] = splits[i].match(/\s*(id-\w+): ([\s\S]+)/m)
+        const d = document.getElementById(id);
+        if (d) {
+          const p = document.createElement('blockquote');
           p.textContent = txt.trim();
-          element.querySelector('summary').appendChild(p);
+          d.querySelector('summary').appendChild(p);
+          focusOnDetails(d);
         } else {
           console.error('Invalid ID:', id)
         }
@@ -138,9 +139,13 @@ async function generateSummaries(text) {
   var timeout = setInterval(() => {
     if (document.readyState === 'complete') {
       clearInterval(timeout);
-      content = document.getElementById('_html').outerHTML;
+      content = document.getElementById('_html');
+      for (
+        s = content.querySelector('h1')?.previousElementSibling;
+        s; s = s.previousElementSibling
+      ) { s.remove(); }
       // convert the markdown content to text
-      generateSummaries(content);
+      generateSummaries(content.outerHTML);
     }
-  }, 300);
+  }, 500);
 })()