Merge pull request #5891 from rtibbles/markdown_edit

fix(texteditor): align markdown output with Perseus grammar

Author: rtibbles

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue

@@ -386,7 +386,9 @@
       // Categories that can overflow (in order of overflow priority)
       const OVERFLOW_CATEGORIES = [
         'insert',
-        'script',
+        // Perseus flavoured markdown does not support super and sub script,
+        // so we disable this for now until we stop using markdown as the primary target
+        // 'script',
         'lists',
         'clearFormat',
         'align',

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js

@@ -39,6 +39,11 @@ export const paramsToImageMd = ({ src, alt, width, height, permanentSrc, textAli
   return `![${alt || ''}](${IMAGE_PLACEHOLDER}/${fileName}${alignSuffix})`;
 };
 
+// --- Underline Translation ---
+// Perseus simple-markdown treats __text__ as <u>; marked treats it as <strong>.
+// Rewrite before marked runs so the round-trip preserves underline.
+export const UNDERLINE_REGEX = /__([\s\S]+?)__(?!_)/g;
+
 // --- Math/Formula Translation ---
 export const MATH_REGEX = /\$\$([^$]+)\$\$/g;
 
@@ -151,5 +156,7 @@ export function preprocessMarkdown(markdown) {
     return `<span data-latex="${params.latex}"></span>`;
   });
 
+  processedMarkdown = processedMarkdown.replace(UNDERLINE_REGEX, '<u>$1</u>');
+
   return marked(processedMarkdown);
 }

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdownSerializer.js

@@ -24,7 +24,7 @@ export const createCustomMarkdownSerializer = editor => {
             trimmedText = `*${trimmedText}*`;
             break;
           case 'underline':
-            trimmedText = `<u>${trimmedText}</u>`;
+            trimmedText = `__${trimmedText}__`;
             break;
           case 'strike':
             trimmedText = `~~${trimmedText}~~`;

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdown.spec.js

@@ -70,7 +70,28 @@ describe('preprocessMarkdown', () => {
     });
   });
 
-  // 4: Standard Markdown Passthrough
+  // 4: Perseus Underline Handling
+  // Perseus's simple-markdown treats __text__ as <u>, but `marked` (CommonMark)
+  // treats it as <strong>. We must rewrite __text__ -> <u>text</u> before marked
+  // sees it, so the round-trip preserves underline instead of turning it into bold.
+  describe('Perseus Underline Handling', () => {
+    it('should rewrite __text__ to <u>text</u> before passing to marked', () => {
+      preprocessMarkdown('This is __underlined__ text.');
+      expect(marked).toHaveBeenCalledWith('This is <u>underlined</u> text.');
+    });
+
+    it('should rewrite multiple __ runs on the same line independently', () => {
+      preprocessMarkdown('__one__ and __two__');
+      expect(marked).toHaveBeenCalledWith('<u>one</u> and <u>two</u>');
+    });
+
+    it('should rewrite __ spanning multiple words', () => {
+      preprocessMarkdown('__multi word underline__');
+      expect(marked).toHaveBeenCalledWith('<u>multi word underline</u>');
+    });
+  });
+
+  // 5: Standard Markdown Passthrough
   describe('Standard Markdown Passthrough', () => {
     it('should pass non-custom syntax through to the marked library', () => {
       const standardMd = 'Here is **bold** and a [link](url).';

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/markdownSerializer.spec.js

@@ -209,7 +209,7 @@ describe('createCustomMarkdownSerializer', () => {
       expect(getMarkdown()).toBe('*' + '**bold and italic**' + '*');
     });
 
-    it('should serialize an underlined node with a <u> tag', () => {
+    it('should serialize an underlined node with __ delimiters (Perseus syntax)', () => {
       const docContent = [
         {
           type: 'paragraph',
@@ -224,7 +224,7 @@ describe('createCustomMarkdownSerializer', () => {
       ];
       const mockEditor = createMockEditor(docContent);
       const getMarkdown = createCustomMarkdownSerializer(mockEditor);
-      expect(getMarkdown()).toBe('<u>underlined</u>');
+      expect(getMarkdown()).toBe('__underlined__');
     });
 
     it('should serialize a link node correctly', () => {