portabletext/react-portabletext

How to target p paragraph elements

MartinConde opened this issue · 3 comments

I'm having trouble targeting the default p tags inside a Block. They are marked as span and as far as I can tell, based on the docs, I should be targeting those correctly. I'm obviously missing something though

The data:

"description": [
              {
                "_key": "0b71cdcbcc5a",
                "_type": "block",
                "children": [
                  {
                    "_key": "259de42897910",
                    "_type": "span",
                    "marks": [],
                    "text": "Some text to see if it works"
                  }
                ],
                "markDefs": [],
                "style": "normal"
              }
            ]

The components (ended up trying whatever I could think of):

const components = {
  block: {
    span: ({ children }) => <Text>{children}</Text>,
    bullet: ({ children }) => <Text>{children}</Text>,
    p: ({ children }) => <Text>{children}</Text>,
  },
  list: {
    bullet: ({ children }) => <View>{children}</View>,
    number: ({ children }) => <Text>{children}</Text>
  },
  listItem: {
    bullet: ({ children }) => <Text>{children}</Text>
  },
  marks: {
    em: ({children}) => <Text>{children}</Text>,
    span: ({children}) => <Text>{children}</Text>,
    p: ({children}) => <Text>{children}</Text>,
  },
};

Any ideas on where I'm going wrong here? It works just fine for Lists n stuff just somehow not the span / p tags

The only kinda alternative I found so far is using toPlainText which works but kinda curious if there is another way

Hi Martin!

It should be block.normal, eg:

const components = {
  block: {
    normal: ({ children }) => <Text>{children}</Text>,
  }
};

The block keys match the style property of a block. However, if the block is a list item, they will use the listItem.<listType> to render.

@rexxars I think it would help a lot to make the documentation a bit more clear in the github README file because I am sure it is a great library but just difficult to use it with the different elements. I have spend a lot of time figuring out how it works, and browsing closed pull requests.

A lot more people would use it if the documentation was more clear.

Thanks for the feedback, @davincios - would be happy to see a pull request improving the readme if you have time!