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

package/src/markdownSegmentDefaults.tsx

@@ -0,0 +1,208 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import type { TextStyle } from 'react-native';
+
+import type { HighlightSegmentType } from './markdownHighlight.types';
+import type { SegmentComponentProps } from './markdownSegment.types';
+
+// ---------------------------------------------------------------------------
+// Default styling values
+// ---------------------------------------------------------------------------
+
+const COLOR_TEXT = '#1f1f1f';
+const COLOR_DELIMITER = '#a0a0a0';
+const COLOR_CODE = '#c7254e';
+const COLOR_CODE_BG = '#f9f2f4';
+const COLOR_LINK = '#2d5eff';
+const COLOR_LINK_URL = '#8a8a8a';
+const COLOR_IMAGE = '#2d5eff';
+const COLOR_QUOTE = '#6a737d';
+const COLOR_QUOTE_MARKER = '#a0a0a0';
+const COLOR_LIST_MARKER = '#2d5eff';
+const COLOR_HORIZONTAL_RULE = '#a0a0a0';
+
+const FONT_SIZE = 16;
+const FONT_SIZE_HEADING = Math.round(FONT_SIZE * 1.75);
+const FONT_SIZE_CODE = Math.round(FONT_SIZE * 0.875);
+const LINE_HEIGHT = computeLineHeight(FONT_SIZE);
+const LINE_HEIGHT_CODE = computeLineHeight(FONT_SIZE_CODE);
+
+function computeLineHeight(fontSize: number): number {
+	return Math.ceil(fontSize * 1.5);
+}
+
+function getHeadingFontSize(level: number): number {
+	if (level < 1 || level > 6) return FONT_SIZE;
+	const t = (level - 1) / 5;
+	return Math.round(FONT_SIZE_HEADING + t * (FONT_SIZE - FONT_SIZE_HEADING));
+}
+
+function getHeadingMetrics(meta?: Record<string, string>) {
+	const level = Number.parseInt(meta?.headingLevel ?? '1', 10);
+	const fontSize = getHeadingFontSize(Number.isNaN(level) ? 1 : level);
+	return {
+		fontSize,
+		lineHeight: computeLineHeight(fontSize),
+	};
+}
+
+export function getDefaultSegmentStyle(type: HighlightSegmentType, meta?: Record<string, string>): TextStyle {
+	const style: TextStyle = {
+		color: COLOR_TEXT,
+		fontSize: FONT_SIZE,
+		lineHeight: LINE_HEIGHT,
+		includeFontPadding: false,
+	};
+
+	switch (type) {
+		case 'delimiter':
+			style.color = COLOR_DELIMITER;
+			break;
+		case 'heading':
+			style.fontWeight = 'bold';
+			break;
+		case 'bold':
+			style.fontWeight = 'bold';
+			break;
+		case 'italic':
+			style.fontStyle = 'italic';
+			break;
+		case 'strikethrough':
+			style.textDecorationLine = 'line-through';
+			break;
+		case 'code':
+			style.color = COLOR_CODE;
+			style.backgroundColor = COLOR_CODE_BG;
+			style.fontFamily = 'Courier';
+			style.fontSize = FONT_SIZE_CODE;
+			style.lineHeight = LINE_HEIGHT_CODE;
+			break;
+		case 'codeBlock':
+			style.color = COLOR_CODE;
+			style.fontFamily = 'Courier';
+			style.fontSize = FONT_SIZE_CODE;
+			style.lineHeight = LINE_HEIGHT_CODE;
+			break;
+		case 'link':
+			style.color = COLOR_LINK;
+			break;
+		case 'linkUrl':
+			style.color = COLOR_LINK_URL;
+			break;
+		case 'image':
+			style.color = COLOR_IMAGE;
+			break;
+		case 'quote':
+			style.color = COLOR_QUOTE;
+			break;
+		case 'quoteMarker':
+			style.color = COLOR_QUOTE_MARKER;
+			break;
+		case 'listMarker':
+			style.color = COLOR_LIST_MARKER;
+			style.fontWeight = 'bold';
+			break;
+		case 'horizontalRule':
+			style.color = COLOR_HORIZONTAL_RULE;
+			style.letterSpacing = 4;
+			style.textAlign = 'center';
+			break;
+		case 'text':
+		default:
+			break;
+	}
+
+	const lineContext = meta?.lineContext;
+	if (lineContext === 'heading') {
+		const { fontSize, lineHeight } = getHeadingMetrics(meta);
+		style.fontSize = fontSize;
+		style.lineHeight = lineHeight;
+		style.fontWeight = 'bold';
+	}
+
+	if (lineContext === 'quote' && (type === 'text' || type === 'bold' || type === 'italic' || type === 'strikethrough')) {
+		style.color = COLOR_QUOTE;
+	}
+
+	if (lineContext === 'codeFence' && type === 'delimiter') {
+		style.fontSize = FONT_SIZE_CODE;
+		style.lineHeight = LINE_HEIGHT_CODE;
+	}
+
+	return style;
+}
+
+// ---------------------------------------------------------------------------
+// Default components
+// ---------------------------------------------------------------------------
+
+/** Default renderer - a plain Text with the default style for the segment type. */
+function DefaultTextSegment({ type, meta, children }: SegmentComponentProps) {
+	return <Text style={getDefaultSegmentStyle(type, meta)}>{children}</Text>;
+}
+
+export const DefaultSegment = DefaultTextSegment;
+
+/** Default bold - renders bold text. */
+export const DefaultBoldSegment = DefaultTextSegment;
+
+/** Default heading - renders heading text. */
+export const DefaultHeadingSegment = DefaultTextSegment;
+
+/** Default italic - renders italic text. */
+export const DefaultItalicSegment = DefaultTextSegment;
+
+/** Default strikethrough - renders strikethrough text. */
+export const DefaultStrikethroughSegment = DefaultTextSegment;
+
+/** Default inline code - renders code text. */
+export const DefaultCodeSegment = DefaultTextSegment;
+
+/** Default code block - renders code block content. */
+export const DefaultCodeBlockSegment = DefaultTextSegment;
+
+/** Default link label - renders link text. */
+export const DefaultLinkSegment = DefaultTextSegment;
+
+/** Default link URL - renders link URL text. */
+export const DefaultLinkUrlSegment = DefaultTextSegment;
+
+/** Default image - renders image markdown text. */
+export const DefaultImageSegment = DefaultTextSegment;
+
+/** Default blockquote - renders quote text. */
+export const DefaultQuoteSegment = DefaultTextSegment;
+
+/** Default quote marker - renders the > character. */
+export const DefaultQuoteMarkerSegment = DefaultTextSegment;
+
+/** Default delimiter - renders markdown syntax characters. */
+export const DefaultDelimiterSegment = DefaultTextSegment;
+
+/** Default list marker - renders list bullet/number. */
+export const DefaultListMarkerSegment = DefaultTextSegment;
+
+/** Default horizontal rule - renders the rule markers (---, ***, ___). */
+export const DefaultHorizontalRuleSegment = DefaultTextSegment;
+
+/**
+ * Complete map of default segment components.
+ * Used as fallback when no custom component is provided for a type.
+ */
+export const DEFAULT_SEGMENT_COMPONENTS: Record<HighlightSegmentType, React.ComponentType<SegmentComponentProps>> = {
+	text: DefaultSegment,
+	delimiter: DefaultDelimiterSegment,
+	heading: DefaultHeadingSegment,
+	bold: DefaultBoldSegment,
+	italic: DefaultItalicSegment,
+	strikethrough: DefaultStrikethroughSegment,
+	code: DefaultCodeSegment,
+	codeBlock: DefaultCodeBlockSegment,
+	link: DefaultLinkSegment,
+	linkUrl: DefaultLinkUrlSegment,
+	image: DefaultImageSegment,
+	quote: DefaultQuoteSegment,
+	quoteMarker: DefaultQuoteMarkerSegment,
+	listMarker: DefaultListMarkerSegment,
+	horizontalRule: DefaultHorizontalRuleSegment,
+};

package/src/markdownSyntaxUtils.ts

@@ -0,0 +1,139 @@
+/**
+ * Low-level helpers shared by the markdown parser and the syntax highlighter.
+ *
+ * These utilities deal with escape sequences, token scanning, and
+ * image-source extraction — concerns common to both modules.
+ */
+
+import type { MarkdownToolbarAction } from './markdownCore.types';
+
+/** Matches a backslash followed by a markdown-special character. */
+const ESCAPED_MARKDOWN_PATTERN = /\\([\\`*_~[\]()#+.!>{}-])/g;
+
+/**
+ * Scans `input` for the first occurrence of `token` starting at `startIndex`,
+ * skipping any occurrence preceded by an odd number of backslashes.
+ *
+ * @returns The index of the token, or `-1` if not found.
+ */
+export function findUnescapedToken(input: string, token: string, startIndex: number): number {
+  if (token.length === 0) {
+    return -1;
+  }
+
+  for (let index = startIndex; index <= input.length - token.length; index += 1) {
+    if (input.slice(index, index + token.length) !== token) {
+      continue;
+    }
+    if (!isEscaped(input, index)) {
+      return index;
+    }
+  }
+
+  return -1;
+}
+
+/**
+ * Returns `true` when the character at `index` is preceded by an
+ * odd number of backslashes (i.e. it is escaped).
+ */
+export function isEscaped(value: string, index: number): boolean {
+  let backslashes = 0;
+  for (let cursor = index - 1; cursor >= 0 && value[cursor] === '\\'; cursor -= 1) {
+    backslashes += 1;
+  }
+  return backslashes % 2 === 1;
+}
+
+/**
+ * Strips markdown escape backslashes from `value`.
+ * E.g. `"\\*hello\\*"` → `"*hello*"`.
+ */
+export function unescapeMarkdown(value: string): string {
+  return value.replace(ESCAPED_MARKDOWN_PATTERN, '$1');
+}
+
+/**
+ * Parses the raw content inside `(…)` of an image markdown.
+ *
+ * Supports:
+ * - `url` → `{ src: "url" }`
+ * - `url "title"` or `url 'title'` → `{ src: "url", title: "title" }`
+ *
+ * @param raw - The string between the parentheses.
+ * @param options.unescapeSrc - Whether to unescape the source URL (default `true`).
+ */
+export function parseImageSourceAndTitle(
+  raw: string,
+  options: { unescapeSrc?: boolean } = {}
+): { src: string; title?: string } {
+  const { unescapeSrc = true } = options;
+  const normalizeSrc = (value: string) => (unescapeSrc ? unescapeMarkdown(value) : value);
+  const trimmed = raw.trim();
+  const titleMatch = trimmed.match(/^(.+?)\s+(?:"([^"]*)"|'([^']*)')$/);
+
+  if (titleMatch) {
+    return {
+      src: normalizeSrc(titleMatch[1].trim()),
+      title: titleMatch[2] ?? titleMatch[3],
+    };
+  }
+
+  return { src: normalizeSrc(trimmed) };
+}
+
+/**
+ * Checks whether a markdown feature is enabled based on the provided features list.
+ * If `features` is `undefined`, all features are considered enabled (backward compatible).
+ *
+ * Heading features (`heading`, `heading1`–`heading6`) are grouped: if any heading
+ * feature is present the `'heading'` feature is considered enabled.
+ */
+export type MarkdownFeature =
+  | 'bold'
+  | 'italic'
+  | 'strikethrough'
+  | 'code'
+  | 'codeBlock'
+  | 'heading'
+  | 'quote'
+  | 'unorderedList'
+  | 'orderedList'
+  | 'divider'
+  | 'image';
+
+export function isMarkdownFeatureEnabled(
+  features: MarkdownToolbarAction[] | undefined,
+  feature: MarkdownFeature,
+): boolean {
+  if (!features) return true;
+  if (feature === 'heading') {
+    return features.some(
+      (a) =>
+        a === 'heading' ||
+        a === 'heading1' ||
+        a === 'heading2' ||
+        a === 'heading3' ||
+        a === 'heading4' ||
+        a === 'heading5' ||
+        a === 'heading6',
+    );
+  }
+  return features.includes(feature as MarkdownToolbarAction);
+}
+
+/**
+ * Checks whether a specific heading level is enabled.
+ *
+ * - If `features` is `undefined` → all levels enabled.
+ * - If `features` contains `'heading'` (generic) → all levels enabled.
+ * - Otherwise only the explicitly listed levels (`'heading1'`…`'heading6'`) are enabled.
+ */
+export function isHeadingLevelEnabled(
+  features: MarkdownToolbarAction[] | undefined,
+  level: number,
+): boolean {
+  if (!features) return true;
+  if (features.includes('heading')) return true;
+  return features.includes(`heading${level}` as MarkdownToolbarAction);
+}

package/src/markdownToolbarActions.ts

@@ -0,0 +1,296 @@
+import type {
+  MarkdownInlineToolbarAction,
+  MarkdownSelection,
+  MarkdownToolbarAction,
+  MarkdownToolbarActionResult,
+} from './markdownCore.types';
+
+export const DEFAULT_MARKDOWN_FEATURES: MarkdownToolbarAction[] = [
+  'bold',
+  'italic',
+  'strikethrough',
+  'code',
+  'codeBlock',
+  'heading1',
+  'heading2',
+  'heading3',
+  'heading4',
+  'heading5',
+  'heading6',
+  'quote',
+  'unorderedList',
+  'orderedList',
+  'divider',
+  'image',
+];
+
+const INLINE_ACTION_MARKERS: Record<MarkdownInlineToolbarAction, { open: string; close: string }> = {
+  bold: { open: '**', close: '**' },
+  italic: { open: '_', close: '_' },
+  strikethrough: { open: '~~', close: '~~' },
+  code: { open: '`', close: '`' },
+};
+
+/** Parameters accepted by {@link applyMarkdownToolbarAction}. */
+type ApplyMarkdownToolbarActionParams = {
+  action: MarkdownToolbarAction;
+  text: string;
+  selection: MarkdownSelection;
+  activeInlineActions?: MarkdownInlineToolbarAction[];
+};
+
+export function applyMarkdownToolbarAction({
+  action,
+  text,
+  selection,
+  activeInlineActions = [],
+}: ApplyMarkdownToolbarActionParams): MarkdownToolbarActionResult {
+  if (action === 'image') {
+    return applyImageAction({ text, selection, activeInlineActions });
+  }
+
+  if (isInlineToolbarAction(action)) {
+    return applyInlineAction({
+      action,
+      text,
+      selection,
+      activeInlineActions,
+    });
+  }
+
+  return applyBlockAction({
+    action,
+    text,
+    selection,
+    activeInlineActions,
+  });
+}
+
+/**
+ * Wraps or unwraps the selected text (or inserts markers at cursor)
+ * for an inline formatting action (bold, italic, strikethrough, code).
+ */
+function applyInlineAction({
+  action,
+  text,
+  selection,
+  activeInlineActions,
+}: {
+  action: MarkdownInlineToolbarAction;
+  text: string;
+  selection: MarkdownSelection;
+  activeInlineActions: MarkdownInlineToolbarAction[];
+}): MarkdownToolbarActionResult {
+  const marker = INLINE_ACTION_MARKERS[action];
+  if (!marker) {
+    return {
+      text,
+      selection,
+      activeInlineActions,
+    };
+  }
+
+  if (selection.start !== selection.end) {
+    const selectedText = text.slice(selection.start, selection.end);
+    const nextText = `${text.slice(0, selection.start)}${marker.open}${selectedText}${marker.close}${text.slice(selection.end)}`;
+    const markerSize = marker.open.length;
+
+    return {
+      text: nextText,
+      selection: {
+        start: selection.start + markerSize,
+        end: selection.end + markerSize,
+      },
+      activeInlineActions: activeInlineActions.filter((value) => value !== action),
+    };
+  }
+
+  const cursor = selection.start;
+  const isActive = activeInlineActions.includes(action);
+  const nextMarker = isActive ? marker.close : marker.open;
+  const nextText = `${text.slice(0, cursor)}${nextMarker}${text.slice(cursor)}`;
+  const nextSelection = {
+    start: cursor + nextMarker.length,
+    end: cursor + nextMarker.length,
+  };
+  const nextActiveInlineActions = isActive
+    ? activeInlineActions.filter((value) => value !== action)
+    : [...activeInlineActions, action];
+
+  return {
+    text: nextText,
+    selection: nextSelection,
+    activeInlineActions: nextActiveInlineActions,
+  };
+}
+
+/**
+ * Applies a block-level toolbar action (heading, quote, list, divider, code block).
+ * Identifies the lines covered by the current selection and transforms them.
+ */
+function applyBlockAction({
+  action,
+  text,
+  selection,
+  activeInlineActions,
+}: {
+  action: Exclude<MarkdownToolbarAction, MarkdownInlineToolbarAction>;
+  text: string;
+  selection: MarkdownSelection;
+  activeInlineActions: MarkdownInlineToolbarAction[];
+}): MarkdownToolbarActionResult {
+  const lineRange = getSelectedLineRange(text, selection);
+  const lines = lineRange.content.split('\n');
+  const nextLines = transformLinesByAction(action, lines);
+  const nextContent = nextLines.join('\n');
+  const nextText = `${text.slice(0, lineRange.start)}${nextContent}${text.slice(lineRange.end)}`;
+
+  if (selection.start === selection.end) {
+    const baseOffset = selection.start - lineRange.start;
+    const nextOffset = Math.max(0, Math.min(nextContent.length, baseOffset + (nextContent.length - lineRange.content.length)));
+    const cursor = lineRange.start + nextOffset;
+    return {
+      text: nextText,
+      selection: { start: cursor, end: cursor },
+      activeInlineActions,
+    };
+  }
+
+  return {
+    text: nextText,
+    selection: {
+      start: lineRange.start,
+      end: lineRange.start + nextContent.length,
+    },
+    activeInlineActions,
+  };
+}
+
+/** Dispatches per-action line transformations. */
+function transformLinesByAction(
+  action: Exclude<MarkdownToolbarAction, MarkdownInlineToolbarAction>,
+  lines: string[]
+): string[] {
+  switch (action) {
+    case 'heading':
+      return togglePrefix(lines, /^#{1,6}\s+/, () => '# ');
+    case 'heading1':
+      return setHeadingLevel(lines, 1);
+    case 'heading2':
+      return setHeadingLevel(lines, 2);
+    case 'heading3':
+      return setHeadingLevel(lines, 3);
+    case 'heading4':
+      return setHeadingLevel(lines, 4);
+    case 'heading5':
+      return setHeadingLevel(lines, 5);
+    case 'heading6':
+      return setHeadingLevel(lines, 6);
+    case 'quote':
+      return togglePrefix(lines, /^>\s?/, () => '> ');
+    case 'unorderedList':
+      return togglePrefix(lines, /^[-*+]\s+/, () => '- ');
+    case 'orderedList':
+      return togglePrefix(lines, /^\d+\.\s+/, (index) => `${index + 1}. `);
+    case 'divider':
+      return lines.every((line) => /^ {0,3}([-*_])[ \t]*(?:\1[ \t]*){2,}$/.test(line))
+        ? lines.map(() => '')
+        : lines.map(() => '---');
+    case 'codeBlock':
+      return toggleCodeBlock(lines);
+    default:
+      return lines;
+  }
+}
+
+/** Sets (or removes) a specific heading level on the given lines. */
+function setHeadingLevel(lines: string[], level: 1 | 2 | 3 | 4 | 5 | 6): string[] {
+  const prefix = `${'#'.repeat(level)} `;
+  const stripHeading = /^#{1,6}\s+/;
+  const hasSameLevel = lines.every((line) => new RegExp(`^#{${level}}\\s+`).test(line));
+  if (hasSameLevel) {
+    return lines.map((line) => line.replace(stripHeading, ''));
+  }
+  return lines.map((line) => `${prefix}${line.replace(stripHeading, '')}`);
+}
+
+/** Toggles a line prefix (e.g. `> `, `- `, `1. `) on every line. */
+function togglePrefix(
+  lines: string[],
+  stripPattern: RegExp,
+  prefixFactory: (index: number) => string
+): string[] {
+  const hasPrefix = lines.every((line) => stripPattern.test(line));
+
+  if (hasPrefix) {
+    return lines.map((line) => line.replace(stripPattern, ''));
+  }
+
+  return lines.map((line, index) => `${prefixFactory(index)}${line}`);
+}
+
+/** Wraps or unwraps lines in a fenced code block (` ``` `). */
+function toggleCodeBlock(lines: string[]): string[] {
+  const hasCodeBlockMarker = (line: string) => /^```/.test(line);
+  const isWrappedInCodeBlock =
+    lines.length >= 2 &&
+    hasCodeBlockMarker(lines[0]) &&
+    hasCodeBlockMarker(lines[lines.length - 1]);
+
+  if (isWrappedInCodeBlock) {
+    return lines.slice(1, -1);
+  }
+
+  return ['```', ...lines, '```'];
+}
+
+/**
+ * Expands the selection to cover complete lines and returns the
+ * start/end offsets together with the extracted content.
+ */
+function getSelectedLineRange(text: string, selection: MarkdownSelection): {
+  start: number;
+  end: number;
+  content: string;
+} {
+  const safeStart = Math.max(0, Math.min(selection.start, text.length));
+  const safeEnd = Math.max(0, Math.min(selection.end, text.length));
+  const start = text.lastIndexOf('\n', Math.max(safeStart - 1, 0));
+  const end = text.indexOf('\n', safeEnd);
+
+  const rangeStart = start === -1 ? 0 : start + 1;
+  const rangeEnd = end === -1 ? text.length : end;
+
+  return {
+    start: rangeStart,
+    end: rangeEnd,
+    content: text.slice(rangeStart, rangeEnd),
+  };
+}
+
+/** Type guard: returns `true` for inline formatting actions. */
+function isInlineToolbarAction(action: MarkdownToolbarAction): action is MarkdownInlineToolbarAction {
+  return action === 'bold' || action === 'italic' || action === 'strikethrough' || action === 'code';
+}
+
+/** Inserts an empty image markdown template at the current cursor position. */
+function applyImageAction({
+  text,
+  selection,
+  activeInlineActions,
+}: {
+  text: string;
+  selection: MarkdownSelection;
+  activeInlineActions: MarkdownInlineToolbarAction[];
+}): MarkdownToolbarActionResult {
+  const template = '![](url)';
+  const cursor = selection.start;
+  const nextText = `${text.slice(0, cursor)}${template}${text.slice(cursor)}`;
+  // Place cursor inside the alt text brackets: ![|](url)
+  const nextCursor = cursor + 2;
+  return {
+    text: nextText,
+    selection: { start: nextCursor, end: nextCursor },
+    activeInlineActions,
+  };
+}