f5feddc6c7
* feat(@vben/plugins): tiptap 组件新增 maxHeight 属性支持 - 新增 maxHeight prop 支持限制编辑器最大高度 - 编辑器内容区超出最大高度时自动滚动 - 移除 style.css 中未使用的 CSS 规则 * docs(@vben/plugins): 添加 tiptap 富文本编辑器组件文档 - 新增中文文档 docs/src/components/common-ui/vben-tiptap.md - 新增英文文档 docs/src/en/components/common-ui/vben-tiptap.md - 新增基础用法示例 demos/vben-tiptap/basic - 新增图片上传示例 demos/vben-tiptap/image-upload - 更新文档侧边栏配置 * fix(@vben/plugins): extract URL from response in image upload callback The upload callback was incorrectly passing the AxiosResponse object to resolve() instead of extracting the actual image URL string. This caused the editor to insert [object Object] as image src, resulting in broken images. * chore: add changeset for tiptap maxHeight feature * Revert "chore: add changeset for tiptap maxHeight feature" This reverts commit a28fc4441f14641f6af6c1a143aa6959591315b2.
113 lines
2.2 KiB
CSS
113 lines
2.2 KiB
CSS
@reference "@vben/tailwind-config/theme";
|
|
|
|
.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 {
|
|
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);
|
|
}
|
|
}
|