Text formatting not possible in Redactor fields

[elfacht]

Description

Using a Redactor field as Vizy element will break the link function. This error occurs with any link type (entry, asset, url).

https://user-images.githubusercontent.com/529443/138098830-1b653189-180c-46d0-bb5b-578c9c3096bd.mov

UPDATE

This happens to all formatting options in Redactor: bold, italic, tables etc. I guess the focussing is the problem.

Steps to reproduce

1. Set up a Vizy element including a Redactor field.
2. Use field and select text you want to link.
3. Use the field in a tab:

Additional info

• Plugin version: 1.0.7
• Craft version: 3.6.17
• Multi-site: No

Additional context

Redactor settings:

{
  "buttons": ["html","bold","italic","link"],
  "toolbarFixed": true,
  "linkNewTab": true,
  "linkNofollow": false,
  "linkSize": 200
}

[engram-design]

Yep, there are numerous known issues with Redactor. https://github.com/verbb/vizy/issues/12

I would recommend using CKEditor, or a nested Vizy field.

[elfacht]

@engram-design Unfortunately the CKEditor can't link to entries so this editor is kind of useless for editors.

[danwill]

@engram-design I too am having issues with apply formatting to a nested Redactor field. However, I stumbled across a workaround that may help to pinpoint the issue.

First, enable Redactor's fullscreen option by adding "fullscreen" to the plugins array in your Redactor config. Now, when editing a Redactor field inside a Vizy block, if you enable the fullscreen editing mode, formatting – including links – will be properly applied.

I first found this when trying to use Redactor's Table plugin within a Vizy block. I found I could add a table to the Redactor field, but after that, none of the other options (add row, add column, etc) would work – they were grayed out. Normally, if the cursor is inside a table, the table button will give you these options to manipulate the table structure. But after adding the table, Redactor didn't seem to be aware that a table existed. Activating fullscreen editing mode returns the expected functionality and allowed me to edit the structure again.

Happy to provide any other information to help sort this out.

[elfacht]

@danwill

First, enable Redactor's fullscreen option by adding "fullscreen" to the plugins array in your Redactor config. Now, when editing a Redactor field inside a Vizy block, if you enable the fullscreen editing mode, formatting – including links – will be properly applied.

That's clever and propably a good workaround, but far from ideal. Thanks for the hint!

[engram-design]

Nice find @danwill. Redactor is being an absolute pain as I can't figure out why its causing this issue. It seems to just be plain incompatible being used in Vue, but without the Redactor source to dive into, it makes it difficult.

Will keep at it, I know it's a roadblock for most people.

[danwill]

@engram-design, I looked into this a bit more and have a couple more leads to follow.

I think the base issue is that, when you click on a button in Redactor's toolbar, the top-level ProseMirror instance is setting itself as the selected element. To see this in action:

1. In a Vizy field, add a Vizy Block that includes a Redactor field.
2. Enter in some text, then select that text.
3. In DevTools, call window.getSelection() in the Console tab. It should return a Selection object referencing your selected text.
4. Now, with the text still selected, try clicking on the Bold button in the Redactor field.
5. You'll see no formatting was applied. If you call window.getSelection() again, you'll now get a Selection reference to div.ProseMirror

Redactor looks for the current selection to apply its inline formatting. Since ProseMirror appears to be setting itself as selected when the Redactor button is clicked, there is no valid selection for Redactor to apply its formatting to when it gets around to it.

And it's specifically on click. If you select the text again and use a cmd+b keyboard shortcut, you'll see that the bold formatting is applied without an issue.

If you want to drill into what exactly is happening within Redactor, look for the redactor.js file in DevTools > Sources. Then, search for $R.add('module', 'inline') and add a breakpoint on the var nodes = this.inline.format(args)' call in the format: function(args) definition (around line 14083 for me).

The first line in the format() function will try to grab the current selection before applying the formatting. Compare what you get back there if you use the toolbar button vs. the keyboard shortcut.

I tried to poke around ProseMirror to see what was going on, but unfortunately ran out of time. Hope this helps!

[engram-design]

Thanks for sharing your investigation here. I guess the tricky thing is that both Redactor and ProseMirror are technically selected, but Redactor should be capturing that. It's something clearly exclusive to Redactor as no other elements (jQuery-based or otherwise) have an issue with selection-trapping (clicking on an input in a Vizy block, CKEditor, etc).

Spending some more time this weekend on this issue.

[engram-design]

Alrighty, happy to say this should be fixed in 1.0.8. Thanks for your comments @danwill that certainly got me on the right track to nail down the issue.