@mirror-physics/fractal-ui 0.2.0-next.52 → 0.2.0-next.54

package/dist/index.cjs

@@ -296,7 +296,10 @@ var codeTheme = import_view.EditorView.theme({
     overscrollBehavior: "none"
   },
   ".cm-content": { padding: "10px 0" },
-  ".cm-line": { padding: "0 12px" },
+  ".cm-line": {
+    padding: "0 12px 0 calc(12px + var(--fractal-code-wrap-indent, 0ch))",
+    textIndent: "calc(0px - var(--fractal-code-wrap-indent, 0ch))"
+  },
   ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--fg-primary)" },
   ".cm-gutters": {
     backgroundColor: "var(--bg-canvas)",
@@ -306,22 +309,23 @@ var codeTheme = import_view.EditorView.theme({
   ".cm-lineNumbers .cm-gutterElement": { padding: "0 10px 0 4px" },
   ".cm-foldGutter": { width: "14px" },
   ".cm-foldGutter .cm-gutterElement": {
-    display: "flex",
+    position: "relative",
+    display: "block",
     width: "14px",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    padding: "0 1px 0 0"
+    padding: "0"
   },
   ".cm-foldGutter .cm-gutterElement > span": {
+    position: "absolute",
+    top: "2px",
+    left: "0",
     display: "inline-flex",
-    width: "12px",
-    height: "100%",
+    width: "14px",
+    height: "14px",
     alignItems: "center",
     justifyContent: "center",
     padding: "0",
     color: "var(--fg-tertiary)",
-    lineHeight: "1",
-    transform: "translateY(-1px)",
+    lineHeight: "14px",
     transition: "color 120ms ease"
   },
   ".cm-foldGutter .cm-gutterElement > span:hover": { color: "var(--fg-secondary)" },
@@ -359,24 +363,113 @@ var fractalHighlightStyle = import_language.HighlightStyle.define([
 var jsonSupport = (0, import_lang_json.json)();
 var JSON_LANGUAGE_NAMES = /* @__PURE__ */ new Set(["json", "jsonl", "ndjson", "geojson"]);
 var JSON_LINES_LANGUAGE_NAMES = /* @__PURE__ */ new Set(["jsonl", "ndjson"]);
+var JSON_LINES_PRETTY_PRINT_THRESHOLD = 160;
+var JSON_PROPERTY_PREFIX = /^(\s*"(?:\\.|[^"\\])*"\s*:\s*)/;
+function countVisualColumns(value) {
+  let columns = 0;
+  for (const character of value) columns += character === "	" ? 2 : 1;
+  return columns;
+}
+function getWrappedLineIndent(line) {
+  const propertyPrefix = line.match(JSON_PROPERTY_PREFIX)?.[1];
+  if (propertyPrefix) return Math.min(countVisualColumns(propertyPrefix), 24);
+  const leadingWhitespace = line.match(/^\s*/)?.[0] ?? "";
+  return Math.min(countVisualColumns(leadingWhitespace) + 2, 12);
+}
+function buildWrappedLineIndentation(view) {
+  const decorations = [];
+  const decoratedLines = /* @__PURE__ */ new Set();
+  for (const visibleRange of view.visibleRanges) {
+    let position = visibleRange.from;
+    while (position <= visibleRange.to) {
+      const line = view.state.doc.lineAt(position);
+      if (!decoratedLines.has(line.from)) {
+        const indent = getWrappedLineIndent(line.text);
+        decorations.push(import_view.Decoration.line({
+          attributes: { style: `--fractal-code-wrap-indent: ${indent}ch` }
+        }).range(line.from));
+        decoratedLines.add(line.from);
+      }
+      if (line.to >= visibleRange.to) break;
+      position = line.to + 1;
+    }
+  }
+  return import_view.Decoration.set(decorations, true);
+}
+var wrappedLineIndentation = import_view.ViewPlugin.fromClass(class {
+  constructor(view) {
+    this.decorations = buildWrappedLineIndentation(view);
+  }
+  update(update) {
+    this.decorations = buildWrappedLineIndentation(update.view);
+  }
+}, {
+  decorations: (plugin) => plugin.decorations
+});
+function formatJsonLinesForDisplay(value) {
+  return value.split(/\r?\n/).map((line) => {
+    const firstContentIndex = line.search(/\S/);
+    if (firstContentIndex < 0 || line.length - firstContentIndex <= JSON_LINES_PRETTY_PRINT_THRESHOLD) return line;
+    const indentation = line.slice(0, firstContentIndex);
+    try {
+      const parsed = JSON.parse(line.slice(firstContentIndex));
+      if (parsed === null || typeof parsed !== "object") return line;
+      return JSON.stringify(parsed, null, 2).split("\n").map((formattedLine) => `${indentation}${formattedLine}`).join("\n");
+    } catch {
+      return line;
+    }
+  }).join("\n");
+}
+function findJsonContainerEnd(document2, start) {
+  const openingCharacter = document2[start];
+  if (openingCharacter !== "{" && openingCharacter !== "[") return null;
+  const closingCharacters = [];
+  let isInsideString = false;
+  let isEscaped = false;
+  for (let index = start; index < document2.length; index += 1) {
+    const character = document2[index];
+    if (isInsideString) {
+      if (isEscaped) {
+        isEscaped = false;
+      } else if (character === "\\") {
+        isEscaped = true;
+      } else if (character === '"') {
+        isInsideString = false;
+      }
+      continue;
+    }
+    if (character === '"') {
+      isInsideString = true;
+    } else if (character === "{") {
+      closingCharacters.push("}");
+    } else if (character === "[") {
+      closingCharacters.push("]");
+    } else if (character === "}" || character === "]") {
+      if (closingCharacters.pop() !== character) return null;
+      if (closingCharacters.length === 0) return index;
+    }
+  }
+  return null;
+}
 var jsonLinesFoldSupport = import_language.foldService.of((state, lineStart, lineEnd) => {
   const line = state.doc.sliceString(lineStart, lineEnd);
   const firstContentIndex = line.search(/\S/);
   if (firstContentIndex < 0) return null;
-  const lastContentIndex = line.search(/\s*$/) - 1;
+  const containerStart = lineStart + firstContentIndex;
   const openingCharacter = line[firstContentIndex];
-  const closingCharacter = line[lastContentIndex];
-  const isContainer = openingCharacter === "{" && closingCharacter === "}" || openingCharacter === "[" && closingCharacter === "]";
-  if (!isContainer || lastContentIndex - firstContentIndex < 2) return null;
+  if (openingCharacter !== "{" && openingCharacter !== "[") return null;
+  const document2 = state.doc.toString();
+  const containerEnd = findJsonContainerEnd(document2, containerStart);
+  if (containerEnd === null || containerEnd - containerStart < 2) return null;
   try {
-    const parsed = JSON.parse(line.slice(firstContentIndex, lastContentIndex + 1));
+    const parsed = JSON.parse(document2.slice(containerStart, containerEnd + 1));
     if (parsed === null || typeof parsed !== "object") return null;
   } catch {
     return null;
   }
   return {
-    from: lineStart + firstContentIndex + 1,
-    to: lineStart + lastContentIndex
+    from: containerStart + 1,
+    to: containerEnd
   };
 });
 function resolveLanguage(language, fileName) {
@@ -413,6 +506,10 @@ function CodeBlock({
   ...props
 }) {
   const resolvedLanguage = (0, import_react.useMemo)(() => resolveLanguage(language, fileName), [fileName, language]);
+  const displayValue = (0, import_react.useMemo)(
+    () => !editable && resolvedLanguage.isJsonLines ? formatJsonLinesForDisplay(value) : value,
+    [editable, resolvedLanguage.isJsonLines, value]
+  );
   const [copyStatus, setCopyStatus] = (0, import_react.useState)("idle");
   const copyResetTimer = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => () => {
@@ -424,7 +521,7 @@ function CodeBlock({
     ...resolvedLanguage.support ? [resolvedLanguage.support] : [],
     ...resolvedLanguage.isJsonLines ? [jsonLinesFoldSupport] : [],
     ...lineNumbers ? [(0, import_language.foldGutter)(), (0, import_view.lineNumbers)()] : [],
-    ...wrap ? [import_view.EditorView.lineWrapping] : []
+    ...wrap ? [import_view.EditorView.lineWrapping, wrappedLineIndentation] : []
   ], [lineNumbers, resolvedLanguage.isJsonLines, resolvedLanguage.support, wrap]);
   const languageLabel = resolvedLanguage.label;
   const toolbarLabel = label ?? fileName ?? languageLabel;
@@ -475,7 +572,7 @@ function CodeBlock({
           import_react_codemirror.default,
           {
             "aria-label": surfaceLabel,
-            value,
+            value: displayValue,
             editable,
             readOnly: !editable,
             onChange,