How to add id attribute to paragraph from structured text field?

How to add id attribute to paragraph from structured text field?

We want to assign different id for different section, so that we can create a table of contents block.

Hello @rashidul.islam.rana and welcome to the community!

We don’t support adding custom attributes on the structured text elements directly on the dashboard. However you may be interested in doing so through custom render rules, or through the use of a custom plugin

I guess it’s quite easy to add from DatoCMS end, instead of us writing the custom plugin?

How can I take input from the editor using custom plugin? I guess we can use modals, right?

I do this on the front end from the Structured Text field. Take a look my Blog post TOC. I apply ID’s to the heading elements inside structured text data and build a list with internal links…

export default function BlogPostToc({ body }) {
  const {t} = useTranslation();
  const scrollPosition = useScrollPosition();
  const elements = body?.value?.document?.children;
  const headings = [];
  for (var i = 0; i < elements.length; i++) {
    if(elements[i].type === 'heading' && elements[i].level === 2) headings.push(elements[i]);
  }

  return (
    <Box display={{ base: 'none', lg: 'block' }} id="sidebar">
      <Box>
        <Heading as="h4" fontSize="lg" mb={4} bg="blackAlpha.800" color="white" p={2} rounded="sm" display="inline-block">
          {t('BlogToc')}
        </Heading>
        <UnorderedList>
          {
            headings.map((h,i) => {
              const slug = slugify(h?.children[0]?.value);
              return (
                <ListItem key={slug}>
                  <Link href={`#${slug}`}>
                    { h?.children[0]?.value }
                  </Link>
                </ListItem>
              )
            })
          }
        </UnorderedList>
      </Box>
    </Box>
  )
}

And in the Structured Text rendering I use customNodeRules to apply the same ID to the heading nodes:

<StructuredText
  data={data.content}
  customNodeRules={[
    renderRule(
      isHeading,
      ({ node, children, key }) => {
        const Tag = `h${node.level}`;
        const slug = slugify(children[0].props.children[0]);
        return <Tag id={slug} className="post-heading" key={key}>{children}</Tag 
      },
    )
  ]}
/>
1 Like

we can render at the front end, already doing that. However, For editors, we need some way to copy the id and put as a link somewhere in structured text. And we don’t want to generate id for all paragraph’s title.

@rashidul.islam.rana sure, I understand. Would be useful for me as well for the same reason…

1 Like

@rashidul.islam.rana if you’d like you can open a feature request for the capability of generating paragraph ID directly inside the dashboard: ✋ Feature requests - DatoCMS community but for now unfortunately the only way to do so is through the definition of custom render rules