I’m trying to insert streamed Markdown chunks into a TipTap editor using Vue and tiptap-pagination-plus. The issue is that when the streamed content causes a page break, TipTap adds unwanted characters at the end of the chunk. The goal is to let the stream dynamically update specific parts of the document (in markdown) without introducing extra characters when a page break occurs.
content: props.modelValue,
extensions: [
StarterKit.configure({ heading: { levels: [1, 2, 3] } }),
PaginationPlus.configure({
pageHeight: 1123,
pageGap: 20,
pageBreakBackground: 'bg-background',
pageGapBorderSize: 5,
marginTop: 40,
contentMarginTop: 40,
marginBottom: 40,
marginLeft: 40,
marginRight: 40,
pageHeaderHeight: 63,
pageFooterHeight: 30,
headerLeft: '<h5 style="diplay: flex; align-itens: center; font-size: 1.125rem !important; font-weight: 700 !important ">mentor<span style="color: #a376fd;">ia</span></h5>',
headerRight: `<img src="${getExpressionOtto(Expression.ACADEMIC)}" style="min-width:30px; max-width:45px;"></img>`,
footerRight: '<h5 style="font-size: 1.125rem !important; font-weight: 700 !important; opacity:0.5; ">mentor<span style="color: #a376fd;">ia</span></h5>',
}),
Underline,
Highlight,
TextAlign.configure({
types: ['heading', 'paragraph'],
}),
Markdown.configure({
transformPastedText: true,
transformCopiedText: true,
}),
],
editable: !props.isGenerating && props.editable && !props.isScribbling,
onCreate() {
emit('update:editor', tiptapEditor.value)
},
onUpdate: ({ editor }) => {
if (props.isGenerating || props.isScribbling )
return
const markdown = editor.storage.markdown.getMarkdown()
emit('update:modelValue', markdown)
},
})
let isFirstChunk = true
watch(
() => props.scribbleNewContent,
async newChunk => {
if (!tiptapEditor.value || !newChunk)
return
const { from, to } = initialSelectionRange.value
if (toScrible.value === null || toScrible.value === undefined)
toScrible.value = from
try {
if (isFirstChunk) {
tiptapEditor.value.commands.deleteRange({ from, to })
isFirstChunk = false
}
await tiptapEditor.value.commands.insertContentAt(toScrible.value, newChunk, { applyInputRules: true, applyPasteRules: true,errorOnInvalidContent: false })
toScrible.value += newChunk.length
}
catch (e) {
console.warn('Erro ao inserir chunk:', e)
}
markdownBuffer.value += newChunk
if (props.scribbleCompleted) {
const docSize = tiptapEditor.value.state.doc.content.size
if (from < 0 || toScrible.value > docSize) {
console.warn('Invalid range')
return
}
console.log('chorar', markdownBuffer.value)
tiptapEditor.value?.chain()
.focus()
.deleteRange({ from, to: toScrible.value })
.insertContentAt(from, markdownBuffer.value, { parseOptions: { preserveWhitespace: false }, applyPasteRules: true })
.run()
console.log('CONFIRMA')
}
},
)```