feat(gui): preview message of @Todo annotation

api-editor/gui/src/common/util/stringOperations.test.ts

@@ -0,0 +1,11 @@
+import { truncate } from './stringOperations';
+
+describe('truncate', () => {
+    test('should return strings with at most max length unchanged', () => {
+        expect(truncate('Lorem ipsum', 11)).toBe('Lorem ipsum');
+    });
+
+    test('should truncate strings longer than max length and append ...', () => {
+        expect(truncate('Lorem ipsum', 10)).toBe('Lorem ips\u2026');
+    });
+});

api-editor/gui/src/common/util/stringOperations.ts

@@ -0,0 +1,3 @@
+export const truncate = function (text: string, maxLength: number): string {
+    return text.length > maxLength ? text.substring(0, maxLength - 1) + '\u2026' : text;
+};

api-editor/gui/src/features/annotations/AnnotationView.tsx

@@ -64,6 +64,7 @@ import {
     showRenameAnnotationForm,
     showTodoAnnotationForm,
 } from '../ui/uiSlice';
+import { truncate } from '../../common/util/stringOperations';
 
 interface AnnotationViewProps {
     target: string;
@@ -252,6 +253,7 @@ export const AnnotationView: React.FC<AnnotationViewProps> = function ({ target
             {todoAnnotation && (
                 <AnnotationTag
                     type="todo"
+                    name={truncate(todoAnnotation.newTodo, 50)}
                     annotation={todoAnnotation}
                     onEdit={() => dispatch(showTodoAnnotationForm(target))}
                     onDelete={() => dispatch(removeTodo(target))}