Gutenberg Classic block - buttons insert shortcodes at start of post

[bobbingwide]

With the Gutenberg plugin, the Classic block editor can be used to create content as if you were in the TinyMCE editor.

The three different buttons that oik provides work unchanged, except for the last bit where the generated shortcode is pasted into the editor at the cursor position.

Expected result

The shortcode is pasted at the cursor position

Actual result

The shortcode is pasted at the start of the block

Explanation

The logic needs to cater for the fact that there could be multiple blocks.
It's currently using

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

Changing this one line to

editor.execCommand('mceInsertContent', 0, shortcode);

seemed to fix the problem for the button creator dialog and it appeared to work for both the new editor and the Classic editor ( which was nice ).

BUT... It doesn't work and I have very little idea what I need to do to fix it.

Problem determination

• If I go to the console and type the command directly then it does what I expect.
• The dialogues are displayed using ThickBox.
• If you simply escape from the dialog box then the cursor position is lost.
• I can only imagine that the editor loses track of the cursor position.

Whatever I seem to do it works fine in the Classic Editor but fails in the Classic block.

[bobbingwide]

In v4.0.0 the buttons do appear to work on some devices but not at all on others.
This applies to all three TinyMCE buttons.

Device	Browser	Works
iPad	Safari	No - dialog not displayed.
iPad	Chrome	No - dialog not displayed
iPad	Firefox	No - dialog not displayed
iPhone SE	?	Don’t even bother trying to use Gutenberg.

On the iPad, the only evidence that something was attempted is a scrolling barbershop pole which appears if you scroll the page down and the admin bar appears to have dropped down a bit as well.

[bobbingwide]

Screen capture on iPad showing 3 visible barbershops poles. I’d pressed each of the icons which invoke the dialog twice; PayPal, button, shortcode. Scrolling down shows 6 in all, but I couldn’t capture them. I suspect some polyfilling is necessary.

[bobbingwide]

The Add media button does work. So there’s some hope.

[bobbingwide]

With WordPress 5.0-beta5, Gutenberg 4.4, Classic Editor 0.5 the buttons no longer do anything on my new laptop running Edge. oik v3.2.5

[bobbingwide]

In v4.0.0 the buttons do appear to work on some devices but not at all on others.
This applies to all three TinyMCE buttons.

On the iPad, the only evidence that something was attempted is a scrolling barbershop pole which appears if you scroll the page down and the admin bar appears to have dropped down a bit as well.

The barbershop pole is created by the thick box Javascript code. We should retest with Gutenberg 4.0.0 to attempt to rediscover a version that ‘worked’ on laptops. Then, perhaps, update this comment.
#100 (comment)

[bobbingwide]

I ran parallel Javascript debugging tests of the working version on q.w/hm and the non-working version on s.b/wp498. On s.b, at the call to jQuery( '#TB_load' ).show(); the barbershop pole did not appear. This was because thickbox.js had not been enqueued. In q.w, thickbox was being enqueued by the Genesis framework.
Changing s.b to use Genesis or a Genesis child theme, resolved the non-display problem. Adding the following line of code to oik resolved the non-display problem for other themes.

add_action( 'admin_enqueue_scripts', 'add_thickbox' );

The buttons now work, but insertion where the cursor is located is still iffy.
Sometimes the shortcode is inserted in the right place, other times it's inserted at the beginning.

[bobbingwide]

This problem was resolved with WordPress/gutenberg#12415
I've tested it with Chrome on a Windows PC.