124 lines
3.3 KiB
TypeScript
124 lines
3.3 KiB
TypeScript
import {
|
|
Mark,
|
|
mergeAttributes,
|
|
} from '@tiptap/core'
|
|
|
|
export interface TextStyleOptions {
|
|
/**
|
|
* HTML attributes to add to the span element.
|
|
* @default {}
|
|
* @example { class: 'foo' }
|
|
*/
|
|
HTMLAttributes: Record<string, any>,
|
|
/**
|
|
* When enabled, merges the styles of nested spans into the child span during HTML parsing.
|
|
* This prioritizes the style of the child span.
|
|
* Used when parsing content created in other editors.
|
|
* (Fix for ProseMirror's default behavior.)
|
|
* @default false
|
|
*/
|
|
mergeNestedSpanStyles: boolean,
|
|
}
|
|
|
|
declare module '@tiptap/core' {
|
|
interface Commands<ReturnType> {
|
|
textStyle: {
|
|
/**
|
|
* Remove spans without inline style attributes.
|
|
* @example editor.commands.removeEmptyTextStyle()
|
|
*/
|
|
removeEmptyTextStyle: () => ReturnType,
|
|
}
|
|
}
|
|
}
|
|
|
|
const mergeNestedSpanStyles = (element: HTMLElement) => {
|
|
if (!element.children.length) { return }
|
|
const childSpans = element.querySelectorAll('span')
|
|
|
|
if (!childSpans) { return }
|
|
|
|
childSpans.forEach(childSpan => {
|
|
const childStyle = childSpan.getAttribute('style')
|
|
const closestParentSpanStyleOfChild = childSpan.parentElement?.closest('span')?.getAttribute('style')
|
|
|
|
childSpan.setAttribute('style', `${closestParentSpanStyleOfChild};${childStyle}`)
|
|
|
|
})
|
|
}
|
|
|
|
/**
|
|
* This extension allows you to create text styles. It is required by default
|
|
* for the `textColor` and `backgroundColor` extensions.
|
|
* @see https://www.tiptap.dev/api/marks/text-style
|
|
*/
|
|
export const TextStyle = Mark.create<TextStyleOptions>({
|
|
name: 'textStyle',
|
|
|
|
priority: 101,
|
|
|
|
addOptions() {
|
|
return {
|
|
HTMLAttributes: {},
|
|
mergeNestedSpanStyles: false,
|
|
}
|
|
},
|
|
|
|
parseHTML() {
|
|
return [
|
|
{
|
|
tag: 'span',
|
|
getAttrs: element => {
|
|
const hasStyles = (element as HTMLElement).hasAttribute('style')
|
|
|
|
if (!hasStyles) {
|
|
return false
|
|
}
|
|
if (this.options.mergeNestedSpanStyles) { mergeNestedSpanStyles(element) }
|
|
|
|
return {}
|
|
},
|
|
},
|
|
]
|
|
},
|
|
|
|
renderHTML({ HTMLAttributes }) {
|
|
return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
|
|
},
|
|
|
|
addCommands() {
|
|
return {
|
|
removeEmptyTextStyle: () => ({ tr }) => {
|
|
|
|
const { selection } = tr
|
|
|
|
// Gather all of the nodes within the selection range.
|
|
// We would need to go through each node individually
|
|
// to check if it has any inline style attributes.
|
|
// Otherwise, calling commands.unsetMark(this.name)
|
|
// removes everything from all the nodes
|
|
// within the selection range.
|
|
tr.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
|
|
|
|
// Check if it's a paragraph element, if so, skip this node as we apply
|
|
// the text style to inline text nodes only (span).
|
|
if (node.isTextblock) {
|
|
return true
|
|
}
|
|
|
|
// Check if the node has no inline style attributes.
|
|
// Filter out non-`textStyle` marks.
|
|
if (
|
|
!node.marks.filter(mark => mark.type === this.type).some(mark => Object.values(mark.attrs).some(value => !!value))) {
|
|
// Proceed with the removal of the `textStyle` mark for this node only
|
|
tr.removeMark(pos, pos + node.nodeSize, this.type)
|
|
}
|
|
})
|
|
|
|
return true
|
|
},
|
|
}
|
|
},
|
|
|
|
})
|