[editor] Fix and rework TextEditor list extensions

Was not working at all before. Now the logic is much simpler with the 
use of tiptap attributes.

projects/editor/src/app/text-editor/extensions/bullet-list.ts

-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 });
+      }
     };
   }
 });

projects/editor/src/app/text-editor/extensions/ordered-list.ts

+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 })
+      )
+    };
+  }
+});

projects/editor/src/app/text-editor/extensions/orderedList-extension.ts

-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)()
-    };
-  }
-});

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();
       }