From 17008e6d01379efa3f4a236e13bffd6ba9e4b8c4 Mon Sep 17 00:00:00 2001
From: Stefan Seifert <stefanseifert@users.noreply.github.com>
Date: Tue, 24 Sep 2024 10:04:20 +0200
Subject: [PATCH] Support textarea widget for multifield (array) properties

---
 .../angularjs-partials/multifield.html        | 27 ++++++++++++++++---
 .../propertyInputTextarea.html                |  2 ++
 .../js/widgets/multifield.directive.js        |  6 +++++
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/bundle/src/main/resources/angularjs-partials/multifield.html b/bundle/src/main/resources/angularjs-partials/multifield.html
index 696a84bd..951f0e33 100644
--- a/bundle/src/main/resources/angularjs-partials/multifield.html
+++ b/bundle/src/main/resources/angularjs-partials/multifield.html
@@ -34,8 +34,14 @@
              ng-model="effectiveValue.value" />
       <span class="coral-Checkbox-checkmark"></span>
     </label>
+    <textarea is="coral-textarea"
+           bo-if="type==='textarea'"
+           disabled
+           readonly
+           ng-attr-rows="{{textareaRows}}"
+           ng-model="effectiveValue.value"></textarea>
     <input is="coral-textfield" type="type"
-           bo-if="type!=='checkbox'"
+           bo-if="type!=='checkbox' && type!=='textarea'"
            disabled
            readonly
            ng-model="effectiveValue.value" />
@@ -57,8 +63,14 @@
              ng-model="value.value" />
       <span class="coral-Checkbox-checkmark"></span>
     </label>
+    <textarea is="coral-textarea"
+           bo-if="type==='textarea'"
+           disabled
+           readonly
+           ng-attr-rows="{{textareaRows}}"
+           ng-model="value.value"></textarea>
     <input is="coral-textfield" type="type"
-           bo-if="type!=='checkbox'"
+           bo-if="type!=='checkbox' && type!=='textarea'"
            disabled
            readonly
            ng-model="value.value" />
@@ -81,8 +93,15 @@
       <span class="coral-Checkbox-checkmark"></span>
     </label>
     <div class="caconfig-textfield-wrapper">
-      <input is="coral-textfield" type="type"
-             bo-if="type!=='checkbox'"
+       <textarea is="coral-textarea"
+             bo-if="type==='textarea'"
+             ng-model="value.value" ng-trim="false"
+             ng-required="{{property.metadata.properties.required && !property.overridden && !property.inherited && !property.readOnly}}"
+             caconfig-validation="{{validation}}"
+             ng-attr-rows="{{textareaRows}}"
+             name="inputField"></textarea>
+       <input is="coral-textfield" type="type"
+             bo-if="type!=='checkbox' && type!=='textarea'"
              ng-model="value.value"
              ng-trim="false"
              ng-pattern="pattern"
diff --git a/bundle/src/main/resources/angularjs-partials/propertyInputTextarea.html b/bundle/src/main/resources/angularjs-partials/propertyInputTextarea.html
index 09f353d3..9c4dd771 100644
--- a/bundle/src/main/resources/angularjs-partials/propertyInputTextarea.html
+++ b/bundle/src/main/resources/angularjs-partials/propertyInputTextarea.html
@@ -11,8 +11,10 @@
   </div>
   <textarea is="coral-textarea" class="caconfig-if-property-not-overridden-and-not-inherited-and-not-readonly caconfig-if-config-inherited"
             ng-model="property.value"
+            ng-attr-rows="{{textareaRows}}"
             disabled readonly></textarea>
   <textarea is="coral-textarea" class="caconfig-if-property-overridden-or-inherited-or-readonly"
             ng-model="property.effectiveValue"
+            ng-attr-rows="{{textareaRows}}"
             disabled readonly></textarea>
 </div>
diff --git a/bundle/src/main/webapp/app-root/clientlibs/io.wcm.caconfig.editor/js/widgets/multifield.directive.js b/bundle/src/main/webapp/app-root/clientlibs/io.wcm.caconfig.editor/js/widgets/multifield.directive.js
index e4e5f2a0..e7e0aa7c 100644
--- a/bundle/src/main/webapp/app-root/clientlibs/io.wcm.caconfig.editor/js/widgets/multifield.directive.js
+++ b/bundle/src/main/webapp/app-root/clientlibs/io.wcm.caconfig.editor/js/widgets/multifield.directive.js
@@ -55,6 +55,12 @@
       scope.validation = props.validation;
       scope.validationMessage = props.validationMessage ? Granite.I18n.get(props.validationMessage) : undefined;
 
+      // special handling for textarea
+      if (props.widgetType === "textarea") {
+        scope.type = "textarea";
+        scope.textareaRows = props.textareaRows;
+      }
+
       setValueArray(scope.property.effectiveValue, scope.effectiveValues);
       setValueArray(scope.property.value, scope.values);