Feature Request: Add support for Matrix fields

[tricki]

Any chance you could add Matrix field support? We have all the main content of our pages in Matrix blocks, and right now it's almost impossible to include them with Bespoken.

I've looked through the code and think a change here might solve it: https://github.com/johnfmorton/craft-bespoken/blob/main/src/web/assets/bespokenassets/src/Bespoken.ts#L214

The IDs of the Matrix blocks look something like this: fields-blocks-entries-uid-59d40594-6931-40a8-bc1d-489c298aab8b-fields-text-field. blocks is the Matrix field's handle, text is the subfield's handle.

[johnfmorton]

I'll take a look at that and get back to you. Thanks for the question.

[johnfmorton]

@tricki,

Matrix field support seems straightforward when a Matrix field's view mode is set to "As inline-editable blocks."

Inline-editable blocks work with the plugin's existing methods. As you saw in the Typescript file you referenced, I use Javascript to go through the control panel to get the contents of each field. I'd considered getting each block through an API call to Craft, but I chose the Javascript method (for reasons I can explain if you're interested).

I will update the plugin to support Matrix fields with inline-editable blocks, but I'd like to know how you currently display your Matrix fields. I've only ever used inline blocks, but I don't want to assume this is how others do it.

I'm debating moving all of this processing to the server side in the long term. I'm still thinking through this, though, and I'm unsure if it's worthwhile.

[tricki]

Thanks for the quick response!

I've actually managed to get it to work myself, the fact that you're using JS made it a lot easier. But now I'm having some other problems, e.g. no spacing between list items.

I'm currently still evaluating if we're going to use ElevenLabs, but if we do I'll probably have a bunch of improvements. Right now I haven't made any specific optimizations (which is obvious in the resulting audio), but am still impressed with how simple it is. If we won't use it then I'll have at least the Matrix feature to contribute.

In my solution, I'm expecting fields to be defined in a specific format: matrix:matrixFieldHandle.subfieldHandle. And then I just loop through all those fields:

const matrixSubfields = document.querySelectorAll(`[id^="fields-${matrixHandle}-entries-uid"][id$="fields-${subfieldHandle}-field"]`);
matrixSubfields.forEach((field) => {
  text += _getFieldText(field) + " ";
});

This means it's not quite as flexible as others might need, but enough for our needs. I have to say I've never used the new Matrix field before, I'm more used to Neo, so I've got some learning and experimenting to do.

I'm curious why you'd like to move it to the server-side though, I see some advantages of doing it completely client-side.

[johnfmorton]

@tricki When I prepare the script for ElevenLabs, I process the text extensively. Look at the _ensureBlockFormatting function I have in the utils.ts file.

In my own use of the plugin, I had issues where ElevenLabs would run text together when elements (li, h2, etc.) didn't end with punctuation. To solve that, I go through CKEditor fields to find all block-level elements and add a hard stop to each one of them if the element did not already end with punctuation in the original text.

There is a final step in the script preparation that currently takes place server-side. If you dig into the settings of the plugin, you'll find the pronunciation fixes part of the plugin. This is where you can take an odd word, like "DDEV" and have "dee dev" swapped into the script before it goes to ElevenLabs.

The server-side processing would allow me to consolidate all of the script preparation in one place.

[johnfmorton]

@tricki - I should soon publish an update that supports Matrix fields. It's working in my local development environment. I need to write documentation for the update and do a few more tests.

The tricky part of Matrix field support was the different View Mode options that Matrix fields have. Based on an informal survey I ran in the Craft CMS Discord group, the As inline-editable blocks option is the most commonly used setting. Supporting that view mode setting required very little rework of the existing code. With minor tweaks, it just worked.

The other two view options, As cards and As an element index, were not as straightforward. Fields using those options don't display the content in the Matrix blocks in the control panel without some user interaction. As you noticed earlier, the plugin scrapes the content from the page using Javascript. That's not an option with Matrix field using those view options that don't display the content on the page.

The updated version of the plugin now uses an API call to get the content from the database for Matrix blocks that are set to use As cards and As an element index as their view mode.

The latest version of Craft (version 5.5) introduced a new wrinkle as well. Before Craft 5.5, nested elements were saved and there was no "draft" state for them. Getting their content from the API simply gave you the current content, with no draft state to worry about. That's changed in Craft 5.5, see this post for details on this change, because these nested entries can now have draft content.

I decided to use the "live" content, not the "draft" content.

The new version of Bespoken will get the "live" version of these nested entries, not the "draft" versions. I think this presents a slightly awkward user experience, but I hope the scenario where a person would have drafts of a nested entry in a Matrix is an edge case.

[johnfmorton]

@tricki I've published version 5.0.7 with support for Matrix fields. If you try it out, please let me know how it works for you. Feedback is welcome.