@docus/editor-edge

Docus Editor

Custom Milkdown editor with the power of MDC syntax.

💡 This package depends on many @milkdown dependencies.

Quick Setup

• Add @docus/editor dependency to your project:

# Using Yarn
yarn add @docus/editor
# Using NPM
npm install @docus/editor
# Using PNPM
pnpm install @docus/editor

• Add @docus/editor to the buildModules section of your nuxt.config.js

{
  buildModules: ['@docus/editor']
}

Usage

The module auto imports a DocusEditor component you can use in your project:

<template>
  <div>
    <DocusEditor v-model="content" :components="components" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import type { ComponentDefinition } from '@docus/editor'

export default defineComponent({
  setup () {
    const content = ref('')
    const components: ComponentDefinition[] = [
      {
        name: 'MyComponent',
        props: [
          {
            name: 'value',
            type: ['string'],
            default: "'foo'"
          }
        ],
        slots: []
      }
    ]

    return {
      content,
      components
    }
  }
})
</script>

DocusEditor props

Name	Type	Description
value	string	Markdown content
components	ComponentDefinition[]	List of component definitions used for / commands

Development

• Clone this repository
• Install dependencies using pnpm install
• Start dev server using pnpm dev