# Editor UI

`@easyflow-core/editor-ui` 提供管理端通用的代码与 Markdown 编辑组件。组件样式随组件一起加载，并统一消费 EasyFlow 设计 Token；业务页面无需覆盖 Milkdown 或 CodeMirror 内部样式。

## Markdown 实时编辑器

```vue
<script setup lang="ts">
import { ref } from 'vue';

import { MarkdownLiveEditor } from '@easyflow-core/editor-ui';

const content = ref('# 标题');
const readonly = ref(false);
const props = defineProps<{
  saveDocument: (content: string) => Promise<void>;
  resolveImageUrl: (url: string) => Promise<string> | string;
  uploadImage: (file: File) => Promise<string>;
}>();
</script>

<template>
  <MarkdownLiveEditor
    v-model="content"
    :readonly="readonly"
    placeholder="输入 Markdown 内容…"
    :resolve-image-url="props.resolveImageUrl"
    :upload-image="props.uploadImage"
    @save="props.saveDocument(content)"
  />
</template>
```

主要接口：

- `v-model`：Markdown 原文。
- `readonly`：只读模式。
- `placeholder`：空文档占位文案。
- `resolveImageUrl`：将 Markdown 图片地址解析为可预览地址。
- `uploadImage`：上传图片并返回写入 Markdown 的地址。
- `save`：用户按下 `Ctrl/Cmd + S`。
- `linkClick`：用户点击相对链接。
- `fidelityLoss`：内容包含实时模式无法保真的语法，调用方应切换源码模式。

源码编辑场景可直接使用 `MarkdownSourceEditor`。
