Publish Zsxq Article

Publish Zsxq Article

Publish Markdown content to Zsxq (知识星球) article editor in Markdown mode, saving as draft for user review before publishing.

Prerequisites

• Browser automation MCP (either one):
  • Chrome DevTools MCP (mcp__chrome-devtools__*)
  • Playwright MCP (mcp__playwright__*)
• User logged into Zsxq (知识星球)

Browser MCP Tool Mapping

This skill works with both Chrome DevTools MCP and Playwright MCP. Use whichever is available:

Detection: Check available tools at runtime. If mcp__chrome-devtools__navigate_page exists, use Chrome DevTools MCP. If mcp__playwright__browser_navigate exists, use Playwright MCP.

Key URLs

• Login page: https://wx.zsxq.com/login
• Article editor: https://wx.zsxq.com/article?groupId={groupId}
• Default group ID: 51111858848454 (小木头的AI星球)

Editor Interface

The Zsxq article editor has two modes:

Rich Text Mode (Default)

• Standard WYSIWYG editor with formatting toolbar
• Click "切换到 Markdown 模式 (内测)" to switch

Markdown Mode (Preferred)

• Uses Milkdown (ProseMirror-based WYSIWYG Markdown editor)
• Renders Markdown as formatted content (headings, bold, links, lists)
• Click "切换到富文本模式" to switch back

IMPORTANT: Content Insertion Method The Milkdown editor requires content to be inserted via paste event, NOT direct fill:

• fill tool → Content treated as plain text, Markdown NOT rendered
• Paste event → Milkdown parses Markdown and renders it properly

Key Elements in Markdown Mode

• Title input: textbox "请在这里输入标题"
• Content area: ProseMirror editor (.ProseMirror class)
• Save button: "保存" (saves as draft)
• Preview button: "预览"
• Publish button: "发布" (DO NOT USE - always save as draft)
• Tags: "添加标签"

Main Workflow

Step 1: Prepare Content

Read the Markdown file and extract:

• Title (from H1 header # Title or filename)
• Content (full Markdown body)

# Read the markdown file
cat /path/to/article.md

Step 2: Navigate to Article Editor

# Navigate to the article editor with group ID
navigate_page: https://wx.zsxq.com/article?groupId=51111858848454

If not logged in, the page will redirect to login. Prompt user to log in manually:

请先登录知识星球，登录完成后告诉我。
Login URL: https://wx.zsxq.com/login

Step 3: Switch to Markdown Mode

After page loads, check if already in Markdown mode by looking for "切换到富文本模式" text.

If in Rich Text mode (shows "切换到 Markdown 模式"):

1. Click "切换到 Markdown 模式 (内测)"
2. Confirm the dialog by clicking "确定"

// Check current mode
const switchBtn = document.querySelector('[class*="switch"]');
if (switchBtn && switchBtn.innerText.includes('切换到 Markdown')) {
  // Need to switch to Markdown mode
}

Step 4: Fill Title

1. Find the title textbox with placeholder "请在这里输入标题"
2. Click to focus
3. Type the title

click: title textbox
fill: title textbox with article title

Step 5: Insert Markdown Content (via Paste Event)

CRITICAL: Do NOT use fill tool - it inserts plain text without Markdown rendering.

Instead, use evaluate_script to simulate a paste event:

// Simulate paste event to trigger Milkdown's Markdown parsing
() => {
  const markdownContent = `YOUR_MARKDOWN_CONTENT_HERE`;

  const editorEl = document.querySelector('.ProseMirror');
  if (!editorEl) return { error: 'Editor not found' };

  // Focus the editor
  editorEl.focus();

  // Create and dispatch paste event
  const clipboardData = new DataTransfer();
  clipboardData.setData('text/plain', markdownContent);

  const pasteEvent = new ClipboardEvent('paste', {
    bubbles: true,
    cancelable: true,
    clipboardData: clipboardData
  });

  editorEl.dispatchEvent(pasteEvent);

  return { success: true, charCount: markdownContent.length };
}

This method:

1. Creates a ClipboardEvent with the Markdown content
2. Dispatches it to the ProseMirror editor
3. Milkdown's paste handler parses and renders the Markdown

Step 6: Add Tags (Optional)

1. Click "添加标签"
2. Enter tag text
3. Confirm

Step 7: Save as Draft

IMPORTANT: Always save as draft, NEVER click "发布" (Publish)

1. Click "保存" button to save as draft
2. Verify save was successful

click: "保存" button

Step 8: Verify and Report

After saving:

1. Check for success message or draft status
2. Report to user:

草稿已保存。请在知识星球中预览并手动发布。
Draft saved. Please review in Zsxq and publish manually.

Complete Example Flow

User: "把 /path/to/my-article.md 发布到知识星球"

1. Read /path/to/my-article.md
   - Extract title from H1 or first line
   - Get full content

2. Navigate to https://wx.zsxq.com/article?groupId=51111858848454

3. Check if logged in
   - If not, prompt user to login

4. Switch to Markdown mode if needed
   - Click "切换到 Markdown 模式 (内测)"
   - Confirm dialog

5. Fill title
   - Click title input
   - Use `fill` tool to set title text

6. Insert content via paste event
   - Use `evaluate_script` to simulate paste event
   - This triggers Milkdown to parse and render Markdown

7. Save as draft
   - Click "保存"

8. Report success
   - "草稿已保存，请手动预览并发布"

Critical Rules

1. NEVER click "发布" - Only save as draft using "保存"
2. Always use Markdown mode - Switch if in Rich Text mode
3. Check login status - Prompt user to login if needed
4. Preserve original file - Never modify the source Markdown file
5. Report completion - Tell user the draft is saved and needs manual review

Troubleshooting

Markdown Not Rendering (Shows Raw Syntax)

If you see raw Markdown syntax like **bold** or [link](url) instead of rendered formatting:

• Cause: Content was inserted using fill tool instead of paste event
• Solution: Use the evaluate_script method to simulate a paste event (see Step 5)

The Milkdown editor only parses Markdown when content is pasted, not when directly set.

Login Required

If page redirects or shows login prompt:

请先登录知识星球: https://wx.zsxq.com/login
登录完成后告诉我。

Content Too Long

Zsxq has a 100,000 character limit. If content exceeds:

文章内容超过100000字符限制，请考虑拆分文章。

Switch Mode Dialog

When switching to Markdown mode, a confirmation dialog appears:

• Message: "确定要切换编辑器？当前内容将不会同步至新编辑器"
• Click "确定" to confirm

Editor Not Loading

If editor elements are not visible:

1. Wait for page to fully load
2. Take a new snapshot
3. If still not loading, refresh the page

Element Reference

Image Upload

Image upload works in both Rich Text mode and Markdown mode using the upload_file tool.

Prerequisites

• Check image file size first: if > 500KB, compress to WebP or reduce quality
• Use ls -la /path/to/image.png to check file size

Image Upload Workflow

Image upload works with the image button in both editor modes:

1. Take snapshot to find the image button ref/uid

   • Rich Text mode: button "image"
   • Markdown mode: generic description="Add image"

2. Upload image

   Chrome DevTools MCP:

   upload_file:
     uid: <image button uid>
     filePath: /path/to/image.png
   

   Playwright MCP:

   browser_file_upload:
     ref: <image button ref>
     paths: ["/path/to/image.png"]
   

3. Verify upload - take screenshot to confirm image appears in editor

Key Elements for Image Upload

Example Image Upload (Markdown Mode)

# 1. Take verbose snapshot to find image button
take_snapshot(verbose=true)

# 2. Find "Add image" button (e.g., uid=26_59)
# Look for: generic description="Add image"

# 3. Upload image directly to the button
upload_file:
  uid: 26_59  # (example uid for "Add image" button)
  filePath: /Users/user/Downloads/image.png

# 4. Verify with screenshot
take_screenshot

Example Image Upload (Rich Text Mode)

# 1. Take snapshot to find image button
take_snapshot

# 2. Find image button (e.g., uid=12_7)
# Look for: button "image"

# 3. Upload image to the button
upload_file:
  uid: 12_7  # (example uid for image button)
  filePath: /Users/user/Downloads/image.png

# 4. Verify with screenshot
take_screenshot

Image Size Limits

• Maximum recommended: 500KB per image
• For larger images, compress first using tools like ImageMagick or sips:

  # Check size
  ls -la /path/to/image.png
  
  # Compress if needed (macOS)
  sips -s format jpeg -s formatOptions 80 /path/to/image.png --out /path/to/image_compressed.jpg
  

Troubleshooting Image Upload

Image not appearing after upload:

• Take a fresh verbose snapshot to get correct uid for image button
• Verify the image file exists and is accessible
• Check the word count indicator - it should increase after successful upload

Finding the correct button uid:

• Use take_snapshot(verbose=true) to see element descriptions
• In Markdown mode, look for generic description="Add image"
• In Rich Text mode, look for button "image"

Technical Details

The Zsxq article editor uses two different editors:

Rich Text Mode (Quill)

• Quill: A modern WYSIWYG editor
• Image upload: Works via upload_file tool to button "image"
• Toolbar: Standard formatting buttons including image

Markdown Mode (Milkdown)

• Milkdown: A plugin-driven WYSIWYG markdown editor
• ProseMirror: The underlying rich-text editing framework
• Paste handling: Milkdown intercepts paste events and parses Markdown content
• Image upload: Works via upload_file tool to generic description="Add image"

This is why the user's workflow via md.bytenote.net works - pasting from any source triggers Milkdown's Markdown parser, resulting in properly rendered content.