@maz-ui/mcp 5.0.0-beta.24 → 5.0.0-beta.26
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.
package/dist/mcp.mjs
CHANGED
|
@@ -7,7 +7,7 @@ import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs';
|
|
|
7
7
|
import { resolve, join, dirname } from 'node:path';
|
|
8
8
|
import { fileURLToPath } from 'node:url';
|
|
9
9
|
|
|
10
|
-
const version = "5.0.0-beta.
|
|
10
|
+
const version = "5.0.0-beta.26";
|
|
11
11
|
|
|
12
12
|
class MetadataExtractor {
|
|
13
13
|
extract(name, type, content, manualTags = []) {
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
## Props
|
|
2
|
+
|
|
3
|
+
| Name | Description | Type | Required | Default |
|
|
4
|
+
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | -------- | ----------- |
|
|
5
|
+
| **style** | Style attribute of the component root element | `Native type` | No | `undefined` |
|
|
6
|
+
| **class** | Class attribute of the component root element | `Native type` | No | `undefined` |
|
|
7
|
+
| **model-value** | `v-model` <br/> | `string` | No | `undefined` |
|
|
8
|
+
| **id** | The id of the textarea | `string` | No | `undefined` |
|
|
9
|
+
| **name** | The name of the textarea | `string` | No | `undefined` |
|
|
10
|
+
| **label** | Static label displayed above the editor | `string` | No | `undefined` |
|
|
11
|
+
| **placeholder** | The placeholder of the textarea | `string` | No | `undefined` |
|
|
12
|
+
| **required** | If the editor is required | `boolean` | No | `undefined` |
|
|
13
|
+
| **disabled** | If the editor is disabled | `boolean` | No | `undefined` |
|
|
14
|
+
| **readonly** | If the editor is readonly | `boolean` | No | `undefined` |
|
|
15
|
+
| **error** | If the editor has an error | `boolean` | No | `undefined` |
|
|
16
|
+
| **success** | If the editor has a success | `boolean` | No | `undefined` |
|
|
17
|
+
| **warning** | If the editor has a warning | `boolean` | No | `undefined` |
|
|
18
|
+
| **color** | The color of the editor | `MazColor` | No | `undefined` |
|
|
19
|
+
| **rounded-size** | Size radius of the component's border | `MazRoundedSize` | No | `md` |
|
|
20
|
+
| **top-label** | Static label displayed above the editor. Unlike a floating label, this remains fixed | `string` | No | `undefined` |
|
|
21
|
+
| **assistive-text** | Helper text displayed below the editor to provide additional context or validation feedback<br/>**Example:** `"Markdown is supported"` | `string` | No | `undefined` |
|
|
22
|
+
| **toolbar** | Show the formatting toolbar. Pass `true` for the full toolbar, or an ordered array of action keys to display only a subset (and control their order). | `boolean \| MazMarkdownEditorToolbarAction[]` | No | `false` |
|
|
23
|
+
| **line-numbers** | Display line numbers in a gutter on the left of the editor | `boolean` | No | `false` |
|
|
24
|
+
| **shortcuts** | Enable keyboard shortcuts for the toolbar actions (e.g. Cmd/Ctrl+B for bold). | `boolean` | No | `true` |
|
|
25
|
+
| **sanitize** | Sanitize the rendered preview HTML with DOMPurify | `boolean` | No | `true` |
|
|
26
|
+
| **render-function** | Custom markdown renderer. Receives the raw markdown and returns an HTML string (sync or async). Falls back to `marked` when omitted. The result is still sanitized when `sanitize` is enabled. | `TSFunctionType` | No | `undefined` |
|
|
27
|
+
| **marked-options** | Options forwarded to `marked` when using the default renderer | `Record` | No | `undefined` |
|
|
28
|
+
| **rows** | Minimum number of visible rows of the editor textarea | `number` | No | `6` |
|
|
29
|
+
| **translations** | Custom translations for the component. Override any key independently. | `DeepPartial<MazUiTranslationsNestedSchema['markdownEditor']>` | No | `undefined` |
|
|
30
|
+
|
|
31
|
+
## Events
|
|
32
|
+
|
|
33
|
+
| Event name | Properties | Description |
|
|
34
|
+
| ------------------ | ---------------------------------------------------- | --------------------------------------- |
|
|
35
|
+
| update:model-value | **value** `string \| undefined` - The markdown value | Emitted when the markdown value changes |
|
|
36
|
+
| input | **value** `string \| undefined` - The markdown value | Emitted when the markdown value changes |
|
|
37
|
+
| focus | **event** `FocusEvent` - The focus event | Emitted when the textarea is focused |
|
|
38
|
+
| blur | **event** `FocusEvent` - The blur event | Emitted when the textarea is blurred |
|
|
39
|
+
| change | **event** `Event` - The change event | Emitted when the textarea value changes |
|
|
40
|
+
|
|
41
|
+
## Slots
|
|
42
|
+
|
|
43
|
+
| Name | Description | Bindings |
|
|
44
|
+
| ------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
45
|
+
| label | Replace the static label displayed above the editor | |
|
|
46
|
+
| toolbar | Replace the toolbar content (only rendered when the toolbar is enabled and not in preview mode) | **mode** `MazMarkdownEditorMode` - The current editor mode<br/>**wrap-selection** `Function` - Wrap the current selection with the given markers<br/>**prefix-lines** `Function` - Prefix every selected line with the given string<br/>**apply-heading** `Function` - Apply a heading of the given level to the selected lines<br/>**insert-link** `Function` - Insert a markdown link at the selection<br/>**insert-image** `Function` - Insert a markdown image at the selection<br/>**insert-code-block** `Function` - Insert a fenced code block at the selection<br/>**insert-table** `Function` - Insert a markdown table at the selection |
|
|
47
|
+
| empty-preview | Content displayed in the preview pane when there is nothing to render | |
|
|
48
|
+
|
|
49
|
+
## Expose
|
|
50
|
+
|
|
51
|
+
### textarea
|
|
52
|
+
|
|
53
|
+
> The underlying textarea element
|
|
54
|
+
|
|
55
|
+
### mode
|
|
56
|
+
|
|
57
|
+
> The current editor mode (write / preview / split)
|
|
58
|
+
|
|
59
|
+
### renderPreview
|
|
60
|
+
|
|
61
|
+
> Programmatically re-render the markdown preview
|
|
62
|
+
|
|
63
|
+
### focus
|
|
64
|
+
|
|
65
|
+
> Focus the editor textarea
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
| **offset** | Distance between trigger and popover in pixels | `number` | No | `8` | - |
|
|
15
15
|
| **delay** | Delay before showing/hiding in milliseconds | `number` | No | `0` | - |
|
|
16
16
|
| **hover-delay** | Delay before closing on hover in milliseconds | `number` | No | `150` | - |
|
|
17
|
-
| **transition** | CSS transition name for animations
|
|
17
|
+
| **transition** | **CSS transition name for animations** <br/> <br/>'scale-pop' \| 'scale-fade' for default transitions. 'scale-pop' is a pop effect, 'scale-fade' is a fade effect.<br/> | `"scale-pop" \| "scale-fade" \| string` | No | `scale-pop` | `scale-pop' \| 'scale-fade' \| string` |
|
|
18
18
|
| **teleport-to** | Teleport target selector | `string` | No | `body` | - |
|
|
19
19
|
| **overlay-class** | Additional CSS classes for the overlay wrapper | `Native type` | No | `undefined` | - |
|
|
20
20
|
| **panel-class** | Additional CSS classes for the popover panel | `Native type` | No | `undefined` | - |
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
|
|
17
17
|
## Events
|
|
18
18
|
|
|
19
|
-
| Event name
|
|
20
|
-
|
|
|
21
|
-
| update:
|
|
22
|
-
| click-step
|
|
19
|
+
| Event name | Properties | Description |
|
|
20
|
+
| ------------------ | ------------------------------------------------- | ---------------------------------------- |
|
|
21
|
+
| update:model-value | **value** `mixed` - The new active step index | Emitted when the active step changes |
|
|
22
|
+
| click-step | **payload** `mixed` - The step data and its index | Emitted when a clickable step is clicked |
|
|
23
23
|
|
|
24
24
|
## Slots
|
|
25
25
|
|
|
@@ -0,0 +1,369 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: MazMarkdownEditor
|
|
3
|
+
description: MazMarkdownEditor is a GitHub-style markdown editor with Write/Preview/Split tabs, a configurable formatting toolbar, optional line numbers, and a sanitized preview. It shares the same states, labels and theming as MazTextarea, is SSR-friendly, and supports custom renderers.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# {{ $frontmatter.title }}
|
|
7
|
+
|
|
8
|
+
{{ $frontmatter.description }}
|
|
9
|
+
|
|
10
|
+
<!--@include: ./../../.vitepress/mixins/getting-started.md-->
|
|
11
|
+
|
|
12
|
+
## Installation requirement
|
|
13
|
+
|
|
14
|
+
The preview relies on [`marked`](https://marked.js.org) for parsing and [`dompurify`](https://github.com/cure53/DOMPurify) for sanitization. Both are loaded lazily (only when the preview is rendered), so install them in your project:
|
|
15
|
+
|
|
16
|
+
::: code-group
|
|
17
|
+
|
|
18
|
+
```bash [pnpm]
|
|
19
|
+
pnpm add marked dompurify
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```bash [npm]
|
|
23
|
+
npm install marked dompurify
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```bash [yarn]
|
|
27
|
+
yarn add marked dompurify
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
:::
|
|
31
|
+
|
|
32
|
+
If they are not installed, the preview falls back to a safe, escaped plain-text block. You can also provide your own renderer with the [`renderFunction`](#custom-renderer) prop to avoid these dependencies entirely.
|
|
33
|
+
|
|
34
|
+
## Basic usage
|
|
35
|
+
|
|
36
|
+
The component exposes a `v-model` bound to the raw markdown string and two tabs: **Write** (textarea) and **Preview** (rendered, sanitized HTML).
|
|
37
|
+
|
|
38
|
+
<ComponentDemo>
|
|
39
|
+
<MazMarkdownEditor v-model="basic" placeholder="markdown goes here" />
|
|
40
|
+
|
|
41
|
+
<template #code>
|
|
42
|
+
|
|
43
|
+
```vue
|
|
44
|
+
<template>
|
|
45
|
+
<MazMarkdownEditor v-model="content" />
|
|
46
|
+
</template>
|
|
47
|
+
|
|
48
|
+
<script lang="ts" setup>
|
|
49
|
+
import { ref } from 'vue'
|
|
50
|
+
import MazMarkdownEditor from 'maz-ui/components/MazMarkdownEditor'
|
|
51
|
+
|
|
52
|
+
const content = ref('# Hello maz-ui\n\nThis is **markdown** with a [link](https://maz-ui.com).')
|
|
53
|
+
</script>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
</template>
|
|
57
|
+
</ComponentDemo>
|
|
58
|
+
|
|
59
|
+
## Toolbar
|
|
60
|
+
|
|
61
|
+
The formatting toolbar is opt-in. Set `toolbar` to `true` to display the full toolbar. Buttons act on the current textarea selection and preserve the native undo/redo history (`Cmd/Ctrl + Z`).
|
|
62
|
+
|
|
63
|
+
<ComponentDemo>
|
|
64
|
+
<MazMarkdownEditor v-model="withToolbar" toolbar />
|
|
65
|
+
|
|
66
|
+
<template #code>
|
|
67
|
+
|
|
68
|
+
```vue
|
|
69
|
+
<template>
|
|
70
|
+
<MazMarkdownEditor v-model="content" toolbar />
|
|
71
|
+
</template>
|
|
72
|
+
|
|
73
|
+
<script lang="ts" setup>
|
|
74
|
+
import { ref } from 'vue'
|
|
75
|
+
import MazMarkdownEditor from 'maz-ui/components/MazMarkdownEditor'
|
|
76
|
+
|
|
77
|
+
const content = ref('Select some text and click **Bold**.')
|
|
78
|
+
</script>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
</template>
|
|
82
|
+
</ComponentDemo>
|
|
83
|
+
|
|
84
|
+
### Available actions
|
|
85
|
+
|
|
86
|
+
The full toolbar exposes the following action keys:
|
|
87
|
+
|
|
88
|
+
| Key | Result |
|
|
89
|
+
| --- | --- |
|
|
90
|
+
| `heading` | Heading dropdown (`#`, `##`, `###`) |
|
|
91
|
+
| `bold` | `**bold**` |
|
|
92
|
+
| `italic` | `_italic_` |
|
|
93
|
+
| `strikethrough` | `~~strikethrough~~` |
|
|
94
|
+
| `quote` | `> quote` |
|
|
95
|
+
| `code` | `` `inline code` `` |
|
|
96
|
+
| `codeBlock` | fenced ` ``` ` code block |
|
|
97
|
+
| `link` | `[text](url)` |
|
|
98
|
+
| `image` | `` |
|
|
99
|
+
| `bulletList` | `- item` |
|
|
100
|
+
| `orderedList` | `1. item` |
|
|
101
|
+
| `checkList` | `- [ ] task` |
|
|
102
|
+
| `table` | markdown table skeleton |
|
|
103
|
+
|
|
104
|
+
### Configure the toolbar
|
|
105
|
+
|
|
106
|
+
Pass an **ordered array of action keys** to display only a subset (and control their order):
|
|
107
|
+
|
|
108
|
+
<ComponentDemo>
|
|
109
|
+
<MazMarkdownEditor v-model="withToolbarConfig" :toolbar="['heading', 'bold', 'italic', 'link', 'codeBlock']" />
|
|
110
|
+
|
|
111
|
+
<template #code>
|
|
112
|
+
|
|
113
|
+
```vue
|
|
114
|
+
<template>
|
|
115
|
+
<MazMarkdownEditor
|
|
116
|
+
v-model="content"
|
|
117
|
+
:toolbar="['heading', 'bold', 'italic', 'link', 'codeBlock']"
|
|
118
|
+
/>
|
|
119
|
+
</template>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
</template>
|
|
123
|
+
</ComponentDemo>
|
|
124
|
+
|
|
125
|
+
## Keyboard shortcuts
|
|
126
|
+
|
|
127
|
+
Classic markdown shortcuts are enabled by default and work whenever the textarea is focused. They preserve the native undo/redo history. The toolbar buttons also display their shortcut in the tooltip. Use `mod` for `Cmd` on macOS and `Ctrl` elsewhere.
|
|
128
|
+
|
|
129
|
+
| Shortcut | Action |
|
|
130
|
+
| --- | --- |
|
|
131
|
+
| `mod + B` | Bold |
|
|
132
|
+
| `mod + I` | Italic |
|
|
133
|
+
| `mod + Shift + X` | Strikethrough |
|
|
134
|
+
| `mod + K` | Link |
|
|
135
|
+
| `mod + E` | Inline code |
|
|
136
|
+
| `mod + Shift + E` | Code block |
|
|
137
|
+
| `mod + Shift + .` | Quote |
|
|
138
|
+
| `mod + Shift + 8` | Bulleted list |
|
|
139
|
+
| `mod + Shift + 7` | Numbered list |
|
|
140
|
+
| `mod + Shift + L` | Task list |
|
|
141
|
+
| `mod + Alt + 1/2/3` | Heading 1/2/3 |
|
|
142
|
+
|
|
143
|
+
Disable them with `:shortcuts="false"`:
|
|
144
|
+
|
|
145
|
+
```vue
|
|
146
|
+
<template>
|
|
147
|
+
<MazMarkdownEditor v-model="content" toolbar :shortcuts="false" />
|
|
148
|
+
</template>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
::: tip
|
|
152
|
+
Image and table insertions have no default shortcut (to avoid clashing with browser shortcuts). Use the toolbar buttons or the `toolbar` slot helpers for those.
|
|
153
|
+
:::
|
|
154
|
+
|
|
155
|
+
## List continuation
|
|
156
|
+
|
|
157
|
+
Pressing <kbd>Enter</kbd> inside a list automatically inserts the next marker, just like a desktop markdown editor:
|
|
158
|
+
|
|
159
|
+
- Bulleted lists (`-`, `*`, `+`) repeat the marker.
|
|
160
|
+
- Numbered lists increment the index (`1.` → `2.`).
|
|
161
|
+
- Task lists insert a fresh unchecked box (`- [ ] `).
|
|
162
|
+
- Indentation is preserved.
|
|
163
|
+
|
|
164
|
+
Pressing <kbd>Enter</kbd> again on an empty item removes the marker and exits the list. This works out of the box, no configuration required.
|
|
165
|
+
|
|
166
|
+
## Label & assistive text
|
|
167
|
+
|
|
168
|
+
Like `MazTextarea`, the editor supports a static `top-label` (or `label`), the `required` asterisk and an `assistive-text` displayed below the editor.
|
|
169
|
+
|
|
170
|
+
<ComponentDemo>
|
|
171
|
+
<MazMarkdownEditor
|
|
172
|
+
v-model="withLabel"
|
|
173
|
+
top-label="Description"
|
|
174
|
+
placeholder="Markdown goes here"
|
|
175
|
+
assistive-text="Markdown is supported"
|
|
176
|
+
required
|
|
177
|
+
/>
|
|
178
|
+
|
|
179
|
+
<template #code>
|
|
180
|
+
|
|
181
|
+
```vue
|
|
182
|
+
<template>
|
|
183
|
+
<MazMarkdownEditor
|
|
184
|
+
v-model="content"
|
|
185
|
+
top-label="Description"
|
|
186
|
+
assistive-text="Markdown is supported"
|
|
187
|
+
required
|
|
188
|
+
/>
|
|
189
|
+
</template>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
</template>
|
|
193
|
+
</ComponentDemo>
|
|
194
|
+
|
|
195
|
+
## States
|
|
196
|
+
|
|
197
|
+
Use `error`, `success`, `warning`, `disabled` and `readonly` to reflect validation states, consistent with the other form components.
|
|
198
|
+
|
|
199
|
+
<ComponentDemo>
|
|
200
|
+
<div class="maz:flex maz:flex-col maz:gap-4">
|
|
201
|
+
<MazMarkdownEditor v-model="stateError" error assistive-text="This field has an error" />
|
|
202
|
+
<MazMarkdownEditor v-model="stateSuccess" success assistive-text="Looks good!" />
|
|
203
|
+
<MazMarkdownEditor v-model="stateDisabled" disabled />
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
<template #code>
|
|
207
|
+
|
|
208
|
+
```vue
|
|
209
|
+
<template>
|
|
210
|
+
<MazMarkdownEditor v-model="content" error assistive-text="This field has an error" />
|
|
211
|
+
<MazMarkdownEditor v-model="content" success assistive-text="Looks good!" />
|
|
212
|
+
<MazMarkdownEditor v-model="content" disabled />
|
|
213
|
+
</template>
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
</template>
|
|
217
|
+
</ComponentDemo>
|
|
218
|
+
|
|
219
|
+
## Split mode
|
|
220
|
+
|
|
221
|
+
A third tab displays the editor and the preview side by side. Switch to it from the toolbar tabs, or control it with `v-model:mode` (`'write' | 'preview' | 'split'`). On small screens the two panes stack vertically.
|
|
222
|
+
|
|
223
|
+
<ComponentDemo>
|
|
224
|
+
<MazMarkdownEditor v-model="splitContent" mode="split" />
|
|
225
|
+
|
|
226
|
+
<template #code>
|
|
227
|
+
|
|
228
|
+
```vue
|
|
229
|
+
<template>
|
|
230
|
+
<MazMarkdownEditor v-model="content" mode="split" />
|
|
231
|
+
</template>
|
|
232
|
+
|
|
233
|
+
<script lang="ts" setup>
|
|
234
|
+
import { ref } from 'vue'
|
|
235
|
+
import MazMarkdownEditor from 'maz-ui/components/MazMarkdownEditor'
|
|
236
|
+
|
|
237
|
+
const content = ref('# Split view\n\nType on the left, see the **preview** on the right.')
|
|
238
|
+
</script>
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
</template>
|
|
242
|
+
</ComponentDemo>
|
|
243
|
+
|
|
244
|
+
## Line numbers
|
|
245
|
+
|
|
246
|
+
Enable the `line-numbers` prop to display a gutter on the left of the editor. Numbers reflect logical lines and stay in sync with the textarea scroll.
|
|
247
|
+
|
|
248
|
+
<ComponentDemo>
|
|
249
|
+
<MazMarkdownEditor v-model="lineNumbersContent" line-numbers />
|
|
250
|
+
|
|
251
|
+
<template #code>
|
|
252
|
+
|
|
253
|
+
```vue
|
|
254
|
+
<template>
|
|
255
|
+
<MazMarkdownEditor v-model="content" line-numbers />
|
|
256
|
+
</template>
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
</template>
|
|
260
|
+
</ComponentDemo>
|
|
261
|
+
|
|
262
|
+
## Custom renderer {#custom-renderer}
|
|
263
|
+
|
|
264
|
+
Provide a `render-function` to use your own markdown engine (e.g. `markdown-it`, a Nuxt Content renderer, or a server-side pipeline). It receives the raw markdown and returns an HTML string (sync or async). The result is still sanitized when `sanitize` is enabled.
|
|
265
|
+
|
|
266
|
+
<ComponentDemo>
|
|
267
|
+
<MazMarkdownEditor v-model="customRender" :render-function="upperCaseRenderer" />
|
|
268
|
+
|
|
269
|
+
<template #code>
|
|
270
|
+
|
|
271
|
+
```vue
|
|
272
|
+
<template>
|
|
273
|
+
<MazMarkdownEditor v-model="content" :render-function="renderer" />
|
|
274
|
+
</template>
|
|
275
|
+
|
|
276
|
+
<script lang="ts" setup>
|
|
277
|
+
import { ref } from 'vue'
|
|
278
|
+
import MazMarkdownEditor from 'maz-ui/components/MazMarkdownEditor'
|
|
279
|
+
|
|
280
|
+
const content = ref('Rendered by a custom function')
|
|
281
|
+
|
|
282
|
+
function renderer(markdown: string) {
|
|
283
|
+
return `<p>${markdown.toUpperCase()}</p>`
|
|
284
|
+
}
|
|
285
|
+
</script>
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
</template>
|
|
289
|
+
</ComponentDemo>
|
|
290
|
+
|
|
291
|
+
## Sanitization
|
|
292
|
+
|
|
293
|
+
By default, the rendered HTML is sanitized with DOMPurify to prevent XSS. Disabling it (`:sanitize="false"`) renders the raw output of the renderer; only do this when the markdown source is fully trusted.
|
|
294
|
+
|
|
295
|
+
```vue
|
|
296
|
+
<template>
|
|
297
|
+
<!-- Trusted content only -->
|
|
298
|
+
<MazMarkdownEditor v-model="content" :sanitize="false" />
|
|
299
|
+
</template>
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
## Controlled mode
|
|
303
|
+
|
|
304
|
+
The active tab is available through `v-model:mode` (`'write' | 'preview' | 'split'`).
|
|
305
|
+
|
|
306
|
+
```vue
|
|
307
|
+
<template>
|
|
308
|
+
<MazMarkdownEditor v-model="content" v-model:mode="mode" />
|
|
309
|
+
<p>Current tab: {{ mode }}</p>
|
|
310
|
+
</template>
|
|
311
|
+
|
|
312
|
+
<script lang="ts" setup>
|
|
313
|
+
import { ref } from 'vue'
|
|
314
|
+
import MazMarkdownEditor from 'maz-ui/components/MazMarkdownEditor'
|
|
315
|
+
|
|
316
|
+
const content = ref('')
|
|
317
|
+
const mode = ref<'write' | 'preview' | 'split'>('write')
|
|
318
|
+
</script>
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
## Custom translations
|
|
322
|
+
|
|
323
|
+
The tab labels, the empty-preview text and the toolbar button labels come from the `@maz-ui/translations` package (`markdownEditor.*`). You can override any key per-instance with the `translations` prop without touching the global locale:
|
|
324
|
+
|
|
325
|
+
<ComponentDemo>
|
|
326
|
+
<MazMarkdownEditor
|
|
327
|
+
v-model="translated"
|
|
328
|
+
toolbar
|
|
329
|
+
:translations="{ write: 'Édition', preview: 'Aperçu', emptyPreview: 'Rien à afficher' }"
|
|
330
|
+
/>
|
|
331
|
+
|
|
332
|
+
<template #code>
|
|
333
|
+
|
|
334
|
+
```vue
|
|
335
|
+
<template>
|
|
336
|
+
<MazMarkdownEditor
|
|
337
|
+
v-model="content"
|
|
338
|
+
toolbar
|
|
339
|
+
:translations="{ write: 'Édition', preview: 'Aperçu', emptyPreview: 'Rien à afficher' }"
|
|
340
|
+
/>
|
|
341
|
+
</template>
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
</template>
|
|
345
|
+
</ComponentDemo>
|
|
346
|
+
|
|
347
|
+
For app-wide translations, set up the [maz-ui translations plugin](/translations) and the component will pick up your locale automatically.
|
|
348
|
+
|
|
349
|
+
<script lang="ts" setup>
|
|
350
|
+
import { ref } from 'vue'
|
|
351
|
+
|
|
352
|
+
const basic = ref('# Hello maz-ui\n\nThis is **markdown** with a [link](https://maz-ui.com).')
|
|
353
|
+
const withToolbar = ref('Select some text and click **Bold**.')
|
|
354
|
+
const withToolbarConfig = ref('Only a few buttons here.')
|
|
355
|
+
const splitContent = ref('# Split view\n\nType on the left, see the **preview** on the right.')
|
|
356
|
+
const lineNumbersContent = ref('Line one\nLine two\nLine three')
|
|
357
|
+
const withLabel = ref('')
|
|
358
|
+
const stateError = ref('Invalid content')
|
|
359
|
+
const stateSuccess = ref('Valid content')
|
|
360
|
+
const stateDisabled = ref('Disabled editor')
|
|
361
|
+
const customRender = ref('Rendered by a custom function')
|
|
362
|
+
const translated = ref('Localized **markdown** editor.')
|
|
363
|
+
|
|
364
|
+
function upperCaseRenderer(markdown: string) {
|
|
365
|
+
return `<p>${markdown.toUpperCase()}</p>`
|
|
366
|
+
}
|
|
367
|
+
</script>
|
|
368
|
+
|
|
369
|
+
<!--@include: ./../../.vitepress/generated-docs/maz-markdown-editor.doc.md-->
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maz-ui/mcp",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "5.0.0-beta.
|
|
4
|
+
"version": "5.0.0-beta.26",
|
|
5
5
|
"description": "Maz-UI ModelContextProtocol Client",
|
|
6
6
|
"author": "Louis Mazel <me@loicmazuel.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
],
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
45
|
-
"@maz-ui/node": "5.0.0-beta.
|
|
46
|
-
"@maz-ui/utils": "5.0.0-beta.
|
|
45
|
+
"@maz-ui/node": "5.0.0-beta.26",
|
|
46
|
+
"@maz-ui/utils": "5.0.0-beta.25"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@modelcontextprotocol/inspector": "^0.21.2",
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
"ts-node-maintained": "^10.9.5",
|
|
53
53
|
"tsx": "^4.22.3",
|
|
54
54
|
"unbuild": "^3.6.1",
|
|
55
|
-
"@maz-ui/eslint-config": "5.0.0-beta.
|
|
56
|
-
"maz-ui": "5.0.0-beta.
|
|
55
|
+
"@maz-ui/eslint-config": "5.0.0-beta.25",
|
|
56
|
+
"maz-ui": "5.0.0-beta.26"
|
|
57
57
|
},
|
|
58
58
|
"lint-staged": {
|
|
59
59
|
"*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
|