2023 release notes

Components can now use a new input type of FormattedText. This will render a new WYSIWYG editor that can be used to format text, add links, and add images.

The new WYSIWYG editor is not yet at feature parity with the Matrix WYSIWYG editor and will have additional formatting features added in future releases.

Links and images inside FormattedText can reference Matrix assets or external URLs.

The following code is a simple example of an input schema with a FormattedText field:

"input": {
    "type": "object",
    "properties": {
        "formattedText": {
            "type": "FormattedText"
        }
    }
}

The following image is an example of the result of using a FormattedText field within the Matrix Admin UI, within an array of news items:

Support for the SquizImage type in component manifests allows components to reference image assets in Matrix.

SquizImage is a new input type which will prompt an image editing tool in the Matrix Administration interface when editing a component. Images can be a Matrix asset or an external image.

SquizImage can be mocked in the preview model by providing several fields of data.

The following code is an example of an input schema with a SquizImage field:

"input": {
    "type": "object",
    "properties": {
        "image": {
            "type": "SquizImage",
            "description": "Background image"
        }
    },
    "required": ["image"]
}

The following code is an example of a SquizImage field mocked in the preview model:

"previews": {
    "valid-inline-preview": {
        "functionData": {
            "main": {
                "inputData": {
                    "type": "inline",
                    "value": {
                        "image": {
                            "name": "My Image",
                            "alt": "This is the image alt text",
                            "caption": "This is a caption",
                            "imageVariations": {
                                "original": {
                                    "url": "http://example.com/image.jpg",
                                    "width": 100,
                                    "height": 100,
                                    "byteSize": 1000,
                                    "mimeType": "image/jpeg",
                                    "aspectRatio": "1:1",
                                    "sha1Hash": "1234567890abcdef1234567890abcdef12345678"
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

The Matrix Asset URI format used in a component manifest has the equivalent functionality of a Matrix related asset field.

Input types in an input field can now have a format of matrix-asset-uri which will prompt the Matrix Administration interface to allow you to input a Matrix asset ID, as well as a relevant Matrix Identifier behind the scenes.

You can specify a list of matrixAssetTypes to determine which asset types are valid for fulfilling the field. The list of valid asset types is available in the schema within the local development server.

The following code is an example of an input schema with a related asset field from a manifest:

In local preview, related assets can be mocked in a new mockedUris field within the manifest file. This is used to simulate the full data model of a returned asset from Matrix.

These asset types can then be resolved at runtime in your JavaScript using the resolveUri function to return the asset data, as shown in the following code:

Matrix Identifiers can now be configured in the Squiz Digital Experience Platform (DXP) Console, via the Matrix API Identifiers screen in the Components section.

Matrix Identifiers reference a Content API token, and are used to resolve asset references within the new component type fields such as FormattedText, SquizLink, SquizImage and the Matrix Asset URI format.

A Matrix Identifier must be configured for each site that uses the Component Service, however a single Matrix Identifier can be reused across multiple sites.

Content API tokens should be set up for read only access with least relevant privilege.

Node version updated from 16 to 18 LTS. Developers should use Node 18 when running their local development server for consistency with the production runtime.

Improved support for horizontal scaling.