Communication: Fix an issue with list formatting in Markdown (#9925)

ls1intum · Dec 3, 2024 · 75c080a · 75c080a
1 parent ef03418
commit 75c080a
Show file tree

Hide file tree

Showing 10 changed files with 204 additions and 32 deletions.
diff --git a/.../app/shared/metis/posting-content/posting-content-part/posting-content-part.components.ts b/.../app/shared/metis/posting-content/posting-content-part/posting-content-part.components.ts
@@ -76,15 +76,21 @@ export class PostingContentPartComponent implements OnInit {
     processContent() {
         if (this.postingContentPart.contentBeforeReference) {
             this.processedContentBeforeReference = this.escapeNumberedList(this.postingContentPart.contentBeforeReference);
+            this.processedContentBeforeReference = this.escapeUnorderedList(this.processedContentBeforeReference);
         }
 
         if (this.postingContentPart.contentAfterReference) {
             this.processedContentAfterReference = this.escapeNumberedList(this.postingContentPart.contentAfterReference);
+            this.processedContentAfterReference = this.escapeUnorderedList(this.processedContentAfterReference);
         }
     }
 
     escapeNumberedList(content: string): string {
-        return content.replace(/^(\s*\d+)\. /gm, '$1\\. ');
+        return content.replace(/^(\s*\d+)\. /gm, '$1\\.  ');
+    }
+
+    escapeUnorderedList(content: string): string {
+        return content.replace(/^(- )/gm, '\\$1');
     }
 
     /**

diff --git a/...main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.ts b/...main/webapp/app/shared/metis/posting-markdown-editor/posting-markdown-editor.component.ts
@@ -15,6 +15,7 @@ import {
     inject,
     input,
 } from '@angular/core';
+import monaco from 'monaco-editor';
 import { ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MetisService } from 'app/shared/metis/metis.service';
@@ -122,6 +123,41 @@ export class PostingMarkdownEditorComponent implements OnInit, ControlValueAcces
 
     ngAfterViewInit(): void {
         this.markdownEditor.enableTextFieldMode();
+
+        const editor = this.markdownEditor.monacoEditor;
+        if (editor) {
+            editor.onDidChangeModelContent((event: monaco.editor.IModelContentChangedEvent) => {
+                const position = editor.getPosition();
+                if (!position) {
+                    return;
+                }
+
+                const model = editor.getModel();
+                if (!model) {
+                    return;
+                }
+
+                const lineContent = model.getLineContent(position.lineNumber).trimStart();
+                const hasPrefix = lineContent.startsWith('- ') || /^\s*1\. /.test(lineContent);
+                if (hasPrefix && event.changes.length === 1 && (event.changes[0].text.startsWith('- ') || event.changes[0].text.startsWith('1. '))) {
+                    return;
+                }
+
+                if (hasPrefix) {
+                    this.handleKeyDown(model, position.lineNumber);
+                }
+            });
+        }
+    }
+
+    private handleKeyDown(model: monaco.editor.ITextModel, lineNumber: number): void {
+        const lineContent = model.getLineContent(lineNumber).trimStart();
+
+        if (lineContent.startsWith('- ')) {
+            this.markdownEditor.handleActionClick(new MouseEvent('click'), this.defaultActions.find((action) => action instanceof BulletedListAction)!);
+        } else if (/^\d+\. /.test(lineContent)) {
+            this.markdownEditor.handleActionClick(new MouseEvent('click'), this.defaultActions.find((action) => action instanceof OrderedListAction)!);
+        }
     }
 
     /**

diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/bulleted-list.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/bulleted-list.action.ts
@@ -1,7 +1,7 @@
 import { faListUl } from '@fortawesome/free-solid-svg-icons';
 import { ListAction } from './list.action';
 
-const BULLET_PREFIX = '•  ';
+const BULLET_PREFIX = '- ';
 
 /**
  * Action used to add or modify a bullet-point list in the text editor.

diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/list.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/list.action.ts
@@ -37,7 +37,7 @@ export abstract class ListAction extends TextEditorAction {
      */
     protected stripAnyListPrefix(line: string): string {
         const numberedListRegex = /^\s*\d+\.\s+/;
-        const bulletListRegex = /^\s*[-*+•]\s+/;
+        const bulletListRegex = /^\s*[-*+]\s+/;
 
         if (numberedListRegex.test(line)) {
             return line.replace(numberedListRegex, '');
@@ -91,10 +91,13 @@ export abstract class ListAction extends TextEditorAction {
             }
 
             if (position.getColumn() === currentLineText.length + 1) {
-                const lineWithoutPrefix = this.stripAnyListPrefix(currentLineText);
                 const newPrefix = this.getPrefix(1);
 
-                const updatedLine = currentLineText.startsWith(newPrefix) ? lineWithoutPrefix : newPrefix + lineWithoutPrefix;
+                if (currentLineText.startsWith(newPrefix)) {
+                    return;
+                }
+
+                const updatedLine = newPrefix + currentLineText;
 
                 editor.replaceTextAtRange(
                     new TextEditorRange(new TextEditorPosition(position.getLineNumber(), 1), new TextEditorPosition(position.getLineNumber(), currentLineText.length + 1)),
@@ -110,7 +113,7 @@ export abstract class ListAction extends TextEditorAction {
 
         // Determine if all lines have the current prefix
         let allLinesHaveCurrentPrefix;
-        if (this.getPrefix(1) != '•  ') {
+        if (this.getPrefix(1) != '- ') {
             const numberedListRegex = /^\s*\d+\.\s+/;
             allLinesHaveCurrentPrefix = lines.every((line) => numberedListRegex.test(line));
         } else {
@@ -124,7 +127,7 @@ export abstract class ListAction extends TextEditorAction {
             const linesWithoutPrefix = lines.map((line) => this.stripAnyListPrefix(line));
 
             updatedLines = linesWithoutPrefix.map((line, index) => {
-                const prefix = this.getPrefix(index) != '•  ' ? this.getPrefix(index + 1) : this.getPrefix(startLineNumber + index);
+                const prefix = this.getPrefix(index) != '- ' ? this.getPrefix(index + 1) : this.getPrefix(startLineNumber + index);
                 return prefix + line;
             });
         }
@@ -141,7 +144,7 @@ export abstract class ListAction extends TextEditorAction {
      */
     protected hasPrefix(line: string): boolean {
         const numberedListRegex = /^\s*\d+\.\s+/;
-        const bulletListRegex = /^\s*[•\-*+]\s+/;
+        const bulletListRegex = /^\s*[-\-*+]\s+/;
         return numberedListRegex.test(line) || bulletListRegex.test(line);
     }
 
@@ -162,9 +165,9 @@ export abstract class ListAction extends TextEditorAction {
                 if (isNumbered) {
                     const match = currentLineText.match(/^\s*(\d+)\.\s+/);
                     const currentNumber = match ? parseInt(match[1], 10) : 0;
-                    nextLinePrefix = `${currentNumber + 1}.  `;
+                    nextLinePrefix = `${currentNumber + 1}. `;
                 } else {
-                    nextLinePrefix = '•  ';
+                    nextLinePrefix = '- ';
                 }
             }
 
@@ -187,7 +190,7 @@ export abstract class ListAction extends TextEditorAction {
         if (position) {
             const lineNumber = position.getLineNumber();
             const lineContent = editor.getLineText(lineNumber);
-            const linePrefixMatch = lineContent.match(/^\s*(\d+\.\s+|[-*+•]\s+)/);
+            const linePrefixMatch = lineContent.match(/^\s*(\d+\.\s+|[-*+]\s+)/);
 
             if (linePrefixMatch) {
                 const prefixLength = linePrefixMatch[0].length;

diff --git a/src/main/webapp/app/shared/monaco-editor/model/actions/ordered-list.action.ts b/src/main/webapp/app/shared/monaco-editor/model/actions/ordered-list.action.ts
@@ -12,7 +12,7 @@ export class OrderedListAction extends ListAction {
     }
 
     public getPrefix(lineNumber: number): string {
-        const space = lineNumber >= 10 ? ' ' : '  ';
+        const space = ' ';
         return `${lineNumber}.${space}`;
     }
 

diff --git a/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts b/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
@@ -118,6 +118,19 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
         return convertedWords.join(' ');
     }
 
+    public onDidChangeModelContent(listener: (event: monaco.editor.IModelContentChangedEvent) => void): monaco.IDisposable {
+        return this._editor.onDidChangeModelContent(listener);
+    }
+
+    public getModel() {
+        return this._editor.getModel();
+    }
+
+    public getLineContent(lineNumber: number): string {
+        const model = this._editor.getModel();
+        return model ? model.getLineContent(lineNumber) : '';
+    }
+
     ngOnInit(): void {
         const resizeObserver = new ResizeObserver(() => {
             this._editor.layout();

diff --git a/...script/spec/component/shared/metis/posting-content/posting-content-part.component.spec.ts b/...script/spec/component/shared/metis/posting-content/posting-content-part.component.spec.ts
@@ -270,4 +270,50 @@ describe('PostingContentPartComponent', () => {
             expect(outputEmitter).not.toHaveBeenCalled();
         });
     });
+
+    describe('Content processing', () => {
+        it('should process content before and after reference with escaped numbered and unordered lists', () => {
+            const contentBefore = '1. This is a numbered list\n2. Another item\n- This is an unordered list';
+            const contentAfter = '1. Numbered again\n- Unordered again';
+            component.postingContentPart = {
+                contentBeforeReference: contentBefore,
+                contentAfterReference: contentAfter,
+                linkToReference: undefined,
+                queryParams: undefined,
+                referenceStr: undefined,
+            } as PostingContentPart;
+            fixture.detectChanges();
+
+            component.processContent();
+
+            expect(component.processedContentBeforeReference).toBe('1\\.  This is a numbered list\n2\\.  Another item\n\\- This is an unordered list');
+            expect(component.processedContentAfterReference).toBe('1\\.  Numbered again\n\\- Unordered again');
+        });
+
+        it('should escape numbered lists correctly', () => {
+            const content = '1. First item\n2. Second item\n3. Third item';
+            const escapedContent = component.escapeNumberedList(content);
+            expect(escapedContent).toBe('1\\.  First item\n2\\.  Second item\n3\\.  Third item');
+        });
+
+        it('should escape unordered lists correctly', () => {
+            const content = '- First item\n- Second item\n- Third item';
+            const escapedContent = component.escapeUnorderedList(content);
+            expect(escapedContent).toBe('\\- First item\n\\- Second item\n\\- Third item');
+        });
+
+        it('should not escape text without numbered or unordered lists', () => {
+            const content = 'This is just a paragraph.\nAnother paragraph.';
+            const escapedNumbered = component.escapeNumberedList(content);
+            const escapedUnordered = component.escapeUnorderedList(content);
+            expect(escapedNumbered).toBe(content);
+            expect(escapedUnordered).toBe(content);
+        });
+
+        it('should handle mixed numbered and unordered lists in content', () => {
+            const content = '1. Numbered item\n- Unordered item\n2. Another numbered item\n- Another unordered item';
+            const escapedContent = component.escapeNumberedList(component.escapeUnorderedList(content));
+            expect(escapedContent).toBe('1\\.  Numbered item\n\\- Unordered item\n2\\.  Another numbered item\n\\- Another unordered item');
+        });
+    });
 });