Content

---

MarkdownRenderer

Parses and renders a Markdown string into themed native views. Supports headings h1–h6, bold, italic, inline code, code blocks, blockquotes, ordered/unordered lists, and hyperlinks. onLinkPress intercepts tapped links — pass Linking.openURL for default behaviour.

Prop	Type	Default	Description
content	string	—	Markdown string to render
variant?	'default' | 'compact'	'default'	'compact' reduces heading sizes and paragraph spacing
onLinkPress?	(url: string) => void	—	Called when the user taps a hyperlink
components?	Partial<MarkdownComponents>	—	Override individual element renderers (heading, code, blockquote, etc.)
accessibilityLabel?	string	—	Accessibility label for the container
testID?	string	—	Test identifier

import { MarkdownRenderer } from '@objectifthunes/limestone-sdk';
import { Linking } from 'react-native';

const md = `
# Hello

This is **bold** and *italic* text with \`inline code\`.

- Item one
- Item two
`;

<MarkdownRenderer
  content={md}
  onLinkPress={(url) => Linking.openURL(url)}
/>

---

CodeBlock

A syntax-highlighted read-only code block with optional line numbers and a copy button. Token colours derive from the active theme’s colors tokens so the block adapts automatically to light and dark modes.

Prop	Type	Default	Description
code	string	—	Source code string to display
language?	string	—	Language hint for syntax highlighting (e.g. 'typescript', 'bash')
showLineNumbers?	boolean	false	Render a gutter with line numbers
wrapLines?	boolean	false	Wrap long lines instead of scrolling horizontally
onCopy?	() => void	—	When provided, a copy icon button appears in the top-right corner
accessibilityLabel?	string	—	Accessibility label for the code container
testID?	string	—	Test identifier

import { CodeBlock } from '@objectifthunes/limestone-sdk';
import Clipboard from 'expo-clipboard';

const snippet = `const config = defineConfig({
  theme: obsidianTheme,
  api: { baseUrl: 'https://api.example.com' },
});`;

<CodeBlock
  code={snippet}
  language="typescript"
  showLineNumbers
  onCopy={() => Clipboard.setStringAsync(snippet)}
/>

---

RichTextEditor

A full-featured WYSIWYG editor with a configurable top-docked toolbar. Outputs HTML or Markdown depending on the format prop. The toolbar is fully customisable — pass a toolbar array to restrict or reorder items.

Prop	Type	Default	Description
value	string	—	Controlled editor content (HTML or Markdown)
onChange	(v: string) => void	—	Called on every content change
format?	'html' | 'markdown'	'markdown'	Output format
toolbar?	ToolbarItem[]	full set	Toolbar items to display. Possible values: 'bold', 'italic', 'underline', 'strikethrough', 'h1', 'h2', 'h3', 'ul', 'ol', 'blockquote', 'link', 'code'
placeholder?	string	—	Placeholder text shown when the editor is empty
minHeight?	number	—	Minimum editor height in points
maxHeight?	number	—	Maximum editor height before the editor scrolls internally
readOnly?	boolean	false	Disables editing and hides the toolbar
accessibilityLabel?	string	—	Accessibility label for the editor
testID?	string	—	Test identifier

ToolbarItem is a union of the string literals listed in the toolbar? description above.

import { RichTextEditor } from '@objectifthunes/limestone-sdk';
import { useState } from 'react';

function PostEditor() {
  const [body, setBody] = useState('');

  return (
    <RichTextEditor
      value={body}
      onChange={setBody}
      format="markdown"
      toolbar={['bold', 'italic', 'h1', 'h2', 'ul', 'ol', 'link']}
      placeholder="Write something…"
      minHeight={200}
    />
  );
}

---

BlockQuote

A left-border pull-quote block for highlighting excerpts, testimonials, or referenced passages. The variant prop maps to semantic theme colour tokens and the optional attribution line renders as muted smaller text beneath the content.

Prop	Type	Default	Description
children	React.ReactNode	—	Quote content
attribution?	string	—	Source or author rendered below the quote
variant?	'default' | 'accent' | 'warning' | 'destructive'	'default'	Controls the left border colour (border / accent / warning / destructive token)
size?	SpacingProp	'md'	Inner padding
borderWidth?	number	3	Width of the left border in points
accessibilityLabel?	string	—	Accessibility label for the blockquote container
testID?	string	—	Test identifier

import { BlockQuote, Text } from '@objectifthunes/limestone-sdk';

<BlockQuote attribution="— Alan Kay" variant="accent">
  <Text>
    The best way to predict the future is to invent it.
  </Text>
</BlockQuote>

---

Callout

A themed notice block with a left-edge colour bar, an optional icon, an optional title, and arbitrary body content. Each variant maps to a semantic background and icon colour from the active theme. When dismissible is true a close button appears in the top-right corner and triggers onDismiss.

Prop	Type	Default	Description
children	React.ReactNode	—	Callout body content
variant	'info' | 'success' | 'warning' | 'error' | 'tip' | 'note'	'info'	Controls the colour scheme and default icon
title?	string	—	Bold title text rendered above the body
icon?	string	—	Icon name from the registered icon set; overrides the default variant icon
dismissible?	boolean	false	Show a close button in the top-right corner
onDismiss?	() => void	—	Called when the close button is pressed
size?	SpacingProp	'md'	Inner padding
accessibilityLabel?	string	—	Accessibility label for the callout container
testID?	string	—	Test identifier

import { Callout, Text } from '@objectifthunes/limestone-sdk';
import { useState } from 'react';

function InstallGuide() {
  const [dismissed, setDismissed] = useState(false);

  if (dismissed) return null;

  return (
    <Callout
      variant="tip"
      title="Pro tip"
      dismissible
      onDismiss={() => setDismissed(true)}
    >
      <Text>Run `pnpm install` before starting the dev server.</Text>
    </Callout>
  );
}