fix: 收敛Markdown编辑器高度
This commit is contained in:
parent
d386d73641
commit
abc882f1e6
@ -52,7 +52,7 @@ pnpm run build:antdv-next
|
||||
- QQBot / 账号连接页拆分 OneBot 连接、QQ 登录、NapCat 运行和运行说明列;更新登录通过 SSE 展示 quick / password / captcha / new-device / qrcode 每步中文进度,密码登录触发 QQ 安全验证时在弹窗内完成腾讯验证码并回交 API,新设备验证二维码和腾讯验证码分开展示;行操作“运行态”打开只读抽屉,展示 NapCat runtime/protocol/session behavior profile、风险模式和登录事件证据。
|
||||
- QQBot / 插件平台页保留在线命令能力表,并提供 manifest 校验、本地插件安装、安装记录、运行事件和账号绑定抽屉,接口走 `/qqbot/plugin-platform/*`。
|
||||
- 博客管理 / 文章管理提供“预览”行操作,打开隐藏二级路由 `/blog/article/:articleId/preview`;预览页按 NapCat WebUI 的微服务嵌入形态实现,iframe 独占容器,文章标题、状态、预览 Host 和返回/刷新/新窗口操作放在右下角悬浮卡片,不占用 iframe 布局空间。新增隐藏路由和按钮权限需要同步 API `blog-menu.sql` / `vben-admin-init.sql` 中的 `BlogArticlePreview` 与 `BlogArticlePreviewButton`。
|
||||
- 博客管理 / 文章表单支持 Markdown、富文本 HTML、源码 HTML 三种编辑模式:Markdown 继续使用 Milkdown/Crepe 并保存 `contentFormat=markdown`;富文本 HTML 使用 Tiptap 并保存 `contentFormat=html`;源码 HTML 用于保留 WordPress/Argon 运行时 DOM,同样保存 `contentFormat=html`。Milkdown/Crepe 必须先引入 `@milkdown/crepe/theme/common/style.css`,再引入具体主题 CSS,否则生产包只有主题变量没有工具栏/菜单布局样式;组件 SCSS 还必须把 `--crepe-color-*` 映射到 Admin `hsl(var(--...))` 主题 token,并覆盖 common 默认大 padding/root overflow,避免暗色模式脱节和首次空编辑器出现内部滚动条。
|
||||
- 博客管理 / 文章表单支持 Markdown、富文本 HTML、源码 HTML 三种编辑模式:Markdown 继续使用 Milkdown/Crepe 并保存 `contentFormat=markdown`;富文本 HTML 使用 Tiptap 并保存 `contentFormat=html`;源码 HTML 用于保留 WordPress/Argon 运行时 DOM,同样保存 `contentFormat=html`。Milkdown/Crepe 必须先引入 `@milkdown/crepe/theme/common/style.css`,再引入具体主题 CSS,否则生产包只有主题变量没有工具栏/菜单布局样式;组件 SCSS 还必须把 `--crepe-color-*` 映射到 Admin `hsl(var(--...))` 主题 token,并用固定高度外壳、隐藏溢出的 root 和正文 flex 滚动区覆盖 common 默认大 padding/高度模型,避免暗色模式脱节和首次空编辑器出现内部滚动条。
|
||||
|
||||
## 部署说明
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.kt-milkdown-editor {
|
||||
display: flex;
|
||||
height: var(--kt-milkdown-min-height, 360px);
|
||||
min-height: var(--kt-milkdown-min-height, 360px);
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
@ -17,7 +18,8 @@
|
||||
}
|
||||
|
||||
&__root {
|
||||
min-height: inherit;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
@ -52,23 +54,29 @@
|
||||
--crepe-color-inline-area: hsl(var(--muted));
|
||||
|
||||
min-height: inherit;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: hsl(var(--foreground));
|
||||
background: hsl(var(--background));
|
||||
}
|
||||
|
||||
.milkdown .editor {
|
||||
min-height: inherit;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.milkdown .ProseMirror {
|
||||
min-height: calc(var(--kt-milkdown-min-height, 360px) - 36px);
|
||||
min-height: 100%;
|
||||
padding: 18px 22px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.milkdown .milkdown-top-bar {
|
||||
flex: 0 0 auto;
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,7 +35,13 @@ describe('ktMilkdownEditor styles', () => {
|
||||
});
|
||||
|
||||
it('keeps the first empty editor render from creating an internal scrollbar', () => {
|
||||
expect(styleSource).toMatch(
|
||||
/\.kt-milkdown-editor\s*\{[\s\S]*?height:\s*var\(--kt-milkdown-min-height,\s*360px\);/,
|
||||
);
|
||||
expect(styleSource).toMatch(/&__root\s*\{[\s\S]*?overflow:\s*hidden;/);
|
||||
expect(styleSource).toMatch(
|
||||
/\.milkdown \.editor\s*\{[\s\S]*?min-height:\s*0;[\s\S]*?flex:\s*1;[\s\S]*?overflow:\s*auto;/,
|
||||
);
|
||||
expect(styleSource).toMatch(
|
||||
/\.milkdown \.ProseMirror\s*\{[\s\S]*?padding:\s*18px 22px;/,
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user