tinymce / tinymce-react

Offical TinyMCE React component
MIT License
937 stars 152 forks source link

Chrome Browser Based Bug and high memory usage after sometime #499

Closed ChetSocio closed 2 months ago

ChetSocio commented 4 months ago

What is the current behavior? Hey I am using tinymce-react package in my nextjs 14 based production app. The problem is that the tinymce doesnot work on chrome browser. I have tried disabling all extensions, cleared cache, reinstalled chrome and tried again but I was shocked when It worked with firefox , edge and brave at them same time but not chrome. Thats what proves theissue is not on my code side. Code is okay and checked too. **Please provide the steps to reproduce and if possible a minimal demo of the problem via [codesandbox.io] Note : I have used formik and yup so you can guess it further. I also faced high memory usage in browsers once we write around above 800 words (around I guess). The editor starts lagging and doesnot respond if we don't refresh whole tab. This problem was not with previous version as far as I remember.

"use client"
import { Editor } from '@tinymce/tinymce-react';
 <Editor
         textareaName='long_desc' id="long_descd" value={values.long_desc} onBlur={handleBlur}
          onEditorChange={(e) => { handleChange({ target: { name: 'long_desc', value: e } }) }}
           apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY as string}
           onInit={(evt, editor) => editorRef.current = editor}
            init={{
                height: 800,
                 menubar: true,
                   plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons',
                 toolbar_sticky: true,
       toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media link anchor codesample | ltr rtl',
     content_style: 'body { font-family:-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size:14px }',
        toolbar_mode: 'sliding',
         }}
  />

Chrome bug Image here Brave Working Image here What is the expected behavior? The editor was supposed to work in chrome browser too and the problem seems to be browser specific. I can surely say its a browser specific issue but I don't know what issue is it and how to solve it. Otherwise i would create a Pull Request :( Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-react? Chrome version is 121.0.6167.160 (Official Build) (64-bit) Tinymce version is "@tinymce/tinymce-react": "^4.3.0", Windows 10

danoaky-tiny commented 3 months ago

Is anything logged to the console, frontend or backend? Otherwise, code sandbox templates for NextJS do exist, so creating one for your issue would help greatly to find what the problem is.

github-actions[bot] commented 2 months ago

This issue is stale because it has been open for 30 days with no activity. Respond with a comment or this will be closed in 7 days.