Content overflow for inline editor mode

[yingying96]

What is the current behavior?

Currently we have some content (E.g. tables) and it overflows whenever we turn on inline editor mode. If we turn it off, it does not overflow. However, we can't scroll within the editor without the inline mode.

Example as shown below.

Code sample

const DisabledEditor = ({ value }) => (
  <Editor
    apiKey=API KEY HERE
    initialValue={value}
    disabled
    init={{
      selector: 'div',
      resize: true,
      menubar: false,
      branding: false,
      plugins: [
        'wordcount', 'autoresize',
      ],
      inline: true,
      toolbar: false,
      content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#676A6C; }',
    }}
  />
);

The table content as highlighted below will overflow

[exalate-issue-sync[bot]]

Ref: INT-3043

[tiny-james]

I have spotted a few things that might be causing problems:

1. Inline mode and the autoresize plugin do not go together. The autoresize plugin only makes sense for the default (iframe) mode.
2. It's probably not scrolling in the default (iframe) mode because you have the autoresize plugin and it will size the editor to fit the content. It probably also sets overflow to hidden which may not work correctly with content that is too wide.
3. Inline mode behaves by loading the editor in an existing div. If you want that div to have restrictions to force scrollbars you will need to use CSS to set the width/max-width and overflow behavior. You can give the editor an ID to make this easier.
4. If you have the editor permanently disabled in inline mode then I'd suggest just displaying the content without using the editor at all because it will add nothing other than some small protection against scripts which you could get by using any sanitizer.

Here's an example of wide content in inline mode: https://codesandbox.io/s/inline-with-scroll-xvdt85

[yingying96]

If you have the editor permanently disabled in inline mode then I'd suggest just displaying the content without using the editor at all because it will add nothing other than some small protection against scripts which you could get by using any sanitizer. >> Do you have any suggestion on how we can display the content without using the editor? Yes we are planning to use editor for users to add content in other page but for displaying, it will be permanently disabled.

If we turn off inline, may i know if there is a way to enable scrolling beyond the tinymce editor when the editor is set to auto resize? We want the content to auto resize and the users should be able to scroll beyond the editor. However, currently we can't scroll the entire page if our mouse cursor is within the editor. If we move the cursor out of the editor, we are able to scroll up and down on the entire page.

[tiny-james]

Do you have any suggestion on how we can display the content without using the editor?

https://github.com/cure53/DOMPurify + https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

If we turn off inline, may i know if there is a way to enable scrolling beyond the tinymce editor when the editor is set to auto resize?

That is a question for the TinyMCE team so ask on the tinymce repository. If you are feeling adventurous you can look at the source code here:

https://github.com/tinymce/tinymce/tree/develop/modules/tinymce/src/plugins/autoresize/main/ts