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 { .ProseMirror, .ProseMirror-static {
outline: 0; outline: 0;
border: 0; border: 0;
font-size: 20px; font-size: 16px;
word-break: break-word; word-break: break-word;
white-space: normal; white-space: normal;
@ -15,19 +15,24 @@
} }
p { p {
margin: 0;
margin-top: var(--paragraphSpace); margin-top: var(--paragraphSpace);
} }
p:first-child { p:first-child {
margin-top: 0; margin-top: 0;
} }
ul, ol, li {
margin: 0;
margin-top: var(--paragraphSpace);
}
ul { ul {
list-style-type: disc; list-style-type: disc;
padding-inline-start: 1.25em; padding-inline-start: 1.25em;
li { li {
list-style-type: inherit; list-style-type: inherit;
padding: 2px 0; padding: 0.125em 0;
} }
} }
@ -37,12 +42,12 @@
li { li {
list-style-type: inherit; list-style-type: inherit;
padding: 2px 0; padding: 0.125em 0;
} }
} }
code { code {
background-color: $borderColor; background-color: #f1f1f1;
padding: 2px 6px; padding: 2px 6px;
margin: 0 1px; margin: 0 1px;
border-radius: 4px; border-radius: 4px;
@ -60,37 +65,35 @@
blockquote { blockquote {
overflow: hidden; overflow: hidden;
padding-right: 1.2em; padding: 0 1.2em;
padding-left: 1.2em; margin: 0.6em 0;
margin-left: 0;
margin-right: 0;
font-style: italic; font-style: italic;
border-left: 4px solid #ddd; border-left: 4px solid #e0e0e0;
} }
[data-indent='1'] { [data-indent='1'] {
padding-left: 20px; padding-left: 1em;
} }
[data-indent='2'] { [data-indent='2'] {
padding-left: 40px; padding-left: 2em;
} }
[data-indent='3'] { [data-indent='3'] {
padding-left: 60px; padding-left: 3em;
} }
[data-indent='4'] { [data-indent='4'] {
padding-left: 80px; padding-left: 4em;
} }
[data-indent='5'] { [data-indent='5'] {
padding-left: 100px; padding-left: 5em;
} }
[data-indent='6'] { [data-indent='6'] {
padding-left: 120px; padding-left: 6em;
} }
[data-indent='7'] { [data-indent='7'] {
padding-left: 140px; padding-left: 7em;
} }
[data-indent='8'] { [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 (styleObj['href']) options.hyperlink = { url: styleObj['href'] }
if (bulletFlag && styleObj['list-type'] === 'ol') { 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 options.paraSpaceBefore = 0.1
bulletFlag = false bulletFlag = false
} }
if (bulletFlag && styleObj['list-type'] === 'ul') { 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 options.paraSpaceBefore = 0.1
bulletFlag = false 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) textIndentLevel = parseInt(textIndent)
} }
else if (/px/.test(textIndent)) { else if (/px/.test(textIndent)) {
textIndentLevel = Math.floor(parseInt(textIndent) / 20) textIndentLevel = Math.floor(parseInt(textIndent) / 16)
if (!textIndentLevel) textIndentLevel = 1 if (!textIndentLevel) textIndentLevel = 1
} }
} }
@ -152,7 +152,7 @@ const paragraph: NodeSpec = {
const { align, indent, textIndent } = node.attrs const { align, indent, textIndent } = node.attrs
let style = '' let style = ''
if (align && align !== 'left') style += `text-align: ${align};` 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 } const attr: Attr = { style }
if (indent) attr['data-indent'] = indent if (indent) attr['data-indent'] = indent

View File

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

View File

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