markpaste 0.0.2 → 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/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

package/bin/markpaste

@@ -21,10 +21,13 @@ import { marked } from 'marked';
 /**
  * Formats a string for preview in the logs (truncated, escaped, and dimmed).
  */
-function textToPreview(text, length = 100) {
+function textToPreview(text, labelWidth = 0) {
   const dimmedStart = '\x1b[2m';
   const dimmedEnd = '\x1b[22m';
-  const preview = text.substring(0, length).replace(/\n/g, '\\n');
+  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}...`;
 }
 
@@ -85,16 +88,17 @@ async function main() {
       process.exit(1);
     }
 
-    console.log(`Reading from clipboard... (${input.length} chars)`);
-    console.log(`   Preview: ${textToPreview(input)}`);
-
     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) {
-      console.log('✨ Markdown detected. Rendering to HTML...');
       markdown = input;
       cleanedHtml = await marked.parse(input);
     } else {
@@ -102,25 +106,15 @@ async function main() {
       markdown = await convert(input, { clean: true, isMarkdown: false });
     }
 
-    console.log('Updating clipboard...');
     setClipboard(cleanedHtml, markdown);
 
-    // // Verification Step
-    // const verifiedHtml = readHtmlFromClipboard();
-    // if (verifiedHtml === cleanedHtml) {
-    //   console.log('✅ Clipboard verified: HTML flavor matches perfectly.');
-    // } else {
-    //   console.warn('⚠️  Clipboard verification mismatch!');
-    //   if (!verifiedHtml) {
-    //     console.warn('   Reason: No HTML flavor found after setting.');
-    //   } else {
-    //     console.warn(`   Reason: Length difference (${cleanedHtml.length} vs ${verifiedHtml.length})`);
-    //   }
-    // }
-
-    console.log('\n✅ Clipboard updated with:');
-    console.log(`   - Plain Text (Markdown): ${textToPreview(markdown)}`);
-    console.log(`   - HTML (Cleaned): ${textToPreview(cleanedHtml)}`);
+    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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markpaste",
-  "version": "0.0.2",
+  "version": "0.0.6",
   "description": "HTML and Markdown, perfected for pasting into documents, emails, and more. So isomorphic. lol.",
   "main": "src/index.js",
   "bin": {
@@ -15,12 +15,17 @@
     "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);
+});

package/src/cleaner.js

@@ -106,6 +106,28 @@ function processNode(sourceNode, targetParent) {
     }
 
     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') {
@@ -160,6 +182,16 @@ 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');

package/test/node/cleaner.test.js

@@ -46,3 +46,24 @@ test('cleaner: handles leading OL/UL tags correctly', async () => {
   assert.strictEqual(cleaned.toLowerCase().includes('<h1'), true);
   assert.strictEqual(cleaned.toLowerCase().includes('manage python packages'), true);
 });
+
+test('cleaner: should unwrap <b style="font-weight: normal"> and equivalents', async () => {
+  const cases = [
+    ['<b style="font-weight: normal">Not bold</b>', 'Not bold'],
+    ['<strong style="font-weight: normal">Not bold</strong>', 'Not bold'],
+    ['<b style="font-weight: 400">Not bold</b>', 'Not bold'],
+    ['<b style="FONT-WEIGHT: NORMAL">Not bold</b>', 'Not bold'],
+    ['<b style="font-weight: lighter">Not bold</b>', 'Not bold'],
+    ['<i style="font-style: normal">Not italic</i>', 'Not italic'],
+    ['<em style="font-style: normal">Not italic</em>', 'Not italic'],
+  ];
+
+  for (const [input, expected] of cases) {
+    const cleaned = await cleanHTML(input);
+    assert.strictEqual(cleaned, expected, `Failed for input: ${input}`);
+  }
+
+  // Should keep normal <b>
+  const bold = await cleanHTML('<b>Bold</b>');
+  assert.ok(bold.toUpperCase().includes('<B>BOLD</B>'));
+});

package/test/web/basic-load.spec.ts

@@ -27,7 +27,7 @@ test('should load the page without errors or 404s', async ({page}) => {
     consoleErrors.push(error.message);
   });
 
-  await page.goto('http://127.0.0.1:8081/index.html');
+  await page.goto('http://127.0.0.1:7025/index.html');
 
   // Verify no network failures
   expect(failedRequests, `Found failed network requests: ${failedRequests.join(', ')}`).toHaveLength(0);
@@ -40,7 +40,7 @@ test('should load the page without errors or 404s', async ({page}) => {
 });
 
 test('should paste HTML and update all 2 markdown outputs', async ({page}) => {
-  await page.goto('http://127.0.0.1:8081/index.html');
+  await page.goto('http://127.0.0.1:7025/index.html');
 
   const inputArea = page.locator('#inputArea');
   const testHtml = '<h1>Test Title</h1><p>Hello <strong>world</strong></p>';

package/test/web/cleaner.spec.ts

@@ -2,7 +2,7 @@ import {test, expect} from '@playwright/test';
 
 test.describe('Cleaner functionality', () => {
   test.beforeEach(async ({page}) => {
-    await page.goto('http://127.0.0.1:8081/index.html');
+    await page.goto('http://127.0.0.1:7025/index.html');
   });
 
   test('should remove MDN copy button and play links', async ({page}) => {

package/test/web/pasting.spec.ts

@@ -2,7 +2,7 @@ import {test, expect} from '@playwright/test';
 
 test.describe('MarkPaste functionality', () => {
   test.beforeEach(async ({page}) => {
-    await page.goto('http://127.0.0.1:8081/index.html');
+    await page.goto('http://127.0.0.1:7025/index.html');
   });
 
   test('should convert basic rich text to markdown', async ({page}) => {
@@ -56,8 +56,7 @@ test.describe('MarkPaste functionality', () => {
     await expect(pandocOutput).toContainText('Hello World');
   });
 
-  // SKIP this for now. needs a human to look into why its failing.
-  test.skip('should toggle HTML cleaning', async ({page}) => {
+  test('should toggle HTML cleaning', async ({page}) => {
     const html = '<div><p>Hello</p><style>body{color:red;}</style><script>alert("xss")</script></div>';
 
     await page.evaluate(html => {
@@ -81,6 +80,7 @@ test.describe('MarkPaste functionality', () => {
 
     expect(await htmlCode.textContent()).toContain('<div>');
     expect(await htmlCode.textContent()).not.toContain('<script>');
+    expect(await htmlCode.textContent()).not.toContain('<style>');
   });
 
   test('should retain table structure', async ({page}) => {

package/TYPESCRIPT.md

@@ -1,109 +0,0 @@
-# Guide: Modern Type Checking without a Build Step
-
-This guide outlines a setup for achieving type safety in both browser and Node.js environments while avoiding a compilation/build step.
-
-## Core Philosophy
-
-1.  **Browser (Client-side)**: Use pure JavaScript with **JSDoc annotations**. This ensures the code runs directly in the browser without bundling or transpilation.
-2.  **Node.js (Server-side/Tooling)**: Use **TypeScript with Erasable Syntax**. This allows Node.js to execute `.ts` files natively while benefiting from TypeScript's static analysis.
-
----
-
-## 1. Browser-side: JavaScript + JSDoc
-
-Maintain all frontend logic in `.js` files. Use JSDoc to define types, interfaces, and function signatures.
-
-### Patterns
-
-- Use `@type` for variable declarations.
-- Use `@param` and `@returns` for functions.
-- Use `@typedef` or `@template` for complex types.
-- Import types from other files using `import('./path/to/file.js').TypeName`.
-
-```javascript
-/**
- * @param {string} input
- * @param {Object} options
- * @param {boolean} [options.verbose]
- * @returns {Promise<string>}
- */
-export async function processData(input, {verbose = false} = {}) {
-  // ...
-}
-```
-
----
-
-## 2. Node.js: TypeScript + Erasable Syntax
-
-Use `.ts` files for Node.js logic. Stick to **Erasable Syntax Only**—features that can be removed by simply stripping the type annotations.
-
-### Prohibited Features (Non-Erasable)
-
-- `enum`
-- `namespaces`
-- `parameter properties` in constructors (e.g., `constructor(public name: string) {}`)
-- `experimentalDecorators`
-
-### Required Conventions
-
-- **Explicit Extensions**: Always use the `.ts` extension in import statements.
-- **Explicit Type Imports**: Always use `import type` for types to ensure they are safely erasable.
-
-```typescript
-import {helper} from './utils.ts';
-import type {Config} from './types.ts';
-```
-
----
-
-## 3. Configuration Requirements
-
-### `tsconfig.json`
-
-The configuration must support both JSDoc checking and native TypeScript execution.
-
-```json
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "nodenext",
-    /* Native TS Execution Flags */
-    "erasableSyntaxOnly": true,
-    "verbatimModuleSyntax": true,
-    "allowImportingTsExtensions": true,
-    "rewriteRelativeImportExtensions": true,
-
-    /* Type Checking Strategy */
-    "noEmit": true,
-    "allowJs": true,
-    "checkJs": true,
-    "skipLibCheck": true,
-    "strict": true
-  }
-}
-```
-
-### `package.json`
-
-The project must be an ES Module.
-
-```json
-{
-  "type": "module",
-  "engines": {
-    "node": ">=24.11.0"
-  },
-  "scripts": {
-    "typecheck": "tsc --noEmit"
-  }
-}
-```
-
----
-
-## 4. Environment & Tooling
-
-- **Node.js**: Version **v24.11.0+** is required for stable native TypeScript support.
-- **IDE**: VS Code (or any LSP-compliant editor) will automatically pick up the `tsconfig.json` to provide real-time feedback for both `.js` (via JSDoc) and `.ts` files.
-- **CI/CD**: Run `npm run typecheck` (or equivalent) as a blocking step in your pipeline.

package/pnpm-workspace.yaml

@@ -1,2 +0,0 @@
-overrides:
-  markpaste: 'link:'