From 2bc84cb80b1513b02b7e780c542d96eee025e7ad Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 3 Feb 2022 15:23:24 +0100
Subject: [PATCH] html cell view

---
 packages/web/src/celldata/HtmlCellView.svelte  | 13 +++++++++++++
 packages/web/src/widgets/CellDataWidget.svelte |  9 +++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 packages/web/src/celldata/HtmlCellView.svelte

diff --git a/packages/web/src/celldata/HtmlCellView.svelte b/packages/web/src/celldata/HtmlCellView.svelte
new file mode 100644
index 000000000..6f4cb7b04
--- /dev/null
+++ b/packages/web/src/celldata/HtmlCellView.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  export let selection;
+</script>
+
+{@html selection
+  .map(cell => {
+    const { value } = cell;
+    if (_.isPlainObject(value) || _.isArray(value)) return JSON.stringify(value, undefined, 2);
+    return cell.value;
+  })
+  .join('\n')}
diff --git a/packages/web/src/widgets/CellDataWidget.svelte b/packages/web/src/widgets/CellDataWidget.svelte
index 9e56070d3..b5991b151 100644
--- a/packages/web/src/widgets/CellDataWidget.svelte
+++ b/packages/web/src/widgets/CellDataWidget.svelte
@@ -30,6 +30,12 @@
       component: PictureCellView,
       single: true,
     },
+    {
+      type: 'html',
+      title: 'HTML',
+      component: HtmlCellView,
+      single: false,
+    },
   ];
 
   function autodetect(selection) {
@@ -53,8 +59,7 @@
 
 <script lang="ts">
   import _ from 'lodash';
-  import { onMount } from 'svelte';
-
+  import HtmlCellView from '../celldata/HtmlCellView.svelte';
   import JsonCellView from '../celldata/JsonCellView.svelte';
   import JsonRowView from '../celldata/JsonRowView.svelte';
   import PictureCellView from '../celldata/PictureCellView.svelte';