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

package/src/MarkdownRenderer.tsx

@@ -0,0 +1,240 @@
+/**
+ * Read-only markdown renderer component.
+ *
+ * Parses a markdown string into an AST and maps each node to a
+ * React Native component. Every tag can be overridden via the
+ * `components` prop; unspecified tags fall back to defaults
+ * defined in `markdownRendererDefaults.tsx`.
+ */
+
+import * as React from 'react';
+
+import type {
+	MarkdownComponentMap,
+	MarkdownInlineNode,
+	MarkdownRendererProps,
+} from './markdownCore.types';
+import { parseMarkdown } from './markdownParser';
+import { DEFAULT_COMPONENTS } from './markdownRendererDefaults';
+
+export default function MarkdownRenderer({ markdown, components, style, features }: MarkdownRendererProps) {
+	const blocks = React.useMemo(() => parseMarkdown(markdown, features), [markdown, features]);
+	const componentMap: MarkdownComponentMap = React.useMemo(
+		() => ({
+			...DEFAULT_COMPONENTS,
+			...components,
+		}),
+		[components],
+	);
+
+	const RootComponent = componentMap.root;
+
+	return (
+		<RootComponent type="root" style={style}>
+			{blocks.map((block, blockIndex) => {
+				const key = `block-${blockIndex}`;
+
+				if (block.type === 'paragraph') {
+					if (block.children.length === 1 && block.children[0]?.type === 'image') {
+						const imageNode = block.children[0];
+						const ImageComponent = componentMap.image;
+						return <ImageComponent key={key} type="image" src={imageNode.src} alt={imageNode.alt} title={imageNode.title} />;
+					}
+
+					const ParagraphComponent = componentMap.paragraph;
+					return (
+						<ParagraphComponent key={key} type="paragraph">
+							{renderInlineNodes(block.children, componentMap, key)}
+						</ParagraphComponent>
+					);
+				}
+
+				if (block.type === 'heading') {
+					if (block.level === 1) {
+						const HeadingComponent = componentMap.heading1;
+						return (
+							<HeadingComponent key={key} type="heading1" level={1}>
+								{renderInlineNodes(block.children, componentMap, key)}
+							</HeadingComponent>
+						);
+					}
+
+					if (block.level === 2) {
+						const HeadingComponent = componentMap.heading2;
+						return (
+							<HeadingComponent key={key} type="heading2" level={2}>
+								{renderInlineNodes(block.children, componentMap, key)}
+							</HeadingComponent>
+						);
+					}
+
+					if (block.level === 3) {
+						const HeadingComponent = componentMap.heading3;
+						return (
+							<HeadingComponent key={key} type="heading3" level={3}>
+								{renderInlineNodes(block.children, componentMap, key)}
+							</HeadingComponent>
+						);
+					}
+
+					if (block.level === 4) {
+						const HeadingComponent = componentMap.heading4;
+						return (
+							<HeadingComponent key={key} type="heading4" level={4}>
+								{renderInlineNodes(block.children, componentMap, key)}
+							</HeadingComponent>
+						);
+					}
+
+					if (block.level === 5) {
+						const HeadingComponent = componentMap.heading5;
+						return (
+							<HeadingComponent key={key} type="heading5" level={5}>
+								{renderInlineNodes(block.children, componentMap, key)}
+							</HeadingComponent>
+						);
+					}
+
+					const HeadingComponent = componentMap.heading6;
+					return (
+						<HeadingComponent key={key} type="heading6" level={6}>
+							{renderInlineNodes(block.children, componentMap, key)}
+						</HeadingComponent>
+					);
+				}
+
+				if (block.type === 'codeBlock') {
+					const CodeBlockComponent = componentMap.codeBlock;
+					return <CodeBlockComponent key={key} type="codeBlock" text={block.content} language={block.language} />;
+				}
+
+				if (block.type === 'blockquote') {
+					const BlockquoteComponent = componentMap.blockquote;
+					return (
+						<BlockquoteComponent key={key} type="blockquote">
+							{renderInlineNodes(block.children, componentMap, key)}
+						</BlockquoteComponent>
+					);
+				}
+
+				if (block.type === 'horizontalRule') {
+					const HorizontalRuleComponent = componentMap.horizontalRule;
+					return <HorizontalRuleComponent key={key} type="horizontalRule" />;
+				}
+
+				if (block.type === 'spacer') {
+					const SpacerComponent = componentMap.spacer;
+					return <SpacerComponent key={key} type="spacer" />;
+				}
+
+				const ListItemComponent = componentMap.listItem;
+				const TextComponent = componentMap.text;
+
+				if (block.ordered) {
+					const OrderedListComponent = componentMap.orderedList;
+					return (
+						<OrderedListComponent key={key} type="orderedList" ordered>
+							{block.items.map((item, itemIndex) => {
+								const marker = `${itemIndex + 1}. `;
+
+								return (
+									<ListItemComponent key={`${key}-item-${itemIndex}`} type="listItem" ordered index={itemIndex}>
+										<TextComponent type="text" text={marker}>
+											{marker}
+											{renderInlineNodes(item, componentMap, `${key}-item-${itemIndex}`)}
+										</TextComponent>
+									</ListItemComponent>
+								);
+							})}
+						</OrderedListComponent>
+					);
+				}
+
+				const UnorderedListComponent = componentMap.unorderedList;
+				return (
+					<UnorderedListComponent key={key} type="unorderedList" ordered={false}>
+						{block.items.map((item, itemIndex) => {
+							const marker = '- ';
+
+							return (
+								<ListItemComponent key={`${key}-item-${itemIndex}`} type="listItem" ordered={false} index={itemIndex}>
+									<TextComponent type="text" text={marker}>
+										{marker}
+										{renderInlineNodes(item, componentMap, `${key}-item-${itemIndex}`)}
+									</TextComponent>
+								</ListItemComponent>
+							);
+						})}
+					</UnorderedListComponent>
+				);
+			})}
+		</RootComponent>
+	);
+}
+
+/**
+ * Recursively renders an array of inline markdown nodes into React elements.
+ * Each node type is mapped to its corresponding component from the component map.
+ */
+function renderInlineNodes(nodes: MarkdownInlineNode[], components: MarkdownComponentMap, keyPrefix: string): React.ReactNode[] {
+	return nodes.map((node, index) => {
+		const key = `${keyPrefix}-inline-${index}`;
+
+		if (node.type === 'text') {
+			const TextComponent = components.text;
+			return (
+				<TextComponent key={key} type="text" text={node.content}>
+					{node.content}
+				</TextComponent>
+			);
+		}
+
+		if (node.type === 'bold') {
+			const BoldComponent = components.bold;
+			return (
+				<BoldComponent key={key} type="bold">
+					{renderInlineNodes(node.children, components, key)}
+				</BoldComponent>
+			);
+		}
+
+		if (node.type === 'italic') {
+			const ItalicComponent = components.italic;
+			return (
+				<ItalicComponent key={key} type="italic">
+					{renderInlineNodes(node.children, components, key)}
+				</ItalicComponent>
+			);
+		}
+
+		if (node.type === 'strikethrough') {
+			const StrikethroughComponent = components.strikethrough;
+			return (
+				<StrikethroughComponent key={key} type="strikethrough">
+					{renderInlineNodes(node.children, components, key)}
+				</StrikethroughComponent>
+			);
+		}
+
+		if (node.type === 'code') {
+			const InlineCodeComponent = components.inlineCode;
+			return (
+				<InlineCodeComponent key={key} type="inlineCode" text={node.content}>
+					{node.content}
+				</InlineCodeComponent>
+			);
+		}
+
+		if (node.type === 'image') {
+			const ImageComponent = components.image;
+			return <ImageComponent key={key} type="image" src={node.src} alt={node.alt} title={node.title} />;
+		}
+
+		const LinkComponent = components.link;
+		return (
+			<LinkComponent key={key} type="link" href={node.href}>
+				{renderInlineNodes(node.children, components, key)}
+			</LinkComponent>
+		);
+	});
+}

package/src/MarkdownTextInput.tsx

@@ -0,0 +1,263 @@
+import * as React from 'react';
+import { Platform, StyleSheet, TextInput, View } from 'react-native';
+
+import type { MarkdownTextInputProps } from './markdownCore.types';
+import type { HighlightSegment } from './markdownHighlight.types';
+import { DEFAULT_SEGMENT_COMPONENTS, getDefaultSegmentStyle } from './markdownSegmentDefaults';
+
+const isWeb = Platform.OS === 'web';
+
+// ---------------------------------------------------------------------------
+// Web helpers – contentEditable with inline syntax highlighting
+// ---------------------------------------------------------------------------
+
+function escapeHTML(s: string): string {
+	return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function styleToCSS(s: Record<string, any>): string {
+	const p: string[] = [];
+	if (s.color) p.push(`color:${s.color}`);
+	if (s.fontWeight) p.push(`font-weight:${s.fontWeight}`);
+	if (s.fontStyle) p.push(`font-style:${s.fontStyle}`);
+	if (s.textDecorationLine) p.push(`text-decoration:${s.textDecorationLine}`);
+	if (s.fontFamily) p.push(`font-family:${s.fontFamily}`);
+	if (s.fontSize != null) p.push(`font-size:${s.fontSize}px`);
+	if (s.lineHeight != null) p.push(`line-height:${s.lineHeight}px`);
+	if (s.backgroundColor) p.push(`background-color:${s.backgroundColor}`);
+	if (s.letterSpacing != null) p.push(`letter-spacing:${s.letterSpacing}px`);
+	return p.join(';');
+}
+
+function segmentsToHTML(segments: HighlightSegment[]): string {
+	return segments
+		.map((seg) => `<span style="${styleToCSS(getDefaultSegmentStyle(seg.type, seg.meta))}">${escapeHTML(seg.text)}</span>`)
+		.join('');
+}
+
+function textOffset(root: Node, target: Node, off: number): number {
+	const tw = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+	let count = 0;
+	let n: Node | null;
+	while ((n = tw.nextNode())) {
+		if (n === target) return count + off;
+		count += (n as Text).length;
+	}
+	return count;
+}
+
+function saveCursor(el: HTMLElement): { start: number; end: number } | null {
+	const s = window.getSelection();
+	if (!s || !s.rangeCount) return null;
+	const r = s.getRangeAt(0);
+	if (!el.contains(r.startContainer)) return null;
+	return {
+		start: textOffset(el, r.startContainer, r.startOffset),
+		end: textOffset(el, r.endContainer, r.endOffset),
+	};
+}
+
+function restoreCursor(el: HTMLElement, pos: { start: number; end: number }) {
+	const s = window.getSelection();
+	if (!s) return;
+	const range = document.createRange();
+	const tw = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+	let idx = 0;
+	let startSet = false;
+	let n: Node | null;
+	while ((n = tw.nextNode())) {
+		const len = (n as Text).length;
+		if (!startSet && idx + len >= pos.start) {
+			range.setStart(n, pos.start - idx);
+			startSet = true;
+		}
+		if (startSet && idx + len >= pos.end) {
+			range.setEnd(n, pos.end - idx);
+			break;
+		}
+		idx += len;
+	}
+	if (!startSet) {
+		range.selectNodeContents(el);
+		range.collapse(false);
+	}
+	s.removeAllRanges();
+	s.addRange(range);
+}
+
+function extractText(el: HTMLElement): string {
+	let text = '';
+	const walk = (node: Node) => {
+		if (node.nodeType === Node.TEXT_NODE) {
+			text += node.textContent;
+		} else if (node.nodeType === Node.ELEMENT_NODE) {
+			if ((node as HTMLElement).tagName === 'BR') {
+				text += '\n';
+			} else {
+				for (let i = 0; i < node.childNodes.length; i++) walk(node.childNodes[i]);
+			}
+		}
+	};
+	walk(el);
+	return text;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Pure markdown text input with integrated live preview.
+ *
+ * Requires an `editor` handle from `useMarkdownEditor()`.
+ * Does NOT render a toolbar, use `MarkdownToolbar` separately.
+ */
+export default function MarkdownTextInput({ editor, style, textInputStyle, segmentComponents, ...textInputProps }: MarkdownTextInputProps) {
+	const components = React.useMemo(() => ({ ...DEFAULT_SEGMENT_COMPONENTS, ...segmentComponents }), [segmentComponents]);
+	const editableRef = React.useRef<HTMLDivElement>(null);
+	const cursorRef = React.useRef<{ start: number; end: number } | null>(null);
+
+	// Web: sync highlighted segments into contentEditable DOM
+	// biome-ignore lint: segments is the only meaningful dep
+	React.useLayoutEffect(() => {
+		if (!isWeb) return;
+		const el = editableRef.current;
+		if (!el) return;
+		const cursor = cursorRef.current ?? saveCursor(el);
+		el.innerHTML = segmentsToHTML(editor.highlightedSegments);
+		if (cursor) restoreCursor(el, cursor);
+		cursorRef.current = null;
+	}, [editor.highlightedSegments]);
+
+	// Web: apply programmatic selection from editor (e.g. after toolbar actions)
+	React.useEffect(() => {
+		if (!isWeb || !editableRef.current || !editor.selection) return;
+		restoreCursor(editableRef.current, editor.selection);
+	}, [editor.selection]);
+
+	const handleInput = React.useCallback(() => {
+		const el = editableRef.current;
+		if (!el) return;
+		cursorRef.current = saveCursor(el);
+		editor.handleChangeText(extractText(el));
+	}, [editor.handleChangeText]);
+
+	const handleSelect = React.useCallback(() => {
+		const el = editableRef.current;
+		if (!el) return;
+		const pos = saveCursor(el);
+		if (pos) editor.handleSelectionChange({ nativeEvent: { selection: pos } } as any);
+	}, [editor.handleSelectionChange]);
+
+	const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			document.execCommand('insertText', false, '\n');
+		}
+	}, []);
+
+	const handlePaste = React.useCallback((e: React.ClipboardEvent) => {
+		e.preventDefault();
+		document.execCommand('insertText', false, e.clipboardData.getData('text/plain'));
+	}, []);
+
+	const setRef = React.useCallback(
+		(el: HTMLDivElement | null) => {
+			editableRef.current = el;
+			if (editor.inputRef && typeof editor.inputRef === 'object') {
+				(editor.inputRef as React.MutableRefObject<any>).current = el;
+			}
+		},
+		[editor.inputRef],
+	);
+
+	if (isWeb) {
+		return (
+			<View style={[styles.editorContainer, style]}>
+				<View style={styles.webWrapper}>
+					{!editor.value && textInputProps.placeholder ? (
+						<div
+							style={{
+								position: 'absolute' as const,
+								top: 10,
+								left: 14,
+								color: String(textInputProps.placeholderTextColor ?? '#999'),
+								fontSize: 16,
+								pointerEvents: 'none' as const,
+								userSelect: 'none' as const,
+							}}
+						>
+							{textInputProps.placeholder}
+						</div>
+					) : null}
+					<div
+						ref={setRef}
+						contentEditable
+						suppressContentEditableWarning
+						onInput={handleInput}
+						onSelect={handleSelect}
+						onKeyDown={handleKeyDown}
+						onPaste={handlePaste}
+						style={{
+							flex: 1,
+							padding: '10px 14px',
+							fontSize: 16,
+							whiteSpace: 'pre-wrap' as const,
+							wordBreak: 'break-word' as const,
+							outline: 'none',
+							overflowY: 'auto' as const,
+							caretColor: '#000',
+						}}
+					/>
+				</View>
+			</View>
+		);
+	}
+
+	return (
+		<View style={[styles.editorContainer, style]}>
+			<TextInput
+				placeholderTextColor="#999"
+				{...textInputProps}
+				ref={editor.inputRef}
+				multiline
+				onChangeText={editor.handleChangeText}
+				onSelectionChange={editor.handleSelectionChange}
+				selection={editor.selection}
+				style={[styles.textInput, textInputStyle]}>
+				{editor.highlightedSegments.map((segment, index) => {
+					const Component = components[segment.type];
+					return (
+						<Component key={index} type={segment.type} meta={segment.meta}>
+							{segment.text}
+						</Component>
+					);
+				})}
+			</TextInput>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	editorContainer: {
+		gap: 12,
+		borderWidth: 1,
+		borderColor: '#d7d7d7',
+		borderRadius: 12,
+		backgroundColor: '#fff',
+		minHeight: 140,
+		overflow: 'hidden',
+	},
+	textInput: {
+		flex: 1,
+		paddingHorizontal: 14,
+		paddingVertical: 10,
+		textAlignVertical: 'top',
+		fontSize: 16,
+		includeFontPadding: false,
+	},
+	webWrapper: {
+		flex: 1,
+		position: 'relative',
+	},
+});

package/src/MarkdownToolbar.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import type { MarkdownInlineToolbarAction, MarkdownToolbarAction, MarkdownToolbarButtonState, MarkdownToolbarProps } from './markdownCore.types';
+import { DEFAULT_MARKDOWN_FEATURES } from './markdownToolbarActions';
+
+const ACTION_LABELS: Record<MarkdownToolbarAction, string> = {
+	bold: 'B',
+	italic: 'I',
+	strikethrough: 'S',
+	code: '</>',
+	codeBlock: '{ }',
+	heading: 'H',
+	heading1: 'H1',
+	heading2: 'H2',
+	heading3: 'H3',
+	heading4: 'H4',
+	heading5: 'H5',
+	heading6: 'H6',
+	quote: '"',
+	unorderedList: '-',
+	orderedList: '1.',
+	divider: '-',
+	image: '🖼',
+};
+
+/**
+ * Toolbar component for markdown formatting actions.
+ *
+ * Can be used in two ways:
+ * 1. With `editor` prop from `useMarkdownEditor()` (recommended)
+ * 2. With manual `activeInlineActions` + `onPressAction` props
+ */
+export default function MarkdownToolbar({
+	editor,
+	features: featuresProp = DEFAULT_MARKDOWN_FEATURES,
+	activeInlineActions: activeInlineActionsProp,
+	onPressAction: onPressActionProp,
+	style,
+	buttonStyle,
+	buttonTextStyle,
+	activeButtonStyle,
+	activeButtonTextStyle,
+	inactiveButtonStyle,
+	inactiveButtonTextStyle,
+	renderButton,
+}: MarkdownToolbarProps) {
+	const features = editor?.features ?? featuresProp;
+	const activeInlineActions = editor?.activeInlineActions ?? activeInlineActionsProp ?? [];
+	const onPressAction = editor?.handleToolbarAction ?? onPressActionProp;
+
+	return (
+		<View style={[styles.container, style]}>
+			{features.map((action) => {
+				const isImageActive = action === 'image' && editor?.activeImageInfo != null;
+				const isActive = isImageActive || (isInlineAction(action) && activeInlineActions.includes(action));
+				const label = ACTION_LABELS[action];
+				const onPress = () => {
+					if (isImageActive) {
+						editor?.openImageInfo();
+					} else {
+						onPressAction?.(action);
+					}
+				};
+
+				if (renderButton) {
+					return (
+						<React.Fragment key={action}>
+							{renderButton({
+								action,
+								label,
+								active: isActive,
+								onPress,
+							})}
+						</React.Fragment>
+					);
+				}
+
+				const btnState: MarkdownToolbarButtonState = { action, active: isActive };
+				const resolvedButtonStyle = typeof buttonStyle === 'function' ? buttonStyle(btnState) : buttonStyle;
+				const resolvedButtonTextStyle = typeof buttonTextStyle === 'function' ? buttonTextStyle(btnState) : buttonTextStyle;
+
+				const stateButtonStyle = isActive ? [styles.buttonActive, activeButtonStyle] : inactiveButtonStyle;
+				const stateButtonTextStyle = isActive ? [styles.buttonTextActive, activeButtonTextStyle] : inactiveButtonTextStyle;
+
+				return (
+					<Pressable key={action} onPress={onPress} style={[styles.button, resolvedButtonStyle, stateButtonStyle]}>
+						<Text style={[styles.buttonText, resolvedButtonTextStyle, stateButtonTextStyle]}>{label}</Text>
+					</Pressable>
+				);
+			})}
+		</View>
+	);
+}
+
+function isInlineAction(action: MarkdownToolbarAction): action is MarkdownInlineToolbarAction {
+	return action === 'bold' || action === 'italic' || action === 'strikethrough' || action === 'code';
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: 8,
+		marginBottom: 12,
+	},
+	button: {
+		borderWidth: 1,
+		borderColor: '#c0c0c0',
+		borderRadius: 8,
+		paddingVertical: 6,
+		paddingHorizontal: 10,
+		backgroundColor: '#fff',
+	},
+	buttonActive: {
+		backgroundColor: '#2d5eff',
+		borderColor: '#2d5eff',
+	},
+	buttonText: {
+		color: '#2d2d2d',
+		fontWeight: '600',
+	},
+	buttonTextActive: {
+		color: '#fff',
+	},
+});

package/src/index.ts

@@ -0,0 +1,31 @@
+export { default as MarkdownRenderer } from './MarkdownRenderer';
+export { default as MarkdownTextInput } from './MarkdownTextInput';
+export { default as MarkdownToolbar } from './MarkdownToolbar';
+export { useMarkdownEditor } from './useMarkdownEditor';
+export { parseMarkdown, parseMarkdownInline } from './markdownParser';
+export { highlightMarkdown } from './markdownHighlight';
+export type { HighlightSegment, HighlightSegmentType } from './markdownHighlight';
+export {
+	DefaultSegment,
+	DefaultBoldSegment,
+	DefaultHeadingSegment,
+	DefaultItalicSegment,
+	DefaultStrikethroughSegment,
+	DefaultCodeSegment,
+	DefaultCodeBlockSegment,
+	DefaultLinkSegment,
+	DefaultLinkUrlSegment,
+	DefaultImageSegment,
+	DefaultQuoteSegment,
+	DefaultDelimiterSegment,
+	DefaultQuoteMarkerSegment,
+	DefaultListMarkerSegment,
+	DefaultHorizontalRuleSegment,
+	DEFAULT_SEGMENT_COMPONENTS,
+	getDefaultSegmentStyle,
+} from './markdownSegmentDefaults';
+export type { SegmentComponentProps, SegmentComponentMap } from './markdownSegment.types';
+export { applyMarkdownToolbarAction, DEFAULT_MARKDOWN_FEATURES } from './markdownToolbarActions';
+export { isMarkdownFeatureEnabled, isHeadingLevelEnabled } from './markdownSyntaxUtils';
+export type { MarkdownFeature } from './markdownSyntaxUtils';
+export * from './markdownCore.types';