StreamBase

预制的 Base 组件工厂，接收插件数组，返回一个可直接作为 base-component 使用的 Vue 组件。

导出

import { StreamBase, defineStreamBase, MdSupport, LatexSupport } from '@huiol/stream-ui'

StreamBase.with()

const Base = StreamBase.with(supports?: StreamBaseSupport[], options?: DefineStreamBaseOptions)

参数

参数	类型	默认值	说明
supports	StreamBaseSupport[]	[]	插件数组
options.className	string	'stream-base'	根元素类名

示例

<script setup lang="ts">
import { StreamContains, StreamBase, MdSupport, LatexSupport } from '@huiol/stream-ui'

const Base = StreamBase.with([MdSupport, LatexSupport])
</script>

<template>
  <StreamContains :model-value="text" :base-component="Base" />
</template>

defineStreamBase()

StreamBase.with 的底层函数，等价于：

const Base = defineStreamBase({ supports: [MdSupport], className: 'my-base' })

MdSupport

内联 Markdown 转换插件。

输入	输出
`code`	<code>code</code>
**bold**	<strong>bold</strong>
*italic*	<em>italic</em>
[text](url)	<a href="url">text</a>
换行	<br>

默认 match：category === 'text' 或 attrs.format === 'md'。

LatexSupport

内联 LaTeX 转换插件。

输入	输出
$...$	<span class="stream-base-math">...</span>
$$...$$	<span class="stream-base-math display">...</span>

默认 match：category === 'text' 或 attrs.format === 'latex' 或 attrs.format === 'md'。

插件接口

interface StreamBaseSupport {
  name: string
  match?: (ctx: StreamBaseContext) => boolean
  transform?: (html: string, ctx: StreamBaseContext) => string
  render?: (ctx: StreamBaseContext, next: () => VNodeChild[]) => VNodeChild | VNodeChild[]
}

自定义插件示例

const UpperPlugin = {
  name: 'upper',
  match: (ctx) => ctx.block.category === 'text',
  transform: (html) => html.toUpperCase()
}

CLI

npx @huiol/stream-ui add base base-md base-latex

生成：

src/components/ui/
  stream-base.ts
  md-support.ts
  latex-support.ts