fix(plugins/plugin-client-common): markdown mark tags sometimes confused with tabbed

Author: starpit

packages/test/src/api/Markdown.ts

@@ -16,6 +16,8 @@
 
 export default class Markdown {
   public readonly tip = '.kui--markdown-tip'
+  public readonly tabs = '.kui--markdown-tabs'
+  public readonly tab = `${this.tabs} .kui--markdown-tab button`
 
   public tipWithTitle(title: string) {
     return `${this.tip}[data-title="${title}"]`
@@ -24,4 +26,8 @@ export default class Markdown {
   public tipContent(baseSelector = this.tip) {
     return `${baseSelector} > div`
   }
+
+  public tabWithTitle(title: string) {
+    return `${this.tab}[data-title="${title}"]`
+  }
 }

plugins/plugin-client-common/src/components/Content/Markdown/remark-mark.ts

@@ -14,13 +14,15 @@
  * limitations under the License.
  */
 
-const RE_MARK = /([^=])?==([^=]+)==([^=])/g
-
 /**
  * Allows us to support pymdown's `==hello==` which they transform to
  * HTML5 <mark>hello</mark> which seems to generally be presented with
  * highlighter background.
  */
 export default function plugin(markdownText: string) {
-  return markdownText.replace(RE_MARK, '$1<mark>$2</mark>$3')
+  const RE_MARK_BASE = '==([^=]+)==([^=])'
+  const RE_MARK = new RegExp(`([^=])${RE_MARK_BASE}`, 'g')
+  const RE_MARK_AT_TOP = new RegExp(`^${RE_MARK_BASE}`, 'g')
+
+  return markdownText.replace(RE_MARK_AT_TOP, '<mark>$1</mark>$2').replace(RE_MARK, '$1<mark>$2</mark>$3')
 }

plugins/plugin-client-common/src/test/core/markdown/mark.ts

@@ -15,21 +15,39 @@
  */
 
 import { basename, dirname, join } from 'path'
-import { Common, CLI } from '@kui-shell/test'
 import { encodeComponent } from '@kui-shell/core'
+import { Common, CLI, Selectors } from '@kui-shell/test'
 
 const ROOT = join(dirname(require.resolve('@kui-shell/plugin-client-common/tests/data/marktag1.md')), '..')
 
-const IN1 = {
+interface Input {
+  input: string
+  marks: string[]
+  tabs?: string[]
+}
+
+const IN1: Input = {
   input: join(ROOT, 'data/marktag1.md'),
   marks: ['Markymark']
 }
 
-const IN2 = {
+const IN2: Input = {
   input: join(ROOT, 'data/marktag2.md'),
-  marks: ['Morkymork', 'Markymark']
+  marks: IN1.marks.concat(['Morkymork'])
+}
+
+const IN3: Input = {
+  input: join(ROOT, 'data/marktag3.md'),
+  marks: IN2.marks,
+  tabs: ['Tab1Title', 'Tab2Title']
 }
-;[IN1, IN2].forEach(markdown => {
+
+const IN4: Input = {
+  input: join(ROOT, 'data/marktag4.md'),
+  marks: IN3.marks.concat(['Mirkymirk']), // no 'Merkymerk' is it in Tab2, not yet rendered
+  tabs: IN3.tabs
+}
+;[IN1, IN2, IN3, IN4].forEach(markdown => {
   describe(`mark tags in markdown ${basename(markdown.input)} ${process.env.MOCHA_RUN_TARGET ||
     ''}`, function(this: Common.ISuite) {
     before(Common.before(this))
@@ -52,6 +70,16 @@ const IN2 = {
             })
           })
         )
+
+        if (markdown.tabs) {
+          await Promise.all(
+            markdown.tabs.map(tabTitle =>
+              this.app.client
+                .$(Selectors.Markdown.tabWithTitle(tabTitle))
+                .then(_ => _.waitForExist({ timeout: CLI.waitTimeout }))
+            )
+          )
+        }
       } catch (err) {
         await Common.oops(this, true)(err)
       }

plugins/plugin-client-common/tests/data/marktag3.md

@@ -0,0 +1,11 @@
+==Markymark==
+
+That should render has a `<mark>...</mark>`. This file allows testing
+the case where the mark at the very start of the file. Do not change
+this.
+
+==Morkymork==
+=== "Tab1Title"
+    Tab1Contents
+=== "Tab2Title"
+    Tab2Contents

plugins/plugin-client-common/tests/data/marktag4.md

@@ -0,0 +1,14 @@
+=== "Tab1Title"
+    Tab1Contents
+    ==Markymark==
+=== "Tab2Title"
+    Tab2Contents
+    ==Merkymerk==
+==Mirkymirk==
+
+That should render has a `<mark>...</mark>`. This file allows testing
+the case where we mix tabs and marks, with some marks nested in the
+tabs, and the tabs at the very top of the file. Do not change that
+last part, as it is an important part of the test.
+
+==Morkymork==