fix(plugins/plugin-client-common): markdown with non-tab/tip indentation formats poorly

e.g. a tab after tip inside a tab, where the tip itself is indented not due being in a tab or tip, sigh

see plugins/plugin-client-common/tests/data/tab-after-tip-in-tab2.md for an example of this

Author: starpit

packages/test/src/api/Markdown.ts

@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+import { ISuite } from './common'
+import { OUTPUT_LAST } from './selectors'
+
 export default class Markdown {
   public readonly tip = '.kui--markdown-tip'
   public readonly tabs = '.kui--markdown-tabs'
@@ -22,6 +25,10 @@ export default class Markdown {
   private readonly _codeBlock = '.kui--code-block-in-markdown'
   public readonly runButton = '.kui--block-action-run'
 
+  public getText(ctx: ISuite) {
+    return ctx.app.client.$(OUTPUT_LAST).then(_ => _.getText())
+  }
+
   public tipWithTitle(title: string) {
     return `${this.tip}[data-title="${title}"]`
   }

plugins/plugin-client-common/src/components/Content/Markdown/rehype-tabbed/index.ts

@@ -19,6 +19,9 @@ import { v4 } from 'uuid'
 import { Element } from 'hast'
 import { START_OF_TIP, END_OF_TIP } from '../rehype-tip'
 
+/** A placeholder marker to indicate markdown that uses indentation not to mean Tab or Tip content */
+const FAKE_END_MARKER = ''
+
 // const RE_TAB = /^(.|[\n\r])*===\s+"(.+)"\s*(\n(.|[\n\r])*)?$/
 const RE_TAB = /^===\s+"([^"]+)"/
 
@@ -176,52 +179,52 @@ export function hackIndentation(source: string): string {
 
   const indentDepthOfContent: number[] = []
 
-  const rewrite = source.split(/\n/).map(line => {
-    const tabStartMatch = line.match(/^(\s*)===\s+".*"/)
-    const tipStartMatch = line.match(/^(\s*)[?!][?!][?!](\+?)\s+(tip|todo|bug|info|note|warning|success|question)/)
-    const startMatch = tabStartMatch || tipStartMatch
-
-    const unindent = (line: string) => {
-      if (!inBlockquote && !inCodeBlock) {
-        return line.replace(/^\s*/, '')
+  const unindent = (line: string) => {
+    if (!inBlockquote && !inCodeBlock) {
+      return line.replace(/^\s*/, '')
+    } else {
+      if (blockquoteOrCodeBlockIndent > 0) {
+        return line.replace(new RegExp(`^\\s{${blockquoteOrCodeBlockIndent}}`), '')
       } else {
-        if (blockquoteOrCodeBlockIndent > 0) {
-          return line.replace(new RegExp(`^\\s{${blockquoteOrCodeBlockIndent}}`), '')
-        } else {
-          return line
-        }
+        return line
       }
     }
+  }
 
-    const pop = (line: string, delta = 0) => {
-      const indentMatch = line.match(/^\s+/)
-      const curIndentDepth = indentDepthOfContent[indentDepthOfContent.length - 1]
-      const thisIndentDepth = !indentMatch ? 0 : ~~(indentMatch[0].length / 4)
-
-      let pop = ''
-      for (let idx = curIndentDepth; idx > thisIndentDepth + delta; idx--) {
-        indentDepthOfContent.pop()
-        const endMarker = endMarkers.pop()
-        if (endMarker) {
-          pop += `\n${endMarker}\n\n`
-        }
+  const pop = (line: string, delta = 0) => {
+    const indentMatch = line.match(/^\s+/)
+    const curIndentDepth = indentDepthOfContent[indentDepthOfContent.length - 1]
+    const thisIndentDepth = !indentMatch ? 0 : ~~(indentMatch[0].length / 4)
+
+    let pop = ''
+    for (let idx = curIndentDepth; idx > thisIndentDepth + delta; idx--) {
+      indentDepthOfContent.pop()
+      const endMarker = endMarkers.pop()
+      if (endMarker) {
+        pop += `\n${endMarker}\n\n`
       }
+    }
 
-      if (pop) {
-        if (endMarkers.length === 0) {
-          inTab = undefined
-        } else {
-          const indentDepth = indentDepthOfContent[indentDepthOfContent.length - 1]
-          inTab = new RegExp(
-            '^' +
-              Array(indentDepth * 4)
-                .fill(' ')
-                .join('')
-          )
-        }
+    if (pop) {
+      if (endMarkers.length === 0) {
+        inTab = undefined
+      } else {
+        const indentDepth = indentDepthOfContent[indentDepthOfContent.length - 1]
+        inTab = new RegExp(
+          '^' +
+            Array(indentDepth * 4)
+              .fill(' ')
+              .join('')
+        )
       }
-      return pop
     }
+    return pop
+  }
+
+  const rewrite = source.split(/\n/).map(line => {
+    const tabStartMatch = line.match(/^(\s*)===\s+".*"/)
+    const tipStartMatch = line.match(/^(\s*)[?!][?!][?!](\+?)\s+(tip|todo|bug|info|note|warning|success|question)/)
+    const startMatch = tabStartMatch || tipStartMatch
 
     if (!inBlockquote && startMatch) {
       const thisIndentation = startMatch[1] || ''
@@ -249,6 +252,14 @@ export function hackIndentation(source: string): string {
 
       const startMarker = tabStartMatch ? START_OF_TAB : START_OF_TIP
 
+      if (thisIndentDepth > indentDepth + 1) {
+        // then the markdown is using indentation in ways beyond that
+        // which would be "normal" for pymdown, i.e. to indicate Tab
+        // or Tip content
+        endMarkers.push(FAKE_END_MARKER)
+        indentDepthOfContent.push(-1)
+      }
+
       if (endMarker === END_OF_TIP || endMarkers.length === 0 || thisIndentDepth > indentDepth) {
         endMarkers.push(endMarker)
         indentDepthOfContent.push(thisIndentDepth)

plugins/plugin-client-common/src/test/core/markdown/tab-after-tip-in-tab.ts

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2022 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ok } from 'assert'
+import { basename, dirname, join } from 'path'
+import { encodeComponent } from '@kui-shell/core'
+import { Common, CLI, ReplExpect, Selectors } from '@kui-shell/test'
+
+const ROOT = join(dirname(require.resolve('@kui-shell/plugin-client-common/tests/data/tab-after-tip-in-tab1.md')), '..')
+
+const IN1 = {
+  input: join(ROOT, 'data', 'tab-after-tip-in-tab1.md'),
+  tips: [{ title: 'XXXX', content: 'YYYY' }],
+  textToBeFound: 'YYYY',
+  textNotToBeFound: 'AAAA' // we don't want the second tab's text to be shown on initial render!
+}
+
+const IN2 = {
+  input: join(ROOT, 'data', 'tab-after-tip-in-tab2.md'),
+  tips: IN1.tips,
+  textToBeFound: 'Bullet1',
+  textNotToBeFound: IN1.textNotToBeFound
+}
+;[IN1, IN2].forEach(markdown => {
+  describe(`markdown tab after tip in tab ${basename(markdown.input)} ${process.env.MOCHA_RUN_TARGET ||
+    ''}`, function(this: Common.ISuite) {
+    before(Common.before(this))
+    after(Common.after(this))
+
+    markdown.tips.forEach(tip => {
+      it(`should load the markdown and show tab after tip in tab with title=${tip.title}`, async () => {
+        try {
+          await CLI.command(`commentary -f ${encodeComponent(markdown.input)}`, this.app).then(
+            ReplExpect.okWithString(markdown.textToBeFound)
+          )
+
+          const allText = await Selectors.Markdown.getText(this)
+          ok(allText.indexOf(markdown.textNotToBeFound) < 0)
+
+          const tipSelector = Selectors.Markdown.tipWithTitle(tip.title)
+          const tipElement = await this.app.client.$(tipSelector)
+          await tipElement.waitForExist({ timeout: CLI.waitTimeout })
+
+          const content = await this.app.client.$(Selectors.Markdown.tipContent(tipSelector))
+          await content.waitForExist({ timeout: CLI.waitTimeout })
+
+          await this.app.client.waitUntil(
+            async () => {
+              const actualText = await content.getText()
+              return actualText === tip.content
+            },
+            { timeout: CLI.waitTimeout }
+          )
+        } catch (err) {
+          await Common.oops(this, true)(err)
+        }
+      })
+    })
+  })
+})

plugins/plugin-client-common/tests/data/tab-after-tip-in-tab1.md

@@ -0,0 +1,8 @@
+=== "Tab1"
+    !!! warning "XXXX"
+        YYYY
+
+=== "Tab2"
+    AAAA
+
+    BBBB

plugins/plugin-client-common/tests/data/tab-after-tip-in-tab2.md

@@ -0,0 +1,10 @@
+=== "Tab1"
+    - Bullet1
+        !!! warning "XXXX"
+            YYYY
+
+=== "Tab2"
+    AAAA
+
+    BBBB
+