SearchKit - Allow html in columns

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':

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);

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);

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>

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>

ext/search_kit/ang/crmSearchDisplay/colType/html.html

@@ -0,0 +1,2 @@
+<span ng-bind-html="colData.val">
+</span>