react-native-enriched-html 0.0.0 → 1.0.1

package/src/web/styleConversion/enrichedInputStyleToCSSProperties.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from 'react';
+import type { EnrichedInputStyle } from '../../types';
+import {
+  enrichedBaseStyleToCSSProperties,
+  type StyleConversionExtraOptions,
+} from './enrichedBaseStyleToCSSProperties';
+
+export function enrichedInputStyleToCSSProperties(
+  style: EnrichedInputStyle,
+  extraOptions?: StyleConversionExtraOptions
+): CSSProperties {
+  return enrichedBaseStyleToCSSProperties(style, extraOptions);
+}

package/src/web/styleConversion/enrichedTextStyleToCSSProperties.ts

@@ -0,0 +1,53 @@
+import type { CSSProperties } from 'react';
+import type { TextStyle } from 'react-native';
+import { enrichedBaseStyleToCSSProperties } from './enrichedBaseStyleToCSSProperties';
+import { toColor } from './toColor';
+
+export function enrichedTextStyleToCSSProperties(
+  style: TextStyle
+): CSSProperties {
+  const css: CSSProperties = {
+    ...enrichedBaseStyleToCSSProperties(style, { scrollEnabled: false }),
+
+    // Text-only properties
+    // textAlign: RN 'auto' has no CSS equivalent
+    textAlign: style.textAlign !== 'auto' ? style.textAlign : undefined,
+    textTransform: style.textTransform,
+    textDecorationLine: style.textDecorationLine,
+    textDecorationStyle: style.textDecorationStyle,
+    textDecorationColor: toColor(style.textDecorationColor),
+    textShadow: resolveTextShadow(style),
+    // userSelect: RN 'contain' has no CSS equivalent
+    userSelect: style.userSelect !== 'contain' ? style.userSelect : undefined,
+    fontVariant: Array.isArray(style.fontVariant)
+      ? style.fontVariant.join(' ')
+      : undefined,
+    // writingDirection: RN 'auto' has no CSS equivalent
+    direction:
+      style.writingDirection !== 'auto' ? style.writingDirection : undefined,
+    // verticalAlign: RN 'auto' has no CSS equivalent
+    verticalAlign:
+      style.verticalAlign !== 'auto' ? style.verticalAlign : undefined,
+  };
+
+  return Object.fromEntries(
+    Object.entries(css).filter(([, v]) => v !== undefined)
+  );
+}
+
+function resolveTextShadow(style: TextStyle): string | undefined {
+  const { textShadowColor, textShadowOffset, textShadowRadius } = style;
+  if (
+    textShadowColor == null &&
+    textShadowOffset == null &&
+    textShadowRadius == null
+  ) {
+    return undefined;
+  }
+  const x = textShadowOffset?.width ?? 0;
+  const y = textShadowOffset?.height ?? 0;
+  const blur = textShadowRadius ?? 0;
+  const color = toColor(textShadowColor);
+  const offset = `${x}px ${y}px ${blur}px`;
+  return color ? `${offset} ${color}` : offset;
+}

package/src/web/styleConversion/enrichedThemingToCSSProperties.ts

@@ -0,0 +1,34 @@
+import type { CSSProperties } from 'react';
+import type { ColorValue } from 'react-native';
+import { toColor } from './toColor';
+
+type EnrichedInputThemingStyle = Partial<
+  Pick<CSSProperties, 'caretColor'> & {
+    '--et-placeholder-text-color': string;
+    '--et-selection-color': string;
+  }
+>;
+
+export interface EnrichedInputThemingColors {
+  cursorColor?: ColorValue;
+  placeholderTextColor?: ColorValue;
+  selectionColor?: ColorValue;
+}
+
+export function enrichedInputThemingToCSSProperties({
+  cursorColor,
+  placeholderTextColor,
+  selectionColor,
+}: EnrichedInputThemingColors): CSSProperties {
+  const extra: EnrichedInputThemingStyle = {};
+  const caret = toColor(cursorColor);
+  if (caret) extra.caretColor = caret;
+
+  const placeholderCss = toColor(placeholderTextColor);
+  if (placeholderCss) extra['--et-placeholder-text-color'] = placeholderCss;
+
+  const selectionCss = toColor(selectionColor);
+  if (selectionCss) extra['--et-selection-color'] = selectionCss;
+
+  return extra;
+}

package/src/web/styleConversion/htmlStyleToCSSVariables.ts

@@ -0,0 +1,277 @@
+import type { CSSProperties } from 'react';
+import type { ColorValue } from 'react-native';
+import type {
+  EnrichedTextHtmlStyle,
+  EnrichedTextMentionStyleProperties,
+  HtmlStyle,
+  MentionStyleProperties,
+} from '../../types';
+import {
+  DEFAULT_ENRICHED_TEXT_STYLE,
+  DEFAULT_HTML_STYLE,
+} from '../../utils/defaultHtmlStyle';
+import { expandMentionStylesForIndicators } from '../../utils/expandMentionStylesForIndicators';
+import { HEADING_TAGS } from '../formats/EnrichedHeading';
+import {
+  indicatorToMentionCssKey,
+  MENTION_STYLE_DEFAULT_KEY,
+} from './mentionIndicatorCssKey';
+import { toColor } from './toColor';
+import { isMentionStyleRecord } from '../../utils/isMentionStyleRecord';
+
+export function mergeWithDefaultHtmlStyle(
+  htmlStyle?: HtmlStyle,
+  htmlStyleToMergeWith: HtmlStyle = DEFAULT_HTML_STYLE
+): Required<HtmlStyle> {
+  const style = htmlStyle ?? {};
+
+  const mentionMap = expandMentionStylesForIndicatorsIncludeDefault(
+    style,
+    htmlStyleToMergeWith
+  );
+  const converted: HtmlStyle = {
+    ...style,
+    mention: mentionMap,
+  };
+
+  const merged: Record<string, unknown> = { ...htmlStyleToMergeWith };
+
+  for (const key in converted) {
+    if (key === 'mention') {
+      merged[key] = { ...(converted.mention as object) };
+      continue;
+    }
+    merged[key] = {
+      ...htmlStyleToMergeWith[key as keyof HtmlStyle],
+      ...(converted[key as keyof HtmlStyle] as object),
+    };
+  }
+
+  return merged as Required<HtmlStyle>;
+}
+
+export function mergeWithDefaultEnrichedTextHtmlStyle(
+  htmlStyle?: EnrichedTextHtmlStyle
+): Required<EnrichedTextHtmlStyle> {
+  const merged = mergeWithDefaultHtmlStyle(
+    htmlStyle as HtmlStyle,
+    DEFAULT_ENRICHED_TEXT_STYLE
+  );
+
+  const a = {
+    ...DEFAULT_ENRICHED_TEXT_STYLE.a,
+    ...htmlStyle?.a,
+  };
+
+  const mentionDefaults = DEFAULT_ENRICHED_TEXT_STYLE.mention;
+  const passedMentionMap = htmlStyle?.mention;
+  const mergedMentionMap = merged.mention as Record<
+    string,
+    EnrichedTextMentionStyleProperties
+  >;
+  const mention: Record<string, EnrichedTextMentionStyleProperties> = {};
+  for (const indicator in mergedMentionMap) {
+    mention[indicator] = {
+      ...mentionDefaults,
+      ...(isMentionStyleRecord(passedMentionMap)
+        ? (passedMentionMap[indicator] ??
+          passedMentionMap[MENTION_STYLE_DEFAULT_KEY])
+        : passedMentionMap),
+    };
+  }
+
+  return {
+    ...merged,
+    a,
+    mention,
+  } as Required<EnrichedTextHtmlStyle>;
+}
+
+const ET_CSS_VARS = {
+  codeColor: '--et-code-color',
+  codeBgColor: '--et-code-bg-color',
+  blockquoteBorderColor: '--et-blockquote-border-color',
+  blockquoteBorderWidth: '--et-blockquote-border-width',
+  blockquoteGapWidth: '--et-blockquote-gap-width',
+  blockquoteColor: '--et-blockquote-color',
+  codeblockBgColor: '--et-codeblock-bg-color',
+  codeblockColor: '--et-codeblock-color',
+  codeblockBorderRadius: '--et-codeblock-border-radius',
+  linkColor: '--et-link-color',
+  linkTextDecorationLine: '--et-link-text-decoration-line',
+  ulBulletColor: '--et-ul-bullet-color',
+  ulBulletSize: '--et-ul-bullet-size',
+  ulMarginLeft: '--et-ul-margin-left',
+  ulGapWidth: '--et-ul-gap-width',
+  olMarginLeft: '--et-ol-margin-left',
+  olGapWidth: '--et-ol-gap-width',
+  olMarkerColor: '--et-ol-marker-color',
+  olMarkerFontWeight: '--et-ol-marker-font-weight',
+  checkboxBoxSize: '--et-checkbox-box-size',
+  checkboxGapWidth: '--et-checkbox-gap-width',
+  checkboxMarginLeft: '--et-checkbox-margin-left',
+  checkboxBoxColor: '--et-checkbox-box-color',
+} as const;
+
+export const ET_MENTION_CSS_VARS = {
+  color: (indicator: string) =>
+    `--et-mention-${indicatorToMentionCssKey(indicator)}-color`,
+  backgroundColor: (indicator: string) =>
+    `--et-mention-${indicatorToMentionCssKey(indicator)}-background-color`,
+  textDecorationLine: (indicator: string) =>
+    `--et-mention-${indicatorToMentionCssKey(indicator)}-text-decoration-line`,
+} as const;
+
+function setColorVar(
+  vars: Record<string, string>,
+  name: string,
+  value?: ColorValue
+): void {
+  const c = toColor(value);
+  if (c) vars[name] = c;
+}
+
+function setPxVar(
+  vars: Record<string, string>,
+  name: string,
+  n?: number | null
+): void {
+  if (n != null) vars[name] = `${n}px`;
+}
+
+function applyCodeVars(
+  vars: Record<string, string>,
+  code?: HtmlStyle['code']
+): void {
+  setColorVar(vars, ET_CSS_VARS.codeColor, code?.color);
+  setColorVar(vars, ET_CSS_VARS.codeBgColor, code?.backgroundColor);
+}
+
+function applyHeadingVars(
+  vars: Record<string, string>,
+  htmlStyle?: HtmlStyle
+): void {
+  for (const level of HEADING_TAGS) {
+    const h = htmlStyle?.[level];
+    if (h?.fontSize != null)
+      vars[`--et-${level}-font-size`] = `${h.fontSize}px`;
+    if (h?.bold != null)
+      vars[`--et-${level}-font-weight`] = h.bold ? 'bold' : 'normal';
+  }
+}
+
+function applyBlockquoteVars(
+  vars: Record<string, string>,
+  bq?: HtmlStyle['blockquote']
+): void {
+  setColorVar(vars, ET_CSS_VARS.blockquoteBorderColor, bq?.borderColor);
+  setPxVar(vars, ET_CSS_VARS.blockquoteBorderWidth, bq?.borderWidth);
+  setPxVar(vars, ET_CSS_VARS.blockquoteGapWidth, bq?.gapWidth);
+  setColorVar(vars, ET_CSS_VARS.blockquoteColor, bq?.color);
+}
+
+function applyCodeblockVars(
+  vars: Record<string, string>,
+  cb?: HtmlStyle['codeblock']
+): void {
+  setColorVar(vars, ET_CSS_VARS.codeblockBgColor, cb?.backgroundColor);
+  setColorVar(vars, ET_CSS_VARS.codeblockColor, cb?.color);
+  setPxVar(vars, ET_CSS_VARS.codeblockBorderRadius, cb?.borderRadius);
+}
+
+function applyLinkVars(
+  vars: Record<string, string>,
+  anchor?: HtmlStyle['a']
+): void {
+  setColorVar(vars, ET_CSS_VARS.linkColor, anchor?.color);
+  if (anchor?.textDecorationLine != null) {
+    vars[ET_CSS_VARS.linkTextDecorationLine] = anchor.textDecorationLine;
+  }
+}
+
+function applyUnorderedListVars(
+  vars: Record<string, string>,
+  ul?: HtmlStyle['ul']
+): void {
+  setColorVar(vars, ET_CSS_VARS.ulBulletColor, ul?.bulletColor);
+  setPxVar(vars, ET_CSS_VARS.ulBulletSize, ul?.bulletSize);
+  setPxVar(vars, ET_CSS_VARS.ulMarginLeft, ul?.marginLeft);
+  setPxVar(vars, ET_CSS_VARS.ulGapWidth, ul?.gapWidth);
+}
+
+function applyOrderedListVars(
+  vars: Record<string, string>,
+  ol?: HtmlStyle['ol']
+): void {
+  setPxVar(vars, ET_CSS_VARS.olMarginLeft, ol?.marginLeft);
+  setPxVar(vars, ET_CSS_VARS.olGapWidth, ol?.gapWidth);
+  setColorVar(vars, ET_CSS_VARS.olMarkerColor, ol?.markerColor);
+  if (ol?.markerFontWeight != null) {
+    vars[ET_CSS_VARS.olMarkerFontWeight] = String(ol.markerFontWeight);
+  }
+}
+
+function applyCheckboxListVars(
+  vars: Record<string, string>,
+  ulCheckbox?: HtmlStyle['ulCheckbox']
+): void {
+  setPxVar(vars, ET_CSS_VARS.checkboxBoxSize, ulCheckbox?.boxSize);
+  setPxVar(vars, ET_CSS_VARS.checkboxGapWidth, ulCheckbox?.gapWidth);
+  setPxVar(vars, ET_CSS_VARS.checkboxMarginLeft, ulCheckbox?.marginLeft);
+  setColorVar(vars, ET_CSS_VARS.checkboxBoxColor, ulCheckbox?.boxColor);
+}
+
+function applyMentionVars(
+  vars: Record<string, string>,
+  mention: Record<string, MentionStyleProperties>
+): void {
+  if (!mention) return;
+
+  for (const [indicator, mentionStyle] of Object.entries(mention)) {
+    setColorVar(vars, ET_MENTION_CSS_VARS.color(indicator), mentionStyle.color);
+    setColorVar(
+      vars,
+      ET_MENTION_CSS_VARS.backgroundColor(indicator),
+      mentionStyle.backgroundColor
+    );
+    if (mentionStyle.textDecorationLine != null) {
+      vars[ET_MENTION_CSS_VARS.textDecorationLine(indicator)] =
+        mentionStyle.textDecorationLine;
+    }
+  }
+}
+
+function expandMentionStylesForIndicatorsIncludeDefault(
+  htmlStyle: HtmlStyle,
+  htmlStyleToMergeWith: HtmlStyle
+) {
+  const mentionIndicators = isMentionStyleRecord(htmlStyle?.mention)
+    ? Object.keys(htmlStyle?.mention)
+    : [];
+
+  if (!mentionIndicators.includes(MENTION_STYLE_DEFAULT_KEY))
+    mentionIndicators.push(MENTION_STYLE_DEFAULT_KEY);
+
+  return expandMentionStylesForIndicators(
+    htmlStyle?.mention,
+    mentionIndicators,
+    htmlStyleToMergeWith
+  );
+}
+
+export function htmlStyleToCSSVariables(htmlStyle: HtmlStyle): CSSProperties {
+  const vars: Record<string, string> = {};
+  applyCodeVars(vars, htmlStyle?.code);
+  applyHeadingVars(vars, htmlStyle);
+  applyBlockquoteVars(vars, htmlStyle?.blockquote);
+  applyCodeblockVars(vars, htmlStyle?.codeblock);
+  applyLinkVars(vars, htmlStyle?.a);
+  applyUnorderedListVars(vars, htmlStyle?.ul);
+  applyOrderedListVars(vars, htmlStyle?.ol);
+  applyCheckboxListVars(vars, htmlStyle?.ulCheckbox);
+  applyMentionVars(
+    vars,
+    htmlStyle.mention as Record<string, MentionStyleProperties>
+  );
+  return vars as CSSProperties;
+}

package/src/web/styleConversion/inlineImageCSSVariables.ts

@@ -0,0 +1,6 @@
+import type { CSSProperties } from 'react';
+import { BROKEN_IMAGE_GLYPH_MASK } from '../constants/brokenImageGlyph';
+
+export const INLINE_IMAGE_CSS_VARIABLES = {
+  '--et-broken-image-glyph': BROKEN_IMAGE_GLYPH_MASK,
+} as CSSProperties;

package/src/web/styleConversion/mentionIndicatorCssKey.ts

@@ -0,0 +1,14 @@
+export const MENTION_STYLE_DEFAULT_KEY = 'default';
+
+export function indicatorToMentionCssKey(indicator: string): string {
+  if (indicator === MENTION_STYLE_DEFAULT_KEY) {
+    return MENTION_STYLE_DEFAULT_KEY;
+  }
+
+  const cp = indicator.codePointAt(0);
+  if (cp === undefined) {
+    return 'u0000';
+  }
+  const hex = cp.toString(16).toUpperCase();
+  return 'u' + hex.padStart(Math.max(4, hex.length), '0');
+}

package/src/web/styleConversion/toColor.ts

@@ -0,0 +1,17 @@
+import type { ColorValue } from 'react-native';
+
+export function toColor(value?: ColorValue): string | undefined {
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number') {
+    // eslint-disable-next-line no-bitwise
+    const r = (value >>> 24) & 0xff;
+    // eslint-disable-next-line no-bitwise
+    const g = (value >>> 16) & 0xff;
+    // eslint-disable-next-line no-bitwise
+    const b = (value >>> 8) & 0xff;
+    // eslint-disable-next-line no-bitwise
+    const a = (value & 0xff) / 255;
+    return `rgba(${r}, ${g}, ${b}, ${a})`;
+  }
+  return undefined;
+}

package/src/web/useImageErrorFallback.ts

@@ -0,0 +1,37 @@
+import { useEffect, type RefObject } from 'react';
+
+/*
+ * Flag images that fail to load so CSS can swap in a broken-image placeholder.
+ */
+export const useImageErrorFallback = (
+  containerRef: RefObject<HTMLElement | null>
+) => {
+  // listen for errors
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleImageError = (e: Event) => {
+      const target = e.target as HTMLElement;
+      if (target && target.tagName && target.tagName.toLowerCase() === 'img') {
+        target.classList.add('error');
+      }
+    };
+
+    container.addEventListener('error', handleImageError, true);
+
+    // handle <img> elements that emitted an error event before we could set up a listener
+    const images =
+      container.querySelectorAll<HTMLImageElement>('img:not(.error)');
+
+    images.forEach((img) => {
+      if (img.complete && img.naturalHeight === 0) {
+        img.classList.add('error');
+      }
+    });
+
+    return () => {
+      container.removeEventListener('error', handleImageError, true);
+    };
+  }, [containerRef]);
+};

package/src/web/useOnChangeHtml.ts

@@ -0,0 +1,14 @@
+import { type Editor } from '@tiptap/react';
+import type { OnChangeHtmlEvent } from '../types';
+import type { NativeSyntheticEvent } from 'react-native';
+import { useOnEditorChange } from './useOnEditorChange';
+import { normalizeHtmlFromTiptap } from './normalization/tiptapHtmlNormalizer';
+
+export const useOnChangeHtml = (
+  editor: Editor,
+  onChangeHtml?: (e: NativeSyntheticEvent<OnChangeHtmlEvent>) => void
+) => {
+  useOnEditorChange(editor, onChangeHtml, (e) =>
+    normalizeHtmlFromTiptap(e.getHTML())
+  );
+};

package/src/web/useOnChangeState.ts

@@ -0,0 +1,127 @@
+import { useEffect, useRef } from 'react';
+import { type Editor } from '@tiptap/react';
+import type { OnChangeStateEvent } from '../types';
+import type { NativeSyntheticEvent } from 'react-native';
+import { adaptWebToNativeEvent } from './adaptWebToNativeEvent';
+import {
+  getCurrentAlignment,
+  isAnyParagraphFormatActive,
+  isFormatBlocked,
+} from './formats/formatRules';
+import type { HtmlStyle } from '../types';
+
+export const useOnChangeState = (
+  editor: Editor | null,
+  htmlStyle: Required<HtmlStyle>,
+  onChangeState?: (e: NativeSyntheticEvent<OnChangeStateEvent>) => void
+) => {
+  const lastStateHashRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!editor || !onChangeState) return;
+
+    const handleUpdate = () => {
+      const state = buildState(editor, htmlStyle);
+      const stateHash = hashState(state);
+
+      if (lastStateHashRef.current === stateHash) {
+        return;
+      }
+
+      lastStateHashRef.current = stateHash;
+      onChangeState(adaptWebToNativeEvent(null, state));
+    };
+
+    handleUpdate();
+    editor.on('transaction', handleUpdate);
+
+    return () => {
+      editor.off('transaction', handleUpdate);
+    };
+  }, [editor, onChangeState, htmlStyle]);
+};
+
+function buildState(
+  editor: Editor,
+  htmlStyle: Required<HtmlStyle>
+): OnChangeStateEvent {
+  const isAnyBlockActive = isAnyParagraphFormatActive(editor);
+
+  function inlineFormat(tiptapName: string, isConflicting: boolean) {
+    return {
+      isActive: editor.isActive(tiptapName),
+      isConflicting,
+      isBlocking: isFormatBlocked(tiptapName, editor, htmlStyle),
+    };
+  }
+
+  function paragraphFormat(isActive: boolean, additionalIsConflicting = false) {
+    return {
+      isActive,
+      isConflicting: (!isActive && isAnyBlockActive) || additionalIsConflicting,
+      isBlocking: false,
+    };
+  }
+
+  return {
+    bold: inlineFormat('bold', false),
+    italic: inlineFormat('italic', false),
+    underline: inlineFormat('underline', false),
+    strikeThrough: inlineFormat('strike', false),
+    inlineCode: inlineFormat('code', editor.isActive('link')),
+    h1: paragraphFormat(editor.isActive('heading', { level: 1 })),
+    h2: paragraphFormat(editor.isActive('heading', { level: 2 })),
+    h3: paragraphFormat(editor.isActive('heading', { level: 3 })),
+    h4: paragraphFormat(editor.isActive('heading', { level: 4 })),
+    h5: paragraphFormat(editor.isActive('heading', { level: 5 })),
+    h6: paragraphFormat(editor.isActive('heading', { level: 6 })),
+    blockQuote: paragraphFormat(editor.isActive('blockquote')),
+    codeBlock: paragraphFormat(
+      editor.isActive('codeBlock'),
+      editor.isActive('link')
+    ),
+    orderedList: paragraphFormat(editor.isActive('orderedList')),
+    unorderedList: paragraphFormat(editor.isActive('unorderedList')),
+    checkboxList: paragraphFormat(editor.isActive('checkboxList')),
+    link: inlineFormat(
+      'link',
+      editor.isActive('code') ||
+        editor.isActive('link') ||
+        editor.isActive('codeBlock')
+    ),
+    mention: inlineFormat(
+      'mention',
+      editor.isActive('code') || editor.isActive('codeBlock')
+    ),
+    image: {
+      isActive: editor.isActive('image'),
+      isConflicting: editor.isActive('link'),
+      isBlocking: isFormatBlocked('image', editor, htmlStyle),
+    },
+    alignment: getCurrentAlignment(editor) ?? 'auto',
+  };
+}
+
+function hashState(state: OnChangeStateEvent): string {
+  return Object.values(state)
+    .map((formatState) => {
+      if (typeof formatState === 'string') return formatState;
+      return String(
+        getFormatHash(
+          formatState.isActive,
+          formatState.isConflicting,
+          formatState.isBlocking
+        )
+      );
+    })
+    .join('');
+}
+
+function getFormatHash(
+  isActive: boolean,
+  isConflicting: boolean,
+  isBlocking: boolean
+): number {
+  // eslint-disable-next-line no-bitwise
+  return (+isActive << 2) | (+isConflicting << 1) | (+isBlocking << 0);
+}

package/src/web/useOnChangeText.ts

@@ -0,0 +1,15 @@
+import { type Editor } from '@tiptap/react';
+import type { OnChangeTextEvent } from '../types';
+import type { NativeSyntheticEvent } from 'react-native';
+import { nativeLeafText } from './positionMapping';
+import { useOnEditorChange } from './useOnEditorChange';
+
+export const useOnChangeText = (
+  editor: Editor,
+  onChangeText?: (e: NativeSyntheticEvent<OnChangeTextEvent>) => void
+) => {
+  useOnEditorChange(editor, onChangeText, (e) => {
+    const doc = e.state.doc;
+    return nativeLeafText(doc, 0, doc.content.size);
+  });
+};

package/src/web/useOnEditorChange.ts

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react';
+import { type Editor } from '@tiptap/react';
+import type { NativeSyntheticEvent } from 'react-native';
+import { adaptWebToNativeEvent } from './adaptWebToNativeEvent';
+
+export const useOnEditorChange = <T extends { value: string }>(
+  editor: Editor,
+  handler: ((e: NativeSyntheticEvent<T>) => void) | undefined,
+  getValue: (editor: Editor) => string
+) => {
+  const lastValueRef = useRef('');
+
+  useEffect(() => {
+    if (!handler) return;
+
+    const handleUpdate = () => {
+      const value = getValue(editor);
+
+      if (value !== lastValueRef.current) {
+        lastValueRef.current = value;
+        handler(adaptWebToNativeEvent(null, { value } as T));
+      }
+    };
+
+    handleUpdate();
+
+    editor.on('transaction', handleUpdate);
+
+    return () => {
+      editor.off('transaction', handleUpdate);
+    };
+  }, [editor, handler, getValue]);
+};