Fix page link and render line break

[tdloi]

• Fix page link as suggested in In-text links to other notion pages are broken #34 (comment)
• 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)

[tdloi]

This looks a bit hacky, should we wrap it inside span and use innerHTML?

[janniks]

👉 comment

[tdloi]

I add blocks param so we could map page title here, and since we only use blockMap, it's not possible to map user mention to username

[tdloi]

I'm thinking of adding some hooks here to allow changing page url, what do you think @timolins?
For example:

const pageUrl = hooks?.setPageUrl?.(decorator[1]) ?? decorator[1];
return (
    <a className="notion-link" href={pageUrl} key={i}>
    {element}
    </a>
);

This is useful for those want to map pageId to slug (me 😄 ):

      hooks={{
        setPageUrl: (pageId) => props.postsIndex?.[pageId] ?? pageId,
      }}

Some hooks I could think of:

• setLinkUrl: So you could extract block Id to add in page link
• setPageUrl: Change page url in case of using slug
• setBlockAttributes (not implemented): Add id attribute for a block so in page link could work, this also allow us to set id for block which has a link in page pointed to only, avoiding adding a bunch of id which will increase HTML file size by a lot. Could also use for foot notes.

[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 😄