Export default components so that they can be overriden easily

[utkuturunc]

Description

I'd like to be able to use custom components only for certain cases such as:

• Images/Videos that are from a certain source
• Certain Embed types

more examples could be found.

The idea

const components = useMemo(() => {
   Embed: (props) => {
       if (props.smt === 'criteria') { return <div>something</div> }
       return <defaultComponents.Embed {...props} />
   }
}, [...]);

Notion Test Page ID

N/A

[transitive-bullshit]

This is a great idea.

Some of the blocks already support this, and some don't. The challenge is just to create a common typed format and go through and replace all block usage with this type of pattern.

[bmitchinson]

For those looking for a shortcut to alter the attributes of <video> elements, you can use patch-package

• alter the files in node_modules/react-notion-x, from the root of your project that utilizes the react-notion-x library
  • Anywhere .createElement("video" is used, replace the following snippet with your desired attributes

Before:

// node_modules/react-notion-x/build/index.js
createElement("video", {
        playsInline: true,
        controls: true,
        preload: "metadata",
        style: assetStyle,
        src: source,
        title: block.type
      });

Example After:

// node_modules/react-notion-x/build/index.js
createElement("video", {
        autoPlay: true,
        playsInline: true,
        loop: true,
        muted: true,
        controls: false,
        preload: "metadata",
        style: assetStyle,
        src: source,
        title: block.type,
      });

• After changing the snippet across all files that have createElement("video" (8 files for v 6.16.0), run npx patch-package react-notion-x from the root of your project
• commit the generated patch/... files, so that others who npm install in the repo, get the same patches applied
• add the following postinstall script

"scripts": {
+  "postinstall": "patch-package"
 }

[AntoineDuComptoirDesPharmacies]

Same request here but extended to every component block (Text, Heading, ...).
Indeed, it will allow to instantiate a Notion page according to the design of the hosting website (with its components from storybook) without having to override/repeat all the CSS by hand.

[BougaCaillou]

Searching for a way to provide my own components for various types of blocks like previously mentioned (Text, Heading, ...), I found my way here, and looking at open PRs it seems like this one is promising.

I tested it in my projet and with very little tinkering was able to make this work for my workflow. At this time I use this as a drop-in replacement over react-notion-x (will see when/if this gets approved).
It looks like it didn't quit pass some checks regarding the minimal demo project, I wanted to look into it but was unable to (vercel causing me some trouble), although it might be a minimal issue.