From 77b4b813a1216e964f8e6d4631d1c2f6d5a927c1 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 19 Jul 2022 13:21:15 -0400
Subject: [PATCH] SearchKit - Allow html in columns

This adds a column type 'html' and defaults rich-text fields to use that column type.
Fixes dev/core#3723
---
 .../SearchDisplay/AbstractRunAction.php       |  7 +++++
 ext/search_kit/ang/crmSearchAdmin.module.js   |  2 +-
 .../crmSearchAdminDisplay.component.js        | 13 +++++++-
 .../displays/colType/field.html               |  8 ++++-
 .../crmSearchAdmin/displays/colType/html.html | 31 +++++++++++++++++++
 .../ang/crmSearchDisplay/colType/html.html    |  2 ++
 6 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 ext/search_kit/ang/crmSearchAdmin/displays/colType/html.html
 create mode 100644 ext/search_kit/ang/crmSearchDisplay/colType/html.html

diff --git a/ext/search_kit/Civi/Api4/Action/SearchDisplay/AbstractRunAction.php b/ext/search_kit/Civi/Api4/Action/SearchDisplay/AbstractRunAction.php
index 59c209f81813..5df9ef6d1ef6 100644
--- a/ext/search_kit/Civi/Api4/Action/SearchDisplay/AbstractRunAction.php
+++ b/ext/search_kit/Civi/Api4/Action/SearchDisplay/AbstractRunAction.php
@@ -206,6 +206,7 @@ private function formatColumn($column, $data) {
     $out = [];
     switch ($column['type']) {
       case 'field':
+      case 'html':
         $rawValue = $data[$column['key']] ?? NULL;
         if (!$this->hasValue($rawValue) && isset($column['empty_value'])) {
           $out['val'] = $this->replaceTokens($column['empty_value'], $data, 'view');
@@ -231,6 +232,12 @@ private function formatColumn($column, $data) {
             $out['edit'] = $edit;
           }
         }
+        if ($column['type'] === 'html') {
+          if (is_array($out['val'])) {
+            $out['val'] = implode(', ', $out['val']);
+          }
+          $out['val'] = \CRM_Utils_String::purifyHTML($out['val']);
+        }
         break;
 
       case 'image':
diff --git a/ext/search_kit/ang/crmSearchAdmin.module.js b/ext/search_kit/ang/crmSearchAdmin.module.js
index ddd9bc3350a1..729be45d6426 100644
--- a/ext/search_kit/ang/crmSearchAdmin.module.js
+++ b/ext/search_kit/ang/crmSearchAdmin.module.js
@@ -317,7 +317,7 @@
         var info = parseExpr(fieldExpr),
           field = (_.findWhere(info.args, {type: 'field'}) || {}).field || {},
           values = _.merge({
-            type: 'field',
+            type: field.input_type === 'RichTextEditor' ? 'html' : 'field',
             key: info.alias,
             dataType: (info.fn && info.fn.data_type) || field.data_type
           }, defaults);
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
index 5956e2b3b648..88ce9ce15535 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
@@ -126,7 +126,7 @@
       };
 
       this.getColLabel = function(col) {
-        if (col.type === 'field' || col.type === 'image') {
+        if (col.type === 'field' || col.type === 'image' || col.type === 'html') {
           return ctrl.getFieldLabel(col.key);
         }
         return ctrl.colTypes[col.type].label;
@@ -162,6 +162,17 @@
         }
       };
 
+      this.toggleHtml = function(col) {
+        if (col.type === 'html') {
+          col.type = 'field';
+        } else {
+          delete col.editable;
+          delete col.link;
+          delete col.icons;
+          col.type = 'html';
+        }
+      };
+
       this.canBeImage = function(col) {
         var expr = ctrl.getExprFromSelect(col.key),
           info = searchMeta.parseExpr(expr);
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html b/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html
index e4337785976e..631a76d3e9d1 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html
@@ -4,6 +4,12 @@
     {{:: ts('Image') }}
   </label>
 </div>
+<div class="form-inline" ng-if=":: !$ctrl.parent.canBeImage(col)">
+  <label>
+    <input type="checkbox" ng-click="$ctrl.parent.toggleHtml(col)" >
+    {{:: ts('Allow HTML') }}
+  </label>
+</div>
 <div class="form-inline crm-search-admin-flex-row" >
   <label title="{{:: ts('Display as clickable link') }}" >
     <input type="checkbox" ng-checked="col.link" ng-click="$ctrl.parent.toggleLink(col)" >
@@ -36,7 +42,7 @@
 <div class="form-inline crm-search-admin-flex-row">
   <label title="{{:: ts('Change the contents of this field, or combine multiple field values.') }}">
     <input type="checkbox" ng-checked="col.rewrite" ng-click="$ctrl.parent.toggleRewrite(col)" >
-    {{:: ts('Rewrite') }}
+    {{:: ts('Rewrite Text') }}
   </label>
   <input type="text" class="form-control crm-flex-1" ng-if="col.rewrite" ng-model="col.rewrite" ng-model-options="{updateOn: 'blur'}">
   <crm-search-admin-token-select ng-if="col.rewrite" model="col" field="rewrite" suffix=":label"></crm-search-admin-token-select>
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/colType/html.html b/ext/search_kit/ang/crmSearchAdmin/displays/colType/html.html
new file mode 100644
index 000000000000..6315986860eb
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/colType/html.html
@@ -0,0 +1,31 @@
+<div class="form-inline">
+  <label>
+    <input type="checkbox" checked ng-click="$ctrl.parent.toggleHtml(col)" >
+    {{:: ts('Allow HTML') }}
+  </label>
+</div>
+<div class="form-inline crm-search-admin-flex-row">
+  <label>
+    <input type="checkbox" ng-checked="col.title" ng-click="col.title = col.title ? null : $ctrl.parent.getFieldLabel(col.key)" >
+    {{:: ts('Tooltip') }}
+  </label>
+  <input class="form-control crm-flex-1" type="text" ng-model="col.title" ng-if="col.title" ng-model-options="{updateOn: 'blur'}" />
+  <crm-search-admin-token-select ng-if="col.title" model="col" field="title" suffix=":label"></crm-search-admin-token-select>
+</div>
+<div class="form-inline crm-search-admin-flex-row">
+  <label title="{{:: ts('HTML to display if the field contents are empty.') }}">
+    <input type="checkbox" ng-checked="col.empty_value" ng-click="$ctrl.parent.toggleEmptyVal(col)" >
+    {{:: ts('Empty placeholder') }}
+  </label>
+  <input type="text" class="form-control crm-flex-1" ng-if="col.empty_value" ng-model="col.empty_value" ng-model-options="{updateOn: 'blur'}">
+  <crm-search-admin-token-select ng-if="col.empty_value" model="col" field="empty_value" suffix=":label"></crm-search-admin-token-select>
+</div>
+<div class="form-inline crm-search-admin-flex-row">
+  <label title="{{:: ts('Change the contents of this field, or combine multiple field values.') }}">
+    <input type="checkbox" ng-checked="col.rewrite" ng-click="$ctrl.parent.toggleRewrite(col)" >
+    {{:: ts('Rewrite HTML') }}
+  </label>
+  <input type="text" class="form-control crm-flex-1" ng-if="col.rewrite" ng-model="col.rewrite" ng-model-options="{updateOn: 'blur'}">
+  <crm-search-admin-token-select ng-if="col.rewrite" model="col" field="rewrite" suffix=":label"></crm-search-admin-token-select>
+</div>
+<search-admin-css-rules label="{{:: ts('Style') }}" item="col" default="col.key"></search-admin-css-rules>
diff --git a/ext/search_kit/ang/crmSearchDisplay/colType/html.html b/ext/search_kit/ang/crmSearchDisplay/colType/html.html
new file mode 100644
index 000000000000..1b79b5e2ad42
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchDisplay/colType/html.html
@@ -0,0 +1,2 @@
+<span ng-bind-html="colData.val">
+</span>