From d98c5787caa9e1774ba798db4e0d3f9eedbbcc24 Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Fri, 11 Jun 2021 21:37:17 +0430
Subject: [PATCH] fix: handle different order for slot and props for inline
 component (#409)

* fix: handle different order for slot and props for inline component

* fix: exit if there is no valid character after name

* docs: update docs
---
 docs/content/2.writing/2.syntax.md            |  2 ++
 docs/content/4.theme/2.components.md          | 18 ++++------
 .../tokenize-directive-inline.ts              | 33 ++++++++++++++++---
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/docs/content/2.writing/2.syntax.md b/docs/content/2.writing/2.syntax.md
index 9a83e1c09..81f8e2437 100644
--- a/docs/content/2.writing/2.syntax.md
+++ b/docs/content/2.writing/2.syntax.md
@@ -300,6 +300,8 @@ Inline components are used to put components in the middle of any Markdown block
 
   ```md [Code]
   :button-link[A button link]{bold}
+  <!-- or -->
+  :button-link{bold}[A button link]
   ```
 
   ::code-block{label="Preview" preview}
diff --git a/docs/content/4.theme/2.components.md b/docs/content/4.theme/2.components.md
index 130de9c2b..2d75e8f18 100644
--- a/docs/content/4.theme/2.components.md
+++ b/docs/content/4.theme/2.components.md
@@ -18,16 +18,13 @@ Docus default theme comes with a lot of pre-defined components.
     Check out a **success** alert with `code` and a [link](/).
     ::
 
-    ::alert{type="warning"}
-    Check out a **warning** alert with `code` and a [link](/).
-    ::
+    :alert{type="warning"}[Check out a **warning** alert with `code` and a [link](/).]
 
-    ::alert{type="danger" style="margin-bottom: 0;"}
-    Check out a **danger** alert with `code` and a [link](/).
-    ::
+    :alert[Check out a **danger** alert with `code` and a [link](/).]{type="danger" style="margin-bottom: 0;"}
   ::
 
   ```md [Code]
+  <!-- block syntax -->
   ::alert{type="info" style="margin-top: 0;"}
   Check out an **info** alert with `code` and a [link](/).
   ::
@@ -36,13 +33,10 @@ Docus default theme comes with a lot of pre-defined components.
   Check out a **success** alert with `code` and a [link](/).
   ::
 
-  ::alert{type="warning"}
-  Check out a **warning** alert with `code` and a [link](/).
-  ::
+  <!-- inline syntax -->
+  :alert{type="warning"}[Check out a **warning** alert with `code` and a [link](/).]
 
-  ::alert{type="danger" style="margin-bottom: 0;"}
-  Check out a **danger** alert with `code` and a [link](/).
-  ::
+  :alert[Check out a **danger** alert with `code` and a [link](/).]{type="danger" style="margin-bottom: 0;"}
   ```
 ::
 
diff --git a/src/core/parser/markdown/directive/micromark-directive/tokenize-directive-inline.ts b/src/core/parser/markdown/directive/micromark-directive/tokenize-directive-inline.ts
index c575a848e..d271be1a1 100644
--- a/src/core/parser/markdown/directive/micromark-directive/tokenize-directive-inline.ts
+++ b/src/core/parser/markdown/directive/micromark-directive/tokenize-directive-inline.ts
@@ -1,4 +1,5 @@
 import { Effects, Okay, NotOkay } from 'micromark/dist/shared-types'
+import { Codes } from './constants'
 import createAttributes from './factory-attributes'
 import createLabel from './factory-label'
 import createName from './factory-name'
@@ -36,16 +37,38 @@ function tokenize(effects: Effects, ok: Okay, nok: NotOkay) {
     if (code === 58 /* `:` */) {
       return nok(code)
     }
-    return code === 91 /* `[` */ ? effects.attempt(label, afterLabel, afterLabel)(code) : afterLabel(code)
+
+    // Check for label
+    if (code === Codes.openningSquareBracket) {
+      return effects.attempt(label, afterLabel, afterLabel)(code)
+    }
+
+    // Check for attributes
+    if (code === Codes.openningCurlyBracket) {
+      return effects.attempt(attributes, afterAttributes, afterAttributes)(code)
+    }
+
+    return exit(code)
+  }
+
+  function afterAttributes(code: number) {
+    // Check for label after attributes
+    if (code === Codes.openningSquareBracket) {
+      return effects.attempt(label, afterLabel, afterLabel)(code)
+    }
+
+    return exit(code)
   }
 
   function afterLabel(code: number) {
-    return code === 123 /* `{` */
-      ? effects.attempt(attributes, afterAttributes, afterAttributes)(code)
-      : afterAttributes(code)
+    // Check for attributes after label
+    if (code === Codes.openningCurlyBracket) {
+      return effects.attempt(attributes, exit, exit)(code)
+    }
+    return exit(code)
   }
 
-  function afterAttributes(code: number) {
+  function exit(code: number) {
     effects.exit('directiveText')
     return ok(code)
   }