chore(docs): Make Message expandable code links unique

Added rehype plugin so we could adjust the expandable code toggle links in our User and Bot Messages. Eric recommended that these are unique. Because the code blocks are in the same Message, we need to do this by modifying the syntax tree. I added this functionality and also added a warning in case people try to do conflicting behaviors.

Author: rebeccaalpert

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

@@ -10,6 +10,7 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
+import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 
 export const BotMessageExample: FunctionComponent = () => {
   const [variant, setVariant] = useState<string>('Code');
@@ -268,6 +269,10 @@ _Italic text, formatted with single underscores_
         }
         error={variant === 'Error' ? error : undefined}
         codeBlockProps={{ isExpandable, expandableSectionProps: { truncateMaxLines: isExpandable ? 1 : undefined } }}
+        // In this example, custom plugin will override any custom expandedText or collapsedText attributes provided
+        // The purpose of this plugin is to provide unique link names for the code blocks
+        // Because they are in the same message, this requires a custom plugin to parse the syntax tree
+        additionalRehypePlugins={[rehypeCodeBlockToggle]}
       />
     </>
   );

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

@@ -31,6 +31,7 @@ sortValue: 3
 ---
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
 import { RobotIcon } from '@patternfly/react-icons/dist/esm/icons/robot-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';

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

@@ -9,6 +9,7 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
+import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 
 export const UserMessageExample: FunctionComponent = () => {
   const [variant, setVariant] = useState<string>('Code');
@@ -250,6 +251,10 @@ _Italic text, formatted with single underscores_
         onEditUpdate={() => setIsEditable(false)}
         onEditCancel={() => setIsEditable(false)}
         codeBlockProps={{ isExpandable, expandableSectionProps: { truncateMaxLines: isExpandable ? 1 : undefined } }}
+        // In this example, custom plugin will override any custom expandedText or collapsedText attributes provided
+        // The purpose of this plugin is to provide unique link names for the code blocks
+        // Because they are in the same message, this requires a custom plugin to parse the syntax tree
+        additionalRehypePlugins={[rehypeCodeBlockToggle]}
       />
     </>
   );

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

@@ -41,15 +41,18 @@ export interface CodeBlockMessageProps {
   collapsedText?: string;
 }
 
+const DEFAULT_EXPANDED_TEXT = 'Show less';
+const DEFAULT_COLLAPSED_TEXT = 'Show more';
+
 const CodeBlockMessage = ({
   children,
   className,
   'aria-label': ariaLabel,
   isExpandable = false,
   expandableSectionProps,
   expandableSectionToggleProps,
-  expandedText = 'Show less',
-  collapsedText = 'Show more',
+  expandedText = DEFAULT_EXPANDED_TEXT,
+  collapsedText = DEFAULT_COLLAPSED_TEXT,
   ...props
 }: CodeBlockMessageProps) => {
   const [copied, setCopied] = useState(false);
@@ -63,6 +66,24 @@ const CodeBlockMessage = ({
 
   const language = /language-(\w+)/.exec(className || '')?.[1];
 
+  // Get custom toggle text from data attributes if available - for use with rehype plugins
+  const customExpandedText = props['data-expanded-text'];
+  const customCollapsedText = props['data-collapsed-text'];
+
+  const finalExpandedText = customExpandedText || expandedText;
+  const finalCollapsedText = customCollapsedText || collapsedText;
+
+  if (
+    (customExpandedText && expandedText !== DEFAULT_EXPANDED_TEXT) ||
+    (customCollapsedText && collapsedText !== DEFAULT_COLLAPSED_TEXT)
+  ) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'Message:',
+      'Custom rehype plugins that rely on data-expanded-text or data-collapsed-text will override expandedText and collapsedText props if both are passed in.'
+    );
+  }
+
   const onToggle = (isExpanded) => {
     setIsExpanded(isExpanded);
   };
@@ -164,7 +185,7 @@ const CodeBlockMessage = ({
             className="pf-chatbot__message-code-toggle"
             {...expandableSectionToggleProps}
           >
-            {isExpanded ? expandedText : collapsedText}
+            {isExpanded ? finalExpandedText : finalCollapsedText}
           </ExpandableSectionToggle>
         )}
       </CodeBlock>

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

@@ -176,6 +176,8 @@ class ExpandableSectionForSyntaxHighlighter extends Component<ExpandableSectionP
       contentId,
       toggleId,
       variant,
+      // eslint-disable-next-line
+      truncateMaxLines,
       ...props
     } = this.props;
 

packages/module/src/Message/Plugins/index.ts

@@ -0,0 +1 @@
+export { rehypeCodeBlockToggle } from './rehypeCodeBlockToggle';

packages/module/src/Message/Plugins/rehypeCodeBlockToggle.ts

@@ -0,0 +1,24 @@
+import { visit } from 'unist-util-visit';
+import { Element } from 'hast';
+import { Node } from 'unist';
+
+// Rehype plugin to add language information to code block props
+// Per Eric, Ideally any toggle buttons that can be navigated to would have unique accessible names
+// For the purposes of our examples this should suffice, but in a real-world use case they may need to be more unique
+export const rehypeCodeBlockToggle = () => (tree: Node) => {
+  visit(tree, 'element', (node: Element) => {
+    if (node.tagName === 'code' && node.properties?.className) {
+      const className = node.properties.className as string[];
+      const languageMatch = className.find((cls) => cls.startsWith('language-'));
+
+      if (languageMatch) {
+        const language = languageMatch.replace('language-', '').toUpperCase();
+
+        // Add the language and toggle text as data attributes
+        node.properties['data-language'] = language;
+        node.properties['data-expanded-text'] = `Show less ${language} code`;
+        node.properties['data-collapsed-text'] = `Show more ${language} code`;
+      }
+    }
+  });
+};

packages/module/src/Message/index.ts

@@ -1,3 +1,4 @@
 export { default } from './Message';
+export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
 
 export * from './Message';