Merge pull request NotionX#386 from NotionX/card-to-property-link

added feature where collection cards can link out to the url property

Author: normdoow

packages/react-notion-x/src/context.tsx

@@ -34,6 +34,7 @@ export interface NotionContext {
   showTableOfContents: boolean
   minTableOfContentsItems: number
   linkTableTitleProperties: boolean
+  isLinkCollectionToUrlProperty: boolean
 
   defaultPageIcon?: string
   defaultPageCover?: string
@@ -61,6 +62,7 @@ export interface PartialNotionContext {
   forceCustomImages?: boolean
   showCollectionViewDropdown?: boolean
   linkTableTitleProperties?: boolean
+  isLinkCollectionToUrlProperty?: boolean
 
   showTableOfContents?: boolean
   minTableOfContentsItems?: number
@@ -161,6 +163,7 @@ const defaultNotionContext: NotionContext = {
   forceCustomImages: false,
   showCollectionViewDropdown: true,
   linkTableTitleProperties: true,
+  isLinkCollectionToUrlProperty: false,
 
   showTableOfContents: false,
   minTableOfContentsItems: 3,

packages/react-notion-x/src/styles.css

@@ -2792,3 +2792,11 @@ svg.notion-page-icon {
 .notion-collection-view-dropdown-content[data-state='open'] {
   animation-name: slideDownAndFade;
 }
+
+.nested-form-link {
+  background: none!important;
+  border: none;
+  padding: 0!important;
+  text-decoration: underline;
+  cursor: pointer;
+}

packages/react-notion-x/src/third-party/collection-card.tsx

@@ -19,7 +19,13 @@ export const CollectionCard: React.FC<CollectionCardProps> = ({
   ...rest
 }) => {
   const ctx = useNotionContext()
-  const { components, recordMap, mapPageUrl, mapImageUrl } = ctx
+  const {
+    components,
+    recordMap,
+    mapPageUrl,
+    mapImageUrl,
+    isLinkCollectionToUrlProperty
+  } = ctx
   let coverContent = null
 
   const { page_cover_position = 0.5 } = block.format || {}
@@ -110,6 +116,76 @@ export const CollectionCard: React.FC<CollectionCardProps> = ({
       }
     }
   }
+  let linkProperties = []
+  //check if a visible property has a url and we settings are for linking to it for the card
+  if (isLinkCollectionToUrlProperty) {
+    linkProperties = properties
+      ?.filter(
+        (p) =>
+          p.visible && p.property !== 'title' && collection.schema[p.property]
+      )
+      .filter((p) => {
+        if (!block.properties) return null
+        const schema = collection.schema[p.property]
+
+        return schema.type == 'url'
+      })
+      .map((p) => {
+        return block.properties[p.property]
+      })
+  }
+  let url = null
+  if (
+    linkProperties.length > 0 &&
+    linkProperties[0].length > 0 &&
+    linkProperties[0][0].length > 0
+  ) {
+    url = linkProperties[0][0][0]
+  }
+
+  const innerCard = (
+    <>
+      {(coverContent || cover?.type !== 'none') && (
+        <div className='notion-collection-card-cover'>{coverContent}</div>
+      )}
+
+      <div className='notion-collection-card-body'>
+        <div className='notion-collection-card-property'>
+          <Property
+            schema={collection.schema.title}
+            data={block?.properties?.title}
+            block={block}
+            collection={collection}
+          />
+        </div>
+
+        {properties
+          ?.filter(
+            (p) =>
+              p.visible &&
+              p.property !== 'title' &&
+              collection.schema[p.property]
+          )
+          .map((p) => {
+            if (!block.properties) return null
+            const schema = collection.schema[p.property]
+            const data = block.properties[p.property]
+
+            return (
+              <div className='notion-collection-card-property' key={p.property}>
+                <Property
+                  schema={schema}
+                  data={data}
+                  block={block}
+                  collection={collection}
+                  inline
+                />
+              </div>
+            )
+          })}
+      </div>
+    </>
+  )
 
   return (
     <NotionContextProvider
@@ -118,61 +194,45 @@ export const CollectionCard: React.FC<CollectionCardProps> = ({
         ...ctx.components,
         // Disable <a> tabs in all child components so we don't create invalid DOM
         // trees with stacked <a> tags.
+        Link: (props) => {
+          return (
+            <form action={props.href} target='_blank'>
+              <input
+                type='submit'
+                value={props?.children?.props?.children ?? props.href}
+                className='nested-form-link notion-link'
+              />
+            </form>
+          )
+        },
         PageLink: dummyLink
       }}
     >
-      <components.PageLink
-        className={cs(
-          'notion-collection-card',
-          `notion-collection-card-size-${coverSize}`,
-          className
-        )}
-        href={mapPageUrl(block.id)}
-        {...rest}
-      >
-        {(coverContent || cover?.type !== 'none') && (
-          <div className='notion-collection-card-cover'>{coverContent}</div>
-        )}
-
-        <div className='notion-collection-card-body'>
-          <div className='notion-collection-card-property'>
-            <Property
-              schema={collection.schema.title}
-              data={block?.properties?.title}
-              block={block}
-              collection={collection}
-            />
-          </div>
-
-          {properties
-            ?.filter(
-              (p) =>
-                p.visible &&
-                p.property !== 'title' &&
-                collection.schema[p.property]
-            )
-            .map((p) => {
-              if (!block.properties) return null
-              const schema = collection.schema[p.property]
-              const data = block.properties[p.property]
-
-              return (
-                <div
-                  className='notion-collection-card-property'
-                  key={p.property}
-                >
-                  <Property
-                    schema={schema}
-                    data={data}
-                    block={block}
-                    collection={collection}
-                    inline
-                  />
-                </div>
-              )
-            })}
-        </div>
-      </components.PageLink>
+      {isLinkCollectionToUrlProperty && url ? (
+        <components.Link
+          className={cs(
+            'notion-collection-card',
+            `notion-collection-card-size-${coverSize}`,
+            className
+          )}
+          href={url}
+          {...rest}
+        >
+          {innerCard}
+        </components.Link>
+      ) : (
+        <components.PageLink
+          className={cs(
+            'notion-collection-card',
+            `notion-collection-card-size-${coverSize}`,
+            className
+          )}
+          href={mapPageUrl(block.id)}
+          {...rest}
+        >
+          {innerCard}
+        </components.PageLink>
+      )}
     </NotionContextProvider>
   )
 }