add notify editor/view

src/components/notify-editor/index.ts

@@ -0,0 +1,11 @@
+import view from "./index.vue";
+import Toolkit from "../../utils/Toolkit";
+import type { NotifyDetail } from "../../types";
+
+export type NotifyEditorExpose = {
+	submit: () => Promise<NotifyDetail>;
+	getPendingMediaCount: () => number;
+};
+
+export const NotifyEditor = Toolkit.withInstall(view);
+export default NotifyEditor;

src/components/notify-editor/index.vue

@@ -0,0 +1,77 @@
+<template>
+	<article-editor
+		ref="articleEditorRef"
+		:model-value="articleValue"
+		:placeholder="placeholder"
+		:upload-image="uploadImage"
+		:upload-video="uploadVideo"
+		:resolve-attachment-url="resolveAttachmentUrl"
+		:resolve-temp-url="resolveTempUrl"
+		@change="onArticleChange"
+		@update:model-value="onArticleCommit"
+	/>
+</template>
+
+<script lang="ts" setup>
+import type { Article, ArticleContentType, Attachment, NotifyDetail } from "../../types";
+import type { ArticleEditorExpose } from "../article-editor";
+import { ArticleEditor } from "../article-editor";
+import type { UploadResult } from "../tiptap-editor";
+import { normalizeNotifyContentType } from "../notify/shared";
+
+defineOptions({
+	name: "NotifyEditor"
+});
+
+const props = withDefaults(defineProps<{
+	modelValue?: NotifyDetail;
+	placeholder?: string;
+	uploadImage?: (file: File) => Promise<UploadResult>;
+	uploadVideo?: (file: File) => Promise<UploadResult>;
+	resolveAttachmentUrl?: (attachmentId: string, attachment?: Attachment) => string | Promise<string>;
+	resolveTempUrl?: (tempFileId: string) => string | Promise<string>;
+}>(), {
+	modelValue: () => ({}),
+	placeholder: "请输入通知内容"
+});
+
+const emit = defineEmits<{
+	change: [value: NotifyDetail];
+	"update:modelValue": [value: NotifyDetail];
+}>();
+
+const articleEditorRef = ref<ArticleEditorExpose>();
+
+const articleValue = computed<Article>(() => ({
+	contentType: normalizeNotifyContentType(props.modelValue?.contentType) as ArticleContentType,
+	content: props.modelValue?.content || "",
+	attachmentList: props.modelValue?.attachmentList
+}));
+
+function buildNotifyValue(value: Article): NotifyDetail {
+	return {
+		...(props.modelValue || {}),
+		contentType: normalizeNotifyContentType(value.contentType),
+		content: value.content || "",
+		attachmentList: value.attachmentList || []
+	};
+}
+
+function onArticleChange(value: Article) {
+	emit("change", buildNotifyValue(value));
+}
+
+function onArticleCommit(value: Article) {
+	emit("update:modelValue", buildNotifyValue(value));
+}
+
+async function submit() {
+	const value = await articleEditorRef.value?.submit();
+	return buildNotifyValue(value || articleValue.value);
+}
+
+defineExpose({
+	submit,
+	getPendingMediaCount: () => articleEditorRef.value?.getPendingMediaCount() || 0
+});
+</script>