@dxos/react-ui-syntax-highlighter 0.7.5-labs.a279d8c → 0.7.5-main.2567c87
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 +4 -48
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +5 -46
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +4 -48
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/SyntaxHighlighter.d.ts.map +1 -0
- package/dist/types/src/SyntaxHighlighter.stories.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +2 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/styles.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -8
- package/src/{SyntaxHighlighter/SyntaxHighlighter.tsx → SyntaxHighlighter.tsx} +0 -1
- package/src/index.ts +4 -1
- package/dist/types/src/JsonFilter/JsonFilter.d.ts +0 -7
- package/dist/types/src/JsonFilter/JsonFilter.d.ts.map +0 -1
- package/dist/types/src/JsonFilter/index.d.ts +0 -2
- package/dist/types/src/JsonFilter/index.d.ts.map +0 -1
- package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.d.ts.map +0 -1
- package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.stories.d.ts.map +0 -1
- package/dist/types/src/SyntaxHighlighter/index.d.ts +0 -4
- package/dist/types/src/SyntaxHighlighter/index.d.ts.map +0 -1
- package/dist/types/src/SyntaxHighlighter/styles.d.ts.map +0 -1
- package/src/JsonFilter/JsonFilter.tsx +0 -49
- package/src/JsonFilter/index.ts +0 -5
- package/src/SyntaxHighlighter/index.ts +0 -10
- /package/dist/types/src/{SyntaxHighlighter/SyntaxHighlighter.d.ts → SyntaxHighlighter.d.ts} +0 -0
- /package/dist/types/src/{SyntaxHighlighter/SyntaxHighlighter.stories.d.ts → SyntaxHighlighter.stories.d.ts} +0 -0
- /package/dist/types/src/{SyntaxHighlighter/styles.d.ts → styles.d.ts} +0 -0
- /package/src/{SyntaxHighlighter/SyntaxHighlighter.stories.tsx → SyntaxHighlighter.stories.tsx} +0 -0
- /package/src/{SyntaxHighlighter/styles.ts → styles.ts} +0 -0
|
@@ -1,19 +1,13 @@
|
|
|
1
|
-
// packages/ui/react-ui-syntax-highlighter/src/
|
|
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
|
|
1
|
+
// packages/ui/react-ui-syntax-highlighter/src/index.ts
|
|
8
2
|
import createElement from "react-syntax-highlighter/dist/esm/create-element";
|
|
9
3
|
|
|
10
|
-
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter
|
|
4
|
+
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx
|
|
11
5
|
import React from "react";
|
|
12
6
|
import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/light-async";
|
|
13
7
|
import { useThemeContext } from "@dxos/react-ui";
|
|
14
8
|
import { mx } from "@dxos/react-ui-theme";
|
|
15
9
|
|
|
16
|
-
// packages/ui/react-ui-syntax-highlighter/src/
|
|
10
|
+
// packages/ui/react-ui-syntax-highlighter/src/styles.ts
|
|
17
11
|
var alabasterDark = {
|
|
18
12
|
hljs: {
|
|
19
13
|
display: "block",
|
|
@@ -147,7 +141,7 @@ var githubLight = {
|
|
|
147
141
|
}
|
|
148
142
|
};
|
|
149
143
|
|
|
150
|
-
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter
|
|
144
|
+
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx
|
|
151
145
|
var zeroWidthSpace = "\u200B";
|
|
152
146
|
var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
|
|
153
147
|
const { themeMode } = useThemeContext();
|
|
@@ -157,45 +151,7 @@ var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...p
|
|
|
157
151
|
...props
|
|
158
152
|
}, children || fallback);
|
|
159
153
|
};
|
|
160
|
-
|
|
161
|
-
// packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx
|
|
162
|
-
var JsonFilter = ({ data: initialData, classNames }) => {
|
|
163
|
-
const [data, setData] = useState(initialData);
|
|
164
|
-
const [text, setText] = useState("");
|
|
165
|
-
const [error, setError] = useState(null);
|
|
166
|
-
useEffect(() => {
|
|
167
|
-
if (!initialData || !text.trim().length) {
|
|
168
|
-
setData(initialData);
|
|
169
|
-
} else {
|
|
170
|
-
try {
|
|
171
|
-
setData(jp.query(initialData, text));
|
|
172
|
-
setError(null);
|
|
173
|
-
} catch (err) {
|
|
174
|
-
setData(initialData);
|
|
175
|
-
setError(err);
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
}, [
|
|
179
|
-
initialData,
|
|
180
|
-
text
|
|
181
|
-
]);
|
|
182
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
183
|
-
className: "flex flex-col grow overflow-hidden"
|
|
184
|
-
}, /* @__PURE__ */ React2.createElement(Input.Root, {
|
|
185
|
-
validationValence: error ? "error" : "success"
|
|
186
|
-
}, /* @__PURE__ */ React2.createElement(Input.TextInput, {
|
|
187
|
-
classNames: mx2("p-1 px-2 font-mono", error && "border-red-500"),
|
|
188
|
-
variant: "subdued",
|
|
189
|
-
value: text,
|
|
190
|
-
onChange: (event) => setText(event.target.value),
|
|
191
|
-
placeholder: "JSONPath (e.g., $.graph.nodes)"
|
|
192
|
-
})), /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
|
|
193
|
-
language: "json",
|
|
194
|
-
classNames: mx2("grow overflow-y-auto", classNames)
|
|
195
|
-
}, JSON.stringify(data, null, 2)));
|
|
196
|
-
};
|
|
197
154
|
export {
|
|
198
|
-
JsonFilter,
|
|
199
155
|
SyntaxHighlighter,
|
|
200
156
|
createElement
|
|
201
157
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright
|
|
5
|
-
"mappings": ";
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/index.ts", "../../../src/SyntaxHighlighter.tsx", "../../../src/styles.ts"],
|
|
4
|
+
"sourcesContent": ["//\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 * from './SyntaxHighlighter';\nexport { createElement };\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 return (\n <NativeSyntaxHighlighter\n className={mx('w-full p-0.5', 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": ";AAKA,OAAOA,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;AACtB,SACE,sBAAA,cAACC,yBAAAA;IACCC,WAAWC,GAAG,gBAAgBR,UAAAA;IAC9BS,OAAOL,cAAc,SAASM,gBAAgBC;IAC7C,GAAGR;KAGHD,YAAYD,QAAAA;AAGnB;",
|
|
6
|
+
"names": ["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"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytes":9075,"imports":[],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytes":4144,"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/styles.ts","kind":"import-statement","original":"./styles"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytes":1006,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-syntax-highlighter/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":6648},"packages/ui/react-ui-syntax-highlighter/dist/lib/browser/index.mjs":{"imports":[{"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":["SyntaxHighlighter","createElement"],"entryPoint":"packages/ui/react-ui-syntax-highlighter/src/index.ts","inputs":{"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":78},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytesInOutput":598},"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytesInOutput":2081}},"bytes":3095}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -28,20 +28,15 @@ 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
|
-
JsonFilter: () => JsonFilter,
|
|
32
31
|
SyntaxHighlighter: () => SyntaxHighlighter,
|
|
33
32
|
createElement: () => import_create_element.default
|
|
34
33
|
});
|
|
35
34
|
module.exports = __toCommonJS(node_exports);
|
|
36
|
-
var
|
|
35
|
+
var import_create_element = __toESM(require("react-syntax-highlighter/dist/esm/create-element"));
|
|
37
36
|
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_light_async = __toESM(require("react-syntax-highlighter/dist/esm/light-async"));
|
|
38
38
|
var import_react_ui = require("@dxos/react-ui");
|
|
39
39
|
var import_react_ui_theme = require("@dxos/react-ui-theme");
|
|
40
|
-
var import_create_element = __toESM(require("react-syntax-highlighter/dist/esm/create-element"));
|
|
41
|
-
var import_react2 = __toESM(require("react"));
|
|
42
|
-
var import_light_async = __toESM(require("react-syntax-highlighter/dist/esm/light-async"));
|
|
43
|
-
var import_react_ui2 = require("@dxos/react-ui");
|
|
44
|
-
var import_react_ui_theme2 = require("@dxos/react-ui-theme");
|
|
45
40
|
var alabasterDark = {
|
|
46
41
|
hljs: {
|
|
47
42
|
display: "block",
|
|
@@ -176,51 +171,15 @@ var githubLight = {
|
|
|
176
171
|
};
|
|
177
172
|
var zeroWidthSpace = "\u200B";
|
|
178
173
|
var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
|
|
179
|
-
const { themeMode } = (0,
|
|
180
|
-
return /* @__PURE__ */
|
|
181
|
-
className: (0,
|
|
174
|
+
const { themeMode } = (0, import_react_ui.useThemeContext)();
|
|
175
|
+
return /* @__PURE__ */ import_react.default.createElement(import_light_async.default, {
|
|
176
|
+
className: (0, import_react_ui_theme.mx)("w-full p-0.5", classNames),
|
|
182
177
|
style: themeMode === "dark" ? alabasterDark : githubLight,
|
|
183
178
|
...props
|
|
184
179
|
}, children || fallback);
|
|
185
180
|
};
|
|
186
|
-
var JsonFilter = ({ data: initialData, classNames }) => {
|
|
187
|
-
const [data, setData] = (0, import_react.useState)(initialData);
|
|
188
|
-
const [text, setText] = (0, import_react.useState)("");
|
|
189
|
-
const [error, setError] = (0, import_react.useState)(null);
|
|
190
|
-
(0, import_react.useEffect)(() => {
|
|
191
|
-
if (!initialData || !text.trim().length) {
|
|
192
|
-
setData(initialData);
|
|
193
|
-
} else {
|
|
194
|
-
try {
|
|
195
|
-
setData(import_jsonpath.default.query(initialData, text));
|
|
196
|
-
setError(null);
|
|
197
|
-
} catch (err) {
|
|
198
|
-
setData(initialData);
|
|
199
|
-
setError(err);
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
}, [
|
|
203
|
-
initialData,
|
|
204
|
-
text
|
|
205
|
-
]);
|
|
206
|
-
return /* @__PURE__ */ import_react.default.createElement("div", {
|
|
207
|
-
className: "flex flex-col grow overflow-hidden"
|
|
208
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Root, {
|
|
209
|
-
validationValence: error ? "error" : "success"
|
|
210
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.TextInput, {
|
|
211
|
-
classNames: (0, import_react_ui_theme.mx)("p-1 px-2 font-mono", error && "border-red-500"),
|
|
212
|
-
variant: "subdued",
|
|
213
|
-
value: text,
|
|
214
|
-
onChange: (event) => setText(event.target.value),
|
|
215
|
-
placeholder: "JSONPath (e.g., $.graph.nodes)"
|
|
216
|
-
})), /* @__PURE__ */ import_react.default.createElement(SyntaxHighlighter, {
|
|
217
|
-
language: "json",
|
|
218
|
-
classNames: (0, import_react_ui_theme.mx)("grow overflow-y-auto", classNames)
|
|
219
|
-
}, JSON.stringify(data, null, 2)));
|
|
220
|
-
};
|
|
221
181
|
// Annotate the CommonJS export names for ESM import in node:
|
|
222
182
|
0 && (module.exports = {
|
|
223
|
-
JsonFilter,
|
|
224
183
|
SyntaxHighlighter,
|
|
225
184
|
createElement
|
|
226
185
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/index.ts", "../../../src/SyntaxHighlighter.tsx", "../../../src/styles.ts"],
|
|
4
|
+
"sourcesContent": ["//\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 * from './SyntaxHighlighter';\nexport { createElement };\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 return (\n <NativeSyntaxHighlighter\n className={mx('w-full p-0.5', 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,4BAA0B;ACD1B,mBAAkB;AAKlB,yBAAoC;AAEpC,sBAAsD;AACtD,4BAAmB;ACCZ,IAAMA,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,QAAKC,iCAAAA;AACtB,SACE,6BAAAC,QAAA,cAACC,mBAAAA,SAAAA;IACCC,eAAWC,0BAAG,gBAAgBT,UAAAA;IAC9BU,OAAON,cAAc,SAAShB,gBAAgBO;IAC7C,GAAGQ;KAGHD,YAAYD,QAAAA;AAGnB;",
|
|
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"]
|
|
7
7
|
}
|
package/dist/lib/node/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytes":9075,"imports":[],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytes":4144,"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/styles.ts","kind":"import-statement","original":"./styles"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytes":1006,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-syntax-highlighter/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":6648},"packages/ui/react-ui-syntax-highlighter/dist/lib/node/index.cjs":{"imports":[{"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":["SyntaxHighlighter","createElement"],"entryPoint":"packages/ui/react-ui-syntax-highlighter/src/index.ts","inputs":{"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":78},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytesInOutput":598},"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytesInOutput":2081}},"bytes":3095}}}
|
|
@@ -1,21 +1,15 @@
|
|
|
1
1
|
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
2
|
|
|
3
|
-
// packages/ui/react-ui-syntax-highlighter/src/
|
|
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
|
|
3
|
+
// packages/ui/react-ui-syntax-highlighter/src/index.ts
|
|
10
4
|
import createElement from "react-syntax-highlighter/dist/esm/create-element";
|
|
11
5
|
|
|
12
|
-
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter
|
|
6
|
+
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx
|
|
13
7
|
import React from "react";
|
|
14
8
|
import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/light-async";
|
|
15
9
|
import { useThemeContext } from "@dxos/react-ui";
|
|
16
10
|
import { mx } from "@dxos/react-ui-theme";
|
|
17
11
|
|
|
18
|
-
// packages/ui/react-ui-syntax-highlighter/src/
|
|
12
|
+
// packages/ui/react-ui-syntax-highlighter/src/styles.ts
|
|
19
13
|
var alabasterDark = {
|
|
20
14
|
hljs: {
|
|
21
15
|
display: "block",
|
|
@@ -149,7 +143,7 @@ var githubLight = {
|
|
|
149
143
|
}
|
|
150
144
|
};
|
|
151
145
|
|
|
152
|
-
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter
|
|
146
|
+
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx
|
|
153
147
|
var zeroWidthSpace = "\u200B";
|
|
154
148
|
var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
|
|
155
149
|
const { themeMode } = useThemeContext();
|
|
@@ -159,45 +153,7 @@ var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...p
|
|
|
159
153
|
...props
|
|
160
154
|
}, children || fallback);
|
|
161
155
|
};
|
|
162
|
-
|
|
163
|
-
// packages/ui/react-ui-syntax-highlighter/src/JsonFilter/JsonFilter.tsx
|
|
164
|
-
var JsonFilter = ({ data: initialData, classNames }) => {
|
|
165
|
-
const [data, setData] = useState(initialData);
|
|
166
|
-
const [text, setText] = useState("");
|
|
167
|
-
const [error, setError] = useState(null);
|
|
168
|
-
useEffect(() => {
|
|
169
|
-
if (!initialData || !text.trim().length) {
|
|
170
|
-
setData(initialData);
|
|
171
|
-
} else {
|
|
172
|
-
try {
|
|
173
|
-
setData(jp.query(initialData, text));
|
|
174
|
-
setError(null);
|
|
175
|
-
} catch (err) {
|
|
176
|
-
setData(initialData);
|
|
177
|
-
setError(err);
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
}, [
|
|
181
|
-
initialData,
|
|
182
|
-
text
|
|
183
|
-
]);
|
|
184
|
-
return /* @__PURE__ */ React2.createElement("div", {
|
|
185
|
-
className: "flex flex-col grow overflow-hidden"
|
|
186
|
-
}, /* @__PURE__ */ React2.createElement(Input.Root, {
|
|
187
|
-
validationValence: error ? "error" : "success"
|
|
188
|
-
}, /* @__PURE__ */ React2.createElement(Input.TextInput, {
|
|
189
|
-
classNames: mx2("p-1 px-2 font-mono", error && "border-red-500"),
|
|
190
|
-
variant: "subdued",
|
|
191
|
-
value: text,
|
|
192
|
-
onChange: (event) => setText(event.target.value),
|
|
193
|
-
placeholder: "JSONPath (e.g., $.graph.nodes)"
|
|
194
|
-
})), /* @__PURE__ */ React2.createElement(SyntaxHighlighter, {
|
|
195
|
-
language: "json",
|
|
196
|
-
classNames: mx2("grow overflow-y-auto", classNames)
|
|
197
|
-
}, JSON.stringify(data, null, 2)));
|
|
198
|
-
};
|
|
199
156
|
export {
|
|
200
|
-
JsonFilter,
|
|
201
157
|
SyntaxHighlighter,
|
|
202
158
|
createElement
|
|
203
159
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright
|
|
5
|
-
"mappings": ";;;
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/index.ts", "../../../src/SyntaxHighlighter.tsx", "../../../src/styles.ts"],
|
|
4
|
+
"sourcesContent": ["//\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 * from './SyntaxHighlighter';\nexport { createElement };\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 return (\n <NativeSyntaxHighlighter\n className={mx('w-full p-0.5', 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": ";;;AAKA,OAAOA,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;AACtB,SACE,sBAAA,cAACC,yBAAAA;IACCC,WAAWC,GAAG,gBAAgBR,UAAAA;IAC9BS,OAAOL,cAAc,SAASM,gBAAgBC;IAC7C,GAAGR;KAGHD,YAAYD,QAAAA;AAGnB;",
|
|
6
|
+
"names": ["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"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytes":9075,"imports":[],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytes":4144,"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/styles.ts","kind":"import-statement","original":"./styles"}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytes":1006,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx","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":6650},"packages/ui/react-ui-syntax-highlighter/dist/lib/node-esm/index.mjs":{"imports":[{"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":["SyntaxHighlighter","createElement"],"entryPoint":"packages/ui/react-ui-syntax-highlighter/src/index.ts","inputs":{"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":78},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytesInOutput":598},"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytesInOutput":2081}},"bytes":3188}}}
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1 @@
|
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAE7E,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -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-
|
|
3
|
+
"version": "0.7.5-main.2567c87",
|
|
4
4
|
"description": "A syntax highlighter wrapper.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -23,26 +23,24 @@
|
|
|
23
23
|
"src"
|
|
24
24
|
],
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"jsonpath": "^1.1.1",
|
|
27
26
|
"react-syntax-highlighter": "^15.5.0"
|
|
28
27
|
},
|
|
29
28
|
"devDependencies": {
|
|
30
|
-
"@types/jsonpath": "^0.2.4",
|
|
31
29
|
"@types/react": "~18.2.0",
|
|
32
30
|
"@types/react-dom": "~18.2.0",
|
|
33
31
|
"@types/react-syntax-highlighter": "^15.5.13",
|
|
34
32
|
"react": "~18.2.0",
|
|
35
33
|
"react-dom": "~18.2.0",
|
|
36
34
|
"vite": "5.4.7",
|
|
37
|
-
"@dxos/react-ui
|
|
38
|
-
"@dxos/
|
|
39
|
-
"@dxos/
|
|
35
|
+
"@dxos/react-ui": "0.7.5-main.2567c87",
|
|
36
|
+
"@dxos/react-ui-theme": "0.7.5-main.2567c87",
|
|
37
|
+
"@dxos/storybook-utils": "0.7.5-main.2567c87"
|
|
40
38
|
},
|
|
41
39
|
"peerDependencies": {
|
|
42
40
|
"react": "~18.2.0",
|
|
43
41
|
"react-dom": "~18.2.0",
|
|
44
|
-
"@dxos/react-ui": "0.7.5-
|
|
45
|
-
"@dxos/react-ui-theme": "0.7.5-
|
|
42
|
+
"@dxos/react-ui": "0.7.5-main.2567c87",
|
|
43
|
+
"@dxos/react-ui-theme": "0.7.5-main.2567c87"
|
|
46
44
|
},
|
|
47
45
|
"publishConfig": {
|
|
48
46
|
"access": "public"
|
package/src/index.ts
CHANGED
|
@@ -2,5 +2,8 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
// eslint-disable-next-line no-restricted-imports
|
|
6
|
+
import createElement from 'react-syntax-highlighter/dist/esm/create-element';
|
|
7
|
+
|
|
6
8
|
export * from './SyntaxHighlighter';
|
|
9
|
+
export { createElement };
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type ThemedClassName } from '@dxos/react-ui';
|
|
3
|
-
export type JsonFilterProps = ThemedClassName<{
|
|
4
|
-
data?: any;
|
|
5
|
-
}>;
|
|
6
|
-
export declare const JsonFilter: ({ data: initialData, classNames }: JsonFilterProps) => React.JSX.Element;
|
|
7
|
-
//# sourceMappingURL=JsonFilter.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
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,eAAe,GAAG,eAAe,CAAC;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,CAAC,CAAC;AAE9D,eAAO,MAAM,UAAU,sCAAuC,eAAe,sBAkC5E,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/JsonFilter/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1 +0,0 @@
|
|
|
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,49 +0,0 @@
|
|
|
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 JsonFilterProps = ThemedClassName<{ data?: any }>;
|
|
14
|
-
|
|
15
|
-
export const JsonFilter = ({ data: initialData, classNames }: JsonFilterProps) => {
|
|
16
|
-
const [data, setData] = useState(initialData);
|
|
17
|
-
const [text, setText] = useState('');
|
|
18
|
-
const [error, setError] = useState<Error | null>(null);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
if (!initialData || !text.trim().length) {
|
|
21
|
-
setData(initialData);
|
|
22
|
-
} else {
|
|
23
|
-
try {
|
|
24
|
-
setData(jp.query(initialData, text));
|
|
25
|
-
setError(null);
|
|
26
|
-
} catch (err) {
|
|
27
|
-
setData(initialData);
|
|
28
|
-
setError(err as Error);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}, [initialData, text]);
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<div className='flex flex-col grow overflow-hidden'>
|
|
35
|
-
<Input.Root validationValence={error ? 'error' : 'success'}>
|
|
36
|
-
<Input.TextInput
|
|
37
|
-
classNames={mx('p-1 px-2 font-mono', error && 'border-red-500')}
|
|
38
|
-
variant='subdued'
|
|
39
|
-
value={text}
|
|
40
|
-
onChange={(event) => setText(event.target.value)}
|
|
41
|
-
placeholder='JSONPath (e.g., $.graph.nodes)'
|
|
42
|
-
/>
|
|
43
|
-
</Input.Root>
|
|
44
|
-
<SyntaxHighlighter language='json' classNames={mx('grow overflow-y-auto', classNames)}>
|
|
45
|
-
{JSON.stringify(data, null, 2)}
|
|
46
|
-
</SyntaxHighlighter>
|
|
47
|
-
</div>
|
|
48
|
-
);
|
|
49
|
-
};
|
package/src/JsonFilter/index.ts
DELETED
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/src/{SyntaxHighlighter/SyntaxHighlighter.stories.tsx → SyntaxHighlighter.stories.tsx}
RENAMED
|
File without changes
|
|
File without changes
|