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

package/dist/index.cjs

@@ -326,10 +326,11 @@ var codeTheme = import_view.EditorView.theme({
     padding: "0",
     color: "var(--fg-tertiary)",
     lineHeight: "14px",
-    transform: "translateY(-3px)",
     transition: "color 120ms ease"
   },
+  '.cm-foldGutter .cm-gutterElement > span[title="Fold line"]': { transform: "translateY(-3px)" },
   ".cm-foldGutter .cm-gutterElement > span:hover": { color: "var(--fg-secondary)" },
+  ".fractal-code-block__escape": { color: "var(--fg-secondary)" },
   ".cm-activeLine, .cm-activeLineGutter": { backgroundColor: "var(--bg-surface-1)" },
   ".cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection": {
     backgroundColor: "var(--accent-surface-stroke) !important"
@@ -372,9 +373,8 @@ function countVisualColumns(value) {
   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] ?? "";
+  if (JSON_PROPERTY_PREFIX.test(line)) return Math.min(countVisualColumns(leadingWhitespace), 24);
   return Math.min(countVisualColumns(leadingWhitespace) + 2, 12);
 }
 function buildWrappedLineIndentation(view) {
@@ -407,6 +407,20 @@ var wrappedLineIndentation = import_view.ViewPlugin.fromClass(class {
 }, {
   decorations: (plugin) => plugin.decorations
 });
+var jsonEscapeMatcher = new import_view.MatchDecorator({
+  regexp: /\\(?:["\\/bfnrt]|u[0-9a-fA-F]{4})/g,
+  decoration: import_view.Decoration.mark({ class: "fractal-code-block__escape" })
+});
+var jsonEscapeHighlighting = import_view.ViewPlugin.fromClass(class {
+  constructor(view) {
+    this.decorations = jsonEscapeMatcher.createDeco(view);
+  }
+  update(update) {
+    this.decorations = jsonEscapeMatcher.updateDeco(update, this.decorations);
+  }
+}, {
+  decorations: (plugin) => plugin.decorations
+});
 function formatJsonLinesForDisplay(value) {
   return value.split(/\r?\n/).map((line) => {
     const firstContentIndex = line.search(/\S/);
@@ -520,6 +534,7 @@ function CodeBlock({
     codeTheme,
     (0, import_language.syntaxHighlighting)(fractalHighlightStyle),
     ...resolvedLanguage.support ? [resolvedLanguage.support] : [],
+    ...resolvedLanguage.support ? [jsonEscapeHighlighting] : [],
     ...resolvedLanguage.isJsonLines ? [jsonLinesFoldSupport] : [],
     ...lineNumbers ? [(0, import_language.foldGutter)(), (0, import_view.lineNumbers)()] : [],
     ...wrap ? [import_view.EditorView.lineWrapping, wrappedLineIndentation] : []