@apify/ui-library 0.65.2 → 0.65.3-featuresyntaxhighlighter-48cb44.36
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/src/components/code/code_block/code_block.d.ts.map +1 -1
- package/dist/src/components/code/code_block/code_block.js +14 -20
- package/dist/src/components/code/code_block/code_block.js.map +1 -1
- package/dist/src/components/code/code_block/code_block.styled.d.ts +8 -2
- package/dist/src/components/code/code_block/code_block.styled.d.ts.map +1 -1
- package/dist/src/components/code/code_block/code_block.styled.js +14 -68
- package/dist/src/components/code/code_block/code_block.styled.js.map +1 -1
- package/dist/src/components/code/code_block/utils.d.ts +5 -1
- package/dist/src/components/code/code_block/utils.d.ts.map +1 -1
- package/dist/src/components/code/code_block/utils.js +23 -12
- package/dist/src/components/code/code_block/utils.js.map +1 -1
- package/dist/src/components/code/index.d.ts +1 -0
- package/dist/src/components/code/index.d.ts.map +1 -1
- package/dist/src/components/code/index.js +1 -0
- package/dist/src/components/code/index.js.map +1 -1
- package/dist/src/components/code/one_line_code/one_line_code.d.ts.map +1 -1
- package/dist/src/components/code/one_line_code/one_line_code.js +5 -23
- package/dist/src/components/code/one_line_code/one_line_code.js.map +1 -1
- package/dist/src/components/code/prism_highlighter.d.ts +13 -0
- package/dist/src/components/code/prism_highlighter.d.ts.map +1 -0
- package/dist/src/components/code/prism_highlighter.js +116 -0
- package/dist/src/components/code/prism_highlighter.js.map +1 -0
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/src/components/code/code_block/code_block.styled.tsx +21 -69
- package/src/components/code/code_block/code_block.tsx +25 -36
- package/src/components/code/code_block/utils.tsx +50 -0
- package/src/components/code/index.ts +1 -0
- package/src/components/code/one_line_code/one_line_code.tsx +9 -28
- package/src/components/code/prism_highlighter.tsx +178 -0
- package/dist/src/components/code/syntax_highlighter.d.ts +0 -15
- package/dist/src/components/code/syntax_highlighter.d.ts.map +0 -1
- package/dist/src/components/code/syntax_highlighter.js +0 -103
- package/dist/src/components/code/syntax_highlighter.js.map +0 -1
- package/src/components/code/code_block/utils.ts +0 -19
- package/src/components/code/syntax_highlighter.tsx +0 -134
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"syntax_highlighter.js","sourceRoot":"","sources":["../../../../src/components/code/syntax_highlighter.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
// input: [2, 4, 5, 6, 8, 10, 11, 12]
|
|
2
|
-
// returns string indicating what type of line it is (bashStartCommand, bashCommand, bashEmptyLine)
|
|
3
|
-
// commands start -> bashStartCommand
|
|
4
|
-
// every next line after command start until next command start or empty line -> bashCommand
|
|
5
|
-
// empty line or comment -> bashEmptyLine
|
|
6
|
-
export const mapPrefixToBashLine = (code: string, bashCommandsStart: number[] = []) => {
|
|
7
|
-
const lines = code.split('\n').map((line) => line.trim());
|
|
8
|
-
|
|
9
|
-
// by default each line that is not empty or comment is a command start
|
|
10
|
-
if (bashCommandsStart.length === 0) {
|
|
11
|
-
return lines.map((line) => ((line.startsWith('#') || !line) ? 'bashEmptyLine' : 'bashStartCommand'));
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
return lines.map((line, i) => {
|
|
15
|
-
if (bashCommandsStart.includes(i + 1)) return 'bashStartCommand';
|
|
16
|
-
if (line.startsWith('#') || !line) return 'bashEmptyLine';
|
|
17
|
-
return 'bashCommand';
|
|
18
|
-
});
|
|
19
|
-
};
|
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
// https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/228
|
|
4
|
-
import type { SyntaxHighlighterProps as ReactSyntaxHighlighterProps } from 'react-syntax-highlighter';
|
|
5
|
-
// @ts-ignore The library is badly typed and does not export the type
|
|
6
|
-
import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash.js';
|
|
7
|
-
// @ts-ignore The library is badly typed and does not export the type
|
|
8
|
-
import dockerFile from 'react-syntax-highlighter/dist/esm/languages/prism/docker.js';
|
|
9
|
-
// @ts-ignore The library is badly typed and does not export the type
|
|
10
|
-
import http from 'react-syntax-highlighter/dist/esm/languages/prism/http.js';
|
|
11
|
-
// @ts-ignore The library is badly typed and does not export the type
|
|
12
|
-
import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript.js';
|
|
13
|
-
// @ts-ignore The library is badly typed and does not export the type
|
|
14
|
-
import json from 'react-syntax-highlighter/dist/esm/languages/prism/json.js';
|
|
15
|
-
// @ts-ignore The library is badly typed and does not export the type
|
|
16
|
-
import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup.js';
|
|
17
|
-
// @ts-ignore The library is badly typed and does not export the type
|
|
18
|
-
import python from 'react-syntax-highlighter/dist/esm/languages/prism/python.js';
|
|
19
|
-
// @ts-ignore The library is badly typed and does not export the type
|
|
20
|
-
import ts from 'react-syntax-highlighter/dist/esm/languages/prism/typescript.js';
|
|
21
|
-
// @ts-ignore The library is badly typed and does not export the type
|
|
22
|
-
import xml from 'react-syntax-highlighter/dist/esm/languages/prism/xml-doc.js';
|
|
23
|
-
// @ts-ignore The library is badly typed and does not export the type
|
|
24
|
-
import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml.js';
|
|
25
|
-
// @ts-ignore The library is badly typed and does not export the type
|
|
26
|
-
import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light.js';
|
|
27
|
-
// @ts-ignore The library is badly typed and does not export the type
|
|
28
|
-
import dark from 'react-syntax-highlighter/dist/esm/styles/prism/night-owl.js';
|
|
29
|
-
// @ts-ignore The library is badly typed and does not export the type
|
|
30
|
-
import light from 'react-syntax-highlighter/dist/esm/styles/prism/prism.js';
|
|
31
|
-
/* tslint:enable */
|
|
32
|
-
import styled, { css } from 'styled-components';
|
|
33
|
-
|
|
34
|
-
import { theme } from '../../design_system/theme.js';
|
|
35
|
-
import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
|
|
36
|
-
import { Box } from '../box.js';
|
|
37
|
-
import { type SharedTextProps, Text } from '../text/index.js';
|
|
38
|
-
import type { SharedTextSize } from '../text/text_shared.js';
|
|
39
|
-
|
|
40
|
-
ReactSyntaxHighlighter.registerLanguage('typescript', ts);
|
|
41
|
-
ReactSyntaxHighlighter.registerLanguage('javascript', js);
|
|
42
|
-
ReactSyntaxHighlighter.registerLanguage('json', json);
|
|
43
|
-
ReactSyntaxHighlighter.registerLanguage('bash', bash);
|
|
44
|
-
ReactSyntaxHighlighter.registerLanguage('docker', dockerFile);
|
|
45
|
-
ReactSyntaxHighlighter.registerLanguage('html', html);
|
|
46
|
-
ReactSyntaxHighlighter.registerLanguage('xml', xml);
|
|
47
|
-
ReactSyntaxHighlighter.registerLanguage('yaml', yaml);
|
|
48
|
-
ReactSyntaxHighlighter.registerLanguage('python', python);
|
|
49
|
-
ReactSyntaxHighlighter.registerLanguage('http', http);
|
|
50
|
-
ReactSyntaxHighlighter.registerLanguage('jsonp', json);
|
|
51
|
-
ReactSyntaxHighlighter.registerLanguage('jsonl', json);
|
|
52
|
-
ReactSyntaxHighlighter.registerLanguage('rss', xml);
|
|
53
|
-
|
|
54
|
-
const StyledPre = styled(Text)`
|
|
55
|
-
width: 100%;
|
|
56
|
-
position: relative;
|
|
57
|
-
|
|
58
|
-
*,
|
|
59
|
-
*::before,
|
|
60
|
-
*::after {
|
|
61
|
-
text-shadow: none !important;
|
|
62
|
-
font-style: normal !important;
|
|
63
|
-
font-family: inherit !important;
|
|
64
|
-
font-size: inherit !important;
|
|
65
|
-
font-weight: inherit !important;
|
|
66
|
-
line-height: inherit !important;
|
|
67
|
-
background-color: transparent !important;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
code {
|
|
71
|
-
min-width: 100%;
|
|
72
|
-
display: inline-block;
|
|
73
|
-
vertical-align: middle;
|
|
74
|
-
overflow: hidden;
|
|
75
|
-
}
|
|
76
|
-
`;
|
|
77
|
-
|
|
78
|
-
// Syntax highlighter uses inline style a lot which makes it hard to override them. To do so, we make the library not
|
|
79
|
-
// use styles that we wish to set on our own (font-based styles, spacing, background, ...),
|
|
80
|
-
const inlineCssReset = {
|
|
81
|
-
fontFamily: undefined,
|
|
82
|
-
fontSize: undefined,
|
|
83
|
-
fontWeight: undefined,
|
|
84
|
-
lineHeight: undefined,
|
|
85
|
-
background: undefined,
|
|
86
|
-
margin: undefined,
|
|
87
|
-
padding: undefined,
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
type SyntaxHighlighterProps = ReactSyntaxHighlighterProps & { size: SharedTextSize };
|
|
91
|
-
|
|
92
|
-
export const SyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlighterProps>(({
|
|
93
|
-
size,
|
|
94
|
-
children,
|
|
95
|
-
...rest
|
|
96
|
-
}, ref) => {
|
|
97
|
-
const { uiTheme } = useSharedUiDependencies();
|
|
98
|
-
|
|
99
|
-
const PreTag = (preProps: ReactSyntaxHighlighterProps) => {
|
|
100
|
-
return <StyledPre {...preProps} size={size} forwardedAs='pre' type='code' ref={ref}/>;
|
|
101
|
-
};
|
|
102
|
-
|
|
103
|
-
return (
|
|
104
|
-
<ReactSyntaxHighlighter
|
|
105
|
-
PreTag={PreTag}
|
|
106
|
-
customStyle={inlineCssReset}
|
|
107
|
-
className="CodePre"
|
|
108
|
-
style={uiTheme === 'DARK' ? dark : light}
|
|
109
|
-
{...rest}
|
|
110
|
-
>
|
|
111
|
-
{children}
|
|
112
|
-
</ReactSyntaxHighlighter>
|
|
113
|
-
);
|
|
114
|
-
});
|
|
115
|
-
|
|
116
|
-
export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
|
|
117
|
-
$fullWidth?: boolean;
|
|
118
|
-
$fullHeight?: string;
|
|
119
|
-
$showLineNumbers?: boolean;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
export const SyntaxHighlighterBaseStylesWrapper = styled(Box)<SyntaxHighlighterBaseStylesWrapperProps>`
|
|
123
|
-
background-color: ${theme.color.neutral.backgroundMuted} !important;
|
|
124
|
-
border: 1px solid ${theme.color.neutral.border};
|
|
125
|
-
border-radius: ${theme.radius.radius12};
|
|
126
|
-
overflow: hidden;
|
|
127
|
-
|
|
128
|
-
width: 100%;
|
|
129
|
-
${({ $fullWidth }) => !$fullWidth && css`max-width: 860px;`}
|
|
130
|
-
${({ $fullHeight }) => !$fullHeight && css`max-height: 600px;`}
|
|
131
|
-
|
|
132
|
-
background-color: transparent;
|
|
133
|
-
position: relative;
|
|
134
|
-
`;
|