@domenico-esposito/react-native-markdown-editor 0.1.1

package/src/markdownParser.ts

@@ -0,0 +1,345 @@
+import type { MarkdownBlockNode, MarkdownInlineNode, MarkdownToolbarAction } from './markdownCore.types';
+import { findUnescapedToken, parseImageSourceAndTitle, unescapeMarkdown, isEscaped, isMarkdownFeatureEnabled, isHeadingLevelEnabled } from './markdownSyntaxUtils';
+
+// ---------------------------------------------------------------------------
+// Regex patterns for block recognition
+// ---------------------------------------------------------------------------
+
+const FENCE_PATTERN = /^```([\w-]+)?\s*$/;
+const FENCE_CLOSE_PATTERN = /^```\s*$/;
+const HEADING_PATTERN = /^(#{1,6})\s+(.+)$/;
+const BLOCKQUOTE_PATTERN = /^>\s?(.*)$/;
+const HORIZONTAL_RULE_PATTERN = /^ {0,3}([-*_])[ \t]*(?:\1[ \t]*){2,}$/;
+const UNORDERED_LIST_PATTERN = /^\s*[-*+]\s+(.*)$/;
+const ORDERED_LIST_PATTERN = /^\s*\d+\.\s+(.*)$/;
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Parses markdown text into block nodes.
+ *
+ * Parsing is line-oriented: block-level constructs are identified first,
+ * then text fragments are delegated to the inline parser.
+ */
+export function parseMarkdown(markdown: string, features?: MarkdownToolbarAction[]): MarkdownBlockNode[] {
+	const lines = markdown.replace(/\r\n?/g, '\n').split('\n');
+	const blocks: MarkdownBlockNode[] = [];
+	let cursor = 0;
+
+	while (cursor < lines.length) {
+		const line = lines[cursor] ?? '';
+
+		if (line.trim().length === 0) {
+			blocks.push({ type: 'spacer' });
+			cursor += 1;
+			continue;
+		}
+
+		//  Fenced code block: ```lang ... ```
+		if (isMarkdownFeatureEnabled(features, 'codeBlock')) {
+			const fenceMatch = line.match(FENCE_PATTERN);
+			if (fenceMatch) {
+				const closingFenceIndex = findClosingFence(lines, cursor + 1);
+				if (closingFenceIndex !== -1) {
+					blocks.push({
+						type: 'codeBlock',
+						language: fenceMatch[1],
+						content: lines.slice(cursor + 1, closingFenceIndex).join('\n'),
+					});
+					cursor = closingFenceIndex + 1;
+					continue;
+				}
+			}
+		}
+
+		//  Heading: # ... ######
+		const headingMatch = line.match(HEADING_PATTERN);
+		if (headingMatch && !isEscaped(line, 0) && isHeadingLevelEnabled(features, headingMatch[1].length)) {
+			const level = headingMatch[1].length as 1 | 2 | 3 | 4 | 5 | 6;
+			blocks.push({
+				type: 'heading',
+				level,
+				children: parseMarkdownInline(headingMatch[2], features),
+			});
+			cursor += 1;
+			continue;
+		}
+
+		//  Horizontal rule: ---, ***, ___
+		if (isMarkdownFeatureEnabled(features, 'divider') && HORIZONTAL_RULE_PATTERN.test(line)) {
+			blocks.push({ type: 'horizontalRule' });
+			cursor += 1;
+			continue;
+		}
+
+		//  Blockquote: > quote
+		if (isMarkdownFeatureEnabled(features, 'quote') && BLOCKQUOTE_PATTERN.test(line)) {
+			const quotedLines: string[] = [];
+			while (cursor < lines.length) {
+				const quoteMatch = lines[cursor]?.match(BLOCKQUOTE_PATTERN);
+				if (!quoteMatch) {
+					break;
+				}
+				quotedLines.push(quoteMatch[1]);
+				cursor += 1;
+			}
+			blocks.push({
+				type: 'blockquote',
+				children: parseMarkdownInline(quotedLines.join('\n'), features),
+			});
+			continue;
+		}
+
+		//  List: bullet (-, *, +) or ordered (1.)
+		if (
+			(isMarkdownFeatureEnabled(features, 'unorderedList') && UNORDERED_LIST_PATTERN.test(line)) ||
+			(isMarkdownFeatureEnabled(features, 'orderedList') && ORDERED_LIST_PATTERN.test(line))
+		) {
+			const ordered = ORDERED_LIST_PATTERN.test(line);
+			const itemPattern = ordered ? ORDERED_LIST_PATTERN : UNORDERED_LIST_PATTERN;
+			const items: MarkdownInlineNode[][] = [];
+
+			while (cursor < lines.length) {
+				const itemMatch = lines[cursor]?.match(itemPattern);
+				if (!itemMatch) {
+					break;
+				}
+				items.push(parseMarkdownInline(itemMatch[1], features));
+				cursor += 1;
+			}
+
+			blocks.push({
+				type: 'list',
+				ordered,
+				items,
+			});
+			continue;
+		}
+
+		//  Paragraph: consecutive non-empty lines until next block start
+		const paragraphLines: string[] = [];
+		while (cursor < lines.length) {
+			const currentLine = lines[cursor] ?? '';
+			if (currentLine.trim().length === 0 || isBlockStart(lines, cursor, features)) {
+				break;
+			}
+			paragraphLines.push(currentLine);
+			cursor += 1;
+		}
+
+		if (paragraphLines.length > 0) {
+			blocks.push({
+				type: 'paragraph',
+				children: parseMarkdownInline(paragraphLines.join('\n'), features),
+			});
+			continue;
+		}
+
+		cursor += 1;
+	}
+
+	return blocks;
+}
+
+/**
+ * Parses inline markdown tokens inside a block.
+ *
+ * The parser scans left-to-right and uses recursion for nested emphasis
+ * and link labels.
+ */
+export function parseMarkdownInline(content: string, features?: MarkdownToolbarAction[]): MarkdownInlineNode[] {
+	const nodes: MarkdownInlineNode[] = [];
+	let cursor = 0;
+
+	const appendText = (value: string) => {
+		if (!value) {
+			return;
+		}
+		const lastNode = nodes[nodes.length - 1];
+		if (lastNode?.type === 'text') {
+			lastNode.content += value;
+			return;
+		}
+		// Keep adjacent plain text in a single node to reduce fragmentation.
+		nodes.push({ type: 'text', content: value });
+	};
+
+	while (cursor < content.length) {
+		// Escape: \* -> literal *
+		if (content[cursor] === '\\' && cursor + 1 < content.length) {
+			appendText(content[cursor + 1] ?? '');
+			cursor += 2;
+			continue;
+		}
+
+		// Inline code: `code`
+		if (isMarkdownFeatureEnabled(features, 'code') && content[cursor] === '`') {
+			const closingIndex = findUnescapedToken(content, '`', cursor + 1);
+			if (closingIndex !== -1) {
+				nodes.push({
+					type: 'code',
+					content: unescapeMarkdown(content.slice(cursor + 1, closingIndex)),
+				});
+				cursor = closingIndex + 1;
+				continue;
+			}
+		}
+
+		// Bold: **text** or __text__
+		if (isMarkdownFeatureEnabled(features, 'bold') && (content.startsWith('**', cursor) || content.startsWith('__', cursor))) {
+			const marker = content.slice(cursor, cursor + 2);
+			const closingIndex = findUnescapedToken(content, marker, cursor + marker.length);
+			if (closingIndex !== -1) {
+				nodes.push({
+					type: 'bold',
+					children: parseMarkdownInline(content.slice(cursor + marker.length, closingIndex), features),
+				});
+				cursor = closingIndex + marker.length;
+				continue;
+			}
+		}
+
+		// Strikethrough: ~~text~~
+		if (isMarkdownFeatureEnabled(features, 'strikethrough') && content.startsWith('~~', cursor)) {
+			const closingIndex = findUnescapedToken(content, '~~', cursor + 2);
+			if (closingIndex !== -1) {
+				nodes.push({
+					type: 'strikethrough',
+					children: parseMarkdownInline(content.slice(cursor + 2, closingIndex), features),
+				});
+				cursor = closingIndex + 2;
+				continue;
+			}
+		}
+
+		// Italic: *text* or _text_
+		if (isMarkdownFeatureEnabled(features, 'italic') && (content[cursor] === '*' || content[cursor] === '_')) {
+			const marker = content[cursor];
+			const closingIndex = findUnescapedToken(content, marker, cursor + 1);
+			if (closingIndex !== -1) {
+				nodes.push({
+					type: 'italic',
+					children: parseMarkdownInline(content.slice(cursor + 1, closingIndex), features),
+				});
+				cursor = closingIndex + 1;
+				continue;
+			}
+		}
+
+		// Image: ![alt](url) or ![alt](url "title")
+		if (content[cursor] === '!' && content[cursor + 1] === '[') {
+			if (isMarkdownFeatureEnabled(features, 'image')) {
+				const altClosingIndex = findUnescapedToken(content, ']', cursor + 2);
+				const srcOpenIndex = altClosingIndex + 1;
+
+				if (altClosingIndex !== -1 && content[srcOpenIndex] === '(') {
+					const srcClosingIndex = findUnescapedToken(content, ')', srcOpenIndex + 1);
+					if (srcClosingIndex !== -1) {
+						const alt = unescapeMarkdown(content.slice(cursor + 2, altClosingIndex));
+						const raw = content.slice(srcOpenIndex + 1, srcClosingIndex);
+						const { src, title } = parseImageSourceAndTitle(raw);
+						nodes.push({ type: 'image', src, alt, title });
+						cursor = srcClosingIndex + 1;
+						continue;
+					}
+				}
+			} else {
+				// Image disabled: consume the whole "![alt](url)" as plain text
+				// so the link parser does not pick up "[alt](url)" as a link.
+				const altClosingIndex = findUnescapedToken(content, ']', cursor + 2);
+				if (altClosingIndex !== -1 && content[altClosingIndex + 1] === '(') {
+					const srcClosingIndex = findUnescapedToken(content, ')', altClosingIndex + 2);
+					if (srcClosingIndex !== -1) {
+						appendText(content.slice(cursor, srcClosingIndex + 1));
+						cursor = srcClosingIndex + 1;
+						continue;
+					}
+				}
+				appendText('!');
+				cursor += 1;
+				continue;
+			}
+		}
+
+		// Link: [label](url)
+		if (content[cursor] === '[') {
+			const labelClosingIndex = findUnescapedToken(content, ']', cursor + 1);
+			const linkOpenIndex = labelClosingIndex + 1;
+
+			if (labelClosingIndex !== -1 && content[linkOpenIndex] === '(') {
+				const hrefClosingIndex = findUnescapedToken(content, ')', linkOpenIndex + 1);
+				if (hrefClosingIndex !== -1) {
+					nodes.push({
+						type: 'link',
+						href: unescapeMarkdown(content.slice(linkOpenIndex + 1, hrefClosingIndex)),
+						children: parseMarkdownInline(content.slice(cursor + 1, labelClosingIndex), features),
+					});
+					cursor = hrefClosingIndex + 1;
+					continue;
+				}
+			}
+		}
+
+		// Simple text character.
+		appendText(content[cursor] ?? '');
+		cursor += 1;
+	}
+
+	return nodes;
+}
+
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Determines whether the line at `index` begins a new block-level construct
+ * (heading, rule, quote, list, or fenced code block).
+ *
+ * Used by the paragraph collector to know when to stop consuming lines.
+ */
+function isBlockStart(lines: string[], index: number, features?: MarkdownToolbarAction[]): boolean {
+	const line = lines[index] ?? '';
+	if (line.trim().length === 0) {
+		return false;
+	}
+	if (isMarkdownFeatureEnabled(features, 'heading') && HEADING_PATTERN.test(line)) {
+		const m = line.match(HEADING_PATTERN);
+		if (m && isHeadingLevelEnabled(features, m[1].length)) {
+			return true;
+		}
+	}
+	if (isMarkdownFeatureEnabled(features, 'divider') && HORIZONTAL_RULE_PATTERN.test(line)) {
+		return true;
+	}
+	if (isMarkdownFeatureEnabled(features, 'quote') && BLOCKQUOTE_PATTERN.test(line)) {
+		return true;
+	}
+	if (
+		(isMarkdownFeatureEnabled(features, 'unorderedList') && UNORDERED_LIST_PATTERN.test(line)) ||
+		(isMarkdownFeatureEnabled(features, 'orderedList') && ORDERED_LIST_PATTERN.test(line))
+	) {
+		return true;
+	}
+	if (isMarkdownFeatureEnabled(features, 'codeBlock') && FENCE_PATTERN.test(line)) {
+		// Avoid treating an unmatched opening fence as a block boundary.
+		return findClosingFence(lines, index + 1) !== -1;
+	}
+	return false;
+}
+
+/**
+ * Scans forward from `startIndex` looking for a closing code fence (` ``` `).
+ *
+ * @returns The line index of the closing fence, or `-1` if none is found.
+ */
+function findClosingFence(lines: string[], startIndex: number): number {
+	for (let index = startIndex; index < lines.length; index += 1) {
+		if (FENCE_CLOSE_PATTERN.test(lines[index] ?? '')) {
+			return index;
+		}
+	}
+	return -1;
+}

package/src/markdownRendererDefaults.tsx

@@ -0,0 +1,207 @@
+/**
+ * Default component implementations and styles for {@link MarkdownRenderer}.
+ *
+ * Each markdown tag has a corresponding default component that provides
+ * basic visual styling. Consumers can override any subset via the
+ * `components` prop on `MarkdownRenderer`.
+ */
+
+import * as React from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+
+import type { MarkdownComponentMap } from './markdownCore.types';
+
+// ---------------------------------------------------------------------------
+// Default components
+// ---------------------------------------------------------------------------
+
+const DefaultRoot: MarkdownComponentMap['root'] = ({ children, style }) => <View style={[styles.root, style]}>{children}</View>;
+
+const DefaultParagraph: MarkdownComponentMap['paragraph'] = ({ children }) => <Text style={styles.paragraph}>{children}</Text>;
+
+const DefaultText: MarkdownComponentMap['text'] = ({ children }) => <Text>{children}</Text>;
+
+const DefaultHeading1: MarkdownComponentMap['heading1'] = ({ children }) => <Text style={styles.heading1}>{children}</Text>;
+
+const DefaultHeading2: MarkdownComponentMap['heading2'] = ({ children }) => <Text style={styles.heading2}>{children}</Text>;
+
+const DefaultHeading3: MarkdownComponentMap['heading3'] = ({ children }) => <Text style={styles.heading3}>{children}</Text>;
+
+const DefaultHeading4: MarkdownComponentMap['heading4'] = ({ children }) => <Text style={styles.heading4}>{children}</Text>;
+
+const DefaultHeading5: MarkdownComponentMap['heading5'] = ({ children }) => <Text style={styles.heading5}>{children}</Text>;
+
+const DefaultHeading6: MarkdownComponentMap['heading6'] = ({ children }) => <Text style={styles.heading6}>{children}</Text>;
+
+const DefaultBold: MarkdownComponentMap['bold'] = ({ children }) => <Text style={styles.bold}>{children}</Text>;
+
+const DefaultItalic: MarkdownComponentMap['italic'] = ({ children }) => <Text style={styles.italic}>{children}</Text>;
+
+const DefaultStrikethrough: MarkdownComponentMap['strikethrough'] = ({ children }) => <Text style={styles.strikethrough}>{children}</Text>;
+
+const DefaultInlineCode: MarkdownComponentMap['inlineCode'] = ({ children }) => <Text style={styles.inlineCode}>{children}</Text>;
+
+const DefaultCodeBlock: MarkdownComponentMap['codeBlock'] = ({ text, language }) => (
+	<View style={styles.codeBlock}>
+		<Text style={styles.codeBlockLanguage}>{language?.trim() || 'Code'}</Text>
+		<Text style={styles.codeBlockText}>{text}</Text>
+	</View>
+);
+
+const DefaultBlockquote: MarkdownComponentMap['blockquote'] = ({ children }) => <View style={styles.blockquote}>{children}</View>;
+
+const DefaultHorizontalRule: MarkdownComponentMap['horizontalRule'] = () => <View style={styles.horizontalRule} />;
+
+const DefaultSpacer: MarkdownComponentMap['spacer'] = () => <View style={styles.spacer} />;
+
+const DefaultUnorderedList: MarkdownComponentMap['unorderedList'] = ({ children }) => <View style={styles.list}>{children}</View>;
+
+const DefaultOrderedList: MarkdownComponentMap['orderedList'] = ({ children }) => <View style={styles.list}>{children}</View>;
+
+const DefaultListItem: MarkdownComponentMap['listItem'] = ({ children }) => <View style={styles.listItem}>{children}</View>;
+
+const DefaultLink: MarkdownComponentMap['link'] = ({ children }) => <Text style={styles.link}>{children}</Text>;
+
+const DefaultImage: MarkdownComponentMap['image'] = ({ src, alt, title }) => (
+	<View style={styles.imageContainer}>
+		<Image source={{ uri: src }} style={styles.image} resizeMode="contain" accessibilityLabel={alt ?? title} />
+		{alt ? <Text style={styles.imageAlt}>{alt}</Text> : null}
+	</View>
+);
+
+// ---------------------------------------------------------------------------
+// Component map
+// ---------------------------------------------------------------------------
+
+/** Complete map of default markdown rendering components. */
+export const DEFAULT_COMPONENTS: MarkdownComponentMap = {
+	root: DefaultRoot,
+	paragraph: DefaultParagraph,
+	text: DefaultText,
+	heading1: DefaultHeading1,
+	heading2: DefaultHeading2,
+	heading3: DefaultHeading3,
+	heading4: DefaultHeading4,
+	heading5: DefaultHeading5,
+	heading6: DefaultHeading6,
+	bold: DefaultBold,
+	italic: DefaultItalic,
+	strikethrough: DefaultStrikethrough,
+	inlineCode: DefaultInlineCode,
+	codeBlock: DefaultCodeBlock,
+	blockquote: DefaultBlockquote,
+	horizontalRule: DefaultHorizontalRule,
+	unorderedList: DefaultUnorderedList,
+	orderedList: DefaultOrderedList,
+	listItem: DefaultListItem,
+	link: DefaultLink,
+	image: DefaultImage,
+	spacer: DefaultSpacer,
+};
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+export const styles = StyleSheet.create({
+	root: {
+		gap: 8,
+	},
+	paragraph: {
+		color: '#1f1f1f',
+		lineHeight: 22,
+	},
+	heading1: {
+		fontSize: 30,
+		fontWeight: '700',
+	},
+	heading2: {
+		fontSize: 26,
+		fontWeight: '700',
+	},
+	heading3: {
+		fontSize: 22,
+		fontWeight: '700',
+	},
+	heading4: {
+		fontSize: 20,
+		fontWeight: '700',
+	},
+	heading5: {
+		fontSize: 18,
+		fontWeight: '700',
+	},
+	heading6: {
+		fontSize: 16,
+		fontWeight: '700',
+	},
+	bold: {
+		fontWeight: '700',
+	},
+	italic: {
+		fontStyle: 'italic',
+	},
+	strikethrough: {
+		textDecorationLine: 'line-through' as const,
+	},
+	inlineCode: {
+		fontFamily: 'Courier',
+		backgroundColor: '#f1f1f1',
+		paddingHorizontal: 4,
+		borderRadius: 4,
+	},
+	codeBlock: {
+		backgroundColor: '#f1f1f1',
+		borderRadius: 8,
+		padding: 12,
+	},
+	codeBlockLanguage: {
+		alignSelf: 'flex-start',
+		fontSize: 11,
+		fontWeight: '700',
+		backgroundColor: '#e2e2e2',
+		borderRadius: 4,
+		paddingHorizontal: 6,
+		paddingVertical: 2,
+		marginBottom: 8,
+	},
+	codeBlockText: {
+		fontFamily: 'Courier',
+	},
+	blockquote: {
+		borderLeftWidth: 3,
+		borderLeftColor: '#acacac',
+		paddingLeft: 10,
+	},
+	horizontalRule: {
+		borderBottomWidth: 1,
+		borderBottomColor: '#d0d0d0',
+		marginVertical: 8,
+	},
+	list: {
+		gap: 4,
+	},
+	listItem: {
+		flexDirection: 'row',
+	},
+	link: {
+		color: '#2d5eff',
+		textDecorationLine: 'underline',
+	},
+	image: {
+		width: '100%',
+		height: 200,
+	},
+	imageContainer: {
+		alignItems: 'center',
+	},
+	imageAlt: {
+		fontSize: 12,
+		color: '#6b6b6b',
+		marginTop: 4,
+		textAlign: 'center',
+	},
+	spacer: {
+		height: 8,
+	},
+});

package/src/markdownSegment.types.ts

@@ -0,0 +1,24 @@
+import type { ComponentType, ReactNode } from 'react';
+
+import type { HighlightSegmentType } from './markdownHighlight.types';
+
+/**
+ * Props received by every custom segment component.
+ * The component MUST render a Text (or a component that inherits from Text),
+ * since segments are children of a TextInput.
+ */
+export type SegmentComponentProps = {
+	/** Semantic type of the segment (e.g. 'bold', 'heading', 'code'). */
+	type: HighlightSegmentType;
+	/** Optional metadata emitted by the highlighter (e.g. heading level, image info). */
+	meta?: Record<string, string>;
+	/** The segment text content. */
+	children: ReactNode;
+};
+
+/**
+ * Map of custom components keyed by segment type.
+ * Only the types you want to override need to be specified;
+ * unspecified types fall back to defaults.
+ */
+export type SegmentComponentMap = Partial<Record<HighlightSegmentType, ComponentType<SegmentComponentProps>>>;