Volver a la Documentación

Editor de Markdown

El Editor de Markdown de Sutram te permite crear y editar documentos de texto con formato directamente en el navegador. Es un editor visual (WYSIWYG) donde ves el resultado final mientras editas, sin necesidad de conocer la sintaxis markdown.

Crear un Archivo Markdown

  1. Navega hasta una carpeta en tu proyecto
  2. Haz clic en el menú ⋮ (tres puntos) en la esquina superior derecha
  3. Selecciona Agregar Archivo Markdown
  4. Escribe un nombre para el archivo
  5. El editor se abre automáticamente con el título ya insertado

Nota: Esta opción solo aparece dentro de carpetas (no en la raíz del proyecto) y requiere un plan PRO o superior.

Editar un Archivo Existente

  1. Haz clic en cualquier archivo .md en la lista de contenido
  2. En la vista previa, haz clic en el botón Editar o en el ícono de expandir
  3. El editor se abre con el contenido actual del archivo

Importante: Para editar, necesitas hacer el "check-out" del archivo. Esto reserva el archivo para ti, evitando que otras personas lo editen al mismo tiempo.

Barra de Herramientas

La barra de herramientas se encuentra en la parte superior del editor. Cada botón aplica un formato específico.

Formato de Texto

Botón Nombre Comportamiento
B Negrita Toggle - Haz clic una vez para activar, haz clic de nuevo para desactivar. Funciona con texto seleccionado o en la posición actual del cursor. Atajo: Ctrl+B (Windows) o Cmd+B (Mac)
I Cursiva Toggle - Funciona igual que la negrita. Atajo: Ctrl+I o Cmd+I
S Tachado Toggle - Agrega o elimina una línea sobre el texto seleccionado
<> Código inline Toggle - Da formato al texto como código (fuente monoespaciada)

Títulos

Botón Nombre Comportamiento
H1 Título 1 Toggle - Convierte la línea actual en título grande. Si ya es H1, vuelve a ser párrafo normal
H2 Título 2 Toggle - Título mediano. Si ya es H2, vuelve a ser párrafo
H3 Título 3 Toggle - Título pequeño. Si ya es H3, vuelve a ser párrafo

Consejo: Posiciona el cursor en cualquier línea y haz clic en H1, H2 o H3 para convertirla en título.

Listas

Botón Nombre Comportamiento
• Lista con viñetas Toggle - Crea una lista con puntos. Haz clic de nuevo para volver a párrafo
1. Lista numerada Toggle - Crea una lista numerada automáticamente

Crear subelementos: Dentro de una lista, presiona Tab para crear un subelemento (indentar) o Shift+Tab para volver al nivel anterior.

Bloques Especiales

Botón Nombre Comportamiento
" Cita Toggle - Crea un bloque de cita (con barra lateral). Útil para destacar fragmentos importantes
[ ] Bloque de código Inserción - Crea un área para código con múltiples líneas

Tablas

El botón de tabla (ícono de cuadrícula) abre un menú desplegable con todas las opciones para crear y editar tablas.

Opción Comportamiento
Insertar tabla Crea una tabla de 3x3 en la posición del cursor
Agregar fila arriba Inserta una nueva fila encima de la fila actual
Agregar fila abajo Inserta una nueva fila debajo de la fila actual
Agregar columna a la izquierda Inserta una nueva columna a la izquierda de la columna actual
Agregar columna a la derecha Inserta una nueva columna a la derecha de la columna actual
Eliminar fila Elimina la fila donde está el cursor
Eliminar columna Elimina la columna donde está el cursor
Eliminar tabla Elimina la tabla completa

Cómo usar tablas:

  1. Crear una tabla: Haz clic en el botón de tabla y selecciona "Insertar tabla". Se creará una tabla de 3x3.

  2. Editar celdas: Haz clic en cualquier celda y escribe el contenido. Usa Tab para moverte a la siguiente celda o Shift+Tab para regresar.

  3. Agregar filas/columnas: Posiciona el cursor en la celda de referencia, haz clic en el botón de tabla y elige dónde agregar (arriba, abajo, izquierda o derecha).

  4. Eliminar filas/columnas: Posiciona el cursor en la fila o columna que deseas eliminar, haz clic en el botón de tabla y elige "Eliminar fila" o "Eliminar columna".

  5. Eliminar tabla completa: Con el cursor en cualquier celda de la tabla, haz clic en el botón de tabla y elige "Eliminar tabla".

Consejo: La primera fila de la tabla se formatea automáticamente como encabezado (texto en negrita con fondo destacado).

Enlaces y Medios

Botón Nombre Comportamiento
🔗 (globo) Enlace externo Inserción - Abre un cuadro para escribir una URL. Crea un enlace clicable en el texto
🔗 (cadena) Enlace web del proyecto Selección - Muestra los enlaces web guardados en la carpeta actual para que elijas
🖼️ (paisaje) Imagen de URL Inserción - Abre un cuadro para pegar la dirección de una imagen de internet
🖼️ (carpeta) Imagen del proyecto Selección - Muestra las imágenes de la carpeta actual para que elijas e insertes
📹 Video del proyecto Selección - Muestra los enlaces de video de la carpeta actual (YouTube, Vimeo, etc.)
🎵 Audio del proyecto Selección - Muestra los enlaces de audio de la carpeta actual (SoundCloud, Spotify, etc.)

Cómo Insertar Enlaces y Medios

Enlace externo (cualquier URL):

  1. Selecciona el texto que será el enlace (opcional)
  2. Haz clic en el botón del globo
  3. Escribe o pega la URL
  4. Si no seleccionaste texto, escribe el texto del enlace

Enlace web del proyecto:

  1. Haz clic en el botón de la cadena
  2. Una lista muestra los enlaces guardados en la carpeta
  3. Haz clic en el enlace deseado para insertarlo

Imagen del proyecto:

  1. Haz clic en el botón de la carpeta con imagen
  2. Una lista muestra las imágenes de la carpeta
  3. Haz clic en la imagen deseada para insertarla

Video o audio:

  1. Haz clic en el botón de video o audio
  2. Elige de la lista de medios de la carpeta
  3. El enlace se inserta en el documento

Cómo Eliminar Enlaces y Medios

Para eliminar un enlace, imagen, video o audio insertado:

  1. Posiciona el cursor al final del enlace/medio
  2. Presiona Backspace (o Delete) para borrar carácter por carácter
  3. O selecciona todo el elemento (haz clic y arrastra) y presiona Delete o Backspace

Consejo: Para enlaces de texto, también puedes seleccionar el texto del enlace y simplemente escribir algo nuevo para reemplazarlo.

Guardado Automático

El editor guarda tu trabajo automáticamente cada 60 segundos, siempre que haya cambios sin guardar. Verás un indicador "Guardando..." brevemente cuando esto ocurra.

Importante: El guardado automático guarda un borrador. Para que otras personas vean tus cambios, necesitas publicar el archivo.

Publicar Cambios

Cuando termines de editar:

  1. Haz clic en el botón Finalizar Edición (esquina superior derecha)
  2. El archivo se publica y se libera para otros usuarios
  3. Tus cambios quedan visibles para todo el equipo

Nota: Si sales del editor sin finalizar, tus cambios quedan guardados como borrador, pero el archivo permanece reservado para ti (check-out).

Asistente de IA para Secciones

El editor incluye un asistente de inteligencia artificial que puede ayudar a mejorar, resumir o expandir secciones de tu documento. Las acciones de IA están disponibles en cualquier título (H1, H2, H3, etc.).

Cómo Acceder

Existen dos formas de acceder a las acciones de IA:

  1. Clic derecho en un título: Aparece un menú contextual con las opciones disponibles
  2. Botón en el título: Al pasar el mouse sobre un título, aparece un botón ⋮ a la derecha. Haz clic en él para ver las opciones

Acciones Disponibles

Acción Descripción
Resumir Sección Condensa el contenido de la sección, manteniendo los puntos principales
Expandir Sección Agrega más detalles y profundidad al contenido existente
Mejorar Sección Mejora la calidad de la escritura (claridad, fluidez, gramática)
Generar Resumen Ejecutivo Crea un resumen de alto nivel del documento (disponible solo en títulos H1)
Eliminar Sección Elimina la sección y todo su contenido (no usa IA)

Flujo de Uso

  1. Elige una acción: Haz clic derecho en el título o usa el botón ⋮ y selecciona la acción deseada
  2. Espera el procesamiento: Aparece un indicador de carga mientras la IA procesa. Puedes cancelar en cualquier momento
  3. Revisa el resultado: Un panel de comparación muestra el texto original (a la izquierda) y la sugerencia de la IA (a la derecha), lado a lado
  4. Decide: Haz clic en Aplicar para aceptar la sugerencia o Cancelar para descartarla

Ningún cambio se realiza sin tu aprobación. Siempre visualizas el resultado antes de aplicarlo.

Resumen Ejecutivo (TLDR)

La acción "Generar Resumen Ejecutivo" funciona de manera diferente a las demás:

  • Disponible solo en títulos H1
  • En lugar de reemplazar el contenido, inserta una nueva sección justo debajo del H1
  • El título de la sección se localiza en el idioma del documento (ej: "Resumen Ejecutivo (TLDR)" en español)

Eliminar Sección

La eliminación de sección no usa IA y funciona así:

  1. Una ventana de confirmación muestra el contenido que se eliminará
  2. Haz clic en Eliminar Sección para confirmar o Cancelar para mantenerla

Atención: La eliminación remueve la sección completa (título y todo el contenido hasta el siguiente título). Esta acción no se puede deshacer directamente — usa el botón Deshacer (versión anterior) para restaurar el documento.

Botón Deshacer (Versión Anterior)

El botón Deshacer aparece cuando existe una versión anterior del archivo. Al hacer clic en él:

  1. Restaura la versión anterior completa del archivo
  2. La versión actual se convierte en el nuevo respaldo

Atención: Este deshacer restaura el archivo completo a la versión anterior, no solo la última escritura. Para deshacer escritura reciente, usa Ctrl+Z (Windows) o Cmd+Z (Mac).

Descargar el Archivo

En la lista de contenido, haz clic en el menú ⋮ del archivo markdown para ver las opciones:

  • Descargar: Descarga solo el archivo .md
  • Descargar con imágenes: Descarga un archivo ZIP que contiene el markdown y todas las imágenes de Sutram que están en el documento. Los enlaces de las imágenes se convierten a rutas relativas, haciendo el paquete portable.

Nota: La opción "Descargar con imágenes" solo aparece para archivos publicados. Si no hay imágenes de Sutram en el documento, un mensaje informará que debes usar la opción de descarga normal.

Atajos de Teclado

Atajo Acción
Ctrl/Cmd + Z Deshacer última escritura
Ctrl/Cmd + Shift + Z Rehacer
Ctrl/Cmd + B Negrita
Ctrl/Cmd + I Cursiva
Enter Nuevo párrafo
Shift + Enter Salto de línea (mismo párrafo)
Tab Indentar elemento de lista
Shift + Tab Quitar indentación de elemento de lista

Modo Comentarios

El editor de markdown incluye un modo de comentarios integrado que permite visualizar, administrar y reposicionar marcadores de comentarios mientras editas el documento.

Dos Modos de Operación

El editor alterna entre dos modos:

Modo Descripción
Edición (predeterminado) Editor WYSIWYG Milkdown normal, sin marcadores visibles
Comentarios Vista previa renderizada con overlay de comentarios y panel lateral

Acceder al Modo Comentarios

  1. En el editor, haz clic en el botón Comentarios en el encabezado (al lado del botón "Enviar")
  2. El badge muestra la cantidad de comentarios existentes (ej: "8")
  3. El editor cambia al modo de visualización con los marcadores visibles
  4. Para volver al modo de edición, haz clic nuevamente en el botón Comentarios

Restricción: El modo comentarios no está disponible en dispositivos móviles pequeños (viewport < 768px). Funciona en tablets (iPad, Android) y computadoras de escritorio. Un tooltip en el botón deshabilitado explica: "Usa una computadora de escritorio para administrar comentarios".

Diseño del Modo Comentarios

┌─────────────────────────────────────────────────────────────────┐
│  ← Volver        [💬 Comentarios 8]    [Enviar]      │ Encabezado│
├─────────────────────────────────────┬───────────────────────────┤
│                                     │ 💬 3 comentarios          │
│   Vista previa del Markdown         │ ─────────────────────────│
│   (solo lectura)                    │ ◉ Todos ○ Abiertos ○ Resuel│
│                                     │ ─────────────────────────│
│        📍 Marcador 1                │ [1] Juan · hace 2h        │
│                                     │     Verificar esta sección│
│        📍 Marcador 2                │     "fragmento del texto" │
│                                     │     [Ir a]                │
│                                     │ ─────────────────────────│
│                                     │ [2] María · hace 1d   ✅  │
│                                     │     Corregido             │
└─────────────────────────────────────┴───────────────────────────┘

Funcionalidades del Panel de Comentarios

El panel lateral derecho ofrece:

Funcionalidad Descripción
Filtros Todos / Abiertos / Resueltos
Lista de comentarios Todos los comentarios del documento con autor, fecha y vista previa del texto seleccionado
Ir a Desplaza la visualización hasta el marcador correspondiente
Abrir hilo Haz clic en el comentario para ver respuestas e interactuar

Resolver Comentarios

En el modo comentarios, puedes resolver discusiones directamente:

  1. Haz clic en un comentario en el panel o en el marcador del documento
  2. El modal del hilo se abre mostrando el comentario original y las respuestas
  3. Haz clic en "Marcar como resuelto" para indicar que el asunto fue tratado
  4. El marcador cambia de morado (abierto) a verde (resuelto)
  5. El comentario se puede filtrar en la pestaña "Resueltos"

Para reabrir un comentario resuelto, abre el hilo y haz clic en "Reabrir".

Diferencia entre Visualizador y Editor

Aspecto Visualizador (Modal de Vista Previa) Editor (Modo Comentarios)
Crear comentarios Si - Selecciona texto para comentar No - No disponible
Ver comentarios Si - Marcadores visibles Si - Marcadores visibles
Resolver/Responder Si - Vía modal de hilo Si - Vía modal de hilo
Editar contenido No - Solo lectura Si - En el modo Edición

Flujo recomendado:

  1. Visualizador: Usa para crear nuevos comentarios (seleccionar texto)
  2. Editor - Modo Edición: Usa para editar el contenido markdown
  3. Editor - Modo Comentarios: Usa para revisar y resolver comentarios existentes

Consejos Útiles

  1. Organiza con títulos: Usa H1 para el título principal, H2 para secciones y H3 para subsecciones. Esto facilita la lectura.

  2. Guarda regularmente: Aunque hay guardado automático, puedes hacer clic en "Finalizar Edición" en cualquier momento para publicar.

  3. Aviso de salida: Si intentas salir de la página con cambios sin guardar, el navegador mostrará un aviso.

  4. Imágenes del proyecto: Prefiere usar imágenes ya subidas al proyecto. Se almacenan de forma segura y se pueden descargar junto con el documento.

  5. Enlaces de medios: Para videos y audios, primero agrega el enlace en la carpeta usando "Agregar enlace de video" o "Agregar enlace de audio", después insértalo en el documento.

  6. Resuelve antes de publicar: Antes de finalizar la edición, verifica en el modo Comentarios si hay discusiones abiertas que necesitan ser resueltas o respondidas.

Volver a la Documentación