@apipass/design-system 5.7.0 → 5.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/embedded-styles.js +2 -2
- package/dist/lib/style.css +1 -1
- package/dist/lib/ui/primitives/JsonViewer/JsonEditor.cjs +1 -1
- package/dist/lib/ui/primitives/JsonViewer/JsonEditor.cjs.map +1 -1
- package/dist/lib/ui/primitives/JsonViewer/JsonEditor.js +43 -42
- package/dist/lib/ui/primitives/JsonViewer/JsonEditor.js.map +1 -1
- package/dist/lib/ui/primitives/JsonViewer/JsonViewer.cjs +1 -1
- package/dist/lib/ui/primitives/JsonViewer/JsonViewer.cjs.map +1 -1
- package/dist/lib/ui/primitives/JsonViewer/JsonViewer.js +33 -26
- package/dist/lib/ui/primitives/JsonViewer/JsonViewer.js.map +1 -1
- package/dist/lib/ui/primitives/JsonViewer/json-code-mirror.cjs +1 -1
- package/dist/lib/ui/primitives/JsonViewer/json-code-mirror.cjs.map +1 -1
- package/dist/lib/ui/primitives/JsonViewer/json-code-mirror.js +36 -31
- package/dist/lib/ui/primitives/JsonViewer/json-code-mirror.js.map +1 -1
- package/dist/types/ui/primitives/JsonViewer/JsonEditor.d.ts +3 -3
- package/dist/types/ui/primitives/JsonViewer/JsonViewer.d.ts +3 -3
- package/dist/types/ui/primitives/JsonViewer/json-code-mirror.d.ts +7 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),r=require("react"),T=require("../../../vendor/clsx/dist/clsx.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),r=require("react"),T=require("../../../vendor/clsx/dist/clsx.cjs"),l=require("@codemirror/state"),d=require("@codemirror/view"),R=require("@codemirror/language"),a=require("./json-code-mirror.cjs");;/* empty css */const V=require("../../icons/IconChevronDown.cjs"),N=require("../../icons/IconChevronRight.cjs"),O=require("../Button/Button.cjs");function v(t,o){o.length>0&&t.dispatch({effects:o.map(f=>R.foldEffect.of(f))})}function A({value:t,onChange:o,expandAllLabel:f,className:S,height:b,minHeight:q,maxHeight:y,isDisabled:m=!1,isReadOnly:C=!1,"aria-label":z}){const E=r.useRef(null),s=r.useRef(null),p=r.useRef(new l.Compartment),u=r.useRef(o),x=r.useRef(t),[w,F]=r.useState(!1),I=a.toEditorSizeStyle({height:b,minHeight:q,maxHeight:y}),i=!m&&!C;u.current=o,r.useEffect(()=>{if(!E.current)return;const e=d.EditorView.updateListener.of(g=>{var j;if(!g.docChanged)return;const h=g.state.doc.toString();x.current=h,(j=u.current)==null||j.call(u,h)}),n=new d.EditorView({parent:E.current,state:l.EditorState.create({doc:t,extensions:[p.current.of([d.EditorView.editable.of(i),l.EditorState.readOnly.of(!i)]),a.jsonEditorTheme,...a.jsonEditorExtensions,e]})});return s.current=n,v(n,a.computeFirstLevelFoldRanges(t)),()=>{n.destroy(),s.current=null}},[]),r.useEffect(()=>{const e=s.current;if(!e)return;const n=e.state.doc.toString();t!==n&&t!==x.current&&(e.dispatch({changes:{from:0,to:n.length,insert:t}}),x.current=t)},[t]),r.useEffect(()=>{const e=s.current;e&&e.dispatch({effects:p.current.reconfigure([d.EditorView.editable.of(i),l.EditorState.readOnly.of(!i)])})},[i]);const L=()=>{const e=s.current;e&&(w?v(e,a.computeFirstLevelFoldRanges(e.state.doc.toString())):R.unfoldAll(e),F(!w))};return c.jsxs("div",{className:T.clsx("json-viewer","json-viewer-editable",S),"data-disabled":m||void 0,children:[c.jsx(O.Button,{"aria-label":f,variant:"subtle",size:"small",className:"json-viewer-expand-all",onPress:L,children:w?c.jsx(V.IconChevronDown,{size:"14"}):c.jsx(N.IconChevronRight,{size:"14"})}),c.jsx("div",{ref:E,className:"json-viewer-content",style:I,"aria-label":z,role:"textbox","aria-multiline":"true"})]})}exports.JsonEditor=A;
|
|
2
2
|
//# sourceMappingURL=JsonEditor.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JsonEditor.cjs","sources":["../../../../../src/ui/primitives/JsonViewer/JsonEditor.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { Compartment, EditorState } from \"@codemirror/state\";\nimport { EditorView } from \"@codemirror/view\";\nimport { foldEffect, unfoldAll } from \"@codemirror/language\";\nimport { Button } from \"primitives\";\nimport { IconChevronDown, IconChevronRight } from \"icons\";\nimport {
|
|
1
|
+
{"version":3,"file":"JsonEditor.cjs","sources":["../../../../../src/ui/primitives/JsonViewer/JsonEditor.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { Compartment, EditorState } from \"@codemirror/state\";\nimport { EditorView } from \"@codemirror/view\";\nimport { foldEffect, unfoldAll } from \"@codemirror/language\";\nimport { Button } from \"primitives\";\nimport { IconChevronDown, IconChevronRight } from \"icons\";\nimport {\n computeFirstLevelFoldRanges,\n jsonEditorExtensions,\n jsonEditorTheme,\n toEditorSizeStyle,\n} from \"./json-code-mirror\";\nimport type { JsonEditorSize } from \"./json-code-mirror\";\nimport \"./jsonviewer.css\";\n\nexport interface JsonEditorProps extends JsonEditorSize {\n value: string;\n onChange?: (value: string) => void;\n expandAllLabel: string;\n className?: string;\n isDisabled?: boolean;\n isReadOnly?: boolean;\n \"aria-label\"?: string;\n}\n\nfunction applyFoldRanges(view: EditorView, ranges: { from: number; to: number }[]) {\n if (ranges.length > 0) view.dispatch({ effects: ranges.map((range) => foldEffect.of(range)) });\n}\n\n/**\n * Editable sibling of `JsonViewer`: same CodeMirror-based visual (syntax\n * colors, gutter, scrollbar, border/background) but with typing enabled.\n * `JsonViewer` stays read-only-only on purpose so its bundle keeps assuming\n * a static document; this component owns the editable/controlled behavior.\n */\nexport function JsonEditor({\n value,\n onChange,\n expandAllLabel,\n className,\n height,\n minHeight,\n maxHeight,\n isDisabled = false,\n isReadOnly = false,\n \"aria-label\": ariaLabel,\n}: JsonEditorProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const viewRef = useRef<EditorView | null>(null);\n const editableCompartment = useRef(new Compartment());\n const onChangeRef = useRef(onChange);\n const lastEmittedRef = useRef(value);\n const [isExpanded, setIsExpanded] = useState(false);\n const editorSizeStyle = toEditorSizeStyle({ height, minHeight, maxHeight });\n const isEditable = !isDisabled && !isReadOnly;\n\n onChangeRef.current = onChange;\n\n useEffect(() => {\n if (!containerRef.current) return;\n const updateListener = EditorView.updateListener.of((update) => {\n if (!update.docChanged) return;\n const nextText = update.state.doc.toString();\n lastEmittedRef.current = nextText;\n onChangeRef.current?.(nextText);\n });\n const view = new EditorView({\n parent: containerRef.current,\n state: EditorState.create({\n doc: value,\n extensions: [\n editableCompartment.current.of([EditorView.editable.of(isEditable), EditorState.readOnly.of(!isEditable)]),\n jsonEditorTheme,\n ...jsonEditorExtensions,\n updateListener,\n ],\n }),\n });\n viewRef.current = view;\n applyFoldRanges(view, computeFirstLevelFoldRanges(value));\n return () => {\n view.destroy();\n viewRef.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n const view = viewRef.current;\n if (!view) return;\n const currentText = view.state.doc.toString();\n if (value !== currentText && value !== lastEmittedRef.current) {\n view.dispatch({ changes: { from: 0, to: currentText.length, insert: value } });\n lastEmittedRef.current = value;\n }\n }, [value]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (!view) return;\n view.dispatch({\n effects: editableCompartment.current.reconfigure([\n EditorView.editable.of(isEditable),\n EditorState.readOnly.of(!isEditable),\n ]),\n });\n }, [isEditable]);\n\n const toggleExpandAll = () => {\n const view = viewRef.current;\n if (!view) return;\n if (isExpanded) {\n applyFoldRanges(view, computeFirstLevelFoldRanges(view.state.doc.toString()));\n } else {\n unfoldAll(view);\n }\n setIsExpanded(!isExpanded);\n };\n\n return (\n <div className={clsx(\"json-viewer\", \"json-viewer-editable\", className)} data-disabled={isDisabled || undefined}>\n <Button\n aria-label={expandAllLabel}\n variant=\"subtle\"\n size=\"small\"\n className=\"json-viewer-expand-all\"\n onPress={toggleExpandAll}\n >\n {isExpanded ? <IconChevronDown size=\"14\" /> : <IconChevronRight size=\"14\" />}\n </Button>\n <div\n ref={containerRef}\n className=\"json-viewer-content\"\n style={editorSizeStyle}\n aria-label={ariaLabel}\n role=\"textbox\"\n aria-multiline=\"true\"\n />\n </div>\n );\n}\n"],"names":["applyFoldRanges","view","ranges","range","foldEffect","JsonEditor","value","onChange","expandAllLabel","className","height","minHeight","maxHeight","isDisabled","isReadOnly","ariaLabel","containerRef","useRef","viewRef","editableCompartment","Compartment","onChangeRef","lastEmittedRef","isExpanded","setIsExpanded","useState","editorSizeStyle","toEditorSizeStyle","isEditable","useEffect","updateListener","EditorView","update","nextText","_a","EditorState","jsonEditorTheme","jsonEditorExtensions","computeFirstLevelFoldRanges","currentText","toggleExpandAll","unfoldAll","jsxs","clsx","jsx","Button","IconChevronDown","IconChevronRight"],"mappings":"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"}
|
|
@@ -1,49 +1,50 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as s, useState as
|
|
3
|
-
import { clsx as
|
|
4
|
-
import { Compartment as
|
|
5
|
-
import { EditorView as
|
|
6
|
-
import { foldEffect as
|
|
7
|
-
import {
|
|
1
|
+
import { jsxs as T, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as s, useState as A, useEffect as p } from "react";
|
|
3
|
+
import { clsx as O } from "../../../vendor/clsx/dist/clsx.js";
|
|
4
|
+
import { Compartment as B, EditorState as x } from "@codemirror/state";
|
|
5
|
+
import { EditorView as l } from "@codemirror/view";
|
|
6
|
+
import { foldEffect as J, unfoldAll as P } from "@codemirror/language";
|
|
7
|
+
import { toEditorSizeStyle as V, jsonEditorTheme as k, jsonEditorExtensions as q, computeFirstLevelFoldRanges as v } from "./json-code-mirror.js";
|
|
8
8
|
/* empty css */
|
|
9
|
-
import { IconChevronDown as
|
|
10
|
-
import { IconChevronRight as
|
|
11
|
-
import { Button as
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
o.length > 0 && e.dispatch({ effects: o.map((l) => N.of(l)) });
|
|
9
|
+
import { IconChevronDown as D } from "../../icons/IconChevronDown.js";
|
|
10
|
+
import { IconChevronRight as G } from "../../icons/IconChevronRight.js";
|
|
11
|
+
import { Button as H } from "../Button/Button.js";
|
|
12
|
+
function S(e, o) {
|
|
13
|
+
o.length > 0 && e.dispatch({ effects: o.map((f) => J.of(f)) });
|
|
15
14
|
}
|
|
16
|
-
function
|
|
15
|
+
function et({
|
|
17
16
|
value: e,
|
|
18
17
|
onChange: o,
|
|
19
|
-
expandAllLabel:
|
|
20
|
-
className:
|
|
21
|
-
height:
|
|
18
|
+
expandAllLabel: f,
|
|
19
|
+
className: j,
|
|
20
|
+
height: y,
|
|
21
|
+
minHeight: R,
|
|
22
|
+
maxHeight: z,
|
|
22
23
|
isDisabled: E = !1,
|
|
23
|
-
isReadOnly:
|
|
24
|
-
"aria-label":
|
|
24
|
+
isReadOnly: C = !1,
|
|
25
|
+
"aria-label": F
|
|
25
26
|
}) {
|
|
26
|
-
const d = s(null), n = s(null),
|
|
27
|
+
const d = s(null), n = s(null), w = s(new B()), c = s(o), m = s(e), [u, I] = A(!1), L = V({ height: y, minHeight: R, maxHeight: z }), i = !E && !C;
|
|
27
28
|
c.current = o, p(() => {
|
|
28
29
|
if (!d.current) return;
|
|
29
|
-
const t =
|
|
30
|
-
var
|
|
31
|
-
if (!
|
|
32
|
-
const
|
|
33
|
-
m.current =
|
|
34
|
-
}), r = new
|
|
30
|
+
const t = l.updateListener.of((h) => {
|
|
31
|
+
var g;
|
|
32
|
+
if (!h.docChanged) return;
|
|
33
|
+
const b = h.state.doc.toString();
|
|
34
|
+
m.current = b, (g = c.current) == null || g.call(c, b);
|
|
35
|
+
}), r = new l({
|
|
35
36
|
parent: d.current,
|
|
36
37
|
state: x.create({
|
|
37
38
|
doc: e,
|
|
38
39
|
extensions: [
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
...
|
|
40
|
+
w.current.of([l.editable.of(i), x.readOnly.of(!i)]),
|
|
41
|
+
k,
|
|
42
|
+
...q,
|
|
42
43
|
t
|
|
43
44
|
]
|
|
44
45
|
})
|
|
45
46
|
});
|
|
46
|
-
return n.current = r,
|
|
47
|
+
return n.current = r, S(r, v(e)), () => {
|
|
47
48
|
r.destroy(), n.current = null;
|
|
48
49
|
};
|
|
49
50
|
}, []), p(() => {
|
|
@@ -54,26 +55,26 @@ function tt({
|
|
|
54
55
|
}, [e]), p(() => {
|
|
55
56
|
const t = n.current;
|
|
56
57
|
t && t.dispatch({
|
|
57
|
-
effects:
|
|
58
|
-
|
|
58
|
+
effects: w.current.reconfigure([
|
|
59
|
+
l.editable.of(i),
|
|
59
60
|
x.readOnly.of(!i)
|
|
60
61
|
])
|
|
61
62
|
});
|
|
62
63
|
}, [i]);
|
|
63
|
-
const
|
|
64
|
+
const N = () => {
|
|
64
65
|
const t = n.current;
|
|
65
|
-
t && (u ?
|
|
66
|
+
t && (u ? S(t, v(t.state.doc.toString())) : P(t), I(!u));
|
|
66
67
|
};
|
|
67
|
-
return /* @__PURE__ */
|
|
68
|
+
return /* @__PURE__ */ T("div", { className: O("json-viewer", "json-viewer-editable", j), "data-disabled": E || void 0, children: [
|
|
68
69
|
/* @__PURE__ */ a(
|
|
69
|
-
|
|
70
|
+
H,
|
|
70
71
|
{
|
|
71
|
-
"aria-label":
|
|
72
|
+
"aria-label": f,
|
|
72
73
|
variant: "subtle",
|
|
73
74
|
size: "small",
|
|
74
75
|
className: "json-viewer-expand-all",
|
|
75
|
-
onPress:
|
|
76
|
-
children: u ? /* @__PURE__ */ a(
|
|
76
|
+
onPress: N,
|
|
77
|
+
children: u ? /* @__PURE__ */ a(D, { size: "14" }) : /* @__PURE__ */ a(G, { size: "14" })
|
|
77
78
|
}
|
|
78
79
|
),
|
|
79
80
|
/* @__PURE__ */ a(
|
|
@@ -81,8 +82,8 @@ function tt({
|
|
|
81
82
|
{
|
|
82
83
|
ref: d,
|
|
83
84
|
className: "json-viewer-content",
|
|
84
|
-
style:
|
|
85
|
-
"aria-label":
|
|
85
|
+
style: L,
|
|
86
|
+
"aria-label": F,
|
|
86
87
|
role: "textbox",
|
|
87
88
|
"aria-multiline": "true"
|
|
88
89
|
}
|
|
@@ -90,6 +91,6 @@ function tt({
|
|
|
90
91
|
] });
|
|
91
92
|
}
|
|
92
93
|
export {
|
|
93
|
-
|
|
94
|
+
et as JsonEditor
|
|
94
95
|
};
|
|
95
96
|
//# sourceMappingURL=JsonEditor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JsonEditor.js","sources":["../../../../../src/ui/primitives/JsonViewer/JsonEditor.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { Compartment, EditorState } from \"@codemirror/state\";\nimport { EditorView } from \"@codemirror/view\";\nimport { foldEffect, unfoldAll } from \"@codemirror/language\";\nimport { Button } from \"primitives\";\nimport { IconChevronDown, IconChevronRight } from \"icons\";\nimport {
|
|
1
|
+
{"version":3,"file":"JsonEditor.js","sources":["../../../../../src/ui/primitives/JsonViewer/JsonEditor.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { Compartment, EditorState } from \"@codemirror/state\";\nimport { EditorView } from \"@codemirror/view\";\nimport { foldEffect, unfoldAll } from \"@codemirror/language\";\nimport { Button } from \"primitives\";\nimport { IconChevronDown, IconChevronRight } from \"icons\";\nimport {\n computeFirstLevelFoldRanges,\n jsonEditorExtensions,\n jsonEditorTheme,\n toEditorSizeStyle,\n} from \"./json-code-mirror\";\nimport type { JsonEditorSize } from \"./json-code-mirror\";\nimport \"./jsonviewer.css\";\n\nexport interface JsonEditorProps extends JsonEditorSize {\n value: string;\n onChange?: (value: string) => void;\n expandAllLabel: string;\n className?: string;\n isDisabled?: boolean;\n isReadOnly?: boolean;\n \"aria-label\"?: string;\n}\n\nfunction applyFoldRanges(view: EditorView, ranges: { from: number; to: number }[]) {\n if (ranges.length > 0) view.dispatch({ effects: ranges.map((range) => foldEffect.of(range)) });\n}\n\n/**\n * Editable sibling of `JsonViewer`: same CodeMirror-based visual (syntax\n * colors, gutter, scrollbar, border/background) but with typing enabled.\n * `JsonViewer` stays read-only-only on purpose so its bundle keeps assuming\n * a static document; this component owns the editable/controlled behavior.\n */\nexport function JsonEditor({\n value,\n onChange,\n expandAllLabel,\n className,\n height,\n minHeight,\n maxHeight,\n isDisabled = false,\n isReadOnly = false,\n \"aria-label\": ariaLabel,\n}: JsonEditorProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const viewRef = useRef<EditorView | null>(null);\n const editableCompartment = useRef(new Compartment());\n const onChangeRef = useRef(onChange);\n const lastEmittedRef = useRef(value);\n const [isExpanded, setIsExpanded] = useState(false);\n const editorSizeStyle = toEditorSizeStyle({ height, minHeight, maxHeight });\n const isEditable = !isDisabled && !isReadOnly;\n\n onChangeRef.current = onChange;\n\n useEffect(() => {\n if (!containerRef.current) return;\n const updateListener = EditorView.updateListener.of((update) => {\n if (!update.docChanged) return;\n const nextText = update.state.doc.toString();\n lastEmittedRef.current = nextText;\n onChangeRef.current?.(nextText);\n });\n const view = new EditorView({\n parent: containerRef.current,\n state: EditorState.create({\n doc: value,\n extensions: [\n editableCompartment.current.of([EditorView.editable.of(isEditable), EditorState.readOnly.of(!isEditable)]),\n jsonEditorTheme,\n ...jsonEditorExtensions,\n updateListener,\n ],\n }),\n });\n viewRef.current = view;\n applyFoldRanges(view, computeFirstLevelFoldRanges(value));\n return () => {\n view.destroy();\n viewRef.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n const view = viewRef.current;\n if (!view) return;\n const currentText = view.state.doc.toString();\n if (value !== currentText && value !== lastEmittedRef.current) {\n view.dispatch({ changes: { from: 0, to: currentText.length, insert: value } });\n lastEmittedRef.current = value;\n }\n }, [value]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (!view) return;\n view.dispatch({\n effects: editableCompartment.current.reconfigure([\n EditorView.editable.of(isEditable),\n EditorState.readOnly.of(!isEditable),\n ]),\n });\n }, [isEditable]);\n\n const toggleExpandAll = () => {\n const view = viewRef.current;\n if (!view) return;\n if (isExpanded) {\n applyFoldRanges(view, computeFirstLevelFoldRanges(view.state.doc.toString()));\n } else {\n unfoldAll(view);\n }\n setIsExpanded(!isExpanded);\n };\n\n return (\n <div className={clsx(\"json-viewer\", \"json-viewer-editable\", className)} data-disabled={isDisabled || undefined}>\n <Button\n aria-label={expandAllLabel}\n variant=\"subtle\"\n size=\"small\"\n className=\"json-viewer-expand-all\"\n onPress={toggleExpandAll}\n >\n {isExpanded ? <IconChevronDown size=\"14\" /> : <IconChevronRight size=\"14\" />}\n </Button>\n <div\n ref={containerRef}\n className=\"json-viewer-content\"\n style={editorSizeStyle}\n aria-label={ariaLabel}\n role=\"textbox\"\n aria-multiline=\"true\"\n />\n </div>\n );\n}\n"],"names":["applyFoldRanges","view","ranges","range","foldEffect","JsonEditor","value","onChange","expandAllLabel","className","height","minHeight","maxHeight","isDisabled","isReadOnly","ariaLabel","containerRef","useRef","viewRef","editableCompartment","Compartment","onChangeRef","lastEmittedRef","isExpanded","setIsExpanded","useState","editorSizeStyle","toEditorSizeStyle","isEditable","useEffect","updateListener","EditorView","update","nextText","_a","EditorState","jsonEditorTheme","jsonEditorExtensions","computeFirstLevelFoldRanges","currentText","toggleExpandAll","unfoldAll","jsxs","clsx","jsx","Button","IconChevronDown","IconChevronRight"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),y=require("../../../vendor/clsx/dist/clsx.cjs"),h=require("@codemirror/state"),j=require("@codemirror/view"),m=require("@codemirror/language"),o=require("./json-code-mirror.cjs");;/* empty css */const b=require("../../icons/IconChevronDown.cjs"),z=require("../../icons/IconChevronRight.cjs"),w=require("../Button/Button.cjs");function f(i,c){c.length>0&&i.dispatch({effects:c.map(r=>m.foldEffect.of(r))})}function C({value:i,expandAllLabel:c,actions:r,className:g,height:E,minHeight:p,maxHeight:q}){const u=s.useRef(null),l=s.useRef(null),[d,v]=s.useState(!1),n=s.useMemo(()=>o.serializeJson(i),[i]),a=s.useMemo(()=>o.computeFirstLevelFoldRanges(n),[n]),R=o.toEditorSizeStyle({height:E,minHeight:p,maxHeight:q});s.useEffect(()=>{if(!u.current)return;const e=new j.EditorView({parent:u.current,state:h.EditorState.create({doc:n,extensions:[j.EditorView.editable.of(!1),h.EditorState.readOnly.of(!0),o.jsonEditorTheme,...o.jsonEditorExtensions]})});return l.current=e,f(e,a),()=>{e.destroy(),l.current=null}},[]),s.useEffect(()=>{const e=l.current;if(!e)return;const x=e.state.doc.toString();x!==n&&(e.dispatch({changes:{from:0,to:x.length,insert:n}}),f(e,a),v(!1))},[n,a]);const S=()=>{const e=l.current;e&&(d?f(e,a):m.unfoldAll(e),v(!d))};return t.jsxs("div",{className:y.clsx("json-viewer",g),children:[t.jsx(w.Button,{"aria-label":c,variant:"subtle",size:"small",className:"json-viewer-expand-all",onPress:S,children:d?t.jsx(b.IconChevronDown,{size:"14"}):t.jsx(z.IconChevronRight,{size:"14"})}),r&&r.length>0&&t.jsx("div",{className:"json-viewer-actions",children:r.map(e=>t.jsx(w.Button,{"aria-label":e.label,variant:"subtle",size:"small",className:"json-viewer-action",onPress:e.onPress,children:e.icon},e.key))}),t.jsx("div",{ref:u,className:"json-viewer-content",style:R})]})}exports.JsonViewer=C;
|
|
2
2
|
//# sourceMappingURL=JsonViewer.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JsonViewer.cjs","sources":["../../../../../src/ui/primitives/JsonViewer/JsonViewer.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { EditorState } from \"@codemirror/state\";\nimport { EditorView } from \"@codemirror/view\";\nimport { foldEffect, unfoldAll } from \"@codemirror/language\";\nimport { Button } from \"primitives\";\nimport { IconChevronDown, IconChevronRight } from \"icons\";\nimport {\n computeFirstLevelFoldRanges,\n jsonEditorExtensions,\n jsonEditorTheme,\n serializeJson,\n
|
|
1
|
+
{"version":3,"file":"JsonViewer.cjs","sources":["../../../../../src/ui/primitives/JsonViewer/JsonViewer.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { EditorState } from \"@codemirror/state\";\nimport { EditorView } from \"@codemirror/view\";\nimport { foldEffect, unfoldAll } from \"@codemirror/language\";\nimport { Button } from \"primitives\";\nimport { IconChevronDown, IconChevronRight } from \"icons\";\nimport {\n computeFirstLevelFoldRanges,\n jsonEditorExtensions,\n jsonEditorTheme,\n serializeJson,\n toEditorSizeStyle,\n} from \"./json-code-mirror\";\nimport type { JsonEditorSize } from \"./json-code-mirror\";\nimport \"./jsonviewer.css\";\n\nexport interface JsonViewerAction {\n key: string;\n label: string;\n icon: ReactNode;\n onPress: () => void;\n}\n\nexport interface JsonViewerProps extends JsonEditorSize {\n value: unknown;\n expandAllLabel: string;\n actions?: JsonViewerAction[];\n className?: string;\n}\n\nfunction applyFoldRanges(view: EditorView, ranges: { from: number; to: number }[]) {\n if (ranges.length > 0) view.dispatch({ effects: ranges.map((range) => foldEffect.of(range)) });\n}\n\nexport function JsonViewer({\n value,\n expandAllLabel,\n actions,\n className,\n height,\n minHeight,\n maxHeight,\n}: JsonViewerProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const viewRef = useRef<EditorView | null>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n const text = useMemo(() => serializeJson(value), [value]);\n const foldRanges = useMemo(() => computeFirstLevelFoldRanges(text), [text]);\n const editorSizeStyle = toEditorSizeStyle({ height, minHeight, maxHeight });\n\n useEffect(() => {\n if (!containerRef.current) return;\n const view = new EditorView({\n parent: containerRef.current,\n state: EditorState.create({\n doc: text,\n extensions: [EditorView.editable.of(false), EditorState.readOnly.of(true), jsonEditorTheme, ...jsonEditorExtensions],\n }),\n });\n viewRef.current = view;\n applyFoldRanges(view, foldRanges);\n return () => {\n view.destroy();\n viewRef.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n const view = viewRef.current;\n if (!view) return;\n const currentText = view.state.doc.toString();\n if (currentText !== text) {\n view.dispatch({ changes: { from: 0, to: currentText.length, insert: text } });\n applyFoldRanges(view, foldRanges);\n setIsExpanded(false);\n }\n }, [text, foldRanges]);\n\n const toggleExpandAll = () => {\n const view = viewRef.current;\n if (!view) return;\n if (isExpanded) {\n applyFoldRanges(view, foldRanges);\n } else {\n unfoldAll(view);\n }\n setIsExpanded(!isExpanded);\n };\n\n return (\n <div className={clsx(\"json-viewer\", className)}>\n <Button\n aria-label={expandAllLabel}\n variant=\"subtle\"\n size=\"small\"\n className=\"json-viewer-expand-all\"\n onPress={toggleExpandAll}\n >\n {isExpanded ? <IconChevronDown size=\"14\" /> : <IconChevronRight size=\"14\" />}\n </Button>\n {actions && actions.length > 0 && (\n <div className=\"json-viewer-actions\">\n {actions.map((action) => (\n <Button\n key={action.key}\n aria-label={action.label}\n variant=\"subtle\"\n size=\"small\"\n className=\"json-viewer-action\"\n onPress={action.onPress}\n >\n {action.icon}\n </Button>\n ))}\n </div>\n )}\n <div ref={containerRef} className=\"json-viewer-content\" style={editorSizeStyle} />\n </div>\n );\n}\n"],"names":["applyFoldRanges","view","ranges","range","foldEffect","JsonViewer","value","expandAllLabel","actions","className","height","minHeight","maxHeight","containerRef","useRef","viewRef","isExpanded","setIsExpanded","useState","text","useMemo","serializeJson","foldRanges","computeFirstLevelFoldRanges","editorSizeStyle","toEditorSizeStyle","useEffect","EditorView","EditorState","jsonEditorTheme","jsonEditorExtensions","currentText","toggleExpandAll","unfoldAll","clsx","jsx","Button","IconChevronDown","IconChevronRight","action"],"mappings":"8dAgCA,SAASA,EAAgBC,EAAkBC,EAAwC,CAC7EA,EAAO,OAAS,GAAGD,EAAK,SAAS,CAAE,QAASC,EAAO,IAAKC,GAAUC,EAAAA,WAAW,GAAGD,CAAK,CAAC,EAAG,CAC/F,CAEO,SAASE,EAAW,CACzB,MAAAC,EACA,eAAAC,EACA,QAAAC,EACA,UAAAC,EACA,OAAAC,EACA,UAAAC,EACA,UAAAC,CACF,EAAoB,CAClB,MAAMC,EAAeC,EAAAA,OAAuB,IAAI,EAC1CC,EAAUD,EAAAA,OAA0B,IAAI,EACxC,CAACE,EAAYC,CAAa,EAAIC,EAAAA,SAAS,EAAK,EAC5CC,EAAOC,EAAAA,QAAQ,IAAMC,EAAAA,cAAcf,CAAK,EAAG,CAACA,CAAK,CAAC,EAClDgB,EAAaF,EAAAA,QAAQ,IAAMG,EAAAA,4BAA4BJ,CAAI,EAAG,CAACA,CAAI,CAAC,EACpEK,EAAkBC,EAAAA,kBAAkB,CAAE,OAAAf,EAAQ,UAAAC,EAAW,UAAAC,EAAW,EAE1Ec,EAAAA,UAAU,IAAM,CACd,GAAI,CAACb,EAAa,QAAS,OAC3B,MAAMZ,EAAO,IAAI0B,aAAW,CAC1B,OAAQd,EAAa,QACrB,MAAOe,EAAAA,YAAY,OAAO,CACxB,IAAKT,EACL,WAAY,CAACQ,EAAAA,WAAW,SAAS,GAAG,EAAK,EAAGC,cAAY,SAAS,GAAG,EAAI,EAAGC,EAAAA,gBAAiB,GAAGC,EAAAA,oBAAoB,CAAA,CACpH,CAAA,CACF,EACD,OAAAf,EAAQ,QAAUd,EAClBD,EAAgBC,EAAMqB,CAAU,EACzB,IAAM,CACXrB,EAAK,QAAA,EACLc,EAAQ,QAAU,IACpB,CAEF,EAAG,CAAA,CAAE,EAELW,EAAAA,UAAU,IAAM,CACd,MAAMzB,EAAOc,EAAQ,QACrB,GAAI,CAACd,EAAM,OACX,MAAM8B,EAAc9B,EAAK,MAAM,IAAI,SAAA,EAC/B8B,IAAgBZ,IAClBlB,EAAK,SAAS,CAAE,QAAS,CAAE,KAAM,EAAG,GAAI8B,EAAY,OAAQ,OAAQZ,CAAA,CAAK,CAAG,EAC5EnB,EAAgBC,EAAMqB,CAAU,EAChCL,EAAc,EAAK,EAEvB,EAAG,CAACE,EAAMG,CAAU,CAAC,EAErB,MAAMU,EAAkB,IAAM,CAC5B,MAAM/B,EAAOc,EAAQ,QAChBd,IACDe,EACFhB,EAAgBC,EAAMqB,CAAU,EAEhCW,EAAAA,UAAUhC,CAAI,EAEhBgB,EAAc,CAACD,CAAU,EAC3B,EAEA,cACG,MAAA,CAAI,UAAWkB,EAAAA,KAAK,cAAezB,CAAS,EAC3C,SAAA,CAAA0B,EAAAA,IAACC,EAAAA,OAAA,CACC,aAAY7B,EACZ,QAAQ,SACR,KAAK,QACL,UAAU,yBACV,QAASyB,EAER,SAAAhB,QAAcqB,EAAAA,gBAAA,CAAgB,KAAK,KAAK,EAAKF,EAAAA,IAACG,EAAAA,iBAAA,CAAiB,KAAK,IAAA,CAAK,CAAA,CAAA,EAE3E9B,GAAWA,EAAQ,OAAS,GAC3B2B,EAAAA,IAAC,MAAA,CAAI,UAAU,sBACZ,SAAA3B,EAAQ,IAAK+B,GACZJ,EAAAA,IAACC,EAAAA,OAAA,CAEC,aAAYG,EAAO,MACnB,QAAQ,SACR,KAAK,QACL,UAAU,qBACV,QAASA,EAAO,QAEf,SAAAA,EAAO,IAAA,EAPHA,EAAO,GAAA,CASf,EACH,QAED,MAAA,CAAI,IAAK1B,EAAc,UAAU,sBAAsB,MAAOW,CAAA,CAAiB,CAAA,EAClF,CAEJ"}
|
|
@@ -1,33 +1,40 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as u, useState as
|
|
3
|
-
import { clsx as
|
|
4
|
-
import { EditorState as
|
|
1
|
+
import { jsxs as S, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as u, useState as b, useMemo as p, useEffect as v } from "react";
|
|
3
|
+
import { clsx as N } from "../../../vendor/clsx/dist/clsx.js";
|
|
4
|
+
import { EditorState as h } from "@codemirror/state";
|
|
5
5
|
import { EditorView as w } from "@codemirror/view";
|
|
6
|
-
import { foldEffect as
|
|
7
|
-
import { serializeJson as
|
|
6
|
+
import { foldEffect as F, unfoldAll as I } from "@codemirror/language";
|
|
7
|
+
import { serializeJson as P, computeFirstLevelFoldRanges as A, jsonEditorTheme as C, jsonEditorExtensions as J, toEditorSizeStyle as T } from "./json-code-mirror.js";
|
|
8
8
|
/* empty css */
|
|
9
|
-
import { IconChevronDown as
|
|
10
|
-
import { IconChevronRight as
|
|
11
|
-
import { Button as
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
n.length > 0 && s.dispatch({ effects: n.map((o) => N.of(o)) });
|
|
9
|
+
import { IconChevronDown as V } from "../../icons/IconChevronDown.js";
|
|
10
|
+
import { IconChevronRight as k } from "../../icons/IconChevronRight.js";
|
|
11
|
+
import { Button as x } from "../Button/Button.js";
|
|
12
|
+
function f(n, s) {
|
|
13
|
+
s.length > 0 && n.dispatch({ effects: s.map((o) => F.of(o)) });
|
|
15
14
|
}
|
|
16
|
-
function
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
function W({
|
|
16
|
+
value: n,
|
|
17
|
+
expandAllLabel: s,
|
|
18
|
+
actions: o,
|
|
19
|
+
className: E,
|
|
20
|
+
height: g,
|
|
21
|
+
minHeight: j,
|
|
22
|
+
maxHeight: y
|
|
23
|
+
}) {
|
|
24
|
+
const a = u(null), i = u(null), [c, m] = b(!1), t = p(() => P(n), [n]), l = p(() => A(t), [t]), z = T({ height: g, minHeight: j, maxHeight: y });
|
|
25
|
+
v(() => {
|
|
19
26
|
if (!a.current) return;
|
|
20
27
|
const e = new w({
|
|
21
28
|
parent: a.current,
|
|
22
|
-
state:
|
|
29
|
+
state: h.create({
|
|
23
30
|
doc: t,
|
|
24
|
-
extensions: [w.editable.of(!1),
|
|
31
|
+
extensions: [w.editable.of(!1), h.readOnly.of(!0), C, ...J]
|
|
25
32
|
})
|
|
26
33
|
});
|
|
27
34
|
return i.current = e, f(e, l), () => {
|
|
28
35
|
e.destroy(), i.current = null;
|
|
29
36
|
};
|
|
30
|
-
}, []),
|
|
37
|
+
}, []), v(() => {
|
|
31
38
|
const e = i.current;
|
|
32
39
|
if (!e) return;
|
|
33
40
|
const d = e.state.doc.toString();
|
|
@@ -35,22 +42,22 @@ function K({ value: s, expandAllLabel: n, actions: o, className: x, height: E })
|
|
|
35
42
|
}, [t, l]);
|
|
36
43
|
const R = () => {
|
|
37
44
|
const e = i.current;
|
|
38
|
-
e && (c ? f(e, l) :
|
|
45
|
+
e && (c ? f(e, l) : I(e), m(!c));
|
|
39
46
|
};
|
|
40
|
-
return /* @__PURE__ */
|
|
47
|
+
return /* @__PURE__ */ S("div", { className: N("json-viewer", E), children: [
|
|
41
48
|
/* @__PURE__ */ r(
|
|
42
|
-
|
|
49
|
+
x,
|
|
43
50
|
{
|
|
44
|
-
"aria-label":
|
|
51
|
+
"aria-label": s,
|
|
45
52
|
variant: "subtle",
|
|
46
53
|
size: "small",
|
|
47
54
|
className: "json-viewer-expand-all",
|
|
48
55
|
onPress: R,
|
|
49
|
-
children: c ? /* @__PURE__ */ r(
|
|
56
|
+
children: c ? /* @__PURE__ */ r(V, { size: "14" }) : /* @__PURE__ */ r(k, { size: "14" })
|
|
50
57
|
}
|
|
51
58
|
),
|
|
52
59
|
o && o.length > 0 && /* @__PURE__ */ r("div", { className: "json-viewer-actions", children: o.map((e) => /* @__PURE__ */ r(
|
|
53
|
-
|
|
60
|
+
x,
|
|
54
61
|
{
|
|
55
62
|
"aria-label": e.label,
|
|
56
63
|
variant: "subtle",
|
|
@@ -61,10 +68,10 @@ function K({ value: s, expandAllLabel: n, actions: o, className: x, height: E })
|
|
|
61
68
|
},
|
|
62
69
|
e.key
|
|
63
70
|
)) }),
|
|
64
|
-
/* @__PURE__ */ r("div", { ref: a, className: "json-viewer-content", style:
|
|
71
|
+
/* @__PURE__ */ r("div", { ref: a, className: "json-viewer-content", style: z })
|
|
65
72
|
] });
|
|
66
73
|
}
|
|
67
74
|
export {
|
|
68
|
-
|
|
75
|
+
W as JsonViewer
|
|
69
76
|
};
|
|
70
77
|
//# sourceMappingURL=JsonViewer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JsonViewer.js","sources":["../../../../../src/ui/primitives/JsonViewer/JsonViewer.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { EditorState } from \"@codemirror/state\";\nimport { EditorView } from \"@codemirror/view\";\nimport { foldEffect, unfoldAll } from \"@codemirror/language\";\nimport { Button } from \"primitives\";\nimport { IconChevronDown, IconChevronRight } from \"icons\";\nimport {\n computeFirstLevelFoldRanges,\n jsonEditorExtensions,\n jsonEditorTheme,\n serializeJson,\n
|
|
1
|
+
{"version":3,"file":"JsonViewer.js","sources":["../../../../../src/ui/primitives/JsonViewer/JsonViewer.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { EditorState } from \"@codemirror/state\";\nimport { EditorView } from \"@codemirror/view\";\nimport { foldEffect, unfoldAll } from \"@codemirror/language\";\nimport { Button } from \"primitives\";\nimport { IconChevronDown, IconChevronRight } from \"icons\";\nimport {\n computeFirstLevelFoldRanges,\n jsonEditorExtensions,\n jsonEditorTheme,\n serializeJson,\n toEditorSizeStyle,\n} from \"./json-code-mirror\";\nimport type { JsonEditorSize } from \"./json-code-mirror\";\nimport \"./jsonviewer.css\";\n\nexport interface JsonViewerAction {\n key: string;\n label: string;\n icon: ReactNode;\n onPress: () => void;\n}\n\nexport interface JsonViewerProps extends JsonEditorSize {\n value: unknown;\n expandAllLabel: string;\n actions?: JsonViewerAction[];\n className?: string;\n}\n\nfunction applyFoldRanges(view: EditorView, ranges: { from: number; to: number }[]) {\n if (ranges.length > 0) view.dispatch({ effects: ranges.map((range) => foldEffect.of(range)) });\n}\n\nexport function JsonViewer({\n value,\n expandAllLabel,\n actions,\n className,\n height,\n minHeight,\n maxHeight,\n}: JsonViewerProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const viewRef = useRef<EditorView | null>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n const text = useMemo(() => serializeJson(value), [value]);\n const foldRanges = useMemo(() => computeFirstLevelFoldRanges(text), [text]);\n const editorSizeStyle = toEditorSizeStyle({ height, minHeight, maxHeight });\n\n useEffect(() => {\n if (!containerRef.current) return;\n const view = new EditorView({\n parent: containerRef.current,\n state: EditorState.create({\n doc: text,\n extensions: [EditorView.editable.of(false), EditorState.readOnly.of(true), jsonEditorTheme, ...jsonEditorExtensions],\n }),\n });\n viewRef.current = view;\n applyFoldRanges(view, foldRanges);\n return () => {\n view.destroy();\n viewRef.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n const view = viewRef.current;\n if (!view) return;\n const currentText = view.state.doc.toString();\n if (currentText !== text) {\n view.dispatch({ changes: { from: 0, to: currentText.length, insert: text } });\n applyFoldRanges(view, foldRanges);\n setIsExpanded(false);\n }\n }, [text, foldRanges]);\n\n const toggleExpandAll = () => {\n const view = viewRef.current;\n if (!view) return;\n if (isExpanded) {\n applyFoldRanges(view, foldRanges);\n } else {\n unfoldAll(view);\n }\n setIsExpanded(!isExpanded);\n };\n\n return (\n <div className={clsx(\"json-viewer\", className)}>\n <Button\n aria-label={expandAllLabel}\n variant=\"subtle\"\n size=\"small\"\n className=\"json-viewer-expand-all\"\n onPress={toggleExpandAll}\n >\n {isExpanded ? <IconChevronDown size=\"14\" /> : <IconChevronRight size=\"14\" />}\n </Button>\n {actions && actions.length > 0 && (\n <div className=\"json-viewer-actions\">\n {actions.map((action) => (\n <Button\n key={action.key}\n aria-label={action.label}\n variant=\"subtle\"\n size=\"small\"\n className=\"json-viewer-action\"\n onPress={action.onPress}\n >\n {action.icon}\n </Button>\n ))}\n </div>\n )}\n <div ref={containerRef} className=\"json-viewer-content\" style={editorSizeStyle} />\n </div>\n );\n}\n"],"names":["applyFoldRanges","view","ranges","range","foldEffect","JsonViewer","value","expandAllLabel","actions","className","height","minHeight","maxHeight","containerRef","useRef","viewRef","isExpanded","setIsExpanded","useState","text","useMemo","serializeJson","foldRanges","computeFirstLevelFoldRanges","editorSizeStyle","toEditorSizeStyle","useEffect","EditorView","EditorState","jsonEditorTheme","jsonEditorExtensions","currentText","toggleExpandAll","unfoldAll","clsx","jsx","Button","IconChevronDown","IconChevronRight","action"],"mappings":";;;;;;;;;;;AAgCA,SAASA,EAAgBC,GAAkBC,GAAwC;AACjF,EAAIA,EAAO,SAAS,KAAGD,EAAK,SAAS,EAAE,SAASC,EAAO,IAAI,CAACC,MAAUC,EAAW,GAAGD,CAAK,CAAC,GAAG;AAC/F;AAEO,SAASE,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AACF,GAAoB;AAClB,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAUD,EAA0B,IAAI,GACxC,CAACE,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5CC,IAAOC,EAAQ,MAAMC,EAAcf,CAAK,GAAG,CAACA,CAAK,CAAC,GAClDgB,IAAaF,EAAQ,MAAMG,EAA4BJ,CAAI,GAAG,CAACA,CAAI,CAAC,GACpEK,IAAkBC,EAAkB,EAAE,QAAAf,GAAQ,WAAAC,GAAW,WAAAC,GAAW;AAE1E,EAAAc,EAAU,MAAM;AACd,QAAI,CAACb,EAAa,QAAS;AAC3B,UAAMZ,IAAO,IAAI0B,EAAW;AAAA,MAC1B,QAAQd,EAAa;AAAA,MACrB,OAAOe,EAAY,OAAO;AAAA,QACxB,KAAKT;AAAA,QACL,YAAY,CAACQ,EAAW,SAAS,GAAG,EAAK,GAAGC,EAAY,SAAS,GAAG,EAAI,GAAGC,GAAiB,GAAGC,CAAoB;AAAA,MAAA,CACpH;AAAA,IAAA,CACF;AACD,WAAAf,EAAQ,UAAUd,GAClBD,EAAgBC,GAAMqB,CAAU,GACzB,MAAM;AACX,MAAArB,EAAK,QAAA,GACLc,EAAQ,UAAU;AAAA,IACpB;AAAA,EAEF,GAAG,CAAA,CAAE,GAELW,EAAU,MAAM;AACd,UAAMzB,IAAOc,EAAQ;AACrB,QAAI,CAACd,EAAM;AACX,UAAM8B,IAAc9B,EAAK,MAAM,IAAI,SAAA;AACnC,IAAI8B,MAAgBZ,MAClBlB,EAAK,SAAS,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI8B,EAAY,QAAQ,QAAQZ,EAAA,EAAK,CAAG,GAC5EnB,EAAgBC,GAAMqB,CAAU,GAChCL,EAAc,EAAK;AAAA,EAEvB,GAAG,CAACE,GAAMG,CAAU,CAAC;AAErB,QAAMU,IAAkB,MAAM;AAC5B,UAAM/B,IAAOc,EAAQ;AACrB,IAAKd,MACDe,IACFhB,EAAgBC,GAAMqB,CAAU,IAEhCW,EAAUhC,CAAI,GAEhBgB,EAAc,CAACD,CAAU;AAAA,EAC3B;AAEA,2BACG,OAAA,EAAI,WAAWkB,EAAK,eAAezB,CAAS,GAC3C,UAAA;AAAA,IAAA,gBAAA0B;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,cAAY7B;AAAA,QACZ,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAASyB;AAAA,QAER,UAAAhB,sBAAcqB,GAAA,EAAgB,MAAK,MAAK,IAAK,gBAAAF,EAACG,GAAA,EAAiB,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAE3E9B,KAAWA,EAAQ,SAAS,KAC3B,gBAAA2B,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAA3B,EAAQ,IAAI,CAAC+B,MACZ,gBAAAJ;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,cAAYG,EAAO;AAAA,QACnB,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAASA,EAAO;AAAA,QAEf,UAAAA,EAAO;AAAA,MAAA;AAAA,MAPHA,EAAO;AAAA,IAAA,CASf,GACH;AAAA,sBAED,OAAA,EAAI,KAAK1B,GAAc,WAAU,uBAAsB,OAAOW,EAAA,CAAiB;AAAA,EAAA,GAClF;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("@codemirror/view"),d=require("@codemirror/lang-json"),g=require("@codemirror/language"),t=require("@lezer/highlight"),u=g.HighlightStyle.define([{tag:t.tags.propertyName,color:"var(--json-viewer-color-key)"},{tag:t.tags.string,color:"var(--json-viewer-color-string)",fontWeight:600},{tag:[t.tags.number,t.tags.bool,t.tags.null],color:"var(--json-viewer-color-scalar)"},{tag:[t.tags.separator,t.tags.squareBracket,t.tags.brace],color:"var(--json-viewer-color-punctuation)"}]),p=f.EditorView.theme({"&":{backgroundColor:"transparent",color:"var(--json-viewer-color-punctuation)",fontSize:"13px"},"&.cm-focused":{outline:"none"},".cm-content":{fontFamily:"var(--sds-typography-family-mono)",padding:"8px 124px 12px 4px"},".cm-gutters":{backgroundColor:"transparent",border:"none",color:"var(--json-viewer-color-caret)",paddingLeft:"5px"},".cm-scroller":{overflow:"auto"}}),h=[d.json(),g.foldGutter(),g.syntaxHighlighting(u)];function v(e){try{return JSON.stringify(e,null,2)??"null"}catch{return String(e)}}function a(e){return typeof e=="number"?`${e}px`:e}function j({height:e,minHeight:r,maxHeight:i}){const o={};return e!==void 0&&(o["--json-viewer-height"]=a(e)),r!==void 0&&(o["--json-viewer-min-height"]=a(r)),i!==void 0&&(o["--json-viewer-max-height"]=a(i)),o}function m(e){const r=[],i=e.length;let o=0;for(;o<i&&e[o]!=="{"&&e[o]!=="[";)o++;if(o>=i)return r;let s=0,c=!1,l=-1;for(;o<i;o++){const n=e[o];if(c){n==="\\"?o++:n==='"'&&(c=!1);continue}if(n==='"'){c=!0;continue}if(n==="{"||n==="["){s++,s===2&&(l=o+1);continue}(n==="}"||n==="]")&&(s===2&&l!==-1&&(r.push({from:l,to:o}),l=-1),s--)}return r}exports.computeFirstLevelFoldRanges=m;exports.jsonEditorExtensions=h;exports.jsonEditorTheme=p;exports.jsonHighlightStyle=u;exports.serializeJson=v;exports.toCssSize=a;exports.toEditorSizeStyle=j;
|
|
2
2
|
//# sourceMappingURL=json-code-mirror.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"json-code-mirror.cjs","sources":["../../../../../src/ui/primitives/JsonViewer/json-code-mirror.ts"],"sourcesContent":["import { EditorView } from \"@codemirror/view\";\nimport { json } from \"@codemirror/lang-json\";\nimport { foldGutter, HighlightStyle, syntaxHighlighting } from \"@codemirror/language\";\nimport { tags as t } from \"@lezer/highlight\";\n\nexport const jsonHighlightStyle = HighlightStyle.define([\n { tag: t.propertyName, color: \"var(--json-viewer-color-key)\" },\n { tag: t.string, color: \"var(--json-viewer-color-string)\", fontWeight: 600 },\n { tag: [t.number, t.bool, t.null], color: \"var(--json-viewer-color-scalar)\" },\n { tag: [t.separator, t.squareBracket, t.brace], color: \"var(--json-viewer-color-punctuation)\" },\n]);\n\nexport const jsonEditorTheme = EditorView.theme({\n \"&\": { backgroundColor: \"transparent\", color: \"var(--json-viewer-color-punctuation)\", fontSize: \"13px\" },\n \"&.cm-focused\": { outline: \"none\" },\n \".cm-content\": { fontFamily: \"var(--sds-typography-family-mono)\", padding: \"8px 124px 12px 4px\" },\n \".cm-gutters\": {\n backgroundColor: \"transparent\",\n border: \"none\",\n color: \"var(--json-viewer-color-caret)\",\n paddingLeft: \"5px\",\n },\n \".cm-scroller\": { overflow: \"auto\" },\n});\n\nexport const jsonEditorExtensions = [json(), foldGutter(), syntaxHighlighting(jsonHighlightStyle)];\n\nexport function serializeJson(value: unknown): string {\n try {\n return JSON.stringify(value, null, 2) ?? \"null\";\n } catch {\n return String(value);\n }\n}\n\nexport function toCssSize(size: string | number): string {\n return typeof size === \"number\" ? `${size}px` : size;\n}\n\n/**\n * Finds the fold range of every direct child (depth 1) of the root object/array\n * by scanning the text itself for matching brackets. This mirrors what\n * CodeMirror's `foldable()` would compute, but doesn't depend on the lezer\n * parser having finished tokenizing the document — which for a multi-MB\n * document is not guaranteed synchronously at mount time.\n */\nexport function computeFirstLevelFoldRanges(text: string): { from: number; to: number }[] {\n const ranges: { from: number; to: number }[] = [];\n const n = text.length;\n let i = 0;\n while (i < n && text[i] !== \"{\" && text[i] !== \"[\") i++;\n if (i >= n) return ranges;\n\n let depth = 0;\n let inString = false;\n let pendingStart = -1;\n for (; i < n; i++) {\n const ch = text[i];\n if (inString) {\n if (ch === \"\\\\\") i++;\n else if (ch === '\"') inString = false;\n continue;\n }\n if (ch === '\"') {\n inString = true;\n continue;\n }\n if (ch === \"{\" || ch === \"[\") {\n depth++;\n if (depth === 2) pendingStart = i + 1;\n continue;\n }\n if (ch === \"}\" || ch === \"]\") {\n if (depth === 2 && pendingStart !== -1) {\n ranges.push({ from: pendingStart, to: i });\n pendingStart = -1;\n }\n depth--;\n }\n }\n return ranges;\n}\n"],"names":["jsonHighlightStyle","HighlightStyle","t","jsonEditorTheme","EditorView","jsonEditorExtensions","json","foldGutter","syntaxHighlighting","serializeJson","value","toCssSize","size","computeFirstLevelFoldRanges","text","ranges","n","i","depth","inString","pendingStart","ch"],"mappings":"
|
|
1
|
+
{"version":3,"file":"json-code-mirror.cjs","sources":["../../../../../src/ui/primitives/JsonViewer/json-code-mirror.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { EditorView } from \"@codemirror/view\";\nimport { json } from \"@codemirror/lang-json\";\nimport { foldGutter, HighlightStyle, syntaxHighlighting } from \"@codemirror/language\";\nimport { tags as t } from \"@lezer/highlight\";\n\nexport const jsonHighlightStyle = HighlightStyle.define([\n { tag: t.propertyName, color: \"var(--json-viewer-color-key)\" },\n { tag: t.string, color: \"var(--json-viewer-color-string)\", fontWeight: 600 },\n { tag: [t.number, t.bool, t.null], color: \"var(--json-viewer-color-scalar)\" },\n { tag: [t.separator, t.squareBracket, t.brace], color: \"var(--json-viewer-color-punctuation)\" },\n]);\n\nexport const jsonEditorTheme = EditorView.theme({\n \"&\": { backgroundColor: \"transparent\", color: \"var(--json-viewer-color-punctuation)\", fontSize: \"13px\" },\n \"&.cm-focused\": { outline: \"none\" },\n \".cm-content\": { fontFamily: \"var(--sds-typography-family-mono)\", padding: \"8px 124px 12px 4px\" },\n \".cm-gutters\": {\n backgroundColor: \"transparent\",\n border: \"none\",\n color: \"var(--json-viewer-color-caret)\",\n paddingLeft: \"5px\",\n },\n \".cm-scroller\": { overflow: \"auto\" },\n});\n\nexport const jsonEditorExtensions = [json(), foldGutter(), syntaxHighlighting(jsonHighlightStyle)];\n\nexport function serializeJson(value: unknown): string {\n try {\n return JSON.stringify(value, null, 2) ?? \"null\";\n } catch {\n return String(value);\n }\n}\n\nexport function toCssSize(size: string | number): string {\n return typeof size === \"number\" ? `${size}px` : size;\n}\n\nexport interface JsonEditorSize {\n height?: string | number;\n minHeight?: string | number;\n maxHeight?: string | number;\n}\n\nexport function toEditorSizeStyle({ height, minHeight, maxHeight }: JsonEditorSize): CSSProperties {\n const sizeVariables: Record<string, string> = {};\n if (height !== undefined) sizeVariables[\"--json-viewer-height\"] = toCssSize(height);\n if (minHeight !== undefined) sizeVariables[\"--json-viewer-min-height\"] = toCssSize(minHeight);\n if (maxHeight !== undefined) sizeVariables[\"--json-viewer-max-height\"] = toCssSize(maxHeight);\n return sizeVariables as CSSProperties;\n}\n\n/**\n * Finds the fold range of every direct child (depth 1) of the root object/array\n * by scanning the text itself for matching brackets. This mirrors what\n * CodeMirror's `foldable()` would compute, but doesn't depend on the lezer\n * parser having finished tokenizing the document — which for a multi-MB\n * document is not guaranteed synchronously at mount time.\n */\nexport function computeFirstLevelFoldRanges(text: string): { from: number; to: number }[] {\n const ranges: { from: number; to: number }[] = [];\n const n = text.length;\n let i = 0;\n while (i < n && text[i] !== \"{\" && text[i] !== \"[\") i++;\n if (i >= n) return ranges;\n\n let depth = 0;\n let inString = false;\n let pendingStart = -1;\n for (; i < n; i++) {\n const ch = text[i];\n if (inString) {\n if (ch === \"\\\\\") i++;\n else if (ch === '\"') inString = false;\n continue;\n }\n if (ch === '\"') {\n inString = true;\n continue;\n }\n if (ch === \"{\" || ch === \"[\") {\n depth++;\n if (depth === 2) pendingStart = i + 1;\n continue;\n }\n if (ch === \"}\" || ch === \"]\") {\n if (depth === 2 && pendingStart !== -1) {\n ranges.push({ from: pendingStart, to: i });\n pendingStart = -1;\n }\n depth--;\n }\n }\n return ranges;\n}\n"],"names":["jsonHighlightStyle","HighlightStyle","t","jsonEditorTheme","EditorView","jsonEditorExtensions","json","foldGutter","syntaxHighlighting","serializeJson","value","toCssSize","size","toEditorSizeStyle","height","minHeight","maxHeight","sizeVariables","computeFirstLevelFoldRanges","text","ranges","n","i","depth","inString","pendingStart","ch"],"mappings":"uNAMaA,EAAqBC,EAAAA,eAAe,OAAO,CACtD,CAAE,IAAKC,EAAAA,KAAE,aAAc,MAAO,8BAAA,EAC9B,CAAE,IAAKA,EAAAA,KAAE,OAAQ,MAAO,kCAAmC,WAAY,GAAA,EACvE,CAAE,IAAK,CAACA,OAAE,OAAQA,EAAAA,KAAE,KAAMA,EAAAA,KAAE,IAAI,EAAG,MAAO,iCAAA,EAC1C,CAAE,IAAK,CAACA,EAAAA,KAAE,UAAWA,EAAAA,KAAE,cAAeA,OAAE,KAAK,EAAG,MAAO,sCAAA,CACzD,CAAC,EAEYC,EAAkBC,EAAAA,WAAW,MAAM,CAC9C,IAAK,CAAE,gBAAiB,cAAe,MAAO,uCAAwC,SAAU,MAAA,EAChG,eAAgB,CAAE,QAAS,MAAA,EAC3B,cAAe,CAAE,WAAY,oCAAqC,QAAS,oBAAA,EAC3E,cAAe,CACb,gBAAiB,cACjB,OAAQ,OACR,MAAO,iCACP,YAAa,KAAA,EAEf,eAAgB,CAAE,SAAU,MAAA,CAC9B,CAAC,EAEYC,EAAuB,CAACC,EAAAA,KAAA,EAAQC,EAAAA,aAAcC,EAAAA,mBAAmBR,CAAkB,CAAC,EAE1F,SAASS,EAAcC,EAAwB,CACpD,GAAI,CACF,OAAO,KAAK,UAAUA,EAAO,KAAM,CAAC,GAAK,MAC3C,MAAQ,CACN,OAAO,OAAOA,CAAK,CACrB,CACF,CAEO,SAASC,EAAUC,EAA+B,CACvD,OAAO,OAAOA,GAAS,SAAW,GAAGA,CAAI,KAAOA,CAClD,CAQO,SAASC,EAAkB,CAAE,OAAAC,EAAQ,UAAAC,EAAW,UAAAC,GAA4C,CACjG,MAAMC,EAAwC,CAAA,EAC9C,OAAIH,IAAW,SAAWG,EAAc,sBAAsB,EAAIN,EAAUG,CAAM,GAC9EC,IAAc,SAAWE,EAAc,0BAA0B,EAAIN,EAAUI,CAAS,GACxFC,IAAc,SAAWC,EAAc,0BAA0B,EAAIN,EAAUK,CAAS,GACrFC,CACT,CASO,SAASC,EAA4BC,EAA8C,CACxF,MAAMC,EAAyC,CAAA,EACzCC,EAAIF,EAAK,OACf,IAAIG,EAAI,EACR,KAAOA,EAAID,GAAKF,EAAKG,CAAC,IAAM,KAAOH,EAAKG,CAAC,IAAM,KAAKA,IACpD,GAAIA,GAAKD,EAAG,OAAOD,EAEnB,IAAIG,EAAQ,EACRC,EAAW,GACXC,EAAe,GACnB,KAAOH,EAAID,EAAGC,IAAK,CACjB,MAAMI,EAAKP,EAAKG,CAAC,EACjB,GAAIE,EAAU,CACRE,IAAO,KAAMJ,IACRI,IAAO,MAAKF,EAAW,IAChC,QACF,CACA,GAAIE,IAAO,IAAK,CACdF,EAAW,GACX,QACF,CACA,GAAIE,IAAO,KAAOA,IAAO,IAAK,CAC5BH,IACIA,IAAU,IAAGE,EAAeH,EAAI,GACpC,QACF,EACII,IAAO,KAAOA,IAAO,OACnBH,IAAU,GAAKE,IAAiB,KAClCL,EAAO,KAAK,CAAE,KAAMK,EAAc,GAAIH,EAAG,EACzCG,EAAe,IAEjBF,IAEJ,CACA,OAAOH,CACT"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { EditorView as
|
|
2
|
-
import { json as
|
|
3
|
-
import { foldGutter as
|
|
1
|
+
import { EditorView as f } from "@codemirror/view";
|
|
2
|
+
import { json as u } from "@codemirror/lang-json";
|
|
3
|
+
import { foldGutter as g, syntaxHighlighting as p, HighlightStyle as m } from "@codemirror/language";
|
|
4
4
|
import { tags as n } from "@lezer/highlight";
|
|
5
|
-
const
|
|
5
|
+
const d = m.define([
|
|
6
6
|
{ tag: n.propertyName, color: "var(--json-viewer-color-key)" },
|
|
7
7
|
{ tag: n.string, color: "var(--json-viewer-color-string)", fontWeight: 600 },
|
|
8
8
|
{ tag: [n.number, n.bool, n.null], color: "var(--json-viewer-color-scalar)" },
|
|
9
9
|
{ tag: [n.separator, n.squareBracket, n.brace], color: "var(--json-viewer-color-punctuation)" }
|
|
10
|
-
]),
|
|
10
|
+
]), w = f.theme({
|
|
11
11
|
"&": { backgroundColor: "transparent", color: "var(--json-viewer-color-punctuation)", fontSize: "13px" },
|
|
12
12
|
"&.cm-focused": { outline: "none" },
|
|
13
13
|
".cm-content": { fontFamily: "var(--sds-typography-family-mono)", padding: "8px 124px 12px 4px" },
|
|
@@ -18,47 +18,52 @@ const m = p.define([
|
|
|
18
18
|
paddingLeft: "5px"
|
|
19
19
|
},
|
|
20
20
|
".cm-scroller": { overflow: "auto" }
|
|
21
|
-
}),
|
|
22
|
-
function
|
|
21
|
+
}), S = [u(), g(), p(d)];
|
|
22
|
+
function b(r) {
|
|
23
23
|
try {
|
|
24
|
-
return JSON.stringify(
|
|
24
|
+
return JSON.stringify(r, null, 2) ?? "null";
|
|
25
25
|
} catch {
|
|
26
|
-
return String(
|
|
26
|
+
return String(r);
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
|
-
function
|
|
30
|
-
return typeof
|
|
29
|
+
function a(r) {
|
|
30
|
+
return typeof r == "number" ? `${r}px` : r;
|
|
31
31
|
}
|
|
32
|
-
function x(
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
32
|
+
function x({ height: r, minHeight: e, maxHeight: i }) {
|
|
33
|
+
const o = {};
|
|
34
|
+
return r !== void 0 && (o["--json-viewer-height"] = a(r)), e !== void 0 && (o["--json-viewer-min-height"] = a(e)), i !== void 0 && (o["--json-viewer-max-height"] = a(i)), o;
|
|
35
|
+
}
|
|
36
|
+
function E(r) {
|
|
37
|
+
const e = [], i = r.length;
|
|
38
|
+
let o = 0;
|
|
39
|
+
for (; o < i && r[o] !== "{" && r[o] !== "["; ) o++;
|
|
40
|
+
if (o >= i) return e;
|
|
41
|
+
let s = 0, c = !1, l = -1;
|
|
42
|
+
for (; o < i; o++) {
|
|
43
|
+
const t = r[o];
|
|
44
|
+
if (c) {
|
|
45
|
+
t === "\\" ? o++ : t === '"' && (c = !1);
|
|
42
46
|
continue;
|
|
43
47
|
}
|
|
44
48
|
if (t === '"') {
|
|
45
|
-
|
|
49
|
+
c = !0;
|
|
46
50
|
continue;
|
|
47
51
|
}
|
|
48
52
|
if (t === "{" || t === "[") {
|
|
49
|
-
|
|
53
|
+
s++, s === 2 && (l = o + 1);
|
|
50
54
|
continue;
|
|
51
55
|
}
|
|
52
|
-
(t === "}" || t === "]") && (
|
|
56
|
+
(t === "}" || t === "]") && (s === 2 && l !== -1 && (e.push({ from: l, to: o }), l = -1), s--);
|
|
53
57
|
}
|
|
54
|
-
return
|
|
58
|
+
return e;
|
|
55
59
|
}
|
|
56
60
|
export {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
E as computeFirstLevelFoldRanges,
|
|
62
|
+
S as jsonEditorExtensions,
|
|
63
|
+
w as jsonEditorTheme,
|
|
64
|
+
d as jsonHighlightStyle,
|
|
65
|
+
b as serializeJson,
|
|
66
|
+
a as toCssSize,
|
|
67
|
+
x as toEditorSizeStyle
|
|
63
68
|
};
|
|
64
69
|
//# sourceMappingURL=json-code-mirror.js.map
|