@dxos/react-ui-syntax-highlighter 0.7.5-labs.5f04cf6 → 0.7.5-labs.8a82073
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 +8 -1
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +9 -1
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +8 -1
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/JsonFilter/JsonFilter.d.ts +3 -2
- package/dist/types/src/JsonFilter/JsonFilter.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -6
- package/src/JsonFilter/JsonFilter.tsx +10 -2
- package/src/SyntaxHighlighter/SyntaxHighlighter.tsx +1 -1
|
@@ -152,13 +152,19 @@ var zeroWidthSpace = "\u200B";
|
|
|
152
152
|
var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
|
|
153
153
|
const { themeMode } = useThemeContext();
|
|
154
154
|
return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
|
|
155
|
-
className: mx("w-full p-0
|
|
155
|
+
className: mx("w-full !p-0", classNames),
|
|
156
156
|
style: themeMode === "dark" ? alabasterDark : githubLight,
|
|
157
157
|
...props
|
|
158
158
|
}, children || fallback);
|
|
159
159
|
};
|
|
160
160
|
|
|
161
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
|
+
};
|
|
162
168
|
var JsonFilter = ({ data: initialData, classNames }) => {
|
|
163
169
|
const [data, setData] = useState(initialData);
|
|
164
170
|
const [text, setText] = useState("");
|
|
@@ -195,6 +201,7 @@ var JsonFilter = ({ data: initialData, classNames }) => {
|
|
|
195
201
|
}, JSON.stringify(data, null, 2)));
|
|
196
202
|
};
|
|
197
203
|
export {
|
|
204
|
+
Json,
|
|
198
205
|
JsonFilter,
|
|
199
206
|
SyntaxHighlighter,
|
|
200
207
|
createElement
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
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
|
|
5
|
-
"mappings": ";AAIA,OAAOA,QAAQ;AACf,OAAOC,UAASC,WAAWC,gBAAgB;AAE3C,SAASC,aAAmC;AAC5C,SAASC,MAAAA,WAAU;;;ACHnB,OAAOC,mBAAmB;;;ACD1B,OAAOC,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;AAEtB,SACE,sBAAA,cAACC,yBAAAA;IACCC,WAAWC,GAAG,
|
|
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", "
|
|
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/SyntaxHighlighter/styles.ts":{"bytes":9093,"imports":[],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"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,6 +28,7 @@ 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
|
+
Json: () => Json,
|
|
31
32
|
JsonFilter: () => JsonFilter,
|
|
32
33
|
SyntaxHighlighter: () => SyntaxHighlighter,
|
|
33
34
|
createElement: () => import_create_element.default
|
|
@@ -178,11 +179,17 @@ var zeroWidthSpace = "\u200B";
|
|
|
178
179
|
var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
|
|
179
180
|
const { themeMode } = (0, import_react_ui2.useThemeContext)();
|
|
180
181
|
return /* @__PURE__ */ import_react2.default.createElement(import_light_async.default, {
|
|
181
|
-
className: (0, import_react_ui_theme2.mx)("w-full p-0
|
|
182
|
+
className: (0, import_react_ui_theme2.mx)("w-full !p-0", classNames),
|
|
182
183
|
style: themeMode === "dark" ? alabasterDark : githubLight,
|
|
183
184
|
...props
|
|
184
185
|
}, children || fallback);
|
|
185
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
|
+
};
|
|
186
193
|
var JsonFilter = ({ data: initialData, classNames }) => {
|
|
187
194
|
const [data, setData] = (0, import_react.useState)(initialData);
|
|
188
195
|
const [text, setText] = (0, import_react.useState)("");
|
|
@@ -220,6 +227,7 @@ var JsonFilter = ({ data: initialData, classNames }) => {
|
|
|
220
227
|
};
|
|
221
228
|
// Annotate the CommonJS export names for ESM import in node:
|
|
222
229
|
0 && (module.exports = {
|
|
230
|
+
Json,
|
|
223
231
|
JsonFilter,
|
|
224
232
|
SyntaxHighlighter,
|
|
225
233
|
createElement
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
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
|
|
5
|
-
"mappings": "
|
|
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", "
|
|
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/SyntaxHighlighter/styles.ts":{"bytes":9093,"imports":[],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"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}}}
|
|
@@ -154,13 +154,19 @@ var zeroWidthSpace = "\u200B";
|
|
|
154
154
|
var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
|
|
155
155
|
const { themeMode } = useThemeContext();
|
|
156
156
|
return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
|
|
157
|
-
className: mx("w-full p-0
|
|
157
|
+
className: mx("w-full !p-0", classNames),
|
|
158
158
|
style: themeMode === "dark" ? alabasterDark : githubLight,
|
|
159
159
|
...props
|
|
160
160
|
}, children || fallback);
|
|
161
161
|
};
|
|
162
162
|
|
|
163
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
|
+
};
|
|
164
170
|
var JsonFilter = ({ data: initialData, classNames }) => {
|
|
165
171
|
const [data, setData] = useState(initialData);
|
|
166
172
|
const [text, setText] = useState("");
|
|
@@ -197,6 +203,7 @@ var JsonFilter = ({ data: initialData, classNames }) => {
|
|
|
197
203
|
}, JSON.stringify(data, null, 2)));
|
|
198
204
|
};
|
|
199
205
|
export {
|
|
206
|
+
Json,
|
|
200
207
|
JsonFilter,
|
|
201
208
|
SyntaxHighlighter,
|
|
202
209
|
createElement
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
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
|
|
5
|
-
"mappings": ";;;AAIA,OAAOA,QAAQ;AACf,OAAOC,UAASC,WAAWC,gBAAgB;AAE3C,SAASC,aAAmC;AAC5C,SAASC,MAAAA,WAAU;;;ACHnB,OAAOC,mBAAmB;;;ACD1B,OAAOC,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;AAEtB,SACE,sBAAA,cAACC,yBAAAA;IACCC,WAAWC,GAAG,
|
|
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", "
|
|
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/SyntaxHighlighter/styles.ts":{"bytes":9093,"imports":[],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"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}}}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
3
|
-
export type
|
|
3
|
+
export type JsonProps = ThemedClassName<{
|
|
4
4
|
data?: any;
|
|
5
5
|
}>;
|
|
6
|
-
export declare const
|
|
6
|
+
export declare const Json: ({ data, classNames }: JsonProps) => React.JSX.Element;
|
|
7
|
+
export declare const JsonFilter: ({ data: initialData, classNames }: JsonProps) => React.JSX.Element;
|
|
7
8
|
//# sourceMappingURL=JsonFilter.d.ts.map
|
|
@@ -1 +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,
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.7.
|
|
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.5-labs.
|
|
3
|
+
"version": "0.7.5-labs.8a82073",
|
|
4
4
|
"description": "A syntax highlighter wrapper.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -34,15 +34,15 @@
|
|
|
34
34
|
"react": "~18.2.0",
|
|
35
35
|
"react-dom": "~18.2.0",
|
|
36
36
|
"vite": "5.4.7",
|
|
37
|
-
"@dxos/react-ui": "0.7.5-labs.
|
|
38
|
-
"@dxos/react-ui-theme": "0.7.5-labs.
|
|
39
|
-
"@dxos/storybook-utils": "0.7.5-labs.
|
|
37
|
+
"@dxos/react-ui": "0.7.5-labs.8a82073",
|
|
38
|
+
"@dxos/react-ui-theme": "0.7.5-labs.8a82073",
|
|
39
|
+
"@dxos/storybook-utils": "0.7.5-labs.8a82073"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"react": "~18.2.0",
|
|
43
43
|
"react-dom": "~18.2.0",
|
|
44
|
-
"@dxos/react-ui": "0.7.5-labs.
|
|
45
|
-
"@dxos/react-ui-theme": "0.7.5-labs.
|
|
44
|
+
"@dxos/react-ui": "0.7.5-labs.8a82073",
|
|
45
|
+
"@dxos/react-ui-theme": "0.7.5-labs.8a82073"
|
|
46
46
|
},
|
|
47
47
|
"publishConfig": {
|
|
48
48
|
"access": "public"
|
|
@@ -10,9 +10,17 @@ import { mx } from '@dxos/react-ui-theme';
|
|
|
10
10
|
|
|
11
11
|
import { SyntaxHighlighter } from '../SyntaxHighlighter';
|
|
12
12
|
|
|
13
|
-
export type
|
|
13
|
+
export type JsonProps = ThemedClassName<{ data?: any }>;
|
|
14
14
|
|
|
15
|
-
export const
|
|
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) => {
|
|
16
24
|
const [data, setData] = useState(initialData);
|
|
17
25
|
const [text, setText] = useState('');
|
|
18
26
|
const [error, setError] = useState<Error | null>(null);
|