CI4: HTML being escaped inside tables

[objecttothis]

HTML inside the bootstrap table is being escaped so that it displays plain text rather than passing the HTML through to the page.

/public/js/manage_tables.js is calling Items->getSearch()

	var init = function (_options) {
		options = _options;
		enable_actions = enable_actions(options.enableActions);
		load_success = load_success(options.onLoadSuccess);
		$('#table')
			.addClass("table-striped")
			.addClass("table-bordered")
			.bootstrapTable($.extend(options, {
			columns: options.headers,
			stickyHeader: true,
			stickyHeaderOffsetLeft: $('#table').offset().right + 'px',
			stickyHeaderOffsetRight: $('#table').offset().right + 'px',
			url: options.resource + '/search',
			sidePagination: 'server',
			selectItemName: 'btSelectItem',
			pageSize: options.pageSize,
			pagination: true,
			search: options.resource || false,
			showColumns: true,
			clickToSelect: true,
			showExport: true,
			exportDataType: 'basic',
			exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
			exportOptions: {
				fileName: options.resource.replace(/.*\/(.*?)$/g, '$1')
			},
			onPageChange: function(response) {
				load_success(response);
				enable_actions();
			},
			toolbar: '#toolbar',
			uniqueId: options.uniqueId || 'id',
			trimOnSearch: false,
			onCheck: enable_actions,
			onUncheck: enable_actions,
			onCheckAll: enable_actions,
			onUncheckAll: enable_actions,
			onLoadSuccess: function(response) {
				load_success(response);
				enable_actions();
			},
			onColumnSwitch : function(field, checked) {
				var user_settings = localStorage[options.employee_id];
				user_settings = (user_settings && JSON.parse(user_settings)) || {};
				user_settings[options.resource] = user_settings[options.resource] || {};
				user_settings[options.resource][field] = checked;
				localStorage[options.employee_id] = JSON.stringify(user_settings);
				dialog_support.init("a.modal-dlg");
			},
			queryParamsType: 'limit',
			iconSize: 'sm',
			silentSort: true,
			paginationVAlign: 'bottom',
			escape: false
		}));
		enable_actions();
		init_delete();
		init_restore();
		toggle_column_visibility();
		dialog_support.init("button.modal-dlg");
	};

Items->getSearch is returning correct JSON, but the HTML in the item_pic column is being escaped. The same html outside of the table renders the image as it should.

[objecttothis]

From what I can see, we are using bootstrap-tables to generate this (https://bootstrap-table.com/docs/api/table-options/#escape) but escape is set to false in the manage_tables function.

[odiea]

This is line 52 in Tabular helper that should fix that issue.

'escape' => !preg_match("/(edit|phone_number|email|messages|item_pic|customer_name|note)/", key($element)) && !(isset($element['escape']) && !$element['escape']),

[objecttothis]

This is line 52 in Tabular helper that should fix that issue.

'escape' => !preg_match("/(edit|phone_number|email|messages|item_pic|customer_name|note)/", key($element)) && !(isset($element['escape']) && !$element['escape']),

BINGO. @odiea , you won the internet. Adding item_pic to the regex resolved the issue.