@dxos/react-ui-syntax-highlighter 0.7.4 → 0.7.5-labs.35b4b42
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 +60 -5
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +58 -6
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +60 -5
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/JsonFilter/JsonFilter.d.ts +8 -0
- package/dist/types/src/JsonFilter/JsonFilter.d.ts.map +1 -0
- package/dist/types/src/JsonFilter/index.d.ts +2 -0
- package/dist/types/src/JsonFilter/index.d.ts.map +1 -0
- package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.d.ts.map +1 -0
- package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.stories.d.ts.map +1 -0
- package/dist/types/src/SyntaxHighlighter/index.d.ts +4 -0
- package/dist/types/src/SyntaxHighlighter/index.d.ts.map +1 -0
- package/dist/types/src/SyntaxHighlighter/styles.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +1 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -0
- package/package.json +8 -6
- package/src/JsonFilter/JsonFilter.tsx +57 -0
- package/src/JsonFilter/index.ts +5 -0
- package/src/{SyntaxHighlighter.tsx → SyntaxHighlighter/SyntaxHighlighter.tsx} +2 -1
- package/src/SyntaxHighlighter/index.ts +10 -0
- package/src/index.ts +1 -0
- package/dist/types/src/SyntaxHighlighter.d.ts.map +0 -1
- package/dist/types/src/SyntaxHighlighter.stories.d.ts.map +0 -1
- package/dist/types/src/styles.d.ts.map +0 -1
- /package/dist/types/src/{SyntaxHighlighter.d.ts → SyntaxHighlighter/SyntaxHighlighter.d.ts} +0 -0
- /package/dist/types/src/{SyntaxHighlighter.stories.d.ts → SyntaxHighlighter/SyntaxHighlighter.stories.d.ts} +0 -0
- /package/dist/types/src/{styles.d.ts → SyntaxHighlighter/styles.d.ts} +0 -0
- /package/src/{SyntaxHighlighter.stories.tsx → SyntaxHighlighter/SyntaxHighlighter.stories.tsx} +0 -0
- /package/src/{styles.ts → SyntaxHighlighter/styles.ts} +0 -0
|
@@ -1,10 +1,19 @@
|
|
|
1
|
-
// packages/ui/react-ui-syntax-highlighter/src/
|
|
1
|
+
// packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx
|
|
2
|
+
import jp from "jsonpath";
|
|
3
|
+
import React2, { useEffect, useState } from "react";
|
|
4
|
+
import { Input } from "@dxos/react-ui";
|
|
5
|
+
import { mx as mx2 } from "@dxos/react-ui-theme";
|
|
6
|
+
|
|
7
|
+
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts
|
|
8
|
+
import createElement from "react-syntax-highlighter/dist/esm/create-element";
|
|
9
|
+
|
|
10
|
+
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx
|
|
2
11
|
import React from "react";
|
|
3
12
|
import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/light-async";
|
|
4
13
|
import { useThemeContext } from "@dxos/react-ui";
|
|
5
14
|
import { mx } from "@dxos/react-ui-theme";
|
|
6
15
|
|
|
7
|
-
// packages/ui/react-ui-syntax-highlighter/src/styles.ts
|
|
16
|
+
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts
|
|
8
17
|
var alabasterDark = {
|
|
9
18
|
hljs: {
|
|
10
19
|
display: "block",
|
|
@@ -138,17 +147,63 @@ var githubLight = {
|
|
|
138
147
|
}
|
|
139
148
|
};
|
|
140
149
|
|
|
141
|
-
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx
|
|
150
|
+
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx
|
|
142
151
|
var zeroWidthSpace = "\u200B";
|
|
143
152
|
var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
|
|
144
153
|
const { themeMode } = useThemeContext();
|
|
145
154
|
return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
|
|
146
|
-
className: mx("w-full p-0
|
|
155
|
+
className: mx("w-full !p-0", classNames),
|
|
147
156
|
style: themeMode === "dark" ? alabasterDark : githubLight,
|
|
148
157
|
...props
|
|
149
158
|
}, children || fallback);
|
|
150
159
|
};
|
|
160
|
+
|
|
161
|
+
// packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx
|
|
162
|
+
var Json = ({ data, classNames }) => {
|
|
163
|
+
return /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
|
|
164
|
+
language: "json",
|
|
165
|
+
classNames
|
|
166
|
+
}, JSON.stringify(data, null, 2));
|
|
167
|
+
};
|
|
168
|
+
var JsonFilter = ({ data: initialData, classNames }) => {
|
|
169
|
+
const [data, setData] = useState(initialData);
|
|
170
|
+
const [text, setText] = useState("");
|
|
171
|
+
const [error, setError] = useState(null);
|
|
172
|
+
useEffect(() => {
|
|
173
|
+
if (!initialData || !text.trim().length) {
|
|
174
|
+
setData(initialData);
|
|
175
|
+
} else {
|
|
176
|
+
try {
|
|
177
|
+
setData(jp.query(initialData, text));
|
|
178
|
+
setError(null);
|
|
179
|
+
} catch (err) {
|
|
180
|
+
setData(initialData);
|
|
181
|
+
setError(err);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}, [
|
|
185
|
+
initialData,
|
|
186
|
+
text
|
|
187
|
+
]);
|
|
188
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
189
|
+
className: "flex flex-col grow overflow-hidden"
|
|
190
|
+
}, /* @__PURE__ */ React2.createElement(Input.Root, {
|
|
191
|
+
validationValence: error ? "error" : "success"
|
|
192
|
+
}, /* @__PURE__ */ React2.createElement(Input.TextInput, {
|
|
193
|
+
classNames: mx2("p-1 px-2 font-mono", error && "border-red-500"),
|
|
194
|
+
variant: "subdued",
|
|
195
|
+
value: text,
|
|
196
|
+
onChange: (event) => setText(event.target.value),
|
|
197
|
+
placeholder: "JSONPath (e.g., $.graph.nodes)"
|
|
198
|
+
})), /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
|
|
199
|
+
language: "json",
|
|
200
|
+
classNames: mx2("grow overflow-y-auto", classNames)
|
|
201
|
+
}, JSON.stringify(data, null, 2)));
|
|
202
|
+
};
|
|
151
203
|
export {
|
|
152
|
-
|
|
204
|
+
Json,
|
|
205
|
+
JsonFilter,
|
|
206
|
+
SyntaxHighlighter,
|
|
207
|
+
createElement
|
|
153
208
|
};
|
|
154
209
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/SyntaxHighlighter.tsx", "../../../src/styles.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Lightweight version will load specific language parsers asynchronously.\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { alabasterDark, githubLight } from './styles';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n fallback = zeroWidthSpace,\n children,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full p-0
|
|
5
|
-
"mappings": ";AAIA,OAAOA,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,SAA+BC,uBAAuB;AACtD,SAASC,UAAU;;;ACCZ,IAAMC,gBAA+C;EAC1DC,MAAM;IACJC,SAAS;IACTC,WAAW;IACXC,OAAO;IACPC,SAAS;EACX;EACA,gBAAgB;IACdD,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,oBAAoB;IAClBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,iBAAiB;IACfE,iBAAiB;IACjBF,OAAO;EACT;EACA,iBAAiB;IACfE,iBAAiB;IACjBF,OAAO;EACT;AACF;AAKO,IAAMG,cAA6C;EACxDN,MAAM;IACJC,SAAS;IACTC,WAAW;IACXC,OAAO;IACPC,SAAS;EACX;EACA,gBAAgB;IACdD,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,0BAA0B;IACxBA,OAAO;EACT;EACA,YAAY;IACVA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,oBAAoB;IAClBA,OAAO;EACT;EACA,uBAAuB;IACrBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,qBAAqB;IACnBA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,kBAAkB;IAChBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,qBAAqB;IACnBA,OAAO;EACT;EACA,iBAAiB;IACfI,WAAW;EACb;EACA,eAAe;IACbC,YAAY;EACd;AACF;;;ADpIA,IAAMC,iBAAiB;AAWhB,IAAMC,oBAAoB,CAAC,EAChCC,YACAC,WAAWH,gBACXI,UACA,GAAGC,MAAAA,MACoB;AACvB,QAAM,EAAEC,UAAS,IAAKC,gBAAAA;
|
|
6
|
-
"names": ["React", "NativeSyntaxHighlighter", "useThemeContext", "mx", "alabasterDark", "hljs", "display", "overflowX", "color", "padding", "backgroundColor", "githubLight", "fontStyle", "fontWeight", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "NativeSyntaxHighlighter", "className", "mx", "style", "alabasterDark", "githubLight"]
|
|
3
|
+
"sources": ["../../../src/JsonFilter/JsonFilter.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx", "../../../src/SyntaxHighlighter/styles.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport jp from 'jsonpath';\nimport React, { useEffect, useState } from 'react';\n\nimport { Input, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\nexport type JsonProps = ThemedClassName<{ data?: any }>;\n\nexport const Json = ({ data, classNames }: JsonProps) => {\n return (\n <SyntaxHighlighter language='json' classNames={classNames}>\n {JSON.stringify(data, null, 2)}\n </SyntaxHighlighter>\n );\n};\n\nexport const JsonFilter = ({ data: initialData, classNames }: JsonProps) => {\n const [data, setData] = useState(initialData);\n const [text, setText] = useState('');\n const [error, setError] = useState<Error | null>(null);\n useEffect(() => {\n if (!initialData || !text.trim().length) {\n setData(initialData);\n } else {\n try {\n setData(jp.query(initialData, text));\n setError(null);\n } catch (err) {\n setData(initialData);\n setError(err as Error);\n }\n }\n }, [initialData, text]);\n\n return (\n <div className='flex flex-col grow overflow-hidden'>\n <Input.Root validationValence={error ? 'error' : 'success'}>\n <Input.TextInput\n classNames={mx('p-1 px-2 font-mono', error && 'border-red-500')}\n variant='subdued'\n value={text}\n onChange={(event) => setText(event.target.value)}\n placeholder='JSONPath (e.g., $.graph.nodes)'\n />\n </Input.Root>\n <SyntaxHighlighter language='json' classNames={mx('grow overflow-y-auto', classNames)}>\n {JSON.stringify(data, null, 2)}\n </SyntaxHighlighter>\n </div>\n );\n};\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 from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Lightweight version will load specific language parsers asynchronously.\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { alabasterDark, githubLight } from './styles';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n fallback = zeroWidthSpace,\n children,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full !p-0', classNames)}\n style={themeMode === 'dark' ? alabasterDark : githubLight}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties } from 'react';\n\n// https://highlightjs.org/examples\n// https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo\n// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_HLJS.MD\n\n/**\n * https://github.com/findrakecil/hljs-alabaster-dark/blob/master/readme.md\n */\nexport const alabasterDark: Record<string, CSSProperties> = {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n color: '#CECECE',\n padding: '0.5em',\n },\n 'hljs-comment': {\n color: '#DFDF8E',\n },\n 'hljs-string': {\n color: '#95CB82',\n },\n 'hljs-meta-string': {\n color: '#95CB82',\n },\n 'hljs-regexp': {\n color: '#95CB82',\n },\n 'hljs-number': {\n color: '#CC8BC9',\n },\n 'hljs-literal': {\n color: '#CC8BC9',\n },\n 'hljs-title': {\n color: '#71ADE7',\n },\n 'hljs-deletion': {\n backgroundColor: '#ffdddd',\n color: '#434343',\n },\n 'hljs-addition': {\n backgroundColor: '#ddffdd',\n color: '#434343',\n },\n};\n\n/**\n * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css\n */\nexport const githubLight: Record<string, CSSProperties> = {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n color: '#545454',\n padding: '0.5em',\n },\n 'hljs-comment': {\n color: '#696969',\n },\n 'hljs-quote': {\n color: '#696969',\n },\n 'hljs-variable': {\n color: '#d91e18',\n },\n 'hljs-template-variable': {\n color: '#d91e18',\n },\n 'hljs-tag': {\n color: '#d91e18',\n },\n 'hljs-name': {\n color: '#d91e18',\n },\n 'hljs-selector-id': {\n color: '#d91e18',\n },\n 'hljs-selector-class': {\n color: '#d91e18',\n },\n 'hljs-regexp': {\n color: '#d91e18',\n },\n 'hljs-deletion': {\n color: '#d91e18',\n },\n 'hljs-number': {\n color: '#aa5d00',\n },\n 'hljs-built_in': {\n color: '#aa5d00',\n },\n 'hljs-builtin-name': {\n color: '#aa5d00',\n },\n 'hljs-literal': {\n color: '#aa5d00',\n },\n 'hljs-type': {\n color: '#aa5d00',\n },\n 'hljs-params': {\n color: '#aa5d00',\n },\n 'hljs-meta': {\n color: '#aa5d00',\n },\n 'hljs-link': {\n color: '#aa5d00',\n },\n 'hljs-attribute': {\n color: '#aa5d00',\n },\n 'hljs-string': {\n color: '#008000',\n },\n 'hljs-symbol': {\n color: '#008000',\n },\n 'hljs-bullet': {\n color: '#008000',\n },\n 'hljs-addition': {\n color: '#008000',\n },\n 'hljs-title': {\n color: '#007faa',\n },\n 'hljs-section': {\n color: '#007faa',\n },\n 'hljs-keyword': {\n color: '#7928a1',\n },\n 'hljs-selector-tag': {\n color: '#7928a1',\n },\n 'hljs-emphasis': {\n fontStyle: 'italic',\n },\n 'hljs-strong': {\n fontWeight: 'bold',\n },\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jp", "React", "useEffect", "useState", "Input", "mx", "createElement", "React", "NativeSyntaxHighlighter", "useThemeContext", "mx", "alabasterDark", "hljs", "display", "overflowX", "color", "padding", "backgroundColor", "githubLight", "fontStyle", "fontWeight", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "NativeSyntaxHighlighter", "className", "mx", "style", "alabasterDark", "githubLight", "Json", "data", "classNames", "React", "SyntaxHighlighter", "language", "JSON", "stringify", "JsonFilter", "initialData", "setData", "useState", "text", "setText", "error", "setError", "useEffect", "trim", "length", "jp", "query", "err", "div", "className", "Input", "Root", "validationValence", "TextInput", "mx", "variant", "value", "onChange", "event", "target", "placeholder"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts":{"bytes":9093,"imports":[],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":4161,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts","kind":"import-statement","original":"./styles"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytes":1028,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx":{"bytes":6365,"imports":[{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytes":528,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx","kind":"import-statement","original":"./JsonFilter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytes":630,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts","kind":"import-statement","original":"./JsonFilter"},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-syntax-highlighter/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":10011},"packages/ui/react-ui-syntax-highlighter/dist/lib/browser/index.mjs":{"imports":[{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","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/light-async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Json","JsonFilter","SyntaxHighlighter","createElement"],"entryPoint":"packages/ui/react-ui-syntax-highlighter/src/index.ts","inputs":{"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx":{"bytesInOutput":1536},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":597},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts":{"bytesInOutput":2081},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":4872}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -28,13 +28,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var node_exports = {};
|
|
30
30
|
__export(node_exports, {
|
|
31
|
-
|
|
31
|
+
Json: () => Json,
|
|
32
|
+
JsonFilter: () => JsonFilter,
|
|
33
|
+
SyntaxHighlighter: () => SyntaxHighlighter,
|
|
34
|
+
createElement: () => import_create_element.default
|
|
32
35
|
});
|
|
33
36
|
module.exports = __toCommonJS(node_exports);
|
|
37
|
+
var import_jsonpath = __toESM(require("jsonpath"));
|
|
34
38
|
var import_react = __toESM(require("react"));
|
|
35
|
-
var import_light_async = __toESM(require("react-syntax-highlighter/dist/esm/light-async"));
|
|
36
39
|
var import_react_ui = require("@dxos/react-ui");
|
|
37
40
|
var import_react_ui_theme = require("@dxos/react-ui-theme");
|
|
41
|
+
var import_create_element = __toESM(require("react-syntax-highlighter/dist/esm/create-element"));
|
|
42
|
+
var import_react2 = __toESM(require("react"));
|
|
43
|
+
var import_light_async = __toESM(require("react-syntax-highlighter/dist/esm/light-async"));
|
|
44
|
+
var import_react_ui2 = require("@dxos/react-ui");
|
|
45
|
+
var import_react_ui_theme2 = require("@dxos/react-ui-theme");
|
|
38
46
|
var alabasterDark = {
|
|
39
47
|
hljs: {
|
|
40
48
|
display: "block",
|
|
@@ -169,15 +177,59 @@ var githubLight = {
|
|
|
169
177
|
};
|
|
170
178
|
var zeroWidthSpace = "\u200B";
|
|
171
179
|
var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
|
|
172
|
-
const { themeMode } = (0,
|
|
173
|
-
return /* @__PURE__ */
|
|
174
|
-
className: (0,
|
|
180
|
+
const { themeMode } = (0, import_react_ui2.useThemeContext)();
|
|
181
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_light_async.default, {
|
|
182
|
+
className: (0, import_react_ui_theme2.mx)("w-full !p-0", classNames),
|
|
175
183
|
style: themeMode === "dark" ? alabasterDark : githubLight,
|
|
176
184
|
...props
|
|
177
185
|
}, children || fallback);
|
|
178
186
|
};
|
|
187
|
+
var Json = ({ data, classNames }) => {
|
|
188
|
+
return /* @__PURE__ */ import_react.default.createElement(SyntaxHighlighter, {
|
|
189
|
+
language: "json",
|
|
190
|
+
classNames
|
|
191
|
+
}, JSON.stringify(data, null, 2));
|
|
192
|
+
};
|
|
193
|
+
var JsonFilter = ({ data: initialData, classNames }) => {
|
|
194
|
+
const [data, setData] = (0, import_react.useState)(initialData);
|
|
195
|
+
const [text, setText] = (0, import_react.useState)("");
|
|
196
|
+
const [error, setError] = (0, import_react.useState)(null);
|
|
197
|
+
(0, import_react.useEffect)(() => {
|
|
198
|
+
if (!initialData || !text.trim().length) {
|
|
199
|
+
setData(initialData);
|
|
200
|
+
} else {
|
|
201
|
+
try {
|
|
202
|
+
setData(import_jsonpath.default.query(initialData, text));
|
|
203
|
+
setError(null);
|
|
204
|
+
} catch (err) {
|
|
205
|
+
setData(initialData);
|
|
206
|
+
setError(err);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
}, [
|
|
210
|
+
initialData,
|
|
211
|
+
text
|
|
212
|
+
]);
|
|
213
|
+
return /* @__PURE__ */ import_react.default.createElement("div", {
|
|
214
|
+
className: "flex flex-col grow overflow-hidden"
|
|
215
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Root, {
|
|
216
|
+
validationValence: error ? "error" : "success"
|
|
217
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.TextInput, {
|
|
218
|
+
classNames: (0, import_react_ui_theme.mx)("p-1 px-2 font-mono", error && "border-red-500"),
|
|
219
|
+
variant: "subdued",
|
|
220
|
+
value: text,
|
|
221
|
+
onChange: (event) => setText(event.target.value),
|
|
222
|
+
placeholder: "JSONPath (e.g., $.graph.nodes)"
|
|
223
|
+
})), /* @__PURE__ */ import_react.default.createElement(SyntaxHighlighter, {
|
|
224
|
+
language: "json",
|
|
225
|
+
classNames: (0, import_react_ui_theme.mx)("grow overflow-y-auto", classNames)
|
|
226
|
+
}, JSON.stringify(data, null, 2)));
|
|
227
|
+
};
|
|
179
228
|
// Annotate the CommonJS export names for ESM import in node:
|
|
180
229
|
0 && (module.exports = {
|
|
181
|
-
|
|
230
|
+
Json,
|
|
231
|
+
JsonFilter,
|
|
232
|
+
SyntaxHighlighter,
|
|
233
|
+
createElement
|
|
182
234
|
});
|
|
183
235
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/SyntaxHighlighter.tsx", "../../../src/styles.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Lightweight version will load specific language parsers asynchronously.\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { alabasterDark, githubLight } from './styles';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n fallback = zeroWidthSpace,\n children,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full p-0
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["alabasterDark", "hljs", "display", "overflowX", "color", "padding", "backgroundColor", "githubLight", "fontStyle", "fontWeight", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "React", "NativeSyntaxHighlighter", "className", "mx", "style"]
|
|
3
|
+
"sources": ["../../../src/JsonFilter/JsonFilter.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx", "../../../src/SyntaxHighlighter/styles.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport jp from 'jsonpath';\nimport React, { useEffect, useState } from 'react';\n\nimport { Input, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\nexport type JsonProps = ThemedClassName<{ data?: any }>;\n\nexport const Json = ({ data, classNames }: JsonProps) => {\n return (\n <SyntaxHighlighter language='json' classNames={classNames}>\n {JSON.stringify(data, null, 2)}\n </SyntaxHighlighter>\n );\n};\n\nexport const JsonFilter = ({ data: initialData, classNames }: JsonProps) => {\n const [data, setData] = useState(initialData);\n const [text, setText] = useState('');\n const [error, setError] = useState<Error | null>(null);\n useEffect(() => {\n if (!initialData || !text.trim().length) {\n setData(initialData);\n } else {\n try {\n setData(jp.query(initialData, text));\n setError(null);\n } catch (err) {\n setData(initialData);\n setError(err as Error);\n }\n }\n }, [initialData, text]);\n\n return (\n <div className='flex flex-col grow overflow-hidden'>\n <Input.Root validationValence={error ? 'error' : 'success'}>\n <Input.TextInput\n classNames={mx('p-1 px-2 font-mono', error && 'border-red-500')}\n variant='subdued'\n value={text}\n onChange={(event) => setText(event.target.value)}\n placeholder='JSONPath (e.g., $.graph.nodes)'\n />\n </Input.Root>\n <SyntaxHighlighter language='json' classNames={mx('grow overflow-y-auto', classNames)}>\n {JSON.stringify(data, null, 2)}\n </SyntaxHighlighter>\n </div>\n );\n};\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 from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Lightweight version will load specific language parsers asynchronously.\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { alabasterDark, githubLight } from './styles';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n fallback = zeroWidthSpace,\n children,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full !p-0', classNames)}\n style={themeMode === 'dark' ? alabasterDark : githubLight}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties } from 'react';\n\n// https://highlightjs.org/examples\n// https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo\n// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_HLJS.MD\n\n/**\n * https://github.com/findrakecil/hljs-alabaster-dark/blob/master/readme.md\n */\nexport const alabasterDark: Record<string, CSSProperties> = {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n color: '#CECECE',\n padding: '0.5em',\n },\n 'hljs-comment': {\n color: '#DFDF8E',\n },\n 'hljs-string': {\n color: '#95CB82',\n },\n 'hljs-meta-string': {\n color: '#95CB82',\n },\n 'hljs-regexp': {\n color: '#95CB82',\n },\n 'hljs-number': {\n color: '#CC8BC9',\n },\n 'hljs-literal': {\n color: '#CC8BC9',\n },\n 'hljs-title': {\n color: '#71ADE7',\n },\n 'hljs-deletion': {\n backgroundColor: '#ffdddd',\n color: '#434343',\n },\n 'hljs-addition': {\n backgroundColor: '#ddffdd',\n color: '#434343',\n },\n};\n\n/**\n * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css\n */\nexport const githubLight: Record<string, CSSProperties> = {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n color: '#545454',\n padding: '0.5em',\n },\n 'hljs-comment': {\n color: '#696969',\n },\n 'hljs-quote': {\n color: '#696969',\n },\n 'hljs-variable': {\n color: '#d91e18',\n },\n 'hljs-template-variable': {\n color: '#d91e18',\n },\n 'hljs-tag': {\n color: '#d91e18',\n },\n 'hljs-name': {\n color: '#d91e18',\n },\n 'hljs-selector-id': {\n color: '#d91e18',\n },\n 'hljs-selector-class': {\n color: '#d91e18',\n },\n 'hljs-regexp': {\n color: '#d91e18',\n },\n 'hljs-deletion': {\n color: '#d91e18',\n },\n 'hljs-number': {\n color: '#aa5d00',\n },\n 'hljs-built_in': {\n color: '#aa5d00',\n },\n 'hljs-builtin-name': {\n color: '#aa5d00',\n },\n 'hljs-literal': {\n color: '#aa5d00',\n },\n 'hljs-type': {\n color: '#aa5d00',\n },\n 'hljs-params': {\n color: '#aa5d00',\n },\n 'hljs-meta': {\n color: '#aa5d00',\n },\n 'hljs-link': {\n color: '#aa5d00',\n },\n 'hljs-attribute': {\n color: '#aa5d00',\n },\n 'hljs-string': {\n color: '#008000',\n },\n 'hljs-symbol': {\n color: '#008000',\n },\n 'hljs-bullet': {\n color: '#008000',\n },\n 'hljs-addition': {\n color: '#008000',\n },\n 'hljs-title': {\n color: '#007faa',\n },\n 'hljs-section': {\n color: '#007faa',\n },\n 'hljs-keyword': {\n color: '#7928a1',\n },\n 'hljs-selector-tag': {\n color: '#7928a1',\n },\n 'hljs-emphasis': {\n fontStyle: 'italic',\n },\n 'hljs-strong': {\n fontWeight: 'bold',\n },\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_react", "import_react_ui", "import_react_ui_theme", "alabasterDark", "hljs", "display", "overflowX", "color", "padding", "backgroundColor", "githubLight", "fontStyle", "fontWeight", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "React", "NativeSyntaxHighlighter", "className", "mx", "style", "Json", "data", "language", "JSON", "stringify", "JsonFilter", "initialData", "setData", "useState", "text", "setText", "error", "setError", "useEffect", "trim", "length", "jp", "query", "err", "div", "Input", "Root", "validationValence", "TextInput", "variant", "value", "onChange", "event", "target", "placeholder"]
|
|
7
7
|
}
|
package/dist/lib/node/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts":{"bytes":9093,"imports":[],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":4161,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts","kind":"import-statement","original":"./styles"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytes":1028,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx":{"bytes":6365,"imports":[{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytes":528,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx","kind":"import-statement","original":"./JsonFilter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytes":630,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts","kind":"import-statement","original":"./JsonFilter"},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-syntax-highlighter/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":10011},"packages/ui/react-ui-syntax-highlighter/dist/lib/node/index.cjs":{"imports":[{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","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/light-async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Json","JsonFilter","SyntaxHighlighter","createElement"],"entryPoint":"packages/ui/react-ui-syntax-highlighter/src/index.ts","inputs":{"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx":{"bytesInOutput":1536},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":597},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts":{"bytesInOutput":2081},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":4872}}}
|
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
2
|
|
|
3
|
-
// packages/ui/react-ui-syntax-highlighter/src/
|
|
3
|
+
// packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx
|
|
4
|
+
import jp from "jsonpath";
|
|
5
|
+
import React2, { useEffect, useState } from "react";
|
|
6
|
+
import { Input } from "@dxos/react-ui";
|
|
7
|
+
import { mx as mx2 } from "@dxos/react-ui-theme";
|
|
8
|
+
|
|
9
|
+
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts
|
|
10
|
+
import createElement from "react-syntax-highlighter/dist/esm/create-element";
|
|
11
|
+
|
|
12
|
+
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx
|
|
4
13
|
import React from "react";
|
|
5
14
|
import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/light-async";
|
|
6
15
|
import { useThemeContext } from "@dxos/react-ui";
|
|
7
16
|
import { mx } from "@dxos/react-ui-theme";
|
|
8
17
|
|
|
9
|
-
// packages/ui/react-ui-syntax-highlighter/src/styles.ts
|
|
18
|
+
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts
|
|
10
19
|
var alabasterDark = {
|
|
11
20
|
hljs: {
|
|
12
21
|
display: "block",
|
|
@@ -140,17 +149,63 @@ var githubLight = {
|
|
|
140
149
|
}
|
|
141
150
|
};
|
|
142
151
|
|
|
143
|
-
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx
|
|
152
|
+
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx
|
|
144
153
|
var zeroWidthSpace = "\u200B";
|
|
145
154
|
var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
|
|
146
155
|
const { themeMode } = useThemeContext();
|
|
147
156
|
return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
|
|
148
|
-
className: mx("w-full p-0
|
|
157
|
+
className: mx("w-full !p-0", classNames),
|
|
149
158
|
style: themeMode === "dark" ? alabasterDark : githubLight,
|
|
150
159
|
...props
|
|
151
160
|
}, children || fallback);
|
|
152
161
|
};
|
|
162
|
+
|
|
163
|
+
// packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx
|
|
164
|
+
var Json = ({ data, classNames }) => {
|
|
165
|
+
return /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
|
|
166
|
+
language: "json",
|
|
167
|
+
classNames
|
|
168
|
+
}, JSON.stringify(data, null, 2));
|
|
169
|
+
};
|
|
170
|
+
var JsonFilter = ({ data: initialData, classNames }) => {
|
|
171
|
+
const [data, setData] = useState(initialData);
|
|
172
|
+
const [text, setText] = useState("");
|
|
173
|
+
const [error, setError] = useState(null);
|
|
174
|
+
useEffect(() => {
|
|
175
|
+
if (!initialData || !text.trim().length) {
|
|
176
|
+
setData(initialData);
|
|
177
|
+
} else {
|
|
178
|
+
try {
|
|
179
|
+
setData(jp.query(initialData, text));
|
|
180
|
+
setError(null);
|
|
181
|
+
} catch (err) {
|
|
182
|
+
setData(initialData);
|
|
183
|
+
setError(err);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}, [
|
|
187
|
+
initialData,
|
|
188
|
+
text
|
|
189
|
+
]);
|
|
190
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
191
|
+
className: "flex flex-col grow overflow-hidden"
|
|
192
|
+
}, /* @__PURE__ */ React2.createElement(Input.Root, {
|
|
193
|
+
validationValence: error ? "error" : "success"
|
|
194
|
+
}, /* @__PURE__ */ React2.createElement(Input.TextInput, {
|
|
195
|
+
classNames: mx2("p-1 px-2 font-mono", error && "border-red-500"),
|
|
196
|
+
variant: "subdued",
|
|
197
|
+
value: text,
|
|
198
|
+
onChange: (event) => setText(event.target.value),
|
|
199
|
+
placeholder: "JSONPath (e.g., $.graph.nodes)"
|
|
200
|
+
})), /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
|
|
201
|
+
language: "json",
|
|
202
|
+
classNames: mx2("grow overflow-y-auto", classNames)
|
|
203
|
+
}, JSON.stringify(data, null, 2)));
|
|
204
|
+
};
|
|
153
205
|
export {
|
|
154
|
-
|
|
206
|
+
Json,
|
|
207
|
+
JsonFilter,
|
|
208
|
+
SyntaxHighlighter,
|
|
209
|
+
createElement
|
|
155
210
|
};
|
|
156
211
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/SyntaxHighlighter.tsx", "../../../src/styles.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Lightweight version will load specific language parsers asynchronously.\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { alabasterDark, githubLight } from './styles';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n fallback = zeroWidthSpace,\n children,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full p-0
|
|
5
|
-
"mappings": ";;;AAIA,OAAOA,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,SAA+BC,uBAAuB;AACtD,SAASC,UAAU;;;ACCZ,IAAMC,gBAA+C;EAC1DC,MAAM;IACJC,SAAS;IACTC,WAAW;IACXC,OAAO;IACPC,SAAS;EACX;EACA,gBAAgB;IACdD,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,oBAAoB;IAClBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,iBAAiB;IACfE,iBAAiB;IACjBF,OAAO;EACT;EACA,iBAAiB;IACfE,iBAAiB;IACjBF,OAAO;EACT;AACF;AAKO,IAAMG,cAA6C;EACxDN,MAAM;IACJC,SAAS;IACTC,WAAW;IACXC,OAAO;IACPC,SAAS;EACX;EACA,gBAAgB;IACdD,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,0BAA0B;IACxBA,OAAO;EACT;EACA,YAAY;IACVA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,oBAAoB;IAClBA,OAAO;EACT;EACA,uBAAuB;IACrBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,qBAAqB;IACnBA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,kBAAkB;IAChBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,qBAAqB;IACnBA,OAAO;EACT;EACA,iBAAiB;IACfI,WAAW;EACb;EACA,eAAe;IACbC,YAAY;EACd;AACF;;;ADpIA,IAAMC,iBAAiB;AAWhB,IAAMC,oBAAoB,CAAC,EAChCC,YACAC,WAAWH,gBACXI,UACA,GAAGC,MAAAA,MACoB;AACvB,QAAM,EAAEC,UAAS,IAAKC,gBAAAA;
|
|
6
|
-
"names": ["React", "NativeSyntaxHighlighter", "useThemeContext", "mx", "alabasterDark", "hljs", "display", "overflowX", "color", "padding", "backgroundColor", "githubLight", "fontStyle", "fontWeight", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "NativeSyntaxHighlighter", "className", "mx", "style", "alabasterDark", "githubLight"]
|
|
3
|
+
"sources": ["../../../src/JsonFilter/JsonFilter.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx", "../../../src/SyntaxHighlighter/styles.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport jp from 'jsonpath';\nimport React, { useEffect, useState } from 'react';\n\nimport { Input, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\nexport type JsonProps = ThemedClassName<{ data?: any }>;\n\nexport const Json = ({ data, classNames }: JsonProps) => {\n return (\n <SyntaxHighlighter language='json' classNames={classNames}>\n {JSON.stringify(data, null, 2)}\n </SyntaxHighlighter>\n );\n};\n\nexport const JsonFilter = ({ data: initialData, classNames }: JsonProps) => {\n const [data, setData] = useState(initialData);\n const [text, setText] = useState('');\n const [error, setError] = useState<Error | null>(null);\n useEffect(() => {\n if (!initialData || !text.trim().length) {\n setData(initialData);\n } else {\n try {\n setData(jp.query(initialData, text));\n setError(null);\n } catch (err) {\n setData(initialData);\n setError(err as Error);\n }\n }\n }, [initialData, text]);\n\n return (\n <div className='flex flex-col grow overflow-hidden'>\n <Input.Root validationValence={error ? 'error' : 'success'}>\n <Input.TextInput\n classNames={mx('p-1 px-2 font-mono', error && 'border-red-500')}\n variant='subdued'\n value={text}\n onChange={(event) => setText(event.target.value)}\n placeholder='JSONPath (e.g., $.graph.nodes)'\n />\n </Input.Root>\n <SyntaxHighlighter language='json' classNames={mx('grow overflow-y-auto', classNames)}>\n {JSON.stringify(data, null, 2)}\n </SyntaxHighlighter>\n </div>\n );\n};\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 from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Lightweight version will load specific language parsers asynchronously.\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { alabasterDark, githubLight } from './styles';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n fallback = zeroWidthSpace,\n children,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full !p-0', classNames)}\n style={themeMode === 'dark' ? alabasterDark : githubLight}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties } from 'react';\n\n// https://highlightjs.org/examples\n// https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo\n// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_HLJS.MD\n\n/**\n * https://github.com/findrakecil/hljs-alabaster-dark/blob/master/readme.md\n */\nexport const alabasterDark: Record<string, CSSProperties> = {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n color: '#CECECE',\n padding: '0.5em',\n },\n 'hljs-comment': {\n color: '#DFDF8E',\n },\n 'hljs-string': {\n color: '#95CB82',\n },\n 'hljs-meta-string': {\n color: '#95CB82',\n },\n 'hljs-regexp': {\n color: '#95CB82',\n },\n 'hljs-number': {\n color: '#CC8BC9',\n },\n 'hljs-literal': {\n color: '#CC8BC9',\n },\n 'hljs-title': {\n color: '#71ADE7',\n },\n 'hljs-deletion': {\n backgroundColor: '#ffdddd',\n color: '#434343',\n },\n 'hljs-addition': {\n backgroundColor: '#ddffdd',\n color: '#434343',\n },\n};\n\n/**\n * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css\n */\nexport const githubLight: Record<string, CSSProperties> = {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n color: '#545454',\n padding: '0.5em',\n },\n 'hljs-comment': {\n color: '#696969',\n },\n 'hljs-quote': {\n color: '#696969',\n },\n 'hljs-variable': {\n color: '#d91e18',\n },\n 'hljs-template-variable': {\n color: '#d91e18',\n },\n 'hljs-tag': {\n color: '#d91e18',\n },\n 'hljs-name': {\n color: '#d91e18',\n },\n 'hljs-selector-id': {\n color: '#d91e18',\n },\n 'hljs-selector-class': {\n color: '#d91e18',\n },\n 'hljs-regexp': {\n color: '#d91e18',\n },\n 'hljs-deletion': {\n color: '#d91e18',\n },\n 'hljs-number': {\n color: '#aa5d00',\n },\n 'hljs-built_in': {\n color: '#aa5d00',\n },\n 'hljs-builtin-name': {\n color: '#aa5d00',\n },\n 'hljs-literal': {\n color: '#aa5d00',\n },\n 'hljs-type': {\n color: '#aa5d00',\n },\n 'hljs-params': {\n color: '#aa5d00',\n },\n 'hljs-meta': {\n color: '#aa5d00',\n },\n 'hljs-link': {\n color: '#aa5d00',\n },\n 'hljs-attribute': {\n color: '#aa5d00',\n },\n 'hljs-string': {\n color: '#008000',\n },\n 'hljs-symbol': {\n color: '#008000',\n },\n 'hljs-bullet': {\n color: '#008000',\n },\n 'hljs-addition': {\n color: '#008000',\n },\n 'hljs-title': {\n color: '#007faa',\n },\n 'hljs-section': {\n color: '#007faa',\n },\n 'hljs-keyword': {\n color: '#7928a1',\n },\n 'hljs-selector-tag': {\n color: '#7928a1',\n },\n 'hljs-emphasis': {\n fontStyle: 'italic',\n },\n 'hljs-strong': {\n fontWeight: 'bold',\n },\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jp", "React", "useEffect", "useState", "Input", "mx", "createElement", "React", "NativeSyntaxHighlighter", "useThemeContext", "mx", "alabasterDark", "hljs", "display", "overflowX", "color", "padding", "backgroundColor", "githubLight", "fontStyle", "fontWeight", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "NativeSyntaxHighlighter", "className", "mx", "style", "alabasterDark", "githubLight", "Json", "data", "classNames", "React", "SyntaxHighlighter", "language", "JSON", "stringify", "JsonFilter", "initialData", "setData", "useState", "text", "setText", "error", "setError", "useEffect", "trim", "length", "jp", "query", "err", "div", "className", "Input", "Root", "validationValence", "TextInput", "mx", "variant", "value", "onChange", "event", "target", "placeholder"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts":{"bytes":9093,"imports":[],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":4161,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts","kind":"import-statement","original":"./styles"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytes":1028,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx":{"bytes":6365,"imports":[{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytes":528,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx","kind":"import-statement","original":"./JsonFilter"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytes":630,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts","kind":"import-statement","original":"./JsonFilter"},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-syntax-highlighter/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":10013},"packages/ui/react-ui-syntax-highlighter/dist/lib/node-esm/index.mjs":{"imports":[{"path":"jsonpath","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","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/light-async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Json","JsonFilter","SyntaxHighlighter","createElement"],"entryPoint":"packages/ui/react-ui-syntax-highlighter/src/index.ts","inputs":{"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx":{"bytesInOutput":1536},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":597},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/styles.ts":{"bytesInOutput":2081},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":4965}}}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type ThemedClassName } from '@dxos/react-ui';
|
|
3
|
+
export type JsonProps = ThemedClassName<{
|
|
4
|
+
data?: any;
|
|
5
|
+
}>;
|
|
6
|
+
export declare const Json: ({ data, classNames }: JsonProps) => React.JSX.Element;
|
|
7
|
+
export declare const JsonFilter: ({ data: initialData, classNames }: JsonProps) => React.JSX.Element;
|
|
8
|
+
//# sourceMappingURL=JsonFilter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"JsonFilter.d.ts","sourceRoot":"","sources":["../../../../src/JsonFilter/JsonFilter.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAS,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAK7D,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,CAAC,CAAC;AAExD,eAAO,MAAM,IAAI,yBAA0B,SAAS,sBAMnD,CAAC;AAEF,eAAO,MAAM,UAAU,sCAAuC,SAAS,sBAkCtE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/JsonFilter/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,sBAAsB,IAAI,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAMvG,OAAO,EAAE,KAAK,eAAe,EAAmB,MAAM,gBAAgB,CAAC;AAOvE,MAAM,MAAM,sBAAsB,GAAG,eAAe,CAClD,4BAA4B,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,iDAK3B,sBAAsB,sBAaxB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SyntaxHighlighter.stories.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;;;;;;AAMrB,wBAIE;AAEF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;CAKtB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;CAIjB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/index.ts"],"names":[],"mappings":"AAKA,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,cAAc,qBAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAM3C;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAoCvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CA8FrD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":"5.7.3"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-syntax-highlighter",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.5-labs.35b4b42",
|
|
4
4
|
"description": "A syntax highlighter wrapper.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -23,24 +23,26 @@
|
|
|
23
23
|
"src"
|
|
24
24
|
],
|
|
25
25
|
"dependencies": {
|
|
26
|
+
"jsonpath": "^1.1.1",
|
|
26
27
|
"react-syntax-highlighter": "^15.5.0"
|
|
27
28
|
},
|
|
28
29
|
"devDependencies": {
|
|
30
|
+
"@types/jsonpath": "^0.2.4",
|
|
29
31
|
"@types/react": "~18.2.0",
|
|
30
32
|
"@types/react-dom": "~18.2.0",
|
|
31
33
|
"@types/react-syntax-highlighter": "^15.5.13",
|
|
32
34
|
"react": "~18.2.0",
|
|
33
35
|
"react-dom": "~18.2.0",
|
|
34
36
|
"vite": "5.4.7",
|
|
35
|
-
"@dxos/react-ui": "0.7.
|
|
36
|
-
"@dxos/
|
|
37
|
-
"@dxos/
|
|
37
|
+
"@dxos/react-ui-theme": "0.7.5-labs.35b4b42",
|
|
38
|
+
"@dxos/storybook-utils": "0.7.5-labs.35b4b42",
|
|
39
|
+
"@dxos/react-ui": "0.7.5-labs.35b4b42"
|
|
38
40
|
},
|
|
39
41
|
"peerDependencies": {
|
|
40
42
|
"react": "~18.2.0",
|
|
41
43
|
"react-dom": "~18.2.0",
|
|
42
|
-
"@dxos/react-ui": "0.7.
|
|
43
|
-
"@dxos/react-ui-theme": "0.7.
|
|
44
|
+
"@dxos/react-ui": "0.7.5-labs.35b4b42",
|
|
45
|
+
"@dxos/react-ui-theme": "0.7.5-labs.35b4b42"
|
|
44
46
|
},
|
|
45
47
|
"publishConfig": {
|
|
46
48
|
"access": "public"
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import jp from 'jsonpath';
|
|
6
|
+
import React, { useEffect, useState } from 'react';
|
|
7
|
+
|
|
8
|
+
import { Input, type ThemedClassName } from '@dxos/react-ui';
|
|
9
|
+
import { mx } from '@dxos/react-ui-theme';
|
|
10
|
+
|
|
11
|
+
import { SyntaxHighlighter } from '../SyntaxHighlighter';
|
|
12
|
+
|
|
13
|
+
export type JsonProps = ThemedClassName<{ data?: any }>;
|
|
14
|
+
|
|
15
|
+
export const Json = ({ data, classNames }: JsonProps) => {
|
|
16
|
+
return (
|
|
17
|
+
<SyntaxHighlighter language='json' classNames={classNames}>
|
|
18
|
+
{JSON.stringify(data, null, 2)}
|
|
19
|
+
</SyntaxHighlighter>
|
|
20
|
+
);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export const JsonFilter = ({ data: initialData, classNames }: JsonProps) => {
|
|
24
|
+
const [data, setData] = useState(initialData);
|
|
25
|
+
const [text, setText] = useState('');
|
|
26
|
+
const [error, setError] = useState<Error | null>(null);
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
if (!initialData || !text.trim().length) {
|
|
29
|
+
setData(initialData);
|
|
30
|
+
} else {
|
|
31
|
+
try {
|
|
32
|
+
setData(jp.query(initialData, text));
|
|
33
|
+
setError(null);
|
|
34
|
+
} catch (err) {
|
|
35
|
+
setData(initialData);
|
|
36
|
+
setError(err as Error);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}, [initialData, text]);
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<div className='flex flex-col grow overflow-hidden'>
|
|
43
|
+
<Input.Root validationValence={error ? 'error' : 'success'}>
|
|
44
|
+
<Input.TextInput
|
|
45
|
+
classNames={mx('p-1 px-2 font-mono', error && 'border-red-500')}
|
|
46
|
+
variant='subdued'
|
|
47
|
+
value={text}
|
|
48
|
+
onChange={(event) => setText(event.target.value)}
|
|
49
|
+
placeholder='JSONPath (e.g., $.graph.nodes)'
|
|
50
|
+
/>
|
|
51
|
+
</Input.Root>
|
|
52
|
+
<SyntaxHighlighter language='json' classNames={mx('grow overflow-y-auto', classNames)}>
|
|
53
|
+
{JSON.stringify(data, null, 2)}
|
|
54
|
+
</SyntaxHighlighter>
|
|
55
|
+
</div>
|
|
56
|
+
);
|
|
57
|
+
};
|
|
@@ -32,9 +32,10 @@ export const SyntaxHighlighter = ({
|
|
|
32
32
|
...props
|
|
33
33
|
}: SyntaxHighlighterProps) => {
|
|
34
34
|
const { themeMode } = useThemeContext();
|
|
35
|
+
|
|
35
36
|
return (
|
|
36
37
|
<NativeSyntaxHighlighter
|
|
37
|
-
className={mx('w-full p-0
|
|
38
|
+
className={mx('w-full !p-0', classNames)}
|
|
38
39
|
style={themeMode === 'dark' ? alabasterDark : githubLight}
|
|
39
40
|
{...props}
|
|
40
41
|
>
|
package/src/index.ts
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../src/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,sBAAsB,IAAI,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAMvG,OAAO,EAAE,KAAK,eAAe,EAAmB,MAAM,gBAAgB,CAAC;AAOvE,MAAM,MAAM,sBAAsB,GAAG,eAAe,CAClD,4BAA4B,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,iDAK3B,sBAAsB,sBAYxB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SyntaxHighlighter.stories.d.ts","sourceRoot":"","sources":["../../../src/SyntaxHighlighter.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;;;;;;AAMrB,wBAIE;AAEF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;CAKtB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;CAIjB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAM3C;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAoCvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CA8FrD,CAAC"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/src/{SyntaxHighlighter.stories.tsx → SyntaxHighlighter/SyntaxHighlighter.stories.tsx}
RENAMED
|
File without changes
|
|
File without changes
|