Merges adjacent strings in notebooks

packages/components/src/stories/SquigglePlayground.stories.tsx

@@ -251,6 +251,9 @@ Here is more text.",
   " ### This is an opening section
 Here is more text.
 ",
+  "- bullet 1",
+  "- bullet 2",
+  "- bullet 3",
 ]
 
 notebook = notNotebook -> Tag.notebook

packages/components/src/widgets/ArrayWidget.tsx

@@ -1,7 +1,9 @@
 import { useMemo } from "react";
 
+import { SqStringValue, SqValue } from "@quri/squiggle-lang";
 import { DocumentTextIcon } from "@quri/ui";
 
+import { vString } from "../../../squiggle-lang/src/value/VString.js";
 import { ValueViewer } from "../components/SquiggleViewer/ValueViewer/index.js";
 import { SqValueWithContext } from "../lib/utility.js";
 import { widgetRegistry } from "./registry.js";
@@ -11,6 +13,26 @@ function isNotebook(value: SqValueWithContext) {
   return Boolean(value.tags.notebook());
 }
 
+// Combines adjacent string values into a single string value. Helps with rendering in notebooks, so that there aren't unecessary breaks between strings.
+const compressStringValues = (values: SqValue[]): SqValue[] => {
+  return values.reduce((acc: SqValue[], curr) => {
+    // If current and previous are strings, combine them
+    if (
+      curr.tag === "String" &&
+      acc.length > 0 &&
+      acc[acc.length - 1].tag === "String"
+    ) {
+      acc[acc.length - 1] = new SqStringValue(
+        vString(acc[acc.length - 1].value + "\n" + curr.value),
+        acc[acc.length - 1].context
+      );
+      return acc;
+    }
+    // Otherwise add the current value as is
+    return [...acc, curr];
+  }, []);
+};
+
 widgetRegistry.register("Array", {
   heading: (value) => `List(${value.value.getValues().length})`,
 
@@ -23,9 +45,15 @@ widgetRegistry.register("Array", {
   },
   Chart: (value) => {
     const values = useMemo(() => value.value.getValues(), [value]);
+
+    const compressedValues = useMemo(() => {
+      if (!isNotebook(value)) return values;
+      return compressStringValues(values);
+    }, [values, value]);
+
     return (
       <div className="mt-0.5 space-y-1 pt-0.5">
-        {values.map((r, i) => (
+        {compressedValues.map((r, i) => (
           <ValueViewer
             parentValue={value}
             key={i}