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

@@ -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}

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;"}
   ```
 ::
 

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)
   }