feat: add table auto resizer (#31)

Author: imwithye

eslint.config.js

@@ -32,6 +32,7 @@ export default defineConfig([
       "react/react-in-jsx-scope": "off",
       "react-hooks/rules-of-hooks": "error",
       "react-hooks/exhaustive-deps": "error",
+      "no-console": "error",
     },
   },
   {

src/markdown.tsx

@@ -11,7 +11,7 @@ import { defaultRenderers } from "./renderers";
 import { Renderers } from "./renderers/renderers";
 import { RootRenderer } from "./renderers/root";
 import { defaultTheme } from "./themes";
-import { Styles, Theme, mergeStyles } from "./themes/themes";
+import { Styles, mergeStyles } from "./themes/themes";
 
 const parser = unified().use(remarkParse).use(remarkGfm);
 
@@ -25,7 +25,6 @@ function extractDefinitions(tree: Root): Record<string, Definition> {
 
 export type MarkdownProps = {
   markdown: string;
-  theme?: Theme;
   customRenderers?: Partial<Renderers>;
   customStyles?: Partial<Styles>;
   onCodeCopy?: (code: string) => void;
@@ -34,7 +33,6 @@ export type MarkdownProps = {
 
 export const Markdown = ({
   markdown,
-  theme,
   customRenderers,
   customStyles,
   onCodeCopy,
@@ -59,10 +57,9 @@ export const Markdown = ({
 
   const colorScheme = useColorScheme();
   const mode = colorScheme === "dark" ? "dark" : "light";
-  const mergedTheme = theme ?? defaultTheme;
   const mergedStyles = mergeStyles(
-    mergedTheme.global,
-    mergedTheme[mode],
+    defaultTheme.global,
+    defaultTheme[mode],
     customStyles,
   );
 

src/renderers/code.tsx

@@ -158,6 +158,10 @@ export const CodeRenderer = ({ node }: RendererArgs<Code>): ReactNode => {
             setCopied(true);
             setTimeout(() => setCopied(false), 2000);
           }}
+          disabled={!onCodeCopy}
+          style={{
+            opacity: onCodeCopy ? 1 : 0,
+          }}
         >
           <View style={{ flexDirection: "row", alignItems: "center", gap: 4 }}>
             {copied ? (

src/renderers/table.tsx

@@ -4,6 +4,7 @@ import {
   createContext,
   useCallback,
   useContext,
+  useLayoutEffect,
   useMemo,
   useState,
 } from "react";
@@ -60,7 +61,7 @@ const TableContextProvider = ({
     (index: number, width: number) => {
       setColumnWidths((prev) => {
         const minWidth = Math.max(contentSize.width / columnCount, 64);
-        const maxWidth = Math.min(contentSize.width, 180);
+        const maxWidth = 180;
         const old = prev[index] ?? 0;
         const newWidth = Math.min(
           Math.max(Math.max(old, width), minWidth),
@@ -79,6 +80,12 @@ const TableContextProvider = ({
     [contentSize, columnCount, setColumnWidths],
   );
 
+  useLayoutEffect(() => {
+    for (let i = 0; i < columnWidths.length; i++) {
+      setColumnWidth(i, columnWidths[i] ?? 0);
+    }
+  }, [columnWidths, setColumnWidth]);
+
   return (
     <TableContext.Provider
       value={{ rowCount, columnCount, columnWidths, setColumnWidth }}