perf: 富文本样式优化

This commit is contained in:
pipipi-pikachu 2024-12-29 15:46:16 +08:00
parent 84fd78e39f
commit 77f150b354
6 changed files with 31 additions and 26 deletions

View File

@ -1,7 +1,7 @@
.ProseMirror, .ProseMirror-static {
outline: 0;
border: 0;
font-size: 20px;
font-size: 16px;
word-break: break-word;
white-space: normal;
@ -15,19 +15,24 @@
}
p {
margin: 0;
margin-top: var(--paragraphSpace);
}
p:first-child {
margin-top: 0;
}
ul, ol, li {
margin: 0;
margin-top: var(--paragraphSpace);
}
ul {
list-style-type: disc;
padding-inline-start: 1.25em;
li {
list-style-type: inherit;
padding: 2px 0;
padding: 0.125em 0;
}
}
@ -37,12 +42,12 @@
li {
list-style-type: inherit;
padding: 2px 0;
padding: 0.125em 0;
}
}
code {
background-color: $borderColor;
background-color: #f1f1f1;
padding: 2px 6px;
margin: 0 1px;
border-radius: 4px;
@ -60,37 +65,35 @@
blockquote {
overflow: hidden;
padding-right: 1.2em;
padding-left: 1.2em;
margin-left: 0;
margin-right: 0;
padding: 0 1.2em;
margin: 0.6em 0;
font-style: italic;
border-left: 4px solid #ddd;
border-left: 4px solid #e0e0e0;
}
[data-indent='1'] {
padding-left: 20px;
padding-left: 1em;
}
[data-indent='2'] {
padding-left: 40px;
padding-left: 2em;
}
[data-indent='3'] {
padding-left: 60px;
padding-left: 3em;
}
[data-indent='4'] {
padding-left: 80px;
padding-left: 4em;
}
[data-indent='5'] {
padding-left: 100px;
padding-left: 5em;
}
[data-indent='6'] {
padding-left: 120px;
padding-left: 6em;
}
[data-indent='7'] {
padding-left: 140px;
padding-left: 7em;
}
[data-indent='8'] {
padding-left: 160px;
padding-left: 8em;
}
}

View File

@ -203,12 +203,12 @@ export default () => {
if (styleObj['href']) options.hyperlink = { url: styleObj['href'] }
if (bulletFlag && styleObj['list-type'] === 'ol') {
options.bullet = { type: 'number', indent: (options.fontSize || 20) * 1.25 }
options.bullet = { type: 'number', indent: (options.fontSize || 16) * 1.25 }
options.paraSpaceBefore = 0.1
bulletFlag = false
}
if (bulletFlag && styleObj['list-type'] === 'ul') {
options.bullet = { indent: (options.fontSize || 20) * 1.25 }
options.bullet = { indent: (options.fontSize || 16) * 1.25 }
options.paraSpaceBefore = 0.1
bulletFlag = false
}

View File

@ -139,7 +139,7 @@ interface PPTBaseElement {
}
export type TextType = 'title' | 'subtitle' | 'content' | 'item' | 'notes' | 'header' | 'footer'
export type TextType = 'title' | 'subtitle' | 'content' | 'item' | 'itemTitle' | 'notes' | 'header' | 'footer' | 'partNumber'
/**
*

View File

@ -129,7 +129,7 @@ const paragraph: NodeSpec = {
textIndentLevel = parseInt(textIndent)
}
else if (/px/.test(textIndent)) {
textIndentLevel = Math.floor(parseInt(textIndent) / 20)
textIndentLevel = Math.floor(parseInt(textIndent) / 16)
if (!textIndentLevel) textIndentLevel = 1
}
}
@ -152,7 +152,7 @@ const paragraph: NodeSpec = {
const { align, indent, textIndent } = node.attrs
let style = ''
if (align && align !== 'left') style += `text-align: ${align};`
if (textIndent) style += `text-indent: ${textIndent * 20}px;`
if (textIndent) style += `text-indent: ${textIndent}em;`
const attr: Attr = { style }
if (indent) attr['data-indent'] = indent

View File

@ -184,9 +184,9 @@ interface DefaultAttrs {
align: Align
}
const _defaultAttrs: DefaultAttrs = {
color: '#000',
color: '#000000',
backcolor: '',
fontsize: '20px',
fontsize: '16px',
fontname: '微软雅黑',
align: 'left',
}
@ -248,9 +248,9 @@ export const defaultRichTextAttrs: TextAttrs = {
superscript: false,
subscript: false,
code: false,
color: '#000',
color: '#000000',
backcolor: '',
fontsize: '20px',
fontsize: '16px',
fontname: '微软雅黑',
link: '',
align: 'left',

View File

@ -61,9 +61,11 @@ const textTypeOptions = ref<{ label: string; value: TextType | '' }[]>([
{ label: '副标题', value: 'subtitle' },
{ label: '正文', value: 'content' },
{ label: '列表项目', value: 'item' },
{ label: '列表项标题', value: 'itemTitle' },
{ label: '注释', value: 'notes' },
{ label: '页眉', value: 'header' },
{ label: '页脚', value: 'footer' },
{ label: '节编号', value: 'partNumber' },
])
const slideType = computed(() => currentSlide.value?.type || '')