Gutenberg Classic block - custom buttons insert shortcodes at start of post

[bobbingwide]

Issue Overview

I have a plugin ( called oik ) which provides 3 buttons for creating shortcodes in the Classic Visual editor and one Quicktag button for the Text Editor.
The TinyMCE buttons appear to work correctly in the Classic block.
Except the inserted shortcodes don't always get inserted where they're supposed to be.
More often than not they get inserted at the start of the block.

I would like to know what code changes I need to make to get the logic to work correctly, assuming this is going to be possible.

Steps to Reproduce (for bugs)

1. Install and activate the oik base plugin - from WordPress.org or https://github.com/bobbingwide/oik
2. Visit oik options > Buttons and select the Button shortcodes checkbox
3. Open the editor and create a Classic block
4. Type some text
5. Click on the Button - Insert bw_button shortcode
6. Click on Insert Button
7. Notice that the shortcode is inserted at the start of the block.

Expected Behavior

The shortcode should be inserted where the cursor was.

Current Behavior

More often than not the shortcode is inserted at the start of the block.

Possible Solution

I have no idea how to fix this.

My code currently uses

tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

It works, the shortcode is created, but I don't have any control over the insertion point.
I have tried to save the current location in a global variable and use this to reposition before the insertion. But the global variable is getting changed. I don't understand why.

Screenshots / Video

Related Issues and/or PRs

I discussed this with @youknowriad who was of the opinion "Custom TinyMCE buttons should still work like before in the classic block."

@azaozz suggested I open this issue having first given this explanation.

Generally Gutenberg loads two tinymce.js. One is the WP tinymce.min.js, the other is a different version "built-in" tinymce.js
The WP tinymce works as before, it's a global, etc. The Gutenberg is not.
So doing things like tinyMCE.activeEditor... will always fail as that is accessing the global/WP tinymce which is not used in Gutenberg
Think there was an issue about that, not sure what is happening with it
also about not loading two versions of tinymce.js

This might be related to #4754

My own issue is bobbingwide/oik#100

Todos

• Tests
• Documentation

[ZebulanStanphill]

This is still an issue right now in master (and therefore also the latest release: 3.1.1). I think this issue should be renamed to “Classic block - custom TinyMCE buttons insert shortcodes at start of block” to be less confusing.

[mtilly]

My plugin has this same issue, there is no control over the insert position. No matter where the cursor is currently positioned in the editor block, any insert goes to the top of the content. Please fix this before general release of Gutenberg as it is essential for backward compatibility.

[earnjam]

Similar to #10509

[bobbingwide]

With WordPress 5.0 beta5 my buttons are not working at all.
The Thick Box pop up does not appear for any of my shortcode buttons.
I'll need to investigate further with different combinations of WordPress and Gutenberg.

In one of the non-working environments a new div with ID TB_load is created each time I press the button.

[bobbingwide]

just to confirm i didn’t make any progress. something that appeared to work in February is only working in one environment where i’ve built a version of Gutenberg 4.0-RC2 locally.

[azaozz]

Ah, TB_load? There must be a myriad of newer/better/easier ways to make a modal :) Just a plain div + two lines of CSS and one line of js would do it (in modern browsers) :) Frankly I haven't looked at TB in many many years. It does some... pretty outdated things. I remember having to fix it couple of times but that was long ago. If you're seeing a div, that means it gets triggered. Maybe something's wrong with passing the "settings" to it, or perhaps the CSS?

More often than not they get inserted at the start of the block.

Think this is the same problem as in #10509. See #10509 (comment) for what triggers it (inconsistently). Working on a fix there.

[bobbingwide]

I've resolved the issue with my buttons not being displayed at all, for my laptop at least. thickbox.css was not being enqueued when using Gutenberg's block editor. This could be considered a backwards compatibility issue. I've already developed a workaround for oik. See bobbingwide/oik#100.

Let's hope the fix for #10509 applies to this as well.

[mtias]

Combining with #10509 so we have a single tracking point.