Fix page link and render line break

[tdloi]

• Fix page link as suggested in https://github.com/splitbee/react-notion/issues/34#issuecomment-704718005
• Fix not rendering new line when using Shift + Enter

Notion Page: https://www.notion.so/tdloi/Page-1-8ac0c155447d44d699fd8e8007d3ca69 Preview: https://csb-x51vy.netlify.app/ CodeSandbox source: https://codesandbox.io/s/laughing-frog-x51vy?file=/src/App.js (preview will not work because fail to install directly from Github repo, but deploy to Netlify work)

[tanishqkancharla]

I was worried my links would lead outside the block map I looked at, so I did this instead:

const PageTitle: React.FC<{ id: string }> = ({ id }) => {
  const [title, setTitle] = React.useState<null | string>(null)
  getPage(id).then((blockmap) => {
    setTitle(blockmap[id].value.properties?.title)
  })
  if (title) {
    return <a href={`/${id}`}>{title}</a>
  } else {
    return <a style={{ fontSize: '85%' }}>Loading...</a>
  }
}

[janniks]

I'll chime in, regarding the missing line-breaks: In vue-notion, we solved this via CSS white-space: pre-line (which collapses similarly to normal/default, but preserves line-breaks). I think it's a more simple fix than adding an \n parsing functionality with the complexity of adding more fragments.

src/style.css

.notion-callout-text {
  margin-left: 8px;
+  white-space: pre-line;
}

• ref: style.css in vue-notion

---

_{This comment is only regarding the line-break issue, NOT the page link issue}

[tdloi]

Sorry for late reply, I will close this PR as t's been a long time and I don't have time working on this Actually I didn't blog much :smile: