New Input validation options

This release added several new Input validation keys, a template HTML element and better default behavior for Array Editable Regions, and support for square brackets in data-prop key.

It also addressed several issues, including those affecting Component Editable Regions where data-prop referenced an external file, the Avatars list when collaboratively editing a file, and the image cropper in File Inputs.

Features & Improvements#

• Added the min_graphemes, min_graphemes_message, max_graphemes, max_graphemes_message, min_words, min_words_message, max_words, max_words_message, and locale configuration keys for Input validation. These keys are available for Code, Color, File, Select, Text, Rich Text, and URL Inputs. To use this key in a Select Input, allow_create must be set to true.
  • The min_graphemes and max_graphemes keys define the string length, in graphemes, that CloudCannon will allow in an Input. The min_graphemes_message and max_graphemes_message keys define custom error messages that explain why a value has failed the validation criteria.
  • The min_words and max_words keys define the string length, in words, that CloudCannon will allow in an Input. The min_words_message and max_words_message keys define custom error messages that explain why a value has failed the validation criteria.
  • The locale key defines which language CloudCannon should use to determine a single grapheme or word. This key accepts a single language subtag.

_inputs:
  description:
    type: markdown
    options:
      min_words: 1
      max_words: 10
      locale: jp
  caption:
    type: markdown
    options:
      min_graphemes: 1
      max_graphemes: 10
      locale: en-US

{
  "_inputs": {
    "description": {
      "type": "markdown",
      "options": {
        "min_words": 1,
        "max_words": 10,
        "locale": "jp"
      }
    },
    "caption": {
      "type": "markdown",
      "options": {
        "min_graphemes": 1,
        "max_graphemes": 10,
        "locale": "en-US"
      }
    }
  }
}

• For Array Editable Regions, you can now use <template> HTML elements to populate new array items rather than registering components. You can add the data-id attribute to each <template> element, allowing you to define several array item templates.

<editable-array data-prop="my_array" data-id-key="_name">
	<template data-id="hero">
		<h1 data-editable="text" data-prop="title"></h1>
	</template>
	<template data-id="testimonials">
		<div>
			<p data-editable="text" data-prop="message"></p>
		</div>
	</template>
	...
</editable-array>

• For Array Editable Regions in complex arrays or page building, CloudCannon will now use the value of data-component-key and data-component as the value for data-id-key and data-id by default, when the latter are undefined.
• Editable Regions now support [] square brackets in the file path for @file, @data, and @collection special values for data-prop. If your file path contains a single set of [] brackets, you can surround the file path with double [[]] brackets.

Fixes#

• Fixed an issue where Component Editable Regions did not populate correctly when data-prop was an external file.
• Fixed an issue where switching which person was editing a file would make everyone appear to have the same avatar in the Avatars list in the Editing Interface Header.
• Fixed an issue where, when uploading an image using a File Input, CloudCannon would open the image cropper even when the image had the correct dimensions.
• Updated dependencies to patch security vulnerabilities.