Merge pull request #585 from rebeccaalpert/rehype-show-more

chore(docs): Make Message expandable code links unique

Author: nicolethoen

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');
@@ -260,6 +261,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,9 @@ class ExpandableSectionForSyntaxHighlighter extends Component<ExpandableSectionP
       contentId,
       toggleId,
       variant,
+      // Gets rid of console error about it being on a DOM element
+      // 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';