editor/apps/dev

@enesis/dev

Development sandbox for the Enesis Editor. A Vite + Vue 3 app that exercises the @enesis/editor <Block> component with sample markdown content and full event logging.

Quick Start

From the workspace root:

pnpm dev

Opens at http://localhost:5173.

What It Demonstrates

• Four <Block> instances with different markdown content (headings, bold, callouts, page refs, block refs, tags, links, tasks with state/priority, properties, fenced code blocks)
• All block lifecycle events logged to console (change, split, merge-previous, delete-if-empty, indent, outdent, arrow-up-from-start, arrow-down-from-end, pattern-open, pattern-update, pattern-close, focus, blur, selection-change)
• marker-mode="always-visible" on the first block (markdown delimiters always shown)
• marker-mode="live-preview" (default) on the remaining blocks (delimiters hidden when blurred)
• debug prop for per-instance namespace-based logging (e.g. debug="CodeBlockView")
• Dark/light mode toggle via Nuxt UI UColorModeButton
• Routing via Vue Router with a single route at /

Architecture

EditorView.vue          Route page
  └── Editor.vue        Playground — four <Block> instances
        └── Block.vue   (from @enesis/editor)

The dev app resolves @enesis/editor directly to source (packages/editor/src/index.ts) via Vite aliases, enabling hot-reload during development.

Configuration

• Framework: Vue 3 + Vite
• UI Library: Nuxt UI v4 (layout components, color mode, buttons)
• Styling: Tailwind CSS v4 with custom green palette
• Type Checking: vue-tsc (run as part of build)
• Icons: Iconify (Lucide, Simple Icons)

Scripts

Script	Description
pnpm --filter @enesis/dev dev	Start Vite dev server
pnpm --filter @enesis/dev build	Type-check + production build
pnpm --filter @enesis/dev preview	Preview production build

Deployment

The dev app is auto-deployed to Codeberg Pages on push to master. See .forgejo/workflows/deploy.yml at the workspace root.