wip adorners and images

bpmn-io · May 26, 2023 · 630e576 · 630e576
1 parent 6fbd14d
commit 630e576
Show file tree

Hide file tree

Showing 15 changed files with 324 additions and 58 deletions.
diff --git a/packages/form-js-editor/src/features/properties-panel/entries/AdornerEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/AdornerEntry.js
@@ -1,7 +1,7 @@
-import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
+import { FeelTemplatingEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
 
 import { get, set } from 'min-dash';
-import { useService } from '../hooks';
+import { useService, useVariables } from '../hooks';
 
 export default function AdornerEntry(props) {
   const {
@@ -33,7 +33,7 @@ export default function AdornerEntry(props) {
     entries.push({
       id: 'prefix-adorner',
       component: PrefixAdorner,
-      isEdited: isTextFieldEntryEdited,
+      isEdited: isFeelEntryEdited,
       editField,
       field,
       onChange,
@@ -43,7 +43,7 @@ export default function AdornerEntry(props) {
     entries.push({
       id: 'suffix-adorner',
       component: SuffixAdorner,
-      isEdited: isTextFieldEntryEdited,
+      isEdited: isFeelEntryEdited,
       editField,
       field,
       onChange,
@@ -64,13 +64,18 @@ function PrefixAdorner(props) {
 
   const debounce = useService('debounce');
 
-  return TextFieldEntry({
+  const variables = useVariables().map(name => ({ name }));
+
+  return FeelTemplatingEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('prefixAdorner'),
     id,
     label: 'Prefix',
-    setValue: onChange('prefixAdorner')
+    setValue: onChange('prefixAdorner'),
+    singleLine: true,
+    variables
   });
 }
 
@@ -84,12 +89,16 @@ function SuffixAdorner(props) {
 
   const debounce = useService('debounce');
 
-  return TextFieldEntry({
+  const variables = useVariables().map(name => ({ name }));
+
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     getValue: getValue('suffixAdorner'),
     id,
     label: 'Suffix',
-    setValue: onChange('suffixAdorner')
+    setValue: onChange('suffixAdorner'),
+    singleLine: true,
+    variables
   });
 }
diff --git a/packages/form-js-editor/src/features/properties-panel/entries/AltTextEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/AltTextEntry.js
@@ -2,7 +2,7 @@ import { get } from 'min-dash';
 
 import { useService, useVariables } from '../hooks';
 
-import { FeelEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
+import { FeelTemplatingEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
 
 export default function AltTextEntry(props) {
   const {
@@ -50,14 +50,15 @@ function AltText(props) {
     return editField(field, path, value);
   };
 
-  return FeelEntry({
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     feel: 'optional',
     getValue,
     id,
     label: 'Alternative text',
     setValue,
+    singleLine: true,
     variables
   });
 }
diff --git a/packages/form-js-editor/src/features/properties-panel/entries/ImageSourceEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/ImageSourceEntry.js
@@ -2,7 +2,7 @@ import { get } from 'min-dash';
 
 import { useService, useVariables } from '../hooks';
 
-import { FeelEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
+import { FeelTemplatingEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
 
 export default function SourceEntry(props) {
   const {
@@ -50,7 +50,7 @@ function Source(props) {
     return editField(field, path, value);
   };
 
-  return FeelEntry({
+  return FeelTemplatingEntry({
     debounce,
     description: 'Expression or static value (link/data URI)',
     element: field,
@@ -59,6 +59,7 @@ function Source(props) {
     id,
     label: 'Image source',
     setValue,
+    singleLine: true,
     variables
   });
 }
diff --git a/packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanel.spec.js b/packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanel.spec.js
@@ -2955,19 +2955,21 @@ describe('properties panel', function() {
           });
 
           // assume
-          const input = domQuery('input[name=alt]', container);
-          expect(input.value).to.equal('The bpmn.io logo');
+          const feelers = findFeelers('alt', container);
+          expect(feelers.textContent).to.equal('The bpmn.io logo');
+
+          const input = feelers.querySelector('div[contenteditable="true"]');
 
           // when
-          fireEvent.input(input, { target: { value: 'An image' } });
+          await setEditorValue(input, 'An image');
 
           // then
           expect(editFieldSpy).to.have.been.calledOnce;
           expect(editFieldSpy).to.have.been.calledWith(field, [ 'alt' ], 'An image');
         });
 
 
-        it('should remove alt text', function() {
+        it('should remove alt text', async function() {
 
           // given
           const editFieldSpy = spy();
@@ -2981,11 +2983,13 @@ describe('properties panel', function() {
           });
 
           // assume
-          const input = domQuery('input[name=alt]', container);
-          expect(input.value).to.equal('The bpmn.io logo');
+          const feelers = findFeelers('alt', container);
+          expect(feelers.textContent).to.equal('The bpmn.io logo');
+
+          const input = feelers.querySelector('div[contenteditable="true"]');
 
           // when
-          fireEvent.input(input, { target: { value: '' } });
+          await setEditorValue(input, '');
 
           // then
           expect(editFieldSpy).to.have.been.calledOnce;
@@ -3261,6 +3265,10 @@ function findEntries(container, groupLabel, entryLabel) {
   }
 }
 
+function findFeelers(id, container) {
+  return container.querySelector(`[data-entry-id="${id}"] .bio-properties-panel-feelers-editor`);
+}
+
 function getListOrdering(list) {
   let ordering = [];
 

diff --git a/packages/form-js-editor/test/spec/features/properties-panel/groups/AppearanceGroup.spec.js b/packages/form-js-editor/test/spec/features/properties-panel/groups/AppearanceGroup.spec.js
@@ -1,13 +1,14 @@
 import {
   cleanup,
-  fireEvent,
   render
 } from '@testing-library/preact/pure';
 
 import { AppearanceGroup } from '../../../../../src/features/properties-panel/groups';
 
 import { WithPropertiesPanelContext, WithPropertiesPanel } from '../helper';
 
+import { setEditorValue } from '../../../../helper';
+
 
 describe('AppearanceGroup', function() {
 
@@ -37,7 +38,7 @@ describe('AppearanceGroup', function() {
       const { container } = renderAppearanceGroup({ field });
 
       // then
-      const input = findInput('suffix-adorner', container);
+      const input = findFeelers('suffix-adorner', container);
 
       expect(input).to.exist;
     });
@@ -57,15 +58,15 @@ describe('AppearanceGroup', function() {
       const { container } = renderAppearanceGroup({ field });
 
       // then
-      const input = findInput('suffix-adorner', container);
+      const input = findFeelers('suffix-adorner', container);
 
       // then
       expect(input).to.exist;
-      expect(input.value).to.eql('foo');
+      expect(input.textContent).to.eql('foo');
     });
 
 
-    it('should write', function() {
+    it('should write', async function() {
 
       // given
       const field = {
@@ -79,14 +80,40 @@ describe('AppearanceGroup', function() {
 
       const { container } = renderAppearanceGroup({ field, editField: editFieldSpy });
 
-      const input = findInput('suffix-adorner', container);
+      const feelers = findFeelers('suffix-adorner', container);
+      const input = feelers.querySelector('div[contenteditable="true"]');
+
+      // when
+      await setEditorValue(input, 'newVal');
+
+      // then
+      expect(editFieldSpy).to.have.been.calledOnce;
+      expect(field.appearance.suffixAdorner).to.eql('newVal');
+    });
+
+
+    it('should write expression', async function() {
+
+      // given
+      const field = {
+        type: 'textfield',
+        appearance: {
+          suffixAdorner: '=foo'
+        }
+      };
+
+      const editFieldSpy = sinon.spy();
+
+      const { container } = renderAppearanceGroup({ field, editField: editFieldSpy });
+
+      const input = findTextbox('suffix-adorner', container);
 
       // when
-      fireEvent.input(input, { target: { value: 'bar' } });
+      await setEditorValue(input, 'newVal');
 
       // then
       expect(editFieldSpy).to.have.been.calledOnce;
-      expect(field.appearance.suffixAdorner).to.eql('bar');
+      expect(field.appearance.suffixAdorner).to.eql('=newVal');
     });
 
   });
@@ -103,7 +130,7 @@ describe('AppearanceGroup', function() {
       const { container } = renderAppearanceGroup({ field });
 
       // then
-      const input = findInput('prefix-adorner', container);
+      const input = findFeelers('prefix-adorner', container);
 
       expect(input).to.exist;
     });
@@ -123,15 +150,15 @@ describe('AppearanceGroup', function() {
       const { container } = renderAppearanceGroup({ field });
 
       // then
-      const input = findInput('prefix-adorner', container);
+      const input = findFeelers('prefix-adorner', container);
 
       // then
       expect(input).to.exist;
-      expect(input.value).to.eql('foo');
+      expect(input.textContent).to.eql('foo');
     });
 
 
-    it('should write', function() {
+    it('should write', async function() {
 
       // given
       const field = {
@@ -145,14 +172,41 @@ describe('AppearanceGroup', function() {
 
       const { container } = renderAppearanceGroup({ field, editField: editFieldSpy });
 
-      const input = findInput('prefix-adorner', container);
+      const feelers = findFeelers('prefix-adorner', container);
+
+      const input = feelers.querySelector('div[contenteditable="true"]');
+
+      // when
+      await setEditorValue(input, 'newVal');
+
+      // then
+      expect(editFieldSpy).to.have.been.calledOnce;
+      expect(field.appearance.prefixAdorner).to.eql('newVal');
+    });
+
+
+    it('should write expression', async function() {
+
+      // given
+      const field = {
+        type: 'textfield',
+        appearance: {
+          prefixAdorner: '=foo'
+        }
+      };
+
+      const editFieldSpy = sinon.spy();
+
+      const { container } = renderAppearanceGroup({ field, editField: editFieldSpy });
+
+      const input = findTextbox('prefix-adorner', container);
 
       // when
-      fireEvent.input(input, { target: { value: 'bar' } });
+      await setEditorValue(input, 'newVal');
 
       // then
       expect(editFieldSpy).to.have.been.calledOnce;
-      expect(field.appearance.prefixAdorner).to.eql('bar');
+      expect(field.appearance.prefixAdorner).to.eql('=newVal');
     });
 
   });
@@ -176,6 +230,10 @@ function renderAppearanceGroup(options) {
   })));
 }
 
-function findInput(id, container) {
-  return container.querySelector(`input[name="${id}"]`);
+function findFeelers(id, container) {
+  return container.querySelector(`[data-entry-id="${id}"] .bio-properties-panel-feelers-editor`);
+}
+
+function findTextbox(id, container) {
+  return container.querySelector(`[name=${id}] [role="textbox"]`);
 }
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
@@ -2,7 +2,7 @@ import { useContext, useMemo } from 'preact/hooks';
 
 import { FormContext } from '../../context';
 
-import { useExpressionEvaluation } from '../../hooks';
+import { useSingleLineTemplateEvaluation } from '../../hooks';
 import { sanitizeImageSource } from '../Sanitizer';
 
 import {
@@ -27,11 +27,11 @@ export default function Image(props) {
   } = field;
 
 
-  const evaluatedImageSource = useExpressionEvaluation(source);
+  const evaluatedImageSource = useSingleLineTemplateEvaluation(source, { debug: true });
 
   const safeSource = useMemo(() => sanitizeImageSource(evaluatedImageSource), [ evaluatedImageSource ]);
 
-  const altText = useExpressionEvaluation(alt);
+  const altText = useSingleLineTemplateEvaluation(alt, { debug: true });
 
   const { formId } = useContext(FormContext);
 

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Number.js b/packages/form-js-viewer/src/render/components/form-fields/Number.js
@@ -7,7 +7,7 @@ import { FormContext } from '../../context';
 import Description from '../Description';
 import Errors from '../Errors';
 import Label from '../Label';
-import InputAdorner from './parts/InputAdorner';
+import InputAdorner from './parts/TemplatedInputAdorner';
 
 import AngelDownIcon from './icons/AngelDown.svg';
 import AngelUpIcon from './icons/AngelUp.svg';

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Textfield.js b/packages/form-js-viewer/src/render/components/form-fields/Textfield.js
@@ -6,7 +6,7 @@ import { FormContext } from '../../context';
 import Description from '../Description';
 import Errors from '../Errors';
 import Label from '../Label';
-import InputAdorner from './parts/InputAdorner';
+import InputAdorner from './parts/TemplatedInputAdorner';
 
 import {
   formFieldClasses,