4ca2f1c6e8
- 新增 imageUpload 配置项，支持自定义上传接口 - 支持文件选择、拖拽、粘贴三种上传方式 - 上传中显示 blob 预览图 + loading spinner / 进度条 - 支持 accept 和 maxSize 文件校验 - 支持 onUploadError 自定义错误处理 - 未配置 imageUpload 时保持原有 URL 插入行为不变 - 使用 NodeView 实现实时 DOM 控制的进度展示
119 lines
2.3 KiB
CSS
119 lines
2.3 KiB
CSS
@reference "@vben/tailwind-config/theme";
|
|
|
|
.vben-tiptap-content > * + * {
|
|
@apply mt-3;
|
|
}
|
|
|
|
.vben-tiptap-content h1 {
|
|
@apply text-2xl font-bold leading-[1.4];
|
|
}
|
|
|
|
.vben-tiptap-content h2 {
|
|
@apply text-xl font-bold leading-[1.45];
|
|
}
|
|
|
|
.vben-tiptap-content h3 {
|
|
@apply text-lg font-semibold leading-[1.5];
|
|
}
|
|
|
|
.vben-tiptap-content h4 {
|
|
@apply text-base font-semibold leading-[1.55];
|
|
}
|
|
|
|
.vben-tiptap-content ul {
|
|
@apply list-disc pl-6;
|
|
}
|
|
|
|
.vben-tiptap-content ol {
|
|
@apply list-decimal pl-6;
|
|
}
|
|
|
|
.vben-tiptap-content blockquote {
|
|
@apply border-l-4 border-primary pl-4 text-muted-foreground;
|
|
}
|
|
|
|
.vben-tiptap-content a {
|
|
@apply text-primary underline decoration-1 underline-offset-[3px];
|
|
}
|
|
|
|
.vben-tiptap-content code {
|
|
@apply rounded-[0.45rem] border border-border bg-secondary px-[0.35rem] py-[0.15rem] text-[0.9em] text-primary;
|
|
}
|
|
|
|
.vben-tiptap-content pre {
|
|
@apply overflow-x-auto rounded-[0.9rem] border border-border bg-popover p-4 text-popover-foreground;
|
|
}
|
|
|
|
.vben-tiptap-content pre code {
|
|
@apply border-none bg-transparent p-0 text-inherit;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* Image upload states */
|
|
.vben-tiptap-upload-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
max-width: min(100%, 640px);
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.vben-tiptap-upload-wrapper img {
|
|
display: block;
|
|
margin: 0;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.vben-tiptap-upload-spinner {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: hsl(var(--card) / 30%);
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.vben-tiptap-upload-spinner::after {
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
content: '';
|
|
border: 2px solid hsl(var(--foreground) / 30%);
|
|
border-top-color: hsl(var(--foreground));
|
|
border-radius: 50%;
|
|
animation: vben-tiptap-spin 0.8s linear infinite;
|
|
}
|
|
|
|
.vben-tiptap-upload-progress {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 4px;
|
|
overflow: hidden;
|
|
background-color: hsl(var(--muted));
|
|
border-radius: 0 0 1rem 1rem;
|
|
}
|
|
|
|
.vben-tiptap-upload-progress-fill {
|
|
height: 100%;
|
|
background-color: hsl(var(--primary));
|
|
transition: width 0.2s ease;
|
|
}
|
|
|
|
@keyframes vben-tiptap-spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|