Skip to content

Instantly share code, notes, and snippets.

@rdsaunders
Last active August 24, 2021 14:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rdsaunders/f92dc225f3a10693a04fe549d44cd693 to your computer and use it in GitHub Desktop.
Save rdsaunders/f92dc225f3a10693a04fe549d44cd693 to your computer and use it in GitHub Desktop.

Composed item arrays to canvas conversion

The following document outlines the existing array behaviour in composers and how they could be tightly converted into the new format.

Text array

Existing text format

{
  "composer": [
    {
      "type": "textRepeatable",
      "value": ["Item one", "Item two", "Item three"]
    }
  ]
}

New text format

This could simply remain as is without the need to breaking it down.

{
  "composer": [
    {
      "type": "textRepeatable",
      "value": [
        {
          "type": "_text",
          "value": [
            {
              "type": "_fragment",
              "value": "Item one"
            }
          ]
        },
        {
          "type": "_text",
          "value": [
            {
              "type": "_fragment",
              "value": "Item two"
            }
          ]
        },
        {
          "type": "_text",
          "value": [
            {
              "type": "_fragment",
              "value": "Item three"
            }
          ]
        }
      ]
    }
  ]
}

Number array

Existing number format

{
  "composer": [
    {
      "type": "numberRepeatable",
      "value": [10, 11, 12]
    }
  ]
}

New number format

{
  "composer": [
    {
      "type": "numberRepeatable",
      "value": [
        {
          "type": "_number",
          "properties": {
            "type": "integer"
          },
          "value": 10
        },
        {
          "type": "_number",
          "properties": {
            "type": "integer"
          },
          "value": 11
        },
        {
          "type": "_number",
          "properties": {
            "type": "integer"
          },
          "value": 12
        }
      ]
    }
  ]
}

Decimal array

Existing decimal format

{
  "composer": [
    {
      "type": "numberRepeatable",
      "value": [10, 11, 12]
    }
  ]
}

New decimal format

{
  "composer": [
    {
      "type": "numberRepeatable",
      "value": [
        {
          "type": "_number",
          "properties": {
            "type": "decimal",
            "decimalPlaces": 2
          },
          "value": 10.00,
        },
        {
          "type": "_number",
          "properties": {
            "type": "decimal",
            "decimalPlaces": 2
          },
          "value": 11.00
        },
        {
          "type": "_number",
          "properties": {
            "type": "decimal",
            "decimalPlaces": 2
          },
          "value": 12.00
        }
      ]
    }
  ]
}

Markup array

Existing markup format

{
"composer": [
      {
        "type": "markupRepeatable",
        "value": [
          "<p>This is rich <em>text</em> with some <strong>styling</strong> one</p>",
          "<p>This is rich <em>text</em> with some <strong>styling</strong> two</p>",
          "<p>This is rich <em>text</em> with some <strong>styling</strong> three</p>"
        ]
      }
]
}

New markup format

Markdown would follow the same approach below, but with a format property of Markdown,

{
  "composer": [
    {
      "type": "markupRepeatable",
      "value": [
        {
          "type": "_markup",
          "properties": {
            "format": "html"
          },
          "value": "<p>This is rich <em>text</em> with some <strong>styling</strong> one</p>"
        },
        {
          "type": "_markup",
          "properties": {
            "format": "html"
          },
          "value": "<p>This is rich <em>text</em> with some <strong>styling</strong> two</p>"
        },
        {
          "type": "_markup",
          "properties": {
            "format": "html"
          },
          "value": "<p>This is rich <em>text</em> with some <strong>styling</strong> three</p>"
        }
      ]
    }
  ]
}

Alternatively we could treat HTML and markdown as first class types.

e.g rather that _markup with a format of HTML simply have a type of _html and _markdown

{
  "composer": [
    {
      "type": "markupRepeatable",
      "value": [
        {
          "type": "_html",
          "value": "<p>This is rich <em>text</em> with some <strong>styling</strong> one</p>"
        },
        {
          "type": "_html",
          "value": "<p>This is rich <em>text</em> with some <strong>styling</strong> two</p>"
        },
        {
          "type": "_html",
          "value": "<p>This is rich <em>text</em> with some <strong>styling</strong> three</p>"
        }
      ]
    }
  ]
}

Quote array

Existing quote format

{
  "composer": [
    {
      "type": "quoteRepeatable",
      "value": [
        {
          "text": "It always seems impossible until its done",
          "source": "Nelson Mandela"
        },
        {
          "text": "The people who are crazy enough to think they can change the world are the ones who do",
          "source": "Steve Jobs"
        }
      ]
    }
  ]
}

New quote format

{
  "composer": [
    {
      "type": "quoteRepeatable",
      "value": [
        {
          "type": "_quote",
          "properties": {
            "source": "Nelson Mandela",
            "cite": "https://www.brainyquote.com/quotes/nelson_mandela_378967"
          },
          "value": [
            {
              "type": "_fragment",
              "value": "It always seems impossible until its done"
            }
          ]
        },
        {
          "type": "_quote",
          "properties": {
            "source": "Steve Jobs",
            "cite": ""
          },
          "value": [
            {
              "type": "_fragment",
              "value": "The people who are crazy enough to think they can change the world are the ones who do"
            }
          ]
        }
      ]
    }
  ]
}

Location array

Existing location format

{
  "composer": [
    {
      "type": "locationRepeatable",
      "value": [
        { "lon": -3.17909, "lat": 51.481581000000013 },
        { "lon": -2.997664, "lat": 51.584151 },
        { "lon": -4.703579, "lat": 51.672738 }
      ]
    }
  ]
}

New location format

{
  "composer": [
    {
      "type": "locationRepeatable",
      "value": [
        {
          "type": "_location",
          "value": [
            {
              "lon": -3.17909,
              "lat": 51.481581000000013
            }
          ]
        },
        {
          "type": "_location",
          "value": [
            {
              "lon": -2.997664,
              "lat": 51.584151
            }
          ]
        },
        {
          "type": "_location",
          "value": [
            {
              "lon": -4.703579,
              "lat": 51.672738
            }
          ]
        }
      ]
    }
  ]
}

String array

This format reflects the multiple list selection. But is no different than that of the text array. Needs some thinking and discussion.

Existing string format

{
  "composer": [
    { 
      "type": "list",
      "value": ["Plum", "Orange", "Banana"]
    }
  ]
}

New string format

This is effectively the same as a repeatable text field but it lacks definition of being a set of selected list items (no good in the canvas editor) scenario.

{
  "composer": [
    {
      "type": "list",
      "value": [
        {
          "type": "_string",
          "value": "Plum"
        },
                {
          "type": "_string",
          "value": "Plum"
        },
        {
          "type": "_string",
          "value": "Plum"
        },
      ]
    }
  ]
}

Image array

Existing image array format

{
  "composer": [
    {
      "type": "multiImage",
      "value": [
        {
          "asset": {
            "altText": "A photo of Jon Maskrey.",
            "sys": {},
            "entryTitle": "jon-maskrey-blog-image",
            "entryDescription": null
          },
          "caption": "",
          "altText": "A photo of Jon Maskrey.",
          "transformations": null
        },
        {
          "asset": {
            "altText": "A photo of Olivia Turner.",
            "sys": {},
            "entryTitle": "liv-blog-headshot",
            "entryDescription": null
          },
          "caption": "",
          "altText": "A photo of Olivia Turner.",
          "transformations": null
        },
        {
          "asset": {
            "altText": "A photo of Ryan Bromley.",
            "sys": {},
            "entryTitle": "ryan-blog-image",
            "entryDescription": null
          },
          "caption": "",
          "altText": "A photo of Ryan Bromley.",
          "transformations": null
        }
      ]
    }
  ]
}

New image array format

{
  "type": "_imageArray",
  "properties": {
    "layout": "gallery, carousel"
  },
  "value": [
    {
      "type": "_image",
      "properties": {
        "caption": "",
        "altText": "A photo of Jon Maskrey.",
        "transformations": null
      },
      "value": {
        "altText": "A photo of Jon Maskrey.",
        "sys": {},
        "entryTitle": "jon-maskrey-blog-image",
        "entryDescription": null
      }
    },
    {
      "type": "_image",
      "properties": {
        "caption": "",
        "altText": "A photo of Ryan Bromley.",
        "transformations": null
      },
      "value": {
        "altText": "A photo of Ryan Bromley.",
        "sys": {},
        "entryTitle": "ryan-bromley-blog-image",
        "entryDescription": null
      }
    },
    {
      "type": "_image",
      "properties": {
        "caption": "",
        "altText": "A photo of Richard Saunders.",
        "transformations": null
      },
      "value": {
        "altText": "A photo of Richard Saunders.",
        "sys": {},
        "entryTitle": "richard-saunders-blog-image",
        "entryDescription": null
      }
    }
  ]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment