@gofreego/tsutils 0.1.11 → 0.1.12

package/dist/index.mjs

@@ -403,8 +403,10 @@ var getHighlighter = async () => {
 var ReadmeViewer = ({
   content,
   className = "",
-  isDark = false
+  isDark: propIsDark,
+  muiTheme
 }) => {
+  const isDark = propIsDark !== void 0 ? propIsDark : muiTheme?.palette?.mode === "dark";
   const [highlighter, setHighlighter] = useState(null);
   const [copiedBlocks, setCopiedBlocks] = useState(/* @__PURE__ */ new Set());
   useEffect(() => {
@@ -425,74 +427,85 @@ var ReadmeViewer = ({
       console.error("Failed to copy text: ", err);
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: `readme-viewer markdown-body ${className}`, children: /* @__PURE__ */ jsx(
-    ReactMarkdown,
-    {
-      remarkPlugins: [remarkGfm, remarkMath],
-      rehypePlugins: [rehypeKatex],
-      components: {
-        code({ className: className2, children, ...props }) {
-          const match = /language-(\w+)/.exec(className2 || "");
-          if (match && highlighter) {
-            const codeText = String(children).replace(/\n$/, "");
-            const blockId = `code-${Math.random().toString(36).substr(2, 9)}`;
-            let highlightedHtml = "";
-            try {
-              highlightedHtml = highlighter.codeToHtml(codeText, {
-                lang: match[1],
-                theme: isDark ? "github-dark" : "github-light"
-              });
-            } catch (e) {
+  return /* @__PURE__ */ jsxs("div", { className: `readme-viewer markdown-body ${className}`, children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        .shiki-wrapper pre.shiki {
+          padding: 16px !important;
+          border-radius: 8px !important;
+          overflow-x: auto;
+          margin-bottom: 16px;
+          border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        }
+      ` }),
+    /* @__PURE__ */ jsx(
+      ReactMarkdown,
+      {
+        remarkPlugins: [remarkGfm, remarkMath],
+        rehypePlugins: [rehypeKatex],
+        components: {
+          code({ className: className2, children, ...props }) {
+            const match = /language-(\w+)/.exec(className2 || "");
+            if (match && highlighter) {
+              const codeText = String(children).replace(/\n$/, "");
+              const blockId = `code-${Math.random().toString(36).substr(2, 9)}`;
+              let highlightedHtml = "";
               try {
                 highlightedHtml = highlighter.codeToHtml(codeText, {
-                  lang: "text",
+                  lang: match[1],
                   theme: isDark ? "github-dark" : "github-light"
                 });
-              } catch (fallbackError) {
-                highlightedHtml = `<pre><code>${codeText}</code></pre>`;
+              } catch (e) {
+                try {
+                  highlightedHtml = highlighter.codeToHtml(codeText, {
+                    lang: "text",
+                    theme: isDark ? "github-dark" : "github-light"
+                  });
+                } catch (fallbackError) {
+                  highlightedHtml = `<pre><code>${codeText}</code></pre>`;
+                }
               }
+              return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ jsx("div", { className: "shiki-wrapper", dangerouslySetInnerHTML: { __html: highlightedHtml } }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => copyToClipboard(codeText, blockId),
+                    style: {
+                      position: "absolute",
+                      top: "8px",
+                      right: "8px",
+                      backgroundColor: "var(--md-sys-color-surface-container-high)",
+                      border: "1px solid var(--md-sys-color-outline-variant)",
+                      borderRadius: "4px",
+                      padding: "6px",
+                      fontSize: "14px",
+                      cursor: "pointer",
+                      color: "var(--md-sys-color-on-surface-variant)",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      transition: "all 0.2s ease",
+                      width: "32px",
+                      height: "32px"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = isDark ? "var(--md-sys-color-surface-container-highest)" : "var(--md-sys-color-surface-container-high)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = isDark ? "var(--md-sys-color-surface-container-high)" : "var(--md-sys-color-surface-container-highest)";
+                    },
+                    title: copiedBlocks.has(blockId) ? "Copied!" : "Copy code",
+                    children: copiedBlocks.has(blockId) ? /* @__PURE__ */ jsx(CheckIcon, { style: { fontSize: "16px" } }) : /* @__PURE__ */ jsx(ContentCopyIcon, { style: { fontSize: "16px" } })
+                  }
+                )
+              ] });
             }
-            return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-              /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: highlightedHtml } }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => copyToClipboard(codeText, blockId),
-                  style: {
-                    position: "absolute",
-                    top: "8px",
-                    right: "8px",
-                    backgroundColor: "var(--md-sys-color-surface-container-high)",
-                    border: "1px solid var(--md-sys-color-outline-variant)",
-                    borderRadius: "4px",
-                    padding: "6px",
-                    fontSize: "14px",
-                    cursor: "pointer",
-                    color: "var(--md-sys-color-on-surface-variant)",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    transition: "all 0.2s ease",
-                    width: "32px",
-                    height: "32px"
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = isDark ? "var(--md-sys-color-surface-container-highest)" : "var(--md-sys-color-surface-container-high)";
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = isDark ? "var(--md-sys-color-surface-container-high)" : "var(--md-sys-color-surface-container-highest)";
-                  },
-                  title: copiedBlocks.has(blockId) ? "Copied!" : "Copy code",
-                  children: copiedBlocks.has(blockId) ? /* @__PURE__ */ jsx(CheckIcon, { style: { fontSize: "16px" } }) : /* @__PURE__ */ jsx(ContentCopyIcon, { style: { fontSize: "16px" } })
-                }
-              )
-            ] });
+            return /* @__PURE__ */ jsx("code", { className: className2, ...props, children });
           }
-          return /* @__PURE__ */ jsx("code", { className: className2, ...props, children });
-        }
-      },
-      children: content
-    }
-  ) });
+        },
+        children: content
+      }
+    )
+  ] });
 };
 var ReadmeViewer_default = ReadmeViewer;
 var NotificationContext = createContext(void 0);