WCP 5.0.3 把 AI 放进 TipTap 编辑器：选中文字即可润色、续写与替换

npm create vite@latest tiptap-ai-demo -- --template react
cd tiptap-ai-demo
npm install
npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-bubble-menu
npm run dev

import { useState } from 'react'
import { EditorContent, useEditor } from '@tiptap/react'
import BubbleMenu from '@tiptap/extension-bubble-menu'
import StarterKit from '@tiptap/starter-kit'
import './App.css'

const actions = {
  polish: '润色',
  continue: '续写',
  translate: '翻译',
  summarize: '总结',
  simplify: '简化',
}

async function runAI(action, text) {
  await new Promise(resolve => setTimeout(resolve, 400))

  const demoResults = {
    polish: `经过润色：${text}`,
    continue: `${text} 接下来可以围绕这一观点补充事实、案例和边界条件。`,
    translate: `Translation: ${text}`,
    summarize: `摘要：${text.slice(0, 30)}${text.length > 30 ? '……' : ''}`,
    simplify: `简化表达：${text}`,
  }

  return demoResults[action]
}

export default function App() {
  const [loading, setLoading] = useState(false)

  const editor = useEditor({
    extensions: [StarterKit, BubbleMenu],
    content: `
      <h2>选中这段文字试一试</h2>
      <p>把人工智能能力放进编辑器，可以减少复制、切换窗口和重新定位内容带来的操作成本。</p>
    `,
  })

  async function handleAction(action) {
    if (!editor || loading) return

    const { from, to } = editor.state.selection
    const selectedText = editor.state.doc.textBetween(from, to, ' ')
    if (selectedText.trim().length < 2) return

    setLoading(true)
    try {
      const result = await runAI(action, selectedText)
      const chain = editor.chain().focus()

      if (action === 'continue') {
        chain.insertContentAt(to, `<p>${result}</p>`).run()
      } else {
        chain.insertContentAt({ from, to }, result).run()
      }
    } finally {
      setLoading(false)
    }
  }

  if (!editor) return null

  return (
    <main>
      <BubbleMenu
        editor={editor}
        shouldShow={({ state }) => !state.selection.empty}
      >
        <div className='ai-menu'>
          {Object.entries(actions).map(([action, label]) => (
            <button
              key={action}
              disabled={loading}
              onClick={() => handleAction(action)}
            >
              {loading ? '处理中…' : `AI ${label}`}
            </button>
          ))}
        </div>
      </BubbleMenu>
      <EditorContent editor={editor} />
    </main>
  )
}

body {
  margin: 0;
  color: #202124;
  background: #f5f6f8;
  font-family: system-ui, sans-serif;
}

main {
  max-width: 760px;
  min-height: 420px;
  margin: 48px auto;
  padding: 32px;
  background: white;
  border: 1px solid #dfe1e5;
}

.ProseMirror {
  min-height: 320px;
  line-height: 1.8;
  outline: none;
}

.ai-menu {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: #202124;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgb(0 0 0 / 20%);
}

.ai-menu button {
  padding: 6px 9px;
  color: white;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.ai-menu button:hover {
  background: #3c4043;
}

.ai-menu button:disabled {
  cursor: wait;
  opacity: 0.6;
}

curl -X POST http://localhost:3000/api/ai/edit \
  -H 'Content-Type: application/json' \
  -d '{
    "action": "polish",
    "text": "这是一段需要调整得更加清楚的文字。",
    "locale": "zh-CN"
  }'

const instructions = {
  polish: '润色文本，保持事实和原意不变，只返回修改后的正文。',
  continue: '续写文本，保持语气一致，只返回新增内容。',
  translate: '将文本翻译为目标语言，只返回译文。',
  summarize: '压缩为简洁摘要，不补充原文之外的事实。',
  simplify: '简化句式和词汇，保留关键信息。',
}

app.post('/api/ai/edit', async (req, res) => {
  const { action, text, locale = 'zh-CN' } = req.body

  if (!instructions[action]) {
    return res.status(400).json({ error: 'unsupported_action' })
  }
  if (typeof text !== 'string' || text.length < 2 || text.length > 5000) {
    return res.status(400).json({ error: 'invalid_text' })
  }

  const result = await callYourModel({
    instruction: instructions[action],
    text,
    locale,
  })

  res.json({ result })
})