@dxos/react-ui-syntax-highlighter 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393
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 +0 -1
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +0 -1
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/JsonHighlighter/JsonHighlighter.d.ts +1 -1
- package/dist/types/src/JsonHighlighter/JsonHighlighter.stories.d.ts +1 -1
- package/dist/types/src/JsonHighlighter/JsonHighlighter.stories.d.ts.map +1 -1
- package/dist/types/src/Syntax/Syntax.d.ts +6 -6
- package/dist/types/src/Syntax/Syntax.d.ts.map +1 -1
- package/dist/types/src/Syntax/Syntax.stories.d.ts.map +1 -1
- package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.d.ts +1 -1
- package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.d.ts.map +1 -1
- package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.stories.d.ts +1 -1
- package/dist/types/src/SyntaxHighlighter/SyntaxHighlighter.stories.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +11 -11
- package/src/SyntaxHighlighter/SyntaxHighlighter.tsx +1 -4
|
@@ -45,7 +45,6 @@ var SyntaxHighlighter = composable(({ classNames, className, children, role, sty
|
|
|
45
45
|
},
|
|
46
46
|
...nativeProps
|
|
47
47
|
}, source), copyButton && /* @__PURE__ */ React.createElement("div", {
|
|
48
|
-
role: "none",
|
|
49
48
|
className: "pointer-events-none absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
|
|
50
49
|
}, /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(Clipboard.IconButton, {
|
|
51
50
|
value: source,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/JsonHighlighter/JsonHighlighter.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx", "../../../src/Syntax/Syntax.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { composable } from '@dxos/ui-theme';\nimport { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';\n\nimport { SyntaxHighlighter, type SyntaxHighlighterProps } from '../SyntaxHighlighter';\n\nexport type JsonReplacer = CreateReplacerProps | ((key: string, value: any) => any);\n\nexport type JsonHighlighterProps = Omit<SyntaxHighlighterProps, 'children' | 'language'> & {\n data?: any;\n replacer?: JsonReplacer;\n /** Indentation passed to `JSON.stringify`. Default: `2` (pretty-printed). Pass `0` for single-line output. */\n indent?: number;\n testId?: string;\n};\n\nconst resolveReplacer = (replacer?: JsonReplacer) => {\n if (!replacer) {\n return undefined;\n }\n return typeof replacer === 'function' ? replacer : createReplacer(replacer);\n};\n\n/**\n * Inline, non-scrolling JSON renderer.\n *\n * Thin wrapper around `SyntaxHighlighter` that stringifies `data` with an optional replacer.\n * `replacer` accepts either `CreateReplacerProps` (declarative truncation) or a raw\n * `JSON.stringify`-compatible function (for bespoke serialization).\n * For filtering and scroll behaviour, compose with the `Syntax.*` namespace.\n */\nexport const JsonHighlighter = composable<HTMLDivElement, JsonHighlighterProps>(\n ({ data, replacer, indent = 2, testId, ...props }, forwardedRef) => {\n return (\n <SyntaxHighlighter {...props} language='json' data-testid={testId} ref={forwardedRef}>\n {safeStringify(data, resolveReplacer(replacer), indent)}\n </SyntaxHighlighter>\n );\n },\n);\n\nJsonHighlighter.displayName = 'JsonHighlighter';\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, { Children } from 'react';\nimport { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';\nimport { coldarkDark as dark, coldarkCold as light } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport { Clipboard, useThemeContext } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nconst languages = {\n js: 'javascript',\n ts: 'typescript',\n};\n\nexport type SyntaxHighlighterProps = Pick<\n NaturalSyntaxHighlighterProps,\n | 'language'\n | 'renderer'\n | 'showLineNumbers'\n | 'showInlineLineNumbers'\n | 'startingLineNumber'\n | 'wrapLines'\n | 'wrapLongLines'\n | 'PreTag'\n> & {\n themeStyle?: NaturalSyntaxHighlighterProps['style'];\n fallback?: string;\n copyButton?: boolean;\n};\n\n/**\n * Inline, non-scrolling wrapper around `react-syntax-highlighter`.\n *\n * Use directly for small snippets (e.g. inside markdown code blocks).\n * For scrollable panels, compose with `Syntax.Viewport`.\n *\n * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n * The lightweight version will load specific language parsers asynchronously.\n *\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html\n */\nexport const SyntaxHighlighter = composable<HTMLDivElement, SyntaxHighlighterProps>(\n (\n {\n classNames,\n className,\n children,\n role,\n style,\n themeStyle,\n language = 'text',\n fallback = zeroWidthSpace,\n copyButton,\n ...nativeProps\n },\n forwardedRef,\n ) => {\n const { themeMode } = useThemeContext();\n const source = Children.toArray(children).join('') || fallback;\n\n const hasCustomTheme = themeStyle && typeof themeStyle === 'object' && Object.keys(themeStyle).length > 0;\n const prismTheme = hasCustomTheme ? themeStyle : themeMode === 'dark' ? dark : light;\n\n return (\n <div\n {...composableProps(\n { classNames, className, role, style },\n {\n role: 'none',\n classNames: copyButton && 'relative group',\n },\n )}\n ref={forwardedRef}\n >\n <NativeSyntaxHighlighter\n language={languages[language as keyof typeof languages] || language}\n style={prismTheme}\n customStyle={{\n background: 'unset',\n border: 'none',\n boxShadow: 'none',\n padding: 0,\n margin: 0,\n }}\n {...nativeProps}\n >\n {/* Non-empty fallback prevents collapse. */}\n {source}\n </NativeSyntaxHighlighter>\n\n {copyButton && (\n <div\n role='none'\n className='pointer-events-none absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100'\n >\n <Clipboard.Provider>\n <Clipboard.IconButton\n value={source}\n variant='ghost'\n size={4}\n classNames='pointer-events-auto aspect-square rounded-sm'\n />\n </Clipboard.Provider>\n </div>\n )}\n </div>\n );\n },\n);\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { JSONPath } from 'jsonpath-plus';\nimport React, { type FC, type PropsWithChildren, forwardRef, useMemo, useState } from 'react';\n\nimport { Input, ScrollArea } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\nimport { type ComposableProps } from '@dxos/ui-types';\n\nimport { JsonHighlighter, type JsonReplacer } from '../JsonHighlighter';\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\n//\n// Context\n//\n\nconst SYNTAX_NAME = 'Syntax';\n\ntype SyntaxContextValue = {\n mode: 'text' | 'json';\n // Text mode.\n source?: string;\n language?: string;\n // JSON mode.\n data?: any;\n filteredData?: any;\n filterText: string;\n setFilterText: (text: string) => void;\n filterError: Error | null;\n replacer?: JsonReplacer;\n};\n\ntype ScopedProps<P> = P & { __scopeSyntax?: Scope };\n\nconst [createSyntaxContext, createSyntaxScope] = createContextScope(SYNTAX_NAME);\nconst [SyntaxProvider, useSyntaxContext] = createSyntaxContext<SyntaxContextValue>(SYNTAX_NAME);\n\n//\n// Root\n//\n\nconst SYNTAX_ROOT_NAME = 'Syntax.Root';\n\ntype SyntaxRootProps = PropsWithChildren<{\n // Text mode.\n language?: string;\n source?: string;\n // JSON mode (presence of the `data` prop selects JSON mode; `undefined` is still JSON).\n data?: any;\n /**\n * `JSON.stringify` replacer applied to `data`. Use the function form to follow domain\n * references (e.g. ECHO refs) by returning a transformed value at the root call. Keeps\n * this package free of any domain-specific knowledge.\n */\n replacer?: JsonReplacer;\n}>;\n\n/**\n * Headless context provider. Selects JSON mode when the `data` prop is passed at all — even\n * `data={undefined}` — so loading states render an empty JSON view rather than flipping to\n * text mode (which would trip `Syntax.Filter`'s JSON-only guard). Mode is chosen by prop\n * presence, not value.\n */\nconst SyntaxRoot: FC<ScopedProps<SyntaxRootProps>> = (props) => {\n const { __scopeSyntax, children, language, source, replacer } = props;\n const isJson = 'data' in props;\n const data = props.data;\n const [filterText, setFilterText] = useState('');\n\n const { filteredData, filterError } = useMemo<{ filteredData: any; filterError: Error | null }>(() => {\n if (!isJson || !filterText.trim().length) {\n return { filteredData: data, filterError: null };\n }\n try {\n return { filteredData: JSONPath({ path: filterText, json: data }), filterError: null };\n } catch (err) {\n return { filteredData: data, filterError: err as Error };\n }\n }, [isJson, data, filterText]);\n\n return (\n <SyntaxProvider\n scope={__scopeSyntax}\n mode={isJson ? 'json' : 'text'}\n source={source}\n language={language}\n data={data}\n filteredData={filteredData}\n filterText={filterText}\n setFilterText={setFilterText}\n filterError={filterError}\n replacer={replacer}\n >\n {children}\n </SyntaxProvider>\n );\n};\n\nSyntaxRoot.displayName = SYNTAX_ROOT_NAME;\n\n//\n// Content\n//\n\nconst SYNTAX_CONTENT_NAME = 'Syntax.Content';\n\ntype SyntaxContentProps = ComposableProps;\n\n/** Flex-column layout container for composite parts. */\nconst SyntaxContent = composable<HTMLDivElement, SyntaxContentProps>(({ children, ...props }, forwardedRef) => {\n return (\n <div {...composableProps(props, { classNames: 'flex flex-col h-full min-h-0 overflow-hidden' })} ref={forwardedRef}>\n {children}\n </div>\n );\n});\n\nSyntaxContent.displayName = SYNTAX_CONTENT_NAME;\n\n//\n// Filter\n//\n\nconst SYNTAX_FILTER_NAME = 'Syntax.Filter';\n\ntype SyntaxFilterProps = ComposableProps<{\n placeholder?: string;\n}>;\n\n/** JSONPath filter input. Only meaningful when `Syntax.Root` is in JSON mode. */\nconst SyntaxFilter = forwardRef<HTMLInputElement, ScopedProps<SyntaxFilterProps>>(\n ({ __scopeSyntax, classNames, placeholder = 'JSONPath (e.g., $.graph.nodes)' }, forwardedRef) => {\n const { mode, filterText, setFilterText, filterError } = useSyntaxContext(SYNTAX_FILTER_NAME, __scopeSyntax);\n if (mode !== 'json') {\n throw new Error(`\\`${SYNTAX_FILTER_NAME}\\` requires \\`Syntax.Root\\` to be in JSON mode (pass \\`data\\`).`);\n }\n\n return (\n <Input.Root validationValence={filterError ? 'error' : 'success'}>\n <Input.TextInput\n classNames={['p-1 px-2 font-mono', filterError && 'border-rose-500', classNames]}\n variant='subdued'\n value={filterText}\n placeholder={placeholder}\n onChange={(event) => setFilterText(event.target.value)}\n ref={forwardedRef}\n />\n </Input.Root>\n );\n },\n);\n\nSyntaxFilter.displayName = SYNTAX_FILTER_NAME;\n\n//\n// Viewport\n//\n\nconst SYNTAX_VIEWPORT_NAME = 'Syntax.Viewport';\n\ntype SyntaxViewportProps = ComposableProps;\n\n/** Optional scroll wrapper. Compose around `Syntax.Code` to make it scrollable. */\nconst SyntaxViewport = composable<HTMLDivElement, SyntaxViewportProps>(({ children, ...props }, forwardedRef) => {\n return (\n <ScrollArea.Root {...composableProps(props)} thin ref={forwardedRef}>\n <ScrollArea.Viewport>{children}</ScrollArea.Viewport>\n </ScrollArea.Root>\n );\n});\n\nSyntaxViewport.displayName = SYNTAX_VIEWPORT_NAME;\n\n//\n// Code\n//\n\nconst SYNTAX_CODE_NAME = 'Syntax.Code';\n\ntype SyntaxCodeProps = ComposableProps<{\n testId?: string;\n}>;\n\n/** Highlighted code leaf. Reads source/data from `Syntax.Root` context. */\nconst SyntaxCode = composable<HTMLDivElement, ScopedProps<SyntaxCodeProps>>(\n ({ __scopeSyntax, testId, ...props }, forwardedRef) => {\n const context = useSyntaxContext(SYNTAX_CODE_NAME, __scopeSyntax);\n const merged = composableProps(props, { classNames: 'py-1 px-2 text-sm' });\n\n if (context.mode === 'json') {\n return (\n <JsonHighlighter\n {...merged}\n data={context.filteredData}\n replacer={context.replacer}\n testId={testId}\n ref={forwardedRef}\n />\n );\n }\n\n return (\n <SyntaxHighlighter {...merged} language={context.language} data-testid={testId} ref={forwardedRef}>\n {context.source ?? ''}\n </SyntaxHighlighter>\n );\n },\n);\n\nSyntaxCode.displayName = SYNTAX_CODE_NAME;\n\n//\n// Syntax\n//\n\nexport const Syntax = {\n Root: SyntaxRoot,\n Content: SyntaxContent,\n Filter: SyntaxFilter,\n Viewport: SyntaxViewport,\n Code: SyntaxCode,\n};\n\nexport { createSyntaxScope };\n\nexport type { SyntaxRootProps, SyntaxContentProps, SyntaxFilterProps, SyntaxViewportProps, SyntaxCodeProps };\n"],
|
|
5
|
-
"mappings": ";AAIA,OAAOA,YAAW;AAElB,SAASC,cAAAA,mBAAkB;AAC3B,SAAmCC,gBAAgBC,qBAAqB;;;ACFxE,OAAOC,mBAAmB;;;ACD1B,OAAOC,SAASC,gBAAgB;AAEhC,OAAOC,6BAA6B;AACpC,SAASC,eAAeC,MAAMC,eAAeC,aAAa;AAE1D,SAASC,WAAWC,uBAAuB;AAC3C,SAASC,YAAYC,uBAAuB;AAE5C,IAAMC,iBAAiB;AAEvB,IAAMC,YAAY;EAChBC,IAAI;EACJC,IAAI;AACN;AA8BO,IAAMC,
|
|
6
|
-
"names": ["React", "composable", "createReplacer", "safeStringify", "createElement", "React", "Children", "NativeSyntaxHighlighter", "coldarkDark", "dark", "coldarkCold", "light", "Clipboard", "useThemeContext", "composable", "composableProps", "zeroWidthSpace", "languages", "js", "ts", "SyntaxHighlighter", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { composable } from '@dxos/ui-theme';\nimport { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';\n\nimport { SyntaxHighlighter, type SyntaxHighlighterProps } from '../SyntaxHighlighter';\n\nexport type JsonReplacer = CreateReplacerProps | ((key: string, value: any) => any);\n\nexport type JsonHighlighterProps = Omit<SyntaxHighlighterProps, 'children' | 'language'> & {\n data?: any;\n replacer?: JsonReplacer;\n /** Indentation passed to `JSON.stringify`. Default: `2` (pretty-printed). Pass `0` for single-line output. */\n indent?: number;\n testId?: string;\n};\n\nconst resolveReplacer = (replacer?: JsonReplacer) => {\n if (!replacer) {\n return undefined;\n }\n return typeof replacer === 'function' ? replacer : createReplacer(replacer);\n};\n\n/**\n * Inline, non-scrolling JSON renderer.\n *\n * Thin wrapper around `SyntaxHighlighter` that stringifies `data` with an optional replacer.\n * `replacer` accepts either `CreateReplacerProps` (declarative truncation) or a raw\n * `JSON.stringify`-compatible function (for bespoke serialization).\n * For filtering and scroll behaviour, compose with the `Syntax.*` namespace.\n */\nexport const JsonHighlighter = composable<HTMLDivElement, JsonHighlighterProps>(\n ({ data, replacer, indent = 2, testId, ...props }, forwardedRef) => {\n return (\n <SyntaxHighlighter {...props} language='json' data-testid={testId} ref={forwardedRef}>\n {safeStringify(data, resolveReplacer(replacer), indent)}\n </SyntaxHighlighter>\n );\n },\n);\n\nJsonHighlighter.displayName = 'JsonHighlighter';\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, { Children } from 'react';\nimport { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';\nimport { coldarkDark as dark, coldarkCold as light } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport { Clipboard, useThemeContext } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nconst languages = {\n js: 'javascript',\n ts: 'typescript',\n};\n\nexport type SyntaxHighlighterProps = Pick<\n NaturalSyntaxHighlighterProps,\n | 'language'\n | 'renderer'\n | 'showLineNumbers'\n | 'showInlineLineNumbers'\n | 'startingLineNumber'\n | 'wrapLines'\n | 'wrapLongLines'\n | 'PreTag'\n> & {\n themeStyle?: NaturalSyntaxHighlighterProps['style'];\n fallback?: string;\n copyButton?: boolean;\n};\n\n/**\n * Inline, non-scrolling wrapper around `react-syntax-highlighter`.\n *\n * Use directly for small snippets (e.g. inside markdown code blocks).\n * For scrollable panels, compose with `Syntax.Viewport`.\n *\n * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n * The lightweight version will load specific language parsers asynchronously.\n *\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html\n */\nexport const SyntaxHighlighter = composable<HTMLDivElement, SyntaxHighlighterProps>(\n (\n {\n classNames,\n className,\n children,\n role,\n style,\n themeStyle,\n language = 'text',\n fallback = zeroWidthSpace,\n copyButton,\n ...nativeProps\n },\n forwardedRef,\n ) => {\n const { themeMode } = useThemeContext();\n const source = Children.toArray(children).join('') || fallback;\n\n const hasCustomTheme = themeStyle && typeof themeStyle === 'object' && Object.keys(themeStyle).length > 0;\n const prismTheme = hasCustomTheme ? themeStyle : themeMode === 'dark' ? dark : light;\n\n return (\n <div\n {...composableProps(\n { classNames, className, role, style },\n {\n role: 'none',\n classNames: copyButton && 'relative group',\n },\n )}\n ref={forwardedRef}\n >\n <NativeSyntaxHighlighter\n language={languages[language as keyof typeof languages] || language}\n style={prismTheme}\n customStyle={{\n background: 'unset',\n border: 'none',\n boxShadow: 'none',\n padding: 0,\n margin: 0,\n }}\n {...nativeProps}\n >\n {/* Non-empty fallback prevents collapse. */}\n {source}\n </NativeSyntaxHighlighter>\n\n {copyButton && (\n <div className='pointer-events-none absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100'>\n <Clipboard.Provider>\n <Clipboard.IconButton\n value={source}\n variant='ghost'\n size={4}\n classNames='pointer-events-auto aspect-square rounded-sm'\n />\n </Clipboard.Provider>\n </div>\n )}\n </div>\n );\n },\n);\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { JSONPath } from 'jsonpath-plus';\nimport React, { type FC, type PropsWithChildren, forwardRef, useMemo, useState } from 'react';\n\nimport { Input, ScrollArea } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\nimport { type ComposableProps } from '@dxos/ui-types';\n\nimport { JsonHighlighter, type JsonReplacer } from '../JsonHighlighter';\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\n//\n// Context\n//\n\nconst SYNTAX_NAME = 'Syntax';\n\ntype SyntaxContextValue = {\n mode: 'text' | 'json';\n // Text mode.\n source?: string;\n language?: string;\n // JSON mode.\n data?: any;\n filteredData?: any;\n filterText: string;\n setFilterText: (text: string) => void;\n filterError: Error | null;\n replacer?: JsonReplacer;\n};\n\ntype ScopedProps<P> = P & { __scopeSyntax?: Scope };\n\nconst [createSyntaxContext, createSyntaxScope] = createContextScope(SYNTAX_NAME);\nconst [SyntaxProvider, useSyntaxContext] = createSyntaxContext<SyntaxContextValue>(SYNTAX_NAME);\n\n//\n// Root\n//\n\nconst SYNTAX_ROOT_NAME = 'Syntax.Root';\n\ntype SyntaxRootProps = PropsWithChildren<{\n // Text mode.\n language?: string;\n source?: string;\n // JSON mode (presence of the `data` prop selects JSON mode; `undefined` is still JSON).\n data?: any;\n /**\n * `JSON.stringify` replacer applied to `data`. Use the function form to follow domain\n * references (e.g. ECHO refs) by returning a transformed value at the root call. Keeps\n * this package free of any domain-specific knowledge.\n */\n replacer?: JsonReplacer;\n}>;\n\n/**\n * Headless context provider. Selects JSON mode when the `data` prop is passed at all — even\n * `data={undefined}` — so loading states render an empty JSON view rather than flipping to\n * text mode (which would trip `Syntax.Filter`'s JSON-only guard). Mode is chosen by prop\n * presence, not value.\n */\nconst SyntaxRoot: FC<ScopedProps<SyntaxRootProps>> = (props) => {\n const { __scopeSyntax, children, language, source, replacer } = props;\n const isJson = 'data' in props;\n const data = props.data;\n const [filterText, setFilterText] = useState('');\n\n const { filteredData, filterError } = useMemo<{ filteredData: any; filterError: Error | null }>(() => {\n if (!isJson || !filterText.trim().length) {\n return { filteredData: data, filterError: null };\n }\n try {\n return { filteredData: JSONPath({ path: filterText, json: data }), filterError: null };\n } catch (err) {\n return { filteredData: data, filterError: err as Error };\n }\n }, [isJson, data, filterText]);\n\n return (\n <SyntaxProvider\n scope={__scopeSyntax}\n mode={isJson ? 'json' : 'text'}\n source={source}\n language={language}\n data={data}\n filteredData={filteredData}\n filterText={filterText}\n setFilterText={setFilterText}\n filterError={filterError}\n replacer={replacer}\n >\n {children}\n </SyntaxProvider>\n );\n};\n\nSyntaxRoot.displayName = SYNTAX_ROOT_NAME;\n\n//\n// Content\n//\n\nconst SYNTAX_CONTENT_NAME = 'Syntax.Content';\n\ntype SyntaxContentProps = ComposableProps;\n\n/** Flex-column layout container for composite parts. */\nconst SyntaxContent = composable<HTMLDivElement, SyntaxContentProps>(({ children, ...props }, forwardedRef) => {\n return (\n <div {...composableProps(props, { classNames: 'flex flex-col h-full min-h-0 overflow-hidden' })} ref={forwardedRef}>\n {children}\n </div>\n );\n});\n\nSyntaxContent.displayName = SYNTAX_CONTENT_NAME;\n\n//\n// Filter\n//\n\nconst SYNTAX_FILTER_NAME = 'Syntax.Filter';\n\ntype SyntaxFilterProps = ComposableProps<{\n placeholder?: string;\n}>;\n\n/** JSONPath filter input. Only meaningful when `Syntax.Root` is in JSON mode. */\nconst SyntaxFilter = forwardRef<HTMLInputElement, ScopedProps<SyntaxFilterProps>>(\n ({ __scopeSyntax, classNames, placeholder = 'JSONPath (e.g., $.graph.nodes)' }, forwardedRef) => {\n const { mode, filterText, setFilterText, filterError } = useSyntaxContext(SYNTAX_FILTER_NAME, __scopeSyntax);\n if (mode !== 'json') {\n throw new Error(`\\`${SYNTAX_FILTER_NAME}\\` requires \\`Syntax.Root\\` to be in JSON mode (pass \\`data\\`).`);\n }\n\n return (\n <Input.Root validationValence={filterError ? 'error' : 'success'}>\n <Input.TextInput\n classNames={['p-1 px-2 font-mono', filterError && 'border-rose-500', classNames]}\n variant='subdued'\n value={filterText}\n placeholder={placeholder}\n onChange={(event) => setFilterText(event.target.value)}\n ref={forwardedRef}\n />\n </Input.Root>\n );\n },\n);\n\nSyntaxFilter.displayName = SYNTAX_FILTER_NAME;\n\n//\n// Viewport\n//\n\nconst SYNTAX_VIEWPORT_NAME = 'Syntax.Viewport';\n\ntype SyntaxViewportProps = ComposableProps;\n\n/** Optional scroll wrapper. Compose around `Syntax.Code` to make it scrollable. */\nconst SyntaxViewport = composable<HTMLDivElement, SyntaxViewportProps>(({ children, ...props }, forwardedRef) => {\n return (\n <ScrollArea.Root {...composableProps(props)} thin ref={forwardedRef}>\n <ScrollArea.Viewport>{children}</ScrollArea.Viewport>\n </ScrollArea.Root>\n );\n});\n\nSyntaxViewport.displayName = SYNTAX_VIEWPORT_NAME;\n\n//\n// Code\n//\n\nconst SYNTAX_CODE_NAME = 'Syntax.Code';\n\ntype SyntaxCodeProps = ComposableProps<{\n testId?: string;\n}>;\n\n/** Highlighted code leaf. Reads source/data from `Syntax.Root` context. */\nconst SyntaxCode = composable<HTMLDivElement, ScopedProps<SyntaxCodeProps>>(\n ({ __scopeSyntax, testId, ...props }, forwardedRef) => {\n const context = useSyntaxContext(SYNTAX_CODE_NAME, __scopeSyntax);\n const merged = composableProps(props, { classNames: 'py-1 px-2 text-sm' });\n\n if (context.mode === 'json') {\n return (\n <JsonHighlighter\n {...merged}\n data={context.filteredData}\n replacer={context.replacer}\n testId={testId}\n ref={forwardedRef}\n />\n );\n }\n\n return (\n <SyntaxHighlighter {...merged} language={context.language} data-testid={testId} ref={forwardedRef}>\n {context.source ?? ''}\n </SyntaxHighlighter>\n );\n },\n);\n\nSyntaxCode.displayName = SYNTAX_CODE_NAME;\n\n//\n// Syntax\n//\n\nexport const Syntax = {\n Root: SyntaxRoot,\n Content: SyntaxContent,\n Filter: SyntaxFilter,\n Viewport: SyntaxViewport,\n Code: SyntaxCode,\n};\n\nexport { createSyntaxScope };\n\nexport type { SyntaxRootProps, SyntaxContentProps, SyntaxFilterProps, SyntaxViewportProps, SyntaxCodeProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "composable", "createReplacer", "safeStringify", "createElement", "React", "Children", "NativeSyntaxHighlighter", "coldarkDark", "dark", "coldarkCold", "light", "Clipboard", "useThemeContext", "composable", "composableProps", "zeroWidthSpace", "languages", "js", "ts", "SyntaxHighlighter", "classNames", "className", "children", "role", "style", "themeStyle", "language", "fallback", "copyButton", "nativeProps", "forwardedRef", "themeMode", "source", "toArray", "join", "hasCustomTheme", "Object", "keys", "length", "prismTheme", "div", "ref", "customStyle", "background", "border", "boxShadow", "padding", "margin", "Provider", "IconButton", "value", "variant", "size", "displayName", "resolveReplacer", "replacer", "undefined", "createReplacer", "JsonHighlighter", "composable", "data", "indent", "testId", "props", "forwardedRef", "React", "SyntaxHighlighter", "language", "data-testid", "ref", "safeStringify", "displayName", "createContextScope", "JSONPath", "React", "forwardRef", "useMemo", "useState", "Input", "ScrollArea", "composable", "composableProps", "SYNTAX_NAME", "createSyntaxContext", "createSyntaxScope", "createContextScope", "SyntaxProvider", "useSyntaxContext", "SYNTAX_ROOT_NAME", "SyntaxRoot", "props", "__scopeSyntax", "children", "language", "source", "replacer", "isJson", "data", "filterText", "setFilterText", "useState", "filteredData", "filterError", "useMemo", "trim", "length", "JSONPath", "path", "json", "err", "React", "scope", "mode", "displayName", "SYNTAX_CONTENT_NAME", "SyntaxContent", "composable", "forwardedRef", "div", "composableProps", "classNames", "ref", "SYNTAX_FILTER_NAME", "SyntaxFilter", "forwardRef", "placeholder", "Error", "Input", "Root", "validationValence", "TextInput", "variant", "value", "onChange", "event", "target", "SYNTAX_VIEWPORT_NAME", "SyntaxViewport", "ScrollArea", "thin", "Viewport", "SYNTAX_CODE_NAME", "SyntaxCode", "testId", "context", "merged", "JsonHighlighter", "SyntaxHighlighter", "data-testid", "Syntax", "Content", "Filter", "Code"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":9899,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/prism-async-light","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/prism","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/SyntaxHighlighter/index.ts":{"bytes":871,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"src/SyntaxHighlighter/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"},"src/JsonHighlighter/JsonHighlighter.tsx":{"bytes":4584,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"src/JsonHighlighter/index.ts":{"bytes":395,"imports":[{"path":"src/JsonHighlighter/JsonHighlighter.tsx","kind":"import-statement","original":"./JsonHighlighter"}],"format":"esm"},"src/Syntax/Syntax.tsx":{"bytes":19872,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"jsonpath-plus","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/JsonHighlighter/index.ts","kind":"import-statement","original":"../JsonHighlighter"},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"src/Syntax/index.ts":{"bytes":370,"imports":[{"path":"src/Syntax/Syntax.tsx","kind":"import-statement","original":"./Syntax"}],"format":"esm"},"src/index.ts":{"bytes":590,"imports":[{"path":"src/JsonHighlighter/index.ts","kind":"import-statement","original":"./JsonHighlighter"},{"path":"src/Syntax/index.ts","kind":"import-statement","original":"./Syntax"},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":18553},"dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/prism-async-light","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/prism","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"jsonpath-plus","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"exports":["JsonHighlighter","Syntax","SyntaxHighlighter","createElement","createSyntaxScope"],"entryPoint":"src/index.ts","inputs":{"src/JsonHighlighter/JsonHighlighter.tsx":{"bytesInOutput":681},"src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":1995},"src/index.ts":{"bytesInOutput":0},"src/Syntax/Syntax.tsx":{"bytesInOutput":4138}},"bytes":7222}}}
|
|
@@ -47,7 +47,6 @@ var SyntaxHighlighter = composable(({ classNames, className, children, role, sty
|
|
|
47
47
|
},
|
|
48
48
|
...nativeProps
|
|
49
49
|
}, source), copyButton && /* @__PURE__ */ React.createElement("div", {
|
|
50
|
-
role: "none",
|
|
51
50
|
className: "pointer-events-none absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
|
|
52
51
|
}, /* @__PURE__ */ React.createElement(Clipboard.Provider, null, /* @__PURE__ */ React.createElement(Clipboard.IconButton, {
|
|
53
52
|
value: source,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/JsonHighlighter/JsonHighlighter.tsx", "../../../src/SyntaxHighlighter/index.ts", "../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx", "../../../src/Syntax/Syntax.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { composable } from '@dxos/ui-theme';\nimport { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';\n\nimport { SyntaxHighlighter, type SyntaxHighlighterProps } from '../SyntaxHighlighter';\n\nexport type JsonReplacer = CreateReplacerProps | ((key: string, value: any) => any);\n\nexport type JsonHighlighterProps = Omit<SyntaxHighlighterProps, 'children' | 'language'> & {\n data?: any;\n replacer?: JsonReplacer;\n /** Indentation passed to `JSON.stringify`. Default: `2` (pretty-printed). Pass `0` for single-line output. */\n indent?: number;\n testId?: string;\n};\n\nconst resolveReplacer = (replacer?: JsonReplacer) => {\n if (!replacer) {\n return undefined;\n }\n return typeof replacer === 'function' ? replacer : createReplacer(replacer);\n};\n\n/**\n * Inline, non-scrolling JSON renderer.\n *\n * Thin wrapper around `SyntaxHighlighter` that stringifies `data` with an optional replacer.\n * `replacer` accepts either `CreateReplacerProps` (declarative truncation) or a raw\n * `JSON.stringify`-compatible function (for bespoke serialization).\n * For filtering and scroll behaviour, compose with the `Syntax.*` namespace.\n */\nexport const JsonHighlighter = composable<HTMLDivElement, JsonHighlighterProps>(\n ({ data, replacer, indent = 2, testId, ...props }, forwardedRef) => {\n return (\n <SyntaxHighlighter {...props} language='json' data-testid={testId} ref={forwardedRef}>\n {safeStringify(data, resolveReplacer(replacer), indent)}\n </SyntaxHighlighter>\n );\n },\n);\n\nJsonHighlighter.displayName = 'JsonHighlighter';\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, { Children } from 'react';\nimport { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';\nimport { coldarkDark as dark, coldarkCold as light } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport { Clipboard, useThemeContext } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nconst languages = {\n js: 'javascript',\n ts: 'typescript',\n};\n\nexport type SyntaxHighlighterProps = Pick<\n NaturalSyntaxHighlighterProps,\n | 'language'\n | 'renderer'\n | 'showLineNumbers'\n | 'showInlineLineNumbers'\n | 'startingLineNumber'\n | 'wrapLines'\n | 'wrapLongLines'\n | 'PreTag'\n> & {\n themeStyle?: NaturalSyntaxHighlighterProps['style'];\n fallback?: string;\n copyButton?: boolean;\n};\n\n/**\n * Inline, non-scrolling wrapper around `react-syntax-highlighter`.\n *\n * Use directly for small snippets (e.g. inside markdown code blocks).\n * For scrollable panels, compose with `Syntax.Viewport`.\n *\n * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n * The lightweight version will load specific language parsers asynchronously.\n *\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html\n */\nexport const SyntaxHighlighter = composable<HTMLDivElement, SyntaxHighlighterProps>(\n (\n {\n classNames,\n className,\n children,\n role,\n style,\n themeStyle,\n language = 'text',\n fallback = zeroWidthSpace,\n copyButton,\n ...nativeProps\n },\n forwardedRef,\n ) => {\n const { themeMode } = useThemeContext();\n const source = Children.toArray(children).join('') || fallback;\n\n const hasCustomTheme = themeStyle && typeof themeStyle === 'object' && Object.keys(themeStyle).length > 0;\n const prismTheme = hasCustomTheme ? themeStyle : themeMode === 'dark' ? dark : light;\n\n return (\n <div\n {...composableProps(\n { classNames, className, role, style },\n {\n role: 'none',\n classNames: copyButton && 'relative group',\n },\n )}\n ref={forwardedRef}\n >\n <NativeSyntaxHighlighter\n language={languages[language as keyof typeof languages] || language}\n style={prismTheme}\n customStyle={{\n background: 'unset',\n border: 'none',\n boxShadow: 'none',\n padding: 0,\n margin: 0,\n }}\n {...nativeProps}\n >\n {/* Non-empty fallback prevents collapse. */}\n {source}\n </NativeSyntaxHighlighter>\n\n {copyButton && (\n <div\n role='none'\n className='pointer-events-none absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100'\n >\n <Clipboard.Provider>\n <Clipboard.IconButton\n value={source}\n variant='ghost'\n size={4}\n classNames='pointer-events-auto aspect-square rounded-sm'\n />\n </Clipboard.Provider>\n </div>\n )}\n </div>\n );\n },\n);\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { JSONPath } from 'jsonpath-plus';\nimport React, { type FC, type PropsWithChildren, forwardRef, useMemo, useState } from 'react';\n\nimport { Input, ScrollArea } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\nimport { type ComposableProps } from '@dxos/ui-types';\n\nimport { JsonHighlighter, type JsonReplacer } from '../JsonHighlighter';\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\n//\n// Context\n//\n\nconst SYNTAX_NAME = 'Syntax';\n\ntype SyntaxContextValue = {\n mode: 'text' | 'json';\n // Text mode.\n source?: string;\n language?: string;\n // JSON mode.\n data?: any;\n filteredData?: any;\n filterText: string;\n setFilterText: (text: string) => void;\n filterError: Error | null;\n replacer?: JsonReplacer;\n};\n\ntype ScopedProps<P> = P & { __scopeSyntax?: Scope };\n\nconst [createSyntaxContext, createSyntaxScope] = createContextScope(SYNTAX_NAME);\nconst [SyntaxProvider, useSyntaxContext] = createSyntaxContext<SyntaxContextValue>(SYNTAX_NAME);\n\n//\n// Root\n//\n\nconst SYNTAX_ROOT_NAME = 'Syntax.Root';\n\ntype SyntaxRootProps = PropsWithChildren<{\n // Text mode.\n language?: string;\n source?: string;\n // JSON mode (presence of the `data` prop selects JSON mode; `undefined` is still JSON).\n data?: any;\n /**\n * `JSON.stringify` replacer applied to `data`. Use the function form to follow domain\n * references (e.g. ECHO refs) by returning a transformed value at the root call. Keeps\n * this package free of any domain-specific knowledge.\n */\n replacer?: JsonReplacer;\n}>;\n\n/**\n * Headless context provider. Selects JSON mode when the `data` prop is passed at all — even\n * `data={undefined}` — so loading states render an empty JSON view rather than flipping to\n * text mode (which would trip `Syntax.Filter`'s JSON-only guard). Mode is chosen by prop\n * presence, not value.\n */\nconst SyntaxRoot: FC<ScopedProps<SyntaxRootProps>> = (props) => {\n const { __scopeSyntax, children, language, source, replacer } = props;\n const isJson = 'data' in props;\n const data = props.data;\n const [filterText, setFilterText] = useState('');\n\n const { filteredData, filterError } = useMemo<{ filteredData: any; filterError: Error | null }>(() => {\n if (!isJson || !filterText.trim().length) {\n return { filteredData: data, filterError: null };\n }\n try {\n return { filteredData: JSONPath({ path: filterText, json: data }), filterError: null };\n } catch (err) {\n return { filteredData: data, filterError: err as Error };\n }\n }, [isJson, data, filterText]);\n\n return (\n <SyntaxProvider\n scope={__scopeSyntax}\n mode={isJson ? 'json' : 'text'}\n source={source}\n language={language}\n data={data}\n filteredData={filteredData}\n filterText={filterText}\n setFilterText={setFilterText}\n filterError={filterError}\n replacer={replacer}\n >\n {children}\n </SyntaxProvider>\n );\n};\n\nSyntaxRoot.displayName = SYNTAX_ROOT_NAME;\n\n//\n// Content\n//\n\nconst SYNTAX_CONTENT_NAME = 'Syntax.Content';\n\ntype SyntaxContentProps = ComposableProps;\n\n/** Flex-column layout container for composite parts. */\nconst SyntaxContent = composable<HTMLDivElement, SyntaxContentProps>(({ children, ...props }, forwardedRef) => {\n return (\n <div {...composableProps(props, { classNames: 'flex flex-col h-full min-h-0 overflow-hidden' })} ref={forwardedRef}>\n {children}\n </div>\n );\n});\n\nSyntaxContent.displayName = SYNTAX_CONTENT_NAME;\n\n//\n// Filter\n//\n\nconst SYNTAX_FILTER_NAME = 'Syntax.Filter';\n\ntype SyntaxFilterProps = ComposableProps<{\n placeholder?: string;\n}>;\n\n/** JSONPath filter input. Only meaningful when `Syntax.Root` is in JSON mode. */\nconst SyntaxFilter = forwardRef<HTMLInputElement, ScopedProps<SyntaxFilterProps>>(\n ({ __scopeSyntax, classNames, placeholder = 'JSONPath (e.g., $.graph.nodes)' }, forwardedRef) => {\n const { mode, filterText, setFilterText, filterError } = useSyntaxContext(SYNTAX_FILTER_NAME, __scopeSyntax);\n if (mode !== 'json') {\n throw new Error(`\\`${SYNTAX_FILTER_NAME}\\` requires \\`Syntax.Root\\` to be in JSON mode (pass \\`data\\`).`);\n }\n\n return (\n <Input.Root validationValence={filterError ? 'error' : 'success'}>\n <Input.TextInput\n classNames={['p-1 px-2 font-mono', filterError && 'border-rose-500', classNames]}\n variant='subdued'\n value={filterText}\n placeholder={placeholder}\n onChange={(event) => setFilterText(event.target.value)}\n ref={forwardedRef}\n />\n </Input.Root>\n );\n },\n);\n\nSyntaxFilter.displayName = SYNTAX_FILTER_NAME;\n\n//\n// Viewport\n//\n\nconst SYNTAX_VIEWPORT_NAME = 'Syntax.Viewport';\n\ntype SyntaxViewportProps = ComposableProps;\n\n/** Optional scroll wrapper. Compose around `Syntax.Code` to make it scrollable. */\nconst SyntaxViewport = composable<HTMLDivElement, SyntaxViewportProps>(({ children, ...props }, forwardedRef) => {\n return (\n <ScrollArea.Root {...composableProps(props)} thin ref={forwardedRef}>\n <ScrollArea.Viewport>{children}</ScrollArea.Viewport>\n </ScrollArea.Root>\n );\n});\n\nSyntaxViewport.displayName = SYNTAX_VIEWPORT_NAME;\n\n//\n// Code\n//\n\nconst SYNTAX_CODE_NAME = 'Syntax.Code';\n\ntype SyntaxCodeProps = ComposableProps<{\n testId?: string;\n}>;\n\n/** Highlighted code leaf. Reads source/data from `Syntax.Root` context. */\nconst SyntaxCode = composable<HTMLDivElement, ScopedProps<SyntaxCodeProps>>(\n ({ __scopeSyntax, testId, ...props }, forwardedRef) => {\n const context = useSyntaxContext(SYNTAX_CODE_NAME, __scopeSyntax);\n const merged = composableProps(props, { classNames: 'py-1 px-2 text-sm' });\n\n if (context.mode === 'json') {\n return (\n <JsonHighlighter\n {...merged}\n data={context.filteredData}\n replacer={context.replacer}\n testId={testId}\n ref={forwardedRef}\n />\n );\n }\n\n return (\n <SyntaxHighlighter {...merged} language={context.language} data-testid={testId} ref={forwardedRef}>\n {context.source ?? ''}\n </SyntaxHighlighter>\n );\n },\n);\n\nSyntaxCode.displayName = SYNTAX_CODE_NAME;\n\n//\n// Syntax\n//\n\nexport const Syntax = {\n Root: SyntaxRoot,\n Content: SyntaxContent,\n Filter: SyntaxFilter,\n Viewport: SyntaxViewport,\n Code: SyntaxCode,\n};\n\nexport { createSyntaxScope };\n\nexport type { SyntaxRootProps, SyntaxContentProps, SyntaxFilterProps, SyntaxViewportProps, SyntaxCodeProps };\n"],
|
|
5
|
-
"mappings": ";;;AAIA,OAAOA,YAAW;AAElB,SAASC,cAAAA,mBAAkB;AAC3B,SAAmCC,gBAAgBC,qBAAqB;;;ACFxE,OAAOC,mBAAmB;;;ACD1B,OAAOC,SAASC,gBAAgB;AAEhC,OAAOC,6BAA6B;AACpC,SAASC,eAAeC,MAAMC,eAAeC,aAAa;AAE1D,SAASC,WAAWC,uBAAuB;AAC3C,SAASC,YAAYC,uBAAuB;AAE5C,IAAMC,iBAAiB;AAEvB,IAAMC,YAAY;EAChBC,IAAI;EACJC,IAAI;AACN;AA8BO,IAAMC,
|
|
6
|
-
"names": ["React", "composable", "createReplacer", "safeStringify", "createElement", "React", "Children", "NativeSyntaxHighlighter", "coldarkDark", "dark", "coldarkCold", "light", "Clipboard", "useThemeContext", "composable", "composableProps", "zeroWidthSpace", "languages", "js", "ts", "SyntaxHighlighter", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { composable } from '@dxos/ui-theme';\nimport { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';\n\nimport { SyntaxHighlighter, type SyntaxHighlighterProps } from '../SyntaxHighlighter';\n\nexport type JsonReplacer = CreateReplacerProps | ((key: string, value: any) => any);\n\nexport type JsonHighlighterProps = Omit<SyntaxHighlighterProps, 'children' | 'language'> & {\n data?: any;\n replacer?: JsonReplacer;\n /** Indentation passed to `JSON.stringify`. Default: `2` (pretty-printed). Pass `0` for single-line output. */\n indent?: number;\n testId?: string;\n};\n\nconst resolveReplacer = (replacer?: JsonReplacer) => {\n if (!replacer) {\n return undefined;\n }\n return typeof replacer === 'function' ? replacer : createReplacer(replacer);\n};\n\n/**\n * Inline, non-scrolling JSON renderer.\n *\n * Thin wrapper around `SyntaxHighlighter` that stringifies `data` with an optional replacer.\n * `replacer` accepts either `CreateReplacerProps` (declarative truncation) or a raw\n * `JSON.stringify`-compatible function (for bespoke serialization).\n * For filtering and scroll behaviour, compose with the `Syntax.*` namespace.\n */\nexport const JsonHighlighter = composable<HTMLDivElement, JsonHighlighterProps>(\n ({ data, replacer, indent = 2, testId, ...props }, forwardedRef) => {\n return (\n <SyntaxHighlighter {...props} language='json' data-testid={testId} ref={forwardedRef}>\n {safeStringify(data, resolveReplacer(replacer), indent)}\n </SyntaxHighlighter>\n );\n },\n);\n\nJsonHighlighter.displayName = 'JsonHighlighter';\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, { Children } from 'react';\nimport { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';\nimport { coldarkDark as dark, coldarkCold as light } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport { Clipboard, useThemeContext } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nconst languages = {\n js: 'javascript',\n ts: 'typescript',\n};\n\nexport type SyntaxHighlighterProps = Pick<\n NaturalSyntaxHighlighterProps,\n | 'language'\n | 'renderer'\n | 'showLineNumbers'\n | 'showInlineLineNumbers'\n | 'startingLineNumber'\n | 'wrapLines'\n | 'wrapLongLines'\n | 'PreTag'\n> & {\n themeStyle?: NaturalSyntaxHighlighterProps['style'];\n fallback?: string;\n copyButton?: boolean;\n};\n\n/**\n * Inline, non-scrolling wrapper around `react-syntax-highlighter`.\n *\n * Use directly for small snippets (e.g. inside markdown code blocks).\n * For scrollable panels, compose with `Syntax.Viewport`.\n *\n * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n * The lightweight version will load specific language parsers asynchronously.\n *\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html\n */\nexport const SyntaxHighlighter = composable<HTMLDivElement, SyntaxHighlighterProps>(\n (\n {\n classNames,\n className,\n children,\n role,\n style,\n themeStyle,\n language = 'text',\n fallback = zeroWidthSpace,\n copyButton,\n ...nativeProps\n },\n forwardedRef,\n ) => {\n const { themeMode } = useThemeContext();\n const source = Children.toArray(children).join('') || fallback;\n\n const hasCustomTheme = themeStyle && typeof themeStyle === 'object' && Object.keys(themeStyle).length > 0;\n const prismTheme = hasCustomTheme ? themeStyle : themeMode === 'dark' ? dark : light;\n\n return (\n <div\n {...composableProps(\n { classNames, className, role, style },\n {\n role: 'none',\n classNames: copyButton && 'relative group',\n },\n )}\n ref={forwardedRef}\n >\n <NativeSyntaxHighlighter\n language={languages[language as keyof typeof languages] || language}\n style={prismTheme}\n customStyle={{\n background: 'unset',\n border: 'none',\n boxShadow: 'none',\n padding: 0,\n margin: 0,\n }}\n {...nativeProps}\n >\n {/* Non-empty fallback prevents collapse. */}\n {source}\n </NativeSyntaxHighlighter>\n\n {copyButton && (\n <div className='pointer-events-none absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100'>\n <Clipboard.Provider>\n <Clipboard.IconButton\n value={source}\n variant='ghost'\n size={4}\n classNames='pointer-events-auto aspect-square rounded-sm'\n />\n </Clipboard.Provider>\n </div>\n )}\n </div>\n );\n },\n);\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport { JSONPath } from 'jsonpath-plus';\nimport React, { type FC, type PropsWithChildren, forwardRef, useMemo, useState } from 'react';\n\nimport { Input, ScrollArea } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/ui-theme';\nimport { type ComposableProps } from '@dxos/ui-types';\n\nimport { JsonHighlighter, type JsonReplacer } from '../JsonHighlighter';\nimport { SyntaxHighlighter } from '../SyntaxHighlighter';\n\n//\n// Context\n//\n\nconst SYNTAX_NAME = 'Syntax';\n\ntype SyntaxContextValue = {\n mode: 'text' | 'json';\n // Text mode.\n source?: string;\n language?: string;\n // JSON mode.\n data?: any;\n filteredData?: any;\n filterText: string;\n setFilterText: (text: string) => void;\n filterError: Error | null;\n replacer?: JsonReplacer;\n};\n\ntype ScopedProps<P> = P & { __scopeSyntax?: Scope };\n\nconst [createSyntaxContext, createSyntaxScope] = createContextScope(SYNTAX_NAME);\nconst [SyntaxProvider, useSyntaxContext] = createSyntaxContext<SyntaxContextValue>(SYNTAX_NAME);\n\n//\n// Root\n//\n\nconst SYNTAX_ROOT_NAME = 'Syntax.Root';\n\ntype SyntaxRootProps = PropsWithChildren<{\n // Text mode.\n language?: string;\n source?: string;\n // JSON mode (presence of the `data` prop selects JSON mode; `undefined` is still JSON).\n data?: any;\n /**\n * `JSON.stringify` replacer applied to `data`. Use the function form to follow domain\n * references (e.g. ECHO refs) by returning a transformed value at the root call. Keeps\n * this package free of any domain-specific knowledge.\n */\n replacer?: JsonReplacer;\n}>;\n\n/**\n * Headless context provider. Selects JSON mode when the `data` prop is passed at all — even\n * `data={undefined}` — so loading states render an empty JSON view rather than flipping to\n * text mode (which would trip `Syntax.Filter`'s JSON-only guard). Mode is chosen by prop\n * presence, not value.\n */\nconst SyntaxRoot: FC<ScopedProps<SyntaxRootProps>> = (props) => {\n const { __scopeSyntax, children, language, source, replacer } = props;\n const isJson = 'data' in props;\n const data = props.data;\n const [filterText, setFilterText] = useState('');\n\n const { filteredData, filterError } = useMemo<{ filteredData: any; filterError: Error | null }>(() => {\n if (!isJson || !filterText.trim().length) {\n return { filteredData: data, filterError: null };\n }\n try {\n return { filteredData: JSONPath({ path: filterText, json: data }), filterError: null };\n } catch (err) {\n return { filteredData: data, filterError: err as Error };\n }\n }, [isJson, data, filterText]);\n\n return (\n <SyntaxProvider\n scope={__scopeSyntax}\n mode={isJson ? 'json' : 'text'}\n source={source}\n language={language}\n data={data}\n filteredData={filteredData}\n filterText={filterText}\n setFilterText={setFilterText}\n filterError={filterError}\n replacer={replacer}\n >\n {children}\n </SyntaxProvider>\n );\n};\n\nSyntaxRoot.displayName = SYNTAX_ROOT_NAME;\n\n//\n// Content\n//\n\nconst SYNTAX_CONTENT_NAME = 'Syntax.Content';\n\ntype SyntaxContentProps = ComposableProps;\n\n/** Flex-column layout container for composite parts. */\nconst SyntaxContent = composable<HTMLDivElement, SyntaxContentProps>(({ children, ...props }, forwardedRef) => {\n return (\n <div {...composableProps(props, { classNames: 'flex flex-col h-full min-h-0 overflow-hidden' })} ref={forwardedRef}>\n {children}\n </div>\n );\n});\n\nSyntaxContent.displayName = SYNTAX_CONTENT_NAME;\n\n//\n// Filter\n//\n\nconst SYNTAX_FILTER_NAME = 'Syntax.Filter';\n\ntype SyntaxFilterProps = ComposableProps<{\n placeholder?: string;\n}>;\n\n/** JSONPath filter input. Only meaningful when `Syntax.Root` is in JSON mode. */\nconst SyntaxFilter = forwardRef<HTMLInputElement, ScopedProps<SyntaxFilterProps>>(\n ({ __scopeSyntax, classNames, placeholder = 'JSONPath (e.g., $.graph.nodes)' }, forwardedRef) => {\n const { mode, filterText, setFilterText, filterError } = useSyntaxContext(SYNTAX_FILTER_NAME, __scopeSyntax);\n if (mode !== 'json') {\n throw new Error(`\\`${SYNTAX_FILTER_NAME}\\` requires \\`Syntax.Root\\` to be in JSON mode (pass \\`data\\`).`);\n }\n\n return (\n <Input.Root validationValence={filterError ? 'error' : 'success'}>\n <Input.TextInput\n classNames={['p-1 px-2 font-mono', filterError && 'border-rose-500', classNames]}\n variant='subdued'\n value={filterText}\n placeholder={placeholder}\n onChange={(event) => setFilterText(event.target.value)}\n ref={forwardedRef}\n />\n </Input.Root>\n );\n },\n);\n\nSyntaxFilter.displayName = SYNTAX_FILTER_NAME;\n\n//\n// Viewport\n//\n\nconst SYNTAX_VIEWPORT_NAME = 'Syntax.Viewport';\n\ntype SyntaxViewportProps = ComposableProps;\n\n/** Optional scroll wrapper. Compose around `Syntax.Code` to make it scrollable. */\nconst SyntaxViewport = composable<HTMLDivElement, SyntaxViewportProps>(({ children, ...props }, forwardedRef) => {\n return (\n <ScrollArea.Root {...composableProps(props)} thin ref={forwardedRef}>\n <ScrollArea.Viewport>{children}</ScrollArea.Viewport>\n </ScrollArea.Root>\n );\n});\n\nSyntaxViewport.displayName = SYNTAX_VIEWPORT_NAME;\n\n//\n// Code\n//\n\nconst SYNTAX_CODE_NAME = 'Syntax.Code';\n\ntype SyntaxCodeProps = ComposableProps<{\n testId?: string;\n}>;\n\n/** Highlighted code leaf. Reads source/data from `Syntax.Root` context. */\nconst SyntaxCode = composable<HTMLDivElement, ScopedProps<SyntaxCodeProps>>(\n ({ __scopeSyntax, testId, ...props }, forwardedRef) => {\n const context = useSyntaxContext(SYNTAX_CODE_NAME, __scopeSyntax);\n const merged = composableProps(props, { classNames: 'py-1 px-2 text-sm' });\n\n if (context.mode === 'json') {\n return (\n <JsonHighlighter\n {...merged}\n data={context.filteredData}\n replacer={context.replacer}\n testId={testId}\n ref={forwardedRef}\n />\n );\n }\n\n return (\n <SyntaxHighlighter {...merged} language={context.language} data-testid={testId} ref={forwardedRef}>\n {context.source ?? ''}\n </SyntaxHighlighter>\n );\n },\n);\n\nSyntaxCode.displayName = SYNTAX_CODE_NAME;\n\n//\n// Syntax\n//\n\nexport const Syntax = {\n Root: SyntaxRoot,\n Content: SyntaxContent,\n Filter: SyntaxFilter,\n Viewport: SyntaxViewport,\n Code: SyntaxCode,\n};\n\nexport { createSyntaxScope };\n\nexport type { SyntaxRootProps, SyntaxContentProps, SyntaxFilterProps, SyntaxViewportProps, SyntaxCodeProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "composable", "createReplacer", "safeStringify", "createElement", "React", "Children", "NativeSyntaxHighlighter", "coldarkDark", "dark", "coldarkCold", "light", "Clipboard", "useThemeContext", "composable", "composableProps", "zeroWidthSpace", "languages", "js", "ts", "SyntaxHighlighter", "classNames", "className", "children", "role", "style", "themeStyle", "language", "fallback", "copyButton", "nativeProps", "forwardedRef", "themeMode", "source", "toArray", "join", "hasCustomTheme", "Object", "keys", "length", "prismTheme", "div", "ref", "customStyle", "background", "border", "boxShadow", "padding", "margin", "Provider", "IconButton", "value", "variant", "size", "displayName", "resolveReplacer", "replacer", "undefined", "createReplacer", "JsonHighlighter", "composable", "data", "indent", "testId", "props", "forwardedRef", "React", "SyntaxHighlighter", "language", "data-testid", "ref", "safeStringify", "displayName", "createContextScope", "JSONPath", "React", "forwardRef", "useMemo", "useState", "Input", "ScrollArea", "composable", "composableProps", "SYNTAX_NAME", "createSyntaxContext", "createSyntaxScope", "createContextScope", "SyntaxProvider", "useSyntaxContext", "SYNTAX_ROOT_NAME", "SyntaxRoot", "props", "__scopeSyntax", "children", "language", "source", "replacer", "isJson", "data", "filterText", "setFilterText", "useState", "filteredData", "filterError", "useMemo", "trim", "length", "JSONPath", "path", "json", "err", "React", "scope", "mode", "displayName", "SYNTAX_CONTENT_NAME", "SyntaxContent", "composable", "forwardedRef", "div", "composableProps", "classNames", "ref", "SYNTAX_FILTER_NAME", "SyntaxFilter", "forwardRef", "placeholder", "Error", "Input", "Root", "validationValence", "TextInput", "variant", "value", "onChange", "event", "target", "SYNTAX_VIEWPORT_NAME", "SyntaxViewport", "ScrollArea", "thin", "Viewport", "SYNTAX_CODE_NAME", "SyntaxCode", "testId", "context", "merged", "JsonHighlighter", "SyntaxHighlighter", "data-testid", "Syntax", "Content", "Filter", "Code"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytes":9899,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/prism-async-light","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/prism","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/SyntaxHighlighter/index.ts":{"bytes":871,"imports":[{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"src/SyntaxHighlighter/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"},"src/JsonHighlighter/JsonHighlighter.tsx":{"bytes":4584,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"src/JsonHighlighter/index.ts":{"bytes":395,"imports":[{"path":"src/JsonHighlighter/JsonHighlighter.tsx","kind":"import-statement","original":"./JsonHighlighter"}],"format":"esm"},"src/Syntax/Syntax.tsx":{"bytes":19872,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"jsonpath-plus","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/JsonHighlighter/index.ts","kind":"import-statement","original":"../JsonHighlighter"},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"../SyntaxHighlighter"}],"format":"esm"},"src/Syntax/index.ts":{"bytes":370,"imports":[{"path":"src/Syntax/Syntax.tsx","kind":"import-statement","original":"./Syntax"}],"format":"esm"},"src/index.ts":{"bytes":590,"imports":[{"path":"src/JsonHighlighter/index.ts","kind":"import-statement","original":"./JsonHighlighter"},{"path":"src/Syntax/index.ts","kind":"import-statement","original":"./Syntax"},{"path":"src/SyntaxHighlighter/index.ts","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":18555},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/create-element","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/prism-async-light","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/prism","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"jsonpath-plus","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"exports":["JsonHighlighter","Syntax","SyntaxHighlighter","createElement","createSyntaxScope"],"entryPoint":"src/index.ts","inputs":{"src/JsonHighlighter/JsonHighlighter.tsx":{"bytesInOutput":681},"src/SyntaxHighlighter/index.ts":{"bytesInOutput":78},"src/SyntaxHighlighter/SyntaxHighlighter.tsx":{"bytesInOutput":1995},"src/index.ts":{"bytesInOutput":0},"src/Syntax/Syntax.tsx":{"bytesInOutput":4138}},"bytes":7315}}}
|
|
@@ -19,5 +19,5 @@ export type JsonHighlighterProps = Omit<SyntaxHighlighterProps, 'children' | 'la
|
|
|
19
19
|
*/
|
|
20
20
|
export declare const JsonHighlighter: React.ForwardRefExoticComponent<Omit<JsonHighlighterProps, "className"> & {
|
|
21
21
|
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
22
|
-
} & Pick<React.HTMLAttributes<Element>, "
|
|
22
|
+
} & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
|
|
23
23
|
//# sourceMappingURL=JsonHighlighter.d.ts.map
|
|
@@ -4,7 +4,7 @@ declare const meta: {
|
|
|
4
4
|
title: string;
|
|
5
5
|
component: import("react").ForwardRefExoticComponent<Omit<import("./JsonHighlighter").JsonHighlighterProps, "className"> & {
|
|
6
6
|
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
7
|
-
} & Pick<import("react").HTMLAttributes<Element>, "
|
|
7
|
+
} & Pick<import("react").HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
8
8
|
decorators: import("@storybook/react").Decorator[];
|
|
9
9
|
};
|
|
10
10
|
export default meta;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JsonHighlighter.stories.d.ts","sourceRoot":"","sources":["../../../../src/JsonHighlighter/JsonHighlighter.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAKjE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAmCpD,QAAA,MAAM,IAAI;;;;;;CAI8B,CAAC;
|
|
1
|
+
{"version":3,"file":"JsonHighlighter.stories.d.ts","sourceRoot":"","sources":["../../../../src/JsonHighlighter/JsonHighlighter.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAKjE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAmCpD,QAAA,MAAM,IAAI;;;;;;CAI8B,CAAC;eAE1B,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAC;AAE9C,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type Scope } from '@radix-ui/react-context';
|
|
2
|
-
import React, { type PropsWithChildren } from 'react';
|
|
2
|
+
import React, { type FC, type PropsWithChildren } from 'react';
|
|
3
3
|
import { type ComposableProps } from '@dxos/ui-types';
|
|
4
4
|
import { type JsonReplacer } from '../JsonHighlighter';
|
|
5
5
|
type ScopedProps<P> = P & {
|
|
@@ -26,23 +26,23 @@ type SyntaxCodeProps = ComposableProps<{
|
|
|
26
26
|
testId?: string;
|
|
27
27
|
}>;
|
|
28
28
|
export declare const Syntax: {
|
|
29
|
-
Root:
|
|
29
|
+
Root: FC<ScopedProps<SyntaxRootProps>>;
|
|
30
30
|
Content: React.ForwardRefExoticComponent<Omit<SyntaxContentProps, "className"> & {
|
|
31
31
|
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
32
|
-
} & Pick<React.HTMLAttributes<Element>, "
|
|
32
|
+
} & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
|
|
33
33
|
Filter: React.ForwardRefExoticComponent<Omit<{
|
|
34
34
|
placeholder?: string;
|
|
35
35
|
}, "className"> & {
|
|
36
36
|
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
37
|
-
} & Pick<React.HTMLAttributes<Element>, "
|
|
37
|
+
} & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & {
|
|
38
38
|
__scopeSyntax?: Scope;
|
|
39
39
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
40
40
|
Viewport: React.ForwardRefExoticComponent<Omit<SyntaxViewportProps, "className"> & {
|
|
41
41
|
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
42
|
-
} & Pick<React.HTMLAttributes<Element>, "
|
|
42
|
+
} & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
|
|
43
43
|
Code: React.ForwardRefExoticComponent<Omit<ScopedProps<SyntaxCodeProps>, "className"> & {
|
|
44
44
|
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
45
|
-
} & Pick<React.HTMLAttributes<Element>, "
|
|
45
|
+
} & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
|
|
46
46
|
};
|
|
47
47
|
export { createSyntaxScope };
|
|
48
48
|
export type { SyntaxRootProps, SyntaxContentProps, SyntaxFilterProps, SyntaxViewportProps, SyntaxCodeProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Syntax.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/Syntax.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAsB,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Syntax.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/Syntax.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAsB,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAI9F,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAuBxE,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEpD,QAAA,MAA4B,iBAAiB,+CAAmC,CAAC;AASjF,KAAK,eAAe,GAAG,iBAAiB,CAAC;IAEvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB,CAAC,CAAC;AAmDH,KAAK,kBAAkB,GAAG,eAAe,CAAC;AAmB1C,KAAK,iBAAiB,GAAG,eAAe,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAiCH,KAAK,mBAAmB,GAAG,eAAe,CAAC;AAmB3C,KAAK,eAAe,GAAG,eAAe,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAkCH,eAAO,MAAM,MAAM;IACjB,IAAI;IACJ,OAAO;;;IACP,MAAM;sBA5FQ,MAAM;;;;wBA9FsB,KAAK;;IA2L/C,QAAQ;;;IACR,IAAI;;;CACL,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Syntax.stories.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/Syntax.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AA8C1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAIM,CAAC;
|
|
1
|
+
{"version":3,"file":"Syntax.stories.d.ts","sourceRoot":"","sources":["../../../../src/Syntax/Syntax.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AA8C1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAIM,CAAC;eAEF,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,yDAAyD;AACzD,eAAO,MAAM,IAAI,EAAE,KAelB,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,IAAI,EAAE,KAkBlB,CAAC"}
|
|
@@ -19,5 +19,5 @@ export type SyntaxHighlighterProps = Pick<NaturalSyntaxHighlighterProps, 'langua
|
|
|
19
19
|
*/
|
|
20
20
|
export declare const SyntaxHighlighter: React.ForwardRefExoticComponent<Omit<SyntaxHighlighterProps, "className"> & {
|
|
21
21
|
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
22
|
-
} & Pick<React.HTMLAttributes<Element>, "
|
|
22
|
+
} & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
|
|
23
23
|
//# sourceMappingURL=SyntaxHighlighter.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,sBAAsB,IAAI,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AAcxG,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,6BAA6B,EAC3B,UAAU,GACV,UAAU,GACV,iBAAiB,GACjB,uBAAuB,GACvB,oBAAoB,GACpB,WAAW,GACX,eAAe,GACf,QAAQ,CACX,GAAG;IACF,UAAU,CAAC,EAAE,6BAA6B,CAAC,OAAO,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;
|
|
1
|
+
{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,sBAAsB,IAAI,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AAcxG,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,6BAA6B,EAC3B,UAAU,GACV,UAAU,GACV,iBAAiB,GACjB,uBAAuB,GACvB,oBAAoB,GACpB,WAAW,GACX,eAAe,GACf,QAAQ,CACX,GAAG;IACF,UAAU,CAAC,EAAE,6BAA6B,CAAC,OAAO,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;2HAgE7B,CAAC"}
|
|
@@ -4,7 +4,7 @@ declare const meta: {
|
|
|
4
4
|
title: string;
|
|
5
5
|
component: import("react").ForwardRefExoticComponent<Omit<import("./SyntaxHighlighter").SyntaxHighlighterProps, "className"> & {
|
|
6
6
|
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
7
|
-
} & Pick<import("react").HTMLAttributes<Element>, "
|
|
7
|
+
} & Pick<import("react").HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
8
8
|
decorators: import("@storybook/react").Decorator[];
|
|
9
9
|
parameters: {
|
|
10
10
|
layout: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SyntaxHighlighter.stories.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAOjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,QAAA,MAAM,IAAI
|
|
1
|
+
{"version":3,"file":"SyntaxHighlighter.stories.d.ts","sourceRoot":"","sources":["../../../../src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAOjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,QAAA,MAAM,IAAI;;;;;;;QAKN,MAAM;;CAEgC,CAAC;eAE5B,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEhD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAU,CAAC"}
|