feat(plugins/plugin-client-common): allow markdown to link to markdown tabs

i.e. activate a markdown tab as a result of clicking on a markdown link

Author: starpit

plugins/plugin-client-common/src/components/Content/Markdown/components/a.tsx

@@ -20,6 +20,7 @@ import { REPL, maybeKuiLink, pexecInCurrentTab } from '@kui-shell/core'
 
 import { Props } from '../../Markdown'
 import { anchorFrom } from './heading'
+import { activateTab } from './tabbed'
 
 // const LinkStatus = React.lazy(() => import('../../LinkStatus'))
 const Tooltip = React.lazy(() => import('../../../spi/Tooltip'))
@@ -50,10 +51,15 @@ export default function a(mdprops: Props, uuid: string, repl: REPL) {
                 }
               }
             } else if (props.href.charAt(0) === '#') {
+              // in case this is a reference to a section in the current kui tab
+              // TODO: reference to a section in a different kui tab?
               const tab = mdprops.tab
               if (tab) {
                 tab.show(`[data-markdown-anchor="${anchorFrom(uuid, props.href.slice(1))}"]`)
               }
+
+              // in case this is a reference to a markdown tab in this kui tab
+              activateTab(props.href.slice(1), evt)
             } else if (file) {
               if ((isLocal || isNotebook) && !isAbsolute(file)) {
                 // e.g. if a markdown has a relative reference to

plugins/plugin-client-common/src/components/Content/Markdown/components/tabbed.tsx

@@ -17,32 +17,92 @@
 /* eslint-disable react/prop-types, react/display-name */
 
 import React from 'react'
-import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'
+import Slugger from 'github-slugger'
+import { EventEmitter } from 'events'
+import { Tab, Tabs, TabsProps, TabTitleText } from '@patternfly/react-core'
 
 import Card from '../../../spi/Card'
 
+type Props = {
+  depth: number
+  children: { props: { title: string; children?: React.ReactNode[] } }[]
+}
+
+type State = Pick<TabsProps, 'activeKey'>
+
+const activateEvents = new EventEmitter()
+export function activateTab(slug: string, evt?: React.MouseEvent) {
+  activateEvents.emit(slug, evt)
+}
+
+class LinkableTabs extends React.PureComponent<Props, State> {
+  private readonly slugs = new Slugger()
+  private readonly cleaners: (() => void)[] = []
+
+  public constructor(props: Props) {
+    super(props)
+    this.state = {
+      activeKey: 0
+    }
+
+    this.initEvents()
+  }
+
+  private initEvents() {
+    ;(this.props.children || [])
+      .map(_ => this.slugs.slug(_.props.title))
+      .forEach((slug, activeKey) => {
+        const onActivate = (evt?: React.MouseEvent) => {
+          this.setState({ activeKey })
+
+          if (evt) {
+            // prevent default interpretation of onClick for the href
+            evt.preventDefault()
+          }
+        }
+        activateEvents.on(slug, onActivate)
+        this.cleaners.push(() => activateEvents.off(`/markdown/tabs/activate/${slug}`, onActivate))
+      })
+  }
+
+  public componentWillUnmount() {
+    this.cleaners.forEach(_ => _())
+  }
+
+  private readonly onSelect = (_, tabIndex: number | string) => {
+    this.setState({
+      activeKey: tabIndex
+    })
+  }
+
+  public render() {
+    return (
+      <Tabs
+        className="kui--markdown-tabs paragraph"
+        activeKey={this.state.activeKey}
+        onSelect={this.onSelect}
+        mountOnEnter
+        unmountOnExit
+        data-depth={this.props.depth}
+      >
+        {(this.props.children || []).map((_, idx) => (
+          <Tab
+            key={idx}
+            eventKey={idx}
+            data-depth={this.props.depth}
+            data-title={_.props.title}
+            className="kui--markdown-tab"
+            title={<TabTitleText>{_.props.title}</TabTitleText>}
+          >
+            <Card className="kui--markdown-tab-card">{_.props && _.props.children}</Card>
+          </Tab>
+        ))}
+      </Tabs>
+    )
+  }
+}
+
 export default function tabbed(props) {
   // isSecondary={parseInt(props.depth, 10) > 0}
-  return (
-    <Tabs
-      className="kui--markdown-tabs paragraph"
-      defaultActiveKey={0}
-      mountOnEnter
-      unmountOnExit
-      data-depth={props.depth}
-    >
-      {(props.children || []).map((_, idx) => (
-        <Tab
-          key={idx}
-          eventKey={idx}
-          data-depth={props.depth}
-          data-title={_.props.title}
-          className="kui--markdown-tab"
-          title={<TabTitleText>{_.props.title}</TabTitleText>}
-        >
-          <Card className="kui--markdown-tab-card">{_.props && _.props.children}</Card>
-        </Tab>
-      ))}
-    </Tabs>
-  )
+  return <LinkableTabs depth={props.depth}>{props.children}</LinkableTabs>
 }

plugins/plugin-client-common/tests/data/markdown-tab-links.md

@@ -0,0 +1,6 @@
+=== "T1"
+tab1
+  
+=== "T2"
+
+    [activate T1](#t1)

plugins/plugin-client-common/web/scss/components/Terminal/Commentary.scss

@@ -24,20 +24,28 @@
 @import '../../Themes/mixins';
 @import 'BlockLinks';
 
-body[kui-theme-style] .pf-c-content {
-  color: inherit;
-
-  ol,
-  ul {
-    margin: 0;
+@mixin TextContent {
+  .pf-c-content {
+    @content;
   }
+}
 
-  /* odd bug in patternfly... */
-  .pf-c-tabs__list li + li {
-    margin-top: 0;
-  }
-  .pf-c-breadcrumb li + li {
-    margin-top: 0;
+body[kui-theme-style] {
+  @include TextContent {
+    color: inherit;
+
+    ol,
+    ul {
+      margin: 0;
+    }
+
+    /* odd bug in patternfly... */
+    .pf-c-tabs__list li + li {
+      margin-top: 0;
+    }
+    .pf-c-breadcrumb li + li {
+      margin-top: 0;
+    }
   }
 }
 
@@ -339,6 +347,17 @@ body[kui-theme-style='dark'] {
     & > p:last-child {
       margin-bottom: 0;
     }
+
+    @include TextContent {
+      & > .marked-content {
+        & > p:first-child {
+          margin-top: 0;
+        }
+        & > p:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
   }
 }
 
@@ -361,10 +380,12 @@ body[kui-theme-style='dark'] {
 }
 
 /** Markdown-rendered content not in a Commentary */
-pre > .pf-c-content {
-  font-size: inherit;
-  p {
-    white-space: pre;
+pre {
+  @include TextContent {
+    font-size: inherit;
+    p {
+      white-space: pre;
+    }
   }
 }