github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 富文本光标处在末尾或使用Ctrl + A全选时，获取到的当前文本样式不正确

Browse Source
This commit is contained in:
pipipi-pikachu 2021-06-09 23:14:21 +08:00
parent bc9193e6b5
commit f4e64cec73
2 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/mocks/slides.ts
View File

@ -40,7 +40,7 @@ export const slides: Slide[] = [
width: 585, width: 585,
height: 188, height: 188,
lineHeight: 1.2, lineHeight: 1.2,
content: '<p style=\'\'><strong><span style=\'font-size: 112px\'>PPTIST</span></strong></p>', content: '<p><strong><span style=\'font-size: 112px\'>PPTIST</span></strong></p>',
rotate: 0, rotate: 0,
defaultFontName: 'Microsoft Yahei', defaultFontName: 'Microsoft Yahei',
defaultColor: '#333' defaultColor: '#333'
@ -52,7 +52,7 @@ export const slides: Slide[] = [
top: 253.25, top: 253.25,
width: 585, width: 585,
height: 56, height: 56,
content: '<p style=\'\'><span style=\'font-size: 24px\'>基于 Vue 3.x + TypeScript 的在线演示文稿应用</span></p>', content: '<p><span style=\'font-size: 24px\'>基于 Vue 3.x + TypeScript 的在线演示文稿应用</span></p>',
rotate: 0, rotate: 0,
defaultFontName: 'Microsoft Yahei', defaultFontName: 'Microsoft Yahei',
defaultColor: '#333' defaultColor: '#333'

37
src/utils/prosemirror/utils.ts
View File

@ -1,4 +1,4 @@
import { Node, NodeType, ResolvedPos } from 'prosemirror-model' import { Node, NodeType, ResolvedPos, Mark } from 'prosemirror-model'
import { EditorState, Selection } from 'prosemirror-state' import { EditorState, Selection } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view' import { EditorView } from 'prosemirror-view'
@ -40,20 +40,21 @@ export const isActiveOfParentNodeType = (nodeType: string, state: EditorState) =
export const getMarkAttrs = (view: EditorView) => { export const getMarkAttrs = (view: EditorView) => {
const { selection, doc } = view.state const { selection, doc } = view.state
const { from } = selection const { from } = selection
const node = doc.nodeAt(from)
let node = doc.nodeAt(from) || doc.nodeAt(from - 1)
if (node?.lastChild) node = node.lastChild
return node?.marks || [] return node?.marks || []
} }
export const getAttrValue = (view: EditorView, markType: string, attr: string) => { export const getAttrValue = (marks: Mark[], markType: string, attr: string) => {
const marks = getMarkAttrs(view)
for (const mark of marks) { for (const mark of marks) {
if (mark.type.name === markType && mark.attrs[attr]) return mark.attrs[attr] if (mark.type.name === markType && mark.attrs[attr]) return mark.attrs[attr]
} }
return null return null
} }
export const isActiveMark = (view: EditorView, markType: string) => { export const isActiveMark = (marks: Mark[], markType: string) => {
const marks = getMarkAttrs(view)
for (const mark of marks) { for (const mark of marks) {
if (mark.type.name === markType) return true if (mark.type.name === markType) return true
} }
@ -77,17 +78,19 @@ export const getAttrValueInSelection = (view: EditorView, attr: string) => {
} }
export const getTextAttrs = (view: EditorView) => { export const getTextAttrs = (view: EditorView) => {
const isBold = isActiveMark(view, 'strong') const marks = getMarkAttrs(view)
const isEm = isActiveMark(view, 'em')
const isUnderline = isActiveMark(view, 'underline') const isBold = isActiveMark(marks, 'strong')
const isStrikethrough = isActiveMark(view, 'strikethrough') const isEm = isActiveMark(marks, 'em')
const isSuperscript = isActiveMark(view, 'superscript') const isUnderline = isActiveMark(marks, 'underline')
const isSubscript = isActiveMark(view, 'subscript') const isStrikethrough = isActiveMark(marks, 'strikethrough')
const isCode = isActiveMark(view, 'code') const isSuperscript = isActiveMark(marks, 'superscript')
const color = getAttrValue(view, 'forecolor', 'color') || '#000' const isSubscript = isActiveMark(marks, 'subscript')
const backcolor = getAttrValue(view, 'backcolor', 'backcolor') || '#000' const isCode = isActiveMark(marks, 'code')
const fontsize = getAttrValue(view, 'fontsize', 'fontsize') || '20px' const color = getAttrValue(marks, 'forecolor', 'color') || '#000'
const fontname = getAttrValue(view, 'fontname', 'fontname') || '微软雅黑' const backcolor = getAttrValue(marks, 'backcolor', 'backcolor') || '#000'
const fontsize = getAttrValue(marks, 'fontsize', 'fontsize') || '20px'
const fontname = getAttrValue(marks, 'fontname', 'fontname') || '微软雅黑'
const align = getAttrValueInSelection(view, 'align') || 'left' const align = getAttrValueInSelection(view, 'align') || 'left'
const isBulletList = isActiveOfParentNodeType('bullet_list', view.state) const isBulletList = isActiveOfParentNodeType('bullet_list', view.state)
const isOrderedList = isActiveOfParentNodeType('ordered_list', view.state) const isOrderedList = isActiveOfParentNodeType('ordered_list', view.state)