react-native-richify 1.0.4 → 1.0.6

package/src/hooks/useRichText.ts

@@ -2,10 +2,12 @@ import { useState, useCallback, useRef } from 'react';
 import type {
   StyledSegment,
   FormatStyle,
+  ListType,
   OutputFormat,
   SelectionRange,
   RichTextState,
   RichTextActions,
+  TextAlign,
   UseRichTextReturn,
 } from '../types';
 import { EMPTY_FORMAT_STYLE } from '../constants/defaultStyles';
@@ -91,10 +93,11 @@ export function useRichText(
     (newText: string) => {
       const currentSegments = segmentsRef.current;
       const currentSelection = selectionRef.current;
-      const currentActiveStyles =
+      const currentActiveStyles = sanitizeTypingStyles(
         currentSelection.start === currentSelection.end
           ? activeStylesRef.current
-          : getSelectionStyle(currentSegments, currentSelection);
+          : getSelectionStyle(currentSegments, currentSelection),
+      );
 
       const newSegments = reconcileTextChange(
         currentSegments,
@@ -135,7 +138,7 @@ export function useRichText(
         );
         if (segmentsRef.current.length > 0) {
           const seg = segmentsRef.current[pos.segmentIndex];
-          setActiveStyles({ ...seg.styles });
+          setActiveStyles(sanitizeTypingStyles(seg.styles));
         }
       }
     },
@@ -164,15 +167,18 @@ export function useRichText(
       const safeSegments =
         newSegments.length > 0 ? newSegments : [createSegment('')];
       updateSegments(safeSegments);
+      handleSelectionChange({ start: 0, end: 0 });
+      setActiveStyles({ ...EMPTY_FORMAT_STYLE });
     },
-    [updateSegments],
+    [handleSelectionChange, updateSegments],
   );
 
   const clear = useCallback(() => {
     updateSegments([createSegment('')]);
+    handleSelectionChange({ start: 0, end: 0 });
     setActiveStyles({ ...EMPTY_FORMAT_STYLE });
     preserveActiveStylesRef.current = false;
-  }, [updateSegments]);
+  }, [handleSelectionChange, updateSegments]);
 
   const toggleFormat = useCallback<RichTextActions['toggleFormat']>(
     (format) => {
@@ -204,6 +210,36 @@ export function useRichText(
     [formatting],
   );
 
+  const setListType = useCallback<RichTextActions['setListType']>(
+    (type: ListType) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setListType(type);
+    },
+    [formatting],
+  );
+
+  const setTextAlign = useCallback<RichTextActions['setTextAlign']>(
+    (align: TextAlign) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setTextAlign(align);
+    },
+    [formatting],
+  );
+
+  const setLink = useCallback<RichTextActions['setLink']>(
+    (url) => {
+      if (selectionRef.current.start === selectionRef.current.end) {
+        preserveActiveStylesRef.current = true;
+      }
+      formatting.setLink(url);
+    },
+    [formatting],
+  );
+
   const setColor = useCallback<RichTextActions['setColor']>(
     (color) => {
       if (selectionRef.current.start === selectionRef.current.end) {
@@ -234,6 +270,41 @@ export function useRichText(
     [formatting],
   );
 
+  const insertImage = useCallback<RichTextActions['insertImage']>(
+    (source, options) => {
+      const currentSegments = segmentsRef.current;
+      const currentSelection = selectionRef.current;
+      const plainText = segmentsToPlainText(currentSegments);
+      const start = Math.min(currentSelection.start, currentSelection.end);
+      const end = Math.max(currentSelection.start, currentSelection.end);
+      const placeholder =
+        options?.placeholder ?? buildImagePlaceholder(source, options?.alt);
+      const nextText = `${plainText.slice(0, start)}${placeholder}${plainText.slice(end)}`;
+      const insertionStyles = sanitizeTypingStyles(
+        start === end
+          ? activeStylesRef.current
+          : getSelectionStyle(currentSegments, currentSelection),
+      );
+      const nextSegments = reconcileTextChange(
+        currentSegments,
+        nextText,
+        {
+          ...insertionStyles,
+          imageSrc: source,
+          imageAlt: options?.alt,
+        },
+      );
+
+      updateSegments(nextSegments);
+      handleSelectionChange({
+        start: start + placeholder.length,
+        end: start + placeholder.length,
+      });
+      preserveActiveStylesRef.current = false;
+    },
+    [handleSelectionChange, updateSegments],
+  );
+
   // ─── Build Return Value ──────────────────────────────────────────────────
 
   const state: RichTextState = {
@@ -246,6 +317,10 @@ export function useRichText(
     toggleFormat,
     setStyleProperty,
     setHeading,
+    setListType,
+    setTextAlign,
+    setLink,
+    insertImage,
     setColor,
     setBackgroundColor,
     setFontSize,
@@ -262,3 +337,24 @@ export function useRichText(
 
   return { state, actions };
 }
+
+function sanitizeTypingStyles(style: FormatStyle): FormatStyle {
+  return {
+    ...style,
+    imageSrc: undefined,
+    imageAlt: undefined,
+  };
+}
+
+function buildImagePlaceholder(source: string, alt?: string): string {
+  if (alt && alt.trim().length > 0) {
+    return `[Image: ${alt.trim()}]`;
+  }
+
+  const fileName = source.split('/').pop()?.split('?')[0]?.trim();
+  if (fileName) {
+    return `[Image: ${fileName}]`;
+  }
+
+  return '[Image]';
+}

package/src/index.d.ts

@@ -13,4 +13,4 @@ export { toggleFormatOnSelection, setStyleOnSelection, setHeadingOnLine, isForma
 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, OutputFormat, FormatStyle, StyledSegment, SelectionRange, RichTextState, RichTextActions, UseRichTextReturn, RichTextTheme, ToolbarItem, ToolbarButtonRenderProps, ToolbarRenderProps, OverlayTextProps, ToolbarButtonProps, ToolbarProps, RichTextInputProps, } from './types';
+export type { FormatType, HeadingLevel, ListType, TextAlign, OutputFormat, OutputPreviewMode, FormatStyle, StyledSegment, SelectionRange, RichTextState, RichTextActions, UseRichTextReturn, RichTextTheme, ToolbarItem, ToolbarButtonRenderProps, ToolbarRenderProps, LinkRequestPayload, ImageRequestPayload, OverlayTextProps, ToolbarButtonProps, ToolbarProps, RichTextInputProps, } from './types';

package/src/index.ts

@@ -58,7 +58,9 @@ export type {
   FormatType,
   HeadingLevel,
   ListType,
+  TextAlign,
   OutputFormat,
+  OutputPreviewMode,
   FormatStyle,
   StyledSegment,
   SelectionRange,
@@ -69,6 +71,8 @@ export type {
   ToolbarItem,
   ToolbarButtonRenderProps,
   ToolbarRenderProps,
+  LinkRequestPayload,
+  ImageRequestPayload,
   OverlayTextProps,
   ToolbarButtonProps,
   ToolbarProps,

package/src/types/index.d.ts

@@ -11,10 +11,18 @@ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'none';
  * List type for a line/paragraph.
  */
 export type ListType = 'bullet' | 'ordered' | 'none';
+/**
+ * Paragraph alignment presets.
+ */
+export type TextAlign = 'left' | 'center' | 'right';
 /**
  * Serialized output formats supported by the editor.
  */
 export type OutputFormat = 'markdown' | 'html';
+/**
+ * Output preview modes supported by the editor.
+ */
+export type OutputPreviewMode = 'literal' | 'rendered';
 /**
  * Inline formatting styles attached to a text segment.
  */
@@ -28,6 +36,11 @@ export interface FormatStyle {
     backgroundColor?: string;
     fontSize?: number;
     heading?: HeadingLevel;
+    listType?: ListType;
+    textAlign?: TextAlign;
+    link?: string;
+    imageSrc?: string;
+    imageAlt?: string;
 }
 /**
  * A segment of text with uniform formatting.
@@ -69,6 +82,17 @@ export interface RichTextActions {
     setStyleProperty: <K extends keyof FormatStyle>(key: K, value: FormatStyle[K]) => void;
     /** Apply a heading level to the current line. */
     setHeading: (level: HeadingLevel) => void;
+    /** Apply a list style to the current line. */
+    setListType: (type: ListType) => void;
+    /** Apply paragraph alignment to the current line. */
+    setTextAlign: (align: TextAlign) => void;
+    /** Apply or clear a hyperlink on the current selection. */
+    setLink: (url?: string) => void;
+    /** Insert an image placeholder into the document. */
+    insertImage: (source: string, options?: {
+        alt?: string;
+        placeholder?: string;
+    }) => void;
     /** Set the text color for the current selection. */
     setColor: (color: string) => void;
     /** Set the background color for the current selection. */
@@ -119,6 +143,8 @@ export interface RichTextTheme {
     outputLabelStyle?: TextStyle;
     /** Style for the serialized output text. */
     outputTextStyle?: TextStyle;
+    /** Style for the rendered output preview content. */
+    renderedOutputStyle?: ViewStyle;
     /** Style for the toolbar container. */
     toolbarStyle?: ViewStyle;
     /** Style for toolbar buttons. */
@@ -145,6 +171,8 @@ export interface RichTextTheme {
         toolbarBackground?: string;
         /** Toolbar border color. */
         toolbarBorder?: string;
+        /** Default link color. */
+        link?: string;
         /** Cursor / caret color. */
         cursor?: ColorValue;
     };
@@ -161,6 +189,16 @@ export interface ToolbarItem {
     format?: FormatType;
     /** The heading level this button sets. */
     heading?: HeadingLevel;
+    /** The list type this button sets. */
+    listType?: ListType;
+    /** The alignment this button sets. */
+    textAlign?: TextAlign;
+    /** The output format this button toggles to. */
+    outputFormat?: OutputFormat;
+    /** The output preview mode this button toggles to. */
+    outputPreviewMode?: OutputPreviewMode;
+    /** Special toolbar action. */
+    actionType?: 'link' | 'image';
     /** Custom action handler (overrides default behavior). */
     onPress?: () => void;
     /** Whether this item is currently active. */
@@ -183,6 +221,33 @@ export interface ToolbarRenderProps {
     items: ToolbarItem[];
     state: RichTextState;
     actions: RichTextActions;
+    outputFormat: OutputFormat;
+    outputPreviewMode: OutputPreviewMode;
+    onOutputFormatChange: (format: OutputFormat) => void;
+    onOutputPreviewModeChange: (mode: OutputPreviewMode) => void;
+    onRequestLink?: () => void;
+    onRequestImage?: () => void;
+}
+/**
+ * Payload passed when the built-in link button requests a URL.
+ */
+export interface LinkRequestPayload {
+    /** Selected plain text at the time of the request. */
+    selectedText: string;
+    /** Existing URL on the selection, when present. */
+    currentUrl?: string;
+    /** Apply or clear the URL on the current selection. */
+    applyLink: (url?: string) => void;
+}
+/**
+ * Payload passed when the built-in image button requests an image source.
+ */
+export interface ImageRequestPayload {
+    /** Insert an image placeholder into the document. */
+    insertImage: (source: string, options?: {
+        alt?: string;
+        placeholder?: string;
+    }) => void;
 }
 /**
  * Props for the OverlayText component.
@@ -224,6 +289,18 @@ export interface ToolbarProps {
     theme?: RichTextTheme;
     /** Whether to show the toolbar. */
     visible?: boolean;
+    /** Currently selected serialized output format. */
+    outputFormat?: OutputFormat;
+    /** Currently selected preview mode. */
+    outputPreviewMode?: OutputPreviewMode;
+    /** Called when the output format changes from the toolbar. */
+    onOutputFormatChange?: (format: OutputFormat) => void;
+    /** Called when the preview mode changes from the toolbar. */
+    onOutputPreviewModeChange?: (mode: OutputPreviewMode) => void;
+    /** Called when the link button is pressed. */
+    onRequestLink?: () => void;
+    /** Called when the image button is pressed. */
+    onRequestImage?: () => void;
     /** Custom render function for the entire toolbar. */
     renderToolbar?: (props: ToolbarRenderProps) => React.ReactElement | null;
 }
@@ -253,10 +330,26 @@ export interface RichTextInputProps {
     theme?: RichTextTheme;
     /** Whether to show the serialized output preview below the input. */
     showOutputPreview?: boolean;
-    /** Format used for the serialized output preview. */
+    /** Controlled format used for the serialized output preview. */
     outputFormat?: OutputFormat;
+    /** Initial format used for the serialized output preview. */
+    defaultOutputFormat?: OutputFormat;
+    /** Controlled preview mode for the output panel. */
+    outputPreviewMode?: OutputPreviewMode;
+    /** Initial preview mode for the output panel. */
+    defaultOutputPreviewMode?: OutputPreviewMode;
+    /** Maximum height for the output preview panel. */
+    maxOutputHeight?: number;
     /** Callback when the serialized output changes. */
     onChangeOutput?: (output: string, format: OutputFormat) => void;
+    /** Callback when the output format changes. */
+    onChangeOutputFormat?: (format: OutputFormat) => void;
+    /** Callback when the output preview mode changes. */
+    onChangeOutputPreviewMode?: (mode: OutputPreviewMode) => void;
+    /** Invoked when the built-in link button needs a URL. */
+    onRequestLink?: (payload: LinkRequestPayload) => void;
+    /** Invoked when the built-in image button needs an image source. */
+    onRequestImage?: (payload: ImageRequestPayload) => void;
     /** Whether multiline input is enabled. */
     multiline?: boolean;
     /** Minimum height for the input area. */

package/src/types/index.ts

@@ -22,11 +22,21 @@ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'none';
  */
 export type ListType = 'bullet' | 'ordered' | 'none';
 
+/**
+ * Paragraph alignment presets.
+ */
+export type TextAlign = 'left' | 'center' | 'right';
+
 /**
  * Serialized output formats supported by the editor.
  */
 export type OutputFormat = 'markdown' | 'html';
 
+/**
+ * Output preview modes supported by the editor.
+ */
+export type OutputPreviewMode = 'literal' | 'rendered';
+
 // ─── Style Types ─────────────────────────────────────────────────────────────
 
 /**
@@ -42,6 +52,11 @@ export interface FormatStyle {
   backgroundColor?: string;
   fontSize?: number;
   heading?: HeadingLevel;
+  listType?: ListType;
+  textAlign?: TextAlign;
+  link?: string;
+  imageSrc?: string;
+  imageAlt?: string;
 }
 
 /**
@@ -96,6 +111,20 @@ export interface RichTextActions {
   ) => void;
   /** Apply a heading level to the current line. */
   setHeading: (level: HeadingLevel) => void;
+  /** Apply a list style to the current line. */
+  setListType: (type: ListType) => void;
+  /** Apply paragraph alignment to the current line. */
+  setTextAlign: (align: TextAlign) => void;
+  /** Apply or clear a hyperlink on the current selection. */
+  setLink: (url?: string) => void;
+  /** Insert an image placeholder into the document. */
+  insertImage: (
+    source: string,
+    options?: {
+      alt?: string;
+      placeholder?: string;
+    },
+  ) => void;
   /** Set the text color for the current selection. */
   setColor: (color: string) => void;
   /** Set the background color for the current selection. */
@@ -152,6 +181,8 @@ export interface RichTextTheme {
   outputLabelStyle?: TextStyle;
   /** Style for the serialized output text. */
   outputTextStyle?: TextStyle;
+  /** Style for the rendered output preview content. */
+  renderedOutputStyle?: ViewStyle;
   /** Style for the toolbar container. */
   toolbarStyle?: ViewStyle;
   /** Style for toolbar buttons. */
@@ -178,6 +209,8 @@ export interface RichTextTheme {
     toolbarBackground?: string;
     /** Toolbar border color. */
     toolbarBorder?: string;
+    /** Default link color. */
+    link?: string;
     /** Cursor / caret color. */
     cursor?: ColorValue;
   };
@@ -197,6 +230,16 @@ export interface ToolbarItem {
   format?: FormatType;
   /** The heading level this button sets. */
   heading?: HeadingLevel;
+  /** The list type this button sets. */
+  listType?: ListType;
+  /** The alignment this button sets. */
+  textAlign?: TextAlign;
+  /** The output format this button toggles to. */
+  outputFormat?: OutputFormat;
+  /** The output preview mode this button toggles to. */
+  outputPreviewMode?: OutputPreviewMode;
+  /** Special toolbar action. */
+  actionType?: 'link' | 'image';
   /** Custom action handler (overrides default behavior). */
   onPress?: () => void;
   /** Whether this item is currently active. */
@@ -221,6 +264,38 @@ export interface ToolbarRenderProps {
   items: ToolbarItem[];
   state: RichTextState;
   actions: RichTextActions;
+  outputFormat: OutputFormat;
+  outputPreviewMode: OutputPreviewMode;
+  onOutputFormatChange: (format: OutputFormat) => void;
+  onOutputPreviewModeChange: (mode: OutputPreviewMode) => void;
+  onRequestLink?: () => void;
+  onRequestImage?: () => void;
+}
+
+/**
+ * Payload passed when the built-in link button requests a URL.
+ */
+export interface LinkRequestPayload {
+  /** Selected plain text at the time of the request. */
+  selectedText: string;
+  /** Existing URL on the selection, when present. */
+  currentUrl?: string;
+  /** Apply or clear the URL on the current selection. */
+  applyLink: (url?: string) => void;
+}
+
+/**
+ * Payload passed when the built-in image button requests an image source.
+ */
+export interface ImageRequestPayload {
+  /** Insert an image placeholder into the document. */
+  insertImage: (
+    source: string,
+    options?: {
+      alt?: string;
+      placeholder?: string;
+    },
+  ) => void;
 }
 
 // ─── Component Props ─────────────────────────────────────────────────────────
@@ -267,6 +342,18 @@ export interface ToolbarProps {
   theme?: RichTextTheme;
   /** Whether to show the toolbar. */
   visible?: boolean;
+  /** Currently selected serialized output format. */
+  outputFormat?: OutputFormat;
+  /** Currently selected preview mode. */
+  outputPreviewMode?: OutputPreviewMode;
+  /** Called when the output format changes from the toolbar. */
+  onOutputFormatChange?: (format: OutputFormat) => void;
+  /** Called when the preview mode changes from the toolbar. */
+  onOutputPreviewModeChange?: (mode: OutputPreviewMode) => void;
+  /** Called when the link button is pressed. */
+  onRequestLink?: () => void;
+  /** Called when the image button is pressed. */
+  onRequestImage?: () => void;
   /** Custom render function for the entire toolbar. */
   renderToolbar?: (props: ToolbarRenderProps) => React.ReactElement | null;
 }
@@ -297,10 +384,26 @@ export interface RichTextInputProps {
   theme?: RichTextTheme;
   /** Whether to show the serialized output preview below the input. */
   showOutputPreview?: boolean;
-  /** Format used for the serialized output preview. */
+  /** Controlled format used for the serialized output preview. */
   outputFormat?: OutputFormat;
+  /** Initial format used for the serialized output preview. */
+  defaultOutputFormat?: OutputFormat;
+  /** Controlled preview mode for the output panel. */
+  outputPreviewMode?: OutputPreviewMode;
+  /** Initial preview mode for the output panel. */
+  defaultOutputPreviewMode?: OutputPreviewMode;
+  /** Maximum height for the output preview panel. */
+  maxOutputHeight?: number;
   /** Callback when the serialized output changes. */
   onChangeOutput?: (output: string, format: OutputFormat) => void;
+  /** Callback when the output format changes. */
+  onChangeOutputFormat?: (format: OutputFormat) => void;
+  /** Callback when the output preview mode changes. */
+  onChangeOutputPreviewMode?: (mode: OutputPreviewMode) => void;
+  /** Invoked when the built-in link button needs a URL. */
+  onRequestLink?: (payload: LinkRequestPayload) => void;
+  /** Invoked when the built-in image button needs an image source. */
+  onRequestImage?: (payload: ImageRequestPayload) => void;
   /** Whether multiline input is enabled. */
   multiline?: boolean;
   /** Minimum height for the input area. */

package/src/utils/formatter.ts

@@ -3,7 +3,9 @@ import type {
   FormatType,
   FormatStyle,
   HeadingLevel,
+  ListType,
   SelectionRange,
+  TextAlign,
 } from '../types';
 import {
   createSegment,
@@ -67,14 +69,37 @@ export function setHeadingOnLine(
   selection: SelectionRange,
   level: HeadingLevel,
 ): StyledSegment[] {
-  const plainText = segmentsToPlainText(segments);
-  const { lineStart, lineEnd } = getLineRange(plainText, selection.start);
-
-  const headingStyle: Partial<FormatStyle> = {
+  return setLineStyleOnSelection(segments, selection, {
     heading: level === 'none' ? undefined : level,
-  };
+    listType: level === 'none' ? undefined : undefined,
+  });
+}
 
-  return applyStyleToRange(segments, lineStart, lineEnd, headingStyle);
+/**
+ * Apply a list type to the lines containing the cursor/selection.
+ */
+export function setListTypeOnLine(
+  segments: StyledSegment[],
+  selection: SelectionRange,
+  listType: ListType,
+): StyledSegment[] {
+  return setLineStyleOnSelection(segments, selection, {
+    listType: listType === 'none' ? undefined : listType,
+    heading: listType === 'none' ? undefined : undefined,
+  });
+}
+
+/**
+ * Apply text alignment to the lines containing the cursor/selection.
+ */
+export function setTextAlignOnLine(
+  segments: StyledSegment[],
+  selection: SelectionRange,
+  textAlign?: TextAlign,
+): StyledSegment[] {
+  return setLineStyleOnSelection(segments, selection, {
+    textAlign,
+  });
 }
 
 /**
@@ -138,6 +163,11 @@ export function getSelectionStyle(
       result.backgroundColor = undefined;
     if (result.fontSize !== s.fontSize) result.fontSize = undefined;
     if (result.heading !== s.heading) result.heading = undefined;
+    if (result.listType !== s.listType) result.listType = undefined;
+    if (result.textAlign !== s.textAlign) result.textAlign = undefined;
+    if (result.link !== s.link) result.link = undefined;
+    if (result.imageSrc !== s.imageSrc) result.imageSrc = undefined;
+    if (result.imageAlt !== s.imageAlt) result.imageAlt = undefined;
   }
 
   return result;
@@ -248,6 +278,17 @@ function applyStyleToRange(
   return mergeAdjacentSegments(result);
 }
 
+function setLineStyleOnSelection(
+  segments: StyledSegment[],
+  selection: SelectionRange,
+  styleDelta: Partial<FormatStyle>,
+): StyledSegment[] {
+  const plainText = segmentsToPlainText(segments);
+  const { lineStart, lineEnd } = getSelectionLineRange(plainText, selection);
+
+  return applyStyleToRange(segments, lineStart, lineEnd, styleDelta);
+}
+
 /**
  * Get the line start and end positions for the line containing the given position.
  */
@@ -268,5 +309,18 @@ function getLineRange(
   return { lineStart, lineEnd };
 }
 
+function getSelectionLineRange(
+  text: string,
+  selection: SelectionRange,
+): { lineStart: number; lineEnd: number } {
+  const normalized = normalizeSelection(selection);
+  const lineStart = getLineRange(text, normalized.start).lineStart;
+  const effectiveEnd =
+    normalized.end > normalized.start ? normalized.end - 1 : normalized.end;
+  const lineEnd = getLineRange(text, effectiveEnd).lineEnd;
+
+  return { lineStart, lineEnd };
+}
+
 // Re-export for convenience
 export { createSegment } from '../utils/parser';

package/src/utils/parser.ts

@@ -77,7 +77,12 @@ export function areStylesEqual(a: FormatStyle, b: FormatStyle): boolean {
     (a.color ?? undefined) === (b.color ?? undefined) &&
     (a.backgroundColor ?? undefined) === (b.backgroundColor ?? undefined) &&
     (a.fontSize ?? undefined) === (b.fontSize ?? undefined) &&
-    (a.heading ?? undefined) === (b.heading ?? undefined)
+    (a.heading ?? undefined) === (b.heading ?? undefined) &&
+    (a.listType ?? undefined) === (b.listType ?? undefined) &&
+    (a.textAlign ?? undefined) === (b.textAlign ?? undefined) &&
+    (a.link ?? undefined) === (b.link ?? undefined) &&
+    (a.imageSrc ?? undefined) === (b.imageSrc ?? undefined) &&
+    (a.imageAlt ?? undefined) === (b.imageAlt ?? undefined)
   );
 }