Skip to content

feat: infoq platform sync #1216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
yanglbme merged 1 commit into from
Dec 30, 2025
Merged

feat: infoq platform sync #1216

yanglbme merged 1 commit into from
Dec 30, 2025

Conversation

@timerring
Copy link
Member

@timerring timerring commented Dec 29, 2025

Summary

Add support for InfoQ (InfoQ写作社区) platform in the COSE browser extension, enabling users to sync articles directly to InfoQ. This update includes a new modular platform configuration, API-based login detection with real user profile retrieval, proper draft creation workflow, and ProseMirror-based content filling.

Changes

Browser Extension (cose/)

Platform Configuration:

  • Added InfoQ to the platform registry with official favicon.
  • Created new src/platforms/infoq.js to encapsulate all InfoQ-specific logic (platform config, login detection, content filler).
  • Integrated InfoQ into src/platforms/index.js for centralized platform management.
  • Added InfoQ domain permissions (https://*.infoq.cn/*, https://account.infoq.cn/*) to manifest.json.

Login Detection:

  • Implemented API-based authentication using POST https://xie.infoq.cn/public/v1/user/get_user.
  • Retrieves real user profile data including:
    • nickname: Actual username (e.g., "timerring")
    • avatar: User avatar URL from GeekBang CDN
    • uid: Unique user identifier
  • Returns { loggedIn: true, username, avatar, userId } when authenticated.
  • Gracefully handles unauthenticated state by returning { loggedIn: false }.

Draft Creation Workflow:

  • Critical Fix: InfoQ requires proper draft ID in URL for editor initialization. Direct access to https://xie.infoq.cn/draft/write causes editor failure.
  • Implemented proper workflow in syncToPlatform():
    1. Call POST https://xie.infoq.cn/api/v1/draft/create to create a new draft
    2. Extract draft ID from response: {"code":0,"data":{"id":364728}}
    3. Navigate to correct URL: https://xie.infoq.cn/draft/{id}
  • Added error handling for API failures with user-friendly messages.

Content Filler:

  • Created fillInfoQContent() supporting InfoQ's Vue-based ProseMirror editor.
  • Technical Challenge Solved: InfoQ's editor runs in an isolated JavaScript context, preventing direct access to __vue__ instance from content scripts.
  • Solution: Inject script into page's main world to access Vue instance and ProseMirror view.
  • Content Filling Method:
    • Wait for editor initialization (editorAPI.editor.view ready) with polling mechanism (max 15 seconds).
    • Clear existing content using ProseMirror transaction.
    • Simulate clipboard paste event with Markdown content.
    • InfoQ's built-in Markdown parser automatically renders content to HTML.
  • Why Clipboard Method: Direct API calls (handleFileChange, readMarkdown) failed to render content. Clipboard paste triggers InfoQ's native Markdown processing pipeline.

Web Application (apps/web/)

Login URL Integration:

  • Added InfoQ login URL (https://account.infoq.cn/login) to PostInfo.vue for the "Login" link functionality.
  • Added InfoQ platform entry to inject.js for frontend display.

Technical Details

Editor Initialization Timing:

  • InfoQ's editor requires proper draft creation before navigation. The /draft/write endpoint doesn't initialize the editor correctly.
  • Polling mechanism checks vm.editorAPI.editor.view existence and mounted status before attempting content fill.
  • Prevents "参数错误" (parameter error) by ensuring editor is fully ready.

Isolated Worlds Problem:

  • Chrome extension content scripts run in isolated JavaScript contexts.
  • Cannot directly access page's global variables or Vue instances (__vue__).
  • Solution: Create and inject <script> tag into page's <head> to execute code in main world.
  • Script is removed after execution to avoid pollution.

ProseMirror Content Filling:

  • InfoQ uses ProseMirror for rich text editing.
  • Direct node manipulation failed; clipboard paste method leverages InfoQ's existing Markdown parser.
  • Creates ClipboardEvent with DataTransfer containing Markdown text.
  • Dispatches event to ProseMirror DOM element, triggering native paste handlers.

Modular Architecture:

  • Following the pattern established for other platforms, all InfoQ logic is self-contained in infoq.js.
  • Separates concerns: platform config, login detection, and content filling.
  • Makes future maintenance and updates straightforward.

Testing

  1. Install/Reload the COSE extension.

  2. Logged-Out Test:

    • Ensure you are logged out of InfoQ (https://xie.infoq.cn/).
    • Open the Markdown editor publish dialog.
    • Verify InfoQ shows a "登录" (Login) link.
    • Click the login link and confirm it navigates to the InfoQ login page.

  3. Logged-In Test:

    • Log in to InfoQ in the browser.
    • Reopen the publish dialog.
    • Verify InfoQ shows the correct username (e.g., "timerring") and avatar image.
    • Confirm logged-in status is displayed.

  4. Sync Test:

    • Select InfoQ and click "确定" (Confirm) to sync.
    • Confirm the extension creates a new draft and opens https://xie.infoq.cn/draft/{id} (not /draft/write).
    • Wait for editor initialization (should complete within 2-3 seconds).
    • Confirm the Title is correctly populated in the title input field.
    • Confirm the Markdown Content is correctly rendered in the editor with proper formatting:
      • Headings rendered as <h2>, <h3>, etc.
      • Lists rendered as <ul><li> elements
      • Code blocks, links, and other Markdown elements properly converted to HTML.

  5. Error Handling Test:

    • Log out of InfoQ.
    • Attempt to sync an article.
    • Verify appropriate error message is displayed: "InfoQ 创建草稿失败，请确保已登录".

@github-actions
Copy link

github-actions bot commented Dec 29, 2025

🚀 Surge Preview has been successfully deployed!

Preview URL: https://doocs-md-preview-pr-1216.surge.sh

Built with commit e931d5f

@yanglbme yanglbme merged commit 4ed9695 into doocs:main Dec 30, 2025
2 checks passed
@timerring timerring deleted the dev branch December 31, 2025 01:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@yanglbme yanglbme yanglbme approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@timerring @yanglbme