refactor editor

2026-08-25 17:36:14 +08:00
parent d8fbbbe616
commit f790122c01
53 changed files with 4175 additions and 1012 deletions
@@ -0,0 +1,51 @@
+<template>
+	<div class="tp-view selectable">
+		<div v-if="renderContent && editor" ref="contentRef" class="content-wrap" :data-max-height="maxHeight">
+			<editor-content class="content" :editor="editor" />
+		</div>
+		<div v-else class="empty">
+			<span v-text="emptyText" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { normalizeContent, useTiptapView } from "timi-web/editor";
+
+defineOptions({
+	name: "TiptapView"
+});
+
+const props = withDefaults(defineProps<{
+	content?: string;
+	emptyText?: string;
+	maxHeight?: string;
+}>(), {
+	content: "",
+	emptyText: "暂无内容",
+	maxHeight: "400px"
+});
+
+const renderContent = computed(() => normalizeContent(props.content));
+const { EditorContent, contentRef, editor } = useTiptapView(renderContent, toRef(props, "maxHeight"));
+</script>
+
+<style lang="less" scoped>
+.tp-view {
+	width: 100%;
+	.empty {
+		padding: 1rem;
+		border-radius: .375rem;
+		color: var(--td-text-color-placeholder);
+		background: var(--td-bg-color-container);
+		border: 1px solid var(--td-component-border);
+	}
+
+	.content {
+		border: 1px solid var(--td-component-border);
+		padding: 1rem;
+		min-height: 12rem;
+		background: var(--td-bg-color-container);
+	}
+}
+</style>