@dxos/react-ui-syntax-highlighter 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6
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/browser/index.mjs +113 -58
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +113 -58
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/Json/Json.d.ts +41 -18
- package/dist/types/src/Json/Json.d.ts.map +1 -1
- package/dist/types/src/Json/Json.stories.d.ts +8 -9
- package/dist/types/src/Json/Json.stories.d.ts.map +1 -1
- package/dist/types/src/Json/index.d.ts +1 -1
- package/dist/types/src/Json/index.d.ts.map +1 -1
- package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.d.ts +9 -4
- package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.d.ts.map +1 -1
- package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.stories.d.ts +10 -1
- package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.stories.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +12 -12
- package/src/Json/Json.stories.tsx +32 -32
- package/src/Json/Json.tsx +167 -57
- package/src/Json/index.ts +1 -1
- package/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx +11 -9
- package/src/SyntaxHighlighter/SyntaxHighlighter.tsx +45 -43
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
// src/Json/Json.tsx
|
|
2
|
-
import
|
|
3
|
-
import React2, { forwardRef, useEffect, useState } from "react";
|
|
2
|
+
import { JSONPath } from "jsonpath-plus";
|
|
3
|
+
import React2, { createContext, forwardRef, useContext, useEffect, useMemo, useState } from "react";
|
|
4
4
|
import { Input } from "@dxos/react-ui";
|
|
5
|
+
import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
|
|
5
6
|
import { createReplacer, safeStringify } from "@dxos/util";
|
|
6
7
|
|
|
7
8
|
// src/SyntaxHighlighter/index.ts
|
|
@@ -11,17 +12,27 @@ import createElement from "react-syntax-highlighter/dist/esm/create-element";
|
|
|
11
12
|
import React from "react";
|
|
12
13
|
import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/prism-async-light";
|
|
13
14
|
import { coldarkDark as dark, coldarkCold as light } from "react-syntax-highlighter/dist/esm/styles/prism";
|
|
14
|
-
import { useThemeContext } from "@dxos/react-ui";
|
|
15
|
-
import {
|
|
15
|
+
import { ScrollArea, useThemeContext } from "@dxos/react-ui";
|
|
16
|
+
import { composable, composableProps } from "@dxos/ui-theme";
|
|
16
17
|
var zeroWidthSpace = "\u200B";
|
|
17
|
-
var
|
|
18
|
+
var languages = {
|
|
19
|
+
js: "javascript",
|
|
20
|
+
ts: "typescript"
|
|
21
|
+
};
|
|
22
|
+
var SyntaxHighlighter = composable(({ children, language = "text", fallback = zeroWidthSpace, classNames, className, style, ...nativeProps }, forwardedRef) => {
|
|
18
23
|
const { themeMode } = useThemeContext();
|
|
19
|
-
return /* @__PURE__ */ React.createElement(
|
|
20
|
-
|
|
24
|
+
return /* @__PURE__ */ React.createElement(ScrollArea.Root, {
|
|
25
|
+
...composableProps({
|
|
26
|
+
classNames,
|
|
27
|
+
className
|
|
28
|
+
}),
|
|
29
|
+
thin: true,
|
|
30
|
+
ref: forwardedRef
|
|
31
|
+
}, /* @__PURE__ */ React.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React.createElement("div", {
|
|
32
|
+
role: "none"
|
|
21
33
|
}, /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
|
|
22
|
-
className: "!m-0 is-full overflow-auto scrollbar-thin",
|
|
23
34
|
language: languages[language] || language,
|
|
24
|
-
style: themeMode === "dark" ? dark : light,
|
|
35
|
+
style: style ?? (themeMode === "dark" ? dark : light),
|
|
25
36
|
customStyle: {
|
|
26
37
|
background: "unset",
|
|
27
38
|
border: "none",
|
|
@@ -29,76 +40,120 @@ var SyntaxHighlighter = ({ classNames, children, language = "text", fallback = z
|
|
|
29
40
|
padding: 0,
|
|
30
41
|
margin: 0
|
|
31
42
|
},
|
|
32
|
-
...
|
|
33
|
-
}, children || fallback));
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
js: "javascript",
|
|
37
|
-
ts: "typescript"
|
|
38
|
-
};
|
|
43
|
+
...nativeProps
|
|
44
|
+
}, children || fallback))));
|
|
45
|
+
});
|
|
46
|
+
SyntaxHighlighter.displayName = "SyntaxHighlighter";
|
|
39
47
|
|
|
40
48
|
// src/Json/Json.tsx
|
|
41
|
-
var
|
|
42
|
-
|
|
43
|
-
|
|
49
|
+
var JsonContext = /* @__PURE__ */ createContext(null);
|
|
50
|
+
var useJsonContext = (consumerName) => {
|
|
51
|
+
const context = useContext(JsonContext);
|
|
52
|
+
if (!context) {
|
|
53
|
+
throw new Error(`\`${consumerName}\` must be used within \`Json.Root\`.`);
|
|
44
54
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
});
|
|
56
|
-
var JsonFilter = /* @__PURE__ */ forwardRef(({ classNames, data: initialData, replacer, testId }, forwardedRef) => {
|
|
57
|
-
const [data, setData] = useState(initialData);
|
|
58
|
-
const [text, setText] = useState("");
|
|
59
|
-
const [error, setError] = useState(null);
|
|
55
|
+
return context;
|
|
56
|
+
};
|
|
57
|
+
var useOptionalJsonContext = () => {
|
|
58
|
+
return useContext(JsonContext);
|
|
59
|
+
};
|
|
60
|
+
var JSON_ROOT_NAME = "Json.Root";
|
|
61
|
+
var JsonRoot = /* @__PURE__ */ forwardRef(({ children, data, replacer }, _forwardedRef) => {
|
|
62
|
+
const [filterText, setFilterText] = useState("");
|
|
63
|
+
const [filteredData, setFilteredData] = useState(data);
|
|
64
|
+
const [filterError, setFilterError] = useState(null);
|
|
60
65
|
useEffect(() => {
|
|
61
|
-
if (!
|
|
62
|
-
|
|
66
|
+
if (!filterText.trim().length) {
|
|
67
|
+
setFilteredData(data);
|
|
68
|
+
setFilterError(null);
|
|
63
69
|
} else {
|
|
64
70
|
try {
|
|
65
|
-
|
|
66
|
-
|
|
71
|
+
setFilteredData(JSONPath({
|
|
72
|
+
path: filterText,
|
|
73
|
+
json: data
|
|
74
|
+
}));
|
|
75
|
+
setFilterError(null);
|
|
67
76
|
} catch (err) {
|
|
68
|
-
|
|
69
|
-
|
|
77
|
+
setFilteredData(data);
|
|
78
|
+
setFilterError(err);
|
|
70
79
|
}
|
|
71
80
|
}
|
|
72
81
|
}, [
|
|
73
|
-
|
|
74
|
-
|
|
82
|
+
data,
|
|
83
|
+
filterText
|
|
84
|
+
]);
|
|
85
|
+
const context = useMemo(() => ({
|
|
86
|
+
data,
|
|
87
|
+
filteredData,
|
|
88
|
+
filterText,
|
|
89
|
+
setFilterText,
|
|
90
|
+
filterError,
|
|
91
|
+
replacer
|
|
92
|
+
}), [
|
|
93
|
+
data,
|
|
94
|
+
filteredData,
|
|
95
|
+
filterText,
|
|
96
|
+
setFilterText,
|
|
97
|
+
filterError,
|
|
98
|
+
replacer
|
|
75
99
|
]);
|
|
100
|
+
return /* @__PURE__ */ React2.createElement(JsonContext.Provider, {
|
|
101
|
+
value: context
|
|
102
|
+
}, children);
|
|
103
|
+
});
|
|
104
|
+
JsonRoot.displayName = JSON_ROOT_NAME;
|
|
105
|
+
var JSON_CONTENT_NAME = "Json.Content";
|
|
106
|
+
var JsonContent = composable2(({ children, ...props }, forwardedRef) => {
|
|
76
107
|
return /* @__PURE__ */ React2.createElement("div", {
|
|
77
|
-
|
|
108
|
+
...composableProps2(props, {
|
|
109
|
+
classNames: "flex flex-col h-full min-h-0 overflow-hidden"
|
|
110
|
+
}),
|
|
78
111
|
ref: forwardedRef
|
|
79
|
-
},
|
|
80
|
-
|
|
112
|
+
}, children);
|
|
113
|
+
});
|
|
114
|
+
JsonContent.displayName = JSON_CONTENT_NAME;
|
|
115
|
+
var JSON_FILTER_NAME = "Json.Filter";
|
|
116
|
+
var JsonFilter = /* @__PURE__ */ forwardRef(({ classNames, placeholder = "JSONPath (e.g., $.graph.nodes)" }, forwardedRef) => {
|
|
117
|
+
const { filterText, setFilterText, filterError } = useJsonContext(JSON_FILTER_NAME);
|
|
118
|
+
return /* @__PURE__ */ React2.createElement(Input.Root, {
|
|
119
|
+
validationValence: filterError ? "error" : "success"
|
|
81
120
|
}, /* @__PURE__ */ React2.createElement(Input.TextInput, {
|
|
82
121
|
classNames: [
|
|
83
|
-
"p-1
|
|
84
|
-
|
|
122
|
+
"p-1 px-2 font-mono",
|
|
123
|
+
filterError && "border-rose-500",
|
|
124
|
+
classNames
|
|
85
125
|
],
|
|
86
126
|
variant: "subdued",
|
|
87
|
-
value:
|
|
88
|
-
placeholder
|
|
89
|
-
onChange: (event) =>
|
|
90
|
-
|
|
127
|
+
value: filterText,
|
|
128
|
+
placeholder,
|
|
129
|
+
onChange: (event) => setFilterText(event.target.value),
|
|
130
|
+
ref: forwardedRef
|
|
131
|
+
}));
|
|
132
|
+
});
|
|
133
|
+
JsonFilter.displayName = JSON_FILTER_NAME;
|
|
134
|
+
var JSON_DATA_NAME = "Json.Data";
|
|
135
|
+
var JsonData = composable2(({ data: dataProp, replacer: replacerProp, testId, ...props }, forwardedRef) => {
|
|
136
|
+
const context = useOptionalJsonContext();
|
|
137
|
+
const data = dataProp ?? context?.filteredData;
|
|
138
|
+
const replacer = replacerProp ?? context?.replacer;
|
|
139
|
+
return /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
|
|
140
|
+
...composableProps2(props, {
|
|
141
|
+
classNames: "flex-1 min-h-0 w-full py-1 px-2 overflow-y-auto text-sm"
|
|
142
|
+
}),
|
|
91
143
|
language: "json",
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
],
|
|
96
|
-
"data-testid": testId
|
|
97
|
-
}, safeStringify(data, replacer && createReplacer(replacer), 2)));
|
|
144
|
+
"data-testid": testId,
|
|
145
|
+
ref: forwardedRef
|
|
146
|
+
}, safeStringify(data, replacer && createReplacer(replacer), 2));
|
|
98
147
|
});
|
|
148
|
+
JsonData.displayName = JSON_DATA_NAME;
|
|
149
|
+
var Json = {
|
|
150
|
+
Root: JsonRoot,
|
|
151
|
+
Content: JsonContent,
|
|
152
|
+
Filter: JsonFilter,
|
|
153
|
+
Data: JsonData
|
|
154
|
+
};
|
|
99
155
|
export {
|
|
100
156
|
Json,
|
|
101
|
-
JsonFilter,
|
|
102
157
|
SyntaxHighlighter,
|
|
103
158
|
createElement
|
|
104
159
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Json/Json.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\
|
|
5
|
-
"mappings": ";
|
|
6
|
-
"names": ["
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { JSONPath } from 'jsonpath-plus';\nimport React, {\n createContext,\n type PropsWithChildren,\n forwardRef,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport { Input } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\nimport { type ComposableProps } from '@dxos/ui-types';\nimport { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';\n\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\n//\n// Context\n//\n\ntype JsonContextType = {\n data: any;\n filteredData: any;\n filterText: string;\n setFilterText: (text: string) => void;\n filterError: Error | null;\n replacer?: CreateReplacerProps;\n};\n\nconst JsonContext = createContext<JsonContextType | null>(null);\n\n/** Require Json context (throws if used outside Json.Root). */\nconst useJsonContext = (consumerName: string): JsonContextType => {\n const context = useContext(JsonContext);\n if (!context) {\n throw new Error(`\\`${consumerName}\\` must be used within \\`Json.Root\\`.`);\n }\n return context;\n};\n\n/** Optional Json context (returns null outside Json.Root). */\nconst useOptionalJsonContext = (): JsonContextType | null => {\n return useContext(JsonContext);\n};\n\n//\n// Root\n//\n\nconst JSON_ROOT_NAME = 'Json.Root';\n\ntype JsonRootProps = PropsWithChildren<{\n data?: any;\n replacer?: CreateReplacerProps;\n}>;\n\n/** Headless context provider for Json composite. */\nconst JsonRoot = forwardRef<HTMLDivElement, JsonRootProps>(({ children, data, replacer }, _forwardedRef) => {\n const [filterText, setFilterText] = useState('');\n const [filteredData, setFilteredData] = useState(data);\n const [filterError, setFilterError] = useState<Error | null>(null);\n\n useEffect(() => {\n if (!filterText.trim().length) {\n setFilteredData(data);\n setFilterError(null);\n } else {\n try {\n setFilteredData(JSONPath({ path: filterText, json: data }));\n setFilterError(null);\n } catch (err) {\n setFilteredData(data);\n setFilterError(err as Error);\n }\n }\n }, [data, filterText]);\n\n const context = useMemo(\n () => ({ data, filteredData, filterText, setFilterText, filterError, replacer }),\n [data, filteredData, filterText, setFilterText, filterError, replacer],\n );\n\n return <JsonContext.Provider value={context}>{children}</JsonContext.Provider>;\n});\n\nJsonRoot.displayName = JSON_ROOT_NAME;\n\n//\n// Content\n//\n\nconst JSON_CONTENT_NAME = 'Json.Content';\n\ntype JsonContentProps = ComposableProps;\n\n/** Layout container for Json composite parts. */\nconst JsonContent = composable<HTMLDivElement, JsonContentProps>(({ children, ...props }, forwardedRef) => {\n return (\n <div {...composableProps(props, { classNames: 'flex flex-col h-full min-h-0 overflow-hidden' })} ref={forwardedRef}>\n {children}\n </div>\n );\n});\n\nJsonContent.displayName = JSON_CONTENT_NAME;\n\n//\n// Filter\n//\n\nconst JSON_FILTER_NAME = 'Json.Filter';\n\ntype JsonFilterProps = ComposableProps<{\n placeholder?: string;\n}>;\n\n/** JSONPath filter input. Must be used within Json.Root. */\nconst JsonFilter = forwardRef<HTMLInputElement, JsonFilterProps>(\n ({ classNames, placeholder = 'JSONPath (e.g., $.graph.nodes)' }, forwardedRef) => {\n const { filterText, setFilterText, filterError } = useJsonContext(JSON_FILTER_NAME);\n\n return (\n <Input.Root validationValence={filterError ? 'error' : 'success'}>\n <Input.TextInput\n classNames={['p-1 px-2 font-mono', filterError && 'border-rose-500', classNames]}\n variant='subdued'\n value={filterText}\n placeholder={placeholder}\n onChange={(event) => setFilterText(event.target.value)}\n ref={forwardedRef}\n />\n </Input.Root>\n );\n },\n);\n\nJsonFilter.displayName = JSON_FILTER_NAME;\n\n//\n// Data\n//\n\nconst JSON_DATA_NAME = 'Json.Data';\n\ntype JsonDataProps = ComposableProps<{\n data?: any;\n replacer?: CreateReplacerProps;\n testId?: string;\n}>;\n\n/** Syntax-highlighted JSON display. Works standalone or within Json.Root. */\nconst JsonData = composable<HTMLDivElement, JsonDataProps>(\n ({ data: dataProp, replacer: replacerProp, testId, ...props }, forwardedRef) => {\n const context = useOptionalJsonContext();\n const data = dataProp ?? context?.filteredData;\n const replacer = replacerProp ?? context?.replacer;\n\n return (\n <SyntaxHighlighter\n {...composableProps(props, { classNames: 'flex-1 min-h-0 w-full py-1 px-2 overflow-y-auto text-sm' })}\n language='json'\n data-testid={testId}\n ref={forwardedRef}\n >\n {safeStringify(data, replacer && createReplacer(replacer), 2)}\n </SyntaxHighlighter>\n );\n },\n);\n\nJsonData.displayName = JSON_DATA_NAME;\n\n//\n// Json\n//\n\nexport const Json = {\n Root: JsonRoot,\n Content: JsonContent,\n Filter: JsonFilter,\n Data: JsonData,\n};\n\nexport type { JsonRootProps, JsonContentProps, JsonFilterProps, JsonDataProps };\n", "//\n// Copyright 2024 DXOS.org\n//\n\n// eslint-disable-next-line no-restricted-imports\nimport createElement from 'react-syntax-highlighter/dist/esm/create-element';\n\nexport { createElement };\n\nexport * from './SyntaxHighlighter';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { CSSProperties } from 'react';\nimport { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';\nimport { coldarkDark as dark, coldarkCold as light } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport { ScrollArea, useThemeContext } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nconst languages = {\n js: 'javascript',\n ts: 'typescript',\n};\n\nexport type SyntaxHighlighterProps = NaturalSyntaxHighlighterProps & {\n fallback?: string;\n};\n\n/**\n * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n * The lightweight version will load specific language parsers asynchronously.\n *\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html\n */\nexport const SyntaxHighlighter = composable<HTMLDivElement, SyntaxHighlighterProps>(\n (\n { children, language = 'text', fallback = zeroWidthSpace, classNames, className, style, ...nativeProps },\n forwardedRef,\n ) => {\n const { themeMode } = useThemeContext();\n\n return (\n <ScrollArea.Root {...composableProps({ classNames, className })} thin ref={forwardedRef}>\n <ScrollArea.Viewport>\n {/* NOTE: The div prevents NativeSyntaxHighlighter from managing scrolling. */}\n <div role='none'>\n <NativeSyntaxHighlighter\n language={languages[language as keyof typeof languages] || language}\n style={(style as { [key: string]: CSSProperties }) ?? (themeMode === 'dark' ? dark : light)}\n customStyle={{\n background: 'unset',\n border: 'none',\n boxShadow: 'none',\n padding: 0,\n margin: 0,\n }}\n {...nativeProps}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n </div>\n </ScrollArea.Viewport>\n </ScrollArea.Root>\n );\n },\n);\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["JSONPath", "React", "createContext", "forwardRef", "useContext", "useEffect", "useMemo", "useState", "Input", "composable", "composableProps", "createReplacer", "safeStringify", "createElement", "React", "NativeSyntaxHighlighter", "coldarkDark", "dark", "coldarkCold", "light", "ScrollArea", "useThemeContext", "composable", "composableProps", "zeroWidthSpace", "languages", "js", "ts", "SyntaxHighlighter", "composable", "children", "language", "fallback", "classNames", "className", "style", "nativeProps", "forwardedRef", "themeMode", "useThemeContext", "ScrollArea", "Root", "composableProps", "thin", "ref", "Viewport", "div", "role", "NativeSyntaxHighlighter", "dark", "light", "customStyle", "background", "border", "boxShadow", "padding", "margin", "displayName", "JsonContext", "createContext", "useJsonContext", "consumerName", "context", "useContext", "Error", "useOptionalJsonContext", "JSON_ROOT_NAME", "JsonRoot", "forwardRef", "children", "data", "replacer", "_forwardedRef", "filterText", "setFilterText", "useState", "filteredData", "setFilteredData", "filterError", "setFilterError", "useEffect", "trim", "length", "JSONPath", "path", "json", "err", "useMemo", "React", "Provider", "value", "displayName", "JSON_CONTENT_NAME", "JsonContent", "composable", "props", "forwardedRef", "div", "composableProps", "classNames", "ref", "JSON_FILTER_NAME", "JsonFilter", "placeholder", "Input", "Root", "validationValence", "TextInput", "variant", "onChange", "event", "target", "JSON_DATA_NAME", "JsonData", "dataProp", "replacerProp", "testId", "SyntaxHighlighter", "language", "data-testid", "safeStringify", "createReplacer", "Json", "Content", "Filter", "Data"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":7063,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/prism-async-light","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/prism","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/SyntaxHighlighter/index.ts":{"bytes":979,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"src/SyntaxHighlighter/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"},"src/Json/Json.tsx":{"bytes":16024,"imports":[{"path":"jsonpath-plus","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"src/Json/index.ts":{"bytes":618,"imports":[{"path":"src/Json/Json.tsx","kind":"import-statement","original":"./Json"}],"format":"esm"},"src/index.ts":{"bytes":571,"imports":[{"path":"src/Json/index.ts","kind":"import-statement","original":"./Json"},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12707},"dist/lib/browser/index.mjs":{"imports":[{"path":"jsonpath-plus","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/prism-async-light","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/prism","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"exports":["Json","SyntaxHighlighter","createElement"],"entryPoint":"src/index.ts","inputs":{"src/Json/Json.tsx":{"bytesInOutput":3608},"src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":1359},"src/Json/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":5263}}}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
2
|
|
|
3
3
|
// src/Json/Json.tsx
|
|
4
|
-
import
|
|
5
|
-
import React2, { forwardRef, useEffect, useState } from "react";
|
|
4
|
+
import { JSONPath } from "jsonpath-plus";
|
|
5
|
+
import React2, { createContext, forwardRef, useContext, useEffect, useMemo, useState } from "react";
|
|
6
6
|
import { Input } from "@dxos/react-ui";
|
|
7
|
+
import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
|
|
7
8
|
import { createReplacer, safeStringify } from "@dxos/util";
|
|
8
9
|
|
|
9
10
|
// src/SyntaxHighlighter/index.ts
|
|
@@ -13,17 +14,27 @@ import createElement from "react-syntax-highlighter/dist/esm/create-element";
|
|
|
13
14
|
import React from "react";
|
|
14
15
|
import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/prism-async-light";
|
|
15
16
|
import { coldarkDark as dark, coldarkCold as light } from "react-syntax-highlighter/dist/esm/styles/prism";
|
|
16
|
-
import { useThemeContext } from "@dxos/react-ui";
|
|
17
|
-
import {
|
|
17
|
+
import { ScrollArea, useThemeContext } from "@dxos/react-ui";
|
|
18
|
+
import { composable, composableProps } from "@dxos/ui-theme";
|
|
18
19
|
var zeroWidthSpace = "\u200B";
|
|
19
|
-
var
|
|
20
|
+
var languages = {
|
|
21
|
+
js: "javascript",
|
|
22
|
+
ts: "typescript"
|
|
23
|
+
};
|
|
24
|
+
var SyntaxHighlighter = composable(({ children, language = "text", fallback = zeroWidthSpace, classNames, className, style, ...nativeProps }, forwardedRef) => {
|
|
20
25
|
const { themeMode } = useThemeContext();
|
|
21
|
-
return /* @__PURE__ */ React.createElement(
|
|
22
|
-
|
|
26
|
+
return /* @__PURE__ */ React.createElement(ScrollArea.Root, {
|
|
27
|
+
...composableProps({
|
|
28
|
+
classNames,
|
|
29
|
+
className
|
|
30
|
+
}),
|
|
31
|
+
thin: true,
|
|
32
|
+
ref: forwardedRef
|
|
33
|
+
}, /* @__PURE__ */ React.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React.createElement("div", {
|
|
34
|
+
role: "none"
|
|
23
35
|
}, /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
|
|
24
|
-
className: "!m-0 is-full overflow-auto scrollbar-thin",
|
|
25
36
|
language: languages[language] || language,
|
|
26
|
-
style: themeMode === "dark" ? dark : light,
|
|
37
|
+
style: style ?? (themeMode === "dark" ? dark : light),
|
|
27
38
|
customStyle: {
|
|
28
39
|
background: "unset",
|
|
29
40
|
border: "none",
|
|
@@ -31,76 +42,120 @@ var SyntaxHighlighter = ({ classNames, children, language = "text", fallback = z
|
|
|
31
42
|
padding: 0,
|
|
32
43
|
margin: 0
|
|
33
44
|
},
|
|
34
|
-
...
|
|
35
|
-
}, children || fallback));
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
js: "javascript",
|
|
39
|
-
ts: "typescript"
|
|
40
|
-
};
|
|
45
|
+
...nativeProps
|
|
46
|
+
}, children || fallback))));
|
|
47
|
+
});
|
|
48
|
+
SyntaxHighlighter.displayName = "SyntaxHighlighter";
|
|
41
49
|
|
|
42
50
|
// src/Json/Json.tsx
|
|
43
|
-
var
|
|
44
|
-
|
|
45
|
-
|
|
51
|
+
var JsonContext = /* @__PURE__ */ createContext(null);
|
|
52
|
+
var useJsonContext = (consumerName) => {
|
|
53
|
+
const context = useContext(JsonContext);
|
|
54
|
+
if (!context) {
|
|
55
|
+
throw new Error(`\`${consumerName}\` must be used within \`Json.Root\`.`);
|
|
46
56
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
});
|
|
58
|
-
var JsonFilter = /* @__PURE__ */ forwardRef(({ classNames, data: initialData, replacer, testId }, forwardedRef) => {
|
|
59
|
-
const [data, setData] = useState(initialData);
|
|
60
|
-
const [text, setText] = useState("");
|
|
61
|
-
const [error, setError] = useState(null);
|
|
57
|
+
return context;
|
|
58
|
+
};
|
|
59
|
+
var useOptionalJsonContext = () => {
|
|
60
|
+
return useContext(JsonContext);
|
|
61
|
+
};
|
|
62
|
+
var JSON_ROOT_NAME = "Json.Root";
|
|
63
|
+
var JsonRoot = /* @__PURE__ */ forwardRef(({ children, data, replacer }, _forwardedRef) => {
|
|
64
|
+
const [filterText, setFilterText] = useState("");
|
|
65
|
+
const [filteredData, setFilteredData] = useState(data);
|
|
66
|
+
const [filterError, setFilterError] = useState(null);
|
|
62
67
|
useEffect(() => {
|
|
63
|
-
if (!
|
|
64
|
-
|
|
68
|
+
if (!filterText.trim().length) {
|
|
69
|
+
setFilteredData(data);
|
|
70
|
+
setFilterError(null);
|
|
65
71
|
} else {
|
|
66
72
|
try {
|
|
67
|
-
|
|
68
|
-
|
|
73
|
+
setFilteredData(JSONPath({
|
|
74
|
+
path: filterText,
|
|
75
|
+
json: data
|
|
76
|
+
}));
|
|
77
|
+
setFilterError(null);
|
|
69
78
|
} catch (err) {
|
|
70
|
-
|
|
71
|
-
|
|
79
|
+
setFilteredData(data);
|
|
80
|
+
setFilterError(err);
|
|
72
81
|
}
|
|
73
82
|
}
|
|
74
83
|
}, [
|
|
75
|
-
|
|
76
|
-
|
|
84
|
+
data,
|
|
85
|
+
filterText
|
|
86
|
+
]);
|
|
87
|
+
const context = useMemo(() => ({
|
|
88
|
+
data,
|
|
89
|
+
filteredData,
|
|
90
|
+
filterText,
|
|
91
|
+
setFilterText,
|
|
92
|
+
filterError,
|
|
93
|
+
replacer
|
|
94
|
+
}), [
|
|
95
|
+
data,
|
|
96
|
+
filteredData,
|
|
97
|
+
filterText,
|
|
98
|
+
setFilterText,
|
|
99
|
+
filterError,
|
|
100
|
+
replacer
|
|
77
101
|
]);
|
|
102
|
+
return /* @__PURE__ */ React2.createElement(JsonContext.Provider, {
|
|
103
|
+
value: context
|
|
104
|
+
}, children);
|
|
105
|
+
});
|
|
106
|
+
JsonRoot.displayName = JSON_ROOT_NAME;
|
|
107
|
+
var JSON_CONTENT_NAME = "Json.Content";
|
|
108
|
+
var JsonContent = composable2(({ children, ...props }, forwardedRef) => {
|
|
78
109
|
return /* @__PURE__ */ React2.createElement("div", {
|
|
79
|
-
|
|
110
|
+
...composableProps2(props, {
|
|
111
|
+
classNames: "flex flex-col h-full min-h-0 overflow-hidden"
|
|
112
|
+
}),
|
|
80
113
|
ref: forwardedRef
|
|
81
|
-
},
|
|
82
|
-
|
|
114
|
+
}, children);
|
|
115
|
+
});
|
|
116
|
+
JsonContent.displayName = JSON_CONTENT_NAME;
|
|
117
|
+
var JSON_FILTER_NAME = "Json.Filter";
|
|
118
|
+
var JsonFilter = /* @__PURE__ */ forwardRef(({ classNames, placeholder = "JSONPath (e.g., $.graph.nodes)" }, forwardedRef) => {
|
|
119
|
+
const { filterText, setFilterText, filterError } = useJsonContext(JSON_FILTER_NAME);
|
|
120
|
+
return /* @__PURE__ */ React2.createElement(Input.Root, {
|
|
121
|
+
validationValence: filterError ? "error" : "success"
|
|
83
122
|
}, /* @__PURE__ */ React2.createElement(Input.TextInput, {
|
|
84
123
|
classNames: [
|
|
85
|
-
"p-1
|
|
86
|
-
|
|
124
|
+
"p-1 px-2 font-mono",
|
|
125
|
+
filterError && "border-rose-500",
|
|
126
|
+
classNames
|
|
87
127
|
],
|
|
88
128
|
variant: "subdued",
|
|
89
|
-
value:
|
|
90
|
-
placeholder
|
|
91
|
-
onChange: (event) =>
|
|
92
|
-
|
|
129
|
+
value: filterText,
|
|
130
|
+
placeholder,
|
|
131
|
+
onChange: (event) => setFilterText(event.target.value),
|
|
132
|
+
ref: forwardedRef
|
|
133
|
+
}));
|
|
134
|
+
});
|
|
135
|
+
JsonFilter.displayName = JSON_FILTER_NAME;
|
|
136
|
+
var JSON_DATA_NAME = "Json.Data";
|
|
137
|
+
var JsonData = composable2(({ data: dataProp, replacer: replacerProp, testId, ...props }, forwardedRef) => {
|
|
138
|
+
const context = useOptionalJsonContext();
|
|
139
|
+
const data = dataProp ?? context?.filteredData;
|
|
140
|
+
const replacer = replacerProp ?? context?.replacer;
|
|
141
|
+
return /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
|
|
142
|
+
...composableProps2(props, {
|
|
143
|
+
classNames: "flex-1 min-h-0 w-full py-1 px-2 overflow-y-auto text-sm"
|
|
144
|
+
}),
|
|
93
145
|
language: "json",
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
],
|
|
98
|
-
"data-testid": testId
|
|
99
|
-
}, safeStringify(data, replacer && createReplacer(replacer), 2)));
|
|
146
|
+
"data-testid": testId,
|
|
147
|
+
ref: forwardedRef
|
|
148
|
+
}, safeStringify(data, replacer && createReplacer(replacer), 2));
|
|
100
149
|
});
|
|
150
|
+
JsonData.displayName = JSON_DATA_NAME;
|
|
151
|
+
var Json = {
|
|
152
|
+
Root: JsonRoot,
|
|
153
|
+
Content: JsonContent,
|
|
154
|
+
Filter: JsonFilter,
|
|
155
|
+
Data: JsonData
|
|
156
|
+
};
|
|
101
157
|
export {
|
|
102
158
|
Json,
|
|
103
|
-
JsonFilter,
|
|
104
159
|
SyntaxHighlighter,
|
|
105
160
|
createElement
|
|
106
161
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Json/Json.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\
|
|
5
|
-
"mappings": ";;;
|
|
6
|
-
"names": ["
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { JSONPath } from 'jsonpath-plus';\nimport React, {\n createContext,\n type PropsWithChildren,\n forwardRef,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport { Input } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\nimport { type ComposableProps } from '@dxos/ui-types';\nimport { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';\n\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\n//\n// Context\n//\n\ntype JsonContextType = {\n data: any;\n filteredData: any;\n filterText: string;\n setFilterText: (text: string) => void;\n filterError: Error | null;\n replacer?: CreateReplacerProps;\n};\n\nconst JsonContext = createContext<JsonContextType | null>(null);\n\n/** Require Json context (throws if used outside Json.Root). */\nconst useJsonContext = (consumerName: string): JsonContextType => {\n const context = useContext(JsonContext);\n if (!context) {\n throw new Error(`\\`${consumerName}\\` must be used within \\`Json.Root\\`.`);\n }\n return context;\n};\n\n/** Optional Json context (returns null outside Json.Root). */\nconst useOptionalJsonContext = (): JsonContextType | null => {\n return useContext(JsonContext);\n};\n\n//\n// Root\n//\n\nconst JSON_ROOT_NAME = 'Json.Root';\n\ntype JsonRootProps = PropsWithChildren<{\n data?: any;\n replacer?: CreateReplacerProps;\n}>;\n\n/** Headless context provider for Json composite. */\nconst JsonRoot = forwardRef<HTMLDivElement, JsonRootProps>(({ children, data, replacer }, _forwardedRef) => {\n const [filterText, setFilterText] = useState('');\n const [filteredData, setFilteredData] = useState(data);\n const [filterError, setFilterError] = useState<Error | null>(null);\n\n useEffect(() => {\n if (!filterText.trim().length) {\n setFilteredData(data);\n setFilterError(null);\n } else {\n try {\n setFilteredData(JSONPath({ path: filterText, json: data }));\n setFilterError(null);\n } catch (err) {\n setFilteredData(data);\n setFilterError(err as Error);\n }\n }\n }, [data, filterText]);\n\n const context = useMemo(\n () => ({ data, filteredData, filterText, setFilterText, filterError, replacer }),\n [data, filteredData, filterText, setFilterText, filterError, replacer],\n );\n\n return <JsonContext.Provider value={context}>{children}</JsonContext.Provider>;\n});\n\nJsonRoot.displayName = JSON_ROOT_NAME;\n\n//\n// Content\n//\n\nconst JSON_CONTENT_NAME = 'Json.Content';\n\ntype JsonContentProps = ComposableProps;\n\n/** Layout container for Json composite parts. */\nconst JsonContent = composable<HTMLDivElement, JsonContentProps>(({ children, ...props }, forwardedRef) => {\n return (\n <div {...composableProps(props, { classNames: 'flex flex-col h-full min-h-0 overflow-hidden' })} ref={forwardedRef}>\n {children}\n </div>\n );\n});\n\nJsonContent.displayName = JSON_CONTENT_NAME;\n\n//\n// Filter\n//\n\nconst JSON_FILTER_NAME = 'Json.Filter';\n\ntype JsonFilterProps = ComposableProps<{\n placeholder?: string;\n}>;\n\n/** JSONPath filter input. Must be used within Json.Root. */\nconst JsonFilter = forwardRef<HTMLInputElement, JsonFilterProps>(\n ({ classNames, placeholder = 'JSONPath (e.g., $.graph.nodes)' }, forwardedRef) => {\n const { filterText, setFilterText, filterError } = useJsonContext(JSON_FILTER_NAME);\n\n return (\n <Input.Root validationValence={filterError ? 'error' : 'success'}>\n <Input.TextInput\n classNames={['p-1 px-2 font-mono', filterError && 'border-rose-500', classNames]}\n variant='subdued'\n value={filterText}\n placeholder={placeholder}\n onChange={(event) => setFilterText(event.target.value)}\n ref={forwardedRef}\n />\n </Input.Root>\n );\n },\n);\n\nJsonFilter.displayName = JSON_FILTER_NAME;\n\n//\n// Data\n//\n\nconst JSON_DATA_NAME = 'Json.Data';\n\ntype JsonDataProps = ComposableProps<{\n data?: any;\n replacer?: CreateReplacerProps;\n testId?: string;\n}>;\n\n/** Syntax-highlighted JSON display. Works standalone or within Json.Root. */\nconst JsonData = composable<HTMLDivElement, JsonDataProps>(\n ({ data: dataProp, replacer: replacerProp, testId, ...props }, forwardedRef) => {\n const context = useOptionalJsonContext();\n const data = dataProp ?? context?.filteredData;\n const replacer = replacerProp ?? context?.replacer;\n\n return (\n <SyntaxHighlighter\n {...composableProps(props, { classNames: 'flex-1 min-h-0 w-full py-1 px-2 overflow-y-auto text-sm' })}\n language='json'\n data-testid={testId}\n ref={forwardedRef}\n >\n {safeStringify(data, replacer && createReplacer(replacer), 2)}\n </SyntaxHighlighter>\n );\n },\n);\n\nJsonData.displayName = JSON_DATA_NAME;\n\n//\n// Json\n//\n\nexport const Json = {\n Root: JsonRoot,\n Content: JsonContent,\n Filter: JsonFilter,\n Data: JsonData,\n};\n\nexport type { JsonRootProps, JsonContentProps, JsonFilterProps, JsonDataProps };\n", "//\n// Copyright 2024 DXOS.org\n//\n\n// eslint-disable-next-line no-restricted-imports\nimport createElement from 'react-syntax-highlighter/dist/esm/create-element';\n\nexport { createElement };\n\nexport * from './SyntaxHighlighter';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { CSSProperties } from 'react';\nimport { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';\nimport { coldarkDark as dark, coldarkCold as light } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport { ScrollArea, useThemeContext } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nconst languages = {\n js: 'javascript',\n ts: 'typescript',\n};\n\nexport type SyntaxHighlighterProps = NaturalSyntaxHighlighterProps & {\n fallback?: string;\n};\n\n/**\n * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n * The lightweight version will load specific language parsers asynchronously.\n *\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html\n */\nexport const SyntaxHighlighter = composable<HTMLDivElement, SyntaxHighlighterProps>(\n (\n { children, language = 'text', fallback = zeroWidthSpace, classNames, className, style, ...nativeProps },\n forwardedRef,\n ) => {\n const { themeMode } = useThemeContext();\n\n return (\n <ScrollArea.Root {...composableProps({ classNames, className })} thin ref={forwardedRef}>\n <ScrollArea.Viewport>\n {/* NOTE: The div prevents NativeSyntaxHighlighter from managing scrolling. */}\n <div role='none'>\n <NativeSyntaxHighlighter\n language={languages[language as keyof typeof languages] || language}\n style={(style as { [key: string]: CSSProperties }) ?? (themeMode === 'dark' ? dark : light)}\n customStyle={{\n background: 'unset',\n border: 'none',\n boxShadow: 'none',\n padding: 0,\n margin: 0,\n }}\n {...nativeProps}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n </div>\n </ScrollArea.Viewport>\n </ScrollArea.Root>\n );\n },\n);\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["JSONPath", "React", "createContext", "forwardRef", "useContext", "useEffect", "useMemo", "useState", "Input", "composable", "composableProps", "createReplacer", "safeStringify", "createElement", "React", "NativeSyntaxHighlighter", "coldarkDark", "dark", "coldarkCold", "light", "ScrollArea", "useThemeContext", "composable", "composableProps", "zeroWidthSpace", "languages", "js", "ts", "SyntaxHighlighter", "composable", "children", "language", "fallback", "classNames", "className", "style", "nativeProps", "forwardedRef", "themeMode", "useThemeContext", "ScrollArea", "Root", "composableProps", "thin", "ref", "Viewport", "div", "role", "NativeSyntaxHighlighter", "dark", "light", "customStyle", "background", "border", "boxShadow", "padding", "margin", "displayName", "JsonContext", "createContext", "useJsonContext", "consumerName", "context", "useContext", "Error", "useOptionalJsonContext", "JSON_ROOT_NAME", "JsonRoot", "forwardRef", "children", "data", "replacer", "_forwardedRef", "filterText", "setFilterText", "useState", "filteredData", "setFilteredData", "filterError", "setFilterError", "useEffect", "trim", "length", "JSONPath", "path", "json", "err", "useMemo", "React", "Provider", "value", "displayName", "JSON_CONTENT_NAME", "JsonContent", "composable", "props", "forwardedRef", "div", "composableProps", "classNames", "ref", "JSON_FILTER_NAME", "JsonFilter", "placeholder", "Input", "Root", "validationValence", "TextInput", "variant", "onChange", "event", "target", "JSON_DATA_NAME", "JsonData", "dataProp", "replacerProp", "testId", "SyntaxHighlighter", "language", "data-testid", "safeStringify", "createReplacer", "Json", "Content", "Filter", "Data"]
|
|
7
7
|
}
|