markpaste 0.0.1

package/src/app.js

@@ -0,0 +1,369 @@
+import {cleanHTML, removeStyleAttributes} from './cleaner.js';
+import {renderMarkdown} from './renderer.js';
+import {getConverter} from './converter.js';
+
+/* bling.js + guaranteed and typed. Brand new in Nov 2025. */
+/**
+ * Guaranteed context.querySelector. Always returns an element or throws if nothing matches query.
+ * @template {string} T
+ * @param {T} query
+ * @param {ParentNode=} context
+ * @return {import('typed-query-selector/parser.js').ParseSelector<T, Element>}
+ */
+window.$ = function (query, context) {
+  const result = (context || document).querySelector(query);
+  if (result === null) {
+    throw new Error(`query ${query} not found`);
+  }
+   return /** @type {import('typed-query-selector/parser.js').ParseSelector<T, Element>} */ (result);
+};
+/**
+ * @template {string} T
+ * @param {T} query
+ * @param {ParentNode=} context
+ * @return {NodeListOf<import('typed-query-selector/parser.js').ParseSelector<T, Element>>}
+ */
+window.$$ = (query, context) => (context || document).querySelectorAll(query);
+
+Node.prototype.on = window.on = function (name, fn) {
+  this.addEventListener(name, fn);
+};
+// @ts-ignore
+NodeList.prototype.__proto__ = Array.prototype;
+NodeList.prototype.on = function (name, fn) {
+  this.forEach(elem => elem.on(name, fn));
+};
+// Bling'ed out.
+
+// Theme Management
+function loadTheme() {
+  const savedTheme = localStorage.getItem('theme');
+
+  if (savedTheme) {
+    document.documentElement.setAttribute('data-theme', savedTheme);
+  } else {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+  }
+}
+
+function toggleTheme() {
+  const currentTheme = document.documentElement.getAttribute('data-theme');
+  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+  document.documentElement.setAttribute('data-theme', newTheme);
+  localStorage.setItem('theme', newTheme);
+}
+
+const {$, $$ } = window;
+
+const inputArea = $('div#inputArea');
+const htmlCode = $('code#htmlCode');
+const copyBtn = $('button#copyBtn');
+const themeToggle = $('button#themeToggle');
+const cleanHtmlToggle = $('input#cleanHtmlToggle');
+
+// View Toggle
+const viewMarkdownBtn = $('button#viewMarkdownBtn');
+const viewRenderedBtn = $('button#viewRenderedBtn');
+
+// Output Elements
+const outputs = {
+  turndown: {
+    code: $('code#outputCodeTurndown'),
+    preview: $('div#renderPreviewTurndown'),
+    pre: $('pre#outputPreTurndown'),
+  },
+  pandoc: {
+    code: $('code#outputCodePandoc'),
+    preview: $('div#renderPreviewPandoc'),
+    pre: $('pre#outputPrePandoc'),
+  },
+};
+
+let lastProcessedContent = '';
+const converters = {};
+const convertersPromise = (async () => {
+  const names = ['turndown', 'pandoc'];
+  for (const name of names) {
+    try {
+      converters[name] = await getConverter(name);
+    } catch (e) {
+      console.error(`Failed to load converter: ${name}`, e);
+    }
+  }
+})();
+
+let currentView = 'markdown'; // 'markdown' or 'rendered'
+
+async function init() {
+
+  setupEventListeners();
+
+  loadTheme();
+
+  // Initialize all converters
+  await convertersPromise;
+
+  // Initial process if there's content (e.g. from reload, though usually empty)
+  if (inputArea.innerHTML) {
+    lastProcessedContent = inputArea.innerHTML;
+    processContent(lastProcessedContent);
+  }
+}
+
+let idleDetectorInitialized = false;
+
+async function startIdleDetector() {
+  if (idleDetectorInitialized) return;
+  idleDetectorInitialized = true;
+
+  // Setup Idle Detection
+  if ('IdleDetector' in window) {
+    try {
+      const controller = new AbortController();
+      const signal = controller.signal;
+
+      const idleDetector = new IdleDetector();
+      idleDetector.addEventListener('change', () => {
+        const userState = idleDetector.userState;
+        const screenState = idleDetector.screenState;
+        console.log(`Idle change: ${userState}, ${screenState}`);
+
+        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;
+          }
+        }
+      });
+
+      // 10 minutes = 600,000 ms
+      idleDetector.start({
+        threshold: 600000,
+        signal,
+      }).catch(err => {
+         console.warn('Idle detection start failed:', err);
+      });
+
+    } catch (err) {
+      console.warn('Idle detection setup failed:', err);
+    }
+  }
+}
+
+function setupEventListeners() {
+  inputArea.on('paste', handlePaste);
+
+  inputArea.on('input', () => {
+    lastProcessedContent = inputArea.innerHTML;
+    processContent(lastProcessedContent);
+  });
+
+  copyBtn.on('click', copyToClipboard);
+
+  themeToggle.on('click', toggleTheme);
+
+  cleanHtmlToggle.on('change', () => {
+    if (lastProcessedContent) {
+      processContent(lastProcessedContent);
+    }
+  });
+
+  viewMarkdownBtn.on('click', () => switchView('markdown'));
+  viewRenderedBtn.on('click', () => switchView('rendered'));
+
+  // Add a keydown event listener for scoped select all
+  document.on('keydown', handleSelectAll);
+}
+
+function switchView(view) {
+  currentView = view;
+
+  if (view === 'markdown') {
+    viewMarkdownBtn.classList.add('active');
+    viewRenderedBtn.classList.remove('active');
+
+    Object.values(outputs).forEach(out => {
+      out.pre.classList.remove('hidden');
+      out.preview.classList.add('hidden');
+    });
+  } else {
+    viewRenderedBtn.classList.add('active');
+    viewMarkdownBtn.classList.remove('active');
+
+    Object.values(outputs).forEach(out => {
+      out.pre.classList.add('hidden');
+      out.preview.classList.remove('hidden');
+    });
+
+    // Render previews
+    updateRenderedPreviews();
+  }
+}
+
+function handleSelectAll(e) {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
+    const activeElement = document.activeElement;
+    if (activeElement) {
+      const editorContainer = activeElement.closest('.editor-container');
+      if (editorContainer) {
+        e.preventDefault();
+        const range = document.createRange();
+        range.selectNodeContents(editorContainer);
+        const selection = window.getSelection();
+        if (selection) {
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      }
+    }
+  }
+}
+
+async function handlePaste(e) {
+  e.preventDefault();
+
+  const clipboardData = e.clipboardData;
+  const pastedHtml = clipboardData.getData('text/html');
+  const pastedText = clipboardData.getData('text/plain');
+
+  await convertersPromise;
+
+  const content = pastedHtml || pastedText;
+  lastProcessedContent = content;
+  processContent(content);
+
+  // Reset scroll position for all pre elements
+  $$('pre').forEach(pre => pre.scrollTop = 0);
+
+  inputArea.innerHTML = '';
+  inputArea.setAttribute('placeholder', 'Pasted! Ready for more...');
+  setTimeout(() => {
+    inputArea.setAttribute('placeholder', 'Paste your rich text here...');
+  }, 2000);
+}
+
+function processContent(html) {
+  const shouldClean = cleanHtmlToggle.checked;
+  const contentToConvert = shouldClean ? cleanHTML(html) : removeStyleAttributes(html);
+
+  // Update HTML Preview
+  htmlCode.textContent = formatHTML(contentToConvert);
+  if (window.Prism) {
+    window.Prism.highlightElement(htmlCode);
+  }
+
+  // Run all converters
+  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);
+        }
+      } catch (err) {
+        console.error(`Converter ${name} failed:`, err);
+        outputs[name].code.textContent = `Error converting with ${name}: ${err.message}`;
+      }
+    }
+  }
+
+  if (currentView === 'rendered') {
+    updateRenderedPreviews();
+  }
+}
+
+async function updateRenderedPreviews() {
+  for (const [name, out] of Object.entries(outputs)) {
+    const markdown = out.code.textContent || '';
+    await renderMarkdown(markdown, out.preview);
+  }
+}
+
+function formatHTML(html) {
+  // Simple formatter for the HTML preview
+  if (!html) return '';
+
+  let formatted = '';
+  const reg = /(>)(<)(\/*)/g;
+  const xml = html.replace(reg, '$1\r\n$2$3');
+  let pad = 0;
+
+  xml.split('\r\n').forEach(node => {
+    let indent = 0;
+    if (node.match(/.+<\/\w[^>]*>$/)) {
+      indent = 0;
+    } else if (node.match(/^<\/\w/)) {
+      if (pad != 0) {
+        pad -= 1;
+      }
+    } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
+      indent = 1;
+    } else {
+      indent = 0;
+    }
+
+    let padding = '';
+    for (let i = 0; i < pad; i++) {
+      padding += '  ';
+    }
+
+    formatted += padding + node + '\r\n';
+    pad += indent;
+  });
+
+  return formatted;
+}
+
+async function copyToClipboard() {
+  startIdleDetector();
+
+  const selectedRadio = $('input[name="converter"]:checked');
+  const selectedName = selectedRadio ? selectedRadio.value : 'turndown';
+
+  const textToCopy = outputs[selectedName].code.textContent;
+
+  // Let's grab the HTML from the preview div if we can, or render it if it's empty.
+  let htmlToCopy;
+
+  const tempDiv = document.createElement('div');
+  await renderMarkdown(textToCopy, tempDiv);
+  htmlToCopy = tempDiv.innerHTML;
+
+  // Store original text for restoration
+  const originalText = copyBtn.textContent;
+
+  try {
+    const items = {
+      'text/plain': new Blob([textToCopy], {type: 'text/plain'})
+    };
+    if (htmlToCopy) {
+      items['text/html'] = new Blob([htmlToCopy], {type: 'text/html'});
+    }
+    const cpItem = new ClipboardItem(items);
+    await navigator.clipboard.write([cpItem]);
+
+    // Visual feedback
+    copyBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> Copied (${selectedName})!`;
+    copyBtn.classList.add('success');
+
+    setTimeout(() => {
+      copyBtn.innerHTML = originalText;
+      copyBtn.classList.remove('success');
+    }, 2000);
+  } catch (err) {
+    console.error('Failed to copy:', err);
+    copyBtn.textContent = 'Copy failed';
+    setTimeout(() => {
+       copyBtn.innerHTML = originalText;
+    }, 2000);
+  }
+}
+
+init();

package/src/cleaner.js

@@ -0,0 +1,145 @@
+/**
+ * cleaner.js
+ * Implements HTML cleaning logic similar to paste-html-subset.
+ */
+
+// Environment detection and DOM setup
+let parseHTMLGlobal, documentGlobal, NodeGlobal;
+
+if (typeof window !== 'undefined') {
+  parseHTMLGlobal = (html) => {
+    const parser = new DOMParser();
+    return parser.parseFromString(html, 'text/html');
+  };
+  documentGlobal = window.document;
+  NodeGlobal = window.Node;
+} else {
+  // We are in Node.js
+  const { parseHTML } = await import('linkedom');
+  parseHTMLGlobal = (html) => {
+    const fullHtml = `<!DOCTYPE html><html><body>${html}</body></html>`;
+    return parseHTML(fullHtml).document;
+  };
+  const linkedom = parseHTML('<html><body></body></html>');
+  documentGlobal = linkedom.document;
+  NodeGlobal = linkedom.Node;
+}
+
+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',
+];
+
+const ALLOWED_ATTRIBUTES = {
+  A: ['href', 'title', 'target'],
+  IMG: ['src', 'alt', 'title', 'width', 'height'],
+};
+
+export function cleanHTML(html) {
+  const doc = parseHTMLGlobal(html);
+  const sourceBody = doc.body;
+
+  // Create a new document for the cleaned output
+  let targetBody;
+  if (documentGlobal.implementation && documentGlobal.implementation.createHTMLDocument) {
+    const cleanDoc = documentGlobal.implementation.createHTMLDocument('clean');
+    targetBody = cleanDoc.body;
+  } else {
+    // Fallback for linkedom or other environments
+    targetBody = documentGlobal.createElement('body');
+  }
+
+  // Process the input body
+  processNode(sourceBody, targetBody);
+
+  return targetBody.innerHTML;
+}
+
+function processNode(sourceNode, targetParent) {
+  // Handle text nodes
+  if (sourceNode.nodeType === NodeGlobal.TEXT_NODE) {
+    if (sourceNode.textContent) {
+      targetParent.appendChild(documentGlobal.createTextNode(sourceNode.textContent));
+    }
+    return;
+  }
+
+  // Handle element nodes
+  if (sourceNode.nodeType === NodeGlobal.ELEMENT_NODE) {
+    const tagName = sourceNode.tagName.toUpperCase();
+
+    // MDN specific cleaning: remove copy button and play links
+    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')
+    ) {
+      return;
+    }
+
+    if (ALLOWED_TAGS.includes(tagName)) {
+      // 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;
+
+        if (isFirstElementInBody) {
+          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
+            Array.from(sourceNode.childNodes).forEach(child => {
+              processNode(child, targetParent);
+            });
+            return;
+          }
+        }
+      }
+
+      const newElement = documentGlobal.createElement(tagName);
+
+      // Copy allowed attributes
+      if (ALLOWED_ATTRIBUTES[tagName]) {
+        ALLOWED_ATTRIBUTES[tagName].forEach(attr => {
+          if (sourceNode.hasAttribute(attr)) {
+            newElement.setAttribute(attr, sourceNode.getAttribute(attr));
+          }
+        });
+      }
+
+      targetParent.appendChild(newElement);
+
+      // Process children
+      Array.from(sourceNode.childNodes).forEach(child => {
+        processNode(child, newElement);
+      });
+    } else {
+      const DANGEROUS_TAGS = ['SCRIPT', 'STYLE', 'IFRAME', 'OBJECT', 'EMBED', 'LINK', 'META'];
+
+      if (!DANGEROUS_TAGS.includes(tagName) || tagName === 'BODY' || tagName === 'HTML') {
+        // Unwrap safe-ish tags (like div, span, body, html)
+        Array.from(sourceNode.childNodes).forEach(child => {
+          processNode(child, targetParent);
+        });
+      }
+    }
+  }
+}
+
+export function removeStyleAttributes(html) {
+  const doc = parseHTMLGlobal(html);
+  const body = doc.body;
+  const allElements = body.querySelectorAll('*');
+  for (let i = 0; i < allElements.length; i++) {
+    allElements[i].removeAttribute('style');
+  }
+  return body.innerHTML;
+}

package/src/converter.js

@@ -0,0 +1,61 @@
+/**
+ * converter.js
+ * Handles conversion from HTML to Markdown.
+ * Dynamically loads and uses different conversion libraries.
+ */
+
+const isBrowser = typeof window !== 'undefined';
+
+async function getTurndownConverter() {
+  let TurndownService, turndownPluginGfm;
+  if (isBrowser) {
+    const turndownMod = await import('turndown');
+    TurndownService = turndownMod.default;
+    const gfmMod = await import('turndown-plugin-gfm');
+    turndownPluginGfm = gfmMod.gfm;
+  } else {
+    TurndownService = (await import('turndown')).default;
+    turndownPluginGfm = (await import('turndown-plugin-gfm')).gfm;
+  }
+
+  const turndownService = new TurndownService({
+    headingStyle: 'atx',
+    codeBlockStyle: 'fenced',
+    emDelimiter: '*',
+  });
+
+  if (turndownPluginGfm) {
+    turndownService.use(turndownPluginGfm);
+  }
+
+  return {
+    convert: html => turndownService.turndown(html),
+  };
+}
+
+async function getPandocConverter() {
+  const pandocModule = await import('./pandoc.js');
+  return {
+    convert: html => {
+      const args = '--from html --to gfm --no-highlight --wrap=preserve';
+      const markdown = pandocModule.pandoc(args, html);
+      return markdown;
+    },
+    dispose: () => {
+      pandocModule.dispose();
+    }
+  };
+}
+
+const converters = {
+  turndown: getTurndownConverter,
+  pandoc: getPandocConverter,
+};
+
+export async function getConverter(name) {
+  if (!converters[name]) {
+    const available = Object.keys(converters).join(', ');
+    throw new Error(`Unknown converter: ${name}. Available converters: ${available}`);
+  }
+  return converters[name]();
+}

package/src/markpaste.js

@@ -0,0 +1,26 @@
+/**
+ * markpaste.js
+ * MarkPaste Library Entry Point
+ */
+
+import { cleanHTML, removeStyleAttributes } from './cleaner.js';
+import { getConverter } from './converter.js';
+
+/**
+ * Converts HTML to Markdown using the specified converter.
+ * @param {string} html The HTML 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.
+ * @returns {Promise<string>} The resulting Markdown string.
+ */
+export async function convert(html, options = {}) {
+  const { converter: converterName = 'turndown', clean = true } = options;
+
+  const cleanedHtml = clean ? await cleanHTML(html) : await removeStyleAttributes(html);
+  const converter = await getConverter(converterName);
+
+  return converter.convert(cleanedHtml);
+}
+
+export { cleanHTML, removeStyleAttributes, getConverter };

package/src/pandoc.js

@@ -0,0 +1,98 @@
+/**
+ * Adapted from https://github.com/haskell-wasm/pandoc-wasm
+ * See README.md for more details about the pandoc WASM integration.
+ */
+
+/** @import * as PandocWasm from '../types/pandoc-wasm.js' */
+/** @import * as WasiShimT from '@bjorn3/browser_wasi_shim' */
+
+const isBrowser = typeof window !== 'undefined';
+
+let WasiShim;
+if (isBrowser) {
+  WasiShim = await import('@bjorn3/browser_wasi_shim');
+} else {
+  WasiShim = await import('@bjorn3/browser_wasi_shim');
+}
+
+/** @type {WasiShimT} */
+const {WASI, OpenFile, File, ConsoleStdout, PreopenDirectory} = WasiShim;
+
+const args = ['pandoc.wasm', '+RTS', '-H64m', '-RTS'];
+const env = [];
+let in_file = new File(new Uint8Array(), {readonly: true});
+let out_file = new File(new Uint8Array(), {readonly: false});
+const fds = [
+  new OpenFile(new File(new Uint8Array(), {readonly: true})),
+  ConsoleStdout.lineBuffered(msg => console.log(`[WASI stdout] ${msg}`)),
+  ConsoleStdout.lineBuffered(msg => console.warn(`[WASI stderr] ${msg}`)),
+  new PreopenDirectory(
+    '/',
+    new Map([
+      ['in', in_file],
+      ['out', out_file],
+    ])
+  ),
+];
+const options = {debug: false};
+let wasi = new WASI(args, env, fds, options);
+
+async function loadWasm() {
+  if (isBrowser) {
+    const response = await fetch('third_party/pandoc.wasm');
+    const bytes = await response.arrayBuffer();
+    return await WebAssembly.instantiate(bytes, {
+      wasi_snapshot_preview1: wasi.wasiImport,
+    });
+  } else {
+    const fs = await import('node:fs');
+    const path = await import('node:path');
+    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);
+    return await WebAssembly.instantiate(bytes, {
+      wasi_snapshot_preview1: wasi.wasiImport,
+    });
+  }
+}
+
+const source = await loadWasm();
+let instance = /** @type {PandocWasm.PandocWasmInstance} */ (source.instance);
+
+wasi.initialize(instance);
+instance.exports.__wasm_call_ctors();
+
+function memory_data_view() {
+  return new DataView(instance.exports.memory.buffer);
+}
+
+const argc_ptr = instance.exports.malloc(4);
+memory_data_view().setUint32(argc_ptr, args.length, true);
+const argv = instance.exports.malloc(4 * (args.length + 1));
+for (let i = 0; i < args.length; ++i) {
+  const arg = instance.exports.malloc(args[i].length + 1);
+  new TextEncoder().encodeInto(args[i], new Uint8Array(instance.exports.memory.buffer, arg, args[i].length));
+  memory_data_view().setUint8(arg + args[i].length, 0);
+  memory_data_view().setUint32(argv + 4 * i, arg, true);
+}
+memory_data_view().setUint32(argv + 4 * args.length, 0, true);
+const argv_ptr = instance.exports.malloc(4);
+memory_data_view().setUint32(argv_ptr, argv, true);
+
+instance.exports.hs_init_with_rtsopts(argc_ptr, argv_ptr);
+
+export function pandoc(args_str, in_str) {
+  const args_ptr = instance.exports.malloc(args_str.length);
+  new TextEncoder().encodeInto(args_str, new Uint8Array(instance.exports.memory.buffer, args_ptr, args_str.length));
+  in_file.data = new TextEncoder().encode(in_str);
+  instance.exports.wasm_main(args_ptr, args_str.length);
+  return new TextDecoder('utf-8', {fatal: true}).decode(out_file.data);
+}
+
+export function dispose() {
+  in_file = null;
+  out_file = null;
+  wasi = null;
+  instance = null;
+}