feat: add HtmlBlockNode component and parser for HTML block support

Author: Simon-He95

components.d.ts

@@ -23,6 +23,7 @@ declare module 'vue' {
     HardBreakNode: typeof import('./src/components/HardBreakNode/HardBreakNode.vue')['default']
     HeadingNode: typeof import('./src/components/HeadingNode/HeadingNode.vue')['default']
     HighlightNode: typeof import('./src/components/HighlightNode/HighlightNode.vue')['default']
+    HtmlBlockNode: typeof import('./src/components/HtmlBlockNode/HtmlBlockNode.vue')['default']
     ImageNode: typeof import('./src/components/ImageNode/ImageNode.vue')['default']
     InlineCodeNode: typeof import('./src/components/InlineCodeNode/InlineCodeNode.vue')['default']
     InsertNode: typeof import('./src/components/InsertNode/InsertNode.vue')['default']

packages/markdown-parser/src/parser/index.ts

@@ -10,6 +10,7 @@ import { parseDefinitionList } from './node-parsers/definition-list-parser'
 import { parseFootnote } from './node-parsers/footnote-parser'
 import { parseHardBreak } from './node-parsers/hardbreak-parser'
 import { parseHeading } from './node-parsers/heading-parser'
+import { parseHtmlBlock } from './node-parsers/html-block-parser'
 import { parseList } from './node-parsers/list-parser'
 import { parseMathBlock } from './node-parsers/math-block-parser'
 import { parseParagraph } from './node-parsers/paragraph-parser'
@@ -35,6 +36,7 @@ export function parseMarkdownToStructure(
     // 此时 markdown 解析会出错要跳过
     safeMarkdown = safeMarkdown.replace(/(\n\[|\n\()+\n*$/g, '\n')
   }
+
   // Get tokens from markdown-it
   const tokens = md.parse(safeMarkdown, {}) as MarkdownToken[]
   // Defensive: ensure tokens is an array
@@ -113,6 +115,7 @@ export function processTokens(tokens: MarkdownToken[]): ParsedNode[] {
         break
 
       case 'html_block':
+        result.push(parseHtmlBlock(token))
         i += 1
         break
       case 'code_block':

packages/markdown-parser/src/parser/node-parsers/html-block-parser.ts

@@ -0,0 +1,10 @@
+import type { HtmlBlockNode, MarkdownToken } from '../../types'
+
+export function parseHtmlBlock(token: MarkdownToken): HtmlBlockNode {
+  return {
+    type: 'html_block',
+    content: String(token.content ?? ''),
+    raw: String(token.content ?? ''),
+    loading: false,
+  }
+}

packages/markdown-parser/src/types.ts

@@ -55,6 +55,11 @@ export interface CodeBlockNode extends BaseNode {
   raw: string
 }
 
+export interface HtmlBlockNode extends BaseNode {
+  type: 'html_block'
+  content: string
+}
+
 export interface InlineCodeNode extends BaseNode {
   type: 'inline_code'
   code: string
@@ -267,6 +272,7 @@ export type ParsedNode
     | MathInlineNode
     | MathBlockNode
     | ReferenceNode
+    | HtmlBlockNode
     | Record<string, unknown>
 export interface CustomComponents {
   text: unknown

src/components/HtmlBlockNode/HtmlBlockNode.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+  node: {
+    content: string
+    loading?: boolean
+  }
+}>()
+</script>
+
+<template>
+  <div class="html-block-node" v-html="node.content" />
+</template>
+
+<style scoped>
+</style>

src/components/HtmlBlockNode/index.ts

@@ -0,0 +1,8 @@
+import type { App } from 'vue'
+import HtmlBlockNode from './HtmlBlockNode.vue'
+
+HtmlBlockNode.install = (app: App) => {
+  app.component(HtmlBlockNode.__name as string, HtmlBlockNode)
+}
+
+export default HtmlBlockNode

src/components/NodeRenderer/NodeRenderer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { BaseNode, ParsedNode, ParseOptions } from 'stream-markdown-parser'
-import { getMarkdown, parseMarkdownToStructure } from 'stream-markdown-parser'
 import { computed, defineAsyncComponent, ref } from 'vue'
+import { getMarkdown, parseMarkdownToStructure } from '../../../packages/markdown-parser'
 import AdmonitionNode from '../../components/AdmonitionNode'
 import BlockquoteNode from '../../components/BlockquoteNode'
 import CheckboxNode from '../../components/CheckboxNode'
@@ -32,6 +32,7 @@ import TextNode from '../../components/TextNode'
 import ThematicBreakNode from '../../components/ThematicBreakNode'
 import { provideViewportPriority } from '../../composables/viewportPriority'
 import { getCustomNodeComponents } from '../../utils/nodeComponents'
+import HtmlBlockNode from '../HtmlBlockNode/HtmlBlockNode.vue'
 import { MathBlockNodeAsync, MathInlineNodeAsync } from './asyncComponent'
 import FallbackComponent from './FallbackComponent.vue'
 
@@ -161,6 +162,7 @@ const nodeComponents = {
   checkbox_input: CheckboxNode,
   inline_code: InlineCodeNode,
   reference: ReferenceNode,
+  html_block: HtmlBlockNode,
   // 可以添加更多节点类型
   // 例如:custom_node: CustomNode,
   ...getCustomNodeComponents(props.customId),

test/link-parsing.test.ts

@@ -76,7 +76,7 @@ describe('link parsing', () => {
 
   it('test the intermediate state of the link tag', () => {
     const nodes = parseMarkdownToStructure(`<a href="https://example.com">`, md) as any
-    expect(nodes.length).toBe(0)
+    expect(nodes.length).toBe(1)
   })
 
   it('parses link with parentheses and CJK brackets as a single link', () => {