Implement HTML component and cleanup Text component

packages/form-js-carbon-styles/src/carbon-styles.scss

@@ -165,7 +165,7 @@
 
 // Markdown styles /////////////
 
-.fjs-container .fjs-form-field.fjs-form-field-text .markup {
+.fjs-container .fjs-form-field.fjs-form-field-text {
   font-size: var(--cds-body-long-01-font-size);
   font-weight: var(--cds-body-long-01-font-weight);
   line-height: var(--cds-body-long-01-line-height);

packages/form-js-editor/src/features/properties-panel/entries/HtmlEntry.js

@@ -0,0 +1,77 @@
+import { get } from 'min-dash';
+
+import { useService, useVariables } from '../hooks';
+
+import { FeelTemplatingEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
+
+import { useMemo } from 'preact/hooks';
+
+
+export function HtmlEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+
+  const entries = [
+    {
+      id: 'content',
+      component: Content,
+      editField: editField,
+      field: field,
+      isEdited: isFeelEntryEdited,
+      isDefaultVisible: (field) => field.type === 'html'
+    }
+  ];
+
+  return entries;
+}
+
+function Content(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const debounce = useService('debounce');
+
+  const variables = useVariables().map(name => ({ name }));
+
+  const path = [ 'content' ];
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = (value) => {
+    return editField(field, path, value || '');
+  };
+
+  const validate = (value) => {
+
+    // allow empty state
+    if (value === undefined || value === null || value === '') { return null; }
+
+    // allow expressions
+    if (value.startsWith('=')) { return null; }
+
+    // disallow style tags
+    if (value.includes('<style')) { return 'Style tags may not be defined here, please use inline styling here.'; }
+  };
+
+  const description = useMemo(() => <>Supports HTML, inline styling, and templating. <a href="https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/" target="_blank">Learn more</a></>, []);
+
+  return FeelTemplatingEntry({
+    debounce,
+    description,
+    element: field,
+    getValue,
+    id,
+    label: 'Content',
+    hostLanguage: 'html',
+    validate,
+    setValue,
+    variables
+  });
+}

packages/form-js-editor/src/features/properties-panel/entries/index.js

@@ -13,6 +13,7 @@ export { IFrameHeightEntry } from './IFrameHeightEntry';
 export { IFrameUrlEntry } from './IFrameUrlEntry';
 export { ImageSourceEntry } from './ImageSourceEntry';
 export { TextEntry } from './TextEntry';
+export { HtmlEntry } from './HtmlEntry';
 export { HeightEntry } from './HeightEntry';
 export { NumberEntries } from './NumberEntries';
 export { NumberSerializationEntry } from './NumberSerializationEntry';

packages/form-js-editor/src/features/properties-panel/groups/GeneralGroup.js

@@ -15,6 +15,7 @@ import {
   ReadonlyEntry,
   SelectEntries,
   TextEntry,
+  HtmlEntry,
   HeightEntry,
   NumberEntries,
   DateTimeEntry,
@@ -37,6 +38,7 @@ export function GeneralGroup(field, editField, getService) {
     ...ActionEntry({ field, editField }),
     ...DateTimeEntry({ field, editField }),
     ...TextEntry({ field, editField, getService }),
+    ...HtmlEntry({ field, editField, getService }),
     ...IFrameUrlEntry({ field, editField }),
     ...IFrameHeightEntry({ field, editField }),
     ...HeightEntry({ field, editField }),

packages/form-js-editor/src/render/components/editor-form-fields/EditorHtml.js

@@ -0,0 +1,37 @@
+import { Html } from '@bpmn-io/form-js-viewer';
+import { editorFormFieldClasses } from '../Util';
+import { useService } from '../../hooks';
+
+import { iconsByType } from '../icons';
+
+export function EditorHtml(props) {
+
+  const { type, content = '' } = props.field;
+
+  const Icon = iconsByType(type);
+
+  const templating = useService('templating');
+  const expressionLanguage = useService('expressionLanguage');
+
+  if (!content || !content.trim()) {
+    return <div class={ editorFormFieldClasses(type) }>
+      <div class="fjs-form-field-placeholder"><Icon viewBox="0 0 54 54" />Html is empty</div>
+    </div>;
+  }
+
+  if (expressionLanguage.isExpression(content)) {
+    return <div class={ editorFormFieldClasses(type) }>
+      <div class="fjs-form-field-placeholder"><Icon viewBox="0 0 54 54" />Html is populated by an expression</div>
+    </div>;
+  }
+
+  if (templating.isTemplate(content)) {
+    return <div class={ editorFormFieldClasses(type) }>
+      <div class="fjs-form-field-placeholder"><Icon viewBox="0 0 54 54" />Html is templated</div>
+    </div>;
+  }
+
+  return <Html { ...{ ...props, disableLinks: true } } />;
+}
+
+EditorHtml.config = Html.config;

packages/form-js-editor/src/render/components/editor-form-fields/index.js

@@ -1,9 +1,11 @@
 import { EditorIFrame } from './EditorIFrame';
 import { EditorText } from './EditorText';
+import { EditorHtml } from './EditorHtml';
 import { EditorTable } from './EditorTable';
 
 export const editorFormFields = [
   EditorIFrame,
   EditorText,
+  EditorHtml,
   EditorTable
 ];

packages/form-js-viewer/package.json

@@ -48,14 +48,14 @@
     "big.js": "^6.2.1",
     "classnames": "^2.3.1",
     "didi": "^10.0.1",
+    "dompurify": "^3.0.8",
     "feelers": "^1.2.0",
     "feelin": "^3.0.0",
     "flatpickr": "^4.6.13",
     "ids": "^1.0.0",
     "lodash": "^4.5.0",
     "min-dash": "^4.0.0",
     "preact": "^10.5.14",
-    "preact-markup": "^2.1.1",
     "showdown": "^2.1.0"
   },
   "sideEffects": [

packages/form-js-viewer/rollup.config.js

@@ -55,7 +55,6 @@ export default [
       'preact/jsx-runtime',
       'preact/hooks',
       'preact/compat',
-      'preact-markup',
       'flatpickr',
       'showdown',
       '@carbon/grid',

packages/form-js-viewer/src/render/components/Sanitizer.js

@@ -70,9 +70,10 @@ export function sanitizeHTML(html) {
   const element = doc.body.firstChild;
 
   if (element) {
+
     sanitizeNode(/** @type Element */ (element));
+    return /** @type Element */ (element).innerHTML;
 
-    return new XMLSerializer().serializeToString(element);
   } else {
 
     // handle the case that document parsing

packages/form-js-viewer/src/render/components/form-fields/Html.js

@@ -0,0 +1,60 @@
+import { useCallback } from 'preact/hooks';
+import { useService, useTemplateEvaluation } from '../../hooks';
+import { RawHTMLRenderer } from './parts/RawHTMLRenderer';
+
+import {
+  formFieldClasses
+} from '../Util';
+
+const type = 'html';
+
+export function Html(props) {
+
+  const form = useService('form');
+  const { textLinkTarget } = form._getState().properties;
+
+  const { field, disableLinks } = props;
+
+  const { content = '', strict = false } = field;
+
+  const html = useTemplateEvaluation(content, { debug: true, strict });
+
+  const transformLinks = useCallback((html) => {
+
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = html;
+
+    const links = tempDiv.querySelectorAll('a');
+
+    links.forEach(link => {
+
+      if (disableLinks) {
+        link.setAttribute('class', 'fjs-disabled-link');
+        link.setAttribute('tabIndex', '-1');
+      }
+
+      if (textLinkTarget) {
+        link.setAttribute('target', textLinkTarget);
+      }
+
+    });
+
+    return tempDiv.innerHTML;
+
+  }, [ disableLinks, textLinkTarget ]);
+
+  return <div class={ formFieldClasses(type) }>
+    <RawHTMLRenderer html={ html } transform={ transformLinks } sanitize={ true } sanitizeStyleTags={ true } />
+  </div>;
+}
+
+Html.config = {
+  type,
+  keyed: false,
+  label: 'HTML',
+  group: 'presentation',
+  create: (options = {}) => ({
+    content: '',
+    ...options
+  })
+};