Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to target p paragraph elements #15

Closed
MartinConde opened this issue May 16, 2022 · 3 comments
Closed

How to target p paragraph elements #15

MartinConde opened this issue May 16, 2022 · 3 comments

Comments

@MartinConde
Copy link

MartinConde commented May 16, 2022

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

@rexxars
Copy link
Member

rexxars commented May 16, 2022

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 rexxars closed this as completed May 16, 2022
@davincios
Copy link

@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.

@rexxars
Copy link
Member

rexxars commented May 23, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants