fix: MDX table transform

apps/backend/extensions/package.json

@@ -20,14 +20,17 @@
     "@vrite/sdk": "workspace:*",
     "dayjs": "^1.11.10",
     "fastify": "^4.26.0",
+    "hast-util-from-html": "^2.0.1",
     "hast-util-to-html": "^9.0.0",
+    "hast-util-to-mdast": "^10.1.0",
     "html-to-text": "^9.0.5",
     "js-yaml": "^4.1.0",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-frontmatter": "^2.0.1",
     "mdast-util-gfm": "^3.0.0",
     "mdast-util-mdx": "^3.0.0",
     "mdast-util-to-hast": "^13.1.0",
+    "mdast-util-to-markdown": "^2.1.0",
     "micromark-extension-frontmatter": "^2.0.0",
     "micromark-extension-gfm": "^3.0.0",
     "micromark-extension-mdxjs": "^3.0.0",

apps/backend/extensions/src/routes/mdx/output-transformer.ts

@@ -10,9 +10,15 @@ import babelPlugin from "prettier/plugins/babel";
 import estreePlugin from "prettier/plugins/estree";
 import markdownPlugin from "prettier/plugins/markdown";
 import { ContentPiece } from "@vrite/sdk/api";
+import { htmlOutputTransformer } from "@vrite/sdk/transformers";
 import { convert as convertToText } from "html-to-text";
 import { dump } from "js-yaml";
 import dayjs from "dayjs";
+import { fromHtml } from "hast-util-from-html";
+import { toMdast } from "hast-util-to-mdast";
+import { toMarkdown } from "mdast-util-to-markdown";
+import { gfmToMarkdown } from "mdast-util-gfm";
+import { mdxToMarkdown } from "mdast-util-mdx";
 import type { Plugin } from "prettier";
 
 const processCode = async (code: string, hasContent?: boolean): Promise<string> => {
@@ -90,31 +96,11 @@ const mdxAsyncOutputTransformer = async (
       .join("")}`;
   };
   const transformTable = (tableWalker: JSONContentNodeWalker<JSONContentNode["table"]>): string => {
-    let output = "";
-
-    tableWalker.children.forEach((tableRowWalker, rowIndex) => {
-      let isHeader = false;
-
-      const columns = tableRowWalker.children.map((tableCellWalker) => {
-        if (tableCellWalker.node.type === "tableHeader") {
-          isHeader = true;
-        }
-
-        return tableCellWalker.children.map(transformTextNode).join("\n");
-      });
-
-      if (rowIndex === tableWalker.children.length - 1) {
-        output += `| ${columns.map((row) => row.replace(/\n/g, " ")).join(" | ")} |`;
-      } else {
-        output += `| ${columns.map((row) => row.replace(/\n/g, " ")).join(" | ")} |\n`;
-      }
+    const html = htmlOutputTransformer(tableWalker.node);
+    const hast = fromHtml(html, { fragment: true });
+    const mdast = toMdast(hast);
 
-      if (isHeader && rowIndex === 0) {
-        output += `| ${columns.map(() => "---").join(" | ")} |\n`;
-      }
-    });
-
-    return output;
+    return toMarkdown(mdast, { extensions: [gfmToMarkdown(), mdxToMarkdown()] });
   };
   const transformCodeBlock = (
     codeBlockWalker: JSONContentNodeWalker<JSONContentNode["codeBlock"]>

apps/web/src/context/confirmation-modal.tsx

@@ -11,7 +11,8 @@ import {
   createMemo,
   onMount,
   createEffect,
-  on
+  on,
+  onCleanup
 } from "solid-js";
 import clsx from "clsx";
 import { tinykeys } from "tinykeys";
@@ -69,10 +70,12 @@ const ConfirmationModalProvider: ParentComponent = (props) => {
   createEffect(
     on(config, (config) => {
       if (config) {
-        return tinykeys(window, {
+        const unbind = tinykeys(window, {
           ArrowRight: handleArrowKey,
           ArrowLeft: handleArrowKey
         });
+
+        onCleanup(() => unbind());
       }
     })
   );

apps/web/src/views/editor/menus/bubble/table.tsx

@@ -7,12 +7,12 @@ import {
   mdiTableSplitCell
 } from "@mdi/js";
 import clsx from "clsx";
-import { Component, For, Show, createEffect, on } from "solid-js";
+import { Component, For, Show } from "solid-js";
 import { SolidEditor } from "@vrite/tiptap-solid";
 import { CellSelection } from "@tiptap/pm/tables";
 import { Node } from "@tiptap/pm/model";
+import { TextSelection } from "@tiptap/pm/state";
 import { Card, IconButton, Tooltip } from "#components/primitives";
-import { createRef } from "#lib/utils";
 
 const TableMenu: Component<{
   class?: string;
@@ -54,7 +54,7 @@ const TableMenu: Component<{
           const tableNode = getTableNode(selection);
           const rowNode = getTableRowNode(selection);
 
-          if (tableNode && rowNode && tableNode.child(0) === rowNode) {
+          if (!tableNode || !rowNode || tableNode.child(0) !== rowNode) {
             return false;
           }
 
@@ -126,7 +126,23 @@ const TableMenu: Component<{
         return true;
       },
       onClick() {
-        props.editor.chain().deleteColumn().focus().run();
+        props.editor
+          .chain()
+          .deleteColumn()
+          .command(({ tr }) => {
+            tr.setSelection(
+              TextSelection.near(
+                tr.doc.resolve(
+                  Math.min(props.editor.state.selection.$from.pos - 2, tr.doc.nodeSize)
+                ),
+                -1
+              )
+            );
+
+            return true;
+          })
+          .focus()
+          .run();
       }
     },
     {