react-notion-x - npm Package Compare versions

Comparing version 4.2.19 to 4.2.20

build/cjs/block.js

@@ -27,4 +27,4 @@ "use strict";
 var Block = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
-    var _10 = context_1.useNotionContext(), components = _10.components, fullPage = _10.fullPage, darkMode = _10.darkMode, recordMap = _10.recordMap, mapPageUrl = _10.mapPageUrl, mapImageUrl = _10.mapImageUrl, showTableOfContents = _10.showTableOfContents, minTableOfContentsItems = _10.minTableOfContentsItems, defaultPageIcon = _10.defaultPageIcon, defaultPageCover = _10.defaultPageCover, defaultPageCoverPosition = _10.defaultPageCoverPosition;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
+    var _12 = context_1.useNotionContext(), components = _12.components, fullPage = _12.fullPage, darkMode = _12.darkMode, recordMap = _12.recordMap, mapPageUrl = _12.mapPageUrl, mapImageUrl = _12.mapImageUrl, showTableOfContents = _12.showTableOfContents, minTableOfContentsItems = _12.minTableOfContentsItems, defaultPageIcon = _12.defaultPageIcon, defaultPageCover = _12.defaultPageCover, defaultPageCoverPosition = _12.defaultPageCoverPosition;
     var block = props.block, children = props.children, level = props.level, className = props.className, bodyClassName = props.bodyClassName, footer = props.footer, pageHeader = props.pageHeader, pageFooter = props.pageFooter, pageAside = props.pageAside, pageCover = props.pageCover;
@@ -46,3 +46,3 @@ if (!block) {
             if (level === 0) {
-                var _11 = block.format || {}, _12 = _11.page_icon, page_icon = _12 === void 0 ? defaultPageIcon : _12, _13 = _11.page_cover, page_cover = _13 === void 0 ? defaultPageCover : _13, _14 = _11.page_cover_position, page_cover_position = _14 === void 0 ? defaultPageCoverPosition : _14, page_full_width = _11.page_full_width, page_small_text = _11.page_small_text;
+                var _13 = block.format || {}, _14 = _13.page_icon, page_icon = _14 === void 0 ? defaultPageIcon : _14, _15 = _13.page_cover, page_cover = _15 === void 0 ? defaultPageCover : _15, _16 = _13.page_cover_position, page_cover_position = _16 === void 0 ? defaultPageCoverPosition : _16, page_full_width = _13.page_full_width, page_small_text = _13.page_small_text;
                 if (fullPage) {
@@ -60,3 +60,3 @@ var properties = block.type === 'page'
                     var hasAside = (hasToc || pageAside) && !page_full_width;
-                    var _15 = react_1["default"].useState(null), activeSection_1 = _15[0], setActiveSection_1 = _15[1];
+                    var _17 = react_1["default"].useState(null), activeSection_1 = _17[0], setActiveSection_1 = _17[1];
                     var throttleMs = 100;
@@ -193,8 +193,8 @@ // this scrollspy logic was originally based on
         case 'text':
-            if (!block.properties) {
+            if (!block.properties && !((_f = block.content) === null || _f === void 0 ? void 0 : _f.length)) {
                 return react_1["default"].createElement("div", { className: utils_1.cs('notion-blank', blockId) }, "\u00A0");
             }
-            var blockColor = (_f = block.format) === null || _f === void 0 ? void 0 : _f.block_color;
+            var blockColor = (_g = block.format) === null || _g === void 0 ? void 0 : _g.block_color;
             return (react_1["default"].createElement("div", { className: utils_1.cs('notion-text', blockColor && "notion-" + blockColor, blockId) },
-                react_1["default"].createElement(text_1.Text, { value: block.properties.title, block: block }),
+                ((_h = block.properties) === null || _h === void 0 ? void 0 : _h.title) && (react_1["default"].createElement(text_1.Text, { value: block.properties.title, block: block })),
                 children && react_1["default"].createElement("div", { className: 'notion-text-children' }, children)));
@@ -218,3 +218,3 @@ case 'bulleted_list':
             }
-            var isTopLevel = block.type !== ((_h = (_g = recordMap.block[block.parent_id]) === null || _g === void 0 ? void 0 : _g.value) === null || _h === void 0 ? void 0 : _h.type);
+            var isTopLevel = block.type !== ((_k = (_j = recordMap.block[block.parent_id]) === null || _j === void 0 ? void 0 : _j.value) === null || _k === void 0 ? void 0 : _k.type);
             var start = utils_1.getListNumber(block.id, recordMap.block);
@@ -240,5 +240,5 @@ return isTopLevel ? wrapList(output, start) : output;
             var value = block;
-            return (react_1["default"].createElement("figure", { className: utils_1.cs('notion-asset-wrapper', "notion-asset-wrapper-" + block.type, ((_j = block.format) === null || _j === void 0 ? void 0 : _j.block_full_width) && 'notion-asset-wrapper-full', blockId) },
+            return (react_1["default"].createElement("figure", { className: utils_1.cs('notion-asset-wrapper', "notion-asset-wrapper-" + block.type, ((_l = block.format) === null || _l === void 0 ? void 0 : _l.block_full_width) && 'notion-asset-wrapper-full', blockId) },
                 react_1["default"].createElement(asset_1.Asset, { block: block }),
-                ((_k = value === null || value === void 0 ? void 0 : value.properties) === null || _k === void 0 ? void 0 : _k.caption) && (react_1["default"].createElement("figcaption", { className: 'notion-asset-caption' },
+                ((_m = value === null || value === void 0 ? void 0 : value.properties) === null || _m === void 0 ? void 0 : _m.caption) && (react_1["default"].createElement("figcaption", { className: 'notion-asset-caption' },
                     react_1["default"].createElement(text_1.Text, { value: block.properties.caption, block: block })))));
@@ -270,5 +270,5 @@ case 'drive':
             var spacerWidth = "min(32px, 4vw)";
-            var ratio = ((_l = block.format) === null || _l === void 0 ? void 0 : _l.column_ratio) || 0.5;
-            var parent_1 = (_m = recordMap.block[block.parent_id]) === null || _m === void 0 ? void 0 : _m.value;
-            var columns = ((_o = parent_1 === null || parent_1 === void 0 ? void 0 : parent_1.content) === null || _o === void 0 ? void 0 : _o.length) || Math.max(2, Math.ceil(1.0 / ratio));
+            var ratio = ((_o = block.format) === null || _o === void 0 ? void 0 : _o.column_ratio) || 0.5;
+            var parent_1 = (_p = recordMap.block[block.parent_id]) === null || _p === void 0 ? void 0 : _p.value;
+            var columns = ((_q = parent_1 === null || parent_1 === void 0 ? void 0 : parent_1.content) === null || _q === void 0 ? void 0 : _q.length) || Math.max(2, Math.ceil(1.0 / ratio));
             var width = "calc((100% - (" + (columns - 1) + " * " + spacerWidth + "px)) * " + ratio + ")";
@@ -282,3 +282,3 @@ var style = { width: width };
                 return null;
-            var blockColor_3 = (_p = block.format) === null || _p === void 0 ? void 0 : _p.block_color;
+            var blockColor_3 = (_r = block.format) === null || _r === void 0 ? void 0 : _r.block_color;
             return (react_1["default"].createElement("blockquote", { className: utils_1.cs('notion-quote', blockColor_3 && "notion-" + blockColor_3, blockId) },
@@ -290,11 +290,11 @@ react_1["default"].createElement(text_1.Text, { value: block.properties.title, block: block })));
         case 'callout':
-            return (react_1["default"].createElement("div", { className: utils_1.cs('notion-callout', ((_q = block.format) === null || _q === void 0 ? void 0 : _q.block_color) &&
-                    "notion-" + ((_r = block.format) === null || _r === void 0 ? void 0 : _r.block_color) + "_co", blockId) },
+            return (react_1["default"].createElement("div", { className: utils_1.cs('notion-callout', ((_s = block.format) === null || _s === void 0 ? void 0 : _s.block_color) &&
+                    "notion-" + ((_t = block.format) === null || _t === void 0 ? void 0 : _t.block_color) + "_co", blockId) },
                 react_1["default"].createElement(page_icon_1.PageIcon, { block: block }),
                 react_1["default"].createElement("div", { className: 'notion-callout-text' },
-                    react_1["default"].createElement(text_1.Text, { value: (_s = block.properties) === null || _s === void 0 ? void 0 : _s.title, block: block }))));
+                    react_1["default"].createElement(text_1.Text, { value: (_u = block.properties) === null || _u === void 0 ? void 0 : _u.title, block: block }))));
         case 'bookmark':
-            var title = notion_utils_1.getTextContent((_t = block.properties) === null || _t === void 0 ? void 0 : _t.title);
+            var title = notion_utils_1.getTextContent((_v = block.properties) === null || _v === void 0 ? void 0 : _v.title);
             if (!title) {
-                title = notion_utils_1.getTextContent((_u = block.properties) === null || _u === void 0 ? void 0 : _u.link);
+                title = notion_utils_1.getTextContent((_w = block.properties) === null || _w === void 0 ? void 0 : _w.link);
             }
@@ -313,18 +313,18 @@ if (title) {
             return (react_1["default"].createElement("div", { className: 'notion-row' },
-                react_1["default"].createElement(components.link, { target: '_blank', rel: 'noopener noreferrer', className: utils_1.cs('notion-bookmark', ((_v = block.format) === null || _v === void 0 ? void 0 : _v.block_color) && "notion-" + block.format.block_color, blockId), href: block.properties.link[0][0] },
+                react_1["default"].createElement(components.link, { target: '_blank', rel: 'noopener noreferrer', className: utils_1.cs('notion-bookmark', ((_x = block.format) === null || _x === void 0 ? void 0 : _x.block_color) && "notion-" + block.format.block_color, blockId), href: block.properties.link[0][0] },
                     react_1["default"].createElement("div", null,
                         title && (react_1["default"].createElement("div", { className: 'notion-bookmark-title' },
                             react_1["default"].createElement(text_1.Text, { value: [[title]], block: block }))),
-                        ((_w = block.properties) === null || _w === void 0 ? void 0 : _w.description) && (react_1["default"].createElement("div", { className: 'notion-bookmark-description' },
-                            react_1["default"].createElement(text_1.Text, { value: (_x = block.properties) === null || _x === void 0 ? void 0 : _x.description, block: block }))),
+                        ((_y = block.properties) === null || _y === void 0 ? void 0 : _y.description) && (react_1["default"].createElement("div", { className: 'notion-bookmark-description' },
+                            react_1["default"].createElement(text_1.Text, { value: (_z = block.properties) === null || _z === void 0 ? void 0 : _z.description, block: block }))),
                         react_1["default"].createElement("div", { className: 'notion-bookmark-link' },
-                            ((_y = block.format) === null || _y === void 0 ? void 0 : _y.bookmark_icon) && (react_1["default"].createElement(graceful_image_1.GracefulImage, { src: (_z = block.format) === null || _z === void 0 ? void 0 : _z.bookmark_icon, alt: title, loading: 'lazy' })),
+                            ((_0 = block.format) === null || _0 === void 0 ? void 0 : _0.bookmark_icon) && (react_1["default"].createElement(graceful_image_1.GracefulImage, { src: (_1 = block.format) === null || _1 === void 0 ? void 0 : _1.bookmark_icon, alt: title, loading: 'lazy' })),
                             react_1["default"].createElement("div", null,
-                                react_1["default"].createElement(text_1.Text, { value: (_0 = block.properties) === null || _0 === void 0 ? void 0 : _0.link, block: block })))),
-                    ((_1 = block.format) === null || _1 === void 0 ? void 0 : _1.bookmark_cover) && (react_1["default"].createElement("div", { className: 'notion-bookmark-image' },
-                        react_1["default"].createElement(graceful_image_1.GracefulImage, { src: (_2 = block.format) === null || _2 === void 0 ? void 0 : _2.bookmark_cover, alt: notion_utils_1.getTextContent((_3 = block.properties) === null || _3 === void 0 ? void 0 : _3.title), loading: 'lazy' }))))));
+                                react_1["default"].createElement(text_1.Text, { value: (_2 = block.properties) === null || _2 === void 0 ? void 0 : _2.link, block: block })))),
+                    ((_3 = block.format) === null || _3 === void 0 ? void 0 : _3.bookmark_cover) && (react_1["default"].createElement("div", { className: 'notion-bookmark-image' },
+                        react_1["default"].createElement(graceful_image_1.GracefulImage, { src: (_4 = block.format) === null || _4 === void 0 ? void 0 : _4.bookmark_cover, alt: notion_utils_1.getTextContent((_5 = block.properties) === null || _5 === void 0 ? void 0 : _5.title), loading: 'lazy' }))))));
         case 'toggle':
             return (react_1["default"].createElement("details", { className: utils_1.cs('notion-toggle', blockId) },
                 react_1["default"].createElement("summary", null,
-                    react_1["default"].createElement(text_1.Text, { value: (_4 = block.properties) === null || _4 === void 0 ? void 0 : _4.title, block: block })),
+                    react_1["default"].createElement(text_1.Text, { value: (_6 = block.properties) === null || _6 === void 0 ? void 0 : _6.title, block: block })),
                 react_1["default"].createElement("div", null, children)));
@@ -336,3 +336,3 @@ case 'table_of_contents': {
             var toc = notion_utils_1.getPageTableOfContents(page, recordMap);
-            var blockColor_4 = (_5 = block.format) === null || _5 === void 0 ? void 0 : _5.block_color;
+            var blockColor_4 = (_7 = block.format) === null || _7 === void 0 ? void 0 : _7.block_color;
             return (react_1["default"].createElement("div", { className: utils_1.cs('notion-table-of-contents', blockColor_4 && "notion-" + blockColor_4, blockId) }, toc.map(function (tocItem) { return (react_1["default"].createElement("a", { key: tocItem.id, href: "#" + notion_utils_1.uuidToId(tocItem.id), className: 'notion-table-of-contents-item' },
@@ -345,3 +345,3 @@ react_1["default"].createElement("span", { className: 'notion-table-of-contents-item-body', style: {
         case 'to_do':
-            var isChecked = ((_8 = (_7 = (_6 = block.properties) === null || _6 === void 0 ? void 0 : _6.checked) === null || _7 === void 0 ? void 0 : _7[0]) === null || _8 === void 0 ? void 0 : _8[0]) === 'Yes';
+            var isChecked = ((_10 = (_9 = (_8 = block.properties) === null || _8 === void 0 ? void 0 : _8.checked) === null || _9 === void 0 ? void 0 : _9[0]) === null || _10 === void 0 ? void 0 : _10[0]) === 'Yes';
             return (react_1["default"].createElement("div", { className: utils_1.cs('notion-to-do', blockId) },
@@ -351,3 +351,3 @@ react_1["default"].createElement("div", { className: 'notion-to-do-item' },
                     react_1["default"].createElement("div", { className: utils_1.cs('notion-to-do-body', isChecked && "notion-to-do-checked") },
-                        react_1["default"].createElement(text_1.Text, { value: (_9 = block.properties) === null || _9 === void 0 ? void 0 : _9.title, block: block }))),
+                        react_1["default"].createElement(text_1.Text, { value: (_11 = block.properties) === null || _11 === void 0 ? void 0 : _11.title, block: block }))),
                 react_1["default"].createElement("div", { className: 'notion-to-do-children' }, children)));
@@ -354,0 +354,0 @@ default:

build/cjs/components/asset.js

@@ -50,3 +50,3 @@ "use strict";
     var assetStyle = {};
-    console.log('asset', block);
+    // console.log('asset', block)
     if (block.format) {
@@ -53,0 +53,0 @@ var _k = block.format, block_aspect_ratio = _k.block_aspect_ratio, block_height = _k.block_height, block_width = _k.block_width, block_full_width = _k.block_full_width, block_page_width = _k.block_page_width, block_preserve_scale = _k.block_preserve_scale;

build/cjs/components/text.js

@@ -105,2 +105,5 @@ "use strict";
                     return react_1["default"].createElement(equation_1.Equation, { math: decorator[1] });
+                case 'm':
+                    // comment / discussion
+                    return null;
                 case 'a': {
@@ -107,0 +110,0 @@ var v = decorator[1];

build/esm/block.js

@@ -21,4 +21,4 @@ import React from 'react';
 export var Block = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
-    var _10 = useNotionContext(), components = _10.components, fullPage = _10.fullPage, darkMode = _10.darkMode, recordMap = _10.recordMap, mapPageUrl = _10.mapPageUrl, mapImageUrl = _10.mapImageUrl, showTableOfContents = _10.showTableOfContents, minTableOfContentsItems = _10.minTableOfContentsItems, defaultPageIcon = _10.defaultPageIcon, defaultPageCover = _10.defaultPageCover, defaultPageCoverPosition = _10.defaultPageCoverPosition;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
+    var _12 = useNotionContext(), components = _12.components, fullPage = _12.fullPage, darkMode = _12.darkMode, recordMap = _12.recordMap, mapPageUrl = _12.mapPageUrl, mapImageUrl = _12.mapImageUrl, showTableOfContents = _12.showTableOfContents, minTableOfContentsItems = _12.minTableOfContentsItems, defaultPageIcon = _12.defaultPageIcon, defaultPageCover = _12.defaultPageCover, defaultPageCoverPosition = _12.defaultPageCoverPosition;
     var block = props.block, children = props.children, level = props.level, className = props.className, bodyClassName = props.bodyClassName, footer = props.footer, pageHeader = props.pageHeader, pageFooter = props.pageFooter, pageAside = props.pageAside, pageCover = props.pageCover;
@@ -40,3 +40,3 @@ if (!block) {
             if (level === 0) {
-                var _11 = block.format || {}, _12 = _11.page_icon, page_icon = _12 === void 0 ? defaultPageIcon : _12, _13 = _11.page_cover, page_cover = _13 === void 0 ? defaultPageCover : _13, _14 = _11.page_cover_position, page_cover_position = _14 === void 0 ? defaultPageCoverPosition : _14, page_full_width = _11.page_full_width, page_small_text = _11.page_small_text;
+                var _13 = block.format || {}, _14 = _13.page_icon, page_icon = _14 === void 0 ? defaultPageIcon : _14, _15 = _13.page_cover, page_cover = _15 === void 0 ? defaultPageCover : _15, _16 = _13.page_cover_position, page_cover_position = _16 === void 0 ? defaultPageCoverPosition : _16, page_full_width = _13.page_full_width, page_small_text = _13.page_small_text;
                 if (fullPage) {
@@ -54,3 +54,3 @@ var properties = block.type === 'page'
                     var hasAside = (hasToc || pageAside) && !page_full_width;
-                    var _15 = React.useState(null), activeSection_1 = _15[0], setActiveSection_1 = _15[1];
+                    var _17 = React.useState(null), activeSection_1 = _17[0], setActiveSection_1 = _17[1];
                     var throttleMs = 100;
@@ -187,8 +187,8 @@ // this scrollspy logic was originally based on
         case 'text':
-            if (!block.properties) {
+            if (!block.properties && !((_f = block.content) === null || _f === void 0 ? void 0 : _f.length)) {
                 return React.createElement("div", { className: cs('notion-blank', blockId) }, "\u00A0");
             }
-            var blockColor = (_f = block.format) === null || _f === void 0 ? void 0 : _f.block_color;
+            var blockColor = (_g = block.format) === null || _g === void 0 ? void 0 : _g.block_color;
             return (React.createElement("div", { className: cs('notion-text', blockColor && "notion-" + blockColor, blockId) },
-                React.createElement(Text, { value: block.properties.title, block: block }),
+                ((_h = block.properties) === null || _h === void 0 ? void 0 : _h.title) && (React.createElement(Text, { value: block.properties.title, block: block })),
                 children && React.createElement("div", { className: 'notion-text-children' }, children)));
@@ -212,3 +212,3 @@ case 'bulleted_list':
             }
-            var isTopLevel = block.type !== ((_h = (_g = recordMap.block[block.parent_id]) === null || _g === void 0 ? void 0 : _g.value) === null || _h === void 0 ? void 0 : _h.type);
+            var isTopLevel = block.type !== ((_k = (_j = recordMap.block[block.parent_id]) === null || _j === void 0 ? void 0 : _j.value) === null || _k === void 0 ? void 0 : _k.type);
             var start = getListNumber(block.id, recordMap.block);
@@ -234,5 +234,5 @@ return isTopLevel ? wrapList(output, start) : output;
             var value = block;
-            return (React.createElement("figure", { className: cs('notion-asset-wrapper', "notion-asset-wrapper-" + block.type, ((_j = block.format) === null || _j === void 0 ? void 0 : _j.block_full_width) && 'notion-asset-wrapper-full', blockId) },
+            return (React.createElement("figure", { className: cs('notion-asset-wrapper', "notion-asset-wrapper-" + block.type, ((_l = block.format) === null || _l === void 0 ? void 0 : _l.block_full_width) && 'notion-asset-wrapper-full', blockId) },
                 React.createElement(Asset, { block: block }),
-                ((_k = value === null || value === void 0 ? void 0 : value.properties) === null || _k === void 0 ? void 0 : _k.caption) && (React.createElement("figcaption", { className: 'notion-asset-caption' },
+                ((_m = value === null || value === void 0 ? void 0 : value.properties) === null || _m === void 0 ? void 0 : _m.caption) && (React.createElement("figcaption", { className: 'notion-asset-caption' },
                     React.createElement(Text, { value: block.properties.caption, block: block })))));
@@ -264,5 +264,5 @@ case 'drive':
             var spacerWidth = "min(32px, 4vw)";
-            var ratio = ((_l = block.format) === null || _l === void 0 ? void 0 : _l.column_ratio) || 0.5;
-            var parent_1 = (_m = recordMap.block[block.parent_id]) === null || _m === void 0 ? void 0 : _m.value;
-            var columns = ((_o = parent_1 === null || parent_1 === void 0 ? void 0 : parent_1.content) === null || _o === void 0 ? void 0 : _o.length) || Math.max(2, Math.ceil(1.0 / ratio));
+            var ratio = ((_o = block.format) === null || _o === void 0 ? void 0 : _o.column_ratio) || 0.5;
+            var parent_1 = (_p = recordMap.block[block.parent_id]) === null || _p === void 0 ? void 0 : _p.value;
+            var columns = ((_q = parent_1 === null || parent_1 === void 0 ? void 0 : parent_1.content) === null || _q === void 0 ? void 0 : _q.length) || Math.max(2, Math.ceil(1.0 / ratio));
             var width = "calc((100% - (" + (columns - 1) + " * " + spacerWidth + "px)) * " + ratio + ")";
@@ -276,3 +276,3 @@ var style = { width: width };
                 return null;
-            var blockColor_3 = (_p = block.format) === null || _p === void 0 ? void 0 : _p.block_color;
+            var blockColor_3 = (_r = block.format) === null || _r === void 0 ? void 0 : _r.block_color;
             return (React.createElement("blockquote", { className: cs('notion-quote', blockColor_3 && "notion-" + blockColor_3, blockId) },
@@ -284,11 +284,11 @@ React.createElement(Text, { value: block.properties.title, block: block })));
         case 'callout':
-            return (React.createElement("div", { className: cs('notion-callout', ((_q = block.format) === null || _q === void 0 ? void 0 : _q.block_color) &&
-                    "notion-" + ((_r = block.format) === null || _r === void 0 ? void 0 : _r.block_color) + "_co", blockId) },
+            return (React.createElement("div", { className: cs('notion-callout', ((_s = block.format) === null || _s === void 0 ? void 0 : _s.block_color) &&
+                    "notion-" + ((_t = block.format) === null || _t === void 0 ? void 0 : _t.block_color) + "_co", blockId) },
                 React.createElement(PageIcon, { block: block }),
                 React.createElement("div", { className: 'notion-callout-text' },
-                    React.createElement(Text, { value: (_s = block.properties) === null || _s === void 0 ? void 0 : _s.title, block: block }))));
+                    React.createElement(Text, { value: (_u = block.properties) === null || _u === void 0 ? void 0 : _u.title, block: block }))));
         case 'bookmark':
-            var title = getTextContent((_t = block.properties) === null || _t === void 0 ? void 0 : _t.title);
+            var title = getTextContent((_v = block.properties) === null || _v === void 0 ? void 0 : _v.title);
             if (!title) {
-                title = getTextContent((_u = block.properties) === null || _u === void 0 ? void 0 : _u.link);
+                title = getTextContent((_w = block.properties) === null || _w === void 0 ? void 0 : _w.link);
             }
@@ -307,18 +307,18 @@ if (title) {
             return (React.createElement("div", { className: 'notion-row' },
-                React.createElement(components.link, { target: '_blank', rel: 'noopener noreferrer', className: cs('notion-bookmark', ((_v = block.format) === null || _v === void 0 ? void 0 : _v.block_color) && "notion-" + block.format.block_color, blockId), href: block.properties.link[0][0] },
+                React.createElement(components.link, { target: '_blank', rel: 'noopener noreferrer', className: cs('notion-bookmark', ((_x = block.format) === null || _x === void 0 ? void 0 : _x.block_color) && "notion-" + block.format.block_color, blockId), href: block.properties.link[0][0] },
                     React.createElement("div", null,
                         title && (React.createElement("div", { className: 'notion-bookmark-title' },
                             React.createElement(Text, { value: [[title]], block: block }))),
-                        ((_w = block.properties) === null || _w === void 0 ? void 0 : _w.description) && (React.createElement("div", { className: 'notion-bookmark-description' },
-                            React.createElement(Text, { value: (_x = block.properties) === null || _x === void 0 ? void 0 : _x.description, block: block }))),
+                        ((_y = block.properties) === null || _y === void 0 ? void 0 : _y.description) && (React.createElement("div", { className: 'notion-bookmark-description' },
+                            React.createElement(Text, { value: (_z = block.properties) === null || _z === void 0 ? void 0 : _z.description, block: block }))),
                         React.createElement("div", { className: 'notion-bookmark-link' },
-                            ((_y = block.format) === null || _y === void 0 ? void 0 : _y.bookmark_icon) && (React.createElement(GracefulImage, { src: (_z = block.format) === null || _z === void 0 ? void 0 : _z.bookmark_icon, alt: title, loading: 'lazy' })),
+                            ((_0 = block.format) === null || _0 === void 0 ? void 0 : _0.bookmark_icon) && (React.createElement(GracefulImage, { src: (_1 = block.format) === null || _1 === void 0 ? void 0 : _1.bookmark_icon, alt: title, loading: 'lazy' })),
                             React.createElement("div", null,
-                                React.createElement(Text, { value: (_0 = block.properties) === null || _0 === void 0 ? void 0 : _0.link, block: block })))),
-                    ((_1 = block.format) === null || _1 === void 0 ? void 0 : _1.bookmark_cover) && (React.createElement("div", { className: 'notion-bookmark-image' },
-                        React.createElement(GracefulImage, { src: (_2 = block.format) === null || _2 === void 0 ? void 0 : _2.bookmark_cover, alt: getTextContent((_3 = block.properties) === null || _3 === void 0 ? void 0 : _3.title), loading: 'lazy' }))))));
+                                React.createElement(Text, { value: (_2 = block.properties) === null || _2 === void 0 ? void 0 : _2.link, block: block })))),
+                    ((_3 = block.format) === null || _3 === void 0 ? void 0 : _3.bookmark_cover) && (React.createElement("div", { className: 'notion-bookmark-image' },
+                        React.createElement(GracefulImage, { src: (_4 = block.format) === null || _4 === void 0 ? void 0 : _4.bookmark_cover, alt: getTextContent((_5 = block.properties) === null || _5 === void 0 ? void 0 : _5.title), loading: 'lazy' }))))));
         case 'toggle':
             return (React.createElement("details", { className: cs('notion-toggle', blockId) },
                 React.createElement("summary", null,
-                    React.createElement(Text, { value: (_4 = block.properties) === null || _4 === void 0 ? void 0 : _4.title, block: block })),
+                    React.createElement(Text, { value: (_6 = block.properties) === null || _6 === void 0 ? void 0 : _6.title, block: block })),
                 React.createElement("div", null, children)));
@@ -330,3 +330,3 @@ case 'table_of_contents': {
             var toc = getPageTableOfContents(page, recordMap);
-            var blockColor_4 = (_5 = block.format) === null || _5 === void 0 ? void 0 : _5.block_color;
+            var blockColor_4 = (_7 = block.format) === null || _7 === void 0 ? void 0 : _7.block_color;
             return (React.createElement("div", { className: cs('notion-table-of-contents', blockColor_4 && "notion-" + blockColor_4, blockId) }, toc.map(function (tocItem) { return (React.createElement("a", { key: tocItem.id, href: "#" + uuidToId(tocItem.id), className: 'notion-table-of-contents-item' },
@@ -339,3 +339,3 @@ React.createElement("span", { className: 'notion-table-of-contents-item-body', style: {
         case 'to_do':
-            var isChecked = ((_8 = (_7 = (_6 = block.properties) === null || _6 === void 0 ? void 0 : _6.checked) === null || _7 === void 0 ? void 0 : _7[0]) === null || _8 === void 0 ? void 0 : _8[0]) === 'Yes';
+            var isChecked = ((_10 = (_9 = (_8 = block.properties) === null || _8 === void 0 ? void 0 : _8.checked) === null || _9 === void 0 ? void 0 : _9[0]) === null || _10 === void 0 ? void 0 : _10[0]) === 'Yes';
             return (React.createElement("div", { className: cs('notion-to-do', blockId) },
@@ -345,3 +345,3 @@ React.createElement("div", { className: 'notion-to-do-item' },
                     React.createElement("div", { className: cs('notion-to-do-body', isChecked && "notion-to-do-checked") },
-                        React.createElement(Text, { value: (_9 = block.properties) === null || _9 === void 0 ? void 0 : _9.title, block: block }))),
+                        React.createElement(Text, { value: (_11 = block.properties) === null || _11 === void 0 ? void 0 : _11.title, block: block }))),
                 React.createElement("div", { className: 'notion-to-do-children' }, children)));
@@ -348,0 +348,0 @@ default:

build/esm/components/asset.js

@@ -44,3 +44,3 @@ var __assign = (this && this.__assign) || function () {
     var assetStyle = {};
-    console.log('asset', block);
+    // console.log('asset', block)
     if (block.format) {
@@ -47,0 +47,0 @@ var _k = block.format, block_aspect_ratio = _k.block_aspect_ratio, block_height = _k.block_height, block_width = _k.block_width, block_full_width = _k.block_full_width, block_page_width = _k.block_page_width, block_preserve_scale = _k.block_preserve_scale;

build/esm/components/text.js

@@ -99,2 +99,5 @@ var __assign = (this && this.__assign) || function () {
                     return React.createElement(Equation, { math: decorator[1] });
+                case 'm':
+                    // comment / discussion
+                    return null;
                 case 'a': {
@@ -101,0 +104,0 @@ var v = decorator[1];

package.json

 {
   "name": "react-notion-x",
-  "version": "4.2.19",
+  "version": "4.2.20",
   "description": "Fast and accurate React renderer for Notion.",
@@ -27,4 +27,4 @@ "repository": "NotionX/react-notion-x",
     "medium-zoom": "^1.0.6",
-    "notion-types": "^4.2.18",
-    "notion-utils": "^4.2.18",
+    "notion-types": "^4.2.20",
+    "notion-utils": "^4.2.20",
     "prismjs": "^1.20.0",
@@ -54,3 +54,3 @@ "rc-dropdown": "^3.1.2",
   },
-  "gitHead": "192ee4090a523561932d5ba463960ff0f0ca20d8"
+  "gitHead": "ddab2f0a11f797a7fc2ba11a3a682587d4bdff74"
 }

No alert changes

Improved metrics

Total package byte prevSize

1451619

0.06%

Lines of code

13732

0.08%

Dependency changes

• Updated

  notion-types@^4.2.20

• Updated

  notion-utils@^4.2.20