markpaste 0.0.1

package/src/renderer.js

@@ -0,0 +1,31 @@
+import { marked } from 'marked';
+
+/**
+ * Renders markdown into a target element, sanitizing it first.
+ * @param {string} markdown - The markdown string to render.
+ * @param {HTMLElement} targetElement - The element to render into.
+ */
+export async function renderMarkdown(markdown, targetElement) {
+  if (!markdown) {
+    targetElement.innerHTML = '';
+    return;
+  }
+
+  const rawHtml = await marked.parse(markdown);
+  
+  // @ts-ignore
+  if (targetElement.setHTML) {
+    // @ts-ignore
+    const sanitizer = new Sanitizer();
+    // @ts-ignore
+    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, 
+    // 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).');
+    targetElement.innerHTML = rawHtml;
+  }
+}

package/src/style.css

@@ -0,0 +1,556 @@
+:root {
+  --bg-color: #0f172a;
+  --text-color: #e2e8f0;
+  --text-muted: #94a3b8;
+  --panel-bg: rgba(30, 41, 59, 0.7);
+  --border-color: rgba(148, 163, 184, 0.1);
+  --primary-color: #38bdf8;
+  --primary-hover: #0ea5e9;
+  --secondary-bg: rgba(51, 65, 85, 0.5);
+  --secondary-hover: rgba(71, 85, 105, 0.5);
+  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+[data-theme='light'] {
+  --bg-color: #f8fafc;
+  --text-color: #1e293b;
+  --text-muted: #64748b;
+  --panel-bg: rgba(255, 255, 255, 0.8);
+  --border-color: rgba(0, 0, 0, 0.1);
+  --primary-color: #0284c7;
+  --primary-hover: #0369a1;
+  --secondary-bg: rgba(226, 232, 240, 0.5);
+  --secondary-hover: rgba(203, 213, 225, 0.5);
+  --glass-border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  accent-color: var(--primary-color);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow-x: hidden;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+/* Background Blobs */
+.background-blobs {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.blob {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.4;
+  animation: float 20s infinite alternate;
+}
+
+.blob-1 {
+  top: -10%;
+  left: -10%;
+  width: 50vw;
+  height: 50vw;
+  background: #4f46e5;
+}
+
+.blob-2 {
+  bottom: -10%;
+  right: -10%;
+  width: 40vw;
+  height: 40vw;
+  background: #0ea5e9;
+  animation-delay: -5s;
+}
+
+.blob-3 {
+  top: 40%;
+  left: 40%;
+  width: 30vw;
+  height: 30vw;
+  background: #ec4899;
+  animation-delay: -10s;
+}
+
+@keyframes float {
+  0% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  100% {
+    transform: translate(50px, 50px) rotate(20deg);
+  }
+}
+
+/* App Container */
+.app-container {
+  width: 95%;
+  max-width: 1400px;
+  height: 95vh;
+  display: flex;
+  flex-direction: column;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  background: var(--panel-bg);
+  border: var(--glass-border);
+  border-radius: 6px;
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+}
+
+/* Main Content - Vertical Layout */
+main.vertical-layout {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 1rem 0;
+  gap: 1rem;
+  overflow-y: auto; /* Allow scrolling if content is tall */
+  min-height: 0; /* Important for flex child scrolling */
+}
+
+/* Sections */
+.section-input {
+  flex: 0 0 auto;
+  min-height: 50px;
+  display: flex;
+  flex-direction: column;
+}
+
+.section-html-preview {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.section-controls {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: flex-end; /* or center? Mock shows right aligned maybe? No, let's right align to match controls */
+  padding-bottom: 0.5rem;
+}
+
+.section-outputs {
+  flex: 1;
+  min-height: 200px; /* Minimum height for outputs */
+  display: flex;
+  gap: 1rem;
+}
+
+.section-copy-actions {
+  flex: 0 0 auto;
+  /* padding: 1rem 0; */
+}
+
+
+/* Input Panel Specifics */
+.input-panel {
+  height: 100%;
+}
+
+
+/* 2-Column Grid */
+.two-column-grid {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.output-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.output-column .panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.output-column .editor-container {
+  flex: 1;
+  /* Ensure previews scroll internally */
+  overflow: hidden;
+}
+
+.column-footer {
+  display: flex;
+  justify-content: center;
+}
+
+.radio-label {
+  display: block;
+  text-align: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  width: 100%;
+  padding: 0.3rem 0;
+  margin-top: 0.1rem;
+  border-radius: 4px;
+  transition: 150ms background-color;
+
+  &:hover {
+    background: var(--secondary-bg);
+  }
+}
+
+.radio-label input {
+  accent-color: var(--primary-color);
+  vertical-align: middle;
+}
+
+
+/* View Toggle Buttons */
+.view-toggle {
+  display: flex;
+  background: var(--secondary-bg);
+  padding: 0.25rem;
+  border-radius: 8px;
+  gap: 0.25rem;
+}
+
+.view-toggle .toggle-btn {
+  background: none;
+  border: none;
+  padding: 0.4rem 1rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.view-toggle .toggle-btn.active {
+  background: var(--bg-color);
+  color: var(--text-color);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  font-weight: 500;
+}
+
+/* Render Preview (vs Editor) */
+.render-preview {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+  overflow-y: auto;
+  background: white; /* Rendered HTML usually expects white bg, or adapt to theme? */
+  color: black;
+  border-radius: 6px;
+  font-size: 70%;
+
+  a:link {
+    color: var(--text-muted)
+  }
+  a:link:hover {
+    text-decoration-style: wavy;
+  }
+
+  /* preview stuff should look like normal */
+  * {
+    margin: revert;
+    padding: revert;
+  }
+}
+
+
+[data-theme='dark'] .render-preview {
+  background: #1e293b; /* darker bg for dark mode */
+  color: #e2e8f0;
+}
+
+/* Hidden Utility */
+.hidden {
+  display: none !important;
+}
+
+/* App Footer */
+.app-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  border-top: var(--glass-border);
+  background: var(--panel-bg);
+}
+
+
+#themeToggle {
+  background: transparent;
+  border: 0;
+  color: var(--text-color);
+}
+
+/* Reuse existing styles but ensure selectors match */
+.panel-controls {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+}
+
+/* HTML Panel Specifics */
+.panel.html-panel {
+  height: auto;
+}
+
+#htmlPreview.editor {
+  resize: vertical;
+  min-height: 50px;
+  height: 100px;
+}
+
+.editor-container {
+  flex: 1;
+  position: relative;
+  background: var(--secondary-bg);
+  border-radius: 6px;
+  border: 1px solid transparent;
+  transition: border-color 0.2s ease;
+  overflow: hidden;
+  /* display: flex; */
+  flex-direction: column;
+}
+
+.editor-container:focus-within {
+  border-color: var(--primary-color);
+}
+
+.editor {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  padding: 1.5rem;
+  background: transparent;
+  border: none;
+  resize: none;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  line-height: 1.6;
+  color: var(--text-color);
+  outline: none;
+  overflow-y: auto;
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+/* Prism Overrides */
+pre[class*='language-'] {
+  margin: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+  text-shadow: none !important;
+  font-family: var(--font-mono) !important;
+}
+
+code[class*='language-'],
+pre[class*='language-'] {
+  color: var(--text-color) !important;
+  font-size: 0.7rem !important;
+}
+
+/* Ensure code wraps */
+code[class*='language-'] {
+  white-space: pre-wrap !important;
+  word-break: break-word;
+}
+
+#inputArea[contenteditable]:empty:before {
+  content: attr(placeholder);
+  color: var(--text-muted);
+  opacity: 0.6;
+}
+
+.hidden {
+  display: none;
+}
+
+.arrow-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  opacity: 0.5;
+}
+
+@media (max-width: 768px) {
+  .arrow-divider {
+    transform: rotate(90deg);
+    padding: 1rem 0;
+  }
+}
+
+/* Actions */
+.panel-actions {
+  margin-top: 1rem;
+  grid-column: 1 / -1; /* Span across both columns */
+  display: flex;
+  justify-content: flex-end;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1.2rem;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+}
+
+.btn.primary {
+  background: var(--primary-color);
+  color: white;
+}
+
+.btn.primary:hover {
+  background: var(--primary-hover);
+  transform: translateY(-1px);
+}
+
+#copyBtn {
+  width: 100%;
+  padding: 0.8rem 1.2rem;
+  font-size: 1rem;
+}
+
+.btn.secondary {
+  background: var(--secondary-bg);
+  color: var(--text-color);
+}
+
+.btn.secondary:hover {
+  background: var(--secondary-hover);
+}
+
+/* Toggle Group */
+.toggle-group {
+  display: flex;
+  background: var(--secondary-bg);
+  padding: 0.25rem;
+  border-radius: 8px;
+}
+
+.toggle-btn {
+  background: none;
+  border: none;
+  padding: 0.4rem 0.8rem;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.toggle-btn.active {
+  background: var(--bg-color);
+  color: var(--text-color);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--secondary-hover);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+.radio-group {
+  display: flex;
+  font-size: 0.85rem;
+  border: 0;
+}
+
+.radio-group label {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  cursor: pointer;
+
+  /* give it some height for background hover effect. neg margin cuz i'm lazy */
+  padding: 0.4rem 1rem;
+  margin: -0.4rem 0;
+
+  border-radius: 8px;
+  transition: all 0.2s ease;
+
+  &:first-child {
+    margin-left: 4px;
+  }
+}
+
+.radio-group label:hover {
+  background: var(--secondary-bg);
+  color: var(--text-color);
+}
+
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  svg {
+    color: var(--primary-color);
+  }
+
+  h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+    background: linear-gradient(135deg, var(--text-color), var(--primary-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+}
+

package/test/node/cleaner.test.js

@@ -0,0 +1,50 @@
+import { test } from 'node:test';
+import assert from 'node:assert';
+import { cleanHTML, removeStyleAttributes } from '../../src/cleaner.js';
+
+test('cleaner: cleanHTML should remove disallowed tags', async () => {
+  const html = '<div><p>Hello</p><script>alert(1)</script><span>World</span></div>';
+  const cleaned = await cleanHTML(html);
+
+  // Linkedom might use uppercase for tags
+  assert.strictEqual(cleaned.toLowerCase().includes('<p>hello</p>'), true);
+  assert.strictEqual(cleaned.toLowerCase().includes('world'), true);
+  assert.strictEqual(cleaned.toLowerCase().includes('<script>'), false);
+  assert.strictEqual(cleaned.toLowerCase().includes('<div>'), false); // div is unwrapped
+});
+
+test('cleaner: cleanHTML should handle MDN specific cases', async () => {
+  const html = `
+    <div>
+      <button class="mdn-copy-button">Copy</button>
+      <a href="https://developer.mozilla.org/en-US/play?id=123">Play</a>
+      <a href="https://example.com">Normal</a>
+    </div>
+  `;
+  const cleaned = await cleanHTML(html);
+
+  assert.strictEqual(cleaned.includes('Copy'), false);
+  assert.strictEqual(cleaned.includes('Play'), false);
+  assert.strictEqual(cleaned.includes('Normal'), true);
+});
+
+test('cleaner: removeStyleAttributes should strip style attributes', async () => {
+  const html = '<p style="color: red;">Hello</p>';
+  const stripped = await removeStyleAttributes(html);
+
+  assert.strictEqual(stripped.toLowerCase().includes('style="color: red;"'), false);
+  assert.strictEqual(stripped.toLowerCase().includes('<p>hello</p>'), true);
+});
+
+
+test('cleaner: handles leading OL/UL tags correctly', async () => {
+
+  const html = `<meta charset='utf-8'><ol style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 0px; padding-left: 40px; list-style: outside decimal; color: rgb(32, 33, 36); font-family: Roboto, &quot;Noto Sans&quot;, &quot;Noto Sans JP&quot;, &quot;Noto Sans KR&quot;, &quot;Noto Naskh Arabic&quot;, &quot;Noto Sans Thai&quot;, &quot;Noto Sans Hebrew&quot;, &quot;Noto Sans Bengali&quot;, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><h1 class="devsite-page-title" tabindex="-1" style="box-sizing: inherit; font: 500 36px / 44px &quot;Google Sans&quot;, &quot;Noto Sans&quot;, &quot;Noto Sans JP&quot;, &quot;Noto Sans KR&quot;, &quot;Noto Naskh Arabic&quot;, &quot;Noto Sans Thai&quot;, &quot;Noto Sans Hebrew&quot;, &quot;Noto Sans Bengali&quot;, sans-serif; color: rgb(32, 33, 36); letter-spacing: normal; margin: 0px 0px 24px; overflow: visible; text-overflow: ellipsis; display: inline; vertical-align: middle;">Manage Python packages<devsite-actions data-nosnippet="" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; display: inline-flex; gap: 8px; padding-inline: 8px;"><devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent inline-block" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it" rendered="" current-step="0" style="--devsite-popout-top: calc(100% + 17px); --devsite-popout-width: min(50vw,320px); --devsite-feature-tooltip-text-color: #fff; position: relative; box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; display: inline-block; --devsite-popout-offset-x: 32px;"><slot><devsite-bookmark class="show" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; --devsite-bookmark-background: 0; --devsite-bookmark-background-focus-legacy: #e8eaed; --devsite-bookmark-background-hover-legacy: #f1f3f4; --devsite-bookmark-icon-color: #5f6368; --devsite-bookmark-icon-color-saved: #1a73e8; --devsite-bookmark-icon-color-saved-hover: #174ea6; --devsite-dropdown-list-toggle-background-hover: #f1f3f4; --devsite-dropdown-list-toggle-border: 1px solid #dadce0; --devsite-dropdown-list-toggle-border-hover: 1px solid #dadce0; --devsite-dropdown-list-toggle-height: 36px; display: inline-flex; -webkit-box-align: center; align-items: center; background: none 0px 50% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border: 0px; box-shadow: none; cursor: pointer; height: 36px; -webkit-box-pack: center; justify-content: center; margin: 0px; padding: 0px; vertical-align: middle;"><devsite-dropdown-list aria-label="Bookmark collections drop down" ellipsis="" checkboxes="" fetchingitems="true" writable="" additemtext="New Collection" rendered="" style="--devsite-checkbox-icon-canvas-offset-x: -10px; --devsite-checkbox-icon-canvas-offset-y: -8px; --devsite-checkbox-offset-x: 4px; --devsite-checkbox-offset-y: -2px; --devsite-mdc-line-height: 50px; display: inline-flex; position: relative; vertical-align: middle; box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; --devsite-button-box-shadow: none; visibility: visible;"><button class="toggle-button button" aria-haspopup="menu" id="dropdown-list-0-toggle" aria-controls="dropdown-list-0-dropdown" aria-expanded="false" aria-label="Open dropdown" style="align-self: auto; appearance: none; background: 0px center; border-color: rgb(218, 220, 224); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 4px; box-shadow: none; box-sizing: border-box; color: rgb(95, 99, 104); cursor: pointer; display: flex; font: 500 14px / 34px &quot;Google Sans&quot;, &quot;Noto Sans&quot;, &quot;Noto Sans JP&quot;, &quot;Noto Sans KR&quot;, &quot;Noto Naskh Arabic&quot;, &quot;Noto Sans Thai&quot;, &quot;Noto Sans Hebrew&quot;, &quot;Noto Sans Bengali&quot;, sans-serif; height: 36px; letter-spacing: normal; max-width: none; min-width: auto; outline: 0px; overflow: hidden; padding: 0px 3px; text-align: center; text-decoration: none; text-overflow: ellipsis; text-transform: none; transition: background-color 0.2s, border 0.2s, box-shadow 0.2s; vertical-align: middle; white-space: nowrap; width: auto; margin: 0px; margin-inline-end: 0px; -webkit-box-align: center; -webkit-box-pack: center; align-items: center; justify-content: center;"><slot name="toggle"><span data-label="devsite-bookmark-direct-action" data-title="Save page" class="material-icons bookmark-icon bookmark-action" slot="toggle" style="-webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; overflow-wrap: normal; font-style: normal; font-variant: normal; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: &quot;liga&quot;; font-variation-settings: normal; font-weight: normal; font-stretch: normal; font-size: 24px; line-height: 1; font-family: &quot;Material Icons&quot;; text-transform: none; box-sizing: inherit; letter-spacing: normal; display: inline-block; white-space: nowrap; direction: ltr; color: rgb(95, 99, 104); transition: color 0.2s; vertical-align: bottom;">bookmark_border</span></slot></button></devsite-dropdown-list></devsite-bookmark></slot></devsite-feature-tooltip></devsite-actions></h1><devsite-toc class="devsite-nav devsite-toc-embedded" depth="2" devsite-toc-embedded="" visible="" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; font-size: 13px; display: block; margin: 28px 0px 24px;"><ul class="devsite-nav-list" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 0px; padding: 0px; list-style: outside none; border-inline-start: 4px solid rgb(25, 103, 210); width: auto; padding-inline-start: 12px;"><li class="devsite-nav-item devsite-nav-heading devsite-toc-toggle" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 0px; padding: 0px; line-height: 16px; display: flex;"></li><li class="devsite-nav-item" visible="" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 0px; padding: 0px; line-height: 16px; display: block;"></li><li class="devsite-toc-toggle" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 0px; padding: 0px; display: flex;"></li></ul></devsite-toc><div class="devsite-article-body clearfix" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 16px 0px 0px; padding: 0px;"><p style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 0px 0px 16px; padding: 0px; color: rgb(32, 33, 36); font-family: Roboto, &quot;Noto Sans&quot;, &quot;Noto Sans JP&quot;, &quot;Noto Sans KR&quot;, &quot;Noto Naskh Arabic&quot;, &quot;Noto Sans Thai&quot;, &quot;Noto Sans Hebrew&quot;, &quot;Noto Sans Bengali&quot;, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><a href="https://pypi.org/" class="external" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; color: rgb(26, 115, 232); outline: 0px; text-decoration: rgb(26, 115, 232); word-break: break-word;">Python Package Index</a><span> </span>(PyPI) is a public repository for Python packages. You can use Artifact Registry to create private repositories for your Python packages. These private repositories use the canonical Python repository implementation, the<span> </span><a href="https://www.python.org/dev/peps/pep-0503/" class="external" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; color: rgb(26, 115, 232); outline: 0px; text-decoration: rgb(26, 115, 232); word-break: break-word;">simple repository API</a><span> </span>(PEP 503), and work with installation tools like<span> </span><code translate="no" dir="ltr" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(241, 243, 244); color: rgb(55, 71, 79); font-style: normal; font-variant: normal; font-weight: 500; font-stretch: 100%; font-size: 14.4px; line-height: 14.4px; font-family: &quot;Roboto Mono&quot;, monospace; font-optical-sizing: auto; font-size-adjust: none; font-kerning: auto; font-variation-settings: normal; font-language-override: normal; padding: 1px 4px; direction: ltr !important; text-align: left !important; border-color: rgb(55, 71, 79); border-style: none; border-width: 0px; border-image: none 100% / 1 / 0 stretch; border-radius: 0px; word-break: break-word;">pip</code>.</p><h2 id="overview" data-text="Overview" tabindex="-1" role="presentation" style="box-sizing: inherit; font: 400 24px / 32px &quot;Google Sans&quot;, &quot;Noto Sans&quot;, &quot;Noto Sans JP&quot;, &quot;Noto Sans KR&quot;, &quot;Noto Naskh Arabic&quot;, &quot;Noto Sans Thai&quot;, &quot;Noto Sans Hebrew&quot;, &quot;Noto Sans Bengali&quot;, sans-serif; letter-spacing: normal; margin: 48px 0px 24px; overflow-x: clip; text-overflow: ellipsis; border-bottom: 0px none rgb(32, 33, 36); padding: 0px; color: rgb(32, 33, 36); orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span class="devsite-heading" role="heading" aria-level="2" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;;">Overview</span><button type="button" class="devsite-heading-link button-flat material-icons" aria-label="Copy link to this section: Overview" data-title="Copy link to this section: Overview" data-id="overview" style="box-sizing: border-box; font-feature-settings: &quot;liga&quot;; appearance: none; align-self: auto; background: none 0px 50% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border: 0px; border-radius: 4px; box-shadow: none; color: rgb(95, 99, 104); cursor: pointer; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: 100%; font-size: 24px; font-family: &quot;Material Icons&quot;; font-optical-sizing: auto; font-size-adjust: none; font-kerning: auto; font-variation-settings: normal; font-language-override: normal; height: 24px; letter-spacing: normal; line-height: 24px; margin: 0px; margin-inline-end: 0px; max-width: none; min-width: 36px; outline: 0px; overflow: hidden; padding: 0px 24px; text-align: center; text-decoration: none; text-overflow: ellipsis; text-transform: none; transition: background-color 0.2s, border 0.2s, box-shadow 0.2s; vertical-align: middle; white-space: nowrap; width: auto; overflow-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; padding-inline: 8px; --devsite-button-white-line-height: 24px; --devsite-button-white-background-hover: transparent; opacity: 0;"></button></h2><p style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 16px 0px; padding: 0px; color: rgb(32, 33, 36); font-family: Roboto, &quot;Noto Sans&quot;, &quot;Noto Sans JP&quot;, &quot;Noto Sans KR&quot;, &quot;Noto Naskh Arabic&quot;, &quot;Noto Sans Thai&quot;, &quot;Noto Sans Hebrew&quot;, &quot;Noto Sans Bengali&quot;, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">To get familiar with Python packages in Artifact Registry, you can try the<span> </span><a href="https://docs.cloud.google.com/artifact-registry/docs/python/quickstart" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; color: rgb(26, 115, 232); outline: 0px; text-decoration: rgb(26, 115, 232); word-break: break-word;">quickstart</a>.</p><p style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 16px 0px; padding: 0px; color: rgb(32, 33, 36); font-family: Roboto, &quot;Noto Sans&quot;, &quot;Noto Sans JP&quot;, &quot;Noto Sans KR&quot;, &quot;Noto Naskh Arabic&quot;, &quot;Noto Sans Thai&quot;, &quot;Noto Sans Hebrew&quot;, &quot;Noto Sans Bengali&quot;, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">When you are ready to learn more, read the following information:</p><ol style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 0px; padding-left: 40px; list-style: outside decimal; color: rgb(32, 33, 36); font-family: Roboto, &quot;Noto Sans&quot;, &quot;Noto Sans JP&quot;, &quot;Noto Sans KR&quot;, &quot;Noto Naskh Arabic&quot;, &quot;Noto Sans Thai&quot;, &quot;Noto Sans Hebrew&quot;, &quot;Noto Sans Bengali&quot;, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 12px 0px; padding: 0px;"><a href="https://docs.cloud.google.com/artifact-registry/docs/repositories/create-repos" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; color: rgb(26, 115, 232); outline: 0px; text-decoration: rgb(26, 115, 232); word-break: break-word;">Create a Python package repository</a><span> </span>for your packages.</li><li style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 12px 0px; padding: 0px;"><a href="https://docs.cloud.google.com/artifact-registry/docs/access-control" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; color: rgb(26, 115, 232); outline: 0px; text-decoration: rgb(26, 115, 232); word-break: break-word;">Grant permissions</a><span> </span>to the account that will connect with the repository. Service accounts for common integrations with Artifact Registry have default<span> </span><a href="https://docs.cloud.google.com/artifact-registry/docs/access-control#gcp" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; color: rgb(26, 115, 232); outline: 0px; text-decoration: rgb(26, 115, 232); word-break: break-word;">permissions</a><span> </span>for repositories in the same project.</li><li style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 12px 0px; padding: 0px;">Configure your tools:<ul style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 0px; padding-left: 40px; list-style: outside disc;"><li style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 12px 0px; padding: 0px;"><a href="https://docs.cloud.google.com/artifact-registry/docs/python/authentication" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; color: rgb(26, 115, 232); outline: 0px; text-decoration: rgb(26, 115, 232); word-break: break-word;">Configure authentication</a><span> </span>for Python clients that interact with the repository.</li><li style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 12px 0px; padding: 0px;"><a href="https://docs.cloud.google.com/artifact-registry/docs/configure-cloud-build" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; color: rgb(26, 115, 232); outline: 0px; text-decoration: rgb(26, 115, 232); word-break: break-word;">Configure Cloud Build</a><span> </span>to upload and download packages.</li><li style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; margin: 12px 0px; padding: 0px;">Learn about<span> </span><a href="https://docs.cloud.google.com/artifact-registry/docs/deploy" style="box-sizing: inherit; font-feature-settings: &quot;dgun&quot;; color: rgb(26, 115, 232); outline: 0px; text-decoration: rgb(26, 115, 232); word-break: break-word;">deploying</a><span> </span>to Google Cloud runtime environments.</li></ul></li></ol><br class="Apple-interchange-newline">`;
+
+  const cleaned = await cleanHTML(html);
+
+  // The leading <ol> should be unwrapped because its immediate children (h1, devsite-toc, etc) are NOT <li> elements.
+  assert.strictEqual(cleaned.toLowerCase().startsWith('<ol'), false);
+  assert.strictEqual(cleaned.toLowerCase().includes('<h1'), true);
+  assert.strictEqual(cleaned.toLowerCase().includes('manage python packages'), true);
+});

package/test/node/converter.test.js

@@ -0,0 +1,18 @@
+import { test } from 'node:test';
+import assert from 'node:assert';
+import { getConverter } from '../../src/converter.js';
+
+test('converter: turndown should convert HTML to Markdown', async () => {
+  const converter = await getConverter('turndown');
+  const html = '<h1>Hello</h1>';
+  const markdown = converter.convert(html);
+  assert.strictEqual(markdown.trim(), '# Hello');
+});
+
+test('converter: unknown converter should throw error', async () => {
+  await assert.rejects(async () => {
+    await getConverter('non-existent');
+  }, {
+    message: 'Unknown converter: non-existent. Available converters: turndown, pandoc'
+  });
+});

package/test/node/hello.test.js

@@ -0,0 +1,6 @@
+import test from 'node:test';
+import assert from 'node:assert';
+
+test('hello world', () => {
+  assert.strictEqual(1, 1);
+});