diff --git a/packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js b/packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js index a42f4f8ae..99fce9780 100644 --- a/packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js +++ b/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) => { diff --git a/packages/form-js-editor/src/features/properties-panel/Util.js b/packages/form-js-editor/src/features/properties-panel/Util.js index ee23d4fa4..388d5c72c 100644 --- a/packages/form-js-editor/src/features/properties-panel/Util.js +++ b/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 */ diff --git a/packages/form-js-editor/test/spec/features/properties-panel/Util.spec.js b/packages/form-js-editor/test/spec/features/properties-panel/Util.spec.js deleted file mode 100644 index 1dc9bbbc0..000000000 --- a/packages/form-js-editor/test/spec/features/properties-panel/Util.spec.js +++ /dev/null @@ -1,47 +0,0 @@ -import { textToLabel } from '../../../../src/features/properties-panel/Util'; - -describe('properties panel util', function () { - 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); - }); - }); -}); diff --git a/packages/form-js-viewer/src/render/components/Util.js b/packages/form-js-viewer/src/render/components/Util.js index 01e264920..45ebce5e4 100644 --- a/packages/form-js-viewer/src/render/components/Util.js +++ b/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'; diff --git a/packages/form-js-viewer/src/render/components/form-fields/Datetime.js b/packages/form-js-viewer/src/render/components/form-fields/Datetime.js index a34b1ade9..b73896c57 100644 --- a/packages/form-js-viewer/src/render/components/form-fields/Datetime.js +++ b/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; + }, }; diff --git a/packages/form-js-viewer/src/render/components/form-fields/Default.js b/packages/form-js-viewer/src/render/components/form-fields/Default.js index 2713a1976..3f5915628 100644 --- a/packages/form-js-viewer/src/render/components/form-fields/Default.js +++ b/packages/form-js-viewer/src/render/components/form-fields/Default.js @@ -19,4 +19,5 @@ Default.config = { components: [], ...options, }), + getSubheading: (field) => field.id, }; diff --git a/packages/form-js-viewer/src/render/components/form-fields/Image.js b/packages/form-js-viewer/src/render/components/form-fields/Image.js index db883c7df..71b5f2273 100644 --- a/packages/form-js-viewer/src/render/components/form-fields/Image.js +++ b/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, }; diff --git a/packages/form-js-viewer/src/render/components/form-fields/Text.js b/packages/form-js-viewer/src/render/components/form-fields/Text.js index 466622bf9..bdd6c1281 100644 --- a/packages/form-js-viewer/src/render/components/form-fields/Text.js +++ b/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); + }, }; diff --git a/packages/form-js-viewer/test/spec/render/components/Util.spec.js b/packages/form-js-viewer/test/spec/render/components/Util.spec.js index 5cf12ea68..c1abec4d7 100644 --- a/packages/form-js-viewer/test/spec/render/components/Util.spec.js +++ b/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); + }); + }); });