TipTap Rich Text Editor not updating state when pasting content

Question

I have implemented a rich text editor in my project using TipTap, and all functions are working fine. However when I paste the text from another document, the state is not being updated, and if the user submits it will be posting the placeholder to database, and not the text that was pasted.

I have tried googling to find a solution, but without success. TipTap documentation is not great, and I haven't found anybody else struggling with this problem.

This is the code:

'use client';

import { useState } from 'react';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import FontFamily from '@tiptap/extension-font-family';
import TextStyle from '@tiptap/extension-text-style';
import MenuBar from './menu-bar';

import '../../style.css'

const TipTap = ({ setDescription }) => {

  const [editorContent, setEditorContent ] = useState("Write the description here");

  const editor = useEditor({
    extensions: [
        StarterKit,
        TextStyle,
        FontFamily
    ],
    content: editorContent,
    editorProps :{
      attributes: {
        class: "prose prose-sm sm:prose lg:prose-base xl:prose-lg h-[400px] min-w-full overflow-y-scroll border border-slate-300 rounded-lg focus:outline-none "
      }
    },


    onUpdate ({editor}) {
      setEditorContent(editor.getHTML())
      setDescription(editorContent);
    }

  })

  return (
    // <div className='border rounded-lg border-slate-700 mt-2 h-full pl-4 w-full min-h-[400px] overflow-y-scroll'>
    <>
      <MenuBar editor={editor} />
      <EditorContent editor={editor} /> 
    </>
    // </div>
  )
}

export default TipTap;

<> //

) } export default TipTap;

TipTap Rich Text Editor not updating state when pasting content

0 Replies