Emebdable content in Arbeidsflate

Embadable content in Arbeidsflate is a feature that allows users to embed external content, such as markdown and html (only legacy content), directly in Arbeidsflate interface, provided a url to the content and a dialog token.

Content (text/plain) adheres to the current version of CommonMark (0.31.2). For examples of how to use the markdown syntax, see CommonMark examples. With the extension of GitHub Flavored Markdown to support pipe and dash syntax for tables.

Process

1. Embedable content is fetched from the provided URL:
   • (For mainContentReference) The content is fetched from the URL specified in the mainContentReference field of the dialog on loading the dialog details.
   • (For contentReference for transmissions) The content is fetched only when the user expands the transmission in the dialog details.
2. The content is sanitized to ensure security and integrity and is transformed into a React component tree:
   • (For Markdown) Transforms markdown into a sanitized, styled React component tree, allowing safe and customizable rendering.
   • (For legacy HTML) Transforms raw HTML into sanitized, styled React components, ensuring safe display of dynamic HTML.
3. The sanitized content is then displayed in the Arbeidsflate interface.

Restrictions

For security reasons, the content is sanitized and only certain tags are allowed.

Allowed HTML tags

Allowed HTML tags

HTML Tag	Purpose	Markdown Equivalent / Example
<p>	Paragraphs	Plain text separated by a blank line
<em>	Italic / emphasis	*italic* or _italic_
<strong>	Bold / strong emphasis	**bold** or __bold__
<ul> / <ol> / <li>	Lists	- item, 1. item
<a>	Links	[link](https://example.com)
<code>	Inline code	`inline code`
<pre><code>	Code blocks	js<br>const x = 1;<br>
<blockquote>	Blockquotes	> quoted text
<hr>	Horizontal rule/separator	--- or ***
<h1>–<h6>	Headings	# H1, ## H2, ..., ###### H6
<br>	Line break	Line ends with 2+ spaces + Enter
<table> / <thead> / <tbody> / <tr> / <th> / <td>	Tabular data	Markdown: | Syntax | Description |\n| ----------- | ----------- |\n| Header | Title |\n| Paragraph | Text | HTML: <table>\n <thead>\n <tr>\n <th>Syntax</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Header</td>\n <td>Title</td>\n </tr>\n <tr>\n <td>Paragraph</td>\n <td>Text</td>\n </tr>\n </tbody>\n</table>

Allowed Attributes

Only href for <a> tags is allowed, and it must be a valid URL. All other attributes are stripped for security reasons.