import { NodeSpec , Node as ProsemirrorNode , DOMOutputSpec } from 'prosemirror-model' ; import { ListItem as TiptapListItem } from 'tiptap-extensions' ; import { transformLineHeightToCSS } from '@/utils/line_height' ; import { ALIGN_PATTERN , LINE_HEIGHT_100 } from '@/constants' ; const ListItemNodeSpec = { attrs : { textAlign : { default : null } , lineHeight : { default : null } , } , content : 'paragraph block*' , defining : true , draggable : false , parseDOM : [ { tag : 'li' , getAttrs , } ] , toDOM , } ; function getAttrs ( dom ) { let { textAlign , lineHeight , } = dom . style ; let align = dom . getAttribute ( 'data-text-align' ) || textAlign || '' ; align = ALIGN_PATTERN . test ( align ) ? align : null ; lineHeight = ( lineHeight && lineHeight !== transformLineHeightToCSS ( LINE_HEIGHT_100 ) ) ? lineHeight : null ; return { textAlign : align , lineHeight , } ; } function toDOM ( node ) { const { textAlign , lineHeight , } = node . attrs ; let style = '' ; const attrs = { } ; if ( textAlign && textAlign !== 'left' ) { style += `text-align: ${ textAlign }` ; } if ( lineHeight ) { const cssLineHeight = transformLineHeightToCSS ( lineHeight ) ; style += `line-height: ${ cssLineHeight };` ; } style && ( attrs . style = style ) ; return [ 'li' , attrs , 0 ] ; } export default class ListItem extends TiptapListItem { get schema ( ) { return ListItemNodeSpec ; } }