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-carbon-styles/test/spec/complex.json

@@ -6,6 +6,11 @@
       "type": "text",
       "id": "Field_1bbbwwg"
     },
+    {
+      "type": "html",
+      "content": "<p style='color: green; font-size: 24px'>Some big green text</p>",
+      "id": "Field_1bbbwwh"
+    },
     {
       "id": "Group_1a82jj2",
       "label": "I am a group",
@@ -680,5 +685,5 @@
     "name": "Camunda Modeler",
     "version": "5.7.0-nightly.20230103"
   },
-  "schemaVersion": 9
+  "schemaVersion": 15
 }

packages/form-js-editor/assets/form-js-editor-base.css

@@ -752,6 +752,10 @@
   margin: 0px 12px 6px
 }
 
+.fjs-properties-container .fjs-properties-panel .cm-editor {
+  max-height: 400px;
+}
+
 /**
  * Editor Form Fields
  */
@@ -773,6 +777,12 @@
   background: repeating-linear-gradient( 45deg, #ffffff, #ffffff 10px, #f5f5f5 10px, #f5f5f5 20px);
 }
 
+
+.fjs-editor-container .fjs-form-field-html,
+.fjs-editor-container .fjs-form-field-text {
+  min-height: 30px;
+}
+
 .fjs-editor-container .fjs-form-field-separator hr {
   margin: 10px 2px;
 }

packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js

@@ -8,6 +8,11 @@ import { getPaletteIcon } from '../palette/components/Palette';
 
 import { useService } from './hooks';
 
+const headerlessTypes = [
+  'spacer',
+  'separator',
+  'html'
+];
 
 export const PropertiesPanelHeaderProvider = {
 
@@ -16,7 +21,7 @@ export const PropertiesPanelHeaderProvider = {
       type
     } = field;
 
-    if (type === 'spacer') {
+    if (headerlessTypes.includes(type)) {
       return '';
     }