diff --git a/projects/editor/src/app/text-editor/extensions/bullet-list.ts b/projects/editor/src/app/text-editor/extensions/bullet-list.ts index 54cd0538cf8d86949e636e174faf89b34d3bad1e..9f817b81d5ad8f34bdd151cfcd9d92c7b409a8a0 100644 --- a/projects/editor/src/app/text-editor/extensions/bullet-list.ts +++ b/projects/editor/src/app/text-editor/extensions/bullet-list.ts @@ -1,5 +1,3 @@ -import { Command } from '@tiptap/core'; -import { Transaction } from 'prosemirror-state'; import { BulletList } from '@tiptap/extension-bullet-list'; declare module '@tiptap/core' { @@ -11,45 +9,24 @@ declare module '@tiptap/core' { } export const BulletListExtension = BulletList.extend({ - name: 'BulletListExtension', - addAttributes() { return { listStyle: { default: 'disc', parseHTML: element => element.style.listStyleType, - renderHTML: attributes => ({ - style: `list-style: ${attributes.listStyle};` - }) + renderHTML: attributes => { + return { style: `list-style: ${attributes.listStyle};` }; + } } }; }, addCommands() { - const setNodeIndentMarkup = (tr: Transaction, pos: number, newStyle: string): Transaction => { - const node = tr?.doc?.nodeAt(pos); - if (node) { - const nodeAttrs = { ...node.attrs, listStyle: newStyle }; - if (node.type.name !== 'text') { - return tr.setNodeMarkup(pos, node.type, nodeAttrs, node.marks); - } - } - return tr; - }; - - const applyListStyle: (newStyle: string) => () => Command = - newStyle => () => ({ tr, state, dispatch }) => { - const { selection } = state; - let transaction; - tr.doc.nodesBetween(selection.from, selection.to, (node, pos) => { - transaction = setNodeIndentMarkup(tr, pos, newStyle); - }); - dispatch?.(transaction); - return true; - }; - return { - setBulletListStyle: (newStyle: string) => applyListStyle(newStyle)() + ...this.parent?.(), + setBulletListStyle: (newStyle: string) => ({ commands }) => { + return commands.updateAttributes(this.name, { listStyle: newStyle }); + } }; } }); diff --git a/projects/editor/src/app/text-editor/extensions/ordered-list.ts b/projects/editor/src/app/text-editor/extensions/ordered-list.ts new file mode 100644 index 0000000000000000000000000000000000000000..5a1d5e121d6dc07e8369930c296739a539a97bf9 --- /dev/null +++ b/projects/editor/src/app/text-editor/extensions/ordered-list.ts @@ -0,0 +1,43 @@ +import { OrderedList } from '@tiptap/extension-ordered-list'; + +declare module '@tiptap/core' { + interface Commands<ReturnType> { + orderedListExtension: { + setOrderedListStyle: (newStyle: string) => ReturnType, + setOrderedListFontSize: (fontSize: string) => ReturnType + }; + } +} + +export const OrderedListExtension = OrderedList.extend({ + addAttributes() { + return { + listStyle: { + default: 'upper-roman', + parseHTML: element => element.style.listStyleType, + renderHTML: attributes => { + return { style: `list-style: ${attributes.listStyle}` }; + } + }, + fontSize: { + default: '20px', + parseHTML: element => element.style.fontSize, + renderHTML: attributes => { + return { style: `font-size: ${attributes.fontSize}` }; + } + } + }; + }, + + addCommands() { + return { + ...this.parent?.(), + setOrderedListStyle: (newStyle: string) => ({ commands }) => ( + commands.updateAttributes(this.name, { listStyle: newStyle }) + ), + setOrderedListFontSize: (fontSize: string) => ({ commands }) => ( + commands.updateAttributes(this.name, { fontSize: fontSize }) + ) + }; + } +}); diff --git a/projects/editor/src/app/text-editor/extensions/orderedList-extension.ts b/projects/editor/src/app/text-editor/extensions/orderedList-extension.ts deleted file mode 100644 index a410c265d08a5b493f218350787bff88aa7266f9..0000000000000000000000000000000000000000 --- a/projects/editor/src/app/text-editor/extensions/orderedList-extension.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { Command } from '@tiptap/core'; -import { Transaction } from 'prosemirror-state'; -import { OrderedList } from '@tiptap/extension-ordered-list'; - -declare module '@tiptap/core' { - interface Commands<ReturnType> { - orderedListExtension: { - setOrderedListStyle: (newStyle: string, fontSize: string) => ReturnType - }; - } -} - -export const OrderedListExtension = OrderedList.extend({ - name: 'OrderedListExtension', - - addAttributes() { - return { - listStyle: { - default: 'decimal', - parseHTML: element => element.style.listStyleType, - renderHTML: attributes => ({ - style: `list-style: ${attributes.listStyle}` - }) - }, - fontSize: { - default: '20px', - parseHTML: element => element.style.fontSize, - renderHTML: attributes => ({ - style: `font-size: ${attributes.fontSize}` - }) - } - }; - }, - - addCommands() { - const setNodeIndentMarkup = (tr: Transaction, pos: number, newStyle: string, fontSize: string): Transaction => { - const node = tr?.doc?.nodeAt(pos); - if (node) { - const nodeAttrs = { ...node.attrs, listStyle: newStyle, fontSize: fontSize }; - if (node.type.name !== 'text') { - return tr.setNodeMarkup(pos, node.type, nodeAttrs, node.marks); - } - } - return tr; - }; - - const applyListStyle: (newStyle: string, fontSize: string) => () => Command = - (newStyle, fontSize) => () => ( - { tr, state, dispatch } - ) => { - const { selection } = state; - let transaction; - tr.doc.nodesBetween(selection.from, selection.to, (node, pos) => { - transaction = setNodeIndentMarkup(tr, pos, newStyle, fontSize); - }); - dispatch?.(transaction); - return true; - }; - - return { - setOrderedListStyle: (newStyle: string, fontSize: string) => applyListStyle(newStyle, fontSize)() - }; - } -}); diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.ts b/projects/editor/src/app/text-editor/rich-text-editor.component.ts index d73e6a999fe4aad30fe616d11e3b5dff53501bde..55bfbee73090eb8b48ac9d62603c7f46d879cd3b 100644 --- a/projects/editor/src/app/text-editor/rich-text-editor.component.ts +++ b/projects/editor/src/app/text-editor/rich-text-editor.component.ts @@ -19,7 +19,7 @@ import { HangingIndent } from './extensions/hanging-indent'; import { ParagraphExtension } from './extensions/paragraph-extension'; import { FontSize } from './extensions/font-size'; import { BulletListExtension } from './extensions/bullet-list'; -import { OrderedListExtension } from './extensions/orderedList-extension'; +import { OrderedListExtension } from './extensions/ordered-list'; import { FileService } from '../services/file.service'; @@ -144,7 +144,8 @@ export class RichTextEditorComponent implements AfterViewInit { toggleOrderedList(): void { this.editor.chain().toggleOrderedList().focus().run(); - this.editor.commands.setOrderedListStyle(this.orderedListStyle, this.selectedFontSize); + this.editor.commands.setOrderedListStyle(this.orderedListStyle); + this.editor.commands.setOrderedListFontSize(this.selectedFontSize); } applyListStyle(listType: string, style: string): void { @@ -156,7 +157,8 @@ export class RichTextEditorComponent implements AfterViewInit { } } else { this.orderedListStyle = style; - this.editor.commands.setOrderedListStyle(style, this.selectedFontSize); + this.editor.commands.setOrderedListStyle(style); + this.editor.commands.setOrderedListFontSize(this.selectedFontSize); if (!this.editor.isActive('orderedList')) { this.toggleOrderedList(); }