0

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')
    }
  },
)```

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.