New WPLink in Modal Window

[berengerzyla]

Hello!

I have an issue with the last WPLink.

I use an editor in a TinyMCE window (editor.windowManager.open), instantiated as follow:

$.extend( {}, tinyMCEPreInit.mceInit.content, {

	body_class: 'description',
	selector: '#description',
	toolbar1: 'bold,italic,link,unlink',
	toolbar2: '',
	toolbar3: '',
	toolbar4: '',
	theme_advanced_statusbar_location: 'none',
	elementpath: false,
	wpautop: false,
	remove_linebreaks: false,
	forced_root_block : "",
	apply_source_formatting: true

} );

This version doesn't work anymore (used to), for in wpview/plugin.js, it throws an error, as I want to edit without the p tags.

{{{Uncaught TypeError: first.getBoundingClientRect is not a function
line 243 of wpview/plugin.js.}}}

But even if I comment out wpautop and force_root_block in the initialization, the WPLink won't show up.
It gets populated (the link url is put into wp-link-preview), if I look at the DOM, but is not positioned and stays at display:none.

Any idea? Any tip on how I could debug that?

Thank you!

[berengerzyla]

Here is some more information about the context:

• The modal is tied to a button in the main editor, and then adds a shortcode/placeholder.
• The form of the modal is taken from a template.

Here is the opening segment:

editor.windowManager.open( {

  html: this.template_form( […] ),
  onpostRender: function() {

    var options = $.extend( {}, tinyMCEPreInit.mceInit.content, {

      body_class: 'description',
      selector: '#description',
      toolbar1: 'bold,italic,link,unlink',
      toolbar2: '',
      toolbar3: '',
      toolbar4: '',
      theme_advanced_statusbar_location: 'none',
      elementpath: false,
      wpautop: false,
      remove_linebreaks: false,
      forced_root_block : "",
      apply_source_formatting: true

    } );

    tinymce.init( options );
    tinyMCE.execCommand( 'mceAddEditor', false, 'description' );

  },
  onclose: function() {

    tinyMCE.execCommand( "mceRemoveEditor", false, 'description' );

  },

} );

… and a simple extract of my field in the template:

<div class="form-group row">
  <label class=col-sm-3 for=description>{{ data.labels.description }}</label>
  <div class=col-sm-9>
    <textarea class="form-control tinymce form-control-sm" name=description id=description rows="3">{{ data.values.description }}</textarea>
  </div>
</div>

[azaozz]

Looking again, still can't figure out what the problem is. The code that used to throw that error doesn't exist any more in wpview/plugin.js. From the wp-link popup not showing up it sounds like some code is not running. TinyMCE silences some errors in its plugins to prevent them from bringing the whole editor down.

In any case, this is now superseded by the block editor. Closing as maybelater. Feel free to reopen if you were able to figure out what the cause is. Adding another TinyMCE instance inside of a dialog of a TinyMCE instance seems like may be causing conflicts between the two instances.