react-native-richify 1.0.6 → 1.0.7

package/README.md

@@ -1,6 +1,6 @@
 # react-native-richify
 
-A rich text input for React Native with a normal `TextInput` editing surface, a built-in formatting toolbar, and live Markdown or HTML output.
+A React Native rich text input with a normal `TextInput` editing surface, a horizontally scrollable toolbar, and live Markdown or HTML output below the editor.
 
 [![npm version](https://img.shields.io/npm/v/react-native-richify.svg)](https://www.npmjs.com/package/react-native-richify)
 [![license](https://img.shields.io/npm/l/react-native-richify.svg)](https://github.com/soumya-99/react-native-richify/blob/main/LICENSE)
@@ -8,25 +8,39 @@ A rich text input for React Native with a normal `TextInput` editing surface, a
 ## Features
 
 - Native editing with no WebView
-- Rich inline formatting: bold, italic, underline, strikethrough, code
-- Line-level formatting: H1, H2, H3, bullet list, ordered list, left/center/right alignment
-- Link support on selected text
-- Live output panel with Markdown or HTML serialization
-- Raw output view or rendered preview view
-- Auto-growing input with configurable input and preview heights
-- Custom toolbar items, custom toolbar rendering, and theme overrides
-- JSON import/export through typed segment data
+- Built-in toolbar uses Lucide React Native icons by default
+- Inline formatting: bold, italic, underline, strikethrough, code
+- Line formatting: H1, H2, H3, bullet list, ordered list, left, center, right
+- Link formatting on selected text
+- Image insertion through the built-in toolbar
+- Output panel can show Markdown or HTML
+- Output panel can show raw serialized text or rendered preview
+- Auto-growing editor with configurable input and preview height limits
+- Custom toolbar items accept text, emoji, or React elements
 - Headless `useRichText` hook for fully custom editors
+- Typed JSON import and export of editor content
 
 ## Installation
 
+Install the package and `react-native-svg`:
+
 ```bash
-npm install react-native-richify
-# or
-yarn add react-native-richify
+npm install react-native-richify react-native-svg
 ```
 
-No native modules are required. The package works in Expo and bare React Native apps.
+or:
+
+```bash
+yarn add react-native-richify react-native-svg
+```
+
+`react-native-svg` is required because the built-in toolbar uses Lucide icons. If you want to use Lucide icons in your own custom toolbar items, install that in your app too:
+
+```bash
+npm install lucide-react-native
+```
+
+The package works in Expo and bare React Native apps. In Expo, `react-native-svg` is usually already available.
 
 ## Quick Start
 
@@ -43,10 +57,11 @@ export default function App() {
         showToolbar
         showOutputPreview
         defaultOutputFormat="markdown"
+        defaultOutputPreviewMode="rendered"
         onChangeText={(text) => console.log('Plain text:', text)}
-        onChangeOutput={(output, format) =>
-          console.log(`Serialized ${format}:`, output)
-        }
+        onChangeOutput={(output, format) => {
+          console.log(format, output);
+        }}
       />
     </View>
   );
@@ -56,137 +71,139 @@ export default function App() {
 This gives you:
 
 - a visible auto-growing `TextInput`
-- a horizontally scrollable toolbar
-- a collapsible output panel that opens when content exists
-- Markdown output by default, with HTML and rendered preview toggles in the toolbar
+- the default Lucide-based toolbar
+- live Markdown output by default
+- a preview panel that opens below the input when content exists
 
-## How Editing Works
+## How The Editor Works
 
-The editor stores content as `StyledSegment[]`, not HTML strings. The plain text you type is always the source of truth for editing, and formatting metadata is applied to matching text ranges or lines.
+The editing surface is always a normal `TextInput`. The library does not render styled text on top of the input.
+
+Internally, content is stored as `StyledSegment[]`. Each segment contains plain text and formatting metadata. That lets the library:
+
+- keep typing behavior predictable
+- apply formatting to selected ranges or future input
+- serialize the same content to Markdown or HTML
+- export and re-import structured JSON safely
 
 Formatting rules:
 
-- If no text is selected, pressing a style button affects the next characters you type.
-- If text is selected, pressing a style button formats the selected range immediately.
-- Headings, lists, and alignment are line-level controls.
-- Every formatting button is toggleable except the output controls: `MD`, `HTML`, `Raw`, and `View`.
+- If nothing is selected, pressing a format button affects the next characters you type.
+- If text is selected, pressing a format button applies or removes that format immediately.
+- Heading, list, and alignment controls work at line level.
+- Every formatting button is toggleable except `MD`, `HTML`, `Raw`, and `View`.
 
 ## Built-in Toolbar
 
-The default toolbar includes these controls:
+The default toolbar is horizontally scrollable and ships with these controls:
 
-| Button | Purpose |
+| Control | Behavior |
 | --- | --- |
-| `B` | Toggle bold |
-| `I` | Toggle italic |
-| `U` | Toggle underline |
-| `S` | Toggle strikethrough |
-| `<>` | Toggle inline code |
-| `H1`, `H2`, `H3` | Toggle heading level on the current line |
-| `•≡` | Toggle bullet list on the current line |
-| `1≡` | Toggle ordered list on the current line |
-| `🔗` | Apply or clear a hyperlink on the current selection |
-| `⇤`, `↔`, `⇥` | Toggle left, center, or right alignment on the current line |
-| `MD`, `HTML` | Switch serialized output format |
-| `Raw`, `View` | Switch between literal serialized output and rendered preview |
+| Bold, Italic, Underline, Strikethrough, Code | Toggle inline formatting |
+| Heading 1, Heading 2, Heading 3 | Toggle heading level on the current line |
+| Bullet List, Ordered List | Toggle list type on the current line |
+| Link | Apply or clear a hyperlink on the selection |
+| Image | Insert an image through your app's image-picking flow |
+| Align Left, Align Center, Align Right | Toggle paragraph alignment |
+| MD, HTML | Switch serialization format |
+| Raw, View | Switch between literal output and rendered preview |
 
 Notes:
 
-- Pressing the active heading again removes that heading.
-- Pressing the active list or alignment button again clears it.
-- The toolbar is horizontally scrollable by default.
-- Image insertion is not part of the built-in toolbar right now.
+- Pressing an active heading button again clears that heading.
+- Pressing an active list or alignment button again clears it.
+- Link clears when the current selection already has a link.
+- Image is a callback-driven action. Your app decides how the URI is chosen.
 
 ## Output Panel
 
-The panel below the input can show either:
+The preview panel below the editor is optional and controlled by `showOutputPreview`.
+
+It supports two output formats:
 
-- literal serialized output (`Raw`)
-- rendered rich output (`View`)
+- `markdown`
+- `html`
 
-It can serialize as either:
+It also supports two display modes:
 
-- Markdown
-- HTML
+- `literal`: show the raw Markdown or HTML text
+- `rendered`: render the rich output visually
 
 Useful props:
 
-| Prop | Description |
+| Prop | Purpose |
 | --- | --- |
-| `showOutputPreview` | Show or hide the output panel entirely |
-| `outputFormat` | Controlled output format |
-| `defaultOutputFormat` | Initial output format for uncontrolled usage |
-| `outputPreviewMode` | Controlled preview mode: `'literal'` or `'rendered'` |
-| `defaultOutputPreviewMode` | Initial preview mode for uncontrolled usage |
-| `maxOutputHeight` | Max height of the output panel before it scrolls |
-| `onChangeOutput` | Called whenever serialized output changes |
-| `onChangeOutputFormat` | Called when toolbar output format changes |
+| `outputFormat` | Controlled Markdown or HTML mode |
+| `defaultOutputFormat` | Initial format for uncontrolled usage |
+| `outputPreviewMode` | Controlled raw or rendered mode |
+| `defaultOutputPreviewMode` | Initial preview mode |
+| `maxOutputHeight` | Max preview height before the panel scrolls |
+| `onChangeOutput` | Receives the serialized output on every change |
+| `onChangeOutputFormat` | Called when toolbar format changes |
 | `onChangeOutputPreviewMode` | Called when toolbar preview mode changes |
 
-Example:
-
-```tsx
-import React, { useState } from 'react';
-import { RichTextInput, type OutputFormat } from 'react-native-richify';
-
-export function ControlledOutputEditor() {
-  const [format, setFormat] = useState<OutputFormat>('html');
-
-  return (
-    <RichTextInput
-      outputFormat={format}
-      onChangeOutputFormat={setFormat}
-      defaultOutputPreviewMode="rendered"
-      maxOutputHeight={220}
-      onChangeOutput={(output) => {
-        console.log(output);
-      }}
-    />
-  );
-}
-```
-
 ## Links
 
 Link formatting is selection-based. Select text, then press the link button.
 
-There are two ways to use it:
+You have two common approaches:
 
-1. Provide `onRequestLink` and show your own prompt, sheet, or modal.
-2. Rely on the built-in fallback, which only auto-links when the selected text already looks like a URL, domain, or email address.
-
-Custom link flow:
+1. Provide `onRequestLink` and open your own prompt, modal, or bottom sheet.
+2. Use the built-in fallback, which auto-links only when the selected text already looks like a URL, domain, or email address.
 
 ```tsx
 <RichTextInput
   onRequestLink={({ selectedText, currentUrl, applyLink }) => {
-    console.log('Selected:', selectedText);
-    console.log('Existing URL:', currentUrl);
-
-    // Replace this with your own modal, bottom sheet, or form.
+    console.log(selectedText, currentUrl);
     applyLink('https://example.com');
   }}
 />
 ```
 
-If the selection already has a link, pressing the link button clears it.
+If the current selection already contains a link, pressing the button clears it.
 
-## Sizing and TextInput Behavior
+## Images
 
-`RichTextInput` uses a normal visible `TextInput`.
+The built-in toolbar includes an image button. It does not open the device picker itself. Instead, it calls `onRequestImage`, and your app decides how to produce the final image URI.
 
-- `minHeight` controls the minimum editor height.
-- `maxHeight` limits the editor height before the input itself scrolls.
-- `maxOutputHeight` limits the output panel height before the preview scrolls.
-- `textInputProps` lets you pass through additional native `TextInput` props.
+```tsx
+<RichTextInput
+  onRequestImage={async ({ insertImage }) => {
+    const result = await pickImageFromYourApp();
+    if (!result?.uri) {
+      return;
+    }
+
+    insertImage(result.uri, {
+      alt: result.fileName ?? 'Selected image',
+      placeholder: '[image]',
+    });
+  }}
+/>
+```
 
-Example:
+Behavior notes:
+
+- The editor inserts a plain text placeholder into the input so typing remains stable.
+- The segment also stores `imageSrc` and optional `imageAlt` metadata.
+- `Raw` mode shows Markdown or HTML image output.
+- `View` mode renders the image in the output panel.
+- If you do not provide `onRequestImage`, the fallback only works when the selected text already looks like an image URL such as `https://site.com/photo.png`.
+
+## Sizing And Input Behavior
+
+`RichTextInput` grows with the text by default.
+
+- `minHeight` sets the minimum input height.
+- `maxHeight` limits the input height before the `TextInput` itself scrolls.
+- `maxOutputHeight` limits the preview panel height before it scrolls.
+- `textInputProps` passes additional native `TextInput` props through to the editor.
 
 ```tsx
 <RichTextInput
   minHeight={140}
   maxHeight={280}
-  maxOutputHeight={200}
+  maxOutputHeight={220}
   textInputProps={{
     autoCapitalize: 'sentences',
     keyboardType: 'default',
@@ -194,89 +211,69 @@ Example:
 />
 ```
 
-## API Overview
-
-### `<RichTextInput />`
-
-Most common props:
-
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `initialSegments` | `StyledSegment[]` | empty content | Initial document value |
-| `onChangeSegments` | `(segments) => void` | - | Called with the rich document model |
-| `onChangeText` | `(text) => void` | - | Called with plain text |
-| `placeholder` | `string` | `"Start typing..."` | Placeholder text |
-| `showToolbar` | `boolean` | `true` | Show the built-in toolbar |
-| `toolbarPosition` | `'top' \| 'bottom'` | `'top'` | Place toolbar above or below the editor |
-| `toolbarItems` | `ToolbarItem[]` | default items | Replace the built-in toolbar item list |
-| `theme` | `RichTextTheme` | default theme | Visual overrides |
-| `showOutputPreview` | `boolean` | `true` | Enable the output panel |
-| `multiline` | `boolean` | `true` | Standard `TextInput` multiline editing |
-| `minHeight` | `number` | `120` | Minimum editor height |
-| `maxHeight` | `number` | - | Maximum editor height before scrolling |
-| `autoFocus` | `boolean` | `false` | Focus input on mount |
-| `textInputProps` | `TextInputProps` subset | - | Additional native input props |
-| `renderToolbar` | `(props) => ReactElement` | - | Render a completely custom toolbar |
-| `onReady` | `(actions) => void` | - | Access editor actions outside the toolbar |
-
-### Actions from `onReady` or `useRichText`
-
-| Action | Description |
-| --- | --- |
-| `toggleFormat(format)` | Toggle `bold`, `italic`, `underline`, `strikethrough`, or `code` |
-| `setHeading(level)` | Toggle `h1`, `h2`, `h3`, or clear with `none` |
-| `setListType(type)` | Toggle `bullet`, `ordered`, or clear with `none` |
-| `setTextAlign(align)` | Toggle `left`, `center`, or `right` alignment |
-| `setLink(url?)` | Apply or clear hyperlink formatting |
-| `setColor(color)` | Set text color |
-| `setBackgroundColor(color)` | Set highlight color |
-| `setFontSize(size)` | Set font size |
-| `handleTextChange(text)` | Sync plain text input changes |
-| `handleSelectionChange(selection)` | Sync `TextInput` selection changes |
-| `isFormatActive(format)` | Check active state for inline formats |
-| `getSelectionStyle()` | Read the common style for the current selection |
-| `getOutput(format?)` | Serialize current content as Markdown or HTML |
-| `getPlainText()` | Get plain text only |
-| `exportJSON()` | Export the current segment array |
-| `importJSON(segments)` | Replace content from a saved segment array |
-| `clear()` | Reset the editor |
-
-## Custom Toolbar
-
-Use `toolbarItems` when you only want to replace the built-in buttons, or `renderToolbar` when you want full control.
-
-### `toolbarItems`
+## Customizing The Toolbar
 
-Supported built-in item fields:
+Use `toolbarItems` when you want to keep the built-in toolbar behavior but replace some or all buttons.
 
-- `format`
-- `heading`
-- `listType`
-- `textAlign`
-- `outputFormat`
-- `outputPreviewMode`
-- `actionType: 'link'`
-- `onPress`
-- `renderButton`
+`ToolbarItem.label` accepts any React node, so you can use:
+
+- plain text such as `'B'`
+- emoji content
+- a Lucide icon such as `<Bold />`
+- any custom React element
+
+When the label is not plain text, set `accessibilityLabel` so screen readers and tests can identify the button correctly.
 
 Example:
 
 ```tsx
+import React from 'react';
+import { Bold, ImagePlus, List } from 'lucide-react-native';
+import { RichTextInput } from 'react-native-richify';
+
 <RichTextInput
   toolbarItems={[
-    { id: 'bold', label: 'B', format: 'bold' },
-    { id: 'h1', label: 'H1', heading: 'h1' },
-    { id: 'bullet', label: '•≡', listType: 'bullet' },
-    { id: 'center', label: '↔', textAlign: 'center' },
+    {
+      id: 'bold',
+      label: <Bold />,
+      accessibilityLabel: 'Bold',
+      format: 'bold',
+    },
+    {
+      id: 'note',
+      label: 'Note',
+      onPress: () => console.log('Custom action'),
+    },
+    {
+      id: 'bullet',
+      label: <List />,
+      accessibilityLabel: 'Bullet list',
+      listType: 'bullet',
+    },
+    {
+      id: 'image',
+      label: <ImagePlus />,
+      accessibilityLabel: 'Insert image',
+      actionType: 'image',
+    },
     { id: 'html', label: 'HTML', outputFormat: 'html' },
-    { id: 'link', label: '🔗', actionType: 'link' },
   ]}
 />
 ```
 
-### `renderToolbar`
+Supported built-in item fields:
+
+- `format`
+- `heading`
+- `listType`
+- `textAlign`
+- `outputFormat`
+- `outputPreviewMode`
+- `actionType: 'link' | 'image'`
+- `onPress`
+- `renderButton`
 
-Use `renderToolbar` if you need a custom layout or your own button components.
+If you need a completely custom layout, use `renderToolbar`:
 
 ```tsx
 <RichTextInput
@@ -286,10 +283,12 @@ Use `renderToolbar` if you need a custom layout or your own button components.
     outputPreviewMode,
     onOutputFormatChange,
     onOutputPreviewModeChange,
+    onRequestImage,
   }) => (
     <>
       <MyButton onPress={() => actions.toggleFormat('bold')} label="Bold" />
       <MyButton onPress={() => actions.setHeading('h2')} label="Heading" />
+      <MyButton onPress={onRequestImage} label="Image" />
       <MyButton
         onPress={() => onOutputFormatChange('html')}
         label={outputFormat === 'html' ? 'HTML on' : 'HTML'}
@@ -305,7 +304,7 @@ Use `renderToolbar` if you need a custom layout or your own button components.
 
 ## Theming
 
-The theme object lets you style the editor container, input, toolbar, output panel, and button states.
+Use the `theme` prop to override container, toolbar, input, and output styles.
 
 ```tsx
 <RichTextInput
@@ -326,48 +325,42 @@ The theme object lets you style the editor container, input, toolbar, output pan
       borderColor: '#CBD5E1',
     },
     outputContainerStyle: {
-      marginHorizontal: 12,
-      marginBottom: 12,
+      margin: 12,
       padding: 12,
       borderRadius: 12,
       backgroundColor: '#F8FAFC',
     },
-    toolbarButtonActiveStyle: {
-      backgroundColor: '#CCFBF1',
-    },
   }}
 />
 ```
 
-Useful theme keys:
+Common theme keys:
 
 - `containerStyle`
 - `inputStyle`
 - `baseTextStyle`
-- `outputContainerStyle`
-- `outputLabelStyle`
-- `outputTextStyle`
-- `renderedOutputStyle`
 - `toolbarStyle`
 - `toolbarButtonStyle`
 - `toolbarButtonActiveStyle`
 - `toolbarButtonTextStyle`
 - `toolbarButtonActiveTextStyle`
+- `outputContainerStyle`
+- `outputLabelStyle`
+- `outputTextStyle`
+- `renderedOutputStyle`
 - `codeStyle`
-- `colors.primary`
-- `colors.link`
 
-## Headless Hook
+## Headless Usage
 
-Use `useRichText` when you want to build your own editor UI.
+Use `useRichText` when you want to build your own editor shell instead of using `<RichTextInput />`.
 
 ```tsx
 import React from 'react';
-import { TextInput, View, Button } from 'react-native';
+import { Button, TextInput, View } from 'react-native';
 import { useRichText } from 'react-native-richify';
 
 export function HeadlessEditor() {
-  const { state, actions } = useRichText({
+  const { actions } = useRichText({
     onChangeText: (text) => console.log(text),
   });
 
@@ -389,58 +382,9 @@ export function HeadlessEditor() {
 }
 ```
 
-## Context API
+## Data Model And Serialization
 
-`RichTextProvider` and `useRichTextContext()` are for custom UIs built on the hook.
-
-Important: the shipped `<RichTextInput />` manages its own state. Wrapping it in `RichTextProvider` does not automatically bind it to external context state.
-
-Use context when you want to split a custom editor into multiple components:
-
-```tsx
-import React from 'react';
-import { Button, TextInput, View } from 'react-native';
-import {
-  RichTextProvider,
-  useRichTextContext,
-} from 'react-native-richify';
-
-function ToolbarRow() {
-  const { actions } = useRichTextContext();
-  return <Button title="Italic" onPress={() => actions.toggleFormat('italic')} />;
-}
-
-function EditorField() {
-  const { actions } = useRichTextContext();
-
-  return (
-    <TextInput
-      multiline
-      value={actions.getPlainText()}
-      onChangeText={actions.handleTextChange}
-      onSelectionChange={(event) =>
-        actions.handleSelectionChange(event.nativeEvent.selection)
-      }
-      style={{ minHeight: 120, borderWidth: 1, padding: 12 }}
-    />
-  );
-}
-
-export function SplitEditor() {
-  return (
-    <RichTextProvider>
-      <View>
-        <ToolbarRow />
-        <EditorField />
-      </View>
-    </RichTextProvider>
-  );
-}
-```
-
-## Data Model
-
-Content is stored as segments:
+The editor stores content as typed segments:
 
 ```ts
 type StyledSegment = {
@@ -458,36 +402,23 @@ type StyledSegment = {
     listType?: 'bullet' | 'ordered' | 'none';
     textAlign?: 'left' | 'center' | 'right';
     link?: string;
+    imageSrc?: string;
+    imageAlt?: string;
   };
 };
 ```
 
-This makes it easy to:
-
-- store and restore content with `exportJSON()` and `importJSON()`
-- inspect formatting state in your own UI
-- serialize on demand to Markdown or HTML
-
-Example:
-
-```tsx
-const saved = actions.exportJSON();
-actions.importJSON(saved);
-
-const markdown = actions.getOutput('markdown');
-const html = actions.getOutput('html');
-```
-
-## Current Scope
-
-Stable built-in features documented above are the recommended way to use the library.
+That makes it straightforward to:
 
-- Rich text formatting, headings, lists, links, alignment, theming, and output serialization are supported.
-- The built-in toolbar does not currently expose image insertion.
+- save content with `exportJSON()`
+- restore content with `importJSON()`
+- read plain text with `getPlainText()`
+- generate Markdown with `getOutput('markdown')`
+- generate HTML with `getOutput('html')`
 
 ## Contributing
 
-See [AGENTS.md](AGENTS.md) for contributor notes and repository workflow guidance.
+See [AGENTS.md](AGENTS.md) for contributor workflow notes.
 
 ## License
 

package/lib/commonjs/components/Toolbar.js

@@ -96,6 +96,7 @@ const Toolbar = exports.Toolbar = /*#__PURE__*/_react.default.memo(({
       contentContainerStyle: styles.scrollContent,
       children: enrichedItems.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {
         label: item.label,
+        accessibilityLabel: item.accessibilityLabel,
         active: !!item.active,
         theme: resolvedTheme,
         renderButton: item.renderButton,

package/lib/commonjs/components/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_defaultStyles","_ToolbarButton","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Toolbar","exports","React","memo","actions","state","items","theme","visible","outputFormat","outputPreviewMode","onOutputFormatChange","onOutputPreviewModeChange","onRequestLink","onRequestImage","renderToolbar","resolvedTheme","DEFAULT_THEME","toolbarItems","DEFAULT_TOOLBAR_ITEMS","enrichedItems","useMemo","selectionStyle","getSelectionStyle","map","item","isActive","format","isFormatActive","heading","listType","textAlign","actionType","link","active","undefined","toolbarStyle","jsx","View","style","children","ScrollView","horizontal","showsHorizontalScrollIndicator","keyboardShouldPersistTaps","contentContainerStyle","styles","scrollContent","ToolbarButton","label","renderButton","onPress","toggleFormat","setHeading","setListType","setTextAlign","id","displayName","StyleSheet","create","flexDirection","alignItems","gap"],"sourceRoot":"../../../src","sources":["components/Toolbar.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAAgD,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMkB,OAA+B,GAAAC,OAAA,CAAAD,OAAA,gBAAGE,cAAK,CAACC,IAAI,CACvD,CAAC;EACCC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,KAAK;EACLC,OAAO,GAAG,IAAI;EACdC,YAAY,GAAG,UAAU;EACzBC,iBAAiB,GAAG,SAAS;EAC7BC,oBAAoB;EACpBC,yBAAyB;EACzBC,aAAa;EACbC,cAAc;EACdC;AACF,CAAC,KAAK;EACJ,MAAMC,aAAa,GAAGT,KAAK,IAAIU,4BAAa;EAC5C,MAAMC,YAAY,GAAGZ,KAAK,IAAIa,oCAAqB;;EAEnD;EACA,MAAMC,aAA4B,GAAG,IAAAC,cAAO,EAAC,MAAM;IACjD,MAAMC,cAAc,GAAGlB,OAAO,CAACmB,iBAAiB,CAAC,CAAC;IAElD,OAAOL,YAAY,CAACM,GAAG,CAAEC,IAAI,IAAK;MAChC,IAAIC,QAAQ,GAAG,KAAK;MAEpB,IAAID,IAAI,CAACE,MAAM,EAAE;QACfD,QAAQ,GAAGtB,OAAO,CAACwB,cAAc,CAACH,IAAI,CAACE,MAAM,CAAC;MAChD;MAEA,IAAIF,IAAI,CAACI,OAAO,EAAE;QAChBH,QAAQ,GAAGJ,cAAc,CAACO,OAAO,KAAKJ,IAAI,CAACI,OAAO;MACpD;MAEA,IAAIJ,IAAI,CAACK,QAAQ,EAAE;QACjBJ,QAAQ,GAAGJ,cAAc,CAACQ,QAAQ,KAAKL,IAAI,CAACK,QAAQ;MACtD;MAEA,IAAIL,IAAI,CAACM,SAAS,EAAE;QAClBL,QAAQ,GAAGJ,cAAc,CAACS,SAAS,KAAKN,IAAI,CAACM,SAAS;MACxD;MAEA,IAAIN,IAAI,CAAChB,YAAY,EAAE;QACrBiB,QAAQ,GAAGjB,YAAY,KAAKgB,IAAI,CAAChB,YAAY;MAC/C;MAEA,IAAIgB,IAAI,CAACf,iBAAiB,EAAE;QAC1BgB,QAAQ,GAAGhB,iBAAiB,KAAKe,IAAI,CAACf,iBAAiB;MACzD;MAEA,IAAIe,IAAI,CAACO,UAAU,KAAK,MAAM,EAAE;QAC9BN,QAAQ,GAAG,CAAC,CAACJ,cAAc,CAACW,IAAI;MAClC;MAEA,OAAO;QACL,GAAGR,IAAI;QACPS,MAAM,EAAET,IAAI,CAACS,MAAM,IAAIR;MACzB,CAAC;IACH,CAAC,CAAC;EACJ,CAAC,EAAE,CAACtB,OAAO,EAAEK,YAAY,EAAEC,iBAAiB,EAAEQ,YAAY,CAAC,CAAC;;EAE5D;EACA,IAAIH,aAAa,EAAE;IACjB,OAAOA,aAAa,CAAC;MACnBT,KAAK,EAAEc,aAAa;MACpBf,KAAK;MACLD,OAAO;MACPK,YAAY;MACZC,iBAAiB;MACjBC,oBAAoB,EAAEA,oBAAoB,KAAK,MAAMwB,SAAS,CAAC;MAC/DvB,yBAAyB,EACvBA,yBAAyB,KAAK,MAAMuB,SAAS,CAAC;MAChDtB,aAAa;MACbC;IACF,CAAC,CAAC;EACJ;EAEA,IAAI,CAACN,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,MAAM4B,YAAY,GAAG,CACnBpB,aAAa,CAACoB,YAAY,IAAInB,4BAAa,CAACmB,YAAY,CACzD;EAED,oBACE,IAAAxD,WAAA,CAAAyD,GAAA,EAAC5D,YAAA,CAAA6D,IAAI;IAACC,KAAK,EAAEH,YAAa;IAAAI,QAAA,eACxB,IAAA5D,WAAA,CAAAyD,GAAA,EAAC5D,YAAA,CAAAgE,UAAU;MACTC,UAAU;MACVC,8BAA8B,EAAE,KAAM;MACtCC,yBAAyB,EAAC,QAAQ;MAClCC,qBAAqB,EAAEC,MAAM,CAACC,aAAc;MAAAP,QAAA,EAE3CpB,aAAa,CAACI,GAAG,CAAEC,IAAI,iBACtB,IAAA7C,WAAA,CAAAyD,GAAA,EAAC1D,cAAA,CAAAqE,aAAa;QAEZC,KAAK,EAAExB,IAAI,CAACwB,KAAM;QAClBf,MAAM,EAAE,CAAC,CAACT,IAAI,CAACS,MAAO;QACtB3B,KAAK,EAAES,aAAc;QACrBkC,YAAY,EAAEzB,IAAI,CAACyB,YAAa;QAChCC,OAAO,EAAEA,CAAA,KAAM;UACb,IAAI1B,IAAI,CAAC0B,OAAO,EAAE;YAChB1B,IAAI,CAAC0B,OAAO,CAAC,CAAC;UAChB,CAAC,MAAM,IAAI1B,IAAI,CAACE,MAAM,EAAE;YACtBvB,OAAO,CAACgD,YAAY,CAAC3B,IAAI,CAACE,MAAM,CAAC;UACnC,CAAC,MAAM,IAAIF,IAAI,CAACI,OAAO,EAAE;YACvBzB,OAAO,CAACiD,UAAU,CAAC5B,IAAI,CAACI,OAAO,CAAC;UAClC,CAAC,MAAM,IAAIJ,IAAI,CAACK,QAAQ,EAAE;YACxB1B,OAAO,CAACkD,WAAW,CAAC7B,IAAI,CAACK,QAAQ,CAAC;UACpC,CAAC,MAAM,IAAIL,IAAI,CAACM,SAAS,EAAE;YACzB3B,OAAO,CAACmD,YAAY,CAAC9B,IAAI,CAACM,SAAS,CAAC;UACtC,CAAC,MAAM,IAAIN,IAAI,CAAChB,YAAY,EAAE;YAC5BE,oBAAoB,GAAGc,IAAI,CAAChB,YAAY,CAAC;UAC3C,CAAC,MAAM,IAAIgB,IAAI,CAACf,iBAAiB,EAAE;YACjCE,yBAAyB,GAAGa,IAAI,CAACf,iBAAiB,CAAC;UACrD,CAAC,MAAM,IAAIe,IAAI,CAACO,UAAU,KAAK,MAAM,EAAE;YACrCnB,aAAa,GAAG,CAAC;UACnB,CAAC,MAAM,IAAIY,IAAI,CAACO,UAAU,KAAK,OAAO,EAAE;YACtClB,cAAc,GAAG,CAAC;UACpB;QACF;MAAE,GAzBGW,IAAI,CAAC+B,EA0BX,CACF;IAAC,CACQ;EAAC,CACT,CAAC;AAEX,CACF,CAAC;AAEDxD,OAAO,CAACyD,WAAW,GAAG,SAAS;AAE/B,MAAMX,MAAM,GAAGY,uBAAU,CAACC,MAAM,CAAC;EAC/BZ,aAAa,EAAE;IACba,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAE;EACP;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_defaultStyles","_ToolbarButton","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Toolbar","exports","React","memo","actions","state","items","theme","visible","outputFormat","outputPreviewMode","onOutputFormatChange","onOutputPreviewModeChange","onRequestLink","onRequestImage","renderToolbar","resolvedTheme","DEFAULT_THEME","toolbarItems","DEFAULT_TOOLBAR_ITEMS","enrichedItems","useMemo","selectionStyle","getSelectionStyle","map","item","isActive","format","isFormatActive","heading","listType","textAlign","actionType","link","active","undefined","toolbarStyle","jsx","View","style","children","ScrollView","horizontal","showsHorizontalScrollIndicator","keyboardShouldPersistTaps","contentContainerStyle","styles","scrollContent","ToolbarButton","label","accessibilityLabel","renderButton","onPress","toggleFormat","setHeading","setListType","setTextAlign","id","displayName","StyleSheet","create","flexDirection","alignItems","gap"],"sourceRoot":"../../../src","sources":["components/Toolbar.tsx"],"mappings":"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","ignoreList":[]}