Live markdown editor for note body

CHANGELOG.md

@@ -11,10 +11,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 - Notes title and URLs moved to inside the note body. [Issue 83](https://github.com/thermcampos/tasknote/issues/83)
+- Notes works with live MD renderer, similar to Notion. [PR 88](https://github.com/thermcampos/tasknote/pull/88)
 
 ```
 # Docker images
-- ghcr.io/thermcampos/tasknote/client:app-v2026.09.25.12
+- ghcr.io/thermcampos/tasknote/client:app-v2026.09.25.13
 ```
 ---
 

client/cypress/e2e/notes.cy.ts

@@ -64,7 +64,7 @@ describe('Notes Management', () => {
     it('displays the add note form', () => {
       cy.contains('Add Note').should('be.visible');
       cy.get('input[name="note_title"]').should('be.visible');
-      cy.get('textarea[name="note_description"]').should('be.visible');
+      cy.get('[data-testid="note-markdown-editor"] .ProseMirror').should('be.visible');
       cy.contains('button', 'Save note').should('be.visible');
     });
 
@@ -74,13 +74,6 @@ describe('Notes Management', () => {
       cy.get('.alert-danger').should('be.visible');
     });
 
-    it('shows a validation error when submitted without content', () => {
-      cy.get('input[name="note_title"]').type('A note title');
-      cy.contains('button', 'Save note').click();
-
-      cy.get('.alert-danger').should('be.visible');
-    });
-
     it('creates a note and navigates to home on success', () => {
       cy.intercept('POST', /\/rest\/notes/, {
         statusCode: 201,
@@ -100,21 +93,56 @@ describe('Notes Management', () => {
       cy.intercept('GET', /\/rest\/notes$/, { statusCode: 200, body: [] }).as('getNotes');
 
       cy.get('input[name="note_title"]').type('New note');
-      cy.get('textarea[name="note_description"]').type('Some content');
+      cy.get('[data-testid="note-markdown-editor"] .ProseMirror').type('Some content');
       cy.contains('button', 'Save note').click();
 
       cy.wait('@createNote');
       cy.url().should('include', '/home');
     });
 
+    it('renders markdown live while typing and saves plain markdown', () => {
+      cy.intercept('POST', /\/rest\/notes/, {
+        statusCode: 201,
+        body: {
+          id: 11,
+          title: 'Live markdown',
+          description: '',
+          url: null,
+          tags: [],
+          lastUpdate: '',
+          shared: false,
+          shareToken: null
+        }
+      }).as('createMarkdownNote');
+
+      cy.intercept('GET', /\/rest\/tasks$/, { statusCode: 200, body: [] }).as('getTasks');
+      cy.intercept('GET', /\/rest\/notes$/, { statusCode: 200, body: [] }).as('getNotes');
+
+      cy.get('input[name="note_title"]').type('Live markdown');
+      cy.get('[data-testid="note-markdown-editor"] .ProseMirror')
+        .type('# Quarterly goals{enter}Some **bold** text{enter}- first item');
+
+      cy.get('[data-testid="note-markdown-editor"] h1').should('contain.text', 'Quarterly goals');
+      cy.get('[data-testid="note-markdown-editor"] strong').should('contain.text', 'bold');
+      cy.get('[data-testid="note-markdown-editor"] li').should('contain.text', 'first item');
+
+      cy.contains('button', 'Save note').click();
+
+      cy.wait('@createMarkdownNote')
+        .its('request.body.description')
+        .should('contain', '# Quarterly goals')
+        .and('contain', '**bold**')
+        .and('contain', '- first item');
+    });
+
     it('shows an error alert when the API returns an error on create', () => {
       cy.intercept('POST', /\/rest\/notes/, {
         statusCode: 500,
         body: { message: 'Internal Server Error' }
       }).as('createNoteFail');
 
       cy.get('input[name="note_title"]').type('Failing note');
-      cy.get('textarea[name="note_description"]').type('Some content');
+      cy.get('[data-testid="note-markdown-editor"] .ProseMirror').type('Some content');
       cy.contains('button', 'Save note').click();
 
       cy.wait('@createNoteFail');
@@ -147,7 +175,8 @@ describe('Notes Management', () => {
 
     it('pre-fills the form with the existing note data', () => {
       cy.get('input[name="note_title"]').should('have.value', 'Meeting notes');
-      cy.get('textarea[name="note_description"]').should('have.value', 'Discuss quarterly goals');
+      cy.get('[data-testid="note-markdown-editor"] .ProseMirror')
+        .should('contain.text', 'Discuss quarterly goals');
     });
 
     it('updates the note and navigates to home on success', () => {