NotionX / NotionX/react-notion-x

Mirror Notion in hiding block_width "0" assets

Open
#550 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
5.4k
Forks
645
PR merge metrics
No merged PRs in 30d

Description

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-notion-x@6.16.0 for the project I'm working on.

Sometimes, images that seem 'deleted' in Notion are still in the blocks, but simply have a "block_width" of 0. This diff would hide those blocks to match Notion.

Here is the diff that solved my problem:

diff --git a/node_modules/react-notion-x/build/index.js b/node_modules/react-notion-x/build/index.js
index a18bcfd..1bc6916 100644
--- a/node_modules/react-notion-x/build/index.js
+++ b/node_modules/react-notion-x/build/index.js
@@ -1757,8 +1760,9 @@ var AssetWrapper = ({ blockId, block }) => {
       "notion-asset-wrapper",
       `notion-asset-wrapper-${block.type}`,
       ((_d = value.format) == null ? void 0 : _d.block_full_width) && "notion-asset-wrapper-full",
-    )
+    ),
+    style: ((_d = value.format) == null ? void 0 : _d.block_width) === 0 ? { display: "none" } : undefined,
   }, /* @__PURE__ */ React20.createElement(Asset, {
     block: value,
     zoomable: zoom && !isURL

This issue body was partially generated by patch-package.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at node_modules/react-notion-x/build/index.js and the AssetWrapper component shown in the issue. Reproduce a Notion image block with block_width 0 and verify it is hidden while other assets remain visible; no test file is named in the report.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.