Replace custom markdown parsing with marked, KaTeX, and some custom plugins for matrix things

.changeset/add_math_and_markdown.md

@@ -0,0 +1,15 @@
+---
+default: minor
+---
+
+# Markdown parser and render updates
+
+Migrated markdown parsing and rendering to use marked, which should fix most (all?) markdown issues involving lists/nested structures, inconsistent/inaccurate code blocks, escape sequences, and all the other bugs with literally everything.
+
+Added math rendering support via marked and KaTeX, uses standard `$$` and `$` delimiters. Only renders a subset of latex tags that will likely need to be expanded so feel free to make issues if needed.
+
+Also adds support for sending markdown tables (although they're rendered rather plainly at the moment), sending valid html directly (such as for colored text), and properly escaping anything with backslashes.
+
+Fixes link previews appearing in code blocks, fixes pmp new line behavior, fixes links not opening in new tabs, and fixes editing arbitrary html messages, probably.
+
+Finally, the old WYSIWYG editor has been completely removed.

package.json

@@ -70,8 +70,10 @@
     "immer": "^9.0.21",
     "is-hotkey": "^0.2.0",
     "jotai": "^2.18.0",
+    "katex": "^0.16.45",
     "linkify-react": "^4.3.2",
     "linkifyjs": "^4.3.2",
+    "marked": "^18.0.2",
     "matrix-js-sdk": "^38.4.0",
     "matrix-widget-api": "^1.16.1",
     "pdfjs-dist": "^5.4.624",

src/app/components/editor/Elements.tsx

@@ -1,4 +1,4 @@
-import { Scroll, Text } from 'folds';
+import { Text } from 'folds';
 import type { RenderElementProps, RenderLeafProps } from 'slate-react';
 import { useFocused, useSelected, useSlate } from 'slate-react';
 import { useAtomValue } from 'jotai';
@@ -130,72 +130,6 @@ export function RenderElement({ attributes, element, children }: RenderElementPr
           {children}
         </Text>
       );
-    case BlockType.Heading:
-      if (element.level === 1)
-        return (
-          <Text className={css.Heading} as="h2" size="H2" {...attributes}>
-            {children}
-          </Text>
-        );
-      if (element.level === 2)
-        return (
-          <Text className={css.Heading} as="h3" size="H3" {...attributes}>
-            {children}
-          </Text>
-        );
-      if (element.level === 3)
-        return (
-          <Text className={css.Heading} as="h4" size="H4" {...attributes}>
-            {children}
-          </Text>
-        );
-      return (
-        <Text className={css.Heading} as="h3" size="H3" {...attributes}>
-          {children}
-        </Text>
-      );
-    case BlockType.CodeLine:
-      return <div {...attributes}>{children}</div>;
-    case BlockType.CodeBlock:
-      return (
-        <Text as="pre" className={css.CodeBlock} {...attributes}>
-          <Scroll
-            direction="Horizontal"
-            variant="SurfaceVariant"
-            size="300"
-            visibility="Hover"
-            hideTrack
-          >
-            <div className={css.CodeBlockInternal}>{children}</div>
-          </Scroll>
-        </Text>
-      );
-    case BlockType.QuoteLine:
-      return <div {...attributes}>{children}</div>;
-    case BlockType.BlockQuote:
-      return (
-        <Text as="blockquote" className={css.BlockQuote} {...attributes}>
-          {children}
-        </Text>
-      );
-    case BlockType.ListItem:
-      return (
-        <Text as="li" {...attributes}>
-          {children}
-        </Text>
-      );
-    case BlockType.OrderedList:
-      return (
-        <ol className={css.List} {...attributes}>
-          {children}
-        </ol>
-      );
-    case BlockType.UnorderedList:
-      return (
-        <ul className={css.List} {...attributes}>
-          {children}
-        </ul>
-      );
     case BlockType.Mention:
       return (
         <RenderMentionElement attributes={attributes} element={element}>
@@ -220,19 +154,6 @@ export function RenderElement({ attributes, element, children }: RenderElementPr
           {children}
         </RenderCommandElement>
       );
-    case BlockType.Small:
-      return (
-        <Text {...attributes} className={css.Small}>
-          {children}
-        </Text>
-      );
-    case BlockType.HorizontalRule:
-      return (
-        <div {...attributes}>
-          <div contentEditable={false} className={css.HorizontalRule} />
-          {children}
-        </div>
-      );
     default:
       return (
         <Text
@@ -246,52 +167,6 @@ export function RenderElement({ attributes, element, children }: RenderElementPr
   }
 }
 
-export function RenderLeaf({ attributes, leaf, children }: RenderLeafProps) {
-  let child = children;
-  if (leaf.bold)
-    child = (
-      <strong {...attributes}>
-        <InlineChromiumBugfix />
-        {child}
-      </strong>
-    );
-  if (leaf.italic)
-    child = (
-      <i {...attributes}>
-        <InlineChromiumBugfix />
-        {child}
-      </i>
-    );
-  if (leaf.underline)
-    child = (
-      <u {...attributes}>
-        <InlineChromiumBugfix />
-        {child}
-      </u>
-    );
-  if (leaf.strikeThrough)
-    child = (
-      <s {...attributes}>
-        <InlineChromiumBugfix />
-        {child}
-      </s>
-    );
-  if (leaf.code)
-    child = (
-      <code className={css.Code} {...attributes}>
-        <InlineChromiumBugfix />
-        {child}
-      </code>
-    );
-  if (leaf.spoiler)
-    child = (
-      <span className={css.Spoiler()} {...attributes}>
-        <InlineChromiumBugfix />
-        {child}
-      </span>
-    );
-
-  if (child !== children) return child;
-
-  return <span {...attributes}>{child}</span>;
+export function RenderLeaf({ attributes, children }: RenderLeafProps) {
+  return <span {...attributes}>{children}</span>;
 }