@mirror-physics/fractal-ui 0.2.0-next.53 → 0.2.0-next.55

package/dist/index.js

@@ -170,7 +170,12 @@ import { useEffect, useMemo, useRef, useState as useState2 } from "react";
 import CodeMirror from "@uiw/react-codemirror";
 import { HighlightStyle, foldGutter, foldService, syntaxHighlighting } from "@codemirror/language";
 import { json } from "@codemirror/lang-json";
-import { EditorView, lineNumbers as lineNumberGutter } from "@codemirror/view";
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  lineNumbers as lineNumberGutter
+} from "@codemirror/view";
 import { tags } from "@lezer/highlight";
 import { Check, Copy } from "@mirror-physics/fractal-icons";
 import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -187,7 +192,10 @@ var codeTheme = 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)",
@@ -214,6 +222,7 @@ var codeTheme = EditorView.theme({
     padding: "0",
     color: "var(--fg-tertiary)",
     lineHeight: "14px",
+    transform: "translateY(-3px)",
     transition: "color 120ms ease"
   },
   ".cm-foldGutter .cm-gutterElement > span:hover": { color: "var(--fg-secondary)" },
@@ -252,6 +261,48 @@ var jsonSupport = 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(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 Decoration.set(decorations, true);
+}
+var wrappedLineIndentation = 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/);
@@ -367,7 +418,7 @@ function CodeBlock({
     ...resolvedLanguage.support ? [resolvedLanguage.support] : [],
     ...resolvedLanguage.isJsonLines ? [jsonLinesFoldSupport] : [],
     ...lineNumbers ? [foldGutter(), lineNumberGutter()] : [],
-    ...wrap ? [EditorView.lineWrapping] : []
+    ...wrap ? [EditorView.lineWrapping, wrappedLineIndentation] : []
   ], [lineNumbers, resolvedLanguage.isJsonLines, resolvedLanguage.support, wrap]);
   const languageLabel = resolvedLanguage.label;
   const toolbarLabel = label ?? fileName ?? languageLabel;