react-native-enriched-html 0.0.0 → 1.0.0

package/src/web/styleConversion/buildMentionRulesCSS.ts

@@ -0,0 +1,42 @@
+import type { HtmlStyle, MentionStyleProperties } from '../../types';
+import { isMentionStyleRecord } from '../../utils/isMentionStyleRecord';
+import { ETI_MENTION_CSS_VARS } from './htmlStyleToCSSVariables';
+import { MENTION_STYLE_DEFAULT_KEY } from './mentionIndicatorCssKey';
+
+function escapeIndicatorForCssAttributeSelector(indicator: string): string {
+  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+    return CSS.escape(indicator);
+  }
+  return indicator.replace(/["\\]/g, '\\$&');
+}
+
+export function buildMentionRulesCSS(htmlStyle?: HtmlStyle): string {
+  const mapRaw = htmlStyle?.mention;
+  if (!mapRaw || typeof mapRaw !== 'object' || !isMentionStyleRecord(mapRaw)) {
+    return '';
+  }
+
+  const map: Record<string, MentionStyleProperties> = mapRaw;
+  const keys = Object.keys(map);
+  if (keys.length === 0) {
+    return '';
+  }
+
+  const lines: string[] = [];
+  for (const indicator of keys) {
+    const selector =
+      indicator === MENTION_STYLE_DEFAULT_KEY
+        ? '.eti-editor mention'
+        : `.eti-editor mention[indicator="${escapeIndicatorForCssAttributeSelector(indicator)}"]`;
+
+    lines.push(
+      `${selector} {
+  color: var(${ETI_MENTION_CSS_VARS.color(indicator)});
+  background-color: var(${ETI_MENTION_CSS_VARS.backgroundColor(indicator)});
+  text-decoration-line: var(${ETI_MENTION_CSS_VARS.textDecorationLine(indicator)});
+}`.trim()
+    );
+  }
+
+  return lines.join('\n');
+}

package/src/web/styleConversion/enrichedInputStyleToCSSProperties.ts

@@ -0,0 +1,224 @@
+import type { CSSProperties } from 'react';
+import type { EnrichedInputStyle } from '../../types';
+import type { AnimatableNumericValue, DimensionValue } from 'react-native';
+import { toColor } from './toColor';
+
+interface ExtraOptions {
+  scrollEnabled?: boolean;
+}
+
+export function enrichedInputStyleToCSSProperties(
+  style: EnrichedInputStyle,
+  extraOptions: ExtraOptions = {}
+): CSSProperties {
+  const css: CSSProperties = {
+    // Dimensions
+    width: toPx(style.width),
+    height: toPx(style.height),
+    minWidth: toPx(style.minWidth),
+    maxWidth: toPx(style.maxWidth),
+    minHeight: toPx(style.minHeight),
+    maxHeight: toPx(style.maxHeight),
+    top: toPx(style.top),
+    bottom: toPx(style.bottom),
+    left: toPx(style.left),
+    right: toPx(style.right),
+    inset: toPx(style.inset),
+    insetBlock: toPx(style.insetBlock),
+    insetBlockEnd: toPx(style.insetBlockEnd),
+    insetBlockStart: toPx(style.insetBlockStart),
+    insetInline: toPx(style.insetInline),
+    insetInlineEnd: toPx(style.insetInlineEnd ?? style.end),
+    insetInlineStart: toPx(style.insetInlineStart ?? style.start),
+
+    // Margin - specific properties take precedence over shorthands (RN behavior)
+    margin: toPx(style.margin),
+    marginTop: toPx(style.marginTop ?? style.marginVertical),
+    marginBottom: toPx(style.marginBottom ?? style.marginVertical),
+    marginLeft: toPx(style.marginLeft ?? style.marginHorizontal),
+    marginRight: toPx(style.marginRight ?? style.marginHorizontal),
+    marginBlock: toPx(style.marginBlock),
+    marginBlockEnd: toPx(style.marginBlockEnd),
+    marginBlockStart: toPx(style.marginBlockStart),
+    marginInline: toPx(style.marginInline),
+    marginInlineEnd: toPx(style.marginInlineEnd ?? style.marginEnd),
+    marginInlineStart: toPx(style.marginInlineStart ?? style.marginStart),
+
+    // Padding - specific properties take precedence over shorthands (RN behavior)
+    padding: toPx(style.padding),
+    paddingTop: toPx(style.paddingTop ?? style.paddingVertical),
+    paddingBottom: toPx(style.paddingBottom ?? style.paddingVertical),
+    paddingLeft: toPx(style.paddingLeft ?? style.paddingHorizontal),
+    paddingRight: toPx(style.paddingRight ?? style.paddingHorizontal),
+    paddingBlock: toPx(style.paddingBlock),
+    paddingBlockEnd: toPx(style.paddingBlockEnd),
+    paddingBlockStart: toPx(style.paddingBlockStart),
+    paddingInline: toPx(style.paddingInline),
+    paddingInlineEnd: toPx(style.paddingInlineEnd ?? style.paddingEnd),
+    paddingInlineStart: toPx(style.paddingInlineStart ?? style.paddingStart),
+
+    // Border widths
+    borderInlineStartWidth: toPx(style.borderStartWidth),
+    borderInlineEndWidth: toPx(style.borderEndWidth),
+    borderWidth: toPx(style.borderWidth),
+    borderTopWidth: toPx(style.borderTopWidth),
+    borderBottomWidth: toPx(style.borderBottomWidth),
+    borderLeftWidth: toPx(style.borderLeftWidth),
+    borderRightWidth: toPx(style.borderRightWidth),
+
+    // Border radius (physical)
+    borderRadius: toPx(style.borderRadius),
+    borderTopLeftRadius: toPx(style.borderTopLeftRadius),
+    borderTopRightRadius: toPx(style.borderTopRightRadius),
+    borderBottomLeftRadius: toPx(style.borderBottomLeftRadius),
+    borderBottomRightRadius: toPx(style.borderBottomRightRadius),
+
+    // Border radius (logical)
+    borderStartStartRadius: toPx(
+      style.borderStartStartRadius ?? style.borderTopStartRadius
+    ),
+    borderStartEndRadius: toPx(
+      style.borderStartEndRadius ?? style.borderTopEndRadius
+    ),
+    borderEndStartRadius: toPx(
+      style.borderEndStartRadius ?? style.borderBottomStartRadius
+    ),
+    borderEndEndRadius: toPx(
+      style.borderEndEndRadius ?? style.borderBottomEndRadius
+    ),
+
+    // Border colors
+    borderColor: toColor(style.borderColor),
+    borderBlockColor: toColor(style.borderBlockColor),
+    borderBlockEndColor: toColor(style.borderBlockEndColor),
+    borderBlockStartColor: toColor(style.borderBlockStartColor),
+    borderBottomColor: toColor(style.borderBottomColor),
+    borderInlineEndColor: toColor(style.borderEndColor),
+    borderLeftColor: toColor(style.borderLeftColor),
+    borderRightColor: toColor(style.borderRightColor),
+    borderInlineStartColor: toColor(style.borderStartColor),
+    borderTopColor: toColor(style.borderTopColor),
+    borderStyle:
+      style.borderStyle ??
+      (style.borderWidth != null ||
+      style.borderTopWidth != null ||
+      style.borderBottomWidth != null ||
+      style.borderLeftWidth != null ||
+      style.borderRightWidth != null ||
+      style.borderStartWidth != null ||
+      style.borderEndWidth != null ||
+      style.borderColor != null
+        ? 'solid'
+        : undefined),
+
+    // Typography
+    color: toColor(style.color),
+    fontFamily: style.fontFamily,
+    fontSize: toPx(style.fontSize),
+    fontStyle: style.fontStyle,
+    fontWeight: style.fontWeight,
+    lineHeight: toPx(style.lineHeight),
+    letterSpacing: toPx(style.letterSpacing),
+
+    // View appearance
+    backgroundColor: toColor(style.backgroundColor),
+    // boxShadow/filter: RN accepts arrays, CSS only strings
+    boxShadow:
+      typeof style.boxShadow === 'string' ? style.boxShadow : undefined,
+    display: style.display,
+    position: style.position,
+    alignSelf: style.alignSelf,
+    backfaceVisibility: style.backfaceVisibility,
+    cursor: style.cursor,
+    filter: typeof style.filter === 'string' ? style.filter : undefined,
+    mixBlendMode: style.mixBlendMode,
+    boxSizing: style.boxSizing,
+    // pointerEvents: RN 'box-none'/'box-only' have no CSS equivalent
+    pointerEvents:
+      style.pointerEvents === 'auto' || style.pointerEvents === 'none'
+        ? style.pointerEvents
+        : undefined,
+
+    // Outline
+    outlineColor: toColor(style.outlineColor),
+    outlineStyle:
+      style.outlineStyle ?? (style.outlineWidth != null ? 'solid' : undefined),
+    outlineOffset: toPx(style.outlineOffset),
+    outlineWidth: toPx(style.outlineWidth),
+
+    // Transforms
+    transform: resolveTransform(style.transform),
+    // transformOrigin: RN accepts strings or arrays, CSS only strings
+    transformOrigin:
+      typeof style.transformOrigin === 'string'
+        ? style.transformOrigin
+        : undefined,
+
+    // Flex
+    flex: style.flex,
+    flexGrow: style.flexGrow,
+    flexShrink: style.flexShrink,
+    flexBasis: toPx(style.flexBasis),
+
+    // Misc
+    zIndex: style.zIndex,
+    // opacity: RN AnimatableNumericValue includes AnimatedNode; CSS only number
+    opacity: typeof style.opacity === 'number' ? style.opacity : undefined,
+    aspectRatio: style.aspectRatio,
+
+    // Extra options
+    overflowY:
+      extraOptions.scrollEnabled != null
+        ? extraOptions.scrollEnabled
+          ? 'auto'
+          : 'hidden'
+        : undefined,
+  };
+
+  // Clean undefined values
+  return Object.fromEntries(
+    Object.entries(css).filter(([, v]) => v !== undefined)
+  );
+}
+
+function toPx(
+  value?: DimensionValue | AnimatableNumericValue | string
+): string | undefined {
+  if (value == null) return undefined;
+  if (typeof value === 'number') return `${value}px`;
+  if (typeof value === 'string') return value;
+  return undefined;
+}
+
+function resolveTransform(
+  transform: EnrichedInputStyle['transform']
+): string | undefined {
+  if (typeof transform === 'string') return transform;
+  if (!Array.isArray(transform)) return undefined;
+
+  const parts = transform.map((item) => {
+    if ('translateX' in item) return `translateX(${item.translateX}px)`;
+    if ('translateY' in item) return `translateY(${item.translateY}px)`;
+    if ('translateZ' in item) return `translateZ(${item.translateZ}px)`;
+    if ('scale' in item) return `scale(${item.scale})`;
+    if ('scaleX' in item) return `scaleX(${item.scaleX})`;
+    if ('scaleY' in item) return `scaleY(${item.scaleY})`;
+    if ('scaleZ' in item) return `scaleZ(${item.scaleZ})`;
+    if ('rotate' in item) return `rotate(${item.rotate})`;
+    if ('rotateX' in item) return `rotateX(${item.rotateX})`;
+    if ('rotateY' in item) return `rotateY(${item.rotateY})`;
+    if ('rotateZ' in item) return `rotateZ(${item.rotateZ})`;
+    if ('skewX' in item) return `skewX(${item.skewX})`;
+    if ('skewY' in item) return `skewY(${item.skewY})`;
+    if ('perspective' in item) return `perspective(${item.perspective}px)`;
+    if ('matrix' in item) {
+      return item.matrix.length === 16
+        ? `matrix3d(${item.matrix.join(', ')})`
+        : `matrix(${item.matrix.join(', ')})`;
+    }
+    return null;
+  });
+
+  const css = parts.filter(Boolean).join(' ');
+  return css || undefined;
+}

package/src/web/styleConversion/enrichedInputThemingToCSSProperties.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'> & {
+    '--eti-placeholder-text-color': string;
+    '--eti-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['--eti-placeholder-text-color'] = placeholderCss;
+
+  const selectionCss = toColor(selectionColor);
+  if (selectionCss) extra['--eti-selection-color'] = selectionCss;
+
+  return extra;
+}

package/src/web/styleConversion/htmlStyleToCSSVariables.ts

@@ -0,0 +1,226 @@
+import type { CSSProperties } from 'react';
+import type { ColorValue } from 'react-native';
+import type { HtmlStyle, MentionStyleProperties } from '../../types';
+import { 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
+): Required<HtmlStyle> {
+  const style = htmlStyle ?? {};
+
+  const mentionMap = expandMentionStylesForIndicatorsIncludeDefault(style);
+  const converted: HtmlStyle = {
+    ...style,
+    mention: mentionMap,
+  };
+
+  const merged: Record<string, unknown> = { ...DEFAULT_HTML_STYLE };
+
+  for (const key in converted) {
+    if (key === 'mention') {
+      merged[key] = { ...(converted.mention as object) };
+      continue;
+    }
+    merged[key] = {
+      ...DEFAULT_HTML_STYLE[key as keyof HtmlStyle],
+      ...(converted[key as keyof HtmlStyle] as object),
+    };
+  }
+
+  return merged as Required<HtmlStyle>;
+}
+
+const ETI_CSS_VARS = {
+  codeColor: '--eti-code-color',
+  codeBgColor: '--eti-code-bg-color',
+  blockquoteBorderColor: '--eti-blockquote-border-color',
+  blockquoteBorderWidth: '--eti-blockquote-border-width',
+  blockquoteGapWidth: '--eti-blockquote-gap-width',
+  blockquoteColor: '--eti-blockquote-color',
+  codeblockBgColor: '--eti-codeblock-bg-color',
+  codeblockColor: '--eti-codeblock-color',
+  codeblockBorderRadius: '--eti-codeblock-border-radius',
+  linkColor: '--eti-link-color',
+  linkTextDecorationLine: '--eti-link-text-decoration-line',
+  ulBulletColor: '--eti-ul-bullet-color',
+  ulBulletSize: '--eti-ul-bullet-size',
+  ulMarginLeft: '--eti-ul-margin-left',
+  ulGapWidth: '--eti-ul-gap-width',
+  olMarginLeft: '--eti-ol-margin-left',
+  olGapWidth: '--eti-ol-gap-width',
+  olMarkerColor: '--eti-ol-marker-color',
+  olMarkerFontWeight: '--eti-ol-marker-font-weight',
+  checkboxBoxSize: '--eti-checkbox-box-size',
+  checkboxGapWidth: '--eti-checkbox-gap-width',
+  checkboxMarginLeft: '--eti-checkbox-margin-left',
+  checkboxBoxColor: '--eti-checkbox-box-color',
+} as const;
+
+export const ETI_MENTION_CSS_VARS = {
+  color: (indicator: string) =>
+    `--eti-mention-${indicatorToMentionCssKey(indicator)}-color`,
+  backgroundColor: (indicator: string) =>
+    `--eti-mention-${indicatorToMentionCssKey(indicator)}-background-color`,
+  textDecorationLine: (indicator: string) =>
+    `--eti-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, ETI_CSS_VARS.codeColor, code?.color);
+  setColorVar(vars, ETI_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[`--eti-${level}-font-size`] = `${h.fontSize}px`;
+    if (h?.bold != null)
+      vars[`--eti-${level}-font-weight`] = h.bold ? 'bold' : 'normal';
+  }
+}
+
+function applyBlockquoteVars(
+  vars: Record<string, string>,
+  bq?: HtmlStyle['blockquote']
+): void {
+  setColorVar(vars, ETI_CSS_VARS.blockquoteBorderColor, bq?.borderColor);
+  setPxVar(vars, ETI_CSS_VARS.blockquoteBorderWidth, bq?.borderWidth);
+  setPxVar(vars, ETI_CSS_VARS.blockquoteGapWidth, bq?.gapWidth);
+  setColorVar(vars, ETI_CSS_VARS.blockquoteColor, bq?.color);
+}
+
+function applyCodeblockVars(
+  vars: Record<string, string>,
+  cb?: HtmlStyle['codeblock']
+): void {
+  setColorVar(vars, ETI_CSS_VARS.codeblockBgColor, cb?.backgroundColor);
+  setColorVar(vars, ETI_CSS_VARS.codeblockColor, cb?.color);
+  setPxVar(vars, ETI_CSS_VARS.codeblockBorderRadius, cb?.borderRadius);
+}
+
+function applyLinkVars(
+  vars: Record<string, string>,
+  anchor?: HtmlStyle['a']
+): void {
+  setColorVar(vars, ETI_CSS_VARS.linkColor, anchor?.color);
+  if (anchor?.textDecorationLine != null) {
+    vars[ETI_CSS_VARS.linkTextDecorationLine] = anchor.textDecorationLine;
+  }
+}
+
+function applyUnorderedListVars(
+  vars: Record<string, string>,
+  ul?: HtmlStyle['ul']
+): void {
+  setColorVar(vars, ETI_CSS_VARS.ulBulletColor, ul?.bulletColor);
+  setPxVar(vars, ETI_CSS_VARS.ulBulletSize, ul?.bulletSize);
+  setPxVar(vars, ETI_CSS_VARS.ulMarginLeft, ul?.marginLeft);
+  setPxVar(vars, ETI_CSS_VARS.ulGapWidth, ul?.gapWidth);
+}
+
+function applyOrderedListVars(
+  vars: Record<string, string>,
+  ol?: HtmlStyle['ol']
+): void {
+  setPxVar(vars, ETI_CSS_VARS.olMarginLeft, ol?.marginLeft);
+  setPxVar(vars, ETI_CSS_VARS.olGapWidth, ol?.gapWidth);
+  setColorVar(vars, ETI_CSS_VARS.olMarkerColor, ol?.markerColor);
+  if (ol?.markerFontWeight != null) {
+    vars[ETI_CSS_VARS.olMarkerFontWeight] = String(ol.markerFontWeight);
+  }
+}
+
+function applyCheckboxListVars(
+  vars: Record<string, string>,
+  ulCheckbox?: HtmlStyle['ulCheckbox']
+): void {
+  setPxVar(vars, ETI_CSS_VARS.checkboxBoxSize, ulCheckbox?.boxSize);
+  setPxVar(vars, ETI_CSS_VARS.checkboxGapWidth, ulCheckbox?.gapWidth);
+  setPxVar(vars, ETI_CSS_VARS.checkboxMarginLeft, ulCheckbox?.marginLeft);
+  setColorVar(vars, ETI_CSS_VARS.checkboxBoxColor, ulCheckbox?.boxColor);
+}
+
+function applyMentionVars(
+  vars: Record<string, string>,
+  mention: Record<string, MentionStyleProperties>
+): void {
+  for (const [indicator, mentionStyle] of Object.entries(mention)) {
+    setColorVar(
+      vars,
+      ETI_MENTION_CSS_VARS.color(indicator),
+      mentionStyle.color
+    );
+    setColorVar(
+      vars,
+      ETI_MENTION_CSS_VARS.backgroundColor(indicator),
+      mentionStyle.backgroundColor
+    );
+    if (mentionStyle.textDecorationLine != null) {
+      vars[ETI_MENTION_CSS_VARS.textDecorationLine(indicator)] =
+        mentionStyle.textDecorationLine;
+    }
+  }
+}
+
+function expandMentionStylesForIndicatorsIncludeDefault(htmlStyle?: 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
+  );
+}
+
+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,
+    expandMentionStylesForIndicatorsIncludeDefault(htmlStyle)
+  );
+  return vars 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/tiptapHtmlNormalizer.ts

@@ -0,0 +1,33 @@
+import {
+  checkboxHtmlForTiptap,
+  checkboxHtmlFromTiptap,
+} from './checkboxHtmlNormalizer';
+
+export function prepareHtmlForTiptap(html: string): string {
+  html = checkboxHtmlForTiptap(html);
+  html = html.replace(/<br\s*\/?>/gi, '<p></p>');
+  return html;
+}
+
+export function normalizeHtmlFromTiptap(html: string): string {
+  html = checkboxHtmlFromTiptap(html);
+
+  // Strip <p> wrappers inside <li> elements.
+  // TipTap renders <li><p>text</p></li> but native expects <li>text</li>.
+  // This regex is safe because EnrichedListItem.content is 'paragraph', which
+  // prevents TipTap from ever emitting nested lists
+  html = html.replace(/<li([^>]*)><p>(.*?)<\/p><\/li>/gs, '<li$1>$2</li>');
+
+  // Convert remaining empty <p></p> to <br> (outside of lists)
+  html = html.replace(/<p><\/p>/g, '<br>');
+
+  // Convert <img> tags to self-closing tags
+  html = html.replace(/<img\b([^>]*)>/gi, (_, attrs: string) => {
+    if (attrs.trimEnd().endsWith('/')) {
+      return `<img${attrs}>`;
+    }
+    return `<img${attrs}/>`;
+  });
+
+  return `<html>${html}</html>`;
+}

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 './tiptapHtmlNormalizer';
+
+export const useOnChangeHtml = (
+  editor: Editor,
+  onChangeHtml?: (e: NativeSyntheticEvent<OnChangeHtmlEvent>) => void
+) => {
+  useOnEditorChange(editor, onChangeHtml, (e) =>
+    normalizeHtmlFromTiptap(e.getHTML())
+  );
+};