question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tinymce error on resize window

See original GitHub issue

What is the current behavior? When tinymce is loaded as disabled then resize window and enable editor a strange error occur

steps to reproduce link: https://5oi3i.csb.app/

  1. load in small size 900 for example
  2. resize window to 1200
  3. press toggle
  4. press toggle

source code: https://codesandbox.io/s/tinymcereact-5oi3i?file=/src/index.js:0-1646

The component must be in a context to send: getByDom
<div aria-pressed="false" aria-label="Bullet list" title="Bullet list" role="button" aria-haspopup="true" unselectable="on" tabindex="-1" class="tox-split-button tox-tbtn--disabled" style="user-select: none;" aria-disabled="true" aria-expanded="false" aria-describedby="aria_2622540402021592495008207"></div> is not in context

What is the expected behavior? Editor should permit enable/disable edit mode without errors

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-react?

  • TinyMCE react 3.6.0 same behavior on 3.5.0 not tested in more previous
  • Ubuntu 20.04 Chrome 81.0.4044.122 and Firefox

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:6
  • Comments:12 (7 by maintainers)

github_iconTop GitHub Comments

4reactions
tiny-jamescommented, Sep 9, 2020

I have replicated this in pure TinyMCE here: http://fiddle.tinymce.com/Vrhaab/2

An expert in TinyMCE’s UI library looked into it and came up with this explanation:

  • the editor is resized via css. Nothing happens immediately.
  • the setMode(‘design’) is called. This ends with a nodeChange.
  • the components listening to the nodeChange are identified by EventDispatcher. This includes the components that are about to be removed from the DOM because they no longer fit in the smaller toolbar
  • iframe’s nodeChange listener fires, which calls resizeContent
  • iframe’s resizeContent handler fires which calls refresh on the toolbar, and removes all the toolbar groups that don’t fit in the new editor width. This also removes the nodeChange handlers from these components
  • the current nodeChange event keeps iterating through all the listeners identified up-front. Finds the toolbar buttons that were just removed. Tries to call their handlers and an error occurs.

There is now a ticket in the TinyMCE backlog to fix this issue with this explanation and a suggested fix. When that gets completed I will update this issue.

1reaction
tiny-jamescommented, Feb 15, 2021

This fix is now likely to be in TinyMCE 5.8 (it did not make 5.7).

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - TinyMCE error when resizing
I just updated a client's application with TinyMCE version 4.1.7 and now I am having issues resizing the editor (using the arrow at...
Read more >
Autoresize plugin | Docs
This plugin automatically resizes the editor to the content inside it. It is typically used to prevent the editor from expanding infinitely as...
Read more >
[#MDL-47591] TinyMCE freezes on reducing window size - Moodle ...
In any window that uses TinyMCE, add some text into TinyMCE. Then shrink the window horizontally until you see the text disappear. Now...
Read more >
TinyMCE window keeps expanding [#1144720]
There is also an additional auto-resize plugin which should increase the editor's height row by row as needed to fit the entire contents....
Read more >
changelog.txt
Fixed bug where TinyMCE could not be lazyloaded through jquery integration. ... Fixed so template dialog gets resized if it doesn't fit the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found