@cloudscape-design/code-view 3.0.97 → 3.0.99
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/code-view/highlight/index.js +1 -1
- package/code-view/highlight/index.js.map +1 -1
- package/code-view/internal.js +7 -4
- package/code-view/internal.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ export function createHighlight(rules) {
|
|
|
9
9
|
return (code) => {
|
|
10
10
|
const tokens = tokenize(code, rules);
|
|
11
11
|
return (_jsx("span", { children: tokens.map((lineTokens, lineIndex) => (_jsxs(Fragment, { children: [lineTokens.map((token, tokenIndex) => {
|
|
12
|
-
return token.className ? (_jsx("span", { className: token
|
|
12
|
+
return token.className ? (_jsx("span", { className: token.className, children: token.value }, tokenIndex)) : (token.value);
|
|
13
13
|
}), "\n"] }, lineIndex))) }));
|
|
14
14
|
};
|
|
15
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/code-view/highlight/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,wCAAwC,CAAC;AAChD,OAAO,6CAA6C,CAAC;AAIrD,MAAM,UAAU,eAAe,CAAC,KAAyB;IACvD,OAAO,CAAC,IAAY,EAAE,EAAE;QACtB,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACrC,OAAO,CACL,yBACG,MAAM,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,SAAS,EAAE,EAAE,CAAC,CACrC,MAAC,QAAQ,eACN,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE;wBACpC,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CACvB,eAAM,SAAS,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/code-view/highlight/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,wCAAwC,CAAC;AAChD,OAAO,6CAA6C,CAAC;AAIrD,MAAM,UAAU,eAAe,CAAC,KAAyB;IACvD,OAAO,CAAC,IAAY,EAAE,EAAE;QACtB,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACrC,OAAO,CACL,yBACG,MAAM,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,SAAS,EAAE,EAAE,CAAC,CACrC,MAAC,QAAQ,eACN,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE;wBACpC,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CACvB,eAAM,SAAS,EAAE,KAAK,CAAC,SAAS,YAC7B,KAAK,CAAC,KAAK,IADyB,UAAU,CAE1C,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CAAC,KAAK,CACZ,CAAC;oBACJ,CAAC,CAAC,EACD,IAAI,KAVQ,SAAS,CAWb,CACZ,CAAC,GACG,CACR,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { Fragment } from \"react\";\nimport type { Ace } from \"ace-code\";\nimport { tokenize } from \"ace-code/src/ext/simple_tokenizer\";\n\nimport \"ace-code/styles/theme/cloud_editor.css\";\nimport \"ace-code/styles/theme/cloud_editor_dark.css\";\n\ntype CreateHighlightType = (code: string) => React.ReactNode;\n\nexport function createHighlight(rules: Ace.HighlightRules): CreateHighlightType {\n return (code: string) => {\n const tokens = tokenize(code, rules);\n return (\n <span>\n {tokens.map((lineTokens, lineIndex) => (\n <Fragment key={lineIndex}>\n {lineTokens.map((token, tokenIndex) => {\n return token.className ? (\n <span className={token.className} key={tokenIndex}>\n {token.value}\n </span>\n ) : (\n token.value\n );\n })}\n {\"\\n\"}\n </Fragment>\n ))}\n </span>\n );\n };\n}\n"]}
|
package/code-view/internal.js
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
-
import { Children, createElement, Fragment, useRef } from "react";
|
|
4
|
+
import { Children, createElement, Fragment, useMemo, useRef } from "react";
|
|
5
5
|
import clsx from "clsx";
|
|
6
6
|
import { useCurrentMode } from "@cloudscape-design/component-toolkit/internal";
|
|
7
7
|
import Box from "@cloudscape-design/components/box";
|
|
8
8
|
import { getBaseProps } from "../internal/base-component/use-base-component";
|
|
9
9
|
import styles from "./styles.css.js";
|
|
10
10
|
const ACE_CLASSES = { light: "ace-cloud_editor", dark: "ace-cloud_editor_dark" };
|
|
11
|
+
// Static props objects to avoid recreation on every render.
|
|
12
|
+
const REGION_PROPS = { role: "region" };
|
|
13
|
+
const NO_REGION_PROPS = {};
|
|
11
14
|
// Breaks down the input code for non-highlighted code-view into React
|
|
12
15
|
// Elements similar to how a highlight function would do.
|
|
13
16
|
const textHighlight = (code) => {
|
|
@@ -18,10 +21,10 @@ export function InternalCodeView({ content, actions, lineNumbers, wrapLines, hig
|
|
|
18
21
|
const baseProps = getBaseProps(props);
|
|
19
22
|
const containerRef = useRef(null);
|
|
20
23
|
const darkMode = useCurrentMode(containerRef) === "dark";
|
|
21
|
-
const regionProps = ariaLabel || ariaLabelledby ?
|
|
24
|
+
const regionProps = ariaLabel || ariaLabelledby ? REGION_PROPS : NO_REGION_PROPS;
|
|
22
25
|
const accessibleLineNumbers = lineNumbers && (i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.lineNumberLabel) && (i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.codeLabel);
|
|
23
|
-
//
|
|
24
|
-
const code = highlight ? highlight(content) : textHighlight(content);
|
|
26
|
+
// Memoize tokenized React nodes to avoid re-running highlight on every render.
|
|
27
|
+
const code = useMemo(() => (highlight ? highlight(content) : textHighlight(content)), [content, highlight]);
|
|
25
28
|
// Create elements from the nodes.
|
|
26
29
|
const codeElementWrapper = createElement(Fragment, null, code);
|
|
27
30
|
const codeElement = Children.only(codeElementWrapper.props.children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/code-view/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAgB,MAAM,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/code-view/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { Children, createElement, Fragment, ReactElement, useMemo, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useCurrentMode } from \"@cloudscape-design/component-toolkit/internal\";\nimport Box from \"@cloudscape-design/components/box\";\n\nimport { getBaseProps, InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport { CodeViewProps } from \"./interfaces\";\n\nimport styles from \"./styles.css.js\";\n\nconst ACE_CLASSES = { light: \"ace-cloud_editor\", dark: \"ace-cloud_editor_dark\" };\n\n// Static props objects to avoid recreation on every render.\nconst REGION_PROPS = { role: \"region\" } as const;\nconst NO_REGION_PROPS = {} as const;\n\ntype InternalCodeViewProps = CodeViewProps & InternalBaseComponentProps;\n\n// Breaks down the input code for non-highlighted code-view into React\n// Elements similar to how a highlight function would do.\nconst textHighlight = (code: string) => {\n const lines = code.split(\"\\n\");\n return (\n <span>\n {lines.map((line, lineIndex) => (\n <span key={lineIndex}>\n {line}\n {\"\\n\"}\n </span>\n ))}\n </span>\n );\n};\n\nexport function InternalCodeView({\n content,\n actions,\n lineNumbers,\n wrapLines,\n highlight,\n ariaLabel,\n ariaLabelledby,\n i18nStrings,\n __internalRootRef = null,\n ...props\n}: InternalCodeViewProps) {\n const baseProps = getBaseProps(props);\n const containerRef = useRef<HTMLDivElement>(null);\n const darkMode = useCurrentMode(containerRef) === \"dark\";\n\n const regionProps = ariaLabel || ariaLabelledby ? REGION_PROPS : NO_REGION_PROPS;\n const accessibleLineNumbers = lineNumbers && i18nStrings?.lineNumberLabel && i18nStrings?.codeLabel;\n\n // Memoize tokenized React nodes to avoid re-running highlight on every render.\n const code = useMemo(() => (highlight ? highlight(content) : textHighlight(content)), [content, highlight]);\n // Create elements from the nodes.\n const codeElementWrapper: ReactElement = createElement(Fragment, null, code);\n const codeElement = Children.only(codeElementWrapper.props.children);\n\n return (\n <div\n className={clsx(darkMode ? ACE_CLASSES.dark : ACE_CLASSES.light, styles.root)}\n {...regionProps}\n {...baseProps}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n dir=\"ltr\"\n ref={__internalRootRef}\n >\n <div className={styles[\"scroll-container\"]} ref={containerRef}>\n <table\n role={!accessibleLineNumbers ? \"presentation\" : undefined}\n className={clsx(\n styles[\"code-table\"],\n actions && styles[\"code-table-with-actions\"],\n wrapLines && styles[\"code-table-with-line-wrapping\"],\n )}\n >\n <colgroup>\n <col style={{ width: 1 } /* shrink to fit content */} />\n <col style={{ width: \"auto\" }} />\n </colgroup>\n {accessibleLineNumbers && (\n <thead className={styles[\"screenreader-only\"]}>\n <tr>\n {lineNumbers && <th>{i18nStrings.lineNumberLabel}</th>}\n <th>{i18nStrings.codeLabel}</th>\n </tr>\n </thead>\n )}\n <tbody>\n {Children.map(codeElement.props.children, (child, index) => {\n return (\n <tr key={index}>\n {lineNumbers && (\n <td\n className={clsx(styles[\"line-number\"], styles.unselectable)}\n aria-hidden={!accessibleLineNumbers}\n >\n <Box variant=\"code\" color=\"text-status-inactive\" fontSize=\"body-m\">\n {index + 1}\n </Box>\n </td>\n )}\n <td className={styles[\"code-line\"]}>\n <Box variant=\"code\" fontSize=\"body-m\">\n <span\n className={clsx(\n codeElement.props.className,\n wrapLines ? styles[\"code-line-wrap\"] : styles[\"code-line-nowrap\"],\n )}\n >\n {child}\n </span>\n </Box>\n </td>\n </tr>\n );\n })}\n </tbody>\n </table>\n </div>\n {actions && <div className={styles.actions}>{actions}</div>}\n </div>\n );\n}\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED