📝 Content Updates – Updated Documentation on the List Field (#2183)

* TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * TinaCMS content update * allowing default settings to graphql – sometimes you may the response highlighted with the query as additional info * TinaCMS content update * adding a default-selected field to the graphql component * TinaCMS content update * TinaCMS content update * TinaCMS content update * wiring up the new schema into the component --------- Co-authored-by: tina-cloud-app[bot] <58178390+tina-cloud-app[bot]@users.noreply.github.com> Co-authored-by: Isaac Lombard <isaaclombard@ssw.com.au>
tinacms · Sep 18, 2024 · 0d5967a · 0d5967a
1 parent bf5f1af
commit 0d5967a
Show file tree

Hide file tree

Showing 14 changed files with 191 additions and 71 deletions.
diff --git a/components/tinaMarkdownComponents/docAndBlogComponents.tsx b/components/tinaMarkdownComponents/docAndBlogComponents.tsx
@@ -1,22 +1,22 @@
 import { GraphQLQueryResponseTabs } from 'components/ui/GraphQLQueryResponseTabs';
+import Image from 'next/image';
 import { useState } from 'react';
 import { BiRightArrowAlt } from 'react-icons/bi';
 import { FaMinus, FaPlus } from 'react-icons/fa';
 import { FiLink } from 'react-icons/fi';
 import {
-    TinaMarkdown,
-    Components,
-  } from 'tinacms/dist/rich-text'
+  Components,
+  TinaMarkdown,
+} from 'tinacms/dist/rich-text';
 import { getDocId } from 'utils/docs/getDocIds';
 import { WarningCallout } from 'utils/shortcodes';
-import { Prism } from '../styles/Prism'
-import Image from 'next/image';
+import { Prism } from '../styles/Prism';
 
 export const docAndBlogComponents: Components<{
     Iframe: { iframeSrc: string; height: string }
     Youtube: { embedSrc: string;}
     CreateAppCta: { ctaText: string; cliText: string }
-    GraphQLCodeBlock: { query: string, response: string }
+    GraphQLCodeBlock: { query: string, response: string, preselectResponse: boolean }
     Callout: {
       title: string
       description: string
@@ -226,10 +226,11 @@ export const docAndBlogComponents: Components<{
         />
       )
     },
-    GraphQLCodeBlock: ({ query, response }) => {
+    GraphQLCodeBlock: ({ query, response, preselectResponse }) => {
       return <GraphQLQueryResponseTabs 
         query={query} 
         response={response}
+        preselectResponse={preselectResponse}
       />
     },
     CustomFieldComponentDemo: () => (

diff --git a/components/ui/GraphQLQueryResponseTabs.tsx b/components/ui/GraphQLQueryResponseTabs.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react';
-import { Prism } from '../styles/Prism'
+import { Prism } from '../styles/Prism';
 
 export const GraphQLQueryResponseTabs = ({ ...props }) => {
 
-    const [isQuery, setIsQuery] = useState(true);
+    const [isQuery, setIsQuery] = useState(!props.preselectResponse);
 
     const buttonStyling = "flex justify-center relative leading-tight text-white mx-6 pt-[12px] pb-[10px] text-base font-medium transition duration-150 ease-out rounded-t-3xl flex items-center gap-1 font-tuner whitespace-nowrap px-2"
     const activeButtonStyling = " hover:-translate-y-px active:translate-y-px hover:-translate-x-px active:translate-x-px hover:text-gray-50 opacity-50 hover:opacity-100"

diff --git a/content/docs/editing/blocks.mdx b/content/docs/editing/blocks.mdx
@@ -1,7 +1,7 @@
 ---
 id: /docs/editing/blocks
 title: Block-based editing
-last_edited: '2024-08-15T00:21:26.449Z'
+last_edited: '2024-09-18T01:51:44.261Z'
 next: content/docs/editing/single-document-collections.mdx
 previous: content/docs/editing/markdown.mdx
 ---
@@ -12,9 +12,9 @@ Tina supports block-based editing, so that your editors can build out full pages
 
 Let's say you want your editors to build out a page, and you have 3 main "block" types to start:
 
-- a "Hero" block
-- a "Feature" block
-- a "Main Content" block
+* a "Hero" block
+* a "Feature" block
+* a "Main Content" block
 
 We want to allow our editors to use various blocks on each page.
 
@@ -195,6 +195,11 @@ The fragment names are automatically generated based on the collection name and
   ####}
   ##}
   }"
+<<<<<<< HEAD
+  preselectResponse={false}
+=======
+  preselectResponse={true}
+>>>>>>> de5f2c35126ddcbc14a0d8442990981632405a42
 />
 
 > For more info on how to query data with Tina's GraphQL API, check out the [Query Documentation](https://tina.io/docs/graphql/queries/)

diff --git a/content/docs/reference/types/boolean.mdx b/content/docs/reference/types/boolean.mdx
@@ -1,17 +1,19 @@
 ---
 title: The "boolean" field
-last_edited: '2021-07-27T15:51:56.737Z'
+last_edited: '2024-09-12T01:51:16.476Z'
+next: ''
+previous: ''
 ---
 
-## `boolean` type
+## `boolean` Type
 
 ```ts
 type BooleanField = {
   label: string
   name: string
   type: 'boolean'
-  /** See https://tina.io/docs/extending-tina/overview/ for customizing the UI **/
   list?: boolean
+  // See https://tina.io/docs/extending-tina/overview/ for customizing the UI
   ui?: {
     label?: string
     description?: string

diff --git a/content/docs/reference/types/datetime.mdx b/content/docs/reference/types/datetime.mdx
@@ -1,14 +1,19 @@
 ---
 title: The "datetime" field
-last_edited: '2021-07-27T15:51:56.737Z'
+last_edited: '2024-09-12T01:51:42.540Z'
+next: ''
+previous: ''
 ---
 
+## `datetime` Type
+
 ```ts
 type DatetimeField = {
   label: string
   name: string
   type: 'string'
-  /** See https://tina.io/docs/extending-tina/overview/ for customizing the UI **/
+  list?: boolean
+  // See https://tina.io/docs/extending-tina/overview/ for customizing the UI
   ui?: {
     dateFormat: string // eg 'YYYY MM DD'
     label?: string

diff --git a/content/docs/reference/types/image.mdx b/content/docs/reference/types/image.mdx
@@ -1,16 +1,19 @@
 ---
 title: The "image" field
-last_edited: '2022-06-15T15:51:56.737Z'
+last_edited: '2024-09-12T01:51:04.538Z'
+next: ''
+previous: ''
 ---
 
-# `image`
+## `image` Type
 
 ```ts
 type ImageField = {
   label: string
   name: string
   type: 'image'
-  /** See https://tina.io/docs/extending-tina/overview/ for customizing the UI **/
+  list?: boolean
+  // See https://tina.io/docs/extending-tina/overview/ for customizing the UI
   ui?: {
     label?: string
     description?: string

diff --git a/content/docs/reference/types/number.mdx b/content/docs/reference/types/number.mdx
@@ -1,19 +1,19 @@
 ---
 title: The "number" field
-last_edited: '2024-09-11T05:28:51.869Z'
+last_edited: '2024-09-12T01:52:02.407Z'
 next: ''
 previous: ''
 ---
 
-## `number` type
+## `number` Type
 
 ```ts
 type NumberField = {
   label: string
   name: string
   type: 'number'
-  /** See https://tina.io/docs/extending-tina/overview/ for customizing the UI **/
   list?: boolean
+  // See https://tina.io/docs/extending-tina/overview/ for customizing the UI
   ui?: {
     label?: string
     description?: string

diff --git a/content/docs/reference/types/object.mdx b/content/docs/reference/types/object.mdx
@@ -1,31 +1,30 @@
 ---
 title: The "object" field
-last_edited: '2021-07-27T15:51:56.737Z'
+last_edited: '2024-09-12T01:50:34.111Z'
 next: content/docs/reference/types/rich-text.mdx
 previous: content/docs/reference/types/reference.mdx
 ---
 
-# `object`
+## `object` Type
 
 ```ts
 type ObjectField = {
   label: string
   name: string
   type: 'object'
   list?: boolean
-  /** `fields OR `templates` may be provided, not both **/
+  // `fields` OR `templates` may be provided, not both
   fields?: Field[]
   templates?: Template[]
   /** Customize the default "_template" key that gets set
      in a document to identify a block-type.
      Only applicable when list: true **/
   templatesKey?: string
-  list?: boolean
-  /** See https://tina.io/docs/extending-tina/overview/ for customizing the UI **/
+  // See https://tina.io/docs/extending-tina/overview/ for customizing the UI
   ui?: {
-     /** Weather or not the Visual Selector  is enabled. See https://tina.io/docs/editing/blocks/#adding-a-visual-block-selector-experimental **/
+     // Whether or not the Visual Selector  is enabled. See https://tina.io/docs/editing/blocks/#adding-a-visual-block-selector-experimental
     visualSelector?: boolean,
-    // Note: defaultItem can only can be used when {list: true}
+    // defaultItem can only can be used when {list: true}
     defaultItem?: Record<string, any> | () => Record<string, any>,
     itemProps?(
       item: Record<string, any>
@@ -107,6 +106,29 @@ Tina will generate the appropriate component depending on the configuration prov
 
 ![](https://res.cloudinary.com/forestry-demo/image/upload/v1722381170/Screenshot_2024-07-31_at_9.12.43_AM_gahppr.png)
 
+### Using list object as a wrapper for other types
+
+Number, boolean, datetime and rich-text field types can be used in this way to add list options to the TinaCMS editor.
+
+Reference field types can be used in this way to create a list of references.
+
+```javascript
+{
+  label: "Author List",
+  name: "authorList",
+  type: "object",
+  list: true,      
+  fields: [
+    {
+      label: 'Author',
+      name: 'author',
+      type: 'reference',
+      collections: ['author'],
+    },
+  ]
+}
+```
+
 ### Using templates instead of fields
 
 ```javascript

diff --git a/content/docs/reference/types/reference.mdx b/content/docs/reference/types/reference.mdx
@@ -1,26 +1,26 @@
 ---
 title: The "reference" field
-last_edited: '2024-08-27T08:00:17.162Z'
+last_edited: '2024-09-12T01:50:26.823Z'
+next: ''
+previous: ''
 ---
 
-## `reference`
+## `reference` Type
 
 The `reference` field allows a "parent" document to connect to another document in different collection. This relationship only needs to be defined on *one side*.
 
 Once defined, the values of the *referenced* document become available to the parent.
 
-> Note: `reference` with `list: true` is not currently supported. See the "Temporary work around" section of [issue #2056](https://github.com/tinacms/tinacms/issues/2056) for a suggested approach to achieve a similar result
-
-## Object Definition
+> Note: `reference` with `list: true` is not currently supported. Object type lists can be used [as a wrapper](/docs/reference/types/object/#using-list-object-as-a-wrapper-for-other-types) around `reference` field types to create a list of references.
 
 ```ts
 type ReferenceField = {
   label: string
   name: string
   type: 'reference'
-  /** The `name` of another collection **/
+  // The `name` of another collection
   collections: string[]
-  /** See https://tina.io/docs/extending-tina/overview/ for customizing the UI **/
+  // See https://tina.io/docs/extending-tina/overview/ for customizing the UI
   ui?: {
     label?: string
     description?: string
@@ -145,7 +145,7 @@ You can search your reference with reference selector.
 
 The default reference selector displays the file path, there are cases where you may want to customize what is displayed in the dropdown to provide a better user experience. For example, showing the author's name instead of the file name can make the selection process more intuitive.
 
-Below are some examples on how to customize the  reference select using `ui.optionComponent`. 
+Below are some examples on how to customize the  reference select using `ui.optionComponent`.
 
 Check out [custom field](https://tina.io/docs/extending-tina/custom-field-components/) to lean more about `ui`.
 

diff --git a/content/docs/reference/types/rich-text.mdx b/content/docs/reference/types/rich-text.mdx
@@ -1,11 +1,11 @@
 ---
 title: The "rich-text" field
-last_edited: '2024-09-12T06:52:10.838Z'
+last_edited: '2024-09-18T01:54:13.946Z'
 next: ''
 previous: ''
 ---
 
-# `rich-text`
+## `rich-text` Type
 
 Tina's `rich-text` field leverages MDX so you can embed your own structured blocks. To render
 a `rich-text` field with React we recommend the `<TinaMarkdown>` component from `tinacms`. See [usage](/docs/editing/markdown/#rendering-content-with-tinamarkdown)
@@ -88,7 +88,54 @@ This is some text
 <Cta heading="Welcome" />
 ```
 
-## Using `TinaMarkdown`
+Results in the following response from the content API:
+
+<GraphQLCodeBlock
+  query="{
+  ##post(relativePath:#&#x22;voteForPedro.json&#x22;)#{
+  ####body
+  ##}
+  }"
+  response="{
+  ##&#x22;data&#x22;:#{
+  ####&#x22;post&#x22;:#{
+  ######&#x22;body&#x22;:#{
+  ########&#x22;type&#x22;:#&#x22;root&#x22;,
+  ########&#x22;children&#x22;:#[
+  ##########{
+  ############&#x22;type&#x22;:#&#x22;h2&#x22;,
+  ############&#x22;children&#x22;:#[
+  ##############{
+  ################&#x22;type&#x22;:#&#x22;text&#x22;,
+  ################&#x22;text&#x22;:#&#x22;Hello,#world!&#x22;
+  ##############}
+  ############]
+  ##########},
+  ##########{
+  ############&#x22;type&#x22;:#&#x22;p&#x22;,
+  ############&#x22;children&#x22;:#[
+  ##############{
+  ################&#x22;type&#x22;:#&#x22;text&#x22;,
+  ################&#x22;text&#x22;:#&#x22;This#is#some#text&#x22;
+  ##############}
+  ############]
+  ##########},
+  ##########{
+  ############&#x22;type&#x22;:#&#x22;mdxJsxFlowElement&#x22;,
+  ############&#x22;name&#x22;:#&#x22;Cta&#x22;,
+  ############&#x22;props&#x22;:#{
+  ##############&#x22;heading&#x22;:#&#x22;Welcome&#x22;
+  ############}
+  ##########}
+  ########]
+  ######}
+  ####}
+  ##}
+  }"
+  preselectResponse={true}
+/>
+
+## Using `TinaMarkdown`
 
 The `<TinaMarkdown>` component allows you to control how each element
 is rendered. You *must* provide a component for each template registered
@@ -213,3 +260,13 @@ Then you can create a `Date` component which returns `new Date().toLocaleString(
 
 In the above example, if you failed to add the `Cta` *template* in your schema definition, the JSX element
 will be treated as html
+
+## Other notes
+
+### Full Spec
+
+The full Tina MDX spec can be found [here](https://github.com/tinacms/tinacms/blob/main/packages/%40tinacms/mdx/spec.md "TinaCMS MDX Spec")
+
+### Default values
+
+If setting a default value for a rich-text field, you must provide the document AST. See [example here](/docs/schema/#default-value-for-rich-text)