refactor(texteditor): remove tiptap-markdown with related logic

Author: habibayman

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/DevHarness.vue

@@ -35,7 +35,7 @@ try inline formulas $$x^2$$ test
 small text
 </small>
 
-1. list one
+1. list one<sub>[1]</sub>
 2. list two
 
 There is a [link here](https://github.com/learningequality/studio/pull/5155/checks)!

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useEditor.js

@@ -9,7 +9,6 @@ import { Image } from '../extensions/Image';
 import { CodeBlockSyntaxHighlight } from '../extensions/CodeBlockSyntaxHighlight';
 import { CustomLink } from '../extensions/Link';
 import { Math } from '../extensions/Math';
-import { Markdown } from '../extensions/Markdown';
 import { createCustomMarkdownSerializer } from '../utils/markdownSerializer';
 
 export function useEditor() {
@@ -31,7 +30,6 @@ export function useEditor() {
         Image,
         CustomLink, // Use our custom Link extension
         Math,
-        Markdown,
       ],
       content: content || '<p></p>',
       editorProps: {
@@ -43,10 +41,11 @@ export function useEditor() {
       onCreate: () => {
         isReady.value = true;
 
-        const markdownStorage = editor.value.storage.markdown;
-        if (markdownStorage) {
-          markdownStorage.getMarkdown = createCustomMarkdownSerializer(editor.value);
+        // Create a simple storage object to hold our custom markdown serializer
+        if (!editor.value.storage.markdown) {
+          editor.value.storage.markdown = {};
         }
+        editor.value.storage.markdown.getMarkdown = createCustomMarkdownSerializer(editor.value);
       },
     });
   };

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/extensions/Markdown.js

@@ -1,4 +1,6 @@
 // Contains utilities for handling Markdown content bidirectional conversion in TipTap editor.
+// eslint-disable-next-line import/namespace
+import { marked } from 'marked';
 
 // --- Image Translation ---
 export const IMAGE_PLACEHOLDER = 'placeholder';
@@ -53,21 +55,22 @@ export const paramsToMathMd = ({ latex }) => {
  */
 export function preprocessMarkdown(markdown) {
   if (!markdown) return '';
+
   let processedMarkdown = markdown;
 
-  // Replace custom images with standard <img> tags
+  // First handle your custom syntax (images and math) as before
   processedMarkdown = processedMarkdown.replace(IMAGE_REGEX, match => {
     const params = imageMdToParams(match);
     if (!params) return match;
     return `<img src="${params.src}" alt="${params.alt}" width="${params.width}" height="${params.height}" />`;
   });
 
-  // Replace $$...$$ with a custom <span> tag for our Math extension
   processedMarkdown = processedMarkdown.replace(MATH_REGEX, match => {
     const params = mathMdToParams(match);
     if (!params) return match;
     return `<span data-latex="${params.latex}"></span>`;
   });
 
-  return processedMarkdown;
+  // Use marked.js to parse the rest of the markdown
+  return marked(processedMarkdown);
 }

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

@@ -84,6 +84,7 @@
     "kolibri-design-system": "5.2.0",
     "lodash": "^4.17.21",
     "lowlight": "^3.3.0",
+    "marked": "^16.1.1",
     "material-icons": "0.3.1",
     "mathlive": "^0.105.3",
     "mutex-js": "^1.1.5",
@@ -97,7 +98,6 @@
     "spark-md5": "^3.0.0",
     "store2": "^2.14.4",
     "string-strip-html": "8.3.0",
-    "tiptap-markdown": "^0.8.10",
     "uuid": "^11.1.0",
     "vue": "~2.7.16",
     "vue-croppa": "^1.3.8",