docs(studio): add visual editor info

larbish · larbish · commit 0adecb229be5 · 2025-12-03T10:56:36.000Z
diff --git a/docs/content/docs/9.studio/4.content.md b/docs/content/docs/9.studio/4.content.md
@@ -8,87 +8,74 @@ seo:
   description: Overview of our different Studio CMS editors to manage your content and your medias. Choose between our visual editors and our code editor.
 ---
 
-::warning
-**Alpha Release**
+::note
+**Alpha Release - TipTap Visual Editor Now Available!**
 
 :br
 
-The current version only includes the code editor for Markdown, YAML, and JSON files.
-For now, this section covers the legacy documentation from the original Nuxt Studio platform.
+The alpha version now includes both the **Monaco code editor** and the **TipTap visual editor** for Markdown files. You can switch between them at any time using the editor mode toggle in the toolbar.
 ::
 
-Nuxt Studio offers a versatile workspace for both developers and content writers, giving them the freedom to choose between our differents editors:
-
-- [Notion-like editor](#notion-like-editor-markdown-files) for `Markdown` files
-- [Form editor](#form-editor) for `YAML` and `JSON` files
-- [Code editor](#code-editor) for any kind of files (for technical users only)
-
-Each editor serves its own purpose. Some users are used to code edition, while others prefer a non-technical, visual approach. At the end, **code syntax is the final output** for both editors.
-
-## Code editor
-
-![Edit directly your raw content with our code editor](/docs/studio/code-editor.webp)
+Nuxt Studio offers a versatile workspace for both developers and content writers, giving them the freedom to choose between our different editors:
 
-It provides full control over your content, allowing you to write raw content directly:
+- [Notion-like editor](#notion-like-editor-markdown-files){target="_blank"} for `Markdown` files
+- [Form editor](#form-editor){target="_blank"} for `YAML` and `JSON` files
+- [Code editor](#code-editor){target="_blank"} for any kind of files (for technical users only)
+  Each editor serves its own purpose. Some users prefer visual editing, while others prefer direct code manipulation. At the end, **Markdown and MDC syntax is the final output** for both editors, with seamless conversion between visual and code modes.
 
-- [MDC](/docs/files/markdown) syntax for `Markdown` files
-- [JSON](/docs/files/json) or [YAML](/docs/files/yaml) syntax
+## Editor Mode Switching
 
-## Notion-like editor (`Markdown` files)
+You can switch between the visual editor and code editor at any time by clicking the **actions dropdown** in the toolbar:
 
-::warning
-**Alpha Release**
+- **Visual Mode** (TipTap) - Notion-like editing experience
+- **Code Mode** (Monaco) - Direct Markdown/MDC syntax editing
 
-:br
+Your preference is saved and will be used for all Markdown files.
 
-The visual editor isn’t available yet — it’s coming in the beta release.
-For now, this section covers the legacy documentation from the original Nuxt Studio platform.
-::
+## TipTap Visual Editor (`Markdown` files)
 
-![edit your website with a visual interface](/docs/studio/visual-markdown-editor.webp)
+The TipTap visual editor provides a modern Notion-like editing experience for Markdown content, powered by the popular [TipTap](https://tiptap.dev/) editor integrated by [Nuxt UI Editor](https://ui.nuxt.com/pro/components/editor).
 
-This editor is heavily inspired by Notion, well known for its intuitive design and flexibility. Much like a standard text editor, this editor is designed to be familiar and easy to use. However, it stands out with its additional features that improve the writing experience.
+### Key Features
 
-::tip{to="/blog/visual-editor"}
-You want to know how we've built this editor and how it works under the hood? Check this blog post.
-::
+- **Rich Text Editing** - Format text with headings, bold, italic, strikethrough, code, links, and more
+- **MDC Component Support** - Insert and edit custom Vue components directly in the visual editor
+- **Media Integration** - Browse in media picker to insert images from your library
+- **Slash Commands** - Type `/` to access a menu of formatting options and components
+- **Drag & Drop** - Reorder content blocks by dragging them
+- **Link Editor** - Floating popover for editing links with external link support
+- **Toolbar** - Bubble toolbar appears when you select text, providing quick access to formatting options
+- **Real-time Conversion** - Seamlessly converts between visual content and MDC/Markdown syntax
 
-### Frontmatter
+### Debug Mode
 
-[Frontmatter](/docs/files/markdown#frontmatter) is a convention of Markdown-based CMS to provide meta-data to pages, like description or title or any other data you would like to store as `key: value` pair.
+Enable **debug mode** from the footer menu to see the real-time conversion between:
 
-Based on the user [collection and schema](/docs/collections/define) provided, a form is generated to edit this metadata from the editor.
+- TipTap JSON format
+- MDC AST
+- Final Markdown output
 
-:video{autoplay controls loop poster="/home/videos/HomeNotionLikePoster.webp" src="https://res.cloudinary.com/nuxt/video/upload/v1739982761/frontmatterform_yjafgt.mp4"}
+This is useful for understanding how content is transformed and to share troubleshooting.
 
-::prose-note{to="#form-editor-yaml-and-json-files"}
-Check this section to learn more about form generation based on schema.
-::
+## Code Editor
 
-### Toolbar
+The Monaco code editor provides full control over your content, allowing you to write raw content directly:
 
-Highlight your text to reveal the toolbar, giving you access to all the standard text editing features (title formatting, Bold, Italic, Strike-through, code, link, class, bullet list, numerated list...).
+- MDC syntax for [Markdown](/docs/files/markdown){target="_blank"} files
+- [JSON](/docs/files/json){target="_blank"} or [YAML](/docs/files/yaml){target="_blank"} syntax
 
-### Medias
+## Working with Vue Components
 
-Users can simply drag and drop images directly into the editor. An upload modal will open to let you choose the destination folder.
+One of the TipTap visual editor's standout features is its ability to integrate and edit custom Vue components directly within the editor interface.
 
-By typing `/` and searching for `Image` or `Video`, they can quickly insert a media. A modal will open to let them choose the media they want to insert from the media gallery (aka the`public` folder of the Nuxt application).
+### Create and Integrate Custom Components
 
-From the media modal, you can set the [alt attribute](https://www.w3schools.com/tags/att_img_alt.asp) for SEO and accessibility purpose.
-
-### Vue Components
-
-One of this editor standout features is its ability to integrate and customize any complex `Vue` component directly within the editor.
-
-#### Create and integrate your own component
-
-A developer can create any kind of visually complex components and editors will be able to use them and focus on the content. An editor can also play with the component properties, styles, and behaviour to fit its specific requirements as long as the developer made it customisable.
+Developers can create visually complex components, and editors can use them without technical knowledge. The visual editor handles component integration seamlessly.
 
 ::steps{level="4"}
 #### Create your component
 
-You can create Vue components and integrate them into Markdown. They just need to be located in the `/components/content` folder to be available.
+Vue components need to be located in the `/components/content` folder to be available in Studio:
 
 ```vue [components/content/HomeFeature.vue]
 <template>
@@ -111,13 +98,15 @@ You can create Vue components and integrate them into Markdown. They just need t
 defineProps({
   icon: {
     type: String,
-    default: 'i-ph-cursor-click',
+    default: 'i-lucide-cursor-click',
   },
 })
 </script>
 ```
 
-#### Integrate these components easily within any Markdown file using [MDC syntax](/docs/files/markdown#mdc-syntax)
+#### Use in Markdown with MDC syntax
+
+Components can be integrated using [MDC syntax](/docs/files/markdown#mdc-syntax){target="_blank"}:
 
 ```mdc [content/index.md]
 ::home-feature
@@ -127,34 +116,27 @@ defineProps({
   #title
   Embedded Vue components
   #description
-  Edit slots and props inside the Notion-like editor.
+  Edit slots and props inside the visual editor.
 ::
 ```
 
-#### Edit them with our Studio editors
+#### Edit in the Visual Editor
 
-The visual editor simplifies the component edition, allowing you to integrate and edit them directly in the visual editor. Non technical users can play with **slots** and **props** without any technical knowledge.
+All components in the `/components/content` folder are automatically available:
 
-:video{autoplay controls loop src="https://res.cloudinary.com/nuxt/video/upload/v1744126742/studio/finalpropscomps_usfabp.mp4"}
-
-All components in the `/components/content` folder are available in the editor. Studio users can type `/` anywhere while editing to access the list of available components.
+1. Type `/` anywhere while editing
+2. Search for your component in the list
+3. Insert and edit component slots directly in the editor
+4. Props editing with visual interface coming in beta
 
   :::tip{to="/docs/studio/debug"}
-  Take a look at this section to validate your
-  
-  `Vue`
-  
-  component integration in the editor in local development.
+  Enable debug mode to validate your Vue component integration in local development.
   :::
 ::
 
-#### Integrate built-in components from external libraries
-
-By default, you can integrate any component inside a Markdown file and it should work and be editable from Studio but external components **won't be displayed in the components list in Studio and can't be integrated manually by a Studio editor**.
+### Integrate External Library Components
 
-To list this component inside Studio and fetch all its metadata, you need to set it as global in your Nuxt config file.
-
-Here is an example to integrate Button and Icon components from the [Nuxt UI](https://ui.nuxt.com) library:
+By default, components from external libraries (like Nuxt UI) won't appear in Studio's component list. To make them available, set them as global in your Nuxt config:
 
 ```ts
 export default defineNuxtConfig({
@@ -168,22 +150,23 @@ export default defineNuxtConfig({
 })
 ```
 
-## Form editor
+## Form Editor (Coming in Beta)
 
 ::warning
-**Alpha Release**
+**Coming in Beta**
 
 :br
 
-The visual editor isn’t available yet — it’s coming in the beta release.
-For now, this section covers the legacy documentation from the original Nuxt Studio platform.
+The form editor for frontmatter, YAML, and JSON files is currently under development and will be available in the beta release.
 ::
 
-![YAML and JSON edition with auto generated form](/blog/frontmatters.png)
+The form editor will be used for editing:
 
-This editor is used whether you’re editing the frontmatter of a `Markdown` file or a `JSON` / `YAML` file.
+- **Frontmatter** in `Markdown` files
+- **YAML** files
+- **JSON** files
 
-It eliminates the need to interact directly with complex file syntax. Instead, a form is automatically generated based on the provided user [collection schema](/docs/collections/define).
+It will eliminate the need to interact directly with complex file syntax. Instead, forms will be automatically generated based on your [collection schema](/docs/collections/define){target="_blank"} definition.
 
 ### **Defining your form with** `zod` Schema
 
@@ -223,7 +206,7 @@ export default defineContentConfig({
       }),
     }),
   },
-})    
+})
 ```
 
   :::code-preview{icon="i-lucide-eye" label="Generated Form"}
