一工具擴(kuò)展包的組成、遷移方式與演進(jìn)脈絡(luò))
tiptap/extensions 深度解讀Tiptap 統(tǒng)一工具擴(kuò)展包的組成、遷移方式與演進(jìn)脈絡(luò)【免費(fèi)下載鏈接】tiptapThe headless rich text editor framework for web artisans.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ti/tiptap導(dǎo)讀tiptap/extensions是 Tiptap 倉(cāng)庫(kù)在 v3 時(shí)代推出的“聚合型”擴(kuò)展包它把History撤銷/重做、Placeholder、CharacterCount、DropCursor、GapCursor、TrailingNode、Focus、Selection等八個(gè)常用工具擴(kuò)展收斂到單一包名下幫助開(kāi)發(fā)者用一次安裝、統(tǒng)一版本號(hào)完成以往需要依賴多個(gè)獨(dú)立包才能實(shí)現(xiàn)的能力。本文以該包的 CHANGELOG 為骨架結(jié)合 包內(nèi)源碼 與 舊版獨(dú)立包目錄梳理包的組成、逐項(xiàng)遷移路徑、每類擴(kuò)展的可用選項(xiàng)以及版本演進(jìn)中值得關(guān)注的 bug 修復(fù)與性能改造讀者讀完后能直接完成從舊包到新聚合包的遷移并理解各選項(xiàng)在底層 ProseMirror 插件中的真實(shí)作用。一、包定位為什么需要tiptap/extensions從 CHANGELOG 的 3.0.1 版本major change提交bfec9b2可以看到這個(gè)包的來(lái)源說(shuō)明Adds the newtiptap/extensionspackage which packages multiple utility extensions likeHistory,Placeholder,CharacterCount,DropCursor,GapCursor,TrailingNode,Focus, andSelection.也就是說(shuō)它是一個(gè)聚合包aggregate package既不重復(fù)實(shí)現(xiàn) Node/Mark 擴(kuò)展也不引入新的 UI 依賴只是把分散在tiptap/extension-character-count、tiptap/extension-dropcursor、tiptap/extension-gapcursor、tiptap/extension-history、tiptap/extension-placeholder、tiptap/extension-focus等舊獨(dú)立包中的能力統(tǒng)一收納。這一點(diǎn)在源碼層面可以直接驗(yàn)證package.json 中包名為tiptap/extensions倉(cāng)庫(kù)內(nèi)當(dāng)前版本為3.30.3與tiptap/core、tiptap/pm的版本嚴(yán)格對(duì)齊聲明了對(duì)tiptap/core、tiptap/pm的 peerDependencies工作區(qū)版本同時(shí)提供子路徑導(dǎo)出subpath exports允許按需引入tiptap/extensions/character-count、/drop-cursor、/focus、/gap-cursor、/undo-redo、/placeholder、/selection、/trailing-node便于 tree-shaking 與按需打包。入口文件 的導(dǎo)出完全與包名一一對(duì)應(yīng)export * from ./character-count/index.js export * from ./drop-cursor/index.js export * from ./focus/index.js export * from ./gap-cursor/index.js export * from ./placeholder/index.js export * from ./selection/index.js export * from ./trailing-node/index.js export * from ./undo-redo/index.js說(shuō)明CHANGELOG 的早期 release3.0.0-next.6將該包描述為 which holds utility extensions隨后的穩(wěn)定版本統(tǒng)一為上述八類擴(kuò)展。此外同一版本還提到pnpm package aliases用于 monorepo 版本鎖定、以及強(qiáng)制 type imports便于 bundler 在生成 dist/index.js 時(shí)剔除純類型導(dǎo)入等工程化改動(dòng)這些不會(huì)影響業(yè)務(wù)側(cè) API。從倉(cāng)庫(kù)結(jié)構(gòu)看被替代的舊獨(dú)立包被移入 packages-deprecated 目錄extension-character-count、extension-dropcursor、extension-focus、extension-gapcursor、extension-history、extension-placeholder等可以從實(shí)現(xiàn)層面印證“遷移到tiptap/extensions”確實(shí)是倉(cāng)庫(kù)推薦的演進(jìn)方向。二、八個(gè)聚合擴(kuò)展逐個(gè)拆解2.1 CharacterCount字?jǐn)?shù)/詞數(shù)統(tǒng)計(jì)與硬性限制Changelog 中 CharacterCount 的官方描述為“添加一個(gè)光標(biāo)用于指示拖放時(shí)新節(jié)點(diǎn)將插入的位置”但結(jié)合 源碼 可以看出該描述明顯是從 DropCursor 條目復(fù)制而來(lái)changelog 中的筆誤其真實(shí)職責(zé)是統(tǒng)計(jì)文檔字符數(shù)/詞數(shù)并在超出限制時(shí)攔截或裁剪輸入同時(shí)把計(jì)數(shù)能力暴露在storage.characterCount中供 UI 讀取。遷移方式CHANGELOG 原始 diff- import CharacterCount from tiptap/extension-character-count import { CharacterCount } from tiptap/extensions類型導(dǎo)入import { CharacterCount, CharacterCountOptions } from tiptap/extensions;可選配置項(xiàng)來(lái)自 character-count.ts 的類型定義與addOptions默認(rèn)值選項(xiàng)類型默認(rèn)值作用limitnumber \| nullnull允許的最大字符數(shù)0/null/undefined均表示不限制modetextSize \| nodeSizetextSizetextSize使用node.textBetween(...)的文本內(nèi)容計(jì)算nodeSize使用 ProseMirror 節(jié)點(diǎn)大小計(jì)算autoTrimbooleantrue當(dāng)程序化設(shè)置的內(nèi)容超過(guò)限制時(shí)是否自動(dòng)裁剪3.23.4 新增詳見(jiàn)下文textCounter(text: string) number(text) text.length自定義字符計(jì)數(shù)函數(shù)如基于Intl.Segmenter統(tǒng)計(jì)wordCounter(text: string) number按空格分詞計(jì)數(shù)自定義詞數(shù)統(tǒng)計(jì)函數(shù)它的核心機(jī)制并非簡(jiǎn)單“算個(gè)數(shù)”而是通過(guò)一個(gè) ProseMirror 插件同時(shí)控制兩類行為見(jiàn) filterTransaction 與 appendTransactionfilterTransaction在每次輸入事務(wù)到達(dá)前校驗(yàn)新舊字符數(shù)。超過(guò)上限的非粘貼事務(wù)會(huì)被直接攔截返回false對(duì)粘貼內(nèi)容則嘗試刪除超出部分transaction.deleteRange若裁剪后仍超限則整體拒絕appendTransaction在編輯器創(chuàng)建初期檢測(cè)初始內(nèi)容是否已經(jīng)超限例如setContent注入超長(zhǎng)內(nèi)容超限時(shí)發(fā)出console.warn并從文檔開(kāi)頭刪除多出的字符。開(kāi)發(fā)者可通過(guò)storage.characterCount.characters()/.words()在 UI 上實(shí)時(shí)展示計(jì)數(shù)也可傳入自定義 node 與 mode 按指定范圍計(jì)算。2.2 DropCursor拖放時(shí)的插入位置指示線官方能力為拖放操作添加一條可視光標(biāo)指示新節(jié)點(diǎn)將被插入的位置CHANGELOG 原文adds a cursor that indicates where a new node will be inserted when dragging and dropping。該能力底層直接來(lái)源于 ProseMirror 的 dropcursor 插件在本聚合包內(nèi)被包裝成 Tiptap 擴(kuò)展。遷移原始 diff- import DropCursor from tiptap/extension-dropcursor import { DropCursor } from tiptap/extensionsimport { DropCursor, DropCursorOptions } from tiptap/extensions;2.3 GapCursor空白區(qū)域的占位光標(biāo)官方能力當(dāng)點(diǎn)擊文檔中沒(méi)有內(nèi)容的區(qū)域例如兩個(gè)塊級(jí)節(jié)點(diǎn)之間時(shí)出現(xiàn)一個(gè)光標(biāo)讓用戶可以在“縫隙”中定位并開(kāi)始輸入CHANGELOG 原文a cursor that appears when you click on a place where no content is present, for example in-between nodes。遷移原始 diff- import GapCursor from tiptap/extension-gapcursor import { GapCursor } from tiptap/extensionsimport { GapCursor } from tiptap/extensions;GapCursor 是諸多塊級(jí)交互點(diǎn)擊表格/圖片之間的空隙后回車換行的基礎(chǔ)設(shè)施通常建議與 DropCursor 一起加入編輯器的extensions數(shù)組。2.4 History / UndoRedo撤銷與重做CHANGELOG 將該條目命名為Historyadds undo and redo functionality to the editor但遷移后的新包入口實(shí)際暴露的擴(kuò)展名是UndoRedo見(jiàn) undo-redo/index.ts 與 undo-redo.ts其內(nèi)部包裝的正是 ProseMirror 官方的history插件。在 3.0.0-next.6 的早期描述中還出現(xiàn)過(guò)HistoryOptions命名最終穩(wěn)定版統(tǒng)一為UndoRedoOptions引用源碼時(shí)建議以UndoRedo為準(zhǔn)。遷移原始 diff- import History from tiptap/extension-history import { History } from tiptap/extensionsimport { UndoRedo, UndoRedoOptions } from tiptap/extensions;配置項(xiàng)來(lái)自 undo-redo.ts選項(xiàng)類型默認(rèn)值作用depthnumber100保留的歷史事件數(shù)量超出后丟棄最舊記錄newGroupDelaynumber500兩次變更之間間隔超過(guò)該毫秒數(shù)后開(kāi)啟新的撤銷分組UndoRedo還自動(dòng)注冊(cè)了undo/redo命令與快捷鍵Mod-z撤銷、Shift-Mod-z與Mod-y重做并且額外處理了Mod-я等俄語(yǔ)鍵盤(pán)布局見(jiàn) addKeyboardShortcuts。需要特別留意的是源碼中的兼容性警告undo-redo.ts 注釋如果項(xiàng)目同時(shí)使用tiptap/extension-collaboration必須移除undo-redo因?yàn)閰f(xié)作擴(kuò)展自帶獨(dú)立的 Yjs 歷史實(shí)現(xiàn)兩者疊加會(huì)互相干擾。2.5 Placeholder空狀態(tài)占位提示官方能力當(dāng)編輯器或某個(gè)節(jié)點(diǎn)為空時(shí)展示一段占位文本CHANGELOG 原文adds a placeholder text to the editor, which is displayed when the editor is empty。遷移原始 diff- import Placeholder from tiptap/extension-placeholder import { Placeholder } from tiptap/extensionsimport { Placeholder, PlaceholderOptions } from tiptap/extensions;默認(rèn)選項(xiàng)見(jiàn) placeholder.ts選項(xiàng)類型默認(rèn)值作用emptyEditorClassstringis-editor-empty整個(gè)編輯器為空時(shí)附加到根節(jié)點(diǎn)的 classemptyNodeClassstringis-empty單個(gè)空節(jié)點(diǎn)上附加的 class3.25.0 起可傳函數(shù)按節(jié)點(diǎn)返回動(dòng)態(tài) classdataAttributestring見(jiàn)DEFAULT_DATA_ATTRIBUTE用于承載占位文案的 data 屬性名3.18.0 新增placeholderstring \| ((node) string)Write something …占位文本或按節(jié)點(diǎn)動(dòng)態(tài)生成的函數(shù)showOnlyWhenEditablebooleantrue編輯器處于只讀/不可編輯時(shí)不展示占位符showOnlyCurrentbooleantrue僅當(dāng)光標(biāo)位于該空節(jié)點(diǎn)時(shí)才展示includeChildrenbooleanfalse是否覆蓋嵌套的空子節(jié)點(diǎn)與早期獨(dú)立版本相比穩(wěn)定版的 placeholder 是 CHANGELOG 中修復(fù)最密集的模塊其演進(jìn)詳見(jiàn)第 4 節(jié)建議基于視口增量掃描而非全文檔遍歷的機(jī)制在性能上對(duì)超大文檔尤其關(guān)鍵。2.6 TrailingNode文檔末尾的兜底節(jié)點(diǎn)官方能力始終在文檔結(jié)尾保留一個(gè)節(jié)點(diǎn)如段落保證用戶把內(nèi)容刪光后依然有可輸入的位置CHANGELOG 原文adds a node at the end of the editor, which can be used to add a trailing node like a paragraph。import { TrailingNode, TrailingNodeOptions } from tiptap/extensions;配置項(xiàng)見(jiàn) trailing-node.ts選項(xiàng)類型默認(rèn)值作用nodestringundefined期望插入的節(jié)點(diǎn)類型名省略時(shí)從 schema 頂部節(jié)點(diǎn)類型的defaultType推導(dǎo)最后兜底paragraph3.7.0 起可選notAfterstring \| string[][paragraph]這些節(jié)點(diǎn)之后不再?gòu)?qiáng)制插入尾節(jié)點(diǎn)防止無(wú)限循環(huán)實(shí)現(xiàn)細(xì)節(jié)值得注意appendTransaction 與 state.apply通過(guò)appendTransaction在每次事務(wù)后檢查doc.lastChild類型不符合預(yù)期時(shí)在doc.content.size位置插入新節(jié)點(diǎn)插件 state 會(huì)忽略帶__uniqueIDTransactionmeta 的事務(wù)避免與 UniqueID 擴(kuò)展互相觸發(fā)形成死循環(huán)對(duì)應(yīng) 3.10.5 的修復(fù)支持通過(guò)事務(wù) metaskipTrailingNode跳過(guò)本次插入3.20.5 新增見(jiàn) skipTrailingNodeMeta 導(dǎo)出例如編程式內(nèi)容替換時(shí)不想自動(dòng)補(bǔ)尾節(jié)點(diǎn)。2.7 Focus光標(biāo)所在節(jié)點(diǎn)的聚焦高亮官方能力當(dāng)編輯器獲得焦點(diǎn)時(shí)為光標(biāo)所在的節(jié)點(diǎn)附加 class便于圍繞“當(dāng)前編輯位置”做視覺(jué)高亮如大綱編輯器中的當(dāng)前段落描邊。import { Focus, FocusOptions } from tiptap/extensions;配置項(xiàng)見(jiàn) focus.ts選項(xiàng)類型默認(rèn)值作用classNamestringhas-focus附加到聚焦節(jié)點(diǎn)的 classmodeall \| deepest \| shallowestallall高亮光標(biāo)路徑上的所有節(jié)點(diǎn)deepest只高亮最內(nèi)層節(jié)點(diǎn)shallowest只高亮最外層包含節(jié)點(diǎn)實(shí)現(xiàn)上它利用props.decorations當(dāng)!isEditable || !isFocused時(shí)返回空DecorationSet因此只讀狀態(tài)與失焦?fàn)顟B(tài)下不會(huì)產(chǎn)生任何高亮裝飾見(jiàn) focus.ts。2.8 Selection失焦后的自定義選區(qū)樣式官方能力當(dāng)編輯器失去焦點(diǎn)時(shí)用可自定義 class 的 decoration 代替瀏覽器原生選區(qū)讓“內(nèi)容被選中”的狀態(tài)在失焦后依然可見(jiàn)CHANGELOG 原文adds a selection state to the editor, which can be used to style the editor when theres a selection。import { Selection, SelectionOptions } from tiptap/extensions;配置項(xiàng)見(jiàn) selection.tsclassName默認(rèn)selection作用于選區(qū)內(nèi)聯(lián)文本的 decoration class。該擴(kuò)展的行為約束在源碼中有非常清晰的定義selection.ts僅在非空文本選區(qū)、非 node selection、且編輯器可編輯時(shí)同步原生選區(qū)shouldSyncDomSelection僅當(dāng)編輯器失焦且當(dāng)前沒(méi)有拖拽時(shí)才渲染.selectiondecorationshouldPreserveSelection避免原生::selection樣式與 decoration 重疊失焦時(shí)調(diào)用window.getSelection()?.removeAllRanges()清除原生高亮重新聚焦后通過(guò)view.focus()恢復(fù)——這正是 3.26.0 與 3.27.4 兩次針對(duì)“多行選區(qū)高亮溢出、失焦后原生選區(qū)與 decoration 重疊”問(wèn)題的修復(fù)落地方式處于拖拽editor.view.dragging時(shí)不保留裝飾對(duì)應(yīng) CHANGELOG 中ce47182Remove selection decoration when editor is on dragging mode與 minor change52b6644skip decorations for node selection and non editable editor。三、遷移實(shí)操?gòu)呐f獨(dú)立包切到聚合包3.1 替換 import 語(yǔ)句官方 diff 匯總以下 diff 均完整摘自 CHANGELOG 3.0.1 的發(fā)布說(shuō)明可直接套用# CharacterCount - import CharacterCount from tiptap/extension-character-count import { CharacterCount } from tiptap/extensions # DropCursor - import DropCursor from tiptap/extension-dropcursor import { DropCursor } from tiptap/extensions # GapCursor - import GapCursor from tiptap/extension-gapcursor import { GapCursor } from tiptap/extensions # History - import History from tiptap/extension-history import { History } from tiptap/extensions # Placeholder - import Placeholder from tiptap/extension-placeholder import { Placeholder } from tiptap/extensions # Focus - import Focus from tiptap/extension-focus import { Focus } from tiptap/extensionsTrailingNode與Selection在舊獨(dú)立生態(tài)中并不存在對(duì)應(yīng)的穩(wěn)定獨(dú)立包屬于隨聚合包一起提供的擴(kuò)展直接引入即可。3.2 安裝與整體示例假設(shè)項(xiàng)目使用 pnpm 與 Tiptap v3安裝后即可在Editor中組合使用import { Editor } from tiptap/core import StarterKit from tiptap/starter-kit import { CharacterCount, DropCursor, Focus, GapCursor, Placeholder, Selection, TrailingNode, UndoRedo, } from tiptap/extensions const editor new Editor({ element: document.querySelector(#editor)!, extensions: [ StarterKit, // 依賴 tiptap/pm 的 ProseMirror 官方實(shí)現(xiàn) UndoRedo.configure({ depth: 100, newGroupDelay: 500 }), Placeholder.configure({ placeholder: Write something … }), CharacterCount.configure({ limit: 280 }), TrailingNode, Focus.configure({ className: has-focus, mode: all }), Selection.configure({ className: selection }), DropCursor, GapCursor, ], content: pHello Tiptap/p, }) // 讀取實(shí)時(shí)計(jì)數(shù) const count editor.storage.characterCount.characters()對(duì)應(yīng)示例可在 demos/src/Examples/Extensions 目錄下找到獨(dú)立可運(yùn)行的 demo如UndoRedo、Placeholder、CharacterCount、Focus、Selection、TrailingNode等子目錄每個(gè) demo 目錄內(nèi)包含對(duì)應(yīng)框架的組件源碼與樣式。舊包源碼仍保留在 packages-deprecated便于需要對(duì)照實(shí)現(xiàn)的場(chǎng)景查閱。四、CHANGELOG 中的關(guān)鍵演進(jìn)從“能用”到“穩(wěn)定”CHANGELOG 的價(jià)值不只在于版本號(hào)下面這些帶提交號(hào)的條目直接反映了聚合包在真實(shí)業(yè)務(wù)場(chǎng)景下踩過(guò)的坑與解法可幫助開(kāi)發(fā)者理解何時(shí)需要升級(jí)、升級(jí)后行為有何變化。4.1 CharacterCount 的能力補(bǔ)充3.23.457e53c1新增autoTrim選項(xiàng)。默認(rèn)true會(huì)在程序化設(shè)置超限內(nèi)容時(shí)自動(dòng)裁剪設(shè)為false后允許內(nèi)容臨時(shí)超過(guò)limit由開(kāi)發(fā)者調(diào)用裁剪或僅做校驗(yàn)告警給“字?jǐn)?shù)僅提示不攔截”的場(chǎng)景留出余地。4.2 Placeholder 的持續(xù)性能與穩(wěn)定性改造這是 CHANGELOG 中投入最集中的區(qū)域按時(shí)間線看是一條清晰的“優(yōu)化-修復(fù)-重構(gòu)”鏈路版本內(nèi)容解決的核心問(wèn)題3.23.6937ff2e將全文檔doc.descendants()遍歷替換為“光標(biāo)快速路徑默認(rèn)配置 視口受限掃描非默認(rèn)配置”大文檔 decoration 計(jì)算開(kāi)銷過(guò)高3.24.02d05614把視口重算推遲到 rAF、加入 overscan 邊距、節(jié)流滾動(dòng)更新協(xié)作編輯下的占位符閃爍與滾動(dòng)時(shí) CPU 占用3.27.12be3fb9當(dāng)編輯器被遮擋如模態(tài)框打開(kāi)無(wú)法可靠測(cè)量時(shí)“凍結(jié)”視口窗口被遮擋時(shí)反復(fù)切換data-placeholder導(dǎo)致的閃爍3.27.376a76da用增量StateFieldDecorationSet替換基于視口的 decoration 掃描只對(duì)每個(gè)事務(wù)涉及的頂層節(jié)點(diǎn)重算徹底移除對(duì) DOM 測(cè)量posAtCoords、rAF 調(diào)度和滾動(dòng)監(jiān)聽(tīng)器的依賴協(xié)作/遮擋/高頻編輯多重場(chǎng)景下的閃爍與卡頓此外兩項(xiàng)配置級(jí)增強(qiáng)3.18.0a65e55d新增dataAttribute可自定義承載占位文案的 data 屬性名默認(rèn)值定義于 constants.ts3.25.0MinoremptyNodeClass允許傳入函數(shù)按節(jié)點(diǎn)類型/狀態(tài)返回不同的動(dòng)態(tài) class。4.3 TrailingNode 的兼容性修復(fù)3.7.07cf3ab6node選項(xiàng)變?yōu)榭蛇x解析優(yōu)先級(jí)調(diào)整為“schema 頂層節(jié)點(diǎn)默認(rèn)類型 配置的nodeparagraph兜底”修復(fù)了自定義頂層默認(rèn)節(jié)點(diǎn)項(xiàng)目的尾節(jié)點(diǎn)類型錯(cuò)誤3.11.1eea7190修復(fù) TrailingNode 未按node選項(xiàng)推斷默認(rèn)節(jié)點(diǎn)類型的問(wèn)題3.10.59d5aeb1修復(fù) UniqueID 與 TrailingNode 同時(shí)啟用時(shí)產(chǎn)生的無(wú)限事務(wù)循環(huán)導(dǎo)致瀏覽器標(biāo)簽頁(yè)凍結(jié)的問(wèn)題源碼中對(duì)應(yīng)忽略__uniqueIDTransactionmeta 事務(wù)的判斷3.20.50c2bbfe支持設(shè)置skipTrailingNode事務(wù) meta 跳過(guò)本次尾部節(jié)點(diǎn)插入。4.4 Selection 的視覺(jué)一致性打磨3.6.37024d69改用正確的SelectionOptions類型使配置項(xiàng)獲得準(zhǔn)確類型提示3.26.075e8404/3.27.4d2983cd失焦時(shí)隱藏原生瀏覽器選區(qū)、聚焦時(shí)恢復(fù)讓.selectiondecoration 與原生::selection不再重疊多行選區(qū)的顯示更干凈。4.5 工程化與版本同步3.30.x~3.0.x 之間的大量條目為“Updated dependencies [hash] - tiptap/core / tiptap/pm”說(shuō)明聚合包嚴(yán)格跟隨 core/pm 發(fā)布節(jié)奏跨擴(kuò)展之間沒(méi)有隱性版本漂移這正是聚合包相對(duì)“各裝各的舊包”的最大工程收益3.0.1 同時(shí)收錄了 pnpm 版本別名鎖定、強(qiáng)制 type-only import、beta 與穩(wěn)定版特性同步等倉(cāng)庫(kù)級(jí)工程改動(dòng)。五、總結(jié)與升級(jí)建議若你正在維護(hù)一個(gè)同時(shí)安裝了tiptap/extension-placeholder、tiptap/extension-character-count等獨(dú)立擴(kuò)展的 Tiptap v3 項(xiàng)目可以直接把 import 替換為tiptap/extensions聚合導(dǎo)出diff 見(jiàn)第 3.1 節(jié)并刪除多余依賴收獲統(tǒng)一版本號(hào)與子路徑按需引入的便利如果你曾在大文檔或協(xié)作場(chǎng)景下遇到 placeholder 閃爍建議至少升級(jí)到3.27.3增量 StateField 重構(gòu)需要“字?jǐn)?shù)提示但不強(qiáng)制”的需求請(qǐng)?jiān)?.23.4使用autoTrim: false若同時(shí)使用 TrailingNode 與 UniqueID務(wù)必使用包含 3.10.5 修復(fù)的版本避免無(wú)限事務(wù)循環(huán)使用協(xié)作功能時(shí)請(qǐng)按源碼注釋移除undo-redo。以上全部結(jié)論均可在此倉(cāng)庫(kù)內(nèi)直接核對(duì)聚合包入口、各擴(kuò)展源碼、完整變更記錄 以及 被替代的獨(dú)立包源碼?！久赓M(fèi)下載鏈接】tiptapThe headless rich text editor framework for web artisans.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ti/tiptap創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 @tiptap/extensions 深度解讀：Tiptap 統(tǒng)一工具擴(kuò)展包的組成、遷移方式與演進(jìn)脈絡(luò)
tiptap/extensions 深度解讀Tiptap 統(tǒng)一工具擴(kuò)展包的組成、遷移方式與演進(jìn)脈絡(luò)【免費(fèi)下載鏈接】tiptapThe headless rich text editor framework for web artisans.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ti/tiptap導(dǎo)讀tiptap/extensions是 Tiptap 倉(cāng)庫(kù)在 v3 時(shí)代推出的“聚合型”擴(kuò)展包它把History撤銷/重做、Placeholder、CharacterCount、DropCursor、GapCursor、TrailingNode、Focus、Selection等八個(gè)常用工具擴(kuò)展收斂到單一包名下幫助開(kāi)發(fā)者用一次安裝、統(tǒng)一版本號(hào)完成以往需要依賴多個(gè)獨(dú)立包才能實(shí)現(xiàn)的能力。本文以該包的 CHANGELOG 為骨架結(jié)合 包內(nèi)源碼 與 舊版獨(dú)立包目錄梳理包的組成、逐項(xiàng)遷移路徑、每類擴(kuò)展的可用選項(xiàng)以及版本演進(jìn)中值得關(guān)注的 bug 修復(fù)與性能改造讀者讀完后能直接完成從舊包到新聚合包的遷移并理解各選項(xiàng)在底層 ProseMirror 插件中的真實(shí)作用。一、包定位為什么需要tiptap/extensions從 CHANGELOG 的 3.0.1 版本major change提交bfec9b2可以看到這個(gè)包的來(lái)源說(shuō)明Adds the newtiptap/extensionspackage which packages multiple utility extensions likeHistory,Placeholder,CharacterCount,DropCursor,GapCursor,TrailingNode,Focus, andSelection.也就是說(shuō)它是一個(gè)聚合包aggregate package既不重復(fù)實(shí)現(xiàn) Node/Mark 擴(kuò)展也不引入新的 UI 依賴只是把分散在tiptap/extension-character-count、tiptap/extension-dropcursor、tiptap/extension-gapcursor、tiptap/extension-history、tiptap/extension-placeholder、tiptap/extension-focus等舊獨(dú)立包中的能力統(tǒng)一收納。這一點(diǎn)在源碼層面可以直接驗(yàn)證package.json 中包名為tiptap/extensions倉(cāng)庫(kù)內(nèi)當(dāng)前版本為3.30.3與tiptap/core、tiptap/pm的版本嚴(yán)格對(duì)齊聲明了對(duì)tiptap/core、tiptap/pm的 peerDependencies工作區(qū)版本同時(shí)提供子路徑導(dǎo)出subpath exports允許按需引入tiptap/extensions/character-count、/drop-cursor、/focus、/gap-cursor、/undo-redo、/placeholder、/selection、/trailing-node便于 tree-shaking 與按需打包。入口文件 的導(dǎo)出完全與包名一一對(duì)應(yīng)export * from ./character-count/index.js export * from ./drop-cursor/index.js export * from ./focus/index.js export * from ./gap-cursor/index.js export * from ./placeholder/index.js export * from ./selection/index.js export * from ./trailing-node/index.js export * from ./undo-redo/index.js說(shuō)明CHANGELOG 的早期 release3.0.0-next.6將該包描述為 which holds utility extensions隨后的穩(wěn)定版本統(tǒng)一為上述八類擴(kuò)展。此外同一版本還提到pnpm package aliases用于 monorepo 版本鎖定、以及強(qiáng)制 type imports便于 bundler 在生成 dist/index.js 時(shí)剔除純類型導(dǎo)入等工程化改動(dòng)這些不會(huì)影響業(yè)務(wù)側(cè) API。從倉(cāng)庫(kù)結(jié)構(gòu)看被替代的舊獨(dú)立包被移入 packages-deprecated 目錄extension-character-count、extension-dropcursor、extension-focus、extension-gapcursor、extension-history、extension-placeholder等可以從實(shí)現(xiàn)層面印證“遷移到tiptap/extensions”確實(shí)是倉(cāng)庫(kù)推薦的演進(jìn)方向。二、八個(gè)聚合擴(kuò)展逐個(gè)拆解2.1 CharacterCount字?jǐn)?shù)/詞數(shù)統(tǒng)計(jì)與硬性限制Changelog 中 CharacterCount 的官方描述為“添加一個(gè)光標(biāo)用于指示拖放時(shí)新節(jié)點(diǎn)將插入的位置”但結(jié)合 源碼 可以看出該描述明顯是從 DropCursor 條目復(fù)制而來(lái)changelog 中的筆誤其真實(shí)職責(zé)是統(tǒng)計(jì)文檔字符數(shù)/詞數(shù)并在超出限制時(shí)攔截或裁剪輸入同時(shí)把計(jì)數(shù)能力暴露在storage.characterCount中供 UI 讀取。遷移方式CHANGELOG 原始 diff- import CharacterCount from tiptap/extension-character-count import { CharacterCount } from tiptap/extensions類型導(dǎo)入import { CharacterCount, CharacterCountOptions } from tiptap/extensions;可選配置項(xiàng)來(lái)自 character-count.ts 的類型定義與addOptions默認(rèn)值選項(xiàng)類型默認(rèn)值作用limitnumber \| nullnull允許的最大字符數(shù)0/null/undefined均表示不限制modetextSize \| nodeSizetextSizetextSize使用node.textBetween(...)的文本內(nèi)容計(jì)算nodeSize使用 ProseMirror 節(jié)點(diǎn)大小計(jì)算autoTrimbooleantrue當(dāng)程序化設(shè)置的內(nèi)容超過(guò)限制時(shí)是否自動(dòng)裁剪3.23.4 新增詳見(jiàn)下文textCounter(text: string) number(text) text.length自定義字符計(jì)數(shù)函數(shù)如基于Intl.Segmenter統(tǒng)計(jì)wordCounter(text: string) number按空格分詞計(jì)數(shù)自定義詞數(shù)統(tǒng)計(jì)函數(shù)它的核心機(jī)制并非簡(jiǎn)單“算個(gè)數(shù)”而是通過(guò)一個(gè) ProseMirror 插件同時(shí)控制兩類行為見(jiàn) filterTransaction 與 appendTransactionfilterTransaction在每次輸入事務(wù)到達(dá)前校驗(yàn)新舊字符數(shù)。超過(guò)上限的非粘貼事務(wù)會(huì)被直接攔截返回false對(duì)粘貼內(nèi)容則嘗試刪除超出部分transaction.deleteRange若裁剪后仍超限則整體拒絕appendTransaction在編輯器創(chuàng)建初期檢測(cè)初始內(nèi)容是否已經(jīng)超限例如setContent注入超長(zhǎng)內(nèi)容超限時(shí)發(fā)出console.warn并從文檔開(kāi)頭刪除多出的字符。開(kāi)發(fā)者可通過(guò)storage.characterCount.characters()/.words()在 UI 上實(shí)時(shí)展示計(jì)數(shù)也可傳入自定義 node 與 mode 按指定范圍計(jì)算。2.2 DropCursor拖放時(shí)的插入位置指示線官方能力為拖放操作添加一條可視光標(biāo)指示新節(jié)點(diǎn)將被插入的位置CHANGELOG 原文adds a cursor that indicates where a new node will be inserted when dragging and dropping。該能力底層直接來(lái)源于 ProseMirror 的 dropcursor 插件在本聚合包內(nèi)被包裝成 Tiptap 擴(kuò)展。遷移原始 diff- import DropCursor from tiptap/extension-dropcursor import { DropCursor } from tiptap/extensionsimport { DropCursor, DropCursorOptions } from tiptap/extensions;2.3 GapCursor空白區(qū)域的占位光標(biāo)官方能力當(dāng)點(diǎn)擊文檔中沒(méi)有內(nèi)容的區(qū)域例如兩個(gè)塊級(jí)節(jié)點(diǎn)之間時(shí)出現(xiàn)一個(gè)光標(biāo)讓用戶可以在“縫隙”中定位并開(kāi)始輸入CHANGELOG 原文a cursor that appears when you click on a place where no content is present, for example in-between nodes。遷移原始 diff- import GapCursor from tiptap/extension-gapcursor import { GapCursor } from tiptap/extensionsimport { GapCursor } from tiptap/extensions;GapCursor 是諸多塊級(jí)交互點(diǎn)擊表格/圖片之間的空隙后回車換行的基礎(chǔ)設(shè)施通常建議與 DropCursor 一起加入編輯器的extensions數(shù)組。2.4 History / UndoRedo撤銷與重做CHANGELOG 將該條目命名為Historyadds undo and redo functionality to the editor但遷移后的新包入口實(shí)際暴露的擴(kuò)展名是UndoRedo見(jiàn) undo-redo/index.ts 與 undo-redo.ts其內(nèi)部包裝的正是 ProseMirror 官方的history插件。在 3.0.0-next.6 的早期描述中還出現(xiàn)過(guò)HistoryOptions命名最終穩(wěn)定版統(tǒng)一為UndoRedoOptions引用源碼時(shí)建議以UndoRedo為準(zhǔn)。遷移原始 diff- import History from tiptap/extension-history import { History } from tiptap/extensionsimport { UndoRedo, UndoRedoOptions } from tiptap/extensions;配置項(xiàng)來(lái)自 undo-redo.ts選項(xiàng)類型默認(rèn)值作用depthnumber100保留的歷史事件數(shù)量超出后丟棄最舊記錄newGroupDelaynumber500兩次變更之間間隔超過(guò)該毫秒數(shù)后開(kāi)啟新的撤銷分組UndoRedo還自動(dòng)注冊(cè)了undo/redo命令與快捷鍵Mod-z撤銷、Shift-Mod-z與Mod-y重做并且額外處理了Mod-я等俄語(yǔ)鍵盤(pán)布局見(jiàn) addKeyboardShortcuts。需要特別留意的是源碼中的兼容性警告undo-redo.ts 注釋如果項(xiàng)目同時(shí)使用tiptap/extension-collaboration必須移除undo-redo因?yàn)閰f(xié)作擴(kuò)展自帶獨(dú)立的 Yjs 歷史實(shí)現(xiàn)兩者疊加會(huì)互相干擾。2.5 Placeholder空狀態(tài)占位提示官方能力當(dāng)編輯器或某個(gè)節(jié)點(diǎn)為空時(shí)展示一段占位文本CHANGELOG 原文adds a placeholder text to the editor, which is displayed when the editor is empty。遷移原始 diff- import Placeholder from tiptap/extension-placeholder import { Placeholder } from tiptap/extensionsimport { Placeholder, PlaceholderOptions } from tiptap/extensions;默認(rèn)選項(xiàng)見(jiàn) placeholder.ts選項(xiàng)類型默認(rèn)值作用emptyEditorClassstringis-editor-empty整個(gè)編輯器為空時(shí)附加到根節(jié)點(diǎn)的 classemptyNodeClassstringis-empty單個(gè)空節(jié)點(diǎn)上附加的 class3.25.0 起可傳函數(shù)按節(jié)點(diǎn)返回動(dòng)態(tài) classdataAttributestring見(jiàn)DEFAULT_DATA_ATTRIBUTE用于承載占位文案的 data 屬性名3.18.0 新增placeholderstring \| ((node) string)Write something …占位文本或按節(jié)點(diǎn)動(dòng)態(tài)生成的函數(shù)showOnlyWhenEditablebooleantrue編輯器處于只讀/不可編輯時(shí)不展示占位符showOnlyCurrentbooleantrue僅當(dāng)光標(biāo)位于該空節(jié)點(diǎn)時(shí)才展示includeChildrenbooleanfalse是否覆蓋嵌套的空子節(jié)點(diǎn)與早期獨(dú)立版本相比穩(wěn)定版的 placeholder 是 CHANGELOG 中修復(fù)最密集的模塊其演進(jìn)詳見(jiàn)第 4 節(jié)建議基于視口增量掃描而非全文檔遍歷的機(jī)制在性能上對(duì)超大文檔尤其關(guān)鍵。2.6 TrailingNode文檔末尾的兜底節(jié)點(diǎn)官方能力始終在文檔結(jié)尾保留一個(gè)節(jié)點(diǎn)如段落保證用戶把內(nèi)容刪光后依然有可輸入的位置CHANGELOG 原文adds a node at the end of the editor, which can be used to add a trailing node like a paragraph。import { TrailingNode, TrailingNodeOptions } from tiptap/extensions;配置項(xiàng)見(jiàn) trailing-node.ts選項(xiàng)類型默認(rèn)值作用nodestringundefined期望插入的節(jié)點(diǎn)類型名省略時(shí)從 schema 頂部節(jié)點(diǎn)類型的defaultType推導(dǎo)最后兜底paragraph3.7.0 起可選notAfterstring \| string[][paragraph]這些節(jié)點(diǎn)之后不再?gòu)?qiáng)制插入尾節(jié)點(diǎn)防止無(wú)限循環(huán)實(shí)現(xiàn)細(xì)節(jié)值得注意appendTransaction 與 state.apply通過(guò)appendTransaction在每次事務(wù)后檢查doc.lastChild類型不符合預(yù)期時(shí)在doc.content.size位置插入新節(jié)點(diǎn)插件 state 會(huì)忽略帶__uniqueIDTransactionmeta 的事務(wù)避免與 UniqueID 擴(kuò)展互相觸發(fā)形成死循環(huán)對(duì)應(yīng) 3.10.5 的修復(fù)支持通過(guò)事務(wù) metaskipTrailingNode跳過(guò)本次插入3.20.5 新增見(jiàn) skipTrailingNodeMeta 導(dǎo)出例如編程式內(nèi)容替換時(shí)不想自動(dòng)補(bǔ)尾節(jié)點(diǎn)。2.7 Focus光標(biāo)所在節(jié)點(diǎn)的聚焦高亮官方能力當(dāng)編輯器獲得焦點(diǎn)時(shí)為光標(biāo)所在的節(jié)點(diǎn)附加 class便于圍繞“當(dāng)前編輯位置”做視覺(jué)高亮如大綱編輯器中的當(dāng)前段落描邊。import { Focus, FocusOptions } from tiptap/extensions;配置項(xiàng)見(jiàn) focus.ts選項(xiàng)類型默認(rèn)值作用classNamestringhas-focus附加到聚焦節(jié)點(diǎn)的 classmodeall \| deepest \| shallowestallall高亮光標(biāo)路徑上的所有節(jié)點(diǎn)deepest只高亮最內(nèi)層節(jié)點(diǎn)shallowest只高亮最外層包含節(jié)點(diǎn)實(shí)現(xiàn)上它利用props.decorations當(dāng)!isEditable || !isFocused時(shí)返回空DecorationSet因此只讀狀態(tài)與失焦?fàn)顟B(tài)下不會(huì)產(chǎn)生任何高亮裝飾見(jiàn) focus.ts。2.8 Selection失焦后的自定義選區(qū)樣式官方能力當(dāng)編輯器失去焦點(diǎn)時(shí)用可自定義 class 的 decoration 代替瀏覽器原生選區(qū)讓“內(nèi)容被選中”的狀態(tài)在失焦后依然可見(jiàn)CHANGELOG 原文adds a selection state to the editor, which can be used to style the editor when theres a selection。import { Selection, SelectionOptions } from tiptap/extensions;配置項(xiàng)見(jiàn) selection.tsclassName默認(rèn)selection作用于選區(qū)內(nèi)聯(lián)文本的 decoration class。該擴(kuò)展的行為約束在源碼中有非常清晰的定義selection.ts僅在非空文本選區(qū)、非 node selection、且編輯器可編輯時(shí)同步原生選區(qū)shouldSyncDomSelection僅當(dāng)編輯器失焦且當(dāng)前沒(méi)有拖拽時(shí)才渲染.selectiondecorationshouldPreserveSelection避免原生::selection樣式與 decoration 重疊失焦時(shí)調(diào)用window.getSelection()?.removeAllRanges()清除原生高亮重新聚焦后通過(guò)view.focus()恢復(fù)——這正是 3.26.0 與 3.27.4 兩次針對(duì)“多行選區(qū)高亮溢出、失焦后原生選區(qū)與 decoration 重疊”問(wèn)題的修復(fù)落地方式處于拖拽editor.view.dragging時(shí)不保留裝飾對(duì)應(yīng) CHANGELOG 中ce47182Remove selection decoration when editor is on dragging mode與 minor change52b6644skip decorations for node selection and non editable editor。三、遷移實(shí)操?gòu)呐f獨(dú)立包切到聚合包3.1 替換 import 語(yǔ)句官方 diff 匯總以下 diff 均完整摘自 CHANGELOG 3.0.1 的發(fā)布說(shuō)明可直接套用# CharacterCount - import CharacterCount from tiptap/extension-character-count import { CharacterCount } from tiptap/extensions # DropCursor - import DropCursor from tiptap/extension-dropcursor import { DropCursor } from tiptap/extensions # GapCursor - import GapCursor from tiptap/extension-gapcursor import { GapCursor } from tiptap/extensions # History - import History from tiptap/extension-history import { History } from tiptap/extensions # Placeholder - import Placeholder from tiptap/extension-placeholder import { Placeholder } from tiptap/extensions # Focus - import Focus from tiptap/extension-focus import { Focus } from tiptap/extensionsTrailingNode與Selection在舊獨(dú)立生態(tài)中并不存在對(duì)應(yīng)的穩(wěn)定獨(dú)立包屬于隨聚合包一起提供的擴(kuò)展直接引入即可。3.2 安裝與整體示例假設(shè)項(xiàng)目使用 pnpm 與 Tiptap v3安裝后即可在Editor中組合使用import { Editor } from tiptap/core import StarterKit from tiptap/starter-kit import { CharacterCount, DropCursor, Focus, GapCursor, Placeholder, Selection, TrailingNode, UndoRedo, } from tiptap/extensions const editor new Editor({ element: document.querySelector(#editor)!, extensions: [ StarterKit, // 依賴 tiptap/pm 的 ProseMirror 官方實(shí)現(xiàn) UndoRedo.configure({ depth: 100, newGroupDelay: 500 }), Placeholder.configure({ placeholder: Write something … }), CharacterCount.configure({ limit: 280 }), TrailingNode, Focus.configure({ className: has-focus, mode: all }), Selection.configure({ className: selection }), DropCursor, GapCursor, ], content: pHello Tiptap/p, }) // 讀取實(shí)時(shí)計(jì)數(shù) const count editor.storage.characterCount.characters()對(duì)應(yīng)示例可在 demos/src/Examples/Extensions 目錄下找到獨(dú)立可運(yùn)行的 demo如UndoRedo、Placeholder、CharacterCount、Focus、Selection、TrailingNode等子目錄每個(gè) demo 目錄內(nèi)包含對(duì)應(yīng)框架的組件源碼與樣式。舊包源碼仍保留在 packages-deprecated便于需要對(duì)照實(shí)現(xiàn)的場(chǎng)景查閱。四、CHANGELOG 中的關(guān)鍵演進(jìn)從“能用”到“穩(wěn)定”CHANGELOG 的價(jià)值不只在于版本號(hào)下面這些帶提交號(hào)的條目直接反映了聚合包在真實(shí)業(yè)務(wù)場(chǎng)景下踩過(guò)的坑與解法可幫助開(kāi)發(fā)者理解何時(shí)需要升級(jí)、升級(jí)后行為有何變化。4.1 CharacterCount 的能力補(bǔ)充3.23.457e53c1新增autoTrim選項(xiàng)。默認(rèn)true會(huì)在程序化設(shè)置超限內(nèi)容時(shí)自動(dòng)裁剪設(shè)為false后允許內(nèi)容臨時(shí)超過(guò)limit由開(kāi)發(fā)者調(diào)用裁剪或僅做校驗(yàn)告警給“字?jǐn)?shù)僅提示不攔截”的場(chǎng)景留出余地。4.2 Placeholder 的持續(xù)性能與穩(wěn)定性改造這是 CHANGELOG 中投入最集中的區(qū)域按時(shí)間線看是一條清晰的“優(yōu)化-修復(fù)-重構(gòu)”鏈路版本內(nèi)容解決的核心問(wèn)題3.23.6937ff2e將全文檔doc.descendants()遍歷替換為“光標(biāo)快速路徑默認(rèn)配置 視口受限掃描非默認(rèn)配置”大文檔 decoration 計(jì)算開(kāi)銷過(guò)高3.24.02d05614把視口重算推遲到 rAF、加入 overscan 邊距、節(jié)流滾動(dòng)更新協(xié)作編輯下的占位符閃爍與滾動(dòng)時(shí) CPU 占用3.27.12be3fb9當(dāng)編輯器被遮擋如模態(tài)框打開(kāi)無(wú)法可靠測(cè)量時(shí)“凍結(jié)”視口窗口被遮擋時(shí)反復(fù)切換data-placeholder導(dǎo)致的閃爍3.27.376a76da用增量StateFieldDecorationSet替換基于視口的 decoration 掃描只對(duì)每個(gè)事務(wù)涉及的頂層節(jié)點(diǎn)重算徹底移除對(duì) DOM 測(cè)量posAtCoords、rAF 調(diào)度和滾動(dòng)監(jiān)聽(tīng)器的依賴協(xié)作/遮擋/高頻編輯多重場(chǎng)景下的閃爍與卡頓此外兩項(xiàng)配置級(jí)增強(qiáng)3.18.0a65e55d新增dataAttribute可自定義承載占位文案的 data 屬性名默認(rèn)值定義于 constants.ts3.25.0MinoremptyNodeClass允許傳入函數(shù)按節(jié)點(diǎn)類型/狀態(tài)返回不同的動(dòng)態(tài) class。4.3 TrailingNode 的兼容性修復(fù)3.7.07cf3ab6node選項(xiàng)變?yōu)榭蛇x解析優(yōu)先級(jí)調(diào)整為“schema 頂層節(jié)點(diǎn)默認(rèn)類型 配置的nodeparagraph兜底”修復(fù)了自定義頂層默認(rèn)節(jié)點(diǎn)項(xiàng)目的尾節(jié)點(diǎn)類型錯(cuò)誤3.11.1eea7190修復(fù) TrailingNode 未按node選項(xiàng)推斷默認(rèn)節(jié)點(diǎn)類型的問(wèn)題3.10.59d5aeb1修復(fù) UniqueID 與 TrailingNode 同時(shí)啟用時(shí)產(chǎn)生的無(wú)限事務(wù)循環(huán)導(dǎo)致瀏覽器標(biāo)簽頁(yè)凍結(jié)的問(wèn)題源碼中對(duì)應(yīng)忽略__uniqueIDTransactionmeta 事務(wù)的判斷3.20.50c2bbfe支持設(shè)置skipTrailingNode事務(wù) meta 跳過(guò)本次尾部節(jié)點(diǎn)插入。4.4 Selection 的視覺(jué)一致性打磨3.6.37024d69改用正確的SelectionOptions類型使配置項(xiàng)獲得準(zhǔn)確類型提示3.26.075e8404/3.27.4d2983cd失焦時(shí)隱藏原生瀏覽器選區(qū)、聚焦時(shí)恢復(fù)讓.selectiondecoration 與原生::selection不再重疊多行選區(qū)的顯示更干凈。4.5 工程化與版本同步3.30.x~3.0.x 之間的大量條目為“Updated dependencies [hash] - tiptap/core / tiptap/pm”說(shuō)明聚合包嚴(yán)格跟隨 core/pm 發(fā)布節(jié)奏跨擴(kuò)展之間沒(méi)有隱性版本漂移這正是聚合包相對(duì)“各裝各的舊包”的最大工程收益3.0.1 同時(shí)收錄了 pnpm 版本別名鎖定、強(qiáng)制 type-only import、beta 與穩(wěn)定版特性同步等倉(cāng)庫(kù)級(jí)工程改動(dòng)。五、總結(jié)與升級(jí)建議若你正在維護(hù)一個(gè)同時(shí)安裝了tiptap/extension-placeholder、tiptap/extension-character-count等獨(dú)立擴(kuò)展的 Tiptap v3 項(xiàng)目可以直接把 import 替換為tiptap/extensions聚合導(dǎo)出diff 見(jiàn)第 3.1 節(jié)并刪除多余依賴收獲統(tǒng)一版本號(hào)與子路徑按需引入的便利如果你曾在大文檔或協(xié)作場(chǎng)景下遇到 placeholder 閃爍建議至少升級(jí)到3.27.3增量 StateField 重構(gòu)需要“字?jǐn)?shù)提示但不強(qiáng)制”的需求請(qǐng)?jiān)?.23.4使用autoTrim: false若同時(shí)使用 TrailingNode 與 UniqueID務(wù)必使用包含 3.10.5 修復(fù)的版本避免無(wú)限事務(wù)循環(huán)使用協(xié)作功能時(shí)請(qǐng)按源碼注釋移除undo-redo。以上全部結(jié)論均可在此倉(cāng)庫(kù)內(nèi)直接核對(duì)聚合包入口、各擴(kuò)展源碼、完整變更記錄 以及 被替代的獨(dú)立包源碼?！久赓M(fèi)下載鏈接】tiptapThe headless rich text editor framework for web artisans.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ti/tiptap創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考