refactor editor

src/components/article-view/index.ts

@@ -0,0 +1,5 @@
+import view from "./index.vue";
+import { Toolkit } from "timi-web";
+
+export const ArticleView = Toolkit.withInstall(view);
+export default ArticleView;

src/components/article-view/index.vue

@@ -0,0 +1,118 @@
+<template>
+	<t-textarea
+		v-if="isTextContent && hasRawContent"
+		class="text-view"
+		:model-value="rawContent"
+		:autosize="textareaAutosize"
+		readonly
+	/>
+	<t-empty v-else-if="isTextContent" :description="emptyText" />
+	<markdown-view v-else-if="isMarkdownContent && hasRawContent" :content="rawContent" />
+	<t-empty v-else-if="isMarkdownContent" :description="emptyText" />
+	<tiptap-view v-else :content="renderContent" :empty-text="emptyText" />
+</template>
+
+<script lang="ts" setup>
+import type { Article, Attachment } from "timi-web/editor";
+import { AttachmentAPI } from "timi-web/editor";
+import { MarkdownView } from "timi-web";
+import { TiptapView } from "../tiptap-view";
+import {
+	ATTACHMENT_ID_ATTR,
+	getAttachmentIdFromSrc,
+	normalizeArticleContentType,
+	normalizeContent,
+	normalizeRawArticleContent
+	} from "timi-web/editor";
+
+defineOptions({
+	name: "ArticleView"
+});
+
+const props = withDefaults(defineProps<{
+	article?: Article;
+	emptyText?: string;
+	resolveAttachmentUrl?: (attachmentId: string, attachment?: Attachment) => string | Promise<string>;
+}>(), {
+	article: () => ({}),
+	emptyText: "暂无正文内容"
+});
+
+const textareaAutosize = {
+	minRows: 8,
+	maxRows: 32
+};
+
+const renderContent = ref("");
+
+const contentType = computed(() => {
+	return normalizeArticleContentType(props.article?.contentType);
+});
+const isTextContent = computed(() => contentType.value === "TEXT");
+const isMarkdownContent = computed(() => contentType.value === "MARKDOWN");
+const rawContent = computed(() => {
+	return normalizeRawArticleContent(props.article?.content);
+});
+const hasRawContent = computed(() => {
+	return 0 < rawContent.value.trim().length;
+});
+
+const attachmentMap = computed(() => {
+	return new Map((props.article?.attachmentList || []).map(item => [item.id, item]));
+});
+
+async function buildAttachmentPreviewUrl(attachmentId: string) {
+	const attachment = attachmentMap.value.get(attachmentId);
+	if (props.resolveAttachmentUrl) {
+		const customUrl = await props.resolveAttachmentUrl(attachmentId, attachment);
+		if (customUrl) {
+			return customUrl;
+		}
+	}
+	const previewUrl = `${attachment?.metadata?.previewUrl || ""}`;
+	if (previewUrl) {
+		return previewUrl;
+	}
+	return attachmentId ? AttachmentAPI.getReadURL(attachmentId) : "";
+}
+
+async function buildRenderContent(content?: string) {
+	const rawContent = normalizeContent(content);
+	if (!rawContent) {
+		return "";
+	}
+	const parser = new DOMParser();
+	const doc = parser.parseFromString(rawContent, "text/html");
+	const nodes = Array.from(doc.querySelectorAll("img, video, source"));
+	for (const node of nodes) {
+		const src = node.getAttribute("src") || "";
+		const attachmentId = node.getAttribute(ATTACHMENT_ID_ATTR) || getAttachmentIdFromSrc(src);
+		if (!attachmentId) {
+			continue;
+		}
+		const previewUrl = await buildAttachmentPreviewUrl(attachmentId);
+		if (previewUrl) {
+			node.setAttribute("src", previewUrl);
+		}
+	}
+	return normalizeContent(doc.body.innerHTML);
+}
+
+watch(
+	() => [props.article?.content, props.article?.attachmentList, contentType.value] as const,
+	async ([, , nextContentType]) => {
+		if (nextContentType !== "TIP_TAP") {
+			renderContent.value = "";
+			return;
+		}
+		renderContent.value = await buildRenderContent(props.article?.content);
+	},
+	{ immediate: true, deep: true }
+);
+</script>
+
+<style lang="less" scoped>
+.text-view {
+	width: 100%;
+}
+</style>