react-native-richify 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 react-native-richify contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,231 @@
+# react-native-richify
+
+A production-grade, fully customizable React Native Rich Text Input using the **Overlay Technique** — no WebView required.
+
+[![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)
+
+## Features
+
+- 🚀 **No WebView** — Pure React Native components (TextInput + Text overlay)
+- 📝 **Rich Formatting** — Bold, italic, underline, strikethrough, code
+- 🎨 **Text & Background Colors** — Full color customization
+- 📐 **Font Sizes & Headings** — H1, H2, H3 presets + custom sizes
+- 🔧 **Fully Customizable Toolbar** — Default toolbar + render props for full control
+- 🎭 **Theming** — Complete theme system with plug-and-play defaults
+- 💾 **Serialization** — Export/import as JSON
+- 📦 **TypeScript First** — Full type definitions out of the box
+- 🪝 **Headless Hook** — `useRichText` for building custom UIs
+- 🌐 **Context API** — `RichTextProvider` for nested component access
+
+## Installation
+
+```bash
+npm install react-native-richify
+# or
+yarn add react-native-richify
+```
+
+No native dependencies required. Works with Expo and bare React Native.
+
+## Quick Start
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { RichTextInput } from 'react-native-richify';
+
+export default function App() {
+  return (
+    <View style={{ flex: 1, padding: 16 }}>
+      <RichTextInput
+        placeholder="Start typing..."
+        showToolbar
+        onChangeText={(text) => console.log('Plain text:', text)}
+        onChangeSegments={(segments) => console.log('Segments:', segments)}
+      />
+    </View>
+  );
+}
+```
+
+That's it! You get a fully functional rich text editor with default styling.
+
+## API Reference
+
+### `<RichTextInput />`
+
+The main component. Drop it in and it works.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `initialSegments` | `StyledSegment[]` | `[]` | Initial content |
+| `onChangeSegments` | `(segments: StyledSegment[]) => void` | — | Called when content changes |
+| `onChangeText` | `(text: string) => void` | — | Called with plain text |
+| `placeholder` | `string` | `"Start typing..."` | Placeholder text |
+| `editable` | `boolean` | `true` | Whether input is editable |
+| `maxLength` | `number` | — | Max character length |
+| `showToolbar` | `boolean` | `true` | Show formatting toolbar |
+| `toolbarPosition` | `'top' \| 'bottom'` | `'top'` | Toolbar position |
+| `toolbarItems` | `ToolbarItem[]` | Default items | Custom toolbar items |
+| `theme` | `RichTextTheme` | Default theme | Theme overrides |
+| `multiline` | `boolean` | `true` | Enable multiline |
+| `minHeight` | `number` | `120` | Minimum editor height |
+| `maxHeight` | `number` | — | Maximum editor height |
+| `autoFocus` | `boolean` | `false` | Auto-focus on mount |
+| `renderToolbar` | `(props) => ReactElement` | — | Custom toolbar renderer |
+| `onReady` | `(actions: RichTextActions) => void` | — | Called with action methods |
+
+### `useRichText(options?)`
+
+Headless hook for building custom UIs.
+
+```tsx
+import { useRichText } from 'react-native-richify';
+
+function MyEditor() {
+  const { state, actions } = useRichText({
+    onChangeText: (text) => console.log(text),
+  });
+
+  return (
+    <>
+      <Button title="Bold" onPress={() => actions.toggleFormat('bold')} />
+      <TextInput
+        value={actions.getPlainText()}
+        onChangeText={actions.handleTextChange}
+        onSelectionChange={(e) =>
+          actions.handleSelectionChange(e.nativeEvent.selection)
+        }
+      />
+    </>
+  );
+}
+```
+
+### `<RichTextProvider>` & `useRichTextContext()`
+
+Share state across the component tree:
+
+```tsx
+import { RichTextProvider, useRichTextContext } from 'react-native-richify';
+
+function CustomToolbar() {
+  const { state, actions } = useRichTextContext();
+  return <Button title="B" onPress={() => actions.toggleFormat('bold')} />;
+}
+
+function App() {
+  return (
+    <RichTextProvider onChangeText={console.log}>
+      <CustomToolbar />
+      <RichTextInput showToolbar={false} />
+    </RichTextProvider>
+  );
+}
+```
+
+### Actions
+
+| Method | Description |
+|--------|-------------|
+| `toggleFormat(format)` | Toggle bold/italic/underline/strikethrough/code |
+| `setColor(color)` | Set text color |
+| `setBackgroundColor(color)` | Set highlight color |
+| `setFontSize(size)` | Set font size |
+| `setHeading(level)` | Set heading (h1/h2/h3/none) |
+| `handleTextChange(text)` | Process text input changes |
+| `handleSelectionChange(sel)` | Process selection changes |
+| `getPlainText()` | Get plain text content |
+| `exportJSON()` | Export segments as JSON |
+| `importJSON(segments)` | Import segments from JSON |
+| `clear()` | Clear all content |
+
+## Theming
+
+Customize every aspect of the editor:
+
+```tsx
+<RichTextInput
+  theme={{
+    colors: {
+      primary: '#8B5CF6',
+      background: '#1F2937',
+      text: '#F9FAFB',
+      placeholder: '#6B7280',
+      toolbarBackground: '#374151',
+      toolbarBorder: '#4B5563',
+      cursor: '#8B5CF6',
+    },
+    containerStyle: {
+      borderRadius: 16,
+      borderWidth: 2,
+      borderColor: '#4B5563',
+    },
+    toolbarButtonActiveStyle: {
+      backgroundColor: '#4C1D95',
+    },
+  }}
+/>
+```
+
+## Custom Toolbar
+
+```tsx
+<RichTextInput
+  toolbarItems={[
+    { id: 'bold', label: 'B', format: 'bold' },
+    { id: 'italic', label: 'I', format: 'italic' },
+    {
+      id: 'custom',
+      label: '🎨',
+      onPress: () => showColorPicker(),
+    },
+    {
+      id: 'render',
+      label: 'Custom',
+      renderButton: ({ active, onPress }) => (
+        <MyCustomButton active={active} onPress={onPress} />
+      ),
+    },
+  ]}
+/>
+```
+
+## Data Model
+
+Content is stored as an array of `StyledSegment` objects:
+
+```typescript
+interface StyledSegment {
+  text: string;
+  styles: {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strikethrough?: boolean;
+    code?: boolean;
+    color?: string;
+    backgroundColor?: string;
+    fontSize?: number;
+    heading?: 'h1' | 'h2' | 'h3' | 'none';
+  };
+}
+```
+
+## How It Works
+
+The **Overlay Technique** layers two components:
+
+1. **Bottom**: A `<Text>` component renders the styled/formatted text
+2. **Top**: A transparent `<TextInput>` captures user input and selection
+
+Both layers use identical font metrics so text aligns perfectly. The user sees the formatted text from the bottom layer while typing into the invisible top layer.
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
+
+## License
+
+MIT © react-native-richify contributors

package/lib/commonjs/components/OverlayText.d.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=OverlayText.d.js.map

package/lib/commonjs/components/OverlayText.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/OverlayText.d.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/components/OverlayText.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OverlayText = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _styleMapper = require("@/utils/styleMapper");
+var _defaultStyles = require("@/constants/defaultStyles");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * OverlayText renders the styled text segments as a `<Text>` component tree.
+ *
+ * This component is positioned behind the transparent TextInput to create
+ * the overlay effect — the user types into the TextInput while seeing
+ * the formatted rendering from this component.
+ */
+const OverlayText = exports.OverlayText = /*#__PURE__*/_react.default.memo(({
+  segments,
+  baseTextStyle,
+  theme
+}) => {
+  const resolvedTheme = theme ?? _defaultStyles.DEFAULT_THEME;
+  const overlayStyle = resolvedTheme.overlayContainerStyle ?? _defaultStyles.DEFAULT_THEME.overlayContainerStyle;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: overlayStyle,
+    pointerEvents: "none",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      children: segments.map((segment, index) => {
+        if (segment.text.length === 0 && segments.length > 1) {
+          return null;
+        }
+        const textStyle = (0, _styleMapper.segmentToTextStyle)(segment, resolvedTheme);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [baseTextStyle, textStyle],
+          children: segment.text
+        }, `${index}-${segment.text.slice(0, 8)}`);
+      })
+    })
+  });
+});
+OverlayText.displayName = 'OverlayText';
+//# sourceMappingURL=OverlayText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_styleMapper","_defaultStyles","_jsxRuntime","e","__esModule","default","OverlayText","exports","React","memo","segments","baseTextStyle","theme","resolvedTheme","DEFAULT_THEME","overlayStyle","overlayContainerStyle","jsx","View","style","pointerEvents","children","Text","map","segment","index","text","length","textStyle","segmentToTextStyle","slice","displayName"],"sourceRoot":"..\\..\\..\\src","sources":["components/OverlayText.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAA0D,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,WAAuC,GAAAC,OAAA,CAAAD,WAAA,gBAAGE,cAAK,CAACC,IAAI,CAC/D,CAAC;EAAEC,QAAQ;EAAEC,aAAa;EAAEC;AAAM,CAAC,KAAK;EACtC,MAAMC,aAAa,GAAGD,KAAK,IAAIE,4BAAa;EAC5C,MAAMC,YAAY,GAChBF,aAAa,CAACG,qBAAqB,IACnCF,4BAAa,CAACE,qBAAqB;EAErC,oBACE,IAAAd,WAAA,CAAAe,GAAA,EAAClB,YAAA,CAAAmB,IAAI;IAACC,KAAK,EAAEJ,YAAa;IAACK,aAAa,EAAC,MAAM;IAAAC,QAAA,eAC7C,IAAAnB,WAAA,CAAAe,GAAA,EAAClB,YAAA,CAAAuB,IAAI;MAAAD,QAAA,EACFX,QAAQ,CAACa,GAAG,CAAC,CAACC,OAAO,EAAEC,KAAK,KAAK;QAChC,IAAID,OAAO,CAACE,IAAI,CAACC,MAAM,KAAK,CAAC,IAAIjB,QAAQ,CAACiB,MAAM,GAAG,CAAC,EAAE;UACpD,OAAO,IAAI;QACb;QAEA,MAAMC,SAAS,GAAG,IAAAC,+BAAkB,EAACL,OAAO,EAAEX,aAAa,CAAC;QAE5D,oBACE,IAAAX,WAAA,CAAAe,GAAA,EAAClB,YAAA,CAAAuB,IAAI;UAEHH,KAAK,EAAE,CAACR,aAAa,EAAEiB,SAAS,CAAE;UAAAP,QAAA,EAEjCG,OAAO,CAACE;QAAI,GAHR,GAAGD,KAAK,IAAID,OAAO,CAACE,IAAI,CAACI,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAIrC,CAAC;MAEX,CAAC;IAAC,CACE;EAAC,CACH,CAAC;AAEX,CACF,CAAC;AAEDxB,WAAW,CAACyB,WAAW,GAAG,aAAa","ignoreList":[]}

package/lib/commonjs/components/RichTextInput.d.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=RichTextInput.d.js.map

package/lib/commonjs/components/RichTextInput.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/RichTextInput.d.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/components/RichTextInput.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RichTextInput = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _defaultStyles = require("@/constants/defaultStyles");
+var _parser = require("@/utils/parser");
+var _useRichText = require("@/hooks/useRichText");
+var _OverlayText = require("@/components/OverlayText");
+var _Toolbar = require("@/components/Toolbar");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * RichTextInput — The main rich text editor component.
+ *
+ * Uses the Overlay Technique:
+ * - A transparent `TextInput` on top captures user input and selection
+ * - A styled `<Text>` layer behind it renders the formatted content
+ * - Both share identical font metrics for pixel-perfect alignment
+ *
+ * @example
+ * ```tsx
+ * <RichTextInput
+ *   placeholder="Start typing..."
+ *   showToolbar
+ *   onChangeSegments={(segments) => console.log(segments)}
+ * />
+ * ```
+ */
+const RichTextInput = ({
+  initialSegments,
+  onChangeSegments,
+  onChangeText,
+  placeholder = 'Start typing...',
+  editable = true,
+  maxLength,
+  showToolbar = true,
+  toolbarPosition = 'top',
+  toolbarItems,
+  theme,
+  multiline = true,
+  minHeight = 120,
+  maxHeight,
+  autoFocus = false,
+  textInputProps,
+  renderToolbar,
+  onReady
+}) => {
+  const resolvedTheme = theme ?? _defaultStyles.DEFAULT_THEME;
+  const {
+    state,
+    actions
+  } = (0, _useRichText.useRichText)({
+    initialSegments,
+    onChangeSegments,
+    onChangeText
+  });
+
+  // Expose actions via onReady callback
+  (0, _react.useEffect)(() => {
+    onReady?.(actions);
+  }, [onReady, actions]);
+
+  // Build plain text for the TextInput value
+  const plainText = (0, _parser.segmentsToPlainText)(state.segments);
+
+  // Handle selection change from TextInput
+  const onSelectionChange = (0, _react.useCallback)(e => {
+    const {
+      start,
+      end
+    } = e.nativeEvent.selection;
+    actions.handleSelectionChange({
+      start,
+      end
+    });
+  }, [actions]);
+
+  // Container style
+  const containerStyle = [resolvedTheme.containerStyle ?? _defaultStyles.DEFAULT_THEME.containerStyle];
+
+  // Input area style
+  const inputAreaStyle = [styles.inputArea, {
+    minHeight
+  }, maxHeight ? {
+    maxHeight
+  } : undefined];
+
+  // Input style
+  const inputStyle = [styles.textInput, resolvedTheme.inputStyle ?? _defaultStyles.DEFAULT_THEME.inputStyle];
+
+  // Toolbar component
+  const toolbarComponent = showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.Toolbar, {
+    actions: actions,
+    state: state,
+    items: toolbarItems,
+    theme: resolvedTheme,
+    renderToolbar: renderToolbar
+  }) : null;
+
+  // Toolbar border
+  const toolbarBorderStyle = toolbarPosition === 'top' ? {
+    borderBottomWidth: 1,
+    borderBottomColor: resolvedTheme.colors?.toolbarBorder ?? _defaultStyles.DEFAULT_THEME.colors?.toolbarBorder
+  } : {
+    borderTopWidth: 1,
+    borderTopColor: resolvedTheme.colors?.toolbarBorder ?? _defaultStyles.DEFAULT_THEME.colors?.toolbarBorder
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: containerStyle,
+    children: [toolbarPosition === 'top' && toolbarComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: toolbarBorderStyle,
+      children: toolbarComponent
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: inputAreaStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OverlayText.OverlayText, {
+        segments: state.segments,
+        baseTextStyle: resolvedTheme.baseTextStyle,
+        theme: resolvedTheme
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        ...textInputProps,
+        style: inputStyle,
+        value: plainText,
+        onChangeText: actions.handleTextChange,
+        onSelectionChange: onSelectionChange,
+        multiline: multiline,
+        placeholder: placeholder,
+        placeholderTextColor: resolvedTheme.colors?.placeholder ?? _defaultStyles.DEFAULT_THEME.colors?.placeholder,
+        editable: editable,
+        maxLength: maxLength,
+        autoFocus: autoFocus,
+        selectionColor: resolvedTheme.colors?.cursor ?? _defaultStyles.DEFAULT_THEME.colors?.cursor,
+        textAlignVertical: "top",
+        scrollEnabled: true
+      })]
+    }), toolbarPosition === 'bottom' && toolbarComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: toolbarBorderStyle,
+      children: toolbarComponent
+    })]
+  });
+};
+exports.RichTextInput = RichTextInput;
+RichTextInput.displayName = 'RichTextInput';
+const styles = _reactNative.StyleSheet.create({
+  inputArea: {
+    position: 'relative'
+  },
+  textInput: {
+    // The TextInput must be transparent so the overlay text shows through.
+    // Only the caret/cursor and selection highlight are visible.
+    color: 'transparent',
+    // Ensure it matches the overlay text positioning exactly.
+    position: 'relative',
+    zIndex: 1
+  }
+});
+//# sourceMappingURL=RichTextInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_defaultStyles","_parser","_useRichText","_OverlayText","_Toolbar","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RichTextInput","initialSegments","onChangeSegments","onChangeText","placeholder","editable","maxLength","showToolbar","toolbarPosition","toolbarItems","theme","multiline","minHeight","maxHeight","autoFocus","textInputProps","renderToolbar","onReady","resolvedTheme","DEFAULT_THEME","state","actions","useRichText","useEffect","plainText","segmentsToPlainText","segments","onSelectionChange","useCallback","start","end","nativeEvent","selection","handleSelectionChange","containerStyle","inputAreaStyle","styles","inputArea","undefined","inputStyle","textInput","toolbarComponent","jsx","Toolbar","items","toolbarBorderStyle","borderBottomWidth","borderBottomColor","colors","toolbarBorder","borderTopWidth","borderTopColor","jsxs","View","style","children","OverlayText","baseTextStyle","TextInput","value","handleTextChange","placeholderTextColor","selectionColor","cursor","textAlignVertical","scrollEnabled","exports","displayName","StyleSheet","create","position","color","zIndex"],"sourceRoot":"..\\..\\..\\src","sources":["components/RichTextInput.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=Toolbar.d.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/Toolbar.d.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/components/Toolbar.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toolbar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _defaultStyles = require("@/constants/defaultStyles");
+var _ToolbarButton = require("@/components/ToolbarButton");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Formatting toolbar for the rich text editor.
+ *
+ * Supports:
+ * - Default toolbar items (bold, italic, underline, etc.)
+ * - Custom toolbar items via the `items` prop
+ * - Fully custom rendering via `renderToolbar`
+ * - Horizontal scrolling for overflow
+ */
+const Toolbar = exports.Toolbar = /*#__PURE__*/_react.default.memo(({
+  actions,
+  state,
+  items,
+  theme,
+  visible = true,
+  renderToolbar
+}) => {
+  const resolvedTheme = theme ?? _defaultStyles.DEFAULT_THEME;
+  const toolbarItems = items ?? _defaultStyles.DEFAULT_TOOLBAR_ITEMS;
+
+  // Compute active state for each item
+  const enrichedItems = (0, _react.useMemo)(() => {
+    return toolbarItems.map(item => {
+      let isActive = false;
+      if (item.format) {
+        // Check if the format is currently active
+        const {
+          activeStyles
+        } = state;
+        isActive = !!activeStyles[item.format];
+      }
+      if (item.heading) {
+        isActive = state.activeStyles.heading === item.heading;
+      }
+      return {
+        ...item,
+        active: item.active ?? isActive
+      };
+    });
+  }, [toolbarItems, state]);
+
+  // Custom render
+  if (renderToolbar) {
+    return renderToolbar({
+      items: enrichedItems,
+      state,
+      actions
+    });
+  }
+  if (!visible) {
+    return null;
+  }
+  const toolbarStyle = [resolvedTheme.toolbarStyle ?? _defaultStyles.DEFAULT_THEME.toolbarStyle];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: toolbarStyle,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      keyboardShouldPersistTaps: "always",
+      contentContainerStyle: styles.scrollContent,
+      children: enrichedItems.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {
+        label: item.label,
+        active: !!item.active,
+        theme: resolvedTheme,
+        renderButton: item.renderButton,
+        onPress: () => {
+          if (item.onPress) {
+            item.onPress();
+          } else if (item.format) {
+            actions.toggleFormat(item.format);
+          } else if (item.heading) {
+            actions.setHeading(item.heading);
+          }
+        }
+      }, item.id))
+    })
+  });
+});
+Toolbar.displayName = 'Toolbar';
+const styles = _reactNative.StyleSheet.create({
+  scrollContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2
+  }
+});
+//# sourceMappingURL=Toolbar.js.map

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

@@ -0,0 +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","renderToolbar","resolvedTheme","DEFAULT_THEME","toolbarItems","DEFAULT_TOOLBAR_ITEMS","enrichedItems","useMemo","map","item","isActive","format","activeStyles","heading","active","toolbarStyle","jsx","View","style","children","ScrollView","horizontal","showsHorizontalScrollIndicator","keyboardShouldPersistTaps","contentContainerStyle","styles","scrollContent","ToolbarButton","label","renderButton","onPress","toggleFormat","setHeading","id","displayName","StyleSheet","create","flexDirection","alignItems","gap"],"sourceRoot":"..\\..\\..\\src","sources":["components/Toolbar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/ToolbarButton.d.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=ToolbarButton.d.js.map

package/lib/commonjs/components/ToolbarButton.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/ToolbarButton.d.ts"],"mappings":"","ignoreList":[]}