Investigate code editor

Author: rebeccaalpert

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx

@@ -65,7 +65,7 @@ spec:
 
 Here is some JavaScript code:
 
-~~~js
+~~~javascript
 const MessageLoading = () => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx

@@ -65,7 +65,7 @@ spec:
 
 Here is some JavaScript code:
 
-~~~js
+~~~javascript
 const MessageLoading = () => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">

packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx

@@ -78,7 +78,7 @@ spec:
 
 Here is some JavaScript code:
 
-~~~js
+~~~javascript
 const MessageLoading = () => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">

packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx

@@ -87,7 +87,7 @@ spec:
 
 Here is some JavaScript code:
 
-~~~js
+~~~javascript
 const MessageLoading = () => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">

packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx

@@ -85,7 +85,7 @@ spec:
 
 Here is some JavaScript code:
 
-~~~js
+~~~javascript
 const MessageLoading = () => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">

packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -1,40 +1,22 @@
 // ============================================================================
 // 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,
-  CodeBlockAction,
-  CodeBlockCode,
-  Button,
-  Tooltip,
-  ExpandableSection,
-  ExpandableSectionToggle,
-  ExpandableSectionProps,
-  ExpandableSectionToggleProps,
-  ExpandableSectionVariant
-} from '@patternfly/react-core';
+import { useState } from 'react';
+import { ExpandableSectionProps, ExpandableSection } from '@patternfly/react-core';
 
-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';
+import { CodeEditor, CodeEditorProps, Language } from '@patternfly/react-code-editor';
 
 export interface CodeBlockMessageProps {
   /** Content rendered in code block */
   children?: React.ReactNode;
-  /** Aria label applied to code block */
-  'aria-label'?: string;
   /** Class name applied to code block */
   className?: string;
   /** Whether code block is expandable */
   isExpandable?: boolean;
   /** Additional props passed to expandable section if isExpandable is applied */
   expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
-  /** Additional props passed to expandable toggle if isExpandable is applied */
-  expandableSectionToggleProps?: ExpandableSectionToggleProps;
+  /** Additional props passed to code editor */
+  codeEditorProps?: Omit<CodeEditorProps, 'ref'>;
   /** Link text applied to expandable toggle when expanded */
   expandedText?: string;
   /** Link text applied to expandable toggle when collapsed */
@@ -47,24 +29,17 @@ const DEFAULT_COLLAPSED_TEXT = 'Show more';
 const CodeBlockMessage = ({
   children,
   className,
-  'aria-label': ariaLabel,
   isExpandable = false,
   expandableSectionProps,
-  expandableSectionToggleProps,
   expandedText = DEFAULT_EXPANDED_TEXT,
   collapsedText = DEFAULT_COLLAPSED_TEXT,
+  codeEditorProps,
   ...props
 }: CodeBlockMessageProps) => {
-  const [copied, setCopied] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const buttonRef = useRef();
-  const tooltipID = useId();
-  const toggleId = useId();
-  const contentId = useId();
-  const codeBlockRef = useRef<HTMLDivElement>(null);
-
-  const language = /language-(\w+)/.exec(className || '')?.[1];
+  const languageString = /language-(\w+)/.exec(className || '')?.[1];
+  const language = languageString ? Language[languageString] : undefined;
 
   // Get custom toggle text from data attributes if available - for use with rehype plugins
   const customExpandedText = props['data-expanded-text'];
@@ -84,27 +59,10 @@ const CodeBlockMessage = ({
     );
   }
 
-  const onToggle = (isExpanded) => {
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 
-  // Handle clicking copy button
-  const handleCopy = useCallback((event, text) => {
-    navigator.clipboard.writeText(text.toString());
-    setCopied(true);
-  }, []);
-
-  // Reset copied state
-  useEffect(() => {
-    if (copied) {
-      const timer = setTimeout(() => {
-        setCopied(false);
-      }, 3000);
-
-      return () => clearTimeout(timer);
-    }
-  });
-
   if (!String(children).includes('\n')) {
     return (
       <code {...props} className="pf-chatbot__message-inline-code">
@@ -113,82 +71,35 @@ const CodeBlockMessage = ({
     );
   }
 
-  // Setup code block header
-  const actions = (
-    <>
-      <CodeBlockAction>
-        {language && <div className="pf-chatbot__message-code-block-language">{language}</div>}
-        <Button
-          ref={buttonRef}
-          aria-label={ariaLabel ?? 'Copy code'}
-          variant="plain"
-          className="pf-chatbot__button--copy"
-          onClick={(event) => handleCopy(event, children)}
-        >
-          {copied ? <CheckIcon /> : <CopyIcon />}
-        </Button>
-        <Tooltip id={tooltipID} content="Copy" position="top" triggerRef={buttonRef} />
-      </CodeBlockAction>
-    </>
+  const codeEditor = (
+    <CodeEditor
+      // Force remount on state change
+      // Prevents bug where code editor is 1px high when expandable is opened, closed, and reopened
+      key={`code-editor-${isExpanded}`}
+      code={children?.toString()}
+      isReadOnly
+      isCopyEnabled
+      isLanguageLabelVisible
+      language={language}
+      height="sizeToFit"
+      {...codeEditorProps}
+    ></CodeEditor>
   );
 
   return (
-    <div className="pf-chatbot__message-code-block" ref={codeBlockRef}>
-      <CodeBlock actions={actions}>
-        <CodeBlockCode>
-          <>
-            {language ? (
-              // SyntaxHighlighter doesn't work with ExpandableSection because it targets the direct child
-              // Forked for now and adjusted to match what we need
-              <ExpandableSectionForSyntaxHighlighter
-                variant={ExpandableSectionVariant.truncate}
-                isExpanded={isExpanded}
-                isDetached
-                toggleId={toggleId}
-                contentId={contentId}
-                language={language}
-                {...expandableSectionProps}
-              >
-                <SyntaxHighlighter
-                  {...props}
-                  language={language}
-                  style={obsidian}
-                  PreTag="div"
-                  CodeTag="div"
-                  wrapLongLines
-                >
-                  {String(children).replace(/\n$/, '')}
-                </SyntaxHighlighter>
-              </ExpandableSectionForSyntaxHighlighter>
-            ) : (
-              <ExpandableSection
-                variant={ExpandableSectionVariant.truncate}
-                isExpanded={isExpanded}
-                isDetached
-                toggleId={toggleId}
-                contentId={contentId}
-                {...expandableSectionProps}
-              >
-                {children}
-              </ExpandableSection>
-            )}
-          </>
-        </CodeBlockCode>
-        {isExpandable && (
-          <ExpandableSectionToggle
-            isExpanded={isExpanded}
-            onToggle={onToggle}
-            direction="up"
-            toggleId={toggleId}
-            contentId={contentId}
-            hasTruncatedContent
-            className="pf-chatbot__message-code-toggle"
-            {...expandableSectionToggleProps}
-          >
-            {isExpanded ? finalExpandedText : finalCollapsedText}
-          </ExpandableSectionToggle>
-        )}
-      </CodeBlock>
+    <div>
+      {isExpandable ? (
+        <ExpandableSection
+          toggleText={isExpanded ? finalExpandedText : finalCollapsedText}
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+          {...expandableSectionProps}
+        >
+          {codeEditor}
+        </ExpandableSection>
+      ) : (
+        codeEditor
+      )}
     </div>
   );
 };

packages/module/src/Message/Message.test.tsx

@@ -491,28 +491,13 @@ describe('Message', () => {
   it('should render code correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
     expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
-    expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
-    expect(screen.getByText(/yaml/)).toBeTruthy();
-    expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
-    expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
-    expect(screen.getByText(/metadata:/i)).toBeTruthy();
-    expect(screen.getByText(/name:/i)).toBeTruthy();
-    expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
-    expect(screen.getByText(/spec/i)).toBeTruthy();
-    expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
-    expect(screen.getByText(/url:/i)).toBeTruthy();
-    expect(
-      screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
-    ).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Copy code to clipboard' })).toBeTruthy();
   });
   it('should render expandable code correctly', () => {
     render(
       <Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} codeBlockProps={{ isExpandable: true }} />
     );
     expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
-    expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
-    expect(screen.getByText(/yaml/)).toBeTruthy();
-    expect(screen.getByText(/apiVersion/i)).toBeTruthy();
     expect(screen.getByRole('button', { name: /Show more/i })).toBeTruthy();
   });
   it('should handle click on expandable code correctly', async () => {
@@ -522,40 +507,16 @@ describe('Message', () => {
     const button = screen.getByRole('button', { name: /Show more/i });
     await userEvent.click(button);
     expect(screen.getByRole('button', { name: /Show less/i })).toBeTruthy();
-    expect(screen.getByText(/yaml/)).toBeTruthy();
-    expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
-    expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
-    expect(screen.getByText(/metadata:/i)).toBeTruthy();
-    expect(screen.getByText(/name:/i)).toBeTruthy();
-    expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
-    expect(screen.getByText(/spec/i)).toBeTruthy();
-    expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
-    expect(screen.getByText(/url:/i)).toBeTruthy();
-    expect(
-      screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
-    ).toBeTruthy();
   });
   it('can click copy code button', async () => {
     // need explicit setup since RTL stubs clipboard if you do this
     const user = userEvent.setup();
     render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
-    expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
-    await user.click(screen.getByRole('button', { name: 'Copy code' }));
+    expect(screen.getByRole('button', { name: 'Copy code to clipboard' })).toBeTruthy();
+    await user.click(screen.getByRole('button', { name: 'Copy code to clipboard' }));
     const clipboardText = await navigator.clipboard.readText();
     expect(clipboardText.trim()).toEqual(CODE.trim());
   });
-  it('should handle codeBlockProps correctly by spreading it onto the CodeMessage', () => {
-    render(
-      <Message
-        avatar="./img"
-        role="user"
-        name="User"
-        content={CODE_MESSAGE}
-        codeBlockProps={{ 'aria-label': 'test' }}
-      />
-    );
-    expect(screen.getByRole('button', { name: 'test' })).toBeTruthy();
-  });
   it('should handle hasRoundAvatar correctly when it is true', () => {
     render(<Message avatar="./img" role="user" name="User" content="Hi" hasRoundAvatar />);
     expect(screen.getByRole('img')).toBeTruthy();

packages/module/src/Message/Message.tsx

@@ -49,6 +49,7 @@ import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
 import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
+import { CodeEditorProps } from '@patternfly/react-code-editor';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -111,18 +112,14 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   loadingWord?: string;
   /** Props for code blocks */
   codeBlockProps?: {
-    /** Aria label applied to code blocks */
-    'aria-label'?: string;
-    /** Class name applied to code blocks */
+    /** Class name applied to code block */
     className?: string;
-    /** Whether code blocks are expandable */
+    /** Whether code block is expandable */
     isExpandable?: boolean;
-    /** Length of text initially shown in expandable code blocks; defaults to 10 characters */
-    maxLength?: number;
     /** Additional props passed to expandable section if isExpandable is applied */
     expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
-    /** Additional props passed to expandable toggle if isExpandable is applied */
-    expandableSectionToggleProps?: ExpandableSectionToggleProps;
+    /** Additional props passed to code editor */
+    codeEditorProps?: Omit<CodeEditorProps, 'ref'>;
     /** Link text applied to expandable toggle when expanded */
     expandedText?: string;
     /** Link text applied to expandable toggle when collapsed */