API del paquete del editor

Importación: @mauriciodmo/framekit/editor
Entorno: cliente.

El punto de entrada del editor exporta FrameKitEditor, TemplateCanvas, FrameKitNavigation, humanizeSegment, manifestToNavigation, toast, ErrorToast, InfoToast y SuccessToast. También exporta EditorMessages, los tipos de navegación TemplateNavigationFolder, TemplateNavigationItem y TemplateNavigationNode, y los tipos de notificaciones BasicToastProps, ToastOptions y ToastPosition.

Ejemplo mínimo

manifestToNavigation convierte las entradas de plantillas generadas en nodos para el árbol de navegación del cliente:

'use client'

import { FrameKitNavigation, manifestToNavigation } from '@mauriciodmo/framekit/editor'
import type { TemplateRegistryEntry } from '@mauriciodmo/framekit'
import { usePathname } from 'next/navigation'

export function Navigation ({ templates }: { templates: readonly TemplateRegistryEntry[] }) {
  const nodes = manifestToNavigation(templates)
  const pathname = usePathname()
  return (
    <nav>
      {nodes.map((node) => <FrameKitNavigation key={node.id} node={node} pathname={pathname} />)}
    </nav>
  )
}

pathname es opcional para mantener la compatibilidad con las llamadas existentes. Pasa la ruta actual para habilitar el resaltado del elemento actual y abrir automáticamente las carpetas que lo contienen; si se omite, ningún elemento se marcará como actual.

En cambio, FrameKitEditor recibe una entrada del registro, su definición cargada, un catálogo EditorMessages y, opcionalmente, sidebarCollapsed. TemplateCanvas representa una definición con las dimensiones que esta declara.

Restricciones del paquete y del entorno de ejecución

Este punto de entrada se ejecuta del lado del cliente: sus componentes interactivos usan el estado de React y, para la navegación, la navegación del cliente de Next.js y el almacenamiento del navegador. Mantenlo detrás de un límite de cliente y no lo uses como un manejador de rutas exclusivo del servidor.

Consulta Usar Studio, representación de plantillas y la API del paquete Studio.