feat(@vben/plugins): tiptap 组件新增 maxHeight 属性支持

- 新增 maxHeight prop 支持限制编辑器最大高度
- 编辑器内容区超出最大高度时自动滚动
- 移除 style.css 中未使用的 CSS 规则

packages/effects/plugins/src/tiptap/style.css

@@ -1,9 +1,5 @@
 @reference "@vben/tailwind-config/theme";
 
-.vben-tiptap-content > * + * {
-  @apply mt-3;
-}
-
 .vben-tiptap-content h1 {
   @apply text-2xl font-bold leading-[1.4];
 }
@@ -50,8 +46,6 @@
 
 .vben-tiptap-content img,
 .vben-tiptap-content .vben-tiptap__image {
-  @apply my-4 block h-auto rounded-2xl border border-border;
-
   max-width: min(100%, 640px);
 }
 

packages/effects/plugins/src/tiptap/tiptap.vue

@@ -28,6 +28,7 @@ const props = withDefaults(defineProps<TipTapProps>(), {
   extensions: undefined,
   imageUpload: undefined,
   minHeight: 240,
+  maxHeight: 400,
   placeholder: $t('ui.tiptap.placeholder'),
   previewable: true,
   toolbar: true,
@@ -41,9 +42,14 @@ const contentMinHeight = computed(() =>
     ? `${props.minHeight}px`
     : props.minHeight,
 );
+const contentMaxHeight = computed(() =>
+  typeof props.maxHeight === 'number'
+    ? `${props.maxHeight}px`
+    : props.maxHeight,
+);
 const tiptapContentClass = cn(
   'vben-tiptap-content vben-tiptap__content',
-  'text-foreground min-h-(--vben-tiptap-min-height) leading-7 outline-none',
+  'text-foreground max-h-(--vben-tiptap-max-height) min-h-(--vben-tiptap-min-height) overflow-auto leading-7 outline-none',
 );
 const blobUrlTracker = new Set<string>();
 const editor = useEditor({
@@ -154,7 +160,10 @@ onBeforeUnmount(() => {
 
 <template>
   <div
-    :style="{ '--vben-tiptap-min-height': contentMinHeight }"
+    :style="{
+      '--vben-tiptap-min-height': contentMinHeight,
+      '--vben-tiptap-max-height': contentMaxHeight,
+    }"
     class="vben-tiptap overflow-hidden rounded-xl border border-border bg-card"
   >
     <div

packages/effects/plugins/src/tiptap/types.ts

@@ -30,6 +30,7 @@ export interface TipTapProps {
   extensions?: Extensions;
   imageUpload?: ImageUploadOptions;
   minHeight?: number | string;
+  maxHeight?: number | string;
   placeholder?: string;
   previewable?: boolean;
   toolbar?: boolean;

playground/src/adapter/component/index.ts

@@ -73,6 +73,8 @@ import { isEmpty } from '@vben/utils';
 import { VbenCollapsibleParams } from '@vben-core/shadcn-ui';
 
 import { message, Modal, notification } from 'ant-design-vue';
+
+import { upload_file } from '#/api/examples/upload';
 type AdapterUploadProps = UploadProps & {
   aspectRatio?: string;
   crop?: boolean;
@@ -722,7 +724,26 @@ async function initComponentAdapter() {
     RadioGroup,
     RangePicker,
     Rate,
-    RichEditor: withDefaultPlaceholder(VbenTiptap, 'input'),
+    RichEditor: withDefaultPlaceholder(VbenTiptap, 'input', {
+      imageUpload: {
+        upload: (file: any, onProgress: any) => {
+          return new Promise((resolve, reject) => {
+            upload_file({
+              file,
+              onProgress({ percent }) {
+                onProgress?.(percent);
+              },
+              onSuccess(response) {
+                resolve(response);
+              },
+              onError() {
+                reject(new Error($t('ui.tiptap.upload.uploadFailed')));
+              },
+            });
+          });
+        },
+      },
+    }),
     Select: withDefaultPlaceholder(Select, 'select'),
     Space,
     Switch,