diff --git a/jest.config.js b/jest.config.js index 1aa781a63..4e0106591 100644 --- a/jest.config.js +++ b/jest.config.js @@ -7,7 +7,7 @@ module.exports = { collectCoverage: true, // most of these are to fix https://github.com/remarkjs/react-markdown/issues/635 transformIgnorePatterns: [ - 'node_modules/(?!@patternfly|@data-driven-forms|react-syntax-highlighter|remark-gfm|react-markdown|remark-parse|devlop|hast-util-to-jsx-runtime|comma-separated-tokens|estree-util-is-identifier-name|hast-util-whitespace|property-information|space-separated-tokens|unist-util-position|vfile-message|unist-util-stringify-position|html-url-attributes|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|trim-lines|unist-util-visit|unist-util-is|unified|bail|is-plain-obj|trough|vfile|mdast-util-gfm|ccount|mdast-util-find-and-replace|escape-string-regexp|markdown-table|mdast-util-to-markdown|zwitch|longest-streak|mdast-util-phrasing)' + 'node_modules/(?!@patternfly|@data-driven-forms|remark-gfm|react-markdown|remark-parse|devlop|hast-util-to-jsx-runtime|comma-separated-tokens|estree-util-is-identifier-name|hast-util-whitespace|property-information|space-separated-tokens|unist-util-position|vfile-message|unist-util-stringify-position|html-url-attributes|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|trim-lines|unist-util-visit|unist-util-is|unified|bail|is-plain-obj|trough|vfile|mdast-util-gfm|ccount|mdast-util-find-and-replace|escape-string-regexp|markdown-table|mdast-util-to-markdown|zwitch|longest-streak|mdast-util-phrasing)' // Uncomment the below line if you face any errors with jest // '/node_modules/(?!@redhat-cloud-services)', ], diff --git a/package-lock.json b/package-lock.json index b50895d7b..561f1ca3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1970,6 +1970,7 @@ "version": "7.23.8", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz", "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==", + "dev": true, "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -7602,6 +7603,7 @@ "version": "1.2.4", "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz", "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==", + "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -7621,6 +7623,7 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", + "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -7630,6 +7633,7 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz", "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==", + "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -8355,6 +8359,7 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz", "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==", + "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -12061,6 +12066,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz", "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==", + "dev": true, "dependencies": { "format": "^0.2.0" }, @@ -12500,6 +12506,7 @@ "version": "0.2.2", "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==", + "dev": true, "engines": { "node": ">=0.4.x" } @@ -13372,15 +13379,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/hast-util-parse-selector": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz", - "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, "node_modules/hast-util-sanitize": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/hast-util-sanitize/-/hast-util-sanitize-5.0.2.tgz", @@ -13555,30 +13553,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/hastscript": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz", - "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==", - "dependencies": { - "@types/hast": "^2.0.0", - "comma-separated-tokens": "^1.0.0", - "hast-util-parse-selector": "^2.0.0", - "property-information": "^5.0.0", - "space-separated-tokens": "^1.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "node_modules/hastscript/node_modules/@types/hast": { - "version": "2.3.10", - "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz", - "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==", - "dependencies": { - "@types/unist": "^2" - } - }, "node_modules/he": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", @@ -13588,14 +13562,6 @@ "he": "bin/he" } }, - "node_modules/highlight.js": { - "version": "10.7.3", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", - "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", - "engines": { - "node": "*" - } - }, "node_modules/homedir-polyfill": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz", @@ -14237,6 +14203,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz", "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==", + "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -14255,6 +14222,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz", "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==", + "dev": true, "dependencies": { "is-alphabetical": "^1.0.0", "is-decimal": "^1.0.0" @@ -14441,6 +14409,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz", "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==", + "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -14546,6 +14515,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz", "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==", + "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -17862,19 +17832,6 @@ "node": ">=0.10.0" } }, - "node_modules/lowlight": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz", - "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==", - "dependencies": { - "fault": "^1.0.0", - "highlight.js": "~10.7.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -20868,6 +20825,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz", "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==", + "dev": true, "dependencies": { "character-entities": "^1.0.0", "character-entities-legacy": "^1.0.0", @@ -21439,14 +21397,6 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, - "node_modules/prismjs": { - "version": "1.29.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", - "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", - "engines": { - "node": ">=6" - } - }, "node_modules/process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -21517,6 +21467,7 @@ "version": "5.6.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz", "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==", + "dev": true, "dependencies": { "xtend": "^4.0.0" }, @@ -22228,21 +22179,6 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/react-syntax-highlighter": { - "version": "15.5.0", - "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz", - "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==", - "dependencies": { - "@babel/runtime": "^7.3.1", - "highlight.js": "^10.4.1", - "lowlight": "^1.17.0", - "prismjs": "^1.27.0", - "refractor": "^3.6.0" - }, - "peerDependencies": { - "react": ">= 0.14.0" - } - }, "node_modules/read": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/read/-/read-1.0.5.tgz", @@ -22331,28 +22267,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/refractor": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz", - "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==", - "dependencies": { - "hastscript": "^6.0.0", - "parse-entities": "^2.0.0", - "prismjs": "~1.27.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, - "node_modules/refractor/node_modules/prismjs": { - "version": "1.27.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", - "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==", - "engines": { - "node": ">=6" - } - }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -22374,7 +22288,8 @@ "node_modules/regenerator-runtime": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", - "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", + "dev": true }, "node_modules/regenerator-transform": { "version": "0.15.2", @@ -24517,6 +24432,7 @@ "version": "1.1.5", "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz", "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==", + "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -28287,6 +28203,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", + "dev": true, "engines": { "node": ">=0.4" } @@ -28417,7 +28334,6 @@ "path-browserify": "^1.0.1", "posthog-js": "^1.194.4", "react-markdown": "^9.0.1", - "react-syntax-highlighter": "^15.5.0", "rehype-external-links": "^3.0.0", "rehype-sanitize": "^6.0.0", "rehype-unwrap-images": "^1.0.0", diff --git a/packages/module/package.json b/packages/module/package.json index d9dff015f..1402e0254 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -40,7 +40,6 @@ "clsx": "^2.1.0", "framer-motion": "^11.3.28", "react-markdown": "^9.0.1", - "react-syntax-highlighter": "^15.5.0", "remark-gfm": "^4.0.0", "rehype-unwrap-images": "^1.0.0", "rehype-external-links": "^3.0.0", diff --git a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx index ba2122257..ee301d30c 100644 --- a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx +++ b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx @@ -2,8 +2,6 @@ // Chatbot Main - Message - Content - Code Block // ============================================================================ import { useState, useRef, useId, useCallback, useEffect } from 'react'; -import SyntaxHighlighter from 'react-syntax-highlighter'; -import { obsidian } from 'react-syntax-highlighter/dist/esm/styles/hljs'; // Import PatternFly components import { CodeBlock, @@ -20,7 +18,6 @@ import { import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon'; import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon'; -import { ExpandableSectionForSyntaxHighlighter } from './ExpandableSectionForSyntaxHighlighter'; export interface CodeBlockMessageProps { /** Content rendered in code block */ @@ -137,30 +134,7 @@ const CodeBlockMessage = ({ <> - {language ? ( - // SyntaxHighlighter doesn't work with ExpandableSection because it targets the direct child - // Forked for now and adjusted to match what we need - - - {String(children).replace(/\n$/, '')} - - - ) : ( + {isExpandable ? ( {children} + ) : ( + children )} diff --git a/packages/module/src/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.tsx b/packages/module/src/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.tsx deleted file mode 100644 index 9c9850ff0..000000000 --- a/packages/module/src/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.tsx +++ /dev/null @@ -1,223 +0,0 @@ -import { Component, createRef } from 'react'; -import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section'; -import { css } from '@patternfly/react-styles'; -import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp'; -import { debounce, getResizeObserver, getUniqueId, PickOptional } from '@patternfly/react-core'; - -export enum ExpandableSectionVariant { - default = 'default', - truncate = 'truncate' -} - -/** The main expandable section component. */ - -export interface ExpandableSectionProps extends Omit, 'onToggle'> { - /** Content rendered inside the expandable section. */ - children?: React.ReactNode; - /** Additional classes added to the expandable section. */ - className?: string; - /** Id of the content of the expandable section. When passing in the isDetached property, this - * property's value should match the contentId property of the expandable section toggle sub-component. - */ - contentId?: string; - /** Id of the toggle of the expandable section, which provides an accessible name to the - * expandable section content via the aria-labelledby attribute. When the isDetached property - * is also passed in, the value of this property must match the toggleId property of the - * expandable section toggle sub-component. - */ - toggleId?: string; - /** Display size variant. Set to "lg" for disclosure styling. */ - displaySize?: 'default' | 'lg'; - /** Indicates the expandable section has a detached toggle. */ - isDetached?: boolean; - /** Flag to indicate if the content is expanded. */ - isExpanded?: boolean; - /** Flag to indicate if the content is indented. */ - isIndented?: boolean; - /** Flag to indicate the width of the component is limited. Set to "true" for disclosure styling. */ - isWidthLimited?: boolean; - /** Truncates the expandable content to the specified number of lines when using the - * "truncate" variant. - */ - truncateMaxLines?: number; - /** Determines the variant of the expandable section. When passing in "truncate" as the - * variant, the expandable content will be truncated after 3 lines by default. - */ - variant?: 'default' | 'truncate'; - language?: string; -} - -interface ExpandableSectionState { - isExpanded: boolean; - hasToggle: boolean; - previousWidth: number | undefined; -} - -const setLineClamp = (element: HTMLDivElement | null, lines?: number, language?: string, isExpanded?: boolean) => { - if (!element || !lines || lines < 1 || typeof isExpanded === 'undefined') { - return; - } - - if (language) { - const selector = `.language-${language.toLowerCase()}`; - const childElement = element.querySelector(selector) as HTMLDivElement; - - if (!childElement) { - return; - } - if (isExpanded) { - // Reset all truncation-related styles to their default values - childElement.style.removeProperty('-webkit-line-clamp'); - childElement.style.removeProperty('display'); - childElement.style.removeProperty('-webkit-box-orient'); - childElement.style.removeProperty('overflow'); - } else { - childElement.style.setProperty('-webkit-line-clamp', lines.toString()); - childElement.style.setProperty('display', '-webkit-box'); - childElement.style.setProperty('-webkit-box-orient', 'vertical'); - childElement.style.setProperty('overflow', 'hidden'); - } - } -}; - -class ExpandableSectionForSyntaxHighlighter extends Component { - static displayName = 'ExpandableSection'; - constructor(props: ExpandableSectionProps) { - super(props); - - this.state = { - isExpanded: props.isExpanded ?? false, - hasToggle: true, - previousWidth: undefined - }; - } - - expandableContentRef = createRef(); - /* eslint-disable-next-line */ - observer: any = () => {}; - - static defaultProps: PickOptional = { - className: '', - isDetached: false, - displaySize: 'default', - isWidthLimited: false, - isIndented: false, - variant: 'default' - }; - - componentDidMount() { - if (this.props.variant === ExpandableSectionVariant.truncate) { - const expandableContent = this.expandableContentRef.current; - if (expandableContent) { - this.setState({ previousWidth: expandableContent.offsetWidth }); - this.observer = getResizeObserver(expandableContent, this.handleResize, false); - - if (this.props.truncateMaxLines) { - setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.state.isExpanded); - } - } - - this.checkToggleVisibility(); - } - } - - componentDidUpdate(prevProps: ExpandableSectionProps) { - if ( - this.props.variant === ExpandableSectionVariant.truncate && - (prevProps.truncateMaxLines !== this.props.truncateMaxLines || - prevProps.children !== this.props.children || - prevProps.isExpanded !== this.props.isExpanded) - ) { - const expandableContent = this.expandableContentRef.current; - setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.props.isExpanded); - this.checkToggleVisibility(); - } - } - - componentWillUnmount() { - if (this.props.variant === ExpandableSectionVariant.truncate) { - this.observer(); - } - } - - checkToggleVisibility = () => { - if (this.expandableContentRef?.current) { - const maxLines = this.props.truncateMaxLines || parseInt(lineClamp.value); - const totalLines = - this.expandableContentRef.current.scrollHeight / - parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight); - - this.setState({ - hasToggle: totalLines > maxLines - }); - } - }; - - resize = () => { - if (this.expandableContentRef.current) { - const { offsetWidth } = this.expandableContentRef.current; - if (this.state.previousWidth !== offsetWidth) { - this.setState({ previousWidth: offsetWidth }); - this.checkToggleVisibility(); - } - } - }; - handleResize = debounce(this.resize, 250); - - render() { - const { - className, - children, - isExpanded, - isDetached, - displaySize, - isWidthLimited, - isIndented, - contentId, - toggleId, - variant, - // Gets rid of console error about it being on a DOM element - // eslint-disable-next-line - truncateMaxLines, - ...props - } = this.props; - - if (isDetached && !toggleId) { - /* eslint-disable no-console */ - console.warn( - 'ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.' - ); - } - - const uniqueContentId = contentId || getUniqueId('expandable-section-content'); - const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle'); - - return ( -
- -
- ); - } -} - -export { ExpandableSectionForSyntaxHighlighter };