Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

dynamic import in webpack produces hidden TinyMCE #1466

Closed
dnagirl opened this issue Aug 15, 2019 · 6 comments
Closed

dynamic import in webpack produces hidden TinyMCE #1466

dnagirl opened this issue Aug 15, 2019 · 6 comments
Labels
bug

Comments

@dnagirl
Copy link

dnagirl commented Aug 15, 2019

What is the current behavior? Describe the bug

When tinyMCE is imported asynchronously, the resulting output is invisible. If tinyMCE is imported normally, it works as expected.

Please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tinymce.com or similar.

configTinymce.js

import $ from 'jquery';
import tinymce from 'tinymce';
import 'tinymce/themes/silver';

let config = {
  selector: 'textarea.tinymce',
  menubar: true
};

export function init(){
  tinymce.init(config);
}

app.js with regular import (works)

import $ from 'jquery';
import {init} from './components/configTinymce';

$(function(){
  init();
});

app.js with deferred import (TinyMCE initializes but hides display)

import $ from 'jquery';

$(function(){
  if($('textarea.tinymce').length>0){
    import('./components/configTinymce').then((tm) => {
      console.log(tm);
      tm.init();
    });
  }
});

This is the tinyMCE html output after deferred import:

<div class="tox tox-tinymce" role="application" style="visibility: hidden; height: 200px;">
	<div class="tox-editor-container">
		<div class="tox-menubar" data-alloy-tabstop="true" role="menubar">
			<button aria-expanded="false" aria-haspopup="true" class="tox-mbtn tox-mbtn--select" data-alloy-tabstop="true"
			        role="menuitem" style="user-select: none;" tabindex="-1" type="button" unselectable="on"><span
					class="tox-mbtn__select-label">File</span>
				<div class="tox-mbtn__select-chevron">
					<svg height="10" width="10">
						<path
								d="M8.7 2.2c.3-.3.8-.3 1 0 .4.4.4.9 0 1.2L5.7 7.8c-.3.3-.9.3-1.2 0L.2 3.4a.8.8 0 0 1 0-1.2c.3-.3.8-.3 1.1 0L5 6l3.7-3.8z"
								fill-rule="nonzero"></path>
					</svg>
				</div>
			</button>
			<button aria-expanded="false" aria-haspopup="true" class="tox-mbtn tox-mbtn--select" data-alloy-tabstop="true"
			        role="menuitem" style="user-select: none;" tabindex="-1" type="button" unselectable="on"><span
					class="tox-mbtn__select-label">Edit</span>
				<div class="tox-mbtn__select-chevron">
					<svg height="10" width="10">
						<path
								d="M8.7 2.2c.3-.3.8-.3 1 0 .4.4.4.9 0 1.2L5.7 7.8c-.3.3-.9.3-1.2 0L.2 3.4a.8.8 0 0 1 0-1.2c.3-.3.8-.3 1.1 0L5 6l3.7-3.8z"
								fill-rule="nonzero"></path>
					</svg>
				</div>
			</button>
			<button aria-expanded="false" aria-haspopup="true" class="tox-mbtn tox-mbtn--select" data-alloy-tabstop="true"
			        role="menuitem" style="user-select: none;" tabindex="-1" type="button" unselectable="on"><span
					class="tox-mbtn__select-label">View</span>
				<div class="tox-mbtn__select-chevron">
					<svg height="10" width="10">
						<path
								d="M8.7 2.2c.3-.3.8-.3 1 0 .4.4.4.9 0 1.2L5.7 7.8c-.3.3-.9.3-1.2 0L.2 3.4a.8.8 0 0 1 0-1.2c.3-.3.8-.3 1.1 0L5 6l3.7-3.8z"
								fill-rule="nonzero"></path>
					</svg>
				</div>
			</button>
			<button aria-expanded="false" aria-haspopup="true" class="tox-mbtn tox-mbtn--select" data-alloy-tabstop="true"
			        role="menuitem" style="user-select: none;" tabindex="-1" type="button" unselectable="on"><span
					class="tox-mbtn__select-label">Format</span>
				<div class="tox-mbtn__select-chevron">
					<svg height="10" width="10">
						<path
								d="M8.7 2.2c.3-.3.8-.3 1 0 .4.4.4.9 0 1.2L5.7 7.8c-.3.3-.9.3-1.2 0L.2 3.4a.8.8 0 0 1 0-1.2c.3-.3.8-.3 1.1 0L5 6l3.7-3.8z"
								fill-rule="nonzero"></path>
					</svg>
				</div>
			</button>
		</div>
		<div class="tox-toolbar" role="group">
			<div class="tox-toolbar__group" data-alloy-tabstop="true" role="toolbar" tabindex="-1" title="history">
				<button aria-disabled="true" aria-label="Undo" class="tox-tbtn tox-tbtn--disabled" tabindex="-1" title="Undo"
				        type="button"><span class="tox-icon tox-tbtn__icon-wrap"><svg height="24" width="24"><path
						d="M6.4 8H12c3.7 0 6.2 2 6.8 5.1.6 2.7-.4 5.6-2.3 6.8a1 1 0 0 1-1-1.8c1.1-.6 1.8-2.7 1.4-4.6-.5-2.1-2.1-3.5-4.9-3.5H6.4l3.3 3.3a1 1 0 1 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 1.4L6.4 8z"
						fill-rule="nonzero"></path></svg></span></button>
				<button aria-disabled="true" aria-label="Redo" class="tox-tbtn tox-tbtn--disabled" tabindex="-1" title="Redo"
				        type="button"><span class="tox-icon tox-tbtn__icon-wrap"><svg height="24" width="24"><path
						d="M17.6 10H12c-2.8 0-4.4 1.4-4.9 3.5-.4 2 .3 4 1.4 4.6a1 1 0 1 1-1 1.8c-2-1.2-2.9-4.1-2.3-6.8.6-3 3-5.1 6.8-5.1h5.6l-3.3-3.3a1 1 0 1 1 1.4-1.4l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3z"
						fill-rule="nonzero"></path></svg></span></button>
			</div>
			<div class="tox-toolbar__group" data-alloy-tabstop="true" role="toolbar" tabindex="-1" title="styles">
				<button aria-expanded="false" aria-haspopup="true" aria-label="Formats"
				        class="tox-tbtn tox-tbtn--select tox-tbtn--bespoke" style="user-select: none;" tabindex="-1"
				        title="Formats" type="button" unselectable="on"><span class="tox-tbtn__select-label">Paragraph</span>
					<div class="tox-tbtn__select-chevron">
						<svg height="10" width="10">
							<path
									d="M8.7 2.2c.3-.3.8-.3 1 0 .4.4.4.9 0 1.2L5.7 7.8c-.3.3-.9.3-1.2 0L.2 3.4a.8.8 0 0 1 0-1.2c.3-.3.8-.3 1.1 0L5 6l3.7-3.8z"
									fill-rule="nonzero"></path>
						</svg>
					</div>
				</button>
			</div>
			<div class="tox-toolbar__group" data-alloy-tabstop="true" role="toolbar" tabindex="-1" title="formatting">
				<button aria-label="Bold" aria-pressed="false" class="tox-tbtn" tabindex="-1" title="Bold" type="button"><span
						class="tox-icon tox-tbtn__icon-wrap"><svg height="24" width="24"><path
						d="M7.8 19c-.3 0-.5 0-.6-.2l-.2-.5V5.7c0-.2 0-.4.2-.5l.6-.2h5c1.5 0 2.7.3 3.5 1 .7.6 1.1 1.4 1.1 2.5a3 3 0 0 1-.6 1.9c-.4.6-1 1-1.6 1.2.4.1.9.3 1.3.6s.8.7 1 1.2c.4.4.5 1 .5 1.6 0 1.3-.4 2.3-1.3 3-.8.7-2.1 1-3.8 1H7.8zm5-8.3c.6 0 1.2-.1 1.6-.5.4-.3.6-.7.6-1.3 0-1.1-.8-1.7-2.3-1.7H9.3v3.5h3.4zm.5 6c.7 0 1.3-.1 1.7-.4.4-.4.6-.9.6-1.5s-.2-1-.7-1.4c-.4-.3-1-.4-2-.4H9.4v3.8h4z"
						fill-rule="evenodd"></path></svg></span></button>
				<button aria-label="Italic" aria-pressed="false" class="tox-tbtn" tabindex="-1" title="Italic" type="button">
					<span class="tox-icon tox-tbtn__icon-wrap"><svg height="24" width="24"><path
							d="M16.7 4.7l-.1.9h-.3c-.6 0-1 0-1.4.3-.3.3-.4.6-.5 1.1l-2.1 9.8v.6c0 .5.4.8 1.4.8h.2l-.2.8H8l.2-.8h.2c1.1 0 1.8-.5 2-1.5l2-9.8.1-.5c0-.6-.4-.8-1.4-.8h-.3l.2-.9h5.8z"
							fill-rule="evenodd"></path></svg></span></button>
			</div>
			<div class="tox-toolbar__group" data-alloy-tabstop="true" role="toolbar" tabindex="-1" title="Alignment">
				<button aria-label="Align left" aria-pressed="false" class="tox-tbtn" tabindex="-1" title="Align left"
				        type="button"><span class="tox-icon tox-tbtn__icon-wrap"><svg height="24" width="24"><path
						d="M5 5h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm0 4h8c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm0 8h8c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2zm0-4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2z"
						fill-rule="evenodd"></path></svg></span></button>
				<button aria-label="Align center" aria-pressed="false" class="tox-tbtn" tabindex="-1" title="Align center"
				        type="button"><span class="tox-icon tox-tbtn__icon-wrap"><svg height="24" width="24"><path
						d="M5 5h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm3 4h8c.6 0 1 .4 1 1s-.4 1-1 1H8a1 1 0 1 1 0-2zm0 8h8c.6 0 1 .4 1 1s-.4 1-1 1H8a1 1 0 0 1 0-2zm-3-4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2z"
						fill-rule="evenodd"></path></svg></span></button>
				<button aria-label="Align right" aria-pressed="false" class="tox-tbtn" tabindex="-1" title="Align right"
				        type="button"><span class="tox-icon tox-tbtn__icon-wrap"><svg height="24" width="24"><path
						d="M5 5h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm6 4h8c.6 0 1 .4 1 1s-.4 1-1 1h-8a1 1 0 0 1 0-2zm0 8h8c.6 0 1 .4 1 1s-.4 1-1 1h-8a1 1 0 0 1 0-2zm-6-4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2z"
						fill-rule="evenodd"></path></svg></span></button>
				<button aria-label="Justify" aria-pressed="false" class="tox-tbtn" tabindex="-1" title="Justify" type="button">
					<span class="tox-icon tox-tbtn__icon-wrap"><svg height="24" width="24"><path
							d="M5 5h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm0 4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm0 4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2zm0 4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2z"
							fill-rule="evenodd"></path></svg></span></button>
			</div>
			<div class="tox-toolbar__group" data-alloy-tabstop="true" role="toolbar" tabindex="-1" title="indentation">
				<button aria-disabled="false" aria-label="Decrease indent" class="tox-tbtn" tabindex="-1"
				        title="Decrease indent" type="button"><span class="tox-icon tox-tbtn__icon-wrap"><svg height="24"
				                                                                                              width="24"><path
						d="M7 5h12c.6 0 1 .4 1 1s-.4 1-1 1H7a1 1 0 1 1 0-2zm5 4h7c.6 0 1 .4 1 1s-.4 1-1 1h-7a1 1 0 0 1 0-2zm0 4h7c.6 0 1 .4 1 1s-.4 1-1 1h-7a1 1 0 0 1 0-2zm-5 4h12a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm1.6-3.8a1 1 0 0 1-1.2 1.6l-3-2a1 1 0 0 1 0-1.6l3-2a1 1 0 0 1 1.2 1.6L6.8 12l1.8 1.2z"
						fill-rule="evenodd"></path></svg></span></button>
				<button aria-label="Increase indent" class="tox-tbtn" tabindex="-1" title="Increase indent" type="button"><span
						class="tox-icon tox-tbtn__icon-wrap"><svg height="24" width="24"><path
						d="M7 5h12c.6 0 1 .4 1 1s-.4 1-1 1H7a1 1 0 1 1 0-2zm5 4h7c.6 0 1 .4 1 1s-.4 1-1 1h-7a1 1 0 0 1 0-2zm0 4h7c.6 0 1 .4 1 1s-.4 1-1 1h-7a1 1 0 0 1 0-2zm-5 4h12a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm-2.6-3.8L6.2 12l-1.8-1.2a1 1 0 0 1 1.2-1.6l3 2a1 1 0 0 1 0 1.6l-3 2a1 1 0 1 1-1.2-1.6z"
						fill-rule="evenodd"></path></svg></span></button>
			</div>
		</div>
		<div class="tox-anchorbar"></div>
		<div class="tox-sidebar-wrap">
			<div class="tox-edit-area">
				<iframe allowtransparency="true" class="tox-edit-area__iframe" frameborder="0"
				        id="ci_form_chemical_description_ifr" title="Rich Text Area. Press ALT-0 for help."></iframe>
			</div>
			<div class="tox-sidebar" role="complementary">
				<div class="tox-sidebar__slider tox-sidebar--sliding-closed" data-alloy-tabstop="true" style="width: 0px;"
				     tabindex="-1">
					<div class="tox-sidebar__pane-container"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="tox-statusbar">
		<div class="tox-statusbar__text-container">
			<div class="tox-statusbar__path" data-alloy-tabstop="true" role="navigation"></div>
			<span class="tox-statusbar__branding"><a aria-label="Powered by Tiny"
			                                         href="https://www.tiny.cloud/?utm_campaign=editor_referral&amp;utm_medium=poweredby&amp;utm_source=tinymce&amp;utm_content=v5"
			                                         rel="noopener" tabindex="-1" target="_blank">Powered by Tiny</a></span>
		</div>
		<div class="tox-statusbar__resize-handle" title="Resize">
			<svg height="10" width="10">
				<g fill-rule="nonzero">
					<path
							d="M8.1 1.1A.5.5 0 1 1 9 2l-7 7A.5.5 0 1 1 1 8l7-7zM8.1 5.1A.5.5 0 1 1 9 6l-3 3A.5.5 0 1 1 5 8l3-3z"></path>
				</g>
			</svg>
		</div>
	</div>
	<div aria-hidden="true" class="tox-throbber" style="display: none;"></div>
</div>

What is the expected behavior?
TinyMCE should be visible

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

  • tinymce@5.0.13
  • webpack@4.39.2
  • framework: Symfony 4.3 with Encore-webpack
  • FireFox Developer 69.0b13 (64 bit)
  • CentOS 7
@dnagirl dnagirl changed the title deferred import in webpack produces hidden TinyMCE dynamic import in webpack produces hidden TinyMCE Aug 15, 2019
@TheSpyder
Copy link
Member

If the editor is in the page but hidden that suggests the styles haven't loaded (our technique for avoiding flash of unstyled editor is visibility: hidden; on the editor and visibility: inherit !important; via CSS). Check for network errors, perhaps a path is wrong somewhere.

Two questions:

  • Why do you need to import 'tinymce/themes/silver'; in your code? That shouldn't be required.
  • Your working example imports from ./components/configTinymce, the deferred example uses ./components/tinymce. Was this just a typo?

@dnagirl
Copy link
Author

dnagirl commented Aug 16, 2019

  • Why do you need to import 'tinymce/themes/silver'; in your code? That shouldn't be required.

I followed the instructions in the documentation for using ES2015 modules which said I needed to import a theme.

  • Your working example imports from ./components/configTinymce, the deferred example uses ./components/tinymce. Was this just a typo?

Yes, a typo. I've fixed it in the question.

Check for network errors, perhaps a path is wrong somewhere.

Will do. Thanks.

@dnagirl
Copy link
Author

dnagirl commented Aug 16, 2019

If the editor is in the page but hidden that suggests the styles haven't loaded (our technique for avoiding flash of unstyled editor is visibility: hidden; on the editor and visibility: inherit !important; via CSS). Check for network errors, perhaps a path is wrong somewhere.

I checked paths. When I do a regular import, the css is downloaded from the expected public/build directory (e.g. https://example.com/public/build/skins/contents/default/content.css). When I do a dynamic import, the css path is relative to the current webpage (e.g. https://example.com/somepage//skins/contents/default/content.css).

I tried removing the import 'tinymce/themes/silver'; line. That resulted in a 404 for https://example.com/somepage//themes/silver/theme.js. in both regular AND dynamic import cases.

@TheSpyder
Copy link
Member

TheSpyder commented Aug 19, 2019 •
edited

Ah, yes the ES2015 instructions assume you want to bundle the theme and plugins so they're imported directly. It's all related to baseurl calculations for loading resources from the server, I'm not sure how dynamic import operates at runtime but it might be difficult to resolve the public/build url we need.

I think we have a way to set the baseurl manually 🤔 I'll try to find some time this week to track that down for you.

@lnewson
Copy link
Contributor

lnewson commented May 4, 2020

Looks like the docs are missing the details about including the skins when using a module loader, so I'm going to move this to the docs repo to get that information added.

For reference, some others community member found a solution to import the skins that should work for you here: tinymce/tinymce#2836 (comment) or a variant that's more specific to angular, but should be able to be applied more broadly can be found here: tinymce/tinymce#4886 (comment)

If that doesn't work and you don't want to bundle the skins, then as @TheSpyder mentioned you'd need to manually set the base_url or skin_url to tell TinyMCE where to load the skins from.

@lnewson lnewson transferred this issue from tinymce/tinymce May 4, 2020
@lnewson lnewson mentioned this issue May 12, 2020
Closed
@lnewson lnewson mentioned this issue Aug 5, 2020
Closed
@lnewson lnewson mentioned this issue Oct 31, 2020
Closed
@lnewson lnewson mentioned this issue Jun 29, 2021
Closed
@tylerkelly13 tylerkelly13 mentioned this issue Jul 22, 2021
Merged
7 tasks
@tylerkelly13
Copy link
Contributor

Hi @dnagirl ,

We've replaced the old documentation. Our webpack instructions now provide instructions for ensuring the editor loads correctly.

Tyler

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@TheSpyder @dnagirl @lnewson @tylerkelly13