Feature: UFM component filters

[leekelleher]

Important

The details in this pull request may be outdated.
Please refer to the official documentation for the latest UFM syntax.

Description

To support a "filter" feature to Umbraco-Flavored Markdown (UFM), this pull request adds an ufmFilter extension type and a base class (UmbUfmElementBase) for the UFM components in order to support reuse the filter logic.

Also in this pull request...

• Syntax for content pickers, {~value}, to support document, media and member pickers (both single and arrays), rendering the entity's name as the label
• Adds UFM filter functions (extensions), these are piped within the UFM curly bracket syntax; there is...
  • Fallback, i.e. {= value | fallback:No items }
  • Lowercase, i.e. {= value | lowercase }
  • Strip HTML, i.e. {= value | strip-html }
    • this is compatible with the RTE data structure, e.g. { markup, blocks }
  • Title Case, i.e. {= value | title-case }
  • Truncate, i.e. {= value | truncate:10:false }
    • this supports multiple arguments: length: number and tail: string (defaulting to "…", and omitted if "false")
  • Uppercase, i.e. {= value | uppercase }
  • Word Limit, i.e. {= value | word-limit:10 }
    • this supports a limit: number argument

Note, UFM filters can be piped together, e.g. {= value | strip-html | word-limit:30 }. The filters will also work for the localization and content picker UFM components, e.g. {#general_choose | uppercase}; {~value | title-case | fallback: No items }.

Types of changes

• New feature (non-breaking change which adds functionality)

How to test?

For general testing of dynamic labels can be done within Collection Views, Block List/Grid and Document property descriptions.

For specific testing of the filters, e.g. in a Collection View, try adding the piped filter syntax to {=value} labels; also try piping filters, e.g. {= value | lowercase | uppercase | title-case | truncate:4:true}.

[leekelleher]

Failed conditions
❌ 9.8% Duplication on New Code (required ≤ 3%)

re: @sonarcloud's code duplication issue, this is in a manifest file, of which the duplication of JSON structure is intentional.

[iOvergaard]

Failed conditions
❌ 9.8% Duplication on New Code (required ≤ 3%)

re: @sonarcloud's code duplication issue, this is in a manifest file, of which the duplication of JSON structure is intentional.

I have added **/manifests?.ts to be excluded for further duplication detection in the SonarCloud settings.

[sonarqubecloud]

Quality Gate failed

Failed conditions
8.3% Duplication on New Code (required ≤ 3%)

See analysis details on SonarCloud