@chayns-components/core 5.0.0-beta.329 → 5.0.0-beta.332
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/lib/components/code-highlighter/CodeHighlighter.d.ts +5 -0
- package/lib/components/code-highlighter/CodeHighlighter.js +9 -2
- package/lib/components/code-highlighter/CodeHighlighter.js.map +1 -1
- package/lib/types/prettier-parser-babel.d.js +2 -0
- package/lib/types/prettier-parser-babel.d.js.map +1 -0
- package/package.json +4 -2
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { Options } from 'prettier';
|
|
1
2
|
import { FC } from 'react';
|
|
2
3
|
import { CodeHighlighterLanguage, CodeHighlighterTheme, HighlightedLines } from '../../types/codeHighlighter';
|
|
3
4
|
export type CodeHighlighterProps = {
|
|
@@ -10,6 +11,10 @@ export type CodeHighlighterProps = {
|
|
|
10
11
|
* If not set, just the button is displayed without text.
|
|
11
12
|
*/
|
|
12
13
|
copyButtonText?: string;
|
|
14
|
+
/**
|
|
15
|
+
* A config to format the code with "prettier".
|
|
16
|
+
*/
|
|
17
|
+
formatConfig?: Options;
|
|
13
18
|
/**
|
|
14
19
|
* The lines of code that should be highlighted.
|
|
15
20
|
* Following lines can be highlighted: added, removed and just marked.
|
|
@@ -4,20 +4,27 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
var _parserBabel = _interopRequireDefault(require("prettier/parser-babel"));
|
|
8
|
+
var _standalone = require("prettier/standalone");
|
|
7
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
10
|
var _reactSyntaxHighlighter = require("react-syntax-highlighter");
|
|
9
11
|
var _prism = require("react-syntax-highlighter/dist/esm/styles/prism");
|
|
10
12
|
var _codeHighlighter = require("../../types/codeHighlighter");
|
|
11
13
|
var _CodeHighlighter = require("./CodeHighlighter.styles");
|
|
12
14
|
var _CopyToClipboard = _interopRequireDefault(require("./copy-to-clipboard/CopyToClipboard"));
|
|
13
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
16
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
17
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
+
const prettierOptions = {
|
|
19
|
+
parser: 'babel',
|
|
20
|
+
plugins: [_parserBabel.default]
|
|
21
|
+
};
|
|
16
22
|
const CodeHighlighter = _ref => {
|
|
17
23
|
let {
|
|
18
24
|
theme = _codeHighlighter.CodeHighlighterTheme.Dark,
|
|
19
25
|
code,
|
|
20
26
|
copyButtonText,
|
|
27
|
+
formatConfig = prettierOptions,
|
|
21
28
|
language,
|
|
22
29
|
highlightedLines,
|
|
23
30
|
shouldShowLineNumbers = false
|
|
@@ -65,7 +72,7 @@ const CodeHighlighter = _ref => {
|
|
|
65
72
|
style: theme === _codeHighlighter.CodeHighlighterTheme.Dark ? _prism.oneDark : _prism.oneLight,
|
|
66
73
|
wrapLines: true,
|
|
67
74
|
lineProps: lineWrapper
|
|
68
|
-
}, code)), [theme, language, code, copyButtonText, shouldShowLineNumbers, lineWrapper]);
|
|
75
|
+
}, (0, _standalone.format)(code, formatConfig))), [theme, language, code, copyButtonText, shouldShowLineNumbers, lineWrapper, formatConfig]);
|
|
69
76
|
};
|
|
70
77
|
CodeHighlighter.displayName = 'CodeHighlighter';
|
|
71
78
|
var _default = exports.default = CodeHighlighter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlighter.js","names":["
|
|
1
|
+
{"version":3,"file":"CodeHighlighter.js","names":["_parserBabel","_interopRequireDefault","require","_standalone","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_codeHighlighter","_CodeHighlighter","_CopyToClipboard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","prettierOptions","parser","plugins","parserBabel","CodeHighlighter","_ref","theme","CodeHighlighterTheme","Dark","code","copyButtonText","formatConfig","language","highlightedLines","shouldShowLineNumbers","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","useMemo","createElement","StyledCodeHighlighter","codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","text","PrismAsyncLight","showLineNumbers","oneDark","oneLight","wrapLines","lineProps","format","displayName","_default","exports"],"sources":["../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import type { Options } from 'prettier';\nimport parserBabel from 'prettier/parser-babel';\nimport { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useMemo } from 'react';\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport {\n CodeHighlighterLanguage,\n CodeHighlighterTheme,\n HighlightedLines,\n} from '../../types/codeHighlighter';\nimport {\n StyledCodeHighlighter,\n StyledCodeHighlighterFileName,\n StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\nconst prettierOptions: Options = {\n parser: 'babel',\n plugins: [parserBabel],\n};\n\nexport type CodeHighlighterProps = {\n /**\n * The code that should be displayed.\n */\n code: string;\n /**\n * The text that should be displayed after the copy button.\n * If not set, just the button is displayed without text.\n */\n copyButtonText?: string;\n /**\n * A config to format the code with \"prettier\".\n */\n formatConfig?: Options;\n /**\n * The lines of code that should be highlighted.\n * Following lines can be highlighted: added, removed and just marked.\n */\n highlightedLines?: HighlightedLines;\n /**\n * The language of the displayed code.\n */\n language: CodeHighlighterLanguage;\n /**\n * Whether the line numbers should be displayed.\n */\n shouldShowLineNumbers?: boolean;\n /**\n * The theme of the code block. Decide between dark and light.\n */\n theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n theme = CodeHighlighterTheme.Dark,\n code,\n copyButtonText,\n formatConfig = prettierOptions,\n language,\n highlightedLines,\n shouldShowLineNumbers = false,\n}) => {\n // function to style highlighted code\n const lineWrapper = useCallback(\n (lineNumber: number) => {\n let style = {\n backgroundColor: 'none',\n display: 'block',\n borderRadius: '2px',\n };\n\n if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#2EF29930' };\n } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#F22E5B30' };\n } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n style = { ...style, backgroundColor: '#cccccc40' };\n }\n\n return { style };\n },\n [highlightedLines],\n );\n\n return useMemo(\n () => (\n <StyledCodeHighlighter codeTheme={theme}>\n <StyledCodeHighlighterHeader codeTheme={theme}>\n <StyledCodeHighlighterFileName codeTheme={theme}>\n {language}\n </StyledCodeHighlighterFileName>\n <CopyToClipboard text={code} theme={theme} copyButtonText={copyButtonText} />\n </StyledCodeHighlighterHeader>\n <SyntaxHighlighter\n language={language}\n showLineNumbers={shouldShowLineNumbers}\n style={theme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n wrapLines\n lineProps={lineWrapper}\n >\n {format(code, formatConfig) as unknown as string}\n </SyntaxHighlighter>\n </StyledCodeHighlighter>\n ),\n [theme, language, code, copyButtonText, shouldShowLineNumbers, lineWrapper, formatConfig],\n );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prettier-parser-babel.d.js","names":[],"sources":["../../src/types/prettier-parser-babel.d.ts"],"sourcesContent":["declare module 'prettier/parser-babel' {\n import { Plugin } from 'prettier';\n\n const parser: Plugin;\n export default parser;\n}\n"],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.332",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -53,10 +53,12 @@
|
|
|
53
53
|
"@chayns/colors": "^2.0.0",
|
|
54
54
|
"@chayns/uac-service": "^0.0.46",
|
|
55
55
|
"@types/react-syntax-highlighter": "^15.5.10",
|
|
56
|
+
"babel-prettier-parser": "^0.10.8",
|
|
56
57
|
"chayns-api": "^1.0.40",
|
|
57
58
|
"clsx": "^2.0.0",
|
|
58
59
|
"date-fns": "^2.30.0",
|
|
59
60
|
"framer-motion": "^10.16.5",
|
|
61
|
+
"prettier": "^2.8.8",
|
|
60
62
|
"react-syntax-highlighter": "^15.5.0",
|
|
61
63
|
"uuid": "^9.0.1"
|
|
62
64
|
},
|
|
@@ -68,5 +70,5 @@
|
|
|
68
70
|
"publishConfig": {
|
|
69
71
|
"access": "public"
|
|
70
72
|
},
|
|
71
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "ae08b3be4585522c6b26e2842772bf6983d98a30"
|
|
72
74
|
}
|