@oiij/markdown-it 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +195 -46
  2. package/dist/index.d.mts +4 -4
  3. package/dist/index.mjs +4 -10
  4. package/package.json +9 -9
package/README.md CHANGED
@@ -1,90 +1,239 @@
1
- # Use Markdown-it 🚀
1
+ # @oiij/markdown-it
2
2
 
3
3
  [![NPM version](https://img.shields.io/npm/v/@oiij/markdown-it)](https://www.npmjs.com/package/@oiij/markdown-it)
4
4
  [![MIT-license](https://img.shields.io/npm/l/@oiij/markdown-it)](https://github.com/oiij/use/blob/main/packages/markdown-it/LICENSE)
5
5
 
6
- ## 项目简介 📦
6
+ ## 简介
7
7
 
8
- Use Markdown-it 是基于 markdown-it 的 Vue 3 封装，提供便捷的 Markdown 渲染功能，帮助开发者在应用中快速渲染 Markdown 内容。
8
+ Use Markdown-it 是基于 markdown-it 的 Vue 3 组合式函数封装，提供便捷的 Markdown 渲染功能，帮助开发者在应用中快速渲染 Markdown 内容。
9
9
 
10
- ## 功能特点 ✨
10
+ ## 特点
11
11
 
12
- ### Markdown 渲染 📝
12
+ ### 📝 Markdown 渲染
13
13
 
14
- - ✨ 支持 CommonMark 和 GitHub Flavored Markdown
15
- - 🎨 提供丰富的插件生态
14
+ - ✅ 支持 CommonMark 和 GitHub Flavored Markdown
15
+ - 🛡️ 支持 DOM 净化（XSS 防护）
16
16
  - ⚡ 高性能渲染引擎
17
17
 
18
- ### 模块化设计 🧩
18
+ ### 🔄 响应式设计
19
19
 
20
- - 📁 采用模块化架构，组件独立封装
21
- - 📦 支持按需导入，减小打包体积
22
- - 🔧 清晰的文件结构，易于维护和扩展
20
+ - 🔁 支持响应式内容更新
21
+ - 🖐️ 支持手动渲染模式
22
+ - 🔗 自动同步 HTML 内容
23
23
 
24
- ### 类型安全 🔒
24
+ ### 🔒 类型安全
25
25
 
26
26
  - 📝 完整的 TypeScript 类型定义
27
27
  - 💡 提供准确的类型推断和代码提示
28
- - 🎯 支持 Vue 3 的 Composition API 类型系统
28
+ - ⚡ 支持 Vue 3 的 Composition API 类型系统
29
29
 
30
- ### 轻量高效 ⚡
31
-
32
- - 🚀 核心代码精简，无额外依赖
33
- - 🏃 优化的性能表现，最小化运行时开销
34
- - 📦 支持 Tree Shaking，进一步减小打包体积
35
-
36
- ## 安装 📥
37
-
38
- ### 使用 pnpm 🐱
30
+ ## 安装
39
31
 
40
32
  ```bash
33
+ # 使用 pnpm
41
34
  pnpm add @oiij/markdown-it
42
- ```
43
-
44
- ### 使用 npm 📦
45
35
 
46
- ```bash
36
+ # 使用 npm
47
37
  npm install @oiij/markdown-it
48
- ```
49
-
50
- ### 使用 yarn 🧶
51
38
 
52
- ```bash
39
+ # 使用 yarn
53
40
  yarn add @oiij/markdown-it
54
41
  ```
55
42
 
56
- ## 快速开始 🌟
43
+ ## 依赖
44
+
45
+ - `vue`: ^3.0.0
46
+ - `@vueuse/core`: ^10.0.0
47
+ - `markdown-it`: ^14.0.0
48
+ - `dompurify`: ^3.0.0
49
+
50
+ ## 示例
57
51
 
58
52
  ### 基础使用
59
53
 
60
54
  ```vue
61
55
  <script setup>
62
- import { UseMarkdownIt } from '@oiij/markdown-it'
56
+ import { useMarkdownIt } from '@oiij/markdown-it'
57
+ import { useTemplateRef } from 'vue'
58
+
59
+ const { html } = useMarkdownIt(useTemplateRef('content'), {
60
+ value: '# Hello World\n\n这是一段 **Markdown** 内容'
61
+ })
62
+ </script>
63
+
64
+ <template>
65
+ <div ref="content" />
66
+ </template>
67
+ ```
68
+
69
+ ### 响应式内容
70
+
71
+ ```vue
72
+ <script setup>
73
+ import { useMarkdownIt } from '@oiij/markdown-it'
74
+ import { ref, useTemplateRef } from 'vue'
75
+
76
+ const content = ref('# 标题\n\n这是一段内容')
77
+
78
+ const { value, html } = useMarkdownIt(useTemplateRef('render'), {
79
+ value: content
80
+ })
63
81
  </script>
64
82
 
65
83
  <template>
66
- <UseMarkdownIt content="# Hello World" />
84
+ <textarea v-model="content" />
85
+ <div ref="render" />
86
+ <p>渲染的 HTML: {{ html }}</p>
67
87
  </template>
68
88
  ```
69
89
 
70
- ## 在线文档 📚
90
+ ### 手动渲染
91
+
92
+ ```vue
93
+ <script setup>
94
+ import { useMarkdownIt } from '@oiij/markdown-it'
95
+ import { ref, useTemplateRef } from 'vue'
96
+
97
+ const content = ref('# 标题')
98
+
99
+ const { html, render } = useMarkdownIt(useTemplateRef('render'), {
100
+ value: content,
101
+ manual: true
102
+ })
103
+
104
+ function handleRender() {
105
+ render()
106
+ }
107
+ </script>
71
108
 
72
- [在线文档](https://oiij-use.vercel.app/markdown-it/markdown-it) 📖
109
+ <template>
110
+ <textarea v-model="content" />
111
+ <button @click="handleRender">
112
+ 渲染
113
+ </button>
114
+ <div ref="render" />
115
+ </template>
116
+ ```
73
117
 
74
- ## 贡献指南 🤝
118
+ ### 禁用 DOM 净化
75
119
 
76
- 欢迎贡献代码、报告问题或提出新功能建议！
120
+ ```vue
121
+ <script setup>
122
+ import { useMarkdownIt } from '@oiij/markdown-it'
123
+ import { useTemplateRef } from 'vue'
77
124
 
78
- 1. Fork 本仓库 🍴
79
- 2. 创建您的特性分支 (`git checkout -b feature/amazing-feature`) 🌿
80
- 3. 提交您的更改 (`git commit -m 'Add some amazing feature'`) 💾
81
- 4. 推送到分支 (`git push origin feature/amazing-feature`) 🚀
82
- 5. 打开一个 Pull Request 📥
125
+ const { html } = useMarkdownIt(useTemplateRef('render'), {
126
+ value: '<script>alert("xss")<\/script>',
127
+ domPurify: false // 禁用 DOM 净化（不推荐）
128
+ })
129
+ </script>
130
+ ```
83
131
 
84
- ## 许可证 📄
132
+ ### 自定义 MarkdownIt 配置
85
133
 
86
- 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 📑
134
+ ````vue
135
+ <script setup>
136
+ import { useMarkdownIt } from '@oiij/markdown-it'
137
+ import { useTemplateRef } from 'vue'
138
+
139
+ const { html } = useMarkdownIt(useTemplateRef('render'), {
140
+ value: '# Hello\n\n```js\nconsole.log("code")\n```',
141
+ markdownItOptions: {
142
+ html: true,
143
+ linkify: true,
144
+ typographer: true,
145
+ breaks: true
146
+ }
147
+ })
148
+ </script>
149
+ ````
150
+
151
+ ## API
152
+
153
+ ### `useMarkdownIt(templateRef?, options?)`
154
+
155
+ 使用 MarkdownIt 渲染 Markdown 内容。
156
+
157
+ #### 参数
158
+
159
+ | 参数 | 类型 | 说明 |
160
+ | ------------- | -------------------------- | -------------------------- |
161
+ | `templateRef` | `TemplateRef<HTMLElement>` | 渲染容器的模板引用（可选） |
162
+ | `options` | `UseMarkDownItOptions` | 配置选项 |
163
+
164
+ #### UseMarkDownItOptions
165
+
166
+ | 选项 | 类型 | 默认值 | 说明 |
167
+ | ------------------- | -------------------------- | ------- | ------------------- |
168
+ | `value` | `MaybeRefOrGetter<string>` | - | Markdown 内容 |
169
+ | `manual` | `boolean` | `false` | 是否手动渲染 |
170
+ | `domPurify` | `boolean` | `true` | 是否使用 DOM 净化 |
171
+ | `markdownItOptions` | `Options` | - | MarkdownIt 配置选项 |
172
+
173
+ #### 返回值
174
+
175
+ | 属性 | 类型 | 说明 |
176
+ | ---------------- | -------------------------- | --------------- |
177
+ | `templateRef` | `TemplateRef<HTMLElement>` | 容器引用 |
178
+ | `value` | `Ref<string>` | Markdown 内容 |
179
+ | `html` | `Ref<string>` | 渲染后的 HTML |
180
+ | `markdownItInst` | `MarkdownIt` | MarkdownIt 实例 |
181
+ | `render(value?)` | `Function` | 渲染方法 |
182
+
183
+ ### `render(value?)`
184
+
185
+ 手动渲染 Markdown 内容。
186
+
187
+ #### 参数
188
+
189
+ | 参数 | 类型 | 说明 |
190
+ | ------- | -------- | ------------------------------ |
191
+ | `value` | `string` | 要渲染的 Markdown 内容（可选） |
192
+
193
+ #### 返回值
194
+
195
+ | 类型 | 说明 |
196
+ | -------- | ------------------ |
197
+ | `string` | 渲染后的 HTML 内容 |
198
+
199
+ ## 类型定义
200
+
201
+ ```ts
202
+ import type { Options } from 'markdown-it'
203
+ import type { MaybeRefOrGetter, TemplateRef } from 'vue'
204
+
205
+ export type UseMarkDownItOptions = {
206
+ /**
207
+ * Markdown 内容
208
+ */
209
+ value?: MaybeRefOrGetter<string>
210
+ /**
211
+ * 是否手动渲染
212
+ * @default false
213
+ */
214
+ manual?: boolean
215
+ /**
216
+ * 是否使用 DOM 净化
217
+ * @default true
218
+ */
219
+ domPurify?: boolean
220
+ /**
221
+ * MarkdownIt 选项
222
+ */
223
+ markdownItOptions?: Options
224
+ }
225
+
226
+ export type MarkdownItReturns = {
227
+ templateRef?: TemplateRef<HTMLElement>
228
+ value: Ref<string>
229
+ html: Ref<string>
230
+ markdownItInst: MarkdownIt
231
+ render: (value?: string) => string
232
+ }
233
+
234
+ export declare function useMarkdownIt(templateRef?: TemplateRef<HTMLElement>, options?: UseMarkDownItOptions): MarkdownItReturns
235
+ ```
87
236
 
88
- ## 联系方式 📞
237
+ ## 在线文档
89
238
 
90
- - GitHub: [https://github.com/Eiog/@oiij/markdown-it](https://github.com/Eiog/@oiij/markdown-it) 🌟
239
+ [在线文档](https://oiij-use.vercel.app/markdown-it/markdown-it)
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import markdownIt, { Options } from "markdown-it";
2
- import * as vue0 from "vue";
2
+ import * as vue from "vue";
3
3
  import { MaybeRefOrGetter, TemplateRef } from "vue";
4
4
 
5
5
  //#region src/index.d.ts
@@ -51,9 +51,9 @@ type UseMarkDownItOptions = {
51
51
  * ```
52
52
  */
53
53
  declare function useMarkdownIt(templateRef?: TemplateRef<HTMLElement>, options?: UseMarkDownItOptions): {
54
- templateRef: Readonly<vue0.ShallowRef<HTMLElement | null>> | undefined;
55
- value: vue0.Ref<string | undefined, string | undefined>;
56
- html: vue0.Ref<string, string>;
54
+ templateRef: Readonly<vue.ShallowRef<HTMLElement | null>> | undefined;
55
+ value: vue.Ref<string | undefined, string | undefined>;
56
+ html: vue.Ref<string, string>;
57
57
  markdownItInst: markdownIt;
58
58
  render: (value?: string) => string;
59
59
  };
package/dist/index.mjs CHANGED
@@ -1,9 +1,7 @@
1
1
  import DOMPurify from "dompurify";
2
2
  import markdownIt from "markdown-it";
3
3
  import { onMounted, onUnmounted, ref, toValue, watch, watchEffect } from "vue";
4
- import "@vueuse/core";
5
-
6
- //#region ../_utils/custom-watch.ts
4
+ //#region src/_utils.ts
7
5
  function watchRefOrGetter(value, callback) {
8
6
  const refValue = ref(toValue(value));
9
7
  watchEffect(() => {
@@ -14,7 +12,6 @@ function watchRefOrGetter(value, callback) {
14
12
  });
15
13
  return refValue;
16
14
  }
17
-
18
15
  //#endregion
19
16
  //#region src/index.ts
20
17
  /**
@@ -43,9 +40,7 @@ function watchRefOrGetter(value, callback) {
43
40
  */
44
41
  function useMarkdownIt(templateRef, options) {
45
42
  const { value, manual = false, domPurify = true, markdownItOptions } = options ?? {};
46
- const valueRef = watchRefOrGetter(value, () => {
47
- if (!manual) render();
48
- });
43
+ const valueRef = watchRefOrGetter(value, () => !manual && render());
49
44
  const htmlRef = ref("");
50
45
  const markdownItInst = markdownIt({ ...markdownItOptions });
51
46
  /**
@@ -64,7 +59,7 @@ function useMarkdownIt(templateRef, options) {
64
59
  * ```
65
60
  */
66
61
  function render(value) {
67
- if (value !== void 0 && value !== valueRef.value) valueRef.value = value;
62
+ if (value !== void 0) valueRef.value = value;
68
63
  const mdValue = markdownItInst.render(valueRef.value ?? "");
69
64
  htmlRef.value = domPurify ? DOMPurify.sanitize(mdValue) : mdValue;
70
65
  if (templateRef?.value) templateRef.value.innerHTML = htmlRef.value;
@@ -84,6 +79,5 @@ function useMarkdownIt(templateRef, options) {
84
79
  render
85
80
  };
86
81
  }
87
-
88
82
  //#endregion
89
- export { useMarkdownIt };
83
+ export { useMarkdownIt };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@oiij/markdown-it",
3
3
  "type": "module",
4
- "version": "0.0.13",
4
+ "version": "0.0.15",
5
5
  "description": "A Vue Composable for markdown-it",
6
6
  "author": "oiij",
7
7
  "license": "MIT",
@@ -26,17 +26,17 @@
26
26
  "package.json"
27
27
  ],
28
28
  "peerDependencies": {
29
- "@vueuse/core": "^14.1.0",
30
- "dompurify": "^3.3.1",
31
- "markdown-it": "^14.1.0",
32
- "vue": "^3.5.27"
29
+ "@vueuse/core": "^14.2.1",
30
+ "dompurify": "^3.3.3",
31
+ "markdown-it": "^14.1.1",
32
+ "vue": "^3.5.30"
33
33
  },
34
34
  "devDependencies": {
35
35
  "@types/markdown-it": "^14.1.2",
36
- "@vueuse/core": "^14.1.0",
37
- "dompurify": "^3.3.1",
38
- "markdown-it": "^14.1.0",
39
- "vue": "^3.5.27"
36
+ "@vueuse/core": "^14.2.1",
37
+ "dompurify": "^3.3.3",
38
+ "markdown-it": "^14.1.1",
39
+ "vue": "^3.5.30"
40
40
  },
41
41
  "publishConfig": {
42
42
  "access": "public"