markpaste 0.0.1 → 0.0.6

package/.github/workflows/publish.yml

@@ -0,0 +1,36 @@
+name: Publish to npm
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10.22.0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.14.0 # Minimum for Trusted Publishing
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
+
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm exec playwright install
+
+      - run: pnpm test
+
+      - name: Publish to npm
+        run: |
+          npm install -g npm@latest
+          npm publish --provenance --access public --registry https://registry.npmjs.org/

package/AGENTS.md

@@ -13,9 +13,10 @@ MarkPaste is a web-based utility for converting rich text to Markdown. The core
   - `src/cleaner.js`: The logic for cleaning the HTML.
   - `src/converter.js`: The logic for converting HTML to Markdown.
 
-- `src/markpaste.js`: The library entry point. (for node or bundling)
+- `src/index.js`: The library entry point. (for node or bundling)
 
 - Also:
+  - `bin/markpaste`: The CLI tool for macOS clipboard integration.
   - `test/web/`: Playwright tests for core application functionality.
   - `test/node/`: Node.js unit tests for library logic.
   - `third_party/`: External assets like `pandoc.wasm`.

package/README.md

@@ -1,5 +1,7 @@
 # MarkPaste
 
+[![npm version](https://img.shields.io/npm/v/markpaste.svg)](https://www.npmjs.com/package/markpaste)
+
 MarkPaste is an isomorphic tool that converts rich text to Markdown. It works seamlessly in both the **browser** as a web application and in **Node.js** as a library.
 
 ## Features
@@ -13,16 +15,18 @@ MarkPaste is an isomorphic tool that converts rich text to Markdown. It works se
 ## Usage
 
 ### Web Application
+
 1. **Open the app:** Run locally or host the `index.html`.
 2. **Paste:** Copy rich text from a webpage or document and paste it into the input area.
 3. **Get Markdown:** View the generated Markdown from multiple converters simultaneously.
 4. **Copy:** Click to copy the Markdown to your clipboard.
 
 ### Node.js Library
+
 MarkPaste can be used programmatically in Node.js environments. It uses `linkedom` to provide a lightweight DOM implementation for the conversion logic.
 
 ```javascript
-import { convert } from './src/markpaste.js';
+import {convert} from './src/index.js';
 
 const html = '<h1>Hello World</h1><p>This is <b>bold</b> text.</p>';
 
@@ -31,11 +35,11 @@ const markdown = await convert(html);
 console.log(markdown);
 
 // Using Pandoc
-const pandocMarkdown = await convert(html, { converter: 'pandoc' });
+const pandocMarkdown = await convert(html, {converter: 'pandoc'});
 console.log(pandocMarkdown);
 
 // Disabling HTML cleaning
-const rawMarkdown = await convert(html, { clean: false });
+const rawMarkdown = await convert(html, {clean: false});
 ```
 
 ## Development
@@ -43,6 +47,7 @@ const rawMarkdown = await convert(html, { clean: false });
 To run MarkPaste locally:
 
 1. **Clone & Install:**
+
    ```bash
    git clone https://github.com/paulirish/markpaste.git
    cd markpaste
@@ -56,11 +61,14 @@ To run MarkPaste locally:
    Access the application at `http://localhost:7025`.
 
 ### Testing
+
 The project uses a dual-testing strategy:
+
 - **Node.js tests:** Unit tests for isomorphic modules (`pnpm test:node`).
 - **Playwright tests:** End-to-end browser testing (`pnpm test:web`).
 
 Run all tests with:
+
 ```bash
 pnpm test
 ```

package/bin/markpaste

@@ -0,0 +1,125 @@
+#!/usr/bin/env node
+
+/**
+ * markpaste
+ *
+ * 1. Reads HTML from the clipboard (via raw hex from osascript)
+ * 2. Cleans and converts it to Markdown using MarkPaste
+ * 3. Saves Markdown as Plain Text and Cleaned HTML as HTML back to clipboard
+ * 4. Verifies the set content.
+ */
+
+import { execSync, spawnSync } from 'node:child_process';
+import { writeFileSync, unlinkSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import os from 'node:os';
+
+import { convert, cleanHTML, isProbablyMarkdown } from '../src/index.js';
+import { marked } from 'marked';
+
+/**
+ * Formats a string for preview in the logs (truncated, escaped, and dimmed).
+ */
+function textToPreview(text, labelWidth = 0) {
+  const dimmedStart = '\x1b[2m';
+  const dimmedEnd = '\x1b[22m';
+  const columns = process.stdout.columns || 80;
+  // maxLength = columns - labelWidth - 4 (for " ...") - 1 (safety)
+  const maxLength = Math.max(10, columns - labelWidth - 5);
+  const preview = text.substring(0, maxLength).replace(/\n/g, '\\n');
+  return `${dimmedStart}${preview}${dimmedEnd}...`;
+}
+
+/**
+ * Reads the HTML flavor from the macOS clipboard.
+ * Returns null if no HTML flavor is present.
+ */
+function readHtmlFromClipboard() {
+  try {
+    const script = 'try\n  the clipboard as «class HTML»\non error\n  return ""\nend try';
+    const hexData = execSync(`osascript -e '${script}'`, { encoding: 'utf8' }).trim();
+    const match = hexData.match(/«data HTML([0-9A-F]*)»/i);
+    if (match && match[1]) {
+      return Buffer.from(match[1], 'hex').toString('utf8');
+    }
+  } catch (e) {
+    // Silently fail to return null
+  }
+  return null;
+}
+
+/**
+ * Reads the plain text flavor from the macOS clipboard.
+ */
+function readTextFromClipboard() {
+  return execSync('pbpaste', { encoding: 'utf8' });
+}
+
+/**
+ * Sets both the HTML and Plain Text flavors on the macOS clipboard.
+ */
+function setClipboard(html, markdown) {
+  const mdTmp = path.join(os.tmpdir(), `mp_md_${Date.now()}.txt`);
+  writeFileSync(mdTmp, markdown);
+
+  const htmlHex = Buffer.from(html, 'utf8').toString('hex');
+  const appleScript = `
+    set theText to (read (POSIX file "${mdTmp}") as «class utf8»)
+    set the clipboard to {«class HTML»:«data HTML${htmlHex}», text:theText}
+  `;
+
+  const result = spawnSync('osascript', [], { input: appleScript, encoding: 'utf8' });
+  unlinkSync(mdTmp);
+
+  if (result.status !== 0) {
+    throw new Error(`osascript failed: ${result.stderr}`);
+  }
+}
+
+async function main() {
+  try {
+    const rawHtml = readHtmlFromClipboard();
+    const hasHtmlFlavor = !!rawHtml;
+    const input = rawHtml || readTextFromClipboard();
+
+    if (!input || input.trim() === '') {
+      console.error('No content found in clipboard.');
+      process.exit(1);
+    }
+
+    const isMarkdown = isProbablyMarkdown(input, hasHtmlFlavor);
+
+    console.log('Read from clipboard:');
+    const typeLabel = isMarkdown ? 'Markdown ' : 'HTML     ';
+    const inputLabel = `${typeLabel}(${input.length} chars): `;
+    console.log(`  ${inputLabel}${textToPreview(input, inputLabel.length + 2)}`);
+
+    let cleanedHtml;
+    let markdown;
+
+    if (isMarkdown) {
+      markdown = input;
+      cleanedHtml = await marked.parse(input);
+    } else {
+      cleanedHtml = await cleanHTML(input);
+      markdown = await convert(input, { clean: true, isMarkdown: false });
+    }
+
+    setClipboard(cleanedHtml, markdown);
+
+    const mdLabel = `Markdown (${markdown.length} chars): `;
+    const htmlLabel = `HTML     (${cleanedHtml.length} chars): `;
+    const labelWidth = Math.max(mdLabel.length, htmlLabel.length) + 2;
+
+    console.log('\nClipboard updated with:');
+    console.log(`  ${mdLabel.padEnd(labelWidth - 2)}${textToPreview(markdown, labelWidth)}`);
+    console.log(`  ${htmlLabel.padEnd(labelWidth - 2)}${textToPreview(cleanedHtml, labelWidth)}`);
+
+  } catch (err) {
+    console.error('Error during conversion:', err);
+    process.exit(1);
+  }
+}
+
+main();

package/index.html

@@ -56,6 +56,10 @@
 
       <!-- Bottom: 2 Columns Output -->
       <section class="section-outputs two-column-grid">
+        <div id="loadingOverlay" class="loading-overlay hidden">
+          <div class="spinner"></div>
+          <span>Converting...</span>
+        </div>
         <!-- Turndown -->
         <div class="output-column">
           <div class="panel output-panel">
@@ -135,10 +139,10 @@
   <script type="importmap">
     {
       "imports": {
-        "marked": "/node_modules/marked/lib/marked.esm.js",
-        "turndown": "/node_modules/turndown/lib/turndown.es.js",
-        "turndown-plugin-gfm": "/node_modules/turndown-plugin-gfm/lib/turndown-plugin-gfm.es.js",
-        "@bjorn3/browser_wasi_shim": "/node_modules/@bjorn3/browser_wasi_shim/dist/index.js"
+        "marked": "https://unpkg.com/marked@15.0.0/lib/marked.esm.js",
+        "turndown": "https://unpkg.com/turndown@7.2.0/lib/turndown.es.js",
+        "turndown-plugin-gfm": "https://unpkg.com/turndown-plugin-gfm@1.0.2/lib/turndown-plugin-gfm.es.js",
+        "@bjorn3/browser_wasi_shim": "https://unpkg.com/@bjorn3/browser_wasi_shim@0.4.0/dist/index.js"
       }
     }
   </script>

package/package.json

@@ -1,23 +1,31 @@
 {
   "name": "markpaste",
-  "version": "0.0.1",
+  "version": "0.0.6",
   "description": "HTML and Markdown, perfected for pasting into documents, emails, and more. So isomorphic. lol.",
-  "main": "src/markpaste.js",
+  "main": "src/index.js",
+  "bin": {
+    "markpaste": "bin/markpaste"
+  },
   "scripts": {
     "start": "npx statikk --port 7025",
     "typecheck": "tsc --noEmit",
-    "format": "prettier --write .",
+    "format": "prettier --write \"**/*.{js,ts,json,md}\"",
     "test": "pnpm run typecheck && pnpm run test:node && pnpm run test:web",
     "test:web": "playwright test",
     "test:node": "node --test test/node/**/*.test.js"
   },
   "packageManager": "pnpm@10.22.0",
-  "engines": {
-    "npm": "Please use pnpm instead of NPM to install dependencies",
-    "pnpm": "10.22.0"
+  "keywords": [
+    "markdown",
+    "html",
+    "clipboard",
+    "isomorphic"
+  ],
+  "author": "Paul Irish <npm@paul.irish>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/paulirish/markpaste"
   },
-  "keywords": [],
-  "author": "",
   "license": "Apache-2.0",
   "type": "module",
   "devDependencies": {

package/playwright.config.ts

@@ -17,8 +17,8 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: 'npx http-server -p 8081',
-    url: 'http://127.0.0.1:8081',
+    command: 'npx http-server -p 7025',
+    url: 'http://127.0.0.1:7025',
     reuseExistingServer: !process.env.CI,
   },
 });

package/scripts/compare-converters.js

@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+
+import { writeFileSync, unlinkSync, mkdirSync, existsSync } from 'node:fs';
+import { spawnSync } from 'node:child_process';
+import path from 'node:path';
+import os from 'node:os';
+import { getConverter } from '../src/converter.js';
+import { cleanHTML } from '../src/cleaner.js';
+
+const testCases = [
+  {
+    name: 'Basic text',
+    html: '<p>Hello <b>world</b> and <i>everyone</i>!</p>'
+  },
+  {
+    name: 'Headings',
+    html: '<h1>Main Heading</h1><h2>Sub Heading</h2><h3>Third level</h3>'
+  },
+  {
+    name: 'Lists',
+    html: '<ul><li>Item 1</li><li>Item 2</li></ul><ol><li>First</li><li>Second</li></ol>'
+  },
+  {
+    name: 'Links',
+    html: '<p>Check out <a href="https://example.com">this link</a>.</p>'
+  },
+  {
+    name: 'Code',
+    html: '<p>Use  <code>console.log()</code> to debug.</p><pre><code>function hello() {\n  console.log("world");\n}</code></pre>'
+  },
+  {
+    name: 'Tables',
+    html: `
+      <table>
+        <thead>
+          <tr><th>Col 1</th><th>Col 2</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>Data 1</td><td>Data 2</td></tr>
+        </tbody>
+      </table>
+    `
+  },
+  {
+    name: 'Tricky Span',
+    html: `
+      <p>The<span> </span>
+      <code class="w3-codespan">debugger</code>
+      <span> </span>keyword stops the execution of JavaScript.</p>
+    `
+  },
+  {
+    name: 'Nested formatting',
+    html: '<p><b>Bold and <i>italic and <u>underlined</u></i></b></p>'
+  },
+  {
+    name: 'Images',
+    html: '<img src="https://example.com/image.png" alt="An image" title="Image title">'
+  },
+  {
+    name: 'Blockquotes',
+    html: '<blockquote><p>This is a quote.</p><footer>— Someone</footer></blockquote>'
+  },
+  {
+    name: 'Horizontal Rule',
+    html: '<p>Before</p><hr><p>After</p>'
+  },
+  {
+    name: 'Task Lists',
+    html: '<ul><li>[ ] Todo</li><li>[x] Done</li></ul>'
+  }
+];
+
+async function runComparison() {
+  const turndown = await getConverter('turndown');
+  const pandoc = await getConverter('pandoc');
+
+  console.log('Comparing Turndown vs Pandoc...\n');
+
+  for (const tc of testCases) {
+    console.log(`Test Case: ${tc.name}`);
+    
+    const cleaned = await cleanHTML(tc.html);
+    const tOut = (await turndown.convert(cleaned)).trim();
+    const pOut = (await pandoc.convert(cleaned)).trim();
+
+    if (tOut === pOut) {
+      console.log('  ✅ Match');
+    } else {
+      console.log('  ❌ Mismatch - Diffing...');
+      
+      const tmpDir = path.join(os.tmpdir(), 'markpaste-comp');
+      if (!existsSync(tmpDir)) mkdirSync(tmpDir);
+
+      const tFile = path.join(tmpDir, 'turndown.md');
+      const pFile = path.join(tmpDir, 'pandoc.md');
+
+      writeFileSync(tFile, tOut + '\n');
+      writeFileSync(pFile, pOut + '\n');
+
+      // Use git diff --no-index | delta
+      const diffCmd = `git --no-pager diff --no-index --color=always ${tFile} ${pFile} | delta`;
+      const result = spawnSync('sh', ['-c', diffCmd], { encoding: 'utf8', stdio: 'inherit' });
+
+      // cleanup
+      unlinkSync(tFile);
+      unlinkSync(pFile);
+    }
+    console.log('-'.repeat(40));
+  }
+
+  // Cleanup pandoc worker if necessary
+  if (pandoc.dispose) pandoc.dispose();
+}
+
+runComparison().catch(err => {
+  console.error(err);
+  process.exit(1);
+});