? ?經過幾天折騰再折騰，弄出來了，弄出來了！！！ 消息展示 + 在位編輯功能。

???兩個tiptap實例1個用來展示 消息列表，一個用來在位編輯消息。

? ?tiptap靈活富文本編輯器，拓展性太好了!!! !!!

? 關鍵點：實現只用了兩個TipTap 實例。

每條消息創建一個tiptap實例簡單AI可以給你直接生成，用兩個tiptap實例完成就難了。出于對性能考慮，迭代幾個版本更新，選用兩個實例，完成所有工作，性能好了編碼復雜度高了不少。

1.TipTap?展示AI聊天消息思路，自定拓展來顯示結構內容

content: [{ type: 'text', text: '你好，我是 AI 🤖' },{ type: 'heading', level: 3, text: '功能介紹' },{type: 'bulletList',items: ['文字回復', '插入圖片', '代碼高亮'],},{ type: 'img', src: 'https://placekitten.com/200/200' },{type: 'codeBlock',language: 'js',code: 'console.log("你好 Tiptap!")',},],

?2.Tiptap拓展ChatMessage，消息展示+在位編輯

?renderContent把消息結構體渲染為reac標簽

const renderContent = (content: any[]) => {return content.map((item, index) => {const key = `${item.type}-${index}` // 構造一個穩定的 keyswitch (item.type) {case 'text':return <p key={key}>{item.text}</p>case 'img':return (<imgkey={key}src={item.src}alt="chat image"style={{ maxWidth: '100%', margin: '0.5em 0' }}/>)case 'bulletList':return (<ul key={key} className="list-disc list-inside">{item.items.map((text: string, i: number) => (<li key={`bullet-${index}-${i}`}>{text}</li>))}</ul>)case 'heading':const HeadingTag = `h${item.level || 2}` as keyof JSX.IntrinsicElementsreturn <HeadingTag key={key}>{item.text}</HeadingTag>case 'codeBlock':return (<pre key={key}><code className={`language-${item.language || 'js'}`}>{item.code}</code></pre>)default:return ''}})
}

在位編輯html 傳給shareEditor在位編輯。

 const startEdit = () => {if (!sharedEditor) returnconst html = ReactDOMServer.renderToStaticMarkup(<>{renderContent(content)}</>)sharedEditor.commands.setContent(html)setIsEditing(true)}

完整ChatMessageEx.tsx

import { Node, mergeAttributes } from '@tiptap/core'
import { ReactNodeViewRenderer } from '@tiptap/react'
import React, { useState } from 'react'
import { NodeViewWrapper } from '@tiptap/react'
import ReactDOMServer from 'react-dom/server'
import { EditorContent, Editor } from "@tiptap/react";export interface ChatMessageOptions {HTMLAttributes: Record<string, any>sharedEditor?: Editor | nullonEdit?: (node: any, updateAttributes: (attrs: any) => void) => void
}declare module '@tiptap/core' {interface Commands<ReturnType> {chatMessage: {insertChatMessage: (props: {author: stringcontent: any[] // structured array contentavatar?: stringtime?: string}) => ReturnType}}
}const renderContent = (content: any[]) => {return content.map((item, index) => {const key = `${item.type}-${index}` // 構造一個穩定的 keyswitch (item.type) {case 'text':return <p key={key}>{item.text}</p>case 'img':return (<imgkey={key}src={item.src}alt="chat image"style={{ maxWidth: '100%', margin: '0.5em 0' }}/>)case 'bulletList':return (<ul key={key} className="list-disc list-inside">{item.items.map((text: string, i: number) => (<li key={`bullet-${index}-${i}`}>{text}</li>))}</ul>)case 'heading':const HeadingTag = `h${item.level || 2}` as keyof JSX.IntrinsicElementsreturn <HeadingTag key={key}>{item.text}</HeadingTag>case 'codeBlock':return (<pre key={key}><code className={`language-${item.language || 'js'}`}>{item.code}</code></pre>)default:return ''}})
}const MessageView = ({ node, ...props }: any) => {const { author, content, avatar, time } = node.attrsconst [isEditing, setIsEditing] = useState(false)const sharedEditor = props.sharedEditor as Editorconst startEdit = () => {if (!sharedEditor) returnconst html = ReactDOMServer.renderToStaticMarkup(<>{renderContent(content)}</>)sharedEditor.commands.setContent(html)setIsEditing(true)}const saveEdit = () => {// 消息發送到服務器來更新setIsEditing(false)}return (<NodeViewWrapperas="div"data-type="chat-message"className="group relative flex items-start gap-2 pl-1 hover:bg-gray-100 dark:hover:bg-gray-900 pt-1 pb-1"><div className="flex items-start w-full"><div className="w-8 h-8 rounded-full overflow-hidden absolute top-2 left-3 z-10"><img src={avatar} className="w-full h-full object-cover" /></div><div className="pl-12 relative w-full"><div className="flex mb-1 text-xs text-gray-500 dark:text-gray-400"><span className="font-medium">{author}</span><span className="ml-1">{time}</span></div>{!isEditing ? (<div className="text-sm">{renderContent(content)}</div>) : (<div className="border p-2 rounded dark:bg-gray-800"><EditorContent editor={sharedEditor} /></div>)}<div className="absolute -top-1 right-0 hidden group-hover:flex gap-2 z-10 bg-white dark:bg-gray-800 dark:text-white shadow">{!isEditing ? (<buttononClick={startEdit}className="text-xs px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded">編輯</button>) : (<buttononClick={saveEdit}className="text-xs px-2 py-1 bg-blue-500 text-white rounded">保存</button>)}<buttononClick={() => alert(`轉發消息`)}className="text-xs px-2 py-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 p-1">回復</button><buttononClick={() => alert(`你點贊了`)}className="text-xs px-2 py-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 p-1">收到</button></div></div></div></NodeViewWrapper>)
}const ChatMessageEx = Node.create<ChatMessageOptions>({name: 'chatMessage',group: 'block',atom: true,selectable: true,addOptions() {return {HTMLAttributes: {},sharedEditor: null,onEdit: undefined,}},addAttributes() {return {author: { default: 'User' },content: { default: [] },avatar: { default: '' },time: { default: '' },side: { default: 'left' },}},parseHTML() {return [{ tag: 'div[data-type="chat-message"]' }]},renderHTML({ HTMLAttributes }) {return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'chat-message' })]},addNodeView() {return ReactNodeViewRenderer((props) => (<MessageView{...props}sharedEditor={this.options.sharedEditor}onEdit={this.options.onEdit}/>))},addCommands() {return {insertChatMessage:({ author, content, avatar, time }) =>({ chain, state }) => {const endPos = state.doc.content.sizereturn chain().insertContent([{type: 'chatMessage',attrs: {author,content: content,avatar,time,},},{ type: 'paragraph' },]).focus(endPos).run()},}},
})export default ChatMessageEx

3.使用ChatMessageEx拓展

為chatMessage傳入一個 共享sharedEditor

const shardEditor = useEditor({extensions: [StarterKit,ChatMessageEx,Placeholder.configure({placeholder: "# 給發送消息",})],editable: true,})const editor = useEditor({extensions: [StarterKit,ChatMessageEx.configure({sharedEditor: shardEditor}),Placeholder.configure({placeholder: "# 給發送消息",})],editable: false})

完整channel.tsx

// Channel.tsx import React, { useState, createContext, useEffect, useRef } from "react";
import useChannelsStore from "@/Stores/useChannelListStore";
import { MessageSquare, Settings, Folder, Plus, Pencil, Check } from "lucide-react";
import InputMessage from "@/Components/Tiptap/InputMessage";
import { useMessageStore } from '@/Stores/UseChannelMessageStore' // 引入 Zustand store
import StarterKit from '@tiptap/starter-kit'
import { useEditor, EditorContent, Editor } from "@tiptap/react";
import TurndownService from 'turndown'
import ChatMessageEx from "@/Components/Tiptap/ChatMessageEx";
import Placeholder from '@tiptap/extension-placeholder'interface MessageItemProps {msg: {id: string;content: string;dateTime: string;};editor: Editor;updateMessage: (id: string, newContent: string) => void;
}const TabB = () => <div className="p-4">這是選項卡 B 的內容</div>;
const TabC = () => <div className="p-4">這是選項卡 C 的內容</div>;const ChatMessages = () => {const shardEditor = useEditor({extensions: [StarterKit,ChatMessageEx,Placeholder.configure({placeholder: "# 給發送消息",})],editable: true,})const editor = useEditor({extensions: [StarterKit,ChatMessageEx.configure({sharedEditor: shardEditor}),Placeholder.configure({placeholder: "# 給發送消息",})],editable: false})const onInputMessage = () => {editor?.commands.insertChatMessage({author: '小助手',time: '11:11 AM',avatar: 'https://i.pravatar.cc/32?img=5',content: [{ type: 'text', text: '你好，我是 AI 🤖' },{ type: 'heading', level: 3, text: '功能介紹' },{type: 'bulletList',items: ['文字回復', '插入圖片', '代碼高亮'],},{ type: 'img', src: 'https://placekitten.com/200/200' },{type: 'codeBlock',language: 'js',code: 'console.log("你好 Tiptap!")',},],})}const onOutMessage = () => {console.log("onOutMessage", editor?.getJSON());}return (// 1.顯示高度<div className=" h-full flex flex-col "><button className=" cursor-pointer hover:bg-amber-400" onClick={() => onInputMessage()}>插入信息</button><button className=" cursor-pointer hover:bg-amber-400" onClick={() => onOutMessage()}>顯示信息</button>{/* 滾動 顯示內容 */}<div className=" p-3 pl-0 flex-1  overflow-y-scroll  custom-scrollbar  "><EditorContent editor={editor} /></div><div className="w-full  min-h-12 "><InputMessage></InputMessage></div></div>)
};const Channel: React.FC = () => {const { currentChannel } = useChannelsStore();const [activeTab, setActiveTab] = useState("chatMessage");// 選項卡列表，每個選項卡增加 `icon` 屬性const [tabs, setTabs] = useState([{ id: "chatMessage", name: "消息", icon: <MessageSquare size={16} />, component: <ChatMessages /> },{ id: "tabB", name: "文件", icon: <Folder size={16} />, component: <TabB /> },{ id: "tabC", name: "設置", icon: <Settings size={16} />, component: <TabC /> },]);// 添加新選項卡const addTab = () => {const newTabId = `tab${tabs.length + 1}`;const newTab = {id: newTabId,name: `選項卡${tabs.length + 1}`,icon: <Folder size={16} />, // 默認使用 Folder 圖標component: <div className="p-4">這是 {newTabId} 的內容</div>,};setTabs([...tabs, newTab]);};return (<div className="flex flex-col h-full w-full justify-center">{/* 頂部 */}<div className="h-20 justify-between border-b flex flex-col border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200"><div className="p-2 text-[16px] font-bold cursor-pointer"># {currentChannel?.name}</div>{/* 選項卡導航 */}<div className="flex gap-2 ml-2">{tabs.map((tab) => (<divkey={tab.id}className={`pl-2 pr-2 pt-1 pb-1  flex items-center gap-1 cursor-pointer rounded-t-sm hover:bg-gray-200 dark:hover:bg-gray-700 ${activeTab === tab.id ? "border-b-2 bg-gray-200 dark:bg-gray-700 font-bold" : ""}`}onClick={() => setActiveTab(tab.id)}>{tab.icon} {/* 渲染圖標 */}{tab.name}</div>))}<divclassName="ml-2 p-1  mb-1  mt-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 rounded-full"onClick={addTab}><Plus size={18} /></div></div></div>{/* 內容區 */}<div className="border-gray-300 dark:border-gray-600 h-full overflow-hidden">{tabs.find((tab) => tab.id === activeTab)?.component}</div></div>)
};export default Channel;