hunghg255 / reactjs-tiptap-editor

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for Reactjs
https://reactjs-tiptap-editor.vercel.app/
MIT License
203 stars 37 forks source link

Performance issue #72

Closed lqminh2207 closed 1 month ago

lqminh2207 commented 1 month ago

When typing continuously, it has to re-render too much, leading to performance issues, very slow, lag.

lqminh2207 commented 1 month ago

Another issue, when I try to deploy my project to netlify. After install your package, it takes a long time to build and leads to out of memory, and cannot deploy anymore

image

hunghg255 commented 1 month ago

Another issue, when I try to deploy my project to netlify. After install your package, it takes a long time to build and leads to out of memory, and cannot deploy anymore

image

you need to use npm instead yarn send me a repo your component, I can check help you

lqminh2207 commented 1 month ago

@hunghg255 https://github.com/SE-Capstone/FE Please help me check

hunghg255 commented 1 month ago

@hunghg255 SE-Capstone/FE Please help me check

export default function RichTextExample() {
  const [content, setContent] = useState(DEFAULT);

  const onChangeContent = (value: any) => {
    setContent(value);
  };

  return (
    <Container mt={5}>
      <RichTextEditor
        dark={false}
        label="Editor"
        output="html"
        content={DEFAULT}
        extensions={extensions}
        onChangeContent={onChangeContent}
      />
    </Container>
  );
}

the content should use default value instead use the value from state

lqminh2207 commented 1 month ago

@hunghg255 What about deploy issue, I try to using npm instead. But still got the same error

hunghg255 commented 1 month ago

like be you see from your image error. it still use yarn

Vào Th 4, 16 thg 10, 2024 lúc 18:15 xkrystall @.***> đã viết:

@hunghg255 https://github.com/hunghg255 What about deploy issue, I try to using npm instead. But still got the same error

— Reply to this email directly, view it on GitHub https://github.com/hunghg255/reactjs-tiptap-editor/issues/72#issuecomment-2416503412, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKBFSDEWWGUVZJKY3JJORY3Z3ZDFTAVCNFSM6AAAAABQBBQU6WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJWGUYDGNBRGI . You are receiving this because you were mentioned.Message ID: @.***>

hunghg255 commented 1 month ago

let try to remove file yarn.lock on your repo

Vào Th 4, 16 thg 10, 2024 lúc 18:16 Hung Hoang @.***> đã viết:

like be you see from your image error. it still use yarn

Vào Th 4, 16 thg 10, 2024 lúc 18:15 xkrystall @.***> đã viết:

@hunghg255 https://github.com/hunghg255 What about deploy issue, I try to using npm instead. But still got the same error

— Reply to this email directly, view it on GitHub https://github.com/hunghg255/reactjs-tiptap-editor/issues/72#issuecomment-2416503412, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKBFSDEWWGUVZJKY3JJORY3Z3ZDFTAVCNFSM6AAAAABQBBQU6WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJWGUYDGNBRGI . You are receiving this because you were mentioned.Message ID: @.***>

salaarkhan-dev commented 1 month ago

@lqminh2207 Add these two configuration in your Component:

<RcTiptapEditor
        ref={refEditor}
        output='html'
        content={DEFAULT}
        onChangeContent={onValueChange}
        extensions={extensions}
        disabled={disable}
        // Add these options
        useEditorOptions={{
          immediatelyRender: true,
          shouldRerenderOnTransaction: false,
        }}

      />