react-native-enriched-markdown-scaffold 0.7.4-scaffold.9 → 1.0.2-scaffold.10

package/src/web/EnrichedMarkdownText.tsx

@@ -9,7 +9,7 @@ import {
 import { parseMarkdown } from './parseMarkdown';
 import { RenderNode } from './renderers';
 import type { ASTNode, RendererCallbacks, RenderCapabilities } from './types';
-import { indexTaskItems, markInlineImages } from './utils';
+import { indexLinks, indexTaskItems, markInlineImages } from './utils';
 import { loadKaTeX } from './katex';
 import type { KaTeXInstance } from './katex';
 import { ENRM_TEXT_CLASS, ENRM_SELECTION_BG_VAR } from './globalStyles';
@@ -21,11 +21,13 @@ export const EnrichedMarkdownText = ({
   onLinkPress,
   onLinkLongPress,
   onTaskListItemPress,
+  enableTaskListItemToggle = true,
   allowTrailingMargin = false,
   containerStyle,
   selectable = true,
   dir,
   selectionColor,
+  renderLinkDecoration,
   ...rest
 }: EnrichedMarkdownTextProps) => {
   const normalizedStyle = useMemo(
@@ -43,6 +45,7 @@ export const EnrichedMarkdownText = ({
     superscript = false,
     subscript = false,
     highlight = false,
+    hardSoftBreaks = false,
   } = md4cFlags;
 
   useEffect(() => {
@@ -57,12 +60,14 @@ export const EnrichedMarkdownText = ({
         superscript,
         subscript,
         highlight,
+        hardSoftBreaks,
       }),
       katexPromise,
     ])
       .then(([result, katexInstance]) => {
         if (!cancelled) {
           indexTaskItems(result);
+          indexLinks(result);
           markInlineImages(result);
 
           setParseError(false);
@@ -85,14 +90,30 @@ export const EnrichedMarkdownText = ({
     return () => {
       cancelled = true;
     };
-  }, [markdown, underline, latexMath, superscript, subscript, highlight]);
+  }, [
+    markdown,
+    underline,
+    latexMath,
+    superscript,
+    subscript,
+    highlight,
+    hardSoftBreaks,
+  ]);
 
   const callbacks = useMemo<RendererCallbacks>(
-    () => ({ onLinkPress, onLinkLongPress, onTaskListItemPress }),
-    [onLinkPress, onLinkLongPress, onTaskListItemPress]
+    () => ({
+      onLinkPress,
+      onLinkLongPress,
+      onTaskListItemPress,
+      renderLinkDecoration,
+    }),
+    [onLinkPress, onLinkLongPress, onTaskListItemPress, renderLinkDecoration]
   );
 
-  const capabilities = useMemo<RenderCapabilities>(() => ({ katex }), [katex]);
+  const capabilities = useMemo<RenderCapabilities>(
+    () => ({ katex, enableTaskListItemToggle }),
+    [katex, enableTaskListItemToggle]
+  );
 
   const lastChildStyle = useMemo(
     () =>

package/src/web/parseMarkdown.ts

@@ -7,7 +7,8 @@ type ParseFn = (
   latexMath: number,
   superscript: number,
   subscript: number,
-  highlight: number
+  highlight: number,
+  hardSoftBreaks: number
 ) => string;
 
 // Caching the Promise (not the resolved value) means concurrent callers share
@@ -28,6 +29,7 @@ function initializeParser(): Promise<ParseFn> {
           'number',
           'number',
           'number',
+          'number',
         ])
       )
       .catch((error) => {
@@ -55,6 +57,7 @@ export async function parseMarkdown(
     superscript = false,
     subscript = false,
     highlight = false,
+    hardSoftBreaks = false,
   }: Md4cFlags = {}
 ): Promise<ASTNode> {
   const parse = await initializeParser();
@@ -66,7 +69,8 @@ export async function parseMarkdown(
       latexMath ? 1 : 0,
       superscript ? 1 : 0,
       subscript ? 1 : 0,
-      highlight ? 1 : 0
+      highlight ? 1 : 0,
+      hardSoftBreaks ? 1 : 0
     )
   );
 

package/src/web/renderers/InlineRenderers.tsx

@@ -1,8 +1,16 @@
-import type { MouseEvent } from 'react';
+import {
+  useLayoutEffect,
+  useRef,
+  useState,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
+import type { LinkRect } from '../../types/MarkdownTextProps.web';
 import type { RendererProps, RendererMap } from '../types';
 import { extractNodeText } from '../utils';
 import { KaTeXRenderer } from './KaTeXRenderer';
 import { linkStyleForUrl } from '../styles';
+import type { CSSProperties } from 'react';
 
 function TextRenderer({ node }: RendererProps) {
   return <>{node.content ?? ''}</>;
@@ -12,6 +20,10 @@ function LineBreakRenderer(_props: RendererProps) {
   return <br />;
 }
 
+function SoftBreakRenderer(_props: RendererProps) {
+  return <> </>;
+}
+
 function StrongRenderer({ node, styles, renderChildren }: RendererProps) {
   return <strong style={styles.strong}>{renderChildren(node)}</strong>;
 }
@@ -74,16 +86,116 @@ function LinkRenderer({
     }
   };
 
+  const linkStyle = linkStyleForUrl(style, url);
+  const children = renderChildren(node);
+
+  if (callbacks.renderLinkDecoration) {
+    return (
+      <DecoratedLink
+        url={url}
+        index={node.attributes?.linkIndex ?? 0}
+        text={extractNodeText(node)}
+        linkStyle={linkStyle}
+        renderLinkDecoration={callbacks.renderLinkDecoration}
+        onClick={handleClick}
+        onContextMenu={handleContextMenu}
+      >
+        {children}
+      </DecoratedLink>
+    );
+  }
+
   return (
     <a
       href={url}
-      style={linkStyleForUrl(style, url)}
+      style={linkStyle}
       target="_blank"
       rel="noopener noreferrer"
       onClick={handleClick}
       onContextMenu={handleContextMenu}
     >
-      {renderChildren(node)}
+      {children}
+    </a>
+  );
+}
+
+const EMPTY_RECT: LinkRect = { x: 0, y: 0, width: 0, height: 0 };
+
+const decorationLayerStyle: CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  pointerEvents: 'none',
+};
+
+const decorationContentStyle: CSSProperties = { pointerEvents: 'auto' };
+
+/**
+ * A link with a `renderLinkDecoration` overlay. Unlike native, the overlay
+ * anchors to the link's whole inline box (not the last line fragment of a
+ * wrapping link), and `rect` is that box relative to itself.
+ */
+function DecoratedLink({
+  url,
+  index,
+  text,
+  linkStyle,
+  renderLinkDecoration,
+  onClick,
+  onContextMenu,
+  children,
+}: {
+  url: string;
+  index: number;
+  text: string;
+  linkStyle: ReturnType<typeof linkStyleForUrl>;
+  renderLinkDecoration: NonNullable<
+    RendererProps['callbacks']['renderLinkDecoration']
+  >;
+  onClick: (event: MouseEvent) => void;
+  onContextMenu: (event: MouseEvent) => void;
+  children: ReactNode;
+}) {
+  const anchorRef = useRef<HTMLAnchorElement>(null);
+  const [rect, setRect] = useState<LinkRect>(EMPTY_RECT);
+
+  // The overlay itself is sized by CSS (inset: 0); `rect` is informational, so
+  // re-measuring when the content or chip style changes is enough.
+  useLayoutEffect(() => {
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    const { width, height } = anchor.getBoundingClientRect();
+    setRect((prev) =>
+      prev.width === width && prev.height === height
+        ? prev
+        : { x: 0, y: 0, width, height }
+    );
+  }, [text, linkStyle]);
+
+  const decoration = renderLinkDecoration({
+    index,
+    url,
+    text,
+    rect,
+    rects: [rect],
+  });
+
+  return (
+    <a
+      ref={anchorRef}
+      href={url}
+      style={{ ...linkStyle, position: 'relative' }} // eslint-disable-line react-native/no-inline-styles
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+    >
+      {children}
+      {decoration != null && (
+        <span aria-hidden style={decorationLayerStyle}>
+          {/* Mirrors native pointerEvents="box-none": only the decoration itself is hit-testable. */}
+          <span style={decorationContentStyle}>{decoration}</span>
+        </span>
+      )}
     </a>
   );
 }
@@ -108,6 +220,7 @@ function LatexMathInlineRenderer({
 export const inlineRenderers: RendererMap = {
   Text: TextRenderer,
   LineBreak: LineBreakRenderer,
+  SoftBreak: SoftBreakRenderer,
   Strong: StrongRenderer,
   Emphasis: EmphasisRenderer,
   Strikethrough: StrikethroughRenderer,

package/src/web/renderers/ListRenderers.tsx

@@ -44,7 +44,9 @@ function ListItemRenderer({
   node,
   style,
   styles,
+  index,
   callbacks,
+  capabilities,
   renderChildren,
 }: RendererProps) {
   const isTask = node.attributes?.isTask === 'true';
@@ -57,6 +59,8 @@ function ListItemRenderer({
   }, [initialChecked]);
 
   const handleChange = () => {
+    if (!capabilities.enableTaskListItemToggle) return;
+
     const taskIndex = node.attributes?.taskIndex;
     if (taskIndex === undefined) return;
 
@@ -85,14 +89,22 @@ function ListItemRenderer({
     : null;
 
   return (
-    <li style={listItemStyle(isTask)}>
+    <li style={listItemStyle(style, isTask, (index ?? 0) === 0)}>
       <span style={checkedStyle}>
         {isTask && (
           <input
             type="checkbox"
             checked={isChecked}
             onChange={handleChange}
-            style={styles.taskCheckbox}
+            readOnly={!capabilities.enableTaskListItemToggle}
+            aria-disabled={
+              capabilities.enableTaskListItemToggle ? undefined : true
+            }
+            style={
+              capabilities.enableTaskListItemToggle
+                ? styles.taskCheckbox
+                : styles.taskCheckboxDisabled
+            }
             aria-label={`Task: ${taskText}`}
           />
         )}

package/src/web/renderers/index.tsx

@@ -35,6 +35,7 @@ export interface RenderNodeProps {
   callbacks: RendererCallbacks;
   capabilities: RenderCapabilities;
   parentType?: NodeType;
+  index?: number;
 }
 
 export function RenderNode({
@@ -44,20 +45,22 @@ export function RenderNode({
   callbacks,
   capabilities,
   parentType,
+  index,
 }: RenderNodeProps): ReactNode {
   const Renderer = RENDERERS[node.type];
   if (!Renderer) return null;
 
   const renderChildren = (childNode: ASTNode): ReactNode =>
-    childNode.children?.map((child, index) => (
+    childNode.children?.map((child, childIndex) => (
       <RenderNode
-        key={nodeKey(child, index)}
+        key={nodeKey(child, childIndex)}
         node={child}
         style={style}
         styles={styles}
         callbacks={callbacks}
         capabilities={capabilities}
         parentType={childNode.type}
+        index={childIndex}
       />
     )) ?? null;
 
@@ -67,6 +70,7 @@ export function RenderNode({
       style={style}
       styles={styles}
       parentType={parentType}
+      index={index}
       callbacks={callbacks}
       capabilities={capabilities}
       renderChildren={renderChildren}

package/src/web/styles.ts

@@ -126,7 +126,11 @@ function blockquoteStyle(style: MarkdownStyleInternal): CSSProperties {
     marginInlineStart: 0, // reset UA default (40px in LTR, auto in RTL)
     marginInlineEnd: 0,
     paddingInlineStart: blockquote.gapWidth,
+    paddingInlineEnd: blockquote.padding,
+    paddingTop: blockquote.padding,
+    paddingBottom: blockquote.padding,
     borderInlineStart: `${blockquote.borderWidth}px solid ${blockquote.borderColor}`,
+    borderRadius: blockquote.borderRadius,
     backgroundColor: blockquote.backgroundColor,
   };
 }
@@ -180,16 +184,55 @@ function thematicBreakStyle(style: MarkdownStyleInternal): CSSProperties {
   };
 }
 
+const RESIZE_MODE_TO_OBJECT_FIT: Record<
+  Exclude<MarkdownStyleInternal['image']['resizeMode'], ''>,
+  NonNullable<CSSProperties['objectFit']>
+> = {
+  contain: 'contain',
+  cover: 'cover',
+  stretch: 'fill',
+  center: 'scale-down',
+  none: 'none',
+};
+
 function imageStyle(style: MarkdownStyleInternal): CSSProperties {
   const image = style.image;
-  return {
-    height: image.height,
+  const base: CSSProperties = {
     borderRadius: image.borderRadius,
     marginTop: image.marginTop,
     marginBottom: image.marginBottom,
     maxWidth: '100%',
     display: 'block',
   };
+
+  // Sizing precedence: aspectRatio > maxHeight > height. resizeMode '' means
+  // legacy sizing — emit today's exact CSS for backward compatibility.
+  if (image.resizeMode === '') {
+    return { ...base, height: image.height };
+  }
+
+  const objectFit = RESIZE_MODE_TO_OBJECT_FIT[image.resizeMode] ?? 'cover';
+
+  if (image.aspectRatio > 0) {
+    return {
+      ...base,
+      width: '100%',
+      aspectRatio: image.aspectRatio,
+      objectFit,
+    };
+  }
+
+  if (image.maxHeight > 0) {
+    return {
+      ...base,
+      width: '100%',
+      height: 'auto',
+      maxHeight: image.maxHeight,
+      objectFit,
+    };
+  }
+
+  return { ...base, width: '100%', height: image.height, objectFit };
 }
 
 function inlineImageStyle(style: MarkdownStyleInternal): CSSProperties {
@@ -280,6 +323,12 @@ export function linkStyleForUrl(
     variantIndex !== -1 ? style.linkVariants[variantIndex]! : base;
 
   const backgroundColor = resolved.backgroundColor;
+  const hasBorder =
+    resolved.borderWidth > 0 &&
+    !!resolved.borderColor &&
+    resolved.borderColor !== 'transparent';
+  const hasPadding =
+    resolved.paddingHorizontal > 0 || resolved.paddingVertical > 0;
   return {
     color: resolved.color,
     fontFamily: normalizeFontFamily(base.fontFamily),
@@ -287,6 +336,25 @@ export function linkStyleForUrl(
     ...(backgroundColor && backgroundColor !== 'transparent'
       ? { backgroundColor }
       : undefined),
+    // Chip: inline padding reserves horizontal space like native; vertical
+    // padding only paints (inline boxes don't grow the line box). `clone`
+    // rounds and pads each fragment of a wrapping link.
+    ...(hasPadding
+      ? {
+          padding: `${resolved.paddingVertical}px ${resolved.paddingHorizontal}px`,
+        }
+      : undefined),
+    ...(resolved.borderRadius > 0
+      ? { borderRadius: resolved.borderRadius }
+      : undefined),
+    ...(hasBorder
+      ? {
+          border: `${resolved.borderWidth}px solid ${resolved.borderColor}`,
+        }
+      : undefined),
+    ...(hasPadding || hasBorder || resolved.borderRadius > 0
+      ? { boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone' }
+      : undefined),
   };
 }
 
@@ -368,8 +436,17 @@ function tableStyle(style: MarkdownStyleInternal): CSSProperties {
   };
 }
 
-export function listItemStyle(isTask: boolean): CSSProperties | undefined {
-  return isTask ? { listStyle: 'none' } : undefined;
+export function listItemStyle(
+  style: MarkdownStyleInternal,
+  isTask: boolean,
+  isFirstChild: boolean
+): CSSProperties | undefined {
+  const { itemSpacing } = style.list;
+  const marginTop = !isFirstChild && itemSpacing > 0 ? itemSpacing : undefined;
+  if (isTask) {
+    return { listStyle: 'none', marginTop };
+  }
+  return marginTop !== undefined ? { marginTop } : undefined;
 }
 
 export function checkedTaskTextStyle(
@@ -384,6 +461,21 @@ export function checkedTaskTextStyle(
   };
 }
 
+/**
+ * Checkbox style used when `enableTaskListItemToggle` is `false`. Pointer-inert
+ * so the browser paints no hover/active state on a checkbox that cannot be
+ * toggled; appearance is otherwise identical to the enabled checkbox.
+ */
+function taskCheckboxDisabledStyle(
+  style: MarkdownStyleInternal
+): CSSProperties {
+  return {
+    ...taskCheckboxStyle(style),
+    pointerEvents: 'none',
+    cursor: 'default',
+  };
+}
+
 function taskCheckboxStyle(style: MarkdownStyleInternal): CSSProperties {
   const taskList = style.taskList;
   return {
@@ -411,11 +503,20 @@ export function tableBodyRowStyle(
 
 function tableWrapperStyle(style: MarkdownStyleInternal): CSSProperties {
   const table = style.table;
+  const alignment: CSSProperties = table.align
+    ? {
+        width: 'fit-content',
+        maxWidth: '100%',
+        marginLeft: table.align === 'left' ? 0 : 'auto',
+        marginRight: table.align === 'right' ? 0 : 'auto',
+      }
+    : {};
   return {
     overflowX: 'auto',
     overflowY: 'hidden',
     marginTop: table.marginTop,
     marginBottom: table.marginBottom,
+    ...alignment,
     // borderRadius must live on the wrapper, not the <table> — border-collapse:
     // collapse causes browsers to ignore border-radius on the table element itself.
     borderRadius: table.borderRadius,
@@ -491,6 +592,7 @@ export interface Styles {
   tableHeaderCell: Record<ColumnAlign, CSSProperties>;
   tableCell: Record<ColumnAlign, CSSProperties>;
   taskCheckbox: CSSProperties;
+  taskCheckboxDisabled: CSSProperties;
 }
 
 type ColumnAlign = 'left' | 'center' | 'right' | 'default';
@@ -513,7 +615,13 @@ export function buildStyles(style: MarkdownStyleInternal): Styles {
     h6: headingStyle(style, '6'),
     blockquote: blockquoteStyle(style),
     list: listStyle(style),
-    listNested: { ...listStyle(style), marginBottom: 0 },
+    listNested: {
+      ...listStyle(style),
+      // A nested list sits directly under its parent item's text; itemSpacing
+      // (not the list's outer margins) controls that gap, like on native.
+      marginTop: Math.max(0, style.list.itemSpacing),
+      marginBottom: 0,
+    },
     listTask: listStyle(style, true),
     codeBlock,
     codeBlockFont: { fontFamily: codeBlock.fontFamily },
@@ -546,6 +654,7 @@ export function buildStyles(style: MarkdownStyleInternal): Styles {
       default: tableCellStyle(style, 'default'),
     },
     taskCheckbox: taskCheckboxStyle(style),
+    taskCheckboxDisabled: taskCheckboxDisabledStyle(style),
   };
 
   stylesStore.set(style, result);

package/src/web/types.ts

@@ -6,6 +6,7 @@ import type {
   LinkLongPressEvent,
   TaskListItemPressEvent,
 } from '../types/events';
+import type { LinkDecorationInfo } from '../types/MarkdownTextProps.web';
 import type { KaTeXInstance } from './katex';
 
 export type NodeType =
@@ -15,6 +16,7 @@ export type NodeType =
   | 'Link'
   | 'Heading'
   | 'LineBreak'
+  | 'SoftBreak'
   | 'Strong'
   | 'Emphasis'
   | 'Strikethrough'
@@ -51,6 +53,8 @@ export interface NodeAttributes {
   taskIndex?: number;
   /** Stamped by markInlineImages() — not present in the raw WASM output. */
   isInline?: boolean;
+  /** Stamped by indexLinks() — document-order link index, not in the raw WASM output. */
+  linkIndex?: number;
   colCount?: string;
   headRowCount?: string;
   bodyRowCount?: string;
@@ -63,7 +67,7 @@ export interface ASTNode {
   content?: string;
   /** Present on nodes that carry structural metadata (Heading, Link, etc.). */
   attributes?: NodeAttributes;
-  /** Child nodes; absent on leaf nodes (Text, LineBreak, ThematicBreak). */
+  /** Child nodes; absent on leaf nodes (Text, LineBreak, SoftBreak, ThematicBreak). */
   children?: ASTNode[];
 }
 
@@ -71,10 +75,13 @@ export interface RendererCallbacks {
   onLinkPress?: (event: LinkPressEvent) => void;
   onLinkLongPress?: (event: LinkLongPressEvent) => void;
   onTaskListItemPress?: (event: TaskListItemPressEvent) => void;
+  renderLinkDecoration?: (info: LinkDecorationInfo) => ReactNode | null;
 }
 
 export interface RenderCapabilities {
   katex: KaTeXInstance | null;
+  /** When false, task list checkboxes render read-only and ignore clicks. */
+  enableTaskListItemToggle: boolean;
 }
 
 export interface RendererProps {
@@ -82,6 +89,8 @@ export interface RendererProps {
   style: MarkdownStyleInternal;
   styles: Styles;
   parentType?: NodeType;
+  /** Position among the parent node's children. */
+  index?: number;
   callbacks: RendererCallbacks;
   capabilities: RenderCapabilities;
   renderChildren: (node: ASTNode) => ReactNode;

package/src/web/utils.ts

@@ -2,6 +2,7 @@ import type { ASTNode } from './types';
 
 /** Recursively collects plain text content from an AST node's subtree. */
 export function extractNodeText(node: ASTNode): string {
+  if (node.type === 'SoftBreak' || node.type === 'LineBreak') return ' ';
   if (node.content !== undefined) return node.content;
   return node.children?.map(extractNodeText).join('') ?? '';
 }
@@ -29,6 +30,14 @@ export function indexTaskItems(node: ASTNode, counter = { value: 0 }): void {
   node.children?.forEach((child) => indexTaskItems(child, counter));
 }
 
+/** Stamps Link nodes with their document-order index (the `renderLinkDecoration` key). */
+export function indexLinks(node: ASTNode, counter = { value: 0 }): void {
+  if (node.type === 'Link') {
+    node.attributes = { ...node.attributes, linkIndex: counter.value++ };
+  }
+  node.children?.forEach((child) => indexLinks(child, counter));
+}
+
 /**
  * Stamps Image nodes with `isInline` when they appear inside a paragraph
  * that also contains other content (text, links, etc.).