Merge pull request #27 from wellmaintained/bugfix/prevent-loss-of-newlines

bugfix/prevent-loss-of-newlines

Author: mrdavidlaing

components/tiptap-editor.tsx

@@ -43,18 +43,31 @@ export function TipTapEditor({ content, onChange, className = '', minimal = fals
         },
         heading: {
           levels: [1, 2, 3]
+        },
+        hardBreak: {
+          keepMarks: true,
+          HTMLAttributes: {
+            class: 'my-2'
+          }
+        },
+        paragraph: {
+          HTMLAttributes: {
+            class: 'mb-2'
+          }
         }
       }),
       Markdown.configure({
         html: false,
         transformPastedText: true,
-        transformCopiedText: true
+        transformCopiedText: true,
+        breaks: true
       })
     ],
     content: rawMarkdown,
     onUpdate: ({ editor }) => {
-      // Use the markdown extension to get markdown content
       const markdown = editor.storage.markdown.getMarkdown();
+      console.log('markdown content:', markdown);
+
       setRawMarkdown(markdown);
       onChange(markdown);
     },
@@ -102,9 +115,8 @@ export function TipTapEditor({ content, onChange, className = '', minimal = fals
   // Toggle between rich text and raw markdown modes
   const toggleEditMode = () => {
     if (isRawMode && editor) {
-      // When switching from raw to rich, set the markdown content
       editor.commands.clearContent();
-      editor.commands.insertContent(rawMarkdown);
+      editor.commands.setContent(rawMarkdown);
     }
     setIsRawMode(!isRawMode);
   };
@@ -211,7 +223,7 @@ export function TipTapEditor({ content, onChange, className = '', minimal = fals
 
       {isRawMode ? (
         <Textarea
-          value={rawMarkdown}
+          value={rawMarkdown || ''}
           onChange={handleRawMarkdownChange}
           className={`resize-none border-none rounded-none focus-visible:ring-0 p-4 font-mono text-sm ${
             minimal ? 'min-h-0' : 'min-h-[200px]'

components/tiptap-view.tsx

@@ -21,15 +21,27 @@ export function TipTapView({ content, className = '' }: TipTapViewProps) {
         },
         heading: {
           levels: [1, 2, 3]
+        },
+        hardBreak: {
+          keepMarks: true,
+          HTMLAttributes: {
+            class: 'my-2'
+          }
+        },
+        paragraph: {
+          HTMLAttributes: {
+            class: 'mb-2'
+          }
         }
       }),
       Markdown.configure({
         html: false,
         transformPastedText: true,
-        transformCopiedText: true
+        transformCopiedText: true,
+        breaks: true
       })
     ],
-    content,
+    content: typeof content === 'string' ? (content.startsWith('"') ? JSON.parse(content) : content) : '',
     editable: false,
     editorProps: {
       attributes: {
@@ -41,9 +53,15 @@ export function TipTapView({ content, className = '' }: TipTapViewProps) {
   // Update editor content when content prop changes
   React.useEffect(() => {
     if (editor && content !== undefined) {
-      // Only update if content actually changed
-      if (editor.storage.markdown.getMarkdown() !== content) {
-        editor.commands.setContent(content);
+      try {
+        const parsedContent = content.startsWith('"') ? JSON.parse(content) : content;
+        // Only update if content actually changed
+        if (editor.storage.markdown.getMarkdown() !== parsedContent) {
+          editor.commands.setContent(parsedContent);
+        }
+      } catch (e) {
+        console.error('Error parsing content:', e);
+        editor.commands.setContent('');
       }
     }
   }, [editor, content]);

lib/infrastructure/__tests__/firestoreDecisionsRepository.integration.test.ts

@@ -403,6 +403,64 @@ describe('FirestoreDecisionsRepository Integration Tests', () => {
     }, 20000);
   });
 
+  describe('newline preservation', () => {
+    it('should preserve empty lines in markdown content', async () => {
+      const testName = 'newline-preservation';
+      const emptyDecision = Decision.createEmptyDecision();
+      const randomChars = Math.random().toString(36).substring(5, 9);
+      const projectId = `test-${testName}-${randomChars}`;
+      const teamId = `team-${testName}-${randomChars}`;
+
+      const project = await projectRepository.create(Project.create({
+        id: projectId,
+        name: `Test Project ${testName}`,
+        description: `Temporary project for integration tests ${testName}`,
+        organisationId: BASE_TEST_SCOPE.organisationId,
+      }));
+
+      projectsToCleanUp.push(project);
+
+      const decisionScope = {
+        organisationId: project.organisationId,
+      }
+
+      // Create a decision with markdown content containing multiple empty lines
+      const markdownWithEmptyLines = `# Title
+
+This is a paragraph.
+
+
+This is another paragraph after two empty lines.
+
+* List item 1
+
+* List item 2 after an empty line`;
+
+      const decision = await repository.create(
+        emptyDecision
+          .with({
+            title: 'Decision with empty lines',
+            description: markdownWithEmptyLines,
+            teamIds: [teamId],
+            projectIds: [project.id]
+          })
+          .withoutId(),
+        decisionScope
+      );
+
+      decisionsToCleanUp.push(decision);
+
+      // Retrieve the decision and check if empty lines are preserved
+      const retrievedDecision = await repository.getById(decision.id, decisionScope);
+
+      expect(retrievedDecision.description).toBe(markdownWithEmptyLines);
+
+      // Specifically check for the double newlines
+      expect(retrievedDecision.description).toContain('paragraph.\n\n\nThis');
+      expect(retrievedDecision.description).toContain('item 1\n\n* List');
+    });
+  });
+
   describe('Relationship Management', () => {
     it('should add and remove relationships correctly', async () => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars