@stackone/malachite 2.23.1 → 2.23.2
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import { PrismLight as m, createElement as y } from "react-syntax-highlighter";
|
|
3
|
-
import w from "
|
|
3
|
+
import w from "refractor/yaml";
|
|
4
4
|
import f from "./prismCedar.js";
|
|
5
5
|
import { CodeLine as L } from "./codeBlockLine.js";
|
|
6
6
|
import { CODE_FONT as t } from "./codeBlockStyles.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlockHighlighter.js","sources":["../../src/components/CodeBlockHighlighter.tsx"],"sourcesContent":["import type React from 'react';\nimport { PrismLight, createElement } from 'react-syntax-highlighter';\nimport yaml from '
|
|
1
|
+
{"version":3,"file":"CodeBlockHighlighter.js","sources":["../../src/components/CodeBlockHighlighter.tsx"],"sourcesContent":["import type React from 'react';\nimport { PrismLight, createElement } from 'react-syntax-highlighter';\nimport yaml from 'refractor/yaml';\nimport cedar from './prismCedar';\nimport { CodeLine, type CodeLineDecoration } from './codeBlockLine';\nimport { CODE_FONT } from './codeBlockStyles';\n\n// Registered on first render rather than at import. A bare top-level call is an import-time\n// side effect, which `sideEffects: false` in package.json tells a bundler it may drop; the\n// same reason the font faces go in through ensureInterFontFace and not a top-level call.\nlet languagesRegistered = false;\n\nconst ensureLanguagesRegistered = (): void => {\n if (languagesRegistered) {\n return;\n }\n languagesRegistered = true;\n PrismLight.registerLanguage('yaml', yaml);\n PrismLight.registerLanguage('cedar', cedar);\n};\n\n// Prism token colors bound to the codeblock theme tokens so highlighting follows the theme.\nconst PRISM_MALACHITE_THEME: { [key: string]: React.CSSProperties } = {\n 'code[class*=\"language-\"]': CODE_FONT,\n 'pre[class*=\"language-\"]': CODE_FONT,\n comment: { color: 'var(--malachite-codeblock-comment)' },\n prolog: { color: 'var(--malachite-codeblock-comment)' },\n cdata: { color: 'var(--malachite-codeblock-comment)' },\n punctuation: { color: 'var(--malachite-codeblock-foreground)' },\n key: { color: 'var(--malachite-codeblock-keyword)' },\n atrule: { color: 'var(--malachite-codeblock-keyword)' },\n 'attr-name': { color: 'var(--malachite-codeblock-keyword)' },\n directive: { color: 'var(--malachite-codeblock-keyword)' },\n keyword: { color: 'var(--malachite-codeblock-keyword)' },\n property: { color: 'var(--malachite-codeblock-keyword)' },\n boolean: { color: 'var(--malachite-codeblock-keyword)' },\n important: { color: 'var(--malachite-codeblock-keyword)' },\n null: { color: 'var(--malachite-codeblock-keyword)' },\n tag: { color: 'var(--malachite-codeblock-keyword)' },\n anchor: { color: 'var(--malachite-codeblock-keyword)' },\n alias: { color: 'var(--malachite-codeblock-keyword)' },\n // Cedar's entity paths (`StackOne::Action`) are types, which is what this token is for.\n 'class-name': { color: 'var(--malachite-codeblock-type)' },\n // The scope variables. Given the one remaining distinct hue so they read as language\n // rather than as another blue keyword.\n builtin: { color: 'var(--malachite-codeblock-number)' },\n operator: { color: 'var(--malachite-codeblock-line-number)' },\n string: { color: 'var(--malachite-codeblock-string)' },\n scalar: { color: 'var(--malachite-codeblock-string)' },\n char: { color: 'var(--malachite-codeblock-string)' },\n url: { color: 'var(--malachite-codeblock-string)' },\n number: { color: 'var(--malachite-codeblock-number)' },\n datetime: { color: 'var(--malachite-codeblock-number)' },\n};\n\ntype SyntaxNode = {\n type: 'text' | 'element';\n value?: string | number;\n children?: SyntaxNode[];\n};\n\n/** Local, not the ambient `rendererProps`: that global leaks out of DefinitelyTyped by accident. */\ntype RowRendererProps = {\n rows: SyntaxNode[];\n stylesheet: { [key: string]: React.CSSProperties };\n useInlineStyles: boolean;\n};\n\n/** Prism keeps the source newline on each row's last token; `CodeLine` supplies the break now. */\nconst withoutTrailingNewline = <T extends SyntaxNode>(node: T): T => {\n if (node.type === 'text') {\n return typeof node.value === 'string' && node.value.endsWith('\\n')\n ? { ...node, value: node.value.slice(0, -1) }\n : node;\n }\n const children = node.children;\n if (!children?.length) {\n return node;\n }\n const last = children[children.length - 1];\n const trimmed = withoutTrailingNewline(last);\n return trimmed === last ? node : { ...node, children: [...children.slice(0, -1), trimmed] };\n};\n\nexport interface CodeBlockHighlighterProps {\n code: string;\n language: 'yaml' | 'cedar';\n showLineNumbers?: boolean;\n wrapLines?: boolean;\n /** Right padding reserving space for the floating copy button. */\n copyClearance?: boolean;\n /**\n * Per-line markup, by index into `code`. How a diff tints its rows and numbers them from\n * the text each line actually came from.\n */\n decorate?: (index: number) => CodeLineDecoration | undefined;\n}\n\nconst CodeBlockHighlighter: React.FC<CodeBlockHighlighterProps> = ({\n code,\n language,\n showLineNumbers = true,\n wrapLines = false,\n copyClearance = false,\n decorate,\n}) => {\n ensureLanguagesRegistered();\n\n const lines = code.split('\\n');\n\n // We lay rows out ourselves rather than passing `showLineNumbers`/`wrapLongLines` down:\n // that mode makes every line a flex container, so the Prism token spans become flex items\n // and the line shreds into out-of-order fragments.\n const renderRows = ({ rows, stylesheet, useInlineStyles }: RowRendererProps) =>\n rows.map((row, index) => {\n const decoration = decorate?.(index);\n // A decoration's own number wins: in a diff the row's position in the merged\n // text is not its line number in either of the texts it came from.\n const lineNumber = decoration?.lineNumber ?? (showLineNumbers ? index + 1 : undefined);\n\n return (\n <CodeLine\n key={index}\n line={lines[index] ?? ''}\n lineNumber={lineNumber}\n wrap={wrapLines}\n decoration={decoration}\n >\n {createElement({\n node: withoutTrailingNewline(row),\n stylesheet,\n useInlineStyles,\n key: `code-line-${index}`,\n })}\n </CodeLine>\n );\n });\n\n return (\n <PrismLight\n language={language}\n style={PRISM_MALACHITE_THEME}\n wrapLines\n renderer={renderRows}\n customStyle={{\n ...CODE_FONT,\n margin: 0,\n padding: '16px',\n paddingRight: copyClearance ? '44px' : '16px',\n overflow: 'auto',\n }}\n // The `code` element is the rows' wrapper here, so it takes the sizing the plain\n // path puts on a div of its own.\n codeTagProps={{\n style: { ...CODE_FONT, display: 'block', width: 'max-content', minWidth: '100%' },\n }}\n >\n {code}\n </PrismLight>\n );\n};\n\nexport default CodeBlockHighlighter;\n"],"names":["languagesRegistered","ensureLanguagesRegistered","PrismLight","yaml","cedar","PRISM_MALACHITE_THEME","CODE_FONT","withoutTrailingNewline","node","children","last","trimmed","CodeBlockHighlighter","code","language","showLineNumbers","wrapLines","copyClearance","decorate","lines","jsx","rows","stylesheet","useInlineStyles","row","index","decoration","lineNumber","CodeLine","createElement"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stackone/malachite",
|
|
3
|
-
"version": "2.23.
|
|
3
|
+
"version": "2.23.2",
|
|
4
4
|
"description": "StackOne's themeable React component library — Shadow DOM isolated, scoped Tailwind, theme-token driven.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "StackOne",
|
|
@@ -78,7 +78,8 @@
|
|
|
78
78
|
"@tanstack/react-virtual": "^3.14.11",
|
|
79
79
|
"@uiw/react-json-view": "^2.0.0-alpha.35",
|
|
80
80
|
"marked-react": "^3.0.0",
|
|
81
|
-
"react-syntax-highlighter": "^16.1.1"
|
|
81
|
+
"react-syntax-highlighter": "^16.1.1",
|
|
82
|
+
"refractor": "^5.0.0"
|
|
82
83
|
},
|
|
83
84
|
"scripts": {
|
|
84
85
|
"dev": "vite",
|