feat: parameterized the properties panel subheading getter logic

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

@@ -1,4 +1,3 @@
-import { textToLabel } from './Util';
 import { iconsByType } from '../../render/components/icons';
 import { getPaletteIcon } from '../palette/components/Palette';
 
@@ -8,19 +7,8 @@ export function getPropertiesPanelHeaderProvider(options = {}) {
   return {
     getElementLabel: (field) => {
       const { type } = field;
-      if (type === 'datetime') {
-        return field.dateLabel || field.timeLabel;
-      }
-      if (type === 'text') {
-        return textToLabel(field.text);
-      }
-      if (type === 'image') {
-        return field.alt;
-      }
-      if (type === 'default') {
-        return field.id;
-      }
-      return field.label;
+      const fieldDefinition = formFields.get(type).config;
+      return fieldDefinition.getSubheading ? fieldDefinition.getSubheading(field) : field.label;
     },
 
     getElementIcon: (field) => {

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

@@ -43,21 +43,6 @@ export function stopPropagation(listener) {
   };
 }
 
-export function textToLabel(text) {
-  if (typeof text != 'string') return null;
-
-  for (const line of text.split('\n')) {
-    const displayLine = line.trim();
-
-    // we use the first non-whitespace line in the text as label
-    if (displayLine !== '') {
-      return displayLine;
-    }
-  }
-
-  return null;
-}
-
 /**
  * @param {string} path
  */

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

@@ -27,6 +27,21 @@ export function gridColumnClasses(formField) {
   );
 }
 
+export function textToLabel(text) {
+  if (typeof text != 'string') return null;
+
+  for (const line of text.split('\n')) {
+    const displayLine = line.trim();
+
+    // we use the first non-whitespace line in the text as label
+    if (displayLine !== '') {
+      return displayLine;
+    }
+  }
+
+  return null;
+}
+
 export function prefixId(id, formId, indexes) {
   let result = 'fjs-form';
 

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

@@ -224,4 +224,7 @@ Datetime.config = {
 
     return { ...defaults, ...options };
   },
+  getSubheading: (field) => {
+    return field.dateLabel || field.timeLabel;
+  },
 };

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

@@ -19,4 +19,5 @@ Default.config = {
     components: [],
     ...options,
   }),
+  getSubheading: (field) => field.id,
 };

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

@@ -50,4 +50,5 @@ Image.config = {
   name: 'Image view',
   group: 'presentation',
   create: (options = {}) => options,
+  getSubheading: (field) => field.alt,
 };

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

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'preact/hooks';
 import { useDangerousHTMLWrapper, useService, useTemplateEvaluation } from '../../hooks';
 import { sanitizeHTML } from '../Sanitizer';
 
-import { formFieldClasses } from '../Util';
+import { formFieldClasses, textToLabel } from '../Util';
 
 const type = 'text';
 
@@ -66,4 +66,7 @@ Text.config = {
     text: '# Text',
     ...options,
   }),
+  getSubheading: (field) => {
+    textToLabel(field.text);
+  },
 };

packages/form-js-viewer/test/spec/render/components/Util.spec.js

@@ -1,4 +1,4 @@
-import { formFieldClasses } from '../../../../src/render/components/Util';
+import { formFieldClasses, textToLabel } from '../../../../src/render/components/Util';
 
 describe('Util', function () {
   describe('#formFieldClasses', function () {
@@ -26,4 +26,48 @@ describe('Util', function () {
       expect(classes).to.equal('fjs-form-field fjs-form-field-button fjs-disabled');
     });
   });
+
+  describe('#textToLabel', function () {
+    it('should use the first text line as label', function () {
+      // when
+      const label = textToLabel(
+        'Lorem ipsum dolor sit amet\nConsetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
+      );
+
+      // then
+      expect(label).to.equal('Lorem ipsum dolor sit amet');
+    });
+
+    it('should ignore empty lines', function () {
+      // when
+      const label = textToLabel('\n\n\nLorem ipsum dolor sit amet\nConsetetur sadipscing elitr');
+
+      // then
+      expect(label).to.equal('Lorem ipsum dolor sit amet');
+    });
+
+    it('should ignore whitespace lines', function () {
+      // when
+      const label = textToLabel('\n   \n   \nLorem ipsum dolor sit amet\nConsetetur sadipscing elitr');
+
+      // then
+      expect(label).to.equal('Lorem ipsum dolor sit amet');
+    });
+
+    it('should tolerate empty string', function () {
+      // when
+      const label = textToLabel('');
+
+      // then
+      expect(label).to.equal(null);
+    });
+
+    it('should tolerate null', function () {
+      // when
+      const label = textToLabel(null);
+
+      // then
+      expect(label).to.equal(null);
+    });
+  });
 });