feat(bi-directional-links): support to render inline tokens

Author: nekomeowww

docs/pages/en/integrations/markdown-it-bi-directional-links/index.md

@@ -89,6 +89,34 @@ Demo
 
 [[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|Custom Text]]
 
+### Use Markdown markup in custom text
+
+```markdown
+[[Some Full Path Reference to Your Page|`Code Block (Before)` Middle `Code Block (After)`]]
+
+[[Some Full Path Reference to Your Page|**Bold Before** Middle **Bold After**]]
+
+[[Some Full Path Reference to Your Page|*Italic Before* Middle *After*]]
+
+[[Some Full Path Reference to Your Page|~~Strikethrough Before~~ Middle ~~Strikethrough After~~]]
+
+[[Some Full Path Reference to Your Page|<span style="color: red;">Custom HTML</span>]]
+
+[[Some Full Path Reference to Your Page|<span style="color: red;">Custom HTML (Before)</span> Middle <span style="color: blue;">Custom HTML (After)</span>]]
+```
+
+[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|`Code Block (Before)` Middle `Code Block (After)`]]
+
+[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|**Bold (Before)** Middle **Bold (After)**]]
+
+[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|*Italic (Before)* Middle *Italic (After)*]]
+
+[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|~~Strikethrough (Before)~~ Middle ~~Strikethrough (After)~~]]
+
+[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|<span style="color: red;">Custom HTML</span>]]
+
+[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|<span style="color: red;">Custom HTML</span> Middle <span style="color: blue;">Custom HTML</span>]]
+
 ## How to use
 
 ### Installation

docs/pages/zh-CN/integrations/markdown-it-bi-directional-links/index.md

@@ -89,6 +89,36 @@ Obsidian 同名页面：[[pages/zh-CN/integrations/markdown-it-bi-directional-li
 
 [[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|自定义文案]]
 
+#### 自定义文案中使用 Markdown 语法
+
+```markdown
+[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|`代码块（前缀）` 中间的内容 `代码块（后缀）`]]
+
+[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|**粗体（前缀）** 中间的内容 **粗体（后缀）**]]
+
+[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|*斜体（前缀）* 中间的内容 *斜体（后缀）*]]
+
+[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|~~删除线（前缀）~~ 中间的内容 ~~删除线（后缀）~~]]
+
+[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|<span style="color: red;">自定义 HTML</span>]]
+
+[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|<span style="color: red;">自定义 HTML</span> 中间的内容 <span style="color: blue;">自定义 HTML</span>]]
+```
+
+效果
+
+[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|`代码块（前缀）` 中间的内容 `代码块（后缀）`]]
+
+[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|**粗体（前缀）** 中间的内容 **粗体（后缀）**]]
+
+[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|*斜体（前缀）* 中间的内容 *斜体（后缀）*]]
+
+[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|~~删除线（前缀）~~ 中间的内容 ~~删除线（后缀）~~]]
+
+[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|<span style="color: red;">自定义 HTML</span>]]
+
+[[pages/zh-CN/integrations/markdown-it-bi-directional-links/双向链接示例页面|<span style="color: red;">自定义 HTML</span> 中间的内容 <span style="color: blue;">自定义 HTML</span>]]
+
 ## 如何使用
 
 ### 安装

packages/markdown-it-bi-directional-links/src/index.ts

@@ -1,6 +1,7 @@
 import { basename, extname, join, relative } from 'node:path'
 import fg from 'fast-glob'
 import type { PluginSimple } from 'markdown-it'
+import type Token from 'markdown-it/lib/token'
 
 const biDirectionalLinkPattern = /\[\[([^|\]\n]+)(\|([^\]\n]+))?\]\](?!\()/
 const biDirectionalLinkPatternWithStart = /^\[\[([^|\]\n]+)(\|([^\]\n]+))?\]\](?!\()/
@@ -117,9 +118,31 @@ export const BiDirectionalLinks: (options: {
       const openToken = state.push('link_open', 'a', 1)
       openToken.attrSet('href', resolvedNewHref)
 
-      // text
-      const textToken = state.push('text', '', 0)
-      textToken.content = text || href
+      // Final inline tokens for link content
+      const linkTokenChildrenContent: Token[] = []
+
+      // Produces a set of inline tokens and each contains a set of children tokens
+      const parsedInlineTokens = text ? md.parseInline(text, null) : md.parseInline(href, null) || []
+
+      // We are going to push the children tokens of each inline token to the final inline tokens
+      // Need to check if the parsed inline tokens have children tokens
+      if (parsedInlineTokens && parsedInlineTokens.length) {
+        parsedInlineTokens.forEach((tokens) => {
+          if (!tokens.children)
+            return
+
+          // If the inline token has children tokens, push them to the final inline tokens one by one
+          tokens.children.forEach((token) => {
+            linkTokenChildrenContent.push(token)
+          })
+        })
+      }
+
+      // Push the final inline tokens to the state
+      for (const token of linkTokenChildrenContent) {
+        const pushedToken = state.push(token.type, token.tag, token.nesting)
+        pushedToken.content = token.content
+      }
 
       // and link_close tokens
       state.push('link_close', 'a', -1)