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

package/docs/STYLES.md

@@ -1,6 +1,6 @@
 # Style Properties Reference
 
-This document provides a comprehensive reference for all style properties available in `react-native-enriched-markdown`.
+This document provides a comprehensive reference for all style properties available in `react-native-enriched-markdown-scaffold`.
 
 ## Platform Defaults
 
@@ -14,7 +14,7 @@ The library provides sensible defaults optimized for each platform:
 
 ## Style Inheritance
 
-`react-native-enriched-markdown` uses a base block style architecture where all block elements (paragraphs, headings, lists, blockquotes, code blocks) share a common set of typography properties. This base block style includes:
+`react-native-enriched-markdown-scaffold` uses a base block style architecture where all block elements (paragraphs, headings, lists, blockquotes, code blocks) share a common set of typography properties. This base block style includes:
 
 - `fontSize` - Font size in points
 - `fontFamily` - Font family name
@@ -149,6 +149,8 @@ The library provides sensible default styles for all Markdown elements out of th
       borderColor: '#007AFF',
       borderWidth: 3,
       backgroundColor: '#F0F8FF',
+      borderRadius: 8,
+      padding: 12,
       marginBottom: 12,
     },
     list: {
@@ -209,7 +211,7 @@ The library provides sensible default styles for all Markdown elements out of th
 > [!NOTE]
 > **Performance:** Memoize the `markdownStyle` prop with `useMemo` to avoid unnecessary re-renders:
 > ```tsx
-> import type { MarkdownStyle } from 'react-native-enriched-markdown';
+> import type { MarkdownStyle } from 'react-native-enriched-markdown-scaffold';
 >
 > const markdownStyle: MarkdownStyle = useMemo(() => ({
 >   paragraph: { fontSize: 16 },
@@ -225,8 +227,8 @@ To support dark mode, create `MarkdownStyle` objects for each color scheme and s
 
 ```tsx
 import { useColorScheme } from 'react-native';
-import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
-import type { MarkdownStyle } from 'react-native-enriched-markdown';
+import { EnrichedMarkdownText } from 'react-native-enriched-markdown-scaffold';
+import type { MarkdownStyle } from 'react-native-enriched-markdown-scaffold';
 
 const lightMarkdownStyle: MarkdownStyle = {
   blockquote: { backgroundColor: '#F9FAFB', borderColor: '#D1D5DB' },
@@ -295,6 +297,8 @@ function App() {
 | `borderWidth` | `number` | Left border width |
 | `gapWidth` | `number` | Gap between border and text |
 | `backgroundColor` | `string` | Background color |
+| `borderRadius` | `number` | Corner radius of the background box; accent borders are clipped to the rounded shape, nested quotes rounding against their own box (default: `0`) |
+| `padding` | `number` | Inner top/bottom padding between the background edges and content, applied at every nesting level — also applies to the trailing edge on iOS and web (default: `0`) |
 
 ### List-specific
 
@@ -307,6 +311,7 @@ function App() {
 | `markerFontWeight` | `string` | Number marker font weight |
 | `gapWidth` | `number` | Gap between marker and text |
 | `marginLeft` | `number` | Left margin for nesting |
+| `itemSpacing` | `number` | Vertical spacing between consecutive items, including nested ones (default: `0`) |
 
 ### Code Block-specific
 
@@ -317,6 +322,34 @@ function App() {
 | `borderRadius` | `number` | Corner radius |
 | `borderWidth` | `number` | Border width |
 | `padding` | `number` | Inner padding |
+| `syntaxColors` | `object` | Per-token syntax highlight colors (see below) |
+
+#### `syntaxColors`
+
+Per-token foreground colors for syntax highlighting, keyed on the highlight token type. Any key you omit falls back to the default GitHub-light palette; `operator`, `punctuation`, `variable`, and `embedded` default to the code block's base `color` (i.e. no visible recolor). Colors only take visible effect when the optional syntax highlighting module is compiled in; otherwise code blocks render uncolored.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `keyword` | `string` | Keywords (e.g. `if`, `return`) |
+| `operator` | `string` | Operators (e.g. `+`, `=>`) |
+| `punctuation` | `string` | Brackets, delimiters, punctuation |
+| `string` | `string` | String and character literals |
+| `number` | `string` | Numeric literals |
+| `constant` | `string` | Constants and booleans |
+| `comment` | `string` | Comments |
+| `function` | `string` | Function and method names |
+| `type` | `string` | Types and classes |
+| `variable` | `string` | Variables and parameters |
+| `property` | `string` | Object properties and fields |
+| `tag` | `string` | Markup tags |
+| `attribute` | `string` | Markup attributes |
+| `embedded` | `string` | Embedded/injected language regions |
+
+> [!NOTE]
+> Inside list items, code blocks (background included) indent to the item's content column.
+
+> [!NOTE]
+> With `flavor="github"`, code blocks render as a block component with a header bar (language name on the left, copy-code button on the right) and a divider above the code. The header derives its appearance from the code block style: the label uses the system font at 0.85 x `fontSize`, and the label, button, and divider use `color` at reduced opacity. Dedicated header style properties may be added later.
 
 ### Inline Code-specific
 
@@ -335,6 +368,33 @@ function App() {
 | `fontFamily` | `string` | Font family for links. Overrides the parent block's font family when set |
 | `color` | `string` | Link text color |
 | `underline` | `boolean` | Show underline |
+| `backgroundColor` | `string` | Chip background, drawn behind the link's glyphs (ascender to descender) plus padding |
+| `borderRadius` | `number` | Chip corner radius |
+| `paddingHorizontal` | `number` | Space added before and after the link text. It takes real room in the line, so it affects wrapping and measured size |
+| `paddingVertical` | `number` | Extends the chip above and below the text. Drawn only: it does not change the line height, so it can overlap neighbouring lines (or be clipped at the component's top/bottom edge) if the line height is too small |
+| `borderColor` | `string` | Chip border color |
+| `borderWidth` | `number` | Chip border width, drawn inset (does not grow the chip) |
+
+#### Link chips
+
+Setting `backgroundColor`, `borderRadius`, padding or a border turns a link into a chip. When a link wraps, each line gets its own piece of the chip; only the outer ends are rounded and the border is left open where the link breaks.
+
+```tsx
+link: {
+  color: '#3346C8',
+  underline: false,
+  backgroundColor: '#DCE2FF',
+  borderRadius: 5,
+  paddingHorizontal: 7,
+  paddingVertical: 4,
+}
+```
+
+Horizontal padding is reserved with an invisible non-breaking spacer at each end of the link, so the padding always stays attached to the text on wrap. The spacer is removed from copied text (plain, HTML, RTF, Markdown and `onCopy`) and is part of the link's tap area.
+
+On iOS (and in RTF copies), links inside table cells fall back to a plain text background: `backgroundColor` and `paddingHorizontal` are kept (the background covers the horizontal padding), but `borderRadius`, `paddingVertical` and the border are not drawn.
+
+Use [`renderLinkDecoration`](API_REFERENCE.md#renderlinkdecoration) to draw a React Native view on top of a chip (e.g. a badge or icon).
 
 ### Strong-specific
 
@@ -392,11 +452,16 @@ Styles for highlighted text (`==text==`). Requires `md4cFlags={{ highlight: true
 
 | Property | Type | Description |
 |----------|------|-------------|
-| `height` | `number` | Image height |
+| `height` | `number` | Fixed image height (default sizing knob). |
+| `maxHeight` | `number` | Maximum height the image is fitted into, preserving aspect ratio. Replaces `height` when set. |
+| `aspectRatio` | `number` | Width / height ratio (e.g. `16 / 9`). Fills available width; height derived from the ratio. Ignores `height`/`maxHeight`. |
+| `resizeMode` | `'contain' \| 'cover' \| 'stretch' \| 'center' \| 'none'` | How the image fills its box (like RN `resizeMode` / CSS `object-fit`). Applies whenever set explicitly, including with a fixed `height` box. When omitted, defaults to `'cover'` if `maxHeight` or `aspectRatio` is set; otherwise block images keep the legacy fill-width behavior. |
 | `borderRadius` | `number` | Corner radius |
 | `marginTop` | `number` | Top margin |
 | `marginBottom` | `number` | Bottom margin |
 
+> Sizing precedence: `aspectRatio` > `maxHeight` > `height`. `resizeMode` applies independently on top. When no new knob is set (`resizeMode`, `maxHeight`, or `aspectRatio`), block images keep the exact legacy fixed-`height` behavior.
+
 ### Inline Image-specific
 
 | Property | Type | Description |
@@ -428,6 +493,8 @@ Table styles only apply when `flavor="github"` is set. Tables inherit the base b
 | `borderRadius` | `number` | Corner radius of the table container |
 | `cellPaddingHorizontal` | `number` | Horizontal padding inside cells |
 | `cellPaddingVertical` | `number` | Vertical padding inside cells |
+| `horizontalOverflow` | `number` | When set, scrollable tables extend beyond the markdown container by this amount on each side (edge-to-edge / "bleed" layout). Set to the parent's horizontal padding to make wide tables reach the screen edges. Has no effect on tables that fit within the container width. iOS, Android, and macOS only. Default: `0` |
+| `align` | `'left' \| 'center' \| 'right'` | Horizontal alignment of the whole table when it is narrower than the container. Tables that overflow and scroll ignore it — scrolling always starts at the table's beginning. On web, setting any value (including `'left'`) also makes the table shrink to fit its content instead of filling the container width. Default: unset — legacy start-aligned placement (full-width table on web) |
 
 ### Task List-specific
 

package/docs/TESTING.md

@@ -0,0 +1,112 @@
+# Testing with Jest
+
+`EnrichedMarkdownTextInput` and `EnrichedMarkdownText` are Fabric/codegen native
+components. Under Jest there is no native view manager, so rendering them — or
+calling any imperative ref method such as `focus()`, `setValue()`, or
+`toggleBold()`, which dispatch native commands — throws. To let you test screens
+that embed these components, the package ships an importable mock that renders
+plain React Native primitives and exposes every imperative method as a
+[`jest.fn()`](https://jestjs.io/docs/mock-functions) spy.
+
+## Setup
+
+Point Jest at the shipped mock from a setup file (for example `jest.setup.js`)
+listed in your config's `setupFilesAfterEnv`:
+
+```js
+// jest.setup.js
+jest.mock('react-native-enriched-markdown-scaffold', () =>
+  require('react-native-enriched-markdown-scaffold/jest'),
+);
+```
+
+The mock is distributed as compiled ES modules, so — like most React Native
+libraries — the package must be transformed by Jest. Add it to
+`transformIgnorePatterns` in your Jest config:
+
+```js
+// jest.config.js
+module.exports = {
+  preset: 'jest-expo', // or 'react-native'
+  transformIgnorePatterns: [
+    'node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|react-native-enriched-markdown-scaffold))',
+  ],
+};
+```
+
+## What the mock does
+
+- **Renders a real `TextInput`.** React Native Testing Library queries
+  (`getByTestId`, `getByPlaceholderText`, …) and `fireEvent.changeText` work out
+  of the box. `EnrichedMarkdownText` renders its `markdown` prop as plain text.
+- **Emits change events on user input.** Typing fires `onChangeText` and, when a
+  handler is provided, `onChangeMarkdown`. The mock cannot parse markdown, so it
+  forwards the raw text to `onChangeMarkdown` as a stand-in.
+- **Mirrors `setValue` suppression.** Calling `setValue()` updates the rendered
+  text so the programmatic value is observable, but emits **no** change events —
+  matching the native component's suppression of emits for programmatic updates.
+- **Exposes every imperative method as a spy.** `toggleBold`, `insertMention`,
+  `setSelection`, and the rest are `jest.fn()`s you can assert against. The async
+  methods resolve sensible values: `getMarkdown()` resolves the current text and
+  `getCaretRect()` resolves `{ x: 0, y: 0, width: 0, height: 0 }`.
+
+The mock is authored against the library's real public types, so it is
+type-checked against the actual component API on every release and cannot
+silently fall behind when methods or props are added.
+
+## Examples
+
+Asserting user input reaches your handlers:
+
+```tsx
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { EnrichedMarkdownTextInput } from 'react-native-enriched-markdown-scaffold';
+
+test('reports typed text', () => {
+  const onChangeMarkdown = jest.fn();
+  render(
+    <EnrichedMarkdownTextInput
+      testID="composer"
+      onChangeMarkdown={onChangeMarkdown}
+    />,
+  );
+
+  fireEvent.changeText(screen.getByTestId('composer'), 'hello');
+
+  expect(onChangeMarkdown).toHaveBeenCalledWith('hello');
+});
+```
+
+Asserting a toolbar button invokes the right imperative method:
+
+```tsx
+import { createRef } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import {
+  EnrichedMarkdownTextInput,
+  type EnrichedMarkdownTextInputInstance,
+} from 'react-native-enriched-markdown-scaffold';
+
+test('bold button toggles bold', () => {
+  const ref = createRef<EnrichedMarkdownTextInputInstance>();
+  render(<EnrichedMarkdownTextInput ref={ref} />);
+
+  ref.current!.toggleBold();
+
+  expect(ref.current!.toggleBold).toHaveBeenCalledTimes(1);
+});
+```
+
+Reading a programmatic value back out:
+
+```tsx
+ref.current!.setValue('**bold**');
+await expect(ref.current!.getMarkdown()).resolves.toBe('**bold**');
+```
+
+## Limitations
+
+The mock does not parse or render markdown formatting — it stores and echoes raw
+text. It is meant for testing your components' wiring (event handlers, ref calls,
+conditional rendering), not the library's rendering or parsing behavior, which is
+covered by the library's own end-to-end tests.

package/docs/TEXT.md

@@ -7,7 +7,7 @@
 ### CommonMark (default)
 
 ```tsx
-import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
+import { EnrichedMarkdownText } from 'react-native-enriched-markdown-scaffold';
 import { Linking } from 'react-native';
 
 const markdown = `
@@ -76,6 +76,16 @@ Task lists with interactive checkboxes are available when `flavor="github"` is s
 />
 ```
 
+To render checkboxes that display their markdown state but cannot be toggled by the user, set [`enableTaskListItemToggle`](API_REFERENCE.md#enabletasklistitemtoggle) to `false`. The tap becomes fully inert — no visual toggle and no `onTaskListItemPress` — while text selection and links in the same row keep working.
+
+```tsx
+<EnrichedMarkdownText
+  flavor="github"
+  markdown={content}
+  enableTaskListItemToggle={false}
+/>
+```
+
 ### Link Handling
 
 Links in Markdown are interactive and can be handled with the `onLinkPress` and `onLinkLongPress` callbacks:
@@ -85,25 +95,27 @@ Links in Markdown are interactive and can be handled with the `onLinkPress` and
 
 See the [API Reference](API_REFERENCE.md#onlinkpress) for detailed examples and usage.
 
+Links can be styled as chips (background, radius, padding, border — see [Link chips](STYLES.md#link-chips)) and decorated with your own views via [`renderLinkDecoration`](API_REFERENCE.md#renderlinkdecoration).
+
 ## Supported Markdown Elements
 
-`react-native-enriched-markdown` supports a comprehensive set of Markdown elements. See [Element Structure](ELEMENTS_STRUCTURE.md) for a detailed overview of all supported elements, their syntax, block vs inline categorization, nesting behavior, and how elements inherit typography from their parent blocks.
+`react-native-enriched-markdown-scaffold` supports a comprehensive set of Markdown elements. See [Element Structure](ELEMENTS_STRUCTURE.md) for a detailed overview of all supported elements, their syntax, block vs inline categorization, nesting behavior, and how elements inherit typography from their parent blocks.
 
 ## Copy Options
 
-When text is selected, `react-native-enriched-markdown` provides enhanced copy functionality through the context menu. See [Copy Options](COPY_OPTIONS.md) for details on smart copy, copy as Markdown, and copy image URL features.
+When text is selected, `react-native-enriched-markdown-scaffold` provides enhanced copy functionality through the context menu. See [Copy Options](COPY_OPTIONS.md) for details on smart copy, copy as Markdown, and copy image URL features.
 
 ## Accessibility
 
-`react-native-enriched-markdown` provides comprehensive accessibility support for screen readers on both platforms. See [Accessibility](ACCESSIBILITY.md) for detailed information about VoiceOver and TalkBack support, custom rotors, semantic traits, and best practices.
+`react-native-enriched-markdown-scaffold` provides comprehensive accessibility support for screen readers on both platforms. See [Accessibility](ACCESSIBILITY.md) for detailed information about VoiceOver and TalkBack support, custom rotors, semantic traits, and best practices.
 
 ## RTL Support
 
-`react-native-enriched-markdown` fully supports right-to-left (RTL) languages such as Arabic, Hebrew, and Persian. See [RTL Support](RTL.md) for platform-specific setup instructions and how each element behaves in RTL contexts.
+`react-native-enriched-markdown-scaffold` fully supports right-to-left (RTL) languages such as Arabic, Hebrew, and Persian. See [RTL Support](RTL.md) for platform-specific setup instructions and how each element behaves in RTL contexts.
 
 ## Customizing Styles
 
-`react-native-enriched-markdown` allows customizing styles of all Markdown elements using the `markdownStyle` prop. See the [Style Properties Reference](STYLES.md) for a detailed overview of all available style properties.
+`react-native-enriched-markdown-scaffold` allows customizing styles of all Markdown elements using the `markdownStyle` prop. See the [Style Properties Reference](STYLES.md) for a detailed overview of all available style properties.
 
 ### Dark Mode
 

package/docs/WEB.md

@@ -11,7 +11,8 @@ All core `EnrichedMarkdownText` features are supported on web, including:
 - Full GFM: tables (with horizontal scroll), task lists (with checkbox interaction), strikethrough, links, images (block and inline), code blocks, LaTeX math (block and inline)
 - All `markdownStyle` customisation options
 - `onLinkPress`, `onLinkLongPress` (mapped to `contextmenu` event), `onTaskListItemPress` callbacks
-- `allowTrailingMargin`, `containerStyle`, `selectable`, `selectionColor`, `md4cFlags` (`underline`, `superscript`, `subscript`, `latexMath`)
+- `enableTaskListItemToggle` — set to `false` to render task list checkboxes read-only (the click is fully inert: no toggle, no `onTaskListItemPress`). The checkbox keeps its normal appearance, marked `readOnly` / `aria-disabled` and pointer-inert rather than `disabled`, matching iOS and Android
+- `allowTrailingMargin`, `containerStyle`, `selectable`, `selectionColor`, `md4cFlags` (`underline`, `superscript`, `subscript`, `latexMath`, `highlight`, `hardSoftBreaks`)
 - RTL support via the `dir` prop (CSS logical properties automatically flip blockquote borders, list indentation, etc.)
 
 ### Accessibility
@@ -36,11 +37,13 @@ The web implementation also exports `WebMarkdownTextProps` which extends `Enrich
 |---|---|
 | `flavor` | The web renderer always uses full GFM capabilities. On native, `flavor` controls whether a single `TextView` (CommonMark) or container-based renderer (GitHub) is used; the DOM has no such constraint. |
 | `enableLinkPreview` | iOS-only feature (native link preview on long press). |
+| `linkLongPressSelects` | iOS-only feature (selects a link on long press instead of the link preview). |
 | `allowFontScaling` / `maxFontSizeMultiplier` | React Native text scaling props. Browsers handle font scaling natively via OS accessibility settings. |
 | `streamingAnimation` | Native-only tail fade-in animation. Not yet implemented on web. |
 | `streamingConfig` | Native-only streaming table configuration. Not yet implemented on web. |
 | `contextMenuItems` | Not supported — browsers don't allow extending the native context menu. |
 | `selectionMenuConfig` | Not supported — native-only built-in selection menu actions. |
+| `contextMenuHidden` | Not supported — browsers own the context menu on selected text. |
 | `selectionHandleColor` | Android-only — desktop browsers don't render selection handles. |
 
 ## Not supported on web

package/ios/EnrichedMarkdown.h

@@ -13,6 +13,13 @@ NS_ASSUME_NONNULL_BEGIN
 - (void)renderMarkdownSynchronously:(NSString *)markdownString;
 - (BOOL)hasRenderedMarkdown:(NSString *)markdown;
 - (BOOL)hasRenderedWithStyleFingerprint:(size_t)fingerprint;
+
+/// Size last committed by Fabric via `updateLayoutMetrics:`, readable from
+/// any thread without blocking (issue #550: the shadow-node measure path must
+/// never wait on the main thread, and reading `bounds` off-main is unsafe).
+/// Backed by a single lock-free atomic, so the pair can't tear. Returns
+/// CGSizeZero until the first layout is committed.
+- (CGSize)lastCommittedLayoutSize;
 @end
 
 NS_ASSUME_NONNULL_END