## Requisitos previos
@@ -40,9 +40,9 @@ La extensión se activa cuando abres un archivo `.mdx` o un espacio de trabajo q
## Autocompletado
-Escribe `<` para ver todos los componentes integrados. El autocompletado sugiere las propiedades y los valores de los componentes dentro de las etiquetas.
+Escribe `<` para ver todos los componentes integrados. El autocompletado sugiere las propiedades y los valores de los componentes dentro de las etiquetas, sugerencias de etiquetas de cierre después de ``.
-La extensión sugiere los componentes que importas desde [snippets reutilizables](/es/create/reusable-snippets) junto con los integrados.
+La extensión sugiere los componentes que importas desde [snippets reutilizables](/es/create/reusable-snippets) junto con los integrados. `className`, `id` y `style` se ofrecen en todos los componentes y elementos HTML, y al escribir dentro de `className="…"` se sugieren clases de utilidad de Tailwind, incluidas variantes como `md:` y `hover:`.
## Diagnósticos
@@ -97,6 +97,73 @@ Usa los chevrones del margen para plegar regiones de una página:
La extensión valida `docs.json` contra el [esquema de Mintlify](https://mintlify.com/docs.json).
+
+ ## Modo visual
+
+
+Abre cualquier archivo `.mdx` en Modo visual para editar la página en un editor enriquecido como el del panel de Mintlify, con encabezados, listas, tablas, enlaces, avisos, tarjetas, pasos, pestañas, acordeones, bloques de código e imágenes editables en el sitio.
+
+Para alternar entre el Modo visual y el editor de texto:
+
+- Presiona
Cmd+
Shift+
V (macOS) o
Ctrl+
Shift+
V (Windows).
+- O usa el selector de editor en el extremo derecho de la fila de migas de pan.
+
+Usa el icono de engranaje en la barra de título para elegir con qué editor se abren de forma predeterminada los archivos `.mdx`.
+
+Los atajos de Markdown funcionan mientras escribes (`#` para un encabezado, `-` para un elemento de lista, `**negrita**`, `` `código` ``), y la barra de herramientas y el menú `/` insertan componentes. Las ediciones se escriben de vuelta como MDX a través del mismo conversor que [`mint format`](/es/cli/commands#mint-format). Los componentes que el Modo visual no conoce se conservan tal como están escritos.
+
+
+ ### Formularios de snippets
+
+
+En el Modo visual, un componente importado desde un snippet se muestra como un formulario con una entrada por prop en lugar de una etiqueta opaca. Los campos se infieren a partir de los props desestructurados del componente y sus valores predeterminados, de modo que un valor predeterminado de `true` se convierte en una casilla, `2` en un cuadro numérico, `icon` o `logo` en una ruta de imagen con miniatura, y `href` o `url` en un enlace.
+
+Para controlar las entradas, documenta el componente con un comentario JSDoc `@param` justo antes del export. En archivos `.jsx` y `.tsx`, usa un bloque `/** … */`. En snippets `.mdx`, usa un comentario MDX (`{/* … */}`) para que no se renderice:
+
+```mdx
+{/*
+ A product tile with a price and a call to action.
+ @param {string} name - Product name, shown as the title
+ @param {image} [icon] - Path to a square icon under /images
+ @param {'Free' | 'Pro' | 'Enterprise'} [tier=Free] - Which plan it belongs to
+ @param {number} [seats=1] - Seats included
+ @param {boolean} [featured] - Highlight the card
+ @param {url} [href] - Where the button goes
+ @param {text} [summary] - One or two sentences under the title
+*/}
+export const ProductCard = ({ name, icon, tier = 'Free', seats = 1, featured = false, href, summary, children }) => ( ... );
+```
+
+Los siguientes tipos producen las entradas de formulario correspondientes:
+
+| Tipo | Entrada |
+| ----------------- | -------------------------------------- |
+| `string` | Cuadro de texto |
+| `text` (o `markdown`) | Cuadro de texto multilínea |
+| `boolean` | Casilla de verificación |
+| `number` | Cuadro numérico |
+| `'a' \| 'b'` | Menú desplegable con esos valores |
+| `image` | Cuadro de ruta con miniatura |
+| `url` | Cuadro de enlace |
+| `color` | Cuadro de texto con una muestra |
+| cualquier otro | Expresión `{…}` sin procesar |
+
+Los corchetes (`[name]`) marcan un prop como opcional. Un prop documentado sin corchetes muestra un marcador de requerido. `[name=value]` proporciona un valor predeterminado cuando la desestructuración no tiene ninguno. La primera línea del comentario es la descripción que se muestra en el encabezado del formulario y en el menú **Insert**.
+
+`children` nunca es un campo: el cuerpo de la etiqueta se deja tal como está escrito y se resume debajo del formulario. Cambia al editor de texto para editarlo.
+
+Los snippets importados también aparecen en los menús **+ Insert** y `/`.
+
+
+
+La vista de Mintlify en la barra de actividad refleja el árbol de navegación de tu `docs.json`. Los productos y las pestañas de nivel superior permanecen en la raíz, con su navegación anidada en filas expandibles. La barra lateral usa iconos de `docs.json` y del frontmatter de las páginas, y las etiquetas de las páginas provienen de `sidebarTitle` o `title`. Al seleccionar una página se abre en el Modo visual.
+
+Usa la acción **+** para agregar grupos, pestañas, menús desplegables, anclas, idiomas, productos y versiones. Arrastra filas para reordenarlas o suelta una página sobre un grupo para moverla al inicio de ese grupo. El árbol se mueve de inmediato y luego Mintlify guarda el cambio en `docs.json`.
+
+El árbol sigue a la página activa y se recarga cuando cambian `docs.json` o una página.
+
## Previsualización en tu editor
@@ -105,7 +172,9 @@ Abre un archivo `.mdx` y selecciona el icono de previsualización en la barra de
La barra de herramientas de la previsualización tiene botones de atrás, adelante y recargar, un cuadro de dirección y un interruptor **Follow editor**. Escribe una ruta como `/quickstart` en el cuadro de dirección y presiona
Enter para navegar a esa página. Con **Follow editor** activado, la previsualización cambia de página a medida que cambias de archivo en tu editor.
-La previsualización en el editor se renderiza en un iframe, por lo que la búsqueda del navegador y las herramientas de desarrollo no pueden acceder a ella. Selecciona el botón **Open in browser** en la barra de herramientas de la previsualización, o ejecuta **Mintlify: Open preview in browser**, para abrir la página en tu navegador.
+Presiona
Cmd+
F (macOS) o
Ctrl+
F (Windows) dentro de la previsualización para abrir una barra de búsqueda de la página renderizada.
Enter y
Shift+
Enter permiten recorrer las coincidencias.
Esc cierra la barra de búsqueda.
+
+La previsualización en el editor se renderiza en un iframe, por lo que las herramientas de desarrollo del navegador no pueden acceder a ella. Selecciona el botón **Open in browser** en la barra de herramientas de la previsualización, o ejecuta **Mintlify: Open preview in browser**, para abrir la página en tu navegador.
Las previsualizaciones en el editor requieren la [CLI de Mintlify](/es/cli/install). El servidor de previsualización se ejecuta en el puerto `3939` de forma predeterminada para no entrar en conflicto con aplicaciones en el puerto 3000. Cambia el puerto con la configuración `mintlify.preview.port`.
diff --git a/fr/cli/mdx-extension.mdx b/fr/cli/mdx-extension.mdx
index a857a7b7c..d3324aa55 100644
--- a/fr/cli/mdx-extension.mdx
+++ b/fr/cli/mdx-extension.mdx
@@ -1,12 +1,12 @@
---
title: "Extension Mintlify MDX"
-description: "Installez l'extension Mintlify MDX pour obtenir l'autocomplétion, les diagnostics en ligne, la documentation au survol et un aperçu dans l'éditeur."
-keywords: ["Cursor", "MDX", "autocomplétion", "diagnostics", "IntelliSense", "prévisualisation", "éditeur"]
+description: "Installez l'extension Mintlify MDX pour l'autocomplétion, les diagnostics, la documentation au survol, un éditeur visuel et une prévisualisation."
+keywords: ["Cursor", "MDX", "autocomplétion", "diagnostics", "IntelliSense", "prévisualisation", "éditeur", "mode visuel"]
---
L'extension Mintlify MDX ajoute la prise en charge du langage pour les projets Mintlify à VS Code, Cursor, Devin Desktop et aux autres éditeurs compatibles avec l'API d'extensions de VS Code. L'extension connaît chaque composant intégré et chaque propriété, vous bénéficiez donc de l'autocomplétion pendant la saisie, et elle signale les composants inconnus, les propriétés invalides et les imports de snippets non résolus.
-L'extension exécute également une prévisualisation en direct dans votre éditeur, ce qui vous permet de rédiger et de voir le rendu sans passer par un navigateur.
+L'extension ouvre également les fichiers `.mdx` dans un éditeur visuel et exécute une prévisualisation en direct dans votre éditeur, ce qui vous permet de rédiger et de voir le rendu sans passer par un navigateur.
## Prérequis
@@ -40,9 +40,9 @@ L'extension s'active lorsque vous ouvrez un fichier `.mdx` ou un espace de trava
## Autocomplétion
-Tapez `<` pour afficher tous les composants intégrés. L'autocomplétion suggère les propriétés et les valeurs des composants à l'intérieur des balises.
+Tapez `<` pour afficher tous les composants intégrés. L'autocomplétion suggère les propriétés et les valeurs des composants à l'intérieur des balises, propose les balises fermantes correspondantes après ``.
-L'extension suggère les composants que vous importez depuis des [snippets réutilisables](/fr/create/reusable-snippets) aux côtés des composants intégrés.
+L'extension suggère les composants que vous importez depuis des [snippets réutilisables](/fr/create/reusable-snippets) aux côtés des composants intégrés. `className`, `id` et `style` sont proposés sur chaque composant et élément HTML, et la saisie à l'intérieur de `className="…"` suggère des classes utilitaires Tailwind, y compris les variantes comme `md:` et `hover:`.
## Diagnostics
@@ -97,6 +97,73 @@ Utilisez les chevrons de la gouttière pour replier des régions d'une page :
L'extension valide `docs.json` par rapport au [schéma Mintlify](https://mintlify.com/docs.json).
+
+ ## Mode visuel
+
+
+Ouvrez n'importe quel fichier `.mdx` en mode visuel pour modifier la page dans un éditeur enrichi semblable à celui du tableau de bord Mintlify, avec les titres, listes, tableaux, liens, encarts, cartes, étapes, onglets, accordéons, blocs de code et images tous modifiables sur place.
+
+Pour basculer entre le mode visuel et l'éditeur de texte :
+
+- Appuyez sur
Cmd+
Shift+
V (macOS) ou
Ctrl+
Shift+
V (Windows).
+- Ou utilisez le sélecteur d'éditeur à l'extrémité droite de la ligne des fils d'Ariane.
+
+Utilisez l'icône d'engrenage dans la barre de titre pour choisir avec quel éditeur les fichiers `.mdx` s'ouvrent par défaut.
+
+Les raccourcis Markdown fonctionnent à la saisie (`#` pour un titre, `-` pour un élément de liste, `**gras**`, `` `code` ``), et la barre d'outils et le menu `/` insèrent des composants. Les modifications sont réécrites en MDX par le même convertisseur que [`mint format`](/fr/cli/commands#mint-format). Les composants que le mode visuel ne connaît pas sont préservés tels quels.
+
+
+ ### Formulaires de snippets
+
+
+En mode visuel, un composant importé depuis un snippet est affiché sous forme de formulaire avec un champ par propriété plutôt que sous forme de balise opaque. Les champs sont déduits des props déstructurées du composant et de leurs valeurs par défaut, donc une valeur par défaut de `true` devient une case à cocher, `2` devient un champ numérique, `icon` ou `logo` devient un chemin d'image avec une vignette, et `href` ou `url` devient un lien.
+
+Pour contrôler les champs, documentez le composant avec un commentaire JSDoc `@param` juste avant l'export. Dans les fichiers `.jsx` et `.tsx`, utilisez un bloc `/** … */`. Dans les snippets `.mdx`, utilisez un commentaire MDX (`{/* … */}`) pour qu'il ne s'affiche pas :
+
+```mdx
+{/*
+ A product tile with a price and a call to action.
+ @param {string} name - Product name, shown as the title
+ @param {image} [icon] - Path to a square icon under /images
+ @param {'Free' | 'Pro' | 'Enterprise'} [tier=Free] - Which plan it belongs to
+ @param {number} [seats=1] - Seats included
+ @param {boolean} [featured] - Highlight the card
+ @param {url} [href] - Where the button goes
+ @param {text} [summary] - One or two sentences under the title
+*/}
+export const ProductCard = ({ name, icon, tier = 'Free', seats = 1, featured = false, href, summary, children }) => ( ... );
+```
+
+Les types suivants produisent les champs de formulaire correspondants :
+
+| Type | Champ |
+| ----------------- | ----------------------------------------- |
+| `string` | Champ de texte |
+| `text` (or `markdown`) | Champ de texte multi-ligne |
+| `boolean` | Case à cocher |
+| `number` | Champ numérique |
+| `'a' \| 'b'` | Liste déroulante de ces valeurs |
+| `image` | Champ de chemin avec une vignette |
+| `url` | Champ de lien |
+| `color` | Champ de texte avec un échantillon |
+| tout autre type | Expression `{…}` brute |
+
+Les crochets (`[name]`) indiquent qu'une propriété est optionnelle. Une propriété documentée sans crochets affiche un marqueur « requis ». `[name=value]` fournit une valeur par défaut lorsque la déstructuration n'en a pas. La première ligne du commentaire est la description affichée dans l'en-tête du formulaire et dans le menu **Insert**.
+
+`children` n'est jamais un champ : le corps de la balise est laissé tel quel et résumé sous le formulaire. Basculez vers l'éditeur de texte pour le modifier.
+
+Les snippets importés apparaissent également dans le menu **+ Insert** et dans le menu `/`.
+
+
+
+La vue Mintlify dans la barre d'activité reflète l'arborescence de navigation de votre `docs.json`. Les produits et onglets de premier niveau restent à la racine, avec leur navigation imbriquée dans des lignes dépliables. La barre latérale utilise les icônes de `docs.json` et du frontmatter des pages, et les libellés des pages proviennent de `sidebarTitle` ou de `title`. Sélectionner une page l'ouvre en mode visuel.
+
+Utilisez l'action **+** pour ajouter des groupes, onglets, menus déroulants, ancres, langues, produits et versions. Faites glisser les lignes pour les réorganiser, ou déposez une page sur un groupe pour la déplacer en haut de ce groupe. L'arborescence bouge immédiatement, puis Mintlify enregistre le changement dans `docs.json`.
+
+L'arborescence suit la page active et se recharge lorsque `docs.json` ou une page change.
+
## Prévisualisation dans votre éditeur
@@ -105,7 +172,9 @@ Ouvrez un fichier `.mdx` et sélectionnez l'icône de prévisualisation dans la
La barre d'outils de la prévisualisation comporte des boutons précédent, suivant et recharger, une zone d'adresse et un bouton bascule **Follow editor**. Saisissez un chemin comme `/quickstart` dans la zone d'adresse et appuyez sur
Entrée pour accéder à cette page. Avec **Follow editor** activé, la prévisualisation change de page à mesure que vous changez de fichier dans votre éditeur.
-La prévisualisation dans l'éditeur s'affiche dans une iframe, donc la recherche du navigateur et les outils de développement ne peuvent pas y accéder. Sélectionnez le bouton **Open in browser** dans la barre d'outils de la prévisualisation, ou exécutez **Mintlify: Open preview in browser**, pour ouvrir la page dans votre navigateur.
+Appuyez sur
Cmd+
F (macOS) ou
Ctrl+
F (Windows) dans la prévisualisation pour ouvrir une barre de recherche sur la page rendue.
Enter et
Shift+
Enter permettent de parcourir les résultats.
Esc ferme la barre de recherche.
+
+La prévisualisation dans l'éditeur s'affiche dans une iframe, donc les outils de développement du navigateur ne peuvent pas y accéder. Sélectionnez le bouton **Open in browser** dans la barre d'outils de la prévisualisation, ou exécutez **Mintlify: Open preview in browser**, pour ouvrir la page dans votre navigateur.
Les prévisualisations dans l'éditeur nécessitent la [CLI Mintlify](/fr/cli/install). Le serveur de prévisualisation s'exécute par défaut sur le port `3939` afin de ne pas entrer en conflit avec des applications sur le port 3000. Modifiez le port avec le paramètre `mintlify.preview.port`.
diff --git a/zh/cli/mdx-extension.mdx b/zh/cli/mdx-extension.mdx
index 96bccc380..cd182def6 100644
--- a/zh/cli/mdx-extension.mdx
+++ b/zh/cli/mdx-extension.mdx
@@ -1,12 +1,12 @@
---
title: "Mintlify MDX 扩展"
-description: "安装 Mintlify MDX 扩展，在本地编写 MDX 时获得自动补全、内联诊断、悬停文档和编辑器内预览。"
-keywords: ["Cursor", "MDX", "自动补全", "诊断", "IntelliSense", "预览", "编辑器"]
+description: "安装 Mintlify MDX 扩展，在本地编写 MDX 时获得自动补全、内联诊断、悬停文档、可视化编辑器和编辑器内预览。"
+keywords: ["Cursor", "MDX", "自动补全", "诊断", "IntelliSense", "预览", "编辑器", "可视化模式"]
---
Mintlify MDX 扩展为 VS Code、Cursor、Devin Desktop 以及其他支持 VS Code 扩展 API 的编辑器提供 Mintlify 项目的语言支持。该扩展了解每个内置组件和属性，因此你在输入时可以获得自动补全，它还会报告未知组件、无效属性和无法解析的 snippet 导入。
-该扩展还会在编辑器内运行实时预览，让你无需切换到浏览器即可边写作边查看渲染结果。
+该扩展还会在可视化编辑器中打开 `.mdx` 文件，并在编辑器内运行实时预览，让你无需切换到浏览器即可边写作边查看渲染结果。
## 前提条件
@@ -40,9 +40,9 @@ code --install-extension mintlify.mintlify-snippets
## 自动补全
-输入 `<` 即可查看所有内置组件。自动补全会在标签内提示组件的属性和值。
+输入 `<` 即可查看所有内置组件。自动补全会在标签内提示组件的属性和值、在 `` 这样的枚举属性值。
-除内置组件外，扩展还会提示你从[可复用 snippet](/zh/create/reusable-snippets) 导入的组件。
+除内置组件外，扩展还会提示你从[可复用 snippet](/zh/create/reusable-snippets) 导入的组件。`className`、`id` 和 `style` 会在所有组件和 HTML 元素上提供，在 `className="…"` 内输入时会提示 Tailwind 实用类，包括像 `md:` 和 `hover:` 这样的变体。
## 诊断
@@ -97,6 +97,73 @@ code --install-extension mintlify.mintlify-snippets
扩展会根据 [Mintlify 架构](https://mintlify.com/docs.json)校验 `docs.json`。
+
+ ## 可视化模式
+
+
+在可视化模式下打开任意 `.mdx` 文件，即可像在 Mintlify 仪表板中那样在富文本编辑器中编辑页面，标题、列表、表格、链接、提示框、卡片、步骤、选项卡、折叠面板、代码块和图片都可以就地编辑。
+
+在可视化模式和文本编辑器之间切换：
+
+- 按
Cmd+
Shift+
V（macOS）或
Ctrl+
Shift+
V（Windows）。
+- 或使用面包屑行右端的编辑器选择器。
+
+使用标题栏中的齿轮图标可选择 `.mdx` 文件默认使用哪个编辑器打开。
+
+输入时 Markdown 快捷方式生效（`#` 表示标题，`-` 表示列表项，`**bold**`、`` `code` ``），工具栏和 `/` 菜单可用于插入组件。编辑内容会通过与 [`mint format`](/zh/cli/commands#mint-format) 相同的转换器写回为 MDX。可视化模式无法识别的组件会按原样保留。
+
+
+ ### Snippet 表单
+
+
+在可视化模式下，从 snippet 导入的组件会显示为一个表单，每个 prop 对应一个输入，而不是一个不透明的标签。字段根据组件解构后的 prop 和默认值推断，因此默认值为 `true` 会变成复选框，`2` 会变成数字框，`icon` 或 `logo` 会变成带缩略图的图片路径，`href` 或 `url` 会变成链接。
+
+要控制输入项，请在导出前使用 JSDoc `@param` 注释来对组件进行文档说明。在 `.jsx` 和 `.tsx` 文件中使用 `/** … */` 块。在 `.mdx` snippet 中，使用 MDX 注释（`{/* … */}`），这样它不会被渲染：
+
+```mdx
+{/*
+ A product tile with a price and a call to action.
+ @param {string} name - Product name, shown as the title
+ @param {image} [icon] - Path to a square icon under /images
+ @param {'Free' | 'Pro' | 'Enterprise'} [tier=Free] - Which plan it belongs to
+ @param {number} [seats=1] - Seats included
+ @param {boolean} [featured] - Highlight the card
+ @param {url} [href] - Where the button goes
+ @param {text} [summary] - One or two sentences under the title
+*/}
+export const ProductCard = ({ name, icon, tier = 'Free', seats = 1, featured = false, href, summary, children }) => ( ... );
+```
+
+以下类型会生成对应的表单输入：
+
+| Type | Input |
+| ----------------- | ---------------------------- |
+| `string` | 文本框 |
+| `text` (or `markdown`) | 多行文本框 |
+| `boolean` | 复选框 |
+| `number` | 数字框 |
+| `'a' \| 'b'` | 这些值的下拉框 |
+| `image` | 带缩略图的路径框 |
+| `url` | 链接框 |
+| `color` | 带色块的文本框 |
+| anything else | 原始 `{…}` 表达式 |
+
+方括号（`[name]`）表示 prop 为可选。没有方括号的已文档化 prop 会显示必填标记。`[name=value]` 在解构没有默认值时提供一个默认值。注释的第一行是显示在表单头部和 **Insert** 菜单中的描述。
+
+`children` 永远不会作为字段：标签的主体会按原样保留，并在表单下方作摘要展示。切换到文本编辑器进行编辑。
+
+导入的 snippet 也会出现在 **+ Insert** 菜单和 `/` 菜单中。
+
+
+
+活动栏中的 Mintlify 视图会镜像你的 `docs.json` 导航树。顶层的 products 和 tabs 保持在根部，其导航嵌套在可展开的行中。侧边栏使用 `docs.json` 和页面 frontmatter 中的图标，页面标签取自 `sidebarTitle` 或 `title`。选中某个页面会在可视化模式下打开它。
+
+使用 **+** 操作可以添加 groups、tabs、dropdowns、anchors、languages、products 和 versions。拖动行可以重新排序，或将一个页面拖放到某个 group 上，将其移动到该 group 的顶部。树会立即变动，然后 Mintlify 会将更改保存到 `docs.json`。
+
+树会跟随当前活动页面，并在 `docs.json` 或页面变化时重新加载。
+
## 在编辑器中预览
@@ -105,7 +172,9 @@ code --install-extension mintlify.mintlify-snippets
预览工具栏包含后退、前进和重新加载按钮、地址框，以及 **Follow editor** 开关。在地址框中输入类似 `/quickstart` 的路径并按
Enter 即可跳转到该页面。开启 **Follow editor** 后，预览会随着你在编辑器中切换文件而切换页面。
-编辑器内预览在 iframe 中渲染，因此浏览器的查找功能和开发者工具无法访问它。选择预览工具栏中的 **Open in browser** 按钮，或运行 **Mintlify: Open preview in browser**，改为在浏览器中打开页面。
+在预览内按
Cmd+
F（macOS）或
Ctrl+
F（Windows）可打开针对已渲染页面的查找栏。
Enter 和
Shift+
Enter 可在匹配项之间切换。
Esc 关闭查找栏。
+
+编辑器内预览在 iframe 中渲染，因此浏览器开发者工具无法访问它。选择预览工具栏中的 **Open in browser** 按钮，或运行 **Mintlify: Open preview in browser**，改为在浏览器中打开页面。
编辑器内预览需要 [Mintlify CLI](/zh/cli/install)。预览服务器默认在端口 `3939` 上运行，以避免与端口 3000 上的应用冲突。可通过 `mintlify.preview.port` 设置更改端口。