react-native-nitro-markdown 0.5.1 → 0.5.3

package/src/renderers/math.tsx

@@ -23,7 +23,12 @@ try {
   const mathJaxModule = require("react-native-mathjax-svg");
   MathJaxComponent = mathJaxModule.default || mathJaxModule;
 } catch {
-  // ignored
+  if (__DEV__) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "[NitroMarkdown] react-native-mathjax-svg not found — math will render as plain text.",
+    );
+  }
 }
 
 type MathInlineProps = {
@@ -35,7 +40,6 @@ const createMathStyles = (theme: MarkdownTheme) =>
   StyleSheet.create({
     mathInlineContainer: {
       marginHorizontal: 2,
-      // Ensure the inline view has layout alignment
       justifyContent: "center",
     },
     mathInlineFallbackContainer: {

package/src/renderers/table/cell-content.tsx

@@ -1,5 +1,11 @@
-import { type FC, type ComponentType } from "react";
-import { View, Text, type StyleProp, type TextStyle } from "react-native";
+import type { FC, ComponentType } from "react";
+import {
+  View,
+  Text,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
 import type { MarkdownNode } from "../../headless";
 import type { NodeRendererProps } from "../../MarkdownContext";
 
@@ -7,7 +13,8 @@ type CellContentProps = {
   node: MarkdownNode;
   Renderer: ComponentType<NodeRendererProps>;
   styles: {
-    cellContentWrapper: object;
+    cellContentWrapper: StyleProp<ViewStyle>;
+    [key: string]: StyleProp<ViewStyle | TextStyle> | undefined;
   };
   textStyle?: StyleProp<TextStyle>;
 };
@@ -26,7 +33,11 @@ export const CellContent: FC<CellContentProps> = ({
     <View style={styles.cellContentWrapper}>
       {node.children.map((child, idx) => (
         <Renderer
-          key={idx}
+          key={
+            child.beg != null
+              ? `${child.type}-${child.beg}`
+              : `${child.type}-${idx}`
+          }
           node={child}
           depth={0}
           inListItem={false}

package/src/renderers/table/index.tsx

@@ -15,15 +15,18 @@ import {
   type ViewStyle,
   type LayoutChangeEvent,
 } from "react-native";
-import { useMarkdownContext, type NodeRendererProps } from "../../MarkdownContext";
-import type { MarkdownTheme } from "../../theme";
 import { CellContent } from "./cell-content";
-import { extractTableData, estimateColumnWidths } from "./table-utils";
 import {
   columnWidthsReducer,
   DEFAULT_MIN_COLUMN_WIDTH,
   DEFAULT_MEASUREMENT_STABILIZE_MS,
 } from "./table-reducer";
+import { extractTableData, estimateColumnWidths } from "./table-utils";
+import {
+  useMarkdownContext,
+  type NodeRendererProps,
+} from "../../MarkdownContext";
+import type { MarkdownTheme } from "../../theme";
 
 type TableRendererProps = {
   node: import("../../headless").MarkdownNode;
@@ -147,6 +150,15 @@ export const TableRenderer: FC<TableRendererProps> = ({
     };
   }, [estimatedColumnWidths, expectedCellKeySignature, measurementStabilizeMs]);
 
+  useEffect(() => {
+    const widthsMap = measuredWidths.current;
+    const cellsSet = measuredCells.current;
+    return () => {
+      widthsMap.clear();
+      cellsSet.clear();
+    };
+  }, []);
+
   const onCellLayout = useCallback(
     (cellKey: string, width: number) => {
       if (width <= 0 || widthsCalculated.current || !needsMeasurement) return;

package/src/theme.ts

@@ -1,5 +1,4 @@
 import { Platform, type TextStyle, type ViewStyle } from "react-native";
-import type { MarkdownNode } from "./headless";
 
 export type MarkdownTheme = {
   colors: {
@@ -85,13 +84,13 @@ export const defaultMarkdownTheme: MarkdownTheme = {
     tableRowEven: "transparent",
     tableRowOdd: "#f8fafc",
     codeTokenColors: {
-      keyword: '#c792ea',
-      string: '#c3e88d',
-      comment: '#546e7a',
-      number: '#f78c6c',
-      operator: '#89ddff',
-      punctuation: '#89ddff',
-      type: '#ffcb6b',
+      keyword: "#c792ea",
+      string: "#c3e88d",
+      comment: "#546e7a",
+      number: "#f78c6c",
+      operator: "#89ddff",
+      punctuation: "#89ddff",
+      type: "#ffcb6b",
     },
   },
   spacing: {
@@ -149,13 +148,34 @@ export type PartialMarkdownTheme = {
 };
 
 type TextNodeType =
-  | "text" | "bold" | "italic" | "strikethrough" | "link"
-  | "code_inline" | "heading" | "paragraph" | "math_inline" | "html_inline";
+  | "text"
+  | "bold"
+  | "italic"
+  | "strikethrough"
+  | "link"
+  | "code_inline"
+  | "heading"
+  | "paragraph"
+  | "math_inline"
+  | "html_inline";
 type ViewNodeType =
-  | "document" | "blockquote" | "code_block" | "horizontal_rule"
-  | "image" | "list" | "list_item" | "task_list_item" | "table"
-  | "table_head" | "table_body" | "table_row" | "table_cell"
-  | "math_block" | "html_block" | "line_break" | "soft_break";
+  | "document"
+  | "blockquote"
+  | "code_block"
+  | "horizontal_rule"
+  | "image"
+  | "list"
+  | "list_item"
+  | "task_list_item"
+  | "table"
+  | "table_head"
+  | "table_body"
+  | "table_row"
+  | "table_cell"
+  | "math_block"
+  | "html_block"
+  | "line_break"
+  | "soft_break";
 
 export type NodeStyleOverrides = Partial<
   { [K in TextNodeType]: TextStyle } & { [K in ViewNodeType]: ViewStyle }

package/src/utils/code-highlight.ts

@@ -1,44 +1,121 @@
 export type TokenType =
-  | 'keyword'
-  | 'string'
-  | 'comment'
-  | 'number'
-  | 'operator'
-  | 'punctuation'
-  | 'type'
-  | 'default';
+  | "keyword"
+  | "string"
+  | "comment"
+  | "number"
+  | "operator"
+  | "punctuation"
+  | "type"
+  | "default";
 
 export type HighlightedToken = { text: string; type: TokenType };
-export type CodeHighlighter = (language: string, code: string) => HighlightedToken[];
+export type CodeHighlighter = (
+  language: string,
+  code: string,
+) => HighlightedToken[];
 
 const JS_KEYWORDS = new Set([
-  'const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while',
-  'class', 'extends', 'import', 'export', 'from', 'default', 'new', 'this',
-  'typeof', 'instanceof', 'null', 'undefined', 'true', 'false', 'async',
-  'await', 'try', 'catch', 'throw', 'switch', 'case', 'break', 'continue',
-  'type', 'interface', 'enum', 'as', 'in', 'of', 'void',
+  "const",
+  "let",
+  "var",
+  "function",
+  "return",
+  "if",
+  "else",
+  "for",
+  "while",
+  "class",
+  "extends",
+  "import",
+  "export",
+  "from",
+  "default",
+  "new",
+  "this",
+  "typeof",
+  "instanceof",
+  "null",
+  "undefined",
+  "true",
+  "false",
+  "async",
+  "await",
+  "try",
+  "catch",
+  "throw",
+  "switch",
+  "case",
+  "break",
+  "continue",
+  "type",
+  "interface",
+  "enum",
+  "as",
+  "in",
+  "of",
+  "void",
 ]);
 
 const PYTHON_KEYWORDS = new Set([
-  'def', 'class', 'import', 'from', 'return', 'if', 'elif', 'else', 'for',
-  'while', 'try', 'except', 'finally', 'with', 'as', 'pass', 'break',
-  'continue', 'and', 'or', 'not', 'in', 'is', 'None', 'True', 'False',
-  'lambda', 'yield', 'async', 'await',
+  "def",
+  "class",
+  "import",
+  "from",
+  "return",
+  "if",
+  "elif",
+  "else",
+  "for",
+  "while",
+  "try",
+  "except",
+  "finally",
+  "with",
+  "as",
+  "pass",
+  "break",
+  "continue",
+  "and",
+  "or",
+  "not",
+  "in",
+  "is",
+  "None",
+  "True",
+  "False",
+  "lambda",
+  "yield",
+  "async",
+  "await",
 ]);
 
 const SHELL_KEYWORDS = new Set([
-  'if', 'then', 'else', 'elif', 'fi', 'for', 'do', 'done', 'while',
-  'case', 'esac', 'function', 'return', 'exit', 'echo', 'export',
+  "if",
+  "then",
+  "else",
+  "elif",
+  "fi",
+  "for",
+  "do",
+  "done",
+  "while",
+  "case",
+  "esac",
+  "function",
+  "return",
+  "exit",
+  "echo",
+  "export",
 ]);
 
 function getKeywords(language: string): Set<string> {
   const lang = language.toLowerCase();
-  if (lang === 'python' || lang === 'py') return PYTHON_KEYWORDS;
-  if (lang === 'bash' || lang === 'sh' || lang === 'shell' || lang === 'zsh') return SHELL_KEYWORDS;
+  if (lang === "python" || lang === "py") return PYTHON_KEYWORDS;
+  if (lang === "bash" || lang === "sh" || lang === "shell" || lang === "zsh")
+    return SHELL_KEYWORDS;
   return JS_KEYWORDS; // default for js/ts/jsx/tsx/java/c/cpp etc.
 }
 
-// Tokenize a single line into tokens
 function tokenizeLine(line: string, language: string): HighlightedToken[] {
   const keywords = getKeywords(language);
   const tokens: HighlightedToken[] = [];
@@ -46,56 +123,68 @@ function tokenizeLine(line: string, language: string): HighlightedToken[] {
   // Full-line comment detection
   const trimmed = line.trimStart();
   const lang = language.toLowerCase();
-  const isPythonLike = lang === 'python' || lang === 'py';
-  const isShellLike = lang === 'bash' || lang === 'sh' || lang === 'shell' || lang === 'zsh';
+  const isPythonLike = lang === "python" || lang === "py";
+  const isShellLike =
+    lang === "bash" || lang === "sh" || lang === "shell" || lang === "zsh";
 
-  if (trimmed.startsWith('//') || trimmed.startsWith('#') && (isShellLike || isPythonLike)) {
-    return [{ text: line, type: 'comment' }];
+  if (
+    trimmed.startsWith("//") ||
+    (trimmed.startsWith("#") && (isShellLike || isPythonLike))
+  ) {
+    return [{ text: line, type: "comment" }];
   }
 
-  // Simple token regex: strings, numbers, operators, identifiers, punctuation
-  const tokenRegex = /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|(\b\d+(?:\.\d+)?\b)|(\/\/[^\n]*|#[^\n]*)|([a-zA-Z_$][a-zA-Z0-9_$]*)|([+\-*/%=<>!&|^~?:]+)|([()\[\]{},;.])|(\s+)|(.)/g;
+  // Only include # as comment for shell/python languages
+  const commentPattern =
+    isShellLike || isPythonLike ? "\/\/[^\\n]*|#[^\\n]*" : "\/\/[^\\n]*";
+  const tokenRegex = new RegExp(
+    `("(?:[^"\\\\]|\\\\.)*"|'(?:[^'\\\\]|\\\\.)*'|\`(?:[^\`\\\\]|\\\\.)*\`)|(\\b\\d+(?:\\.\\d+)?\\b)|(${commentPattern})|([a-zA-Z_$][a-zA-Z0-9_$]*)|([+\\-*/%=<>!&|^~?:]+)|([(\\)\\[\\]{},;.])|(\\s+)|(.)`,
+    "g",
+  );
 
   let match: RegExpExecArray | null;
   while ((match = tokenRegex.exec(line)) !== null) {
     const [full, str, num, comment, ident, op, punct] = match;
     if (str) {
-      tokens.push({ text: full, type: 'string' });
+      tokens.push({ text: full, type: "string" });
     } else if (num) {
-      tokens.push({ text: full, type: 'number' });
+      tokens.push({ text: full, type: "number" });
     } else if (comment) {
-      tokens.push({ text: full, type: 'comment' });
+      tokens.push({ text: full, type: "comment" });
     } else if (ident) {
       const type: TokenType = keywords.has(ident)
-        ? 'keyword'
+        ? "keyword"
         : /^[A-Z][A-Za-z0-9]*$/.test(ident)
-          ? 'type'
-          : 'default';
+          ? "type"
+          : "default";
       tokens.push({ text: full, type });
     } else if (op) {
-      tokens.push({ text: full, type: 'operator' });
+      tokens.push({ text: full, type: "operator" });
     } else if (punct) {
-      tokens.push({ text: full, type: 'punctuation' });
+      tokens.push({ text: full, type: "punctuation" });
     } else {
-      tokens.push({ text: full, type: 'default' });
+      tokens.push({ text: full, type: "default" });
     }
   }
 
   return tokens;
 }
 
-export function defaultHighlighter(language: string, code: string): HighlightedToken[] {
-  if (!language || language === 'text' || language === 'plain') {
-    return [{ text: code, type: 'default' }];
+export function defaultHighlighter(
+  language: string,
+  code: string,
+): HighlightedToken[] {
+  if (!language || language === "text" || language === "plain") {
+    return [{ text: code, type: "default" }];
   }
 
   // Process line by line, re-inserting newlines as default tokens
-  const lines = code.split('\n');
+  const lines = code.split("\n");
   const result: HighlightedToken[] = [];
   for (let i = 0; i < lines.length; i++) {
-    result.push(...tokenizeLine(lines[i]!, language));
+    result.push(...tokenizeLine(lines[i], language));
     if (i < lines.length - 1) {
-      result.push({ text: '\n', type: 'default' });
+      result.push({ text: "\n", type: "default" });
     }
   }
   return result;