Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions .github/styles/UmbracoDocs/Acronyms.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ scope: text
ignorecase: false
# Ensures that the existence of 'first' implies the existence of 'second'.
# Require leading whitespace to avoid matching on URL substrings eg https://www.youtube.com/embed/OUD-PbWESAs?rel=0
first: '\s\b([A-Z]{3,5})\b'
first: '\b([A-Z]{3,5})\b'
second: '([A-Z]{3,5}): (?:\b[A-Z][a-z]+ )+|(?:\b[A-Z][a-z]+ )+\(([A-Z]{3,5})\)'
# ... with the exception of these:
exceptions:
Expand Down Expand Up @@ -84,5 +84,3 @@ exceptions:
- DHL
- UUI
- MDN
- UFM
- XSS
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

# Health check: Macro errors

_Checks to make sure macro errors are not set to throw a YSOD (yellow screen of death), which would prevent certain or all pages from loading completely._
_Checks to make sure macro errors are not set to throw a Yellow Screen Of Death (YSOD). This could prevent certain or all pages from loading._

## How to fix this health check

Expand Down
2 changes: 1 addition & 1 deletion 13/umbraco-cms/extending/health-check/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ namespace Umbraco.Cms.Core.HealthChecks.Checks.Configuration;
[HealthCheck(
"D0F7599E-9B2A-4D9E-9883-81C7EDC5616F",
"Macro errors",
Description = "Checks to make sure macro errors are not set to throw a YSOD (yellow screen of death), which would prevent certain or all pages from loading completely.",
Description = "Checks to make sure macro errors are not set to throw a Yellow Screen Of Death (YSOD), which would prevent certain or all pages from loading completely.",
Group = "Configuration")]
public class MacroErrorsCheck : AbstractSettingsCheck
{
Expand Down
40 changes: 17 additions & 23 deletions 14/umbraco-cms/reference/umbraco-flavored-markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,11 @@ Using Markdown for labels provides basic text formatting. It natively supports t

UFM is built on top of [GitHub Flavored Markdown](https://github.github.com/gfm/) and [CommonMark](https://spec.commonmark.org/) specifications. The implementation for Umbraco 14 has been developed as an extension to the [Marked library](https://marked.js.org/).


## Syntax

The essence of the UFM syntax is curly brackets with a marker prefix.

```
```markdown
{<marker prefix> <contents> }
```

Expand All @@ -32,13 +31,12 @@ The curly brackets indicate that the UFM syntax should be processed. The `=` mar

With this example, the syntax `{= bodyText }` would be processed and rendered as the following markup:

```
```js
<ufm-label-value alias="bodyText"></ufm-label-value>
```

The internal working of the `ufm-label-value` component would then be able to access the property's value using the [Context API](../extending/backoffice-setup/working-with-data/context-api).


## Available UFM components

As for Umbraco 14.1.0, the following UFM components are available to use.
Expand All @@ -48,57 +46,53 @@ As for Umbraco 14.1.0, the following UFM components are available to use.
| Label Value | `=` | `{=bodyText}` | `<ufm-label-value alias="bodyText">` |
| Localize | `#` | `{#general_name}` | `<umb-localize key="general_name">` |


More UFM components will be available in upcoming Umbraco releases.

If you wish to develop your own custom UFM component, you can use the `ufmComponent` extension type:

```
```json
{
type: 'ufmComponent',
alias: 'My.CustomUfmComponent',
name: 'My Custom UFM Component',
api: () => import('./components/my-custom.component.js'),
meta: {
marker: '%',
},
type: 'ufmComponent',
alias: 'My.CustomUfmComponent',
name: 'My Custom UFM Component',
api: () => import('./components/my-custom.component.js'),
meta: {
marker: '%',
},
}
```

The corresponding JavaScript/TypeScript API would contain a method to render the custom label/markup.

```
```js
export class MyCustomUfmComponentApi implements UmbUfmComponentBase {
render(token: Tokens.Generic) {
// You could do further regular expression/text processing here!
return `<ufm-custom-component text="${token.text}"></ufm-custom-component>`;
}
render(token: Tokens.Generic) {
// You could do further regular expression/text processing here!
return `<ufm-custom-component text="${token.text}"></ufm-custom-component>`;
}
}

export { MyCustomUfmComponentApi as api };
```

Using the syntax `{% myCustomText }` would render the markup `<ufm-custom-component text="myCustomText">`. Then inside the `ufm-custom-component` component code, you can perform any logic to render your required markup.


## Post-processing and sanitization

When the markdown has been converted to HTML, the markup will be run through post-processing sanitization to ensure security and consistency within the backoffice.

As of Umbraco 14, the [DOMPurify library](https://github.com/cure53/DOMPurify) is used to sanitize the markup and prevent XSS attacks.
As of Umbraco 14, the [DOMPurify library](https://github.com/cure53/DOMPurify) is used to sanitize the markup and prevent Cross-site scripting (XSS) attacks.

The sanitized markup will be...

- Valid HTML
- Anchor links will have their target set to `_blank`
- Only web components that have a prefix of `ufm-`, `umb-` or `uui-` will be allowed to render


## Using UFM in your own components

If you would like to render UFM within your own web components in the Umbraco CMS backoffice, you can use the `umb-ufm-render` component:

```
```js
<umb-ufm-render inline .markdown=${ myMarkdown } .value=${ myValue }></umb-ufm-render>
```