Merge remote-tracking branch 'origin/master' into i18n

Author: haraldschilly

src/packages/frontend/jupyter/cell-input.tsx

@@ -233,6 +233,9 @@ export const CellInput: React.FC<CellInputProps> = React.memo(
         value = "";
       }
       value = value.trim();
+      if (props.actions?.processRenderedMarkdown != null) {
+        value = props.actions.processRenderedMarkdown({ value, id: props.id });
+      }
       return (
         <div
           onDoubleClick={handle_md_double_click}

src/packages/frontend/jupyter/cell-list.tsx

@@ -122,7 +122,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     read_only,
   } = props;
 
-  const cell_list_node = useRef<HTMLElement | null>(null);
+  const cellListDivRef = useRef<any>(null);
   const is_mounted = useIsMountedRef();
   const frameActions = useNotebookFrameActions();
 
@@ -140,7 +140,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     frame_actions.focus(true);
     // setup a click handler so we can manage focus
     $(window).on("click", window_click);
-    frame_actions.cell_list_div = $(cell_list_node.current);
+    frame_actions.cell_list_div = $(cellListDivRef.current);
 
     return () => {
       saveScroll();
@@ -172,7 +172,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
   }, [cur_id, scroll, scroll_seq]);
 
   const handleCellListRef = useCallback((node: any) => {
-    cell_list_node.current = node;
+    cellListDivRef.current = node;
     frameActions.current?.set_cell_list_div(node);
   }, []);
 
@@ -186,8 +186,8 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
       // We don't actually need to do anything though since our virtuoso
       // integration automatically solves this same problem.
     } else {
-      if (cell_list_node.current != null) {
-        frameActions.current?.set_scrollTop(cell_list_node.current.scrollTop);
+      if (cellListDivRef.current != null) {
+        frameActions.current?.set_scrollTop(cellListDivRef.current.scrollTop);
       }
     }
   }, [use_windowed_list]);
@@ -206,7 +206,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     let scrollHeight: number = 0;
     for (const tm of [0, 1, 100, 250, 500, 1000]) {
       if (!is_mounted.current) return;
-      const elt = cell_list_node.current;
+      const elt = cellListDivRef.current;
       if (elt != null && elt.scrollHeight !== scrollHeight) {
         // dynamically rendering actually changed something
         elt.scrollTop = scrollTop;
@@ -218,7 +218,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
 
   function window_click(event: any): void {
     // if click in the cell list, focus the cell list; otherwise, blur it.
-    const elt = $(cell_list_node.current);
+    const elt = $(cellListDivRef.current);
     // list no longer exists, nothing left to do
     // Maybe elt can be null? https://github.com/sagemathinc/cocalc/issues/3580
     if (elt.length == 0) return;
@@ -242,8 +242,8 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     }
   }
 
-  async function scroll_cell_list_not_windowed(scroll: Scroll): Promise<void> {
-    const node = $(cell_list_node.current);
+  async function scrollCellListNotWindowed(scroll: Scroll): Promise<void> {
+    const node = $(cellListDivRef.current);
     if (node.length == 0) return;
     if (typeof scroll === "number") {
       node.scrollTop(node.scrollTop() + scroll);
@@ -307,7 +307,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
           align = "end";
           isNotVisible = true;
         } else {
-          const scroller = $(cell_list_node.current);
+          const scroller = $(cellListDivRef.current);
           const cell = scroller.find(`#${cur_id}`);
           if (scroller[0] == null) return;
           if (cell[0] == null) return;
@@ -384,7 +384,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
       scrollCellListVirtuoso(scroll);
     } else {
       // scroll not using windowed list
-      scroll_cell_list_not_windowed(scroll);
+      scrollCellListNotWindowed(scroll);
     }
   }
 
@@ -562,7 +562,6 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
 
   let body;
 
-  const cellListDivRef = useRef<HTMLDivElement>(null);
   const virtuosoHeightsRef = useRef<{ [index: number]: number }>({});
 
   const cellListResize = useResizeObserver({ ref: cellListDivRef });

src/packages/frontend/jupyter/output-messages/mime-types/html.tsx

@@ -13,7 +13,15 @@ const Html = ({
   index?: number;
   trust?: boolean;
 }) => {
-  if (!trust || !requiresStableUnsafeHtml(value)) {
+  // if id and index aren't set no way to track this as stable unsafe html.
+  // This happens, e.g., right now with renderOutput with ipywidgets, which is probably OK, since usually
+  // with widgets the HTML doesn't need to be stable -- you are using widgets for state, not HTML.
+  if (
+    id == null ||
+    index == null ||
+    !trust ||
+    !requiresStableUnsafeHtml(value)
+  ) {
     return <HTML value={value} />;
   }
   return (

src/packages/jupyter/redux/actions.ts

@@ -74,6 +74,7 @@ export abstract class JupyterActions extends Actions<JupyterStoreState> {
   public _complete_request?: number;
   public store: JupyterStore;
   public syncdb: SyncDB;
+  private labels?: { [label: string]: { tag: string; id: string } };
 
   public _init(
     project_id: string,
@@ -380,7 +381,7 @@ export abstract class JupyterActions extends Actions<JupyterStoreState> {
   // Might throw a CellWriteProtectedException
   public set_cell_input(id: string, input: string, save = true): void {
     if (!this.store) return;
-    if (this.store.getIn(["cells", id, "input"]) == input) {
+    if (this.store.getIn(["this.st", id, "input"]) == input) {
       // nothing changed.   Note, I tested doing the above check using
       // both this.syncdb and this.store, and this.store is orders of magnitude faster.
       return;
@@ -2726,6 +2727,149 @@ export abstract class JupyterActions extends Actions<JupyterStoreState> {
     // [ ] TODO: we also need to do this on compute servers, but
     // they don't yet have the listings table.
   };
+
+  processRenderedMarkdown = ({ value, id }: { value: string; id: string }) => {
+    const labelRegExp = /\s*\\label\{.*?\}\s*/g;
+    if (this.labels == null) {
+      const labels = (this.labels = {});
+      // do initial full document scan
+      if (this.store == null) {
+        return;
+      }
+      const cells = this.store.get("cells");
+      if (cells == null) {
+        return;
+      }
+      let n = 0;
+      for (const id of this.store.get_cell_ids_list()) {
+        const cell = cells.get(id);
+        if (cell?.get("cell_type") == "markdown") {
+          const value = cell.get("input") ?? "";
+          value.replace(labelRegExp, (labelContent) => {
+            const label = extractLabel(labelContent);
+            n += 1;
+            labels[label] = { tag: `${n}`, id };
+          });
+        }
+      }
+    }
+    const labels = this.labels;
+    if (labels == null) {
+      throw Error("bug");
+    }
+    const noLabels = value.replace(labelRegExp, (labelContent) => {
+      const label = extractLabel(labelContent);
+      if (labels[label] == null) {
+        labels[label] = { tag: `${misc.len(labels) + 1}`, id };
+      } else {
+        // in case it moved to a different cell due to cut/paste
+        labels[label].id = id;
+      }
+      return `\\tag{${labels[label].tag}}`;
+    });
+    const refRegExp = /\\ref\{.*?\}/g;
+    const noRefs = noLabels.replace(refRegExp, (refContent) => {
+      const label = extractLabel(refContent);
+      if (labels[label] == null) {
+        // nothing to do but strip it
+        return "";
+      }
+      const { tag, id } = labels[label];
+      return `[${tag}](#id=${id})`;
+    });
+
+    const figures = transformFigures(noRefs);
+
+    return figures;
+  };
+}
+
+/*
+Turn this:
+
+---
+
+...
+
+\begin{figure}
+\centering
+\centerline{\includegraphics[width=WIDTH]{URL}}
+\caption{CAPTION}
+\end{figure}
+
+...
+
+---
+
+into this:
+
+---
+
+...
+
+<div style="text-align:center"><img src="URL" style="width:WIDTH"/></div>
+\begin{equation}
+\text{CAPTION}
+\end{equation}
+
+...
+
+---
+
+There can be lots of figures.
+
+*/
+
+function transformFigures(content: string): string {
+  while (true) {
+    const i = content.indexOf("\\begin{figure}");
+    if (i == -1) {
+      return content;
+    }
+    const j = content.indexOf("\\end{figure}");
+    if (j == -1) {
+      return content;
+    }
+    const k = content.indexOf("\\includegraphics");
+    if (k == -1) {
+      return content;
+    }
+    const c = content.indexOf("\\caption{");
+    if (c == -1) {
+      return content;
+    }
+    const c2 = content.lastIndexOf("}", j);
+    if (c2 == -1) {
+      return content;
+    }
+
+    const w = content.indexOf("width=");
+    const w2 = content.indexOf("{", k);
+    const w3 = content.indexOf("}", k);
+    if (w2 == -1 || w3 == -1) {
+      return content;
+    }
+    let style = "";
+    if (w != -1) {
+      style = `width:${content.slice(w + "width=".length, w2 - 1)}`;
+    }
+    const url = content.slice(w2 + 1, w3);
+    const caption = content.slice(c + "\\caption{".length, c2);
+
+    const md = `\n\n<div style="text-align:center"><img src="${url}" style="${style}"/></div>\n\n
+\\begin{equation}
+\\text{${caption}}
+\\end{equation}\n\n`;
+
+    content =
+      content.slice(0, i) + md + content.slice(j + "\\end{figure}".length);
+  }
+}
+
+function extractLabel(content: string): string {
+  const i = content.indexOf("{");
+  const j = content.lastIndexOf("}");
+  return content.slice(i + 1, j);
 }
 
 function bounded_integer(n: any, min: any, max: any, def: any) {