react-native-richify 1.0.3 → 1.0.4

package/src/components/RichTextInput.d.ts

@@ -1,20 +1,9 @@
 import React from 'react';
 import type { RichTextInputProps } from '../types';
 /**
- * RichTextInput — The main rich text editor component.
+ * 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)}
- * />
- * ```
+ * Uses a plain `TextInput` for editing and renders the serialized rich output
+ * below it as Markdown or HTML.
  */
 export declare const RichTextInput: React.FC<RichTextInputProps>;

package/src/components/RichTextInput.tsx

@@ -1,34 +1,35 @@
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useMemo, useRef } from 'react';
 import {
-  View,
-  TextInput,
+  Animated,
+  Easing,
+  ScrollView,
   StyleSheet,
+  Text,
+  TextInput,
+  View,
   type NativeSyntheticEvent,
   type TextInputSelectionChangeEventData,
 } from 'react-native';
 import type { RichTextInputProps } from '../types';
 import { DEFAULT_THEME } from '../constants/defaultStyles';
-import { segmentsToPlainText } from '../utils/parser';
 import { useRichText } from '../hooks/useRichText';
-import { OverlayText } from './OverlayText';
+import { segmentsToPlainText } from '../utils/parser';
+import { serializeSegments } from '../utils/serializer';
 import { Toolbar } from './Toolbar';
 
+const OUTPUT_PANEL_HEIGHT = 180;
+const isJestRuntime =
+  typeof (
+    globalThis as {
+      process?: { env?: { JEST_WORKER_ID?: string } };
+    }
+  ).process?.env?.JEST_WORKER_ID === 'string';
+
 /**
  * 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)}
- * />
- * ```
+ * Uses a plain `TextInput` for editing and renders the serialized rich output
+ * below it as Markdown or HTML.
  */
 export const RichTextInput: React.FC<RichTextInputProps> = ({
   initialSegments,
@@ -41,6 +42,9 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
   toolbarPosition = 'top',
   toolbarItems,
   theme,
+  showOutputPreview = true,
+  outputFormat = 'markdown',
+  onChangeOutput,
   multiline = true,
   minHeight = 120,
   maxHeight,
@@ -50,6 +54,7 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
   onReady,
 }) => {
   const resolvedTheme = theme ?? DEFAULT_THEME;
+  const previewProgress = useRef(new Animated.Value(0)).current;
 
   const { state, actions } = useRichText({
     initialSegments,
@@ -57,15 +62,35 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
     onChangeText,
   });
 
-  // Expose actions via onReady callback
   useEffect(() => {
     onReady?.(actions);
-  }, [onReady, actions]);
+  }, [actions, onReady]);
 
-  // Build plain text for the TextInput value
   const plainText = segmentsToPlainText(state.segments);
+  const serializedOutput = useMemo(
+    () => serializeSegments(state.segments, outputFormat),
+    [outputFormat, state.segments],
+  );
+  const shouldShowOutputPreview = showOutputPreview && plainText.length > 0;
+
+  useEffect(() => {
+    onChangeOutput?.(serializedOutput, outputFormat);
+  }, [onChangeOutput, outputFormat, serializedOutput]);
+
+  useEffect(() => {
+    if (isJestRuntime) {
+      previewProgress.setValue(shouldShowOutputPreview ? 1 : 0);
+      return;
+    }
+
+    Animated.timing(previewProgress, {
+      toValue: shouldShowOutputPreview ? 1 : 0,
+      duration: 180,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: false,
+    }).start();
+  }, [previewProgress, shouldShowOutputPreview]);
 
-  // Handle selection change from TextInput
   const onSelectionChange = useCallback(
     (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
       const { start, end } = e.nativeEvent.selection;
@@ -74,28 +99,49 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
     [actions],
   );
 
-  // Container style
   const containerStyle = [
     resolvedTheme.containerStyle ?? DEFAULT_THEME.containerStyle,
   ];
-
-  // Input area style
   const inputAreaStyle = [
     styles.inputArea,
     { minHeight },
     maxHeight ? { maxHeight } : undefined,
   ];
-
-  // Input style
   const inputStyle = [
     styles.textInput,
     resolvedTheme.baseTextStyle ?? DEFAULT_THEME.baseTextStyle,
     resolvedTheme.inputStyle ?? DEFAULT_THEME.inputStyle,
     textInputProps?.style,
-    styles.hiddenInputText,
+  ];
+  const outputAnimatedStyle = {
+    maxHeight: previewProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, OUTPUT_PANEL_HEIGHT],
+    }),
+    opacity: previewProgress,
+    marginTop: previewProgress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 12],
+    }),
+    transform: [
+      {
+        translateY: previewProgress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-8, 0],
+        }),
+      },
+    ],
+  };
+  const outputContainerStyle = [
+    resolvedTheme.outputContainerStyle ?? DEFAULT_THEME.outputContainerStyle,
+  ];
+  const outputLabelStyle = [
+    resolvedTheme.outputLabelStyle ?? DEFAULT_THEME.outputLabelStyle,
+  ];
+  const outputTextStyle = [
+    resolvedTheme.outputTextStyle ?? DEFAULT_THEME.outputTextStyle,
   ];
 
-  // Toolbar component
   const toolbarComponent = showToolbar ? (
     <Toolbar
       actions={actions}
@@ -106,29 +152,28 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
     />
   ) : null;
 
-  // Toolbar border
   const toolbarBorderStyle =
     toolbarPosition === 'top'
-      ? { borderBottomWidth: 1, borderBottomColor: resolvedTheme.colors?.toolbarBorder ?? DEFAULT_THEME.colors?.toolbarBorder }
-      : { borderTopWidth: 1, borderTopColor: resolvedTheme.colors?.toolbarBorder ?? DEFAULT_THEME.colors?.toolbarBorder };
+      ? {
+          borderBottomWidth: 1,
+          borderBottomColor:
+            resolvedTheme.colors?.toolbarBorder ??
+            DEFAULT_THEME.colors?.toolbarBorder,
+        }
+      : {
+          borderTopWidth: 1,
+          borderTopColor:
+            resolvedTheme.colors?.toolbarBorder ??
+            DEFAULT_THEME.colors?.toolbarBorder,
+        };
 
   return (
     <View style={containerStyle}>
-      {/* Toolbar — Top */}
       {toolbarPosition === 'top' && toolbarComponent && (
         <View style={toolbarBorderStyle}>{toolbarComponent}</View>
       )}
 
-      {/* Editor Area */}
       <View style={inputAreaStyle}>
-        {/* Overlay — Styled text rendering (behind TextInput) */}
-        <OverlayText
-          segments={state.segments}
-          baseTextStyle={resolvedTheme.baseTextStyle}
-          theme={resolvedTheme}
-        />
-
-        {/* TextInput — Transparent layer on top for input capture */}
         <TextInput
           {...textInputProps}
           style={inputStyle}
@@ -144,16 +189,32 @@ export const RichTextInput: React.FC<RichTextInputProps> = ({
           editable={editable}
           maxLength={maxLength}
           autoFocus={autoFocus}
-          underlineColorAndroid="transparent"
           selectionColor={
             resolvedTheme.colors?.cursor ?? DEFAULT_THEME.colors?.cursor
           }
           textAlignVertical="top"
           scrollEnabled={typeof maxHeight === 'number'}
         />
+
+        {showOutputPreview && (
+          <Animated.View
+            pointerEvents={shouldShowOutputPreview ? 'auto' : 'none'}
+            style={[styles.outputAnimatedWrapper, outputAnimatedStyle]}
+          >
+            <View style={outputContainerStyle}>
+              <Text style={outputLabelStyle}>
+                {outputFormat === 'html' ? 'HTML output' : 'Markdown output'}
+              </Text>
+              <ScrollView showsVerticalScrollIndicator={false}>
+                <Text selectable style={outputTextStyle}>
+                  {serializedOutput}
+                </Text>
+              </ScrollView>
+            </View>
+          </Animated.View>
+        )}
       </View>
 
-      {/* Toolbar — Bottom */}
       {toolbarPosition === 'bottom' && toolbarComponent && (
         <View style={toolbarBorderStyle}>{toolbarComponent}</View>
       )}
@@ -169,12 +230,8 @@ const styles = StyleSheet.create({
   },
   textInput: {
     position: 'relative',
-    zIndex: 1,
   },
-  hiddenInputText: {
-    // Keep the editable layer invisible while preserving the caret.
-    color: 'transparent',
-    backgroundColor: 'transparent',
-    textShadowColor: 'transparent',
+  outputAnimatedWrapper: {
+    overflow: 'hidden',
   },
 });

package/src/constants/defaultStyles.d.ts

@@ -9,6 +9,8 @@ export declare const DEFAULT_COLORS: {
     readonly placeholder: "#9CA3AF";
     readonly toolbarBackground: "#F9FAFB";
     readonly toolbarBorder: "#E5E7EB";
+    readonly outputBackground: "#F8FAFC";
+    readonly outputLabel: "#475569";
     readonly cursor: "#6366F1";
     readonly activeButtonBg: "#EEF2FF";
     readonly codeBackground: "#F3F4F6";
@@ -32,7 +34,7 @@ export declare const DEFAULT_BASE_TEXT_STYLE: {
     readonly fontFamily: undefined;
 };
 /**
- * Empty format style — no formatting applied.
+ * Empty format style — no formatting applied.
  */
 export declare const EMPTY_FORMAT_STYLE: FormatStyle;
 /**

package/src/constants/defaultStyles.ts

@@ -10,6 +10,8 @@ export const DEFAULT_COLORS = {
   placeholder: '#9CA3AF',
   toolbarBackground: '#F9FAFB',
   toolbarBorder: '#E5E7EB',
+  outputBackground: '#F8FAFC',
+  outputLabel: '#475569',
   cursor: '#6366F1',
   activeButtonBg: '#EEF2FF',
   codeBackground: '#F3F4F6',
@@ -64,7 +66,7 @@ export const DEFAULT_THEME: RichTextTheme = {
   inputStyle: {
     fontSize: DEFAULT_BASE_TEXT_STYLE.fontSize,
     lineHeight: DEFAULT_BASE_TEXT_STYLE.lineHeight,
-    color: 'transparent',
+    color: DEFAULT_COLORS.text,
     paddingHorizontal: 16,
     paddingVertical: 12,
     textAlignVertical: 'top',
@@ -83,6 +85,29 @@ export const DEFAULT_THEME: RichTextTheme = {
     lineHeight: DEFAULT_BASE_TEXT_STYLE.lineHeight,
     color: DEFAULT_COLORS.text,
   },
+  outputContainerStyle: {
+    marginHorizontal: 12,
+    marginBottom: 12,
+    padding: 12,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: DEFAULT_COLORS.toolbarBorder,
+    backgroundColor: DEFAULT_COLORS.outputBackground,
+  },
+  outputLabelStyle: {
+    marginBottom: 8,
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 0.4,
+    color: DEFAULT_COLORS.outputLabel,
+    textTransform: 'uppercase',
+  },
+  outputTextStyle: {
+    fontSize: 14,
+    lineHeight: 20,
+    color: DEFAULT_COLORS.text,
+    fontFamily: 'monospace',
+  },
   toolbarStyle: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/hooks/useFormatting.ts

@@ -78,10 +78,23 @@ export function useFormatting({
 
   const setHeading = useCallback(
     (level: HeadingLevel) => {
+      if (selection.start === selection.end) {
+        onActiveStylesChange({
+          ...activeStyles,
+          heading: level === 'none' ? undefined : level,
+        });
+      }
+
       const newSegments = setHeadingOnLine(segments, selection, level);
       onSegmentsChange(newSegments);
     },
-    [segments, selection, onSegmentsChange],
+    [
+      activeStyles,
+      onActiveStylesChange,
+      onSegmentsChange,
+      segments,
+      selection,
+    ],
   );
 
   const setColor = useCallback(

package/src/hooks/useRichText.ts

@@ -2,6 +2,7 @@ import { useState, useCallback, useRef } from 'react';
 import type {
   StyledSegment,
   FormatStyle,
+  OutputFormat,
   SelectionRange,
   RichTextState,
   RichTextActions,
@@ -15,6 +16,7 @@ import {
   findPositionInSegments,
 } from '../utils/parser';
 import { getSelectionStyle } from '../utils/formatter';
+import { serializeSegments } from '../utils/serializer';
 import { useSelection } from '../hooks/useSelection';
 import { useFormatting } from '../hooks/useFormatting';
 
@@ -60,6 +62,7 @@ export function useRichText(
   selectionRef.current = selection;
   const activeStylesRef = useRef(activeStyles);
   activeStylesRef.current = activeStyles;
+  const preserveActiveStylesRef = useRef(false);
 
   // ─── Segment Change Handler ──────────────────────────────────────────────
 
@@ -108,8 +111,22 @@ export function useRichText(
 
   const onSelectionChange = useCallback(
     (newSelection: SelectionRange) => {
+      const previousSelection = selectionRef.current;
       handleSelectionChange(newSelection);
 
+      const shouldPreserveActiveStyles =
+        preserveActiveStylesRef.current &&
+        previousSelection.start === previousSelection.end &&
+        newSelection.start === newSelection.end &&
+        newSelection.start >= previousSelection.start &&
+        newSelection.start - previousSelection.start <= 1;
+
+      if (shouldPreserveActiveStyles) {
+        return;
+      }
+
+      preserveActiveStylesRef.current = false;
+
       // Update active styles based on cursor position
       if (newSelection.start === newSelection.end) {
         const pos = findPositionInSegments(
@@ -131,6 +148,13 @@ export function useRichText(
     return segmentsToPlainText(segmentsRef.current);
   }, []);
 
+  const getOutput = useCallback(
+    (format: OutputFormat = 'markdown'): string => {
+      return serializeSegments(segmentsRef.current, format);
+    },
+    [],
+  );
+
   const exportJSON = useCallback((): StyledSegment[] => {
     return JSON.parse(JSON.stringify(segmentsRef.current));
   }, []);
@@ -147,8 +171,69 @@ export function useRichText(
   const clear = useCallback(() => {
     updateSegments([createSegment('')]);
     setActiveStyles({ ...EMPTY_FORMAT_STYLE });
+    preserveActiveStylesRef.current = false;
   }, [updateSegments]);
 
+  const toggleFormat = useCallback<RichTextActions['toggleFormat']>(
+    (format) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.toggleFormat(format);
+    },
+    [formatting],
+  );
+
+  const setStyleProperty = useCallback<RichTextActions['setStyleProperty']>(
+    (key, value) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setStyleProperty(key, value);
+    },
+    [formatting],
+  );
+
+  const setHeading = useCallback<RichTextActions['setHeading']>(
+    (level) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setHeading(level);
+    },
+    [formatting],
+  );
+
+  const setColor = useCallback<RichTextActions['setColor']>(
+    (color) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setColor(color);
+    },
+    [formatting],
+  );
+
+  const setBackgroundColor = useCallback<RichTextActions['setBackgroundColor']>(
+    (color) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setBackgroundColor(color);
+    },
+    [formatting],
+  );
+
+  const setFontSize = useCallback<RichTextActions['setFontSize']>(
+    (size) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setFontSize(size);
+    },
+    [formatting],
+  );
+
   // ─── Build Return Value ──────────────────────────────────────────────────
 
   const state: RichTextState = {
@@ -158,16 +243,17 @@ export function useRichText(
   };
 
   const actions: RichTextActions = {
-    toggleFormat: formatting.toggleFormat,
-    setStyleProperty: formatting.setStyleProperty,
-    setHeading: formatting.setHeading,
-    setColor: formatting.setColor,
-    setBackgroundColor: formatting.setBackgroundColor,
-    setFontSize: formatting.setFontSize,
+    toggleFormat,
+    setStyleProperty,
+    setHeading,
+    setColor,
+    setBackgroundColor,
+    setFontSize,
     handleTextChange,
     handleSelectionChange: onSelectionChange,
     isFormatActive: formatting.isFormatActive,
     getSelectionStyle: formatting.currentSelectionStyle,
+    getOutput,
     getPlainText,
     exportJSON,
     importJSON,

package/src/index.d.ts

@@ -11,5 +11,6 @@ export type { RichTextProviderProps } from './context/RichTextContext';
 export { createSegment, segmentsToPlainText, getTotalLength, mergeAdjacentSegments, reconcileTextChange, } from './utils/parser';
 export { toggleFormatOnSelection, setStyleOnSelection, setHeadingOnLine, isFormatActiveInSelection, getSelectionStyle, } from './utils/formatter';
 export { formatStyleToTextStyle, segmentToTextStyle, segmentsToTextStyles, } from './utils/styleMapper';
+export { serializeSegments, segmentsToMarkdown, segmentsToHTML, } from './utils/serializer';
 export { DEFAULT_COLORS, DEFAULT_THEME, DEFAULT_TOOLBAR_ITEMS, DEFAULT_BASE_TEXT_STYLE, HEADING_FONT_SIZES, EMPTY_FORMAT_STYLE, } from './constants/defaultStyles';
-export type { FormatType, HeadingLevel, ListType, FormatStyle, StyledSegment, SelectionRange, RichTextState, RichTextActions, UseRichTextReturn, RichTextTheme, ToolbarItem, ToolbarButtonRenderProps, ToolbarRenderProps, OverlayTextProps, ToolbarButtonProps, ToolbarProps, RichTextInputProps, } from './types';
+export type { FormatType, HeadingLevel, ListType, OutputFormat, FormatStyle, StyledSegment, SelectionRange, RichTextState, RichTextActions, UseRichTextReturn, RichTextTheme, ToolbarItem, ToolbarButtonRenderProps, ToolbarRenderProps, OverlayTextProps, ToolbarButtonProps, ToolbarProps, RichTextInputProps, } from './types';

package/src/index.ts

@@ -37,6 +37,11 @@ export {
   segmentToTextStyle,
   segmentsToTextStyles,
 } from './utils/styleMapper';
+export {
+  serializeSegments,
+  segmentsToMarkdown,
+  segmentsToHTML,
+} from './utils/serializer';
 
 // ─── Constants ───────────────────────────────────────────────────────────────
 export {
@@ -53,6 +58,7 @@ export type {
   FormatType,
   HeadingLevel,
   ListType,
+  OutputFormat,
   FormatStyle,
   StyledSegment,
   SelectionRange,

package/src/types/index.d.ts

@@ -11,6 +11,10 @@ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'none';
  * List type for a line/paragraph.
  */
 export type ListType = 'bullet' | 'ordered' | 'none';
+/**
+ * Serialized output formats supported by the editor.
+ */
+export type OutputFormat = 'markdown' | 'html';
 /**
  * Inline formatting styles attached to a text segment.
  */
@@ -79,6 +83,8 @@ export interface RichTextActions {
     isFormatActive: (format: FormatType) => boolean;
     /** Get the effective shared style at the current cursor/selection. */
     getSelectionStyle: () => FormatStyle;
+    /** Serialize the current content as markdown or HTML. */
+    getOutput: (format?: OutputFormat) => string;
     /** Get the full plain text content. */
     getPlainText: () => string;
     /** Export the segments as a serializable JSON array. */
@@ -103,10 +109,16 @@ export interface RichTextTheme {
     containerStyle?: ViewStyle;
     /** Style for the TextInput. */
     inputStyle?: TextStyle;
-    /** Style for the overlay text container. */
+    /** Style for the legacy overlay text container. */
     overlayContainerStyle?: ViewStyle;
     /** Base text style applied to all segments before formatting. */
     baseTextStyle?: TextStyle;
+    /** Style for the serialized output container. */
+    outputContainerStyle?: ViewStyle;
+    /** Label style for the serialized output header. */
+    outputLabelStyle?: TextStyle;
+    /** Style for the serialized output text. */
+    outputTextStyle?: TextStyle;
     /** Style for the toolbar container. */
     toolbarStyle?: ViewStyle;
     /** Style for toolbar buttons. */
@@ -239,6 +251,12 @@ export interface RichTextInputProps {
     toolbarItems?: ToolbarItem[];
     /** Theme configuration. */
     theme?: RichTextTheme;
+    /** Whether to show the serialized output preview below the input. */
+    showOutputPreview?: boolean;
+    /** Format used for the serialized output preview. */
+    outputFormat?: OutputFormat;
+    /** Callback when the serialized output changes. */
+    onChangeOutput?: (output: string, format: OutputFormat) => void;
     /** Whether multiline input is enabled. */
     multiline?: boolean;
     /** Minimum height for the input area. */

package/src/types/index.ts

@@ -22,6 +22,11 @@ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'none';
  */
 export type ListType = 'bullet' | 'ordered' | 'none';
 
+/**
+ * Serialized output formats supported by the editor.
+ */
+export type OutputFormat = 'markdown' | 'html';
+
 // ─── Style Types ─────────────────────────────────────────────────────────────
 
 /**
@@ -105,6 +110,8 @@ export interface RichTextActions {
   isFormatActive: (format: FormatType) => boolean;
   /** Get the effective shared style at the current cursor/selection. */
   getSelectionStyle: () => FormatStyle;
+  /** Serialize the current content as markdown or HTML. */
+  getOutput: (format?: OutputFormat) => string;
   /** Get the full plain text content. */
   getPlainText: () => string;
   /** Export the segments as a serializable JSON array. */
@@ -135,10 +142,16 @@ export interface RichTextTheme {
   containerStyle?: ViewStyle;
   /** Style for the TextInput. */
   inputStyle?: TextStyle;
-  /** Style for the overlay text container. */
+  /** Style for the legacy overlay text container. */
   overlayContainerStyle?: ViewStyle;
   /** Base text style applied to all segments before formatting. */
   baseTextStyle?: TextStyle;
+  /** Style for the serialized output container. */
+  outputContainerStyle?: ViewStyle;
+  /** Label style for the serialized output header. */
+  outputLabelStyle?: TextStyle;
+  /** Style for the serialized output text. */
+  outputTextStyle?: TextStyle;
   /** Style for the toolbar container. */
   toolbarStyle?: ViewStyle;
   /** Style for toolbar buttons. */
@@ -282,6 +295,12 @@ export interface RichTextInputProps {
   toolbarItems?: ToolbarItem[];
   /** Theme configuration. */
   theme?: RichTextTheme;
+  /** Whether to show the serialized output preview below the input. */
+  showOutputPreview?: boolean;
+  /** Format used for the serialized output preview. */
+  outputFormat?: OutputFormat;
+  /** Callback when the serialized output changes. */
+  onChangeOutput?: (output: string, format: OutputFormat) => void;
   /** Whether multiline input is enabled. */
   multiline?: boolean;
   /** Minimum height for the input area. */

package/src/utils/formatter.ts

@@ -8,11 +8,9 @@ import type {
 import {
   createSegment,
   findPositionInSegments,
-  splitSegment,
   mergeAdjacentSegments,
   segmentsToPlainText,
 } from '../utils/parser';
-import { HEADING_FONT_SIZES } from '../constants/defaultStyles';
 
 /**
  * Toggle an inline format (bold, italic, etc.) on the selected range.
@@ -73,9 +71,7 @@ export function setHeadingOnLine(
   const { lineStart, lineEnd } = getLineRange(plainText, selection.start);
 
   const headingStyle: Partial<FormatStyle> = {
-    heading: level,
-    fontSize: HEADING_FONT_SIZES[level],
-    bold: level !== 'none' ? true : undefined,
+    heading: level === 'none' ? undefined : level,
   };
 
   return applyStyleToRange(segments, lineStart, lineEnd, headingStyle);