markpaste 0.0.1 → 0.0.6

package/src/app.js

@@ -15,7 +15,7 @@ window.$ = function (query, context) {
   if (result === null) {
     throw new Error(`query ${query} not found`);
   }
-   return /** @type {import('typed-query-selector/parser.js').ParseSelector<T, Element>} */ (result);
+  return /** @type {import('typed-query-selector/parser.js').ParseSelector<T, Element>} */ (result);
 };
 /**
  * @template {string} T
@@ -55,13 +55,14 @@ function toggleTheme() {
   localStorage.setItem('theme', newTheme);
 }
 
-const {$, $$ } = window;
+const {$, $$} = window;
 
 const inputArea = $('div#inputArea');
 const htmlCode = $('code#htmlCode');
 const copyBtn = $('button#copyBtn');
 const themeToggle = $('button#themeToggle');
 const cleanHtmlToggle = $('input#cleanHtmlToggle');
+const loadingOverlay = $('div#loadingOverlay');
 
 // View Toggle
 const viewMarkdownBtn = $('button#viewMarkdownBtn');
@@ -97,7 +98,6 @@ const convertersPromise = (async () => {
 let currentView = 'markdown'; // 'markdown' or 'rendered'
 
 async function init() {
-
   setupEventListeners();
 
   loadTheme();
@@ -108,7 +108,7 @@ async function init() {
   // Initial process if there's content (e.g. from reload, though usually empty)
   if (inputArea.innerHTML) {
     lastProcessedContent = inputArea.innerHTML;
-    processContent(lastProcessedContent);
+    await processContent(lastProcessedContent);
   }
 }
 
@@ -133,23 +133,24 @@ async function startIdleDetector() {
         if (userState === 'idle') {
           // Unload pandoc if it exists
           if (converters.pandoc) {
-             console.log('User is idle. Unloading pandoc module to free memory.');
-             if (converters.pandoc.dispose) {
-               converters.pandoc.dispose();
-             }
-             delete converters.pandoc;
+            console.log('User is idle. Unloading pandoc module to free memory.');
+            if (converters.pandoc.dispose) {
+              converters.pandoc.dispose();
+            }
+            delete converters.pandoc;
           }
         }
       });
 
       // 10 minutes = 600,000 ms
-      idleDetector.start({
-        threshold: 600000,
-        signal,
-      }).catch(err => {
-         console.warn('Idle detection start failed:', err);
-      });
-
+      idleDetector
+        .start({
+          threshold: 600000,
+          signal,
+        })
+        .catch(err => {
+          console.warn('Idle detection start failed:', err);
+        });
     } catch (err) {
       console.warn('Idle detection setup failed:', err);
     }
@@ -159,18 +160,40 @@ async function startIdleDetector() {
 function setupEventListeners() {
   inputArea.on('paste', handlePaste);
 
-  inputArea.on('input', () => {
+  inputArea.on('input', async () => {
     lastProcessedContent = inputArea.innerHTML;
-    processContent(lastProcessedContent);
+    if (lastProcessedContent.length > 10000) {
+      showLoading();
+      setTimeout(async () => {
+        try {
+          await processContent(lastProcessedContent);
+        } finally {
+          hideLoading();
+        }
+      }, 10);
+    } else {
+      await processContent(lastProcessedContent);
+    }
   });
 
   copyBtn.on('click', copyToClipboard);
 
   themeToggle.on('click', toggleTheme);
 
-  cleanHtmlToggle.on('change', () => {
+  cleanHtmlToggle.on('change', async () => {
     if (lastProcessedContent) {
-      processContent(lastProcessedContent);
+      if (lastProcessedContent.length > 5000) {
+        showLoading();
+        setTimeout(async () => {
+          try {
+            await processContent(lastProcessedContent);
+          } finally {
+            hideLoading();
+          }
+        }, 10);
+      } else {
+        await processContent(lastProcessedContent);
+      }
     }
   });
 
@@ -225,6 +248,14 @@ function handleSelectAll(e) {
   }
 }
 
+function showLoading() {
+  loadingOverlay.classList.remove('hidden');
+}
+
+function hideLoading() {
+  loadingOverlay.classList.add('hidden');
+}
+
 async function handlePaste(e) {
   e.preventDefault();
 
@@ -232,14 +263,25 @@ async function handlePaste(e) {
   const pastedHtml = clipboardData.getData('text/html');
   const pastedText = clipboardData.getData('text/plain');
 
+  showLoading();
+
   await convertersPromise;
 
-  const content = pastedHtml || pastedText;
+  const isMarkdown = isProbablyMarkdown(pastedText, !!pastedHtml);
+  const content = isMarkdown ? pastedText : pastedHtml || pastedText;
   lastProcessedContent = content;
-  processContent(content);
 
-  // Reset scroll position for all pre elements
-  $$('pre').forEach(pre => pre.scrollTop = 0);
+  // Use setTimeout to allow UI to update before blocking the thread with conversion
+  setTimeout(async () => {
+    try {
+      await processContent(content, isMarkdown);
+    } finally {
+      hideLoading();
+    }
+
+    // Reset scroll position for all pre elements
+    $$('pre').forEach(pre => (pre.scrollTop = 0));
+  }, 10);
 
   inputArea.innerHTML = '';
   inputArea.setAttribute('placeholder', 'Pasted! Ready for more...');
@@ -248,34 +290,106 @@ async function handlePaste(e) {
   }, 2000);
 }
 
-function processContent(html) {
-  const shouldClean = cleanHtmlToggle.checked;
-  const contentToConvert = shouldClean ? cleanHTML(html) : removeStyleAttributes(html);
+function isProbablyMarkdown(text, hasHtml) {
+  if (hasHtml) return false;
+  const trimmed = text.trim();
+  if (trimmed.startsWith('<')) return false;
+  return true;
+}
+
+async function processContent(content, isMarkdown = null) {
+  let htmlToShow;
+  let markdownResults;
+
+  if (isMarkdown === null) {
+    isMarkdown = isProbablyMarkdown(content, false);
+  }
+
+  if (isMarkdown) {
+    // If it's markdown, the "results" are just the content itself.
+    markdownResults = {
+      turndown: content,
+      pandoc: content,
+    };
+    // For the HTML preview, we render the markdown.
+    const tempDiv = document.createElement('div');
+    await renderMarkdown(content, tempDiv);
+    htmlToShow = tempDiv.innerHTML;
+  } else {
+    const shouldClean = cleanHtmlToggle.checked;
+    const contentToConvert = shouldClean ? cleanHTML(content) : removeStyleAttributes(content);
+    htmlToShow = contentToConvert;
+    markdownResults = runConverters(contentToConvert);
+  }
 
   // Update HTML Preview
-  htmlCode.textContent = formatHTML(contentToConvert);
+  htmlCode.textContent = formatHTML(htmlToShow);
   if (window.Prism) {
     window.Prism.highlightElement(htmlCode);
   }
 
-  // Run all converters
+  // Update UI with results
+  for (const [name, markdown] of Object.entries(markdownResults)) {
+    if (outputs[name]) {
+      outputs[name].code.textContent = markdown;
+      if (window.Prism) {
+        window.Prism.highlightElement(outputs[name].code);
+      }
+    }
+  }
+
+  // Fire and forget the diff check
+  if (!isMarkdown) {
+    checkDiffs(markdownResults);
+  }
+
+  if (currentView === 'rendered') {
+    updateRenderedPreviews();
+  }
+}
+
+function runConverters(htmlContent) {
+  const results = {};
   for (const [name, converter] of Object.entries(converters)) {
     if (converter) {
       try {
-        const markdown = converter.convert(contentToConvert);
-        outputs[name].code.textContent = markdown;
-        if (window.Prism) {
-          window.Prism.highlightElement(outputs[name].code);
-        }
+        results[name] = converter.convert(htmlContent);
       } catch (err) {
         console.error(`Converter ${name} failed:`, err);
-        outputs[name].code.textContent = `Error converting with ${name}: ${err.message}`;
+        results[name] = `Error converting with ${name}: ${err.message}`;
       }
     }
   }
+  return results;
+}
 
-  if (currentView === 'rendered') {
-    updateRenderedPreviews();
+async function checkDiffs(results) {
+  // We need both to be present and not error messages
+  if (!results.turndown || !results.pandoc) return;
+  if (results.turndown.startsWith('Error converting') || results.pandoc.startsWith('Error converting')) return;
+
+  const tDiv = document.createElement('div');
+  const pDiv = document.createElement('div');
+
+  await renderMarkdown(results.turndown, tDiv);
+  await renderMarkdown(results.pandoc, pDiv);
+
+  const turndownHtml = tDiv.innerHTML;
+  const pandocHtml = pDiv.innerHTML;
+  tDiv.innerHTML = pDiv.innerHTML = '';
+
+  if (turndownHtml !== pandocHtml) {
+    let firstDiff = 0;
+    const maxLength = Math.max(turndownHtml.length, pandocHtml.length);
+    while (firstDiff < maxLength && turndownHtml[firstDiff] === pandocHtml[firstDiff]) {
+      firstDiff++;
+    }
+
+    console.group('Converter Diff Discrepancy');
+    console.log(`First difference at index ${firstDiff}:`);
+    console.log(`  Turndown: "...${turndownHtml.substring(firstDiff, firstDiff + 40)}..."`);
+    console.log(`  Pandoc:   "...${pandocHtml.substring(firstDiff, firstDiff + 40)}..."`);
+    console.groupEnd();
   }
 }
 
@@ -341,7 +455,7 @@ async function copyToClipboard() {
 
   try {
     const items = {
-      'text/plain': new Blob([textToCopy], {type: 'text/plain'})
+      'text/plain': new Blob([textToCopy], {type: 'text/plain'}),
     };
     if (htmlToCopy) {
       items['text/html'] = new Blob([htmlToCopy], {type: 'text/html'});
@@ -361,7 +475,7 @@ async function copyToClipboard() {
     console.error('Failed to copy:', err);
     copyBtn.textContent = 'Copy failed';
     setTimeout(() => {
-       copyBtn.innerHTML = originalText;
+      copyBtn.innerHTML = originalText;
     }, 2000);
   }
 }

package/src/cleaner.js

@@ -7,7 +7,7 @@
 let parseHTMLGlobal, documentGlobal, NodeGlobal;
 
 if (typeof window !== 'undefined') {
-  parseHTMLGlobal = (html) => {
+  parseHTMLGlobal = html => {
     const parser = new DOMParser();
     return parser.parseFromString(html, 'text/html');
   };
@@ -15,8 +15,8 @@ if (typeof window !== 'undefined') {
   NodeGlobal = window.Node;
 } else {
   // We are in Node.js
-  const { parseHTML } = await import('linkedom');
-  parseHTMLGlobal = (html) => {
+  const {parseHTML} = await import('linkedom');
+  parseHTMLGlobal = html => {
     const fullHtml = `<!DOCTYPE html><html><body>${html}</body></html>`;
     return parseHTML(fullHtml).document;
   };
@@ -26,8 +26,35 @@ if (typeof window !== 'undefined') {
 }
 
 const ALLOWED_TAGS = [
-  'P', 'STRONG', 'B', 'EM', 'I', 'BLOCKQUOTE', 'CODE', 'PRE', 'A', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
-  'UL', 'OL', 'LI', 'DL', 'DT', 'DD', 'BR', 'HR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TH', 'TD',
+  'P',
+  'STRONG',
+  'B',
+  'EM',
+  'I',
+  'BLOCKQUOTE',
+  'CODE',
+  'PRE',
+  'A',
+  'H1',
+  'H2',
+  'H3',
+  'H4',
+  'H5',
+  'H6',
+  'UL',
+  'OL',
+  'LI',
+  'DL',
+  'DT',
+  'DD',
+  'BR',
+  'HR',
+  'TABLE',
+  'THEAD',
+  'TBODY',
+  'TR',
+  'TH',
+  'TD',
 ];
 
 const ALLOWED_ATTRIBUTES = {
@@ -72,27 +99,45 @@ function processNode(sourceNode, targetParent) {
     if (sourceNode.classList && sourceNode.classList.contains('mdn-copy-button')) {
       return;
     }
-    
+
     const href = sourceNode.getAttribute('href');
-    if (
-      tagName === 'A' &&
-      href && href.startsWith('https://developer.mozilla.org/en-US/play')
-    ) {
+    if (tagName === 'A' && href && href.startsWith('https://developer.mozilla.org/en-US/play')) {
       return;
     }
 
     if (ALLOWED_TAGS.includes(tagName)) {
+      // Special case: B or STRONG with font-weight: normal should be unwrapped
+      if (tagName === 'B' || tagName === 'STRONG') {
+        const style = sourceNode.getAttribute('style') || '';
+        if (/font-weight\s*:\s*(normal|400|lighter)/i.test(style)) {
+          Array.from(sourceNode.childNodes).forEach(child => {
+            processNode(child, targetParent);
+          });
+          return;
+        }
+      }
+
+      // Special case: I or EM with font-style: normal should be unwrapped
+      if (tagName === 'I' || tagName === 'EM') {
+        const style = sourceNode.getAttribute('style') || '';
+        if (/font-style\s*:\s*normal/i.test(style)) {
+          Array.from(sourceNode.childNodes).forEach(child => {
+            processNode(child, targetParent);
+          });
+          return;
+        }
+      }
+
       // Special case: UL/OL without LI children (often a bug in clipboard content)
       // This tweak should only happen when this element is the FIRST element in the received DOM.
       if (tagName === 'UL' || tagName === 'OL') {
         const parent = sourceNode.parentNode;
-        const isFirstElementInBody = parent && 
-                                    parent.tagName === 'BODY' && 
-                                    Array.from(parent.children).find(c => !['META', 'STYLE'].includes(c.tagName.toUpperCase())) === sourceNode;
+        const isFirstElementInBody =
+          parent && parent.tagName === 'BODY' && Array.from(parent.children).find(c => !['META', 'STYLE'].includes(c.tagName.toUpperCase())) === sourceNode;
 
         if (isFirstElementInBody) {
-          const hasLiChild = Array.from(sourceNode.childNodes).some(child =>
-            child.nodeType === NodeGlobal.ELEMENT_NODE && child.tagName.toUpperCase() === 'LI'
+          const hasLiChild = Array.from(sourceNode.childNodes).some(
+            child => child.nodeType === NodeGlobal.ELEMENT_NODE && child.tagName.toUpperCase() === 'LI'
           );
           if (!hasLiChild) {
             // Unwrap: process children directly into targetParent
@@ -137,9 +182,19 @@ function processNode(sourceNode, targetParent) {
 export function removeStyleAttributes(html) {
   const doc = parseHTMLGlobal(html);
   const body = doc.body;
+
+  // Strip dangerous tags even when "Clean HTML" is off
+  const DANGEROUS_TAGS = ['SCRIPT', 'STYLE', 'IFRAME', 'OBJECT', 'EMBED', 'LINK', 'META'];
+  DANGEROUS_TAGS.forEach(tag => {
+    const elements = body.querySelectorAll(tag);
+    for (let i = 0; i < elements.length; i++) {
+      elements[i].remove();
+    }
+  });
+
   const allElements = body.querySelectorAll('*');
   for (let i = 0; i < allElements.length; i++) {
     allElements[i].removeAttribute('style');
   }
   return body.innerHTML;
-}
+}

package/src/converter.js

@@ -43,7 +43,7 @@ async function getPandocConverter() {
     },
     dispose: () => {
       pandocModule.dispose();
-    }
+    },
   };
 }
 

package/src/index.js

@@ -0,0 +1,46 @@
+/**
+ * index.js
+ * MarkPaste Library Entry Point (Node.js)
+ */
+
+import {cleanHTML, removeStyleAttributes} from './cleaner.js';
+import {getConverter} from './converter.js';
+
+/**
+ * Converts HTML to Markdown using the specified converter.
+ * @param {string} input The HTML (or Markdown) string to convert.
+ * @param {Object} options Configuration options.
+ * @param {string} [options.converter='turndown'] The converter to use ('turndown', 'pandoc').
+ * @param {boolean} [options.clean=true] Whether to clean the HTML before conversion.
+ * @param {boolean} [options.isMarkdown] Force treatment as markdown (skipping conversion).
+ * @returns {Promise<string>} The resulting Markdown string.
+ */
+export async function convert(input, options = {}) {
+  const {converter: converterName = 'turndown', clean = true, isMarkdown: forcedIsMarkdown} = options;
+
+  const isMarkdown = forcedIsMarkdown !== undefined ? forcedIsMarkdown : isProbablyMarkdown(input);
+
+  if (isMarkdown) {
+    return input;
+  }
+
+  const cleanedHtml = clean ? await cleanHTML(input) : await removeStyleAttributes(input);
+  const converter = await getConverter(converterName);
+
+  return converter.convert(cleanedHtml);
+}
+
+/**
+ * Heuristic to detect if a string is likely Markdown instead of HTML.
+ * @param {string} text
+ * @param {boolean} [hasHtmlFlavor=false] If we know for a fact there was an HTML flavor (e.g. from clipboard)
+ * @returns {boolean}
+ */
+export function isProbablyMarkdown(text, hasHtmlFlavor = false) {
+  if (hasHtmlFlavor) return false;
+  const trimmed = text.trim();
+  if (trimmed.startsWith('<')) return false;
+  return true;
+}
+
+export {cleanHTML, removeStyleAttributes, getConverter};

package/src/pandoc.js

@@ -47,7 +47,7 @@ async function loadWasm() {
   } else {
     const fs = await import('node:fs');
     const path = await import('node:path');
-    const { fileURLToPath } = await import('node:url');
+    const {fileURLToPath} = await import('node:url');
     const __dirname = path.dirname(fileURLToPath(import.meta.url));
     const wasmPath = path.join(__dirname, '..', 'third_party', 'pandoc.wasm');
     const bytes = fs.readFileSync(wasmPath);
@@ -95,4 +95,4 @@ export function dispose() {
   out_file = null;
   wasi = null;
   instance = null;
-}
+}

package/src/renderer.js

@@ -1,4 +1,4 @@
-import { marked } from 'marked';
+import {marked} from 'marked';
 
 /**
  * Renders markdown into a target element, sanitizing it first.
@@ -12,17 +12,17 @@ export async function renderMarkdown(markdown, targetElement) {
   }
 
   const rawHtml = await marked.parse(markdown);
-  
+
   // @ts-ignore
   if (targetElement.setHTML) {
     // @ts-ignore
     const sanitizer = new Sanitizer();
     // @ts-ignore
-    targetElement.setHTML(rawHtml, { sanitizer });
+    targetElement.setHTML(rawHtml, {sanitizer});
   } else {
     // Fallback if setHTML/Sanitizer is not supported (though we should encourage it)
     // For now, we will just set innerHTML as a fallback or warn.
-    // Given the prompt asks for Sanitizer API, we assume it's available or polyfilled, 
+    // Given the prompt asks for Sanitizer API, we assume it's available or polyfilled,
     // but in reality it's very experimental.
     // We'll stick to the requested API.
     console.warn('Sanitizer API (setHTML) not supported. Falling back to innerHTML (UNSAFE).');

package/src/style.css

@@ -156,6 +156,7 @@ main.vertical-layout {
   min-height: 200px; /* Minimum height for outputs */
   display: flex;
   gap: 1rem;
+  position: relative;
 }
 
 .section-copy-actions {
@@ -275,6 +276,15 @@ main.vertical-layout {
     margin: revert;
     padding: revert;
   }
+
+  pre, code {
+    background: var(--secondary-bg);
+    color: var(--text-color);
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-family: var(--font-mono);
+    font-size: 90%;
+  }
 }
 
 
@@ -288,6 +298,39 @@ main.vertical-layout {
   display: none !important;
 }
 
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--panel-bg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  backdrop-filter: blur(4px);
+  border-radius: 6px;
+  color: var(--text-color);
+  font-weight: 500;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--secondary-bg);
+  border-top: 4px solid var(--primary-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 1rem;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 /* App Footer */
 .app-footer {
   display: flex;