feat: open reference preview in new tab (#564)

Author: stevenle

.changeset/open-reference-cards-tab.md

@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': patch
+---
+
+feat: open reference field preview cards in new tab

docs/collections/Guide.schema.ts

@@ -51,6 +51,12 @@ export default schema.collection({
             {value: 'api', label: 'API'},
           ],
         }),
+        schema.reference({
+          id: 'nextGuide',
+          label: 'Next Guide',
+          help: 'Suggested reading next guide.',
+          collections: ['Guide'],
+        }),
       ],
     }),
 

docs/root-cms.d.ts

@@ -157,6 +157,8 @@ export interface GuideFields {
     image?: RootCMSImage;
     /** Category */
     category?: string;
+    /** Next Guide. Suggested reading next guide. */
+    nextGuide?: RootCMSReference;
   };
   /** Content */
   content?: {

packages/root-cms/ui/components/DocEditor/fields/ReferenceField.css

@@ -25,6 +25,8 @@
   padding: 8px;
   border: 1px solid var(--color-border);
   overflow: hidden;
+  text-decoration: none;
+  color: inherit;
 }
 
 .ReferenceField__DocCard__image {

packages/root-cms/ui/components/DocEditor/fields/ReferenceField.tsx

@@ -144,7 +144,11 @@ ReferenceField.DocCard = (props: {doc: any}) => {
     rootCollection.preview?.defaultImage;
 
   return (
-    <div className="ReferenceField__DocCard">
+    <a
+      className="ReferenceField__DocCard"
+      href={`/cms/content/${docId}`}
+      target="_blank"
+    >
       <div className="ReferenceField__DocCard__image">
         <Image
           src={previewImage?.src}
@@ -163,6 +167,6 @@ ReferenceField.DocCard = (props: {doc: any}) => {
           {previewTitle || '[UNTITLED]'}
         </div>
       </div>
-    </div>
+    </a>
   );
 };