@dxos/react-ui-syntax-highlighter 0.8.2 → 0.8.3-main.7f5a14c
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 +1 -1
- package/dist/lib/browser/index.mjs.map +2 -2
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +1 -1
- package/dist/lib/node/index.cjs.map +2 -2
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +1 -1
- package/dist/lib/node-esm/index.mjs.map +2 -2
- package/dist/lib/node-esm/meta.json +1 -1
- package/package.json +6 -6
- package/src/SyntaxHighlighter/SyntaxHighlighter.tsx +1 -1
|
@@ -23,7 +23,7 @@ var SyntaxHighlighter = ({ classNames, children, fallback = zeroWidthSpace, ...p
|
|
|
23
23
|
try {
|
|
24
24
|
const { themeMode } = useThemeContext();
|
|
25
25
|
return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
|
|
26
|
-
className: mx("w-full p-0 bg-baseSurface font-thin", classNames),
|
|
26
|
+
className: mx("w-full p-0 bg-baseSurface font-thin overflow-auto scrollbar-thin", classNames),
|
|
27
27
|
style: themeMode === "dark" ? dark : light,
|
|
28
28
|
...props
|
|
29
29
|
}, children || fallback);
|
|
@@ -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"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\n// TODO(burdon): Move to jsonpath-plus.\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; testId?: string }>;\n\nexport const Json = ({ data, classNames, testId }: JsonProps) => {\n return (\n <SyntaxHighlighter language='json' classNames={classNames} data-testid={testId}>\n {JSON.stringify(data, null, 2)}\n </SyntaxHighlighter>\n );\n};\n\nexport const JsonFilter = ({ data: initialData, classNames, testId }: 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]); // TODO(burdon): Need structural diff.\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)} data-testid={testId}>\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// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// Lightweight version will load specific language parsers asynchronously.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n// eslint-disable-next-line no-restricted-imports\nimport { github as light, a11yDark as dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\nlight.hljs.background = '';\ndark.hljs.background = '';\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n children,\n fallback = zeroWidthSpace,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full p-0 bg-baseSurface font-thin', classNames)}\n style={themeMode === 'dark' ? dark : light}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;AAKA,OAAOA,QAAQ;AACf,OAAOC,UAASC,WAAWC,gBAAgB;AAE3C,SAASC,aAAmC;AAC5C,SAASC,MAAAA,WAAU;;;ACJnB,OAAOC,mBAAmB;;;;ACD1B,OAAOC,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,SAASC,UAAUC,OAAOC,YAAYC,YAAY;AAElD,SAA+BC,uBAAuB;AACtD,SAASC,UAAU;AAEnB,IAAMC,iBAAiB;AAQvBC,MAAMC,KAAKC,aAAa;AACxBC,KAAKF,KAAKC,aAAa;AAKhB,IAAME,oBAAoB,CAAC,EAChCC,YACAC,UACAC,WAAWR,gBACX,GAAGS,MAAAA,MACoB;;;AACvB,UAAM,EAAEC,UAAS,IAAKC,gBAAAA;AAEtB,WACE,sBAAA,cAACC,yBAAAA;MACCC,WAAWC,GAAG,
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\n// TODO(burdon): Move to jsonpath-plus.\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; testId?: string }>;\n\nexport const Json = ({ data, classNames, testId }: JsonProps) => {\n return (\n <SyntaxHighlighter language='json' classNames={classNames} data-testid={testId}>\n {JSON.stringify(data, null, 2)}\n </SyntaxHighlighter>\n );\n};\n\nexport const JsonFilter = ({ data: initialData, classNames, testId }: 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]); // TODO(burdon): Need structural diff.\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)} data-testid={testId}>\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// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// Lightweight version will load specific language parsers asynchronously.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n// eslint-disable-next-line no-restricted-imports\nimport { github as light, a11yDark as dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\nlight.hljs.background = '';\ndark.hljs.background = '';\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n children,\n fallback = zeroWidthSpace,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full p-0 bg-baseSurface font-thin overflow-auto scrollbar-thin', classNames)}\n style={themeMode === 'dark' ? dark : light}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;AAKA,OAAOA,QAAQ;AACf,OAAOC,UAASC,WAAWC,gBAAgB;AAE3C,SAASC,aAAmC;AAC5C,SAASC,MAAAA,WAAU;;;ACJnB,OAAOC,mBAAmB;;;;ACD1B,OAAOC,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,SAASC,UAAUC,OAAOC,YAAYC,YAAY;AAElD,SAA+BC,uBAAuB;AACtD,SAASC,UAAU;AAEnB,IAAMC,iBAAiB;AAQvBC,MAAMC,KAAKC,aAAa;AACxBC,KAAKF,KAAKC,aAAa;AAKhB,IAAME,oBAAoB,CAAC,EAChCC,YACAC,UACAC,WAAWR,gBACX,GAAGS,MAAAA,MACoB;;;AACvB,UAAM,EAAEC,UAAS,IAAKC,gBAAAA;AAEtB,WACE,sBAAA,cAACC,yBAAAA;MACCC,WAAWC,GAAG,oEAAoER,UAAAA;MAClFS,OAAOL,cAAc,SAASN,OAAOH;MACpC,GAAGQ;OAGHF,YAAYC,QAAAA;;;;AAGnB;;;AFjCO,IAAMQ,OAAO,CAAC,EAAEC,MAAMC,YAAYC,OAAM,MAAa;;;AAC1D,WACE,gBAAAC,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ;MAAwBK,eAAaJ;OACrEK,KAAKC,UAAUR,MAAM,MAAM,CAAA,CAAA;;;;AAGlC;AAEO,IAAMS,aAAa,CAAC,EAAET,MAAMU,aAAaT,YAAYC,OAAM,MAAa;;;AAC7E,UAAM,CAACF,MAAMW,OAAAA,IAAWC,SAASF,WAAAA;AACjC,UAAM,CAACG,MAAMC,OAAAA,IAAWF,SAAS,EAAA;AACjC,UAAM,CAACG,OAAOC,QAAAA,IAAYJ,SAAuB,IAAA;AACjDK,cAAU,MAAA;AACR,UAAI,CAACP,eAAe,CAACG,KAAKK,KAAI,EAAGC,QAAQ;AACvCR,gBAAQD,WAAAA;MACV,OAAO;AACL,YAAI;AACFC,kBAAQS,GAAGC,MAAMX,aAAaG,IAAAA,CAAAA;AAC9BG,mBAAS,IAAA;QACX,SAASM,KAAK;AACZX,kBAAQD,WAAAA;AACRM,mBAASM,GAAAA;QACX;MACF;IACF,GAAG;MAACZ;MAAaG;KAAK;AAEtB,WACE,gBAAAV,OAAA,cAACoB,OAAAA;MAAIC,WAAU;OACb,gBAAArB,OAAA,cAACsB,MAAMC,MAAI;MAACC,mBAAmBZ,QAAQ,UAAU;OAC/C,gBAAAZ,OAAA,cAACsB,MAAMG,WAAS;MACd3B,YAAY4B,IAAG,sBAAsBd,SAAS,gBAAA;MAC9Ce,SAAQ;MACRC,OAAOlB;MACPmB,UAAU,CAACC,UAAUnB,QAAQmB,MAAMC,OAAOH,KAAK;MAC/CI,aAAY;SAGhB,gBAAAhC,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ,YAAY4B,IAAG,wBAAwB5B,UAAAA;MAAaK,eAAaJ;OACjGK,KAAKC,UAAUR,MAAM,MAAM,CAAA,CAAA,CAAA;;;;AAIpC;",
|
|
6
6
|
"names": ["jp", "React", "useEffect", "useState", "Input", "mx", "createElement", "React", "NativeSyntaxHighlighter", "github", "light", "a11yDark", "dark", "useThemeContext", "mx", "zeroWidthSpace", "light", "hljs", "background", "dark", "SyntaxHighlighter", "classNames", "children", "fallback", "props", "themeMode", "useThemeContext", "NativeSyntaxHighlighter", "className", "mx", "style", "Json", "data", "classNames", "testId", "React", "SyntaxHighlighter", "language", "data-testid", "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/SyntaxHighlighter.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":4906,"imports":[{"path":"@preact-signals/safe-react/tracking","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":"react-syntax-highlighter/dist/esm/styles/hljs","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytes":992,"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":7197,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":496,"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":598,"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":6328},"packages/ui/react-ui-syntax-highlighter/dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":"@preact-signals/safe-react/tracking","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":"react-syntax-highlighter/dist/esm/styles/hljs","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":1916},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":956},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":3366}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -54,7 +54,7 @@ var SyntaxHighlighter = ({ classNames, children, fallback = zeroWidthSpace, ...p
|
|
|
54
54
|
try {
|
|
55
55
|
const { themeMode } = (0, import_react_ui2.useThemeContext)();
|
|
56
56
|
return /* @__PURE__ */ import_react2.default.createElement(import_light_async.default, {
|
|
57
|
-
className: (0, import_react_ui_theme2.mx)("w-full p-0 bg-baseSurface font-thin", classNames),
|
|
57
|
+
className: (0, import_react_ui_theme2.mx)("w-full p-0 bg-baseSurface font-thin overflow-auto scrollbar-thin", classNames),
|
|
58
58
|
style: themeMode === "dark" ? import_hljs.a11yDark : import_hljs.github,
|
|
59
59
|
...props
|
|
60
60
|
}, children || fallback);
|
|
@@ -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"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\n// TODO(burdon): Move to jsonpath-plus.\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; testId?: string }>;\n\nexport const Json = ({ data, classNames, testId }: JsonProps) => {\n return (\n <SyntaxHighlighter language='json' classNames={classNames} data-testid={testId}>\n {JSON.stringify(data, null, 2)}\n </SyntaxHighlighter>\n );\n};\n\nexport const JsonFilter = ({ data: initialData, classNames, testId }: 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]); // TODO(burdon): Need structural diff.\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)} data-testid={testId}>\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// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// Lightweight version will load specific language parsers asynchronously.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n// eslint-disable-next-line no-restricted-imports\nimport { github as light, a11yDark as dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\nlight.hljs.background = '';\ndark.hljs.background = '';\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n children,\n fallback = zeroWidthSpace,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full p-0 bg-baseSurface font-thin', classNames)}\n style={themeMode === 'dark' ? dark : light}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,sBAAe;AACf,mBAA2C;AAE3C,sBAA4C;AAC5C,4BAAmB;ACJnB,4BAA0B;;ACD1B,IAAAA,gBAAkB;AAKlB,yBAAoC;AAEpC,kBAAkD;AAElD,IAAAC,mBAAsD;AACtD,IAAAC,yBAAmB;AAEnB,IAAMC,iBAAiB;AAQvBC,YAAAA,OAAMC,KAAKC,aAAa;AACxBC,YAAAA,SAAKF,KAAKC,aAAa;AAKhB,IAAME,oBAAoB,CAAC,EAChCC,YACAC,UACAC,WAAWR,gBACX,GAAGS,MAAAA,MACoB;;;AACvB,UAAM,EAAEC,UAAS,QAAKC,kCAAAA;AAEtB,WACE,8BAAAC,QAAA,cAACC,mBAAAA,SAAAA;MACCC,eAAWC,2BAAG,
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\n// TODO(burdon): Move to jsonpath-plus.\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; testId?: string }>;\n\nexport const Json = ({ data, classNames, testId }: JsonProps) => {\n return (\n <SyntaxHighlighter language='json' classNames={classNames} data-testid={testId}>\n {JSON.stringify(data, null, 2)}\n </SyntaxHighlighter>\n );\n};\n\nexport const JsonFilter = ({ data: initialData, classNames, testId }: 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]); // TODO(burdon): Need structural diff.\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)} data-testid={testId}>\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// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// Lightweight version will load specific language parsers asynchronously.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n// eslint-disable-next-line no-restricted-imports\nimport { github as light, a11yDark as dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\nlight.hljs.background = '';\ndark.hljs.background = '';\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n children,\n fallback = zeroWidthSpace,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full p-0 bg-baseSurface font-thin overflow-auto scrollbar-thin', classNames)}\n style={themeMode === 'dark' ? dark : light}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,sBAAe;AACf,mBAA2C;AAE3C,sBAA4C;AAC5C,4BAAmB;ACJnB,4BAA0B;;ACD1B,IAAAA,gBAAkB;AAKlB,yBAAoC;AAEpC,kBAAkD;AAElD,IAAAC,mBAAsD;AACtD,IAAAC,yBAAmB;AAEnB,IAAMC,iBAAiB;AAQvBC,YAAAA,OAAMC,KAAKC,aAAa;AACxBC,YAAAA,SAAKF,KAAKC,aAAa;AAKhB,IAAME,oBAAoB,CAAC,EAChCC,YACAC,UACAC,WAAWR,gBACX,GAAGS,MAAAA,MACoB;;;AACvB,UAAM,EAAEC,UAAS,QAAKC,kCAAAA;AAEtB,WACE,8BAAAC,QAAA,cAACC,mBAAAA,SAAAA;MACCC,eAAWC,2BAAG,oEAAoET,UAAAA;MAClFU,OAAON,cAAc,SAASN,YAAAA,WAAOH,YAAAA;MACpC,GAAGQ;OAGHF,YAAYC,QAAAA;;;;AAGnB;AFjCO,IAAMS,OAAO,CAAC,EAAEC,MAAMZ,YAAYa,OAAM,MAAa;;;AAC1D,WACEP,6BAAAA,QAAA,cAACP,mBAAAA;MAAkBe,UAAS;MAAOd;MAAwBe,eAAaF;OACrEG,KAAKC,UAAUL,MAAM,MAAM,CAAA,CAAA;;;;AAGlC;AAEO,IAAMM,aAAa,CAAC,EAAEN,MAAMO,aAAanB,YAAYa,OAAM,MAAa;;;AAC7E,UAAM,CAACD,MAAMQ,OAAAA,QAAWC,uBAASF,WAAAA;AACjC,UAAM,CAACG,MAAMC,OAAAA,QAAWF,uBAAS,EAAA;AACjC,UAAM,CAACG,OAAOC,QAAAA,QAAYJ,uBAAuB,IAAA;AACjDK,gCAAU,MAAA;AACR,UAAI,CAACP,eAAe,CAACG,KAAKK,KAAI,EAAGC,QAAQ;AACvCR,gBAAQD,WAAAA;MACV,OAAO;AACL,YAAI;AACFC,kBAAQS,gBAAAA,QAAGC,MAAMX,aAAaG,IAAAA,CAAAA;AAC9BG,mBAAS,IAAA;QACX,SAASM,KAAK;AACZX,kBAAQD,WAAAA;AACRM,mBAASM,GAAAA;QACX;MACF;IACF,GAAG;MAACZ;MAAaG;KAAK;AAEtB,WACEhB,6BAAAA,QAAA,cAAC0B,OAAAA;MAAIxB,WAAU;OACbF,6BAAAA,QAAA,cAAC2B,sBAAMC,MAAI;MAACC,mBAAmBX,QAAQ,UAAU;OAC/ClB,6BAAAA,QAAA,cAAC2B,sBAAMG,WAAS;MACdpC,gBAAYS,sBAAAA,IAAG,sBAAsBe,SAAS,gBAAA;MAC9Ca,SAAQ;MACRC,OAAOhB;MACPiB,UAAU,CAACC,UAAUjB,QAAQiB,MAAMC,OAAOH,KAAK;MAC/CI,aAAY;SAGhBpC,6BAAAA,QAAA,cAACP,mBAAAA;MAAkBe,UAAS;MAAOd,gBAAYS,sBAAAA,IAAG,wBAAwBT,UAAAA;MAAae,eAAaF;OACjGG,KAAKC,UAAUL,MAAM,MAAM,CAAA,CAAA,CAAA;;;;AAIpC;",
|
|
6
6
|
"names": ["import_react", "import_react_ui", "import_react_ui_theme", "zeroWidthSpace", "light", "hljs", "background", "dark", "SyntaxHighlighter", "classNames", "children", "fallback", "props", "themeMode", "useThemeContext", "React", "NativeSyntaxHighlighter", "className", "mx", "style", "Json", "data", "testId", "language", "data-testid", "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/SyntaxHighlighter.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":4906,"imports":[{"path":"@preact-signals/safe-react/tracking","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":"react-syntax-highlighter/dist/esm/styles/hljs","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytes":992,"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":7197,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":496,"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":598,"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":6328},"packages/ui/react-ui-syntax-highlighter/dist/lib/node/index.cjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":"@preact-signals/safe-react/tracking","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":"react-syntax-highlighter/dist/esm/styles/hljs","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":1916},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":956},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":3366}}}
|
|
@@ -25,7 +25,7 @@ var SyntaxHighlighter = ({ classNames, children, fallback = zeroWidthSpace, ...p
|
|
|
25
25
|
try {
|
|
26
26
|
const { themeMode } = useThemeContext();
|
|
27
27
|
return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
|
|
28
|
-
className: mx("w-full p-0 bg-baseSurface font-thin", classNames),
|
|
28
|
+
className: mx("w-full p-0 bg-baseSurface font-thin overflow-auto scrollbar-thin", classNames),
|
|
29
29
|
style: themeMode === "dark" ? dark : light,
|
|
30
30
|
...props
|
|
31
31
|
}, children || fallback);
|
|
@@ -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"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\n// TODO(burdon): Move to jsonpath-plus.\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; testId?: string }>;\n\nexport const Json = ({ data, classNames, testId }: JsonProps) => {\n return (\n <SyntaxHighlighter language='json' classNames={classNames} data-testid={testId}>\n {JSON.stringify(data, null, 2)}\n </SyntaxHighlighter>\n );\n};\n\nexport const JsonFilter = ({ data: initialData, classNames, testId }: 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]); // TODO(burdon): Need structural diff.\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)} data-testid={testId}>\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// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// Lightweight version will load specific language parsers asynchronously.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n// eslint-disable-next-line no-restricted-imports\nimport { github as light, a11yDark as dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\nlight.hljs.background = '';\ndark.hljs.background = '';\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n children,\n fallback = zeroWidthSpace,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full p-0 bg-baseSurface font-thin', classNames)}\n style={themeMode === 'dark' ? dark : light}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;AAKA,OAAOA,QAAQ;AACf,OAAOC,UAASC,WAAWC,gBAAgB;AAE3C,SAASC,aAAmC;AAC5C,SAASC,MAAAA,WAAU;;;ACJnB,OAAOC,mBAAmB;;;;ACD1B,OAAOC,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,SAASC,UAAUC,OAAOC,YAAYC,YAAY;AAElD,SAA+BC,uBAAuB;AACtD,SAASC,UAAU;AAEnB,IAAMC,iBAAiB;AAQvBC,MAAMC,KAAKC,aAAa;AACxBC,KAAKF,KAAKC,aAAa;AAKhB,IAAME,oBAAoB,CAAC,EAChCC,YACAC,UACAC,WAAWR,gBACX,GAAGS,MAAAA,MACoB;;;AACvB,UAAM,EAAEC,UAAS,IAAKC,gBAAAA;AAEtB,WACE,sBAAA,cAACC,yBAAAA;MACCC,WAAWC,GAAG,
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\n// TODO(burdon): Move to jsonpath-plus.\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; testId?: string }>;\n\nexport const Json = ({ data, classNames, testId }: JsonProps) => {\n return (\n <SyntaxHighlighter language='json' classNames={classNames} data-testid={testId}>\n {JSON.stringify(data, null, 2)}\n </SyntaxHighlighter>\n );\n};\n\nexport const JsonFilter = ({ data: initialData, classNames, testId }: 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]); // TODO(burdon): Need structural diff.\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)} data-testid={testId}>\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// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// Lightweight version will load specific language parsers asynchronously.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n// eslint-disable-next-line no-restricted-imports\nimport { github as light, a11yDark as dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\nlight.hljs.background = '';\ndark.hljs.background = '';\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n children,\n fallback = zeroWidthSpace,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full p-0 bg-baseSurface font-thin overflow-auto scrollbar-thin', classNames)}\n style={themeMode === 'dark' ? dark : light}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;AAKA,OAAOA,QAAQ;AACf,OAAOC,UAASC,WAAWC,gBAAgB;AAE3C,SAASC,aAAmC;AAC5C,SAASC,MAAAA,WAAU;;;ACJnB,OAAOC,mBAAmB;;;;ACD1B,OAAOC,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,SAASC,UAAUC,OAAOC,YAAYC,YAAY;AAElD,SAA+BC,uBAAuB;AACtD,SAASC,UAAU;AAEnB,IAAMC,iBAAiB;AAQvBC,MAAMC,KAAKC,aAAa;AACxBC,KAAKF,KAAKC,aAAa;AAKhB,IAAME,oBAAoB,CAAC,EAChCC,YACAC,UACAC,WAAWR,gBACX,GAAGS,MAAAA,MACoB;;;AACvB,UAAM,EAAEC,UAAS,IAAKC,gBAAAA;AAEtB,WACE,sBAAA,cAACC,yBAAAA;MACCC,WAAWC,GAAG,oEAAoER,UAAAA;MAClFS,OAAOL,cAAc,SAASN,OAAOH;MACpC,GAAGQ;OAGHF,YAAYC,QAAAA;;;;AAGnB;;;AFjCO,IAAMQ,OAAO,CAAC,EAAEC,MAAMC,YAAYC,OAAM,MAAa;;;AAC1D,WACE,gBAAAC,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ;MAAwBK,eAAaJ;OACrEK,KAAKC,UAAUR,MAAM,MAAM,CAAA,CAAA;;;;AAGlC;AAEO,IAAMS,aAAa,CAAC,EAAET,MAAMU,aAAaT,YAAYC,OAAM,MAAa;;;AAC7E,UAAM,CAACF,MAAMW,OAAAA,IAAWC,SAASF,WAAAA;AACjC,UAAM,CAACG,MAAMC,OAAAA,IAAWF,SAAS,EAAA;AACjC,UAAM,CAACG,OAAOC,QAAAA,IAAYJ,SAAuB,IAAA;AACjDK,cAAU,MAAA;AACR,UAAI,CAACP,eAAe,CAACG,KAAKK,KAAI,EAAGC,QAAQ;AACvCR,gBAAQD,WAAAA;MACV,OAAO;AACL,YAAI;AACFC,kBAAQS,GAAGC,MAAMX,aAAaG,IAAAA,CAAAA;AAC9BG,mBAAS,IAAA;QACX,SAASM,KAAK;AACZX,kBAAQD,WAAAA;AACRM,mBAASM,GAAAA;QACX;MACF;IACF,GAAG;MAACZ;MAAaG;KAAK;AAEtB,WACE,gBAAAV,OAAA,cAACoB,OAAAA;MAAIC,WAAU;OACb,gBAAArB,OAAA,cAACsB,MAAMC,MAAI;MAACC,mBAAmBZ,QAAQ,UAAU;OAC/C,gBAAAZ,OAAA,cAACsB,MAAMG,WAAS;MACd3B,YAAY4B,IAAG,sBAAsBd,SAAS,gBAAA;MAC9Ce,SAAQ;MACRC,OAAOlB;MACPmB,UAAU,CAACC,UAAUnB,QAAQmB,MAAMC,OAAOH,KAAK;MAC/CI,aAAY;SAGhB,gBAAAhC,OAAA,cAACC,mBAAAA;MAAkBC,UAAS;MAAOJ,YAAY4B,IAAG,wBAAwB5B,UAAAA;MAAaK,eAAaJ;OACjGK,KAAKC,UAAUR,MAAM,MAAM,CAAA,CAAA,CAAA;;;;AAIpC;",
|
|
6
6
|
"names": ["jp", "React", "useEffect", "useState", "Input", "mx", "createElement", "React", "NativeSyntaxHighlighter", "github", "light", "a11yDark", "dark", "useThemeContext", "mx", "zeroWidthSpace", "light", "hljs", "background", "dark", "SyntaxHighlighter", "classNames", "children", "fallback", "props", "themeMode", "useThemeContext", "NativeSyntaxHighlighter", "className", "mx", "style", "Json", "data", "classNames", "testId", "React", "SyntaxHighlighter", "language", "data-testid", "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/SyntaxHighlighter.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":4906,"imports":[{"path":"@preact-signals/safe-react/tracking","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":"react-syntax-highlighter/dist/esm/styles/hljs","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytes":992,"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":7197,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":496,"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":598,"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":6330},"packages/ui/react-ui-syntax-highlighter/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":"@preact-signals/safe-react/tracking","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":"react-syntax-highlighter/dist/esm/styles/hljs","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":1916},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":956},"packages/ui/react-ui-syntax-highlighter/src/JsonFilter/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":3459}}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-syntax-highlighter",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.3-main.7f5a14c",
|
|
4
4
|
"description": "A syntax highlighter wrapper.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -36,15 +36,15 @@
|
|
|
36
36
|
"react": "~18.2.0",
|
|
37
37
|
"react-dom": "~18.2.0",
|
|
38
38
|
"vite": "5.4.7",
|
|
39
|
-
"@dxos/
|
|
40
|
-
"@dxos/react-ui": "0.8.
|
|
41
|
-
"@dxos/
|
|
39
|
+
"@dxos/react-ui": "0.8.3-main.7f5a14c",
|
|
40
|
+
"@dxos/react-ui-theme": "0.8.3-main.7f5a14c",
|
|
41
|
+
"@dxos/storybook-utils": "0.8.3-main.7f5a14c"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": "~18.2.0",
|
|
45
45
|
"react-dom": "~18.2.0",
|
|
46
|
-
"@dxos/react-ui": "0.8.
|
|
47
|
-
"@dxos/react-ui-theme": "0.8.
|
|
46
|
+
"@dxos/react-ui": "0.8.3-main.7f5a14c",
|
|
47
|
+
"@dxos/react-ui-theme": "0.8.3-main.7f5a14c"
|
|
48
48
|
},
|
|
49
49
|
"publishConfig": {
|
|
50
50
|
"access": "public"
|
|
@@ -38,7 +38,7 @@ export const SyntaxHighlighter = ({
|
|
|
38
38
|
|
|
39
39
|
return (
|
|
40
40
|
<NativeSyntaxHighlighter
|
|
41
|
-
className={mx('w-full p-0 bg-baseSurface font-thin', classNames)}
|
|
41
|
+
className={mx('w-full p-0 bg-baseSurface font-thin overflow-auto scrollbar-thin', classNames)}
|
|
42
42
|
style={themeMode === 'dark' ? dark : light}
|
|
43
43
|
{...props}
|
|
44
44
|
>
|