Getting Structured Text with custom blocks to render in Nuxt

[JLernDesign]

I’m trying to use Structured Text for a blog post that I am pulling into Nuxt that contains a custom block for Quote. I’ve found some documentation online and tried to follow the example but I am getting an error that says:

Error: The Structured Text document contains a ‘block’ node, but .blocks is not present!

My query is:

const QUERY = /* GraphQL */ `
  query {
    post(filter: { slug: { eq: "${slug}" } }) {
      content {
        value
        blocks {
          __typename
          ... on RecordInterface {
            __typename
          }
          ... on QuoteRecord {
            quoteText
          }
        }
      }
    }
  }
`;

My template code uses this to show the structured text:

<DatocmsStructuredText :data="page_data.content.value" :renderBlock="renderBlock" />

And then I have this function to handle the renderBlock:

const renderBlock = ({ record }) => {
  if (record.__typename === 'QuoteRecord') {
    console.log('place quote here');
  }
};

Any help is much appreciated!

[roger]

@JLernDesign does it help if you change the :data property to page_data.content instead of page_data.content.value?

[JLernDesign]

@roger Thanks for your response, that did help resolve the error.

I am wondering about one other thing related to Structured Text parsing. Is there any way to wrap the plain HTML text inside an element so I can group just the text that exists outside of the custom blocks?

So for example, if my structured text editor looked like this:

Can the portion of text outlined in red be wrapped in a tag so I can output it as its own block? Thanks for your help!

[roger]

Hey @JLernDesign, I’m not quite sure I fully understand your question, sorry. Could you please provide an example of the desired output you want from that (either in HTML, psuedocode, or just something you scribble on a napkin)?

I think what you’re asking for is the raw content of the body text, before it gets processed by our Structured Text renderer component…? If so, it should be in the GraphQL response, probably at page_data.content.value or maybe page_data.content?

I can’t remember off the top of my head if that gives you plain HTML or a JSON representation of the text. If it’s the latter and you need to convert it to HTML, you can run that through structured-text/packages/to-html-string at main · datocms/structured-text · GitHub to parse it from our format into normal HTML.

If you could please let me know your desired output in more detail, and also provide a link to the record in question, I can try to make a more specific example for you? But otherwise I hope the above helps a bit?

[roger]

Alternatively, if you’re trying to stay within our renderer but just wrap the body text output in another tag, maybe you can override its rendering? vue-datocms/src/components/StructuredText at master · datocms/vue-datocms · GitHub

I’m not sure what the node to override would be (maybe ‘root’?), but if you send me a link to the record, I can try to find out for you.

[JLernDesign]

Thanks for ideas @roger this is helping me figure out the best approach for my use case.

Basically the design I’m working with has a quote that breaks the margin of the rest of the grid. Here is a screen shot:

I was hoping I could create new blocks that would form before and after the quote block if there is a quote block inserted. I think I can achieve this with the structured-text-to-html converter and just split the string around the quote block.

I am also wondering if just using Modular blocks to build out the page would be more effective than using Structured Text. I just love how seamless the structured text experience is so I wanted to make that work.

[roger]

Hey @JLernDesign, if you can send me the link to the frontend code and the project in question, I can take a deeper look. Normally, you should be able to keep the structured text as the root component, and each of its child nodes (whether a DatoCMS block or a standard HTML thing like a blockquote) should be customizable through the node/block rendering overrides. For examples, you should be able to assign a custom classname (or even inline style override) to make the blockquote look how you want it. If you can send me a link to the code, I can make a quick example for you? (Feel free to DM me here or email us at support@datocms.com mentioning this thread).

The structured text is like a tree, and each child node or block is like a branch with its own sub-branches and leaf nodes. You can customize the display of each child without having them “rip them off and put them on another tree”, so to speak.

You shouldn’t have to reinvent the wheel by parsing out the HTML and then rebuilding it into components… the structured text component itself should be pretty customizable and extensible, and I’d be glad to try to help you find an easier way to make that quote line up, if you’d like