From 66f70412067e3cf5d5d5d850d67fff0577a39d46 Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Sat, 21 Oct 2023 20:40:17 +0200
Subject: [PATCH] Fix sanitization in log display

---
 frontend/components/Cell.js  | 13 +++++++++----
 frontend/components/Logs.js  | 10 ++++++----
 frontend/components/Popup.js |  2 +-
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/components/Cell.js b/frontend/components/Cell.js
index c162265193..c67b59d752 100644
--- a/frontend/components/Cell.js
+++ b/frontend/components/Cell.js
@@ -98,7 +98,7 @@ const on_jump = (hasBarrier, pluto_actions, cell_id) => () => {
  *  force_hide_input: boolean,
  *  focus_after_creation: boolean,
  *  process_waiting_for_permission: boolean,
- *  sanitze_html: boolean,
+ *  sanitize_html: boolean,
  *  [key: string]: any,
  * }} props
  * */
@@ -139,8 +139,8 @@ export const Cell = ({
 
     const remount = useMemo(() => () => setKey(key + 1))
     // cm_forced_focus is null, except when a line needs to be highlighted because it is part of a stack trace
-    const [cm_forced_focus, set_cm_forced_focus] = useState(/** @type{any} */ (null))
-    const [cm_highlighted_range, set_cm_highlighted_range] = useState(null)
+    const [cm_forced_focus, set_cm_forced_focus] = useState(/** @type {any} */ (null))
+    const [cm_highlighted_range, set_cm_highlighted_range] = useState(/** @type {{from, to}?} */ (null))
     const [cm_highlighted_line, set_cm_highlighted_line] = useState(null)
     const [cm_diagnostics, set_cm_diagnostics] = useState([])
 
@@ -349,7 +349,12 @@ export const Cell = ({
                 onerror=${remount}
             />
             ${show_logs && cell_api_ready
-                ? html`<${Logs} logs=${Object.values(logs)} line_heights=${line_heights} set_cm_highlighted_line=${set_cm_highlighted_line} />`
+                ? html`<${Logs}
+                      logs=${Object.values(logs)}
+                      line_heights=${line_heights}
+                      set_cm_highlighted_line=${set_cm_highlighted_line}
+                      sanitize_html=${sanitize_html}
+                  />`
                 : null}
             <${RunArea}
                 cell_id=${cell_id}
diff --git a/frontend/components/Logs.js b/frontend/components/Logs.js
index 950b909680..529d55bb7a 100644
--- a/frontend/components/Logs.js
+++ b/frontend/components/Logs.js
@@ -20,7 +20,7 @@ const is_stdout_log = (log) => {
     return log.level == STDOUT_LOG_LEVEL
 }
 
-export const Logs = ({ logs, line_heights, set_cm_highlighted_line }) => {
+export const Logs = ({ logs, line_heights, set_cm_highlighted_line, sanitize_html }) => {
     const progress_logs = logs.filter(is_progress_log)
     const latest_progress_logs = progress_logs.reduce((progress_logs, log) => ({ ...progress_logs, [log.id]: log }), {})
     const stdout_log = logs.reduce((stdout_log, log) => {
@@ -63,6 +63,7 @@ export const Logs = ({ logs, line_heights, set_cm_highlighted_line }) => {
         level=${log.level}
         msg=${log.msg}
         kwargs=${log.kwargs}
+        sanitize_html=${sanitize_html}
         key=${i}
         y=${is_hidden_input ? 0 : log.line - 1}
     /> `
@@ -97,9 +98,7 @@ const Progress = ({ progress }) => {
     return html`<pluto-progress-bar ref=${bar_ref}>${Math.ceil(100 * progress)}%</pluto-progress-bar>`
 }
 
-const mimepair_output = (pair) => html`<${SimpleOutputBody} cell_id=${"adsf"} mime=${pair[1]} body=${pair[0]} persist_js_state=${false} />`
-
-const Dot = ({ set_cm_highlighted_line, msg, kwargs, y, level }) => {
+const Dot = ({ set_cm_highlighted_line, msg, kwargs, y, level, sanitize_html }) => {
     const is_progress = is_progress_log({ level, kwargs })
     const is_stdout = level === STDOUT_LOG_LEVEL
     let progress = null
@@ -119,6 +118,9 @@ const Dot = ({ set_cm_highlighted_line, msg, kwargs, y, level }) => {
         level = "Stdout"
     }
 
+    const mimepair_output = (pair) =>
+        html`<${SimpleOutputBody} cell_id=${"adsf"} mime=${pair[1]} body=${pair[0]} persist_js_state=${false} sanitize_html=${sanitize_html} />`
+
     return html`<pluto-log-dot-positioner
         class=${cl({ [level]: true })}
         onMouseenter=${() => is_progress || set_cm_highlighted_line(y + 1)}
diff --git a/frontend/components/Popup.js b/frontend/components/Popup.js
index edf183119c..8a2b47ee4b 100644
--- a/frontend/components/Popup.js
+++ b/frontend/components/Popup.js
@@ -29,7 +29,7 @@ export const help_circle_icon = new URL("https://cdn.jsdelivr.net/gh/ionic-team/
  * @typedef MiscPopupDetails
  * @property {"info" | "warn"} type
  * @property {import("../imports/Preact.js").ReactElement} body
- * @property {HTMLElement} [source_element]
+ * @property {HTMLElement?} [source_element]
  * @property {Boolean} [big]
  */