portabletext/react-portabletext

PortableText components prop

Christian-Garrison opened this issue · 5 comments

Christian-Garrison commented

Issue

  • component props default state of PortableText is only rendering paragraphs for marks

Raw JSON from Sanity Block

"blockContent": [
  {
    "_key": "1e1e89d5cc17",
    "_type": "block",
    "children": [
      {
        "_key": "169646e523900",
        "_type": "span",
        "marks": [],
        "text": "Block Content"
      }
    ],
    "markDefs": [],
    "style": "h2"
  },
  {
    "_key": "2a0aeea4e378",
    "_type": "block",
    "children": [
      {
        "_key": "1875c0d851d2",
        "_type": "span",
        "marks": [],
        "text": ""
      }
    ],
    "markDefs": [],
    "style": "normal"
  },
  {
    "_key": "f6bd276c19e2",
    "_type": "block",
    "children": [
      {
        "_key": "a07c1c38620a",
        "_type": "span",
        "marks": [],
        "text": "\"Lorem ipsum dolor sit amet, "
      },
      {
        "_key": "555f100a0766",
        "_type": "span",
        "marks": [
          "fb9b93ad297e"
        ],
        "text": "consectetur"
      },
      {
        "_key": "c3c736570215",
        "_type": "span",
        "marks": [],
        "text": " adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore \"magna\" aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
      },
      {
        "_key": "6129277bb3a2",
        "_type": "span",
        "marks": [
          "917ed6187abc"
        ],
        "text": "Excepteur sint occaecat"
      },
      {
        "_key": "3245dd0eec72",
        "_type": "span",
        "marks": [],
        "text": " cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\""
      }
    ],
    "markDefs": [
      {
        "_key": "fb9b93ad297e",
        "_type": "link",
        "href": "https://google.com"
      },
      {
        "_key": "917ed6187abc",
        "_type": "link",
        "href": "#test"
      }
    ],
    "style": "normal"
  },
  {
    "_key": "cc1e07c03566",
    "_type": "block",
    "children": [
      {
        "_key": "9bfc7d0b8c3f",
        "_type": "span",
        "marks": [],
        "text": ""
      }
    ],
    "markDefs": [],
    "style": "normal"
  },
  {
    "_key": "f0c17447acb0",
    "_type": "block",
    "children": [
      {
        "_key": "1759fab50603",
        "_type": "span",
        "marks": [],
        "text": "Item One"
      }
    ],
    "level": 1,
    "listItem": "bullet",
    "markDefs": [],
    "style": "normal"
  },
  {
    "_key": "4197ac03d360",
    "_type": "block",
    "children": [
      {
        "_key": "6afd11704412",
        "_type": "span",
        "marks": [],
        "text": "Item Two"
      }
    ],
    "level": 1,
    "listItem": "bullet",
    "markDefs": [],
    "style": "normal"
  },
  {
    "_key": "2fa0377ac532",
    "_type": "block",
    "children": [
      {
        "_key": "0282e423c109",
        "_type": "span",
        "marks": [],
        "text": "Item Three"
      }
    ],
    "level": 1,
    "listItem": "bullet",
    "markDefs": [],
    "style": "normal"
  },
  {
    "_key": "4866c26a44d5",
    "_type": "block",
    "children": [
      {
        "_key": "05f9b12885e4",
        "_type": "span",
        "marks": [],
        "text": ""
      }
    ],
    "markDefs": [],
    "style": "normal"
  },
  {
    "_key": "10da741b2c38",
    "_type": "block",
    "children": [
      {
        "_key": "aeff8d2c1273",
        "_type": "span",
        "marks": [],
        "text": "Item One"
      }
    ],
    "level": 1,
    "listItem": "number",
    "markDefs": [],
    "style": "normal"
  },
  {
    "_key": "8db903e89207",
    "_type": "block",
    "children": [
      {
        "_key": "b638bffc6db0",
        "_type": "span",
        "marks": [],
        "text": "Item Two"
      }
    ],
    "level": 1,
    "listItem": "number",
    "markDefs": [],
    "style": "normal"
  },
  {
    "_key": "cb957b822bb6",
    "_type": "block",
    "children": [
      {
        "_key": "a6ffd8cef967",
        "_type": "span",
        "marks": [],
        "text": "Item Three"
      }
    ],
    "level": 1,
    "listItem": "number",
    "markDefs": [],
    "style": "normal"
  }
],

BlockContent Component using PortableText

// react | gatsby
import React from 'react';
// third-party
import { PortableText, PortableTextProps } from '@portabletext/react';
// styles
import styles from './BlockContent.module.scss';

export const BlockContent = ({ value }: PortableTextProps) => {
  return (
    <div className={styles.block_content}>
      <PortableText
        value={value}
        components={{
          marks: {
            link: ({ value, children }) => {
              const target = (value?.href || '').startsWith('http') ? '_blank' : undefined;
              return (
                <a href={value?.href} target={target} rel={target === '_blank' && 'noreferrer noopener'}>
                  {children}
                </a>
              );
            },
          },
          list: {
            bullet: ({ children }) => <ul style={{ listStyleType: 'disc' }}>{children}</ul>,
            number: ({ children }) => <ol style={{ listStyleType: 'number' }}>{children}</ol>,
          },
        }}
      />
    </div>
  );
};

What is rendered

<div>
  <h2>Block Content</h2>
  <p></p>
  <p>
    "Lorem ipsum dolor sit amet, <span class='unknown__pt__mark__fb9b93ad297e'>consectetur</span> adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore "magna" aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur.{' '}
    <span class='unknown__pt__mark__917ed6187abc'>Excepteur sint occaecat</span> cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum."
  </p>
  <p></p>
  <p>Item One</p>
  <p>Item Two</p>
  <p>Item Three</p>
  <p></p>
  <p>Item One</p>
  <p>Item Two</p>
  <p>Item Three</p>
</div>

Environment

  • "@portabletext/react": "^1.0.2"
  • "gatsby": "^4.7.1",
  • "gatsby-source-sanity": "^7.3.2",
  • "@sanity/all relative packages": "^2.27.0"
hdoro commented

Thank you for reporting with so much context, @Christian-Garrison!

I tried reproducing your issue in this CodeSandbox, but it's rendering properly. I used the block content value and components object you provided, what else may I be missing?

Could you remix the example I shared and try to reproduce the problem, please? Thanks in advance 😀

  • 👍1
Christian-Garrison commented

@hdoro Thanks for addressing the issue, I've remixed the CodeSandbox here with my use case. Seems to work properly as well.

I just attempted placing my data into a json file like I have in the CodeSandbox and it worked properly, however when sourcing the data (Sanity to Gatsby GraphQL) and passing it through to my component it sends all the blocks, but seems to be missing the markDefs. I looked in the GraphQL playground and the markDefs were not a query option available, should appear below list.

image

Notice the two console logs below for comparison.

CodeSandbox:

2: Object
_key: "f6bd276c19e2"
_type: "block"
children: Array(5)
markDefs: Array(2)
style: "normal"

Gatsby Application:

2:
children: (5) [{…}, {…}, {…}, {…}, {…}]
list: null
style: "normal"
_key: "f6bd276c19e2"
_type: "block"
[[Prototype]]: Object
Christian-Garrison commented

Possibly related to this issue through gatsby-source-sanity

Christian-Garrison commented

@hdoro This fixed the issue, looks like markDefs was only available via _rawBlockContent 👍🏼

query {
  sanitySiteSettings {
    _rawBlockContent
  }
}
  • 🎉1
rexxars commented

Glad you figured this out!