Components
Vite plugin
Generate the manifest from your Vue and React components.
comark-codemirror/vite scans your component folders and exposes the manifest as a virtual module, with HMR. It reads Vue defineProps (type and runtime forms), withDefaults, <slot name>, and React props interfaces.
vite.config.ts
import { comarkCodemirrorComponents } from 'comark-codemirror/vite'
export default {
plugins: [
comarkCodemirrorComponents({
dirs: ['components/content'],
// refine or add entries (merged by name)
manifest: [{ name: 'hero', kind: 'block', group: 'Marketing' }],
}),
],
}
editor.ts
import components from 'virtual:comark-codemirror/components'
import { comark } from 'comark-codemirror'
new EditorView({ extensions: [basicSetup, comark({ components })] })
A ProseCard.vue with
<script setup lang="ts">
withDefaults(defineProps<{
/** Card title */
title: string
variant?: 'soft' | 'outline'
}>(), { variant: 'soft' })
</script>
<template><div><slot /><slot name="footer" /></div></template>
becomes { name: 'prose-card', kind: 'both', props: { title: { type: 'string', required: true, description: 'Card title' }, variant: { type: 'string', enum: ['soft', 'outline'], default: 'soft' } }, slots: [{ name: 'default' }, { name: 'footer' }] }.
scanComponents(root, options) and extractComponent(file, source) are exported for other build tools.