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:

Action

Chrome DevTools MCP

Playwright MCP

Navigate

navigate_page

browser_navigate

Take snapshot

take_snapshot

browser_snapshot

Take screenshot

take_screenshot

browser_take_screenshot

Click element

click

browser_click

Fill text

fill

browser_type

Upload file

upload_file

browser_file_upload

Press key

press_key

browser_press_key

Evaluate JS

evaluate_script

browser_console_exec

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 模式"):

Click "切换到 Markdown 模式 (内测)"

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

Find the title textbox with placeholder "请在这里输入标题"

Click to focus

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:

Creates a ClipboardEvent with the Markdown content

Dispatches it to the ProseMirror editor

Milkdown's paste handler parses and renders the Markdown

Step 6: Add Tags (Optional)

Click "添加标签"

Enter tag text

Confirm

Step 7: Save as Draft

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

Click "保存" button to save as draft

Verify save was successful

click: "保存" button

Step 8: Verify and Report

After saving:

Check for success message or draft status

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

NEVER click "发布"

- Only save as draft using "保存"

Always use Markdown mode

- Switch if in Rich Text mode

Check login status

- Prompt user to login if needed

Preserve original file

- Never modify the source Markdown file

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

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: Wait for page to fully load Take a new snapshot If still not loading, refresh the page Element Reference Element Selector/Identifier Description Title input textbox "请在这里输入标题" Article title (max 60 chars) Content area .ProseMirror (Milkdown editor) Markdown content (max 100000 chars) Save button "保存" Save as draft Preview button "预览" Preview article Publish button "发布" DO NOT USE Mode switch "切换到 Markdown 模式" / "切换到富文本模式" Toggle editor mode Tags "添加标签" Add article tags Word count "正文字数：X /100000" Character counter 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: Take snapshot to find the image button ref/uid Rich Text mode: button "image" Markdown mode: generic description="Add image" Upload image Chrome DevTools MCP: upload_file: uid: filePath: /path/to/image.png Playwright MCP: browser_file_upload: ref: paths: ["/path/to/image.png"] Verify upload - take screenshot to confirm image appears in editor Key Elements for Image Upload Mode Image Button Selector in Snapshot Rich Text button "image" button "image" Markdown Add image generic description="Add image" 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.