📝 Content Updates – Updated Documentation on the List Field

components/ui/GraphQLQueryResponseTabs.tsx

@@ -3,7 +3,7 @@ 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"

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

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

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

content/docs/reference/types/number.mdx

@@ -1,17 +1,19 @@
 ---
 title: The "number" field
-last_edited: '2021-07-27T15:51:56.737Z'
+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

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

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`.
 

content/docs/reference/types/rich-text.mdx

@@ -1,9 +1,11 @@
 ---
 title: The "rich-text" field
-last_edited: '2021-07-27T15:51:56.737Z'
+last_edited: '2024-09-17T04:35:32.776Z'
+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-object-object)
@@ -88,15 +90,54 @@ This is some text
 
 Results in the following response from the content API:
 
-<Iframe
-  iframeSrc="/api/graphiql/?query=%7B%0A%20%20post(relativePath%3A%20%22voteForPedro.json%22)%20%7B%0A%20%20%20%20body%0A%20%20%7D%0A%7D%0A&#x22; "
-  height={400}
+<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;
+  ############}
+  ##########}
+  ########]
+  ######}
+  ####}
+  ##}
+  }"
 />
 
 ## Using `TinaMarkdown`
 
 The `<TinaMarkdown>` component allows you to control how each element
-is rendered. You _must_ provide a component for each template registered
+is rendered. You *must* provide a component for each template registered
 in the `templates` property of your field definition. Note that you can also
 control rendering of built-in elements like `<h1>, <a>, <img>`
 
@@ -131,7 +172,7 @@ export default function MyPage(props) {
 }
 ```
 
----
+***
 
 ## Caveats
 
@@ -140,12 +181,12 @@ step, Tina's approach adds some constraints to make things work as expected.
 [Read more](/docs/editing/markdown/) about Tina's approach to handling markdown
 and MDX.
 
-### All content must be _serializable_
+### All content must be *serializable*
 
 When we say serializable, we mean that they must not be JavaScript expressions that would need to be executed at any point.
 
-- No support for `import`/`export`
-- No support for JavaScript expressions (eg. `const a = 2`, `console.log("Hello")`)
+* No support for `import`/`export`
+* No support for JavaScript expressions (eg. `const a = 2`, `console.log("Hello")`)
 
 For example:
 
@@ -163,23 +204,23 @@ Then you can create a `Date` component which returns `new Date().toLocaleString(
 
 ### All JSX must be registered as a `template`
 
-In the above example, if you failed to add the `Cta` _template_ in your schema definition, the JSX element
+In the above example, if you failed to add the `Cta` *template* in your schema definition, the JSX element
 will be treated as html
 
----
+***
 
 ## Handling markdown
 
 Since markdown is an open-format Tina does its best to handle the most common syntax's, but in some scenarios Tina will ignore or automatically alter content:
 
 ### Unsupported elements
 
-While most markdown features are supported out of the box, Tina will ignore elements that it cannot handle. We _do not_ expect to support the full [CommonMark](https://commonmark.org/) and
+While most markdown features are supported out of the box, Tina will ignore elements that it cannot handle. We *do not* expect to support the full [CommonMark](https://commonmark.org/) and
 [GitHub Flavored Markdown](https://github.github.com/gfm/) specs. Be sure to voice your support for various rich-text features by reaching out through one of our [community channels](/community/)!
 
-- Footnotes
-- Code blocks via indentation (use ` ``` ` instead)
-- Strikethrough
+* Footnotes
+* Code blocks via indentation (use ` ``` ` instead)
+* Strikethrough
 
 ### Automatic transforms
 
@@ -416,7 +457,7 @@ fields: [
 
 ### 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')
+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
 

content/docs/reference/types/string.mdx

@@ -1,9 +1,11 @@
 ---
 title: The "string" field
-last_edited: '2021-07-27T15:51:56.737Z'
+last_edited: '2024-09-12T01:52:13.442Z'
+next: ''
+previous: ''
 ---
 
-## `string` type
+## `string` Type
 
 ```ts
 type StringField = {
@@ -12,16 +14,16 @@ type StringField = {
   type: 'string'
   list?: boolean
   options?: (string | { value: string; label: string })[]
-  /** Represents the "body" of a markdown file **/
+  // Represents the "body" of a markdown file
   isBody?: 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?: {
     label?: string
     description?: string
     component?: FC<any> | string | null
     parse?: (value: string | string[], name: string, field: F) => any
     format?: (value: string | string[], name: string, field: F) => any
-    // Note: defaultItem can only can be used when {list: true}
+    // defaultItem can only can be used when {list: true}
     defaultItem?: () => string | string
     validate?(
       // string or string[] depends on list true or false