react-native-enriched-html 1.0.0 → 1.0.1

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/{enrichedInputThemingToCSSProperties.ts → enrichedThemingToCSSProperties.ts}

@@ -4,8 +4,8 @@ import { toColor } from './toColor';
 
 type EnrichedInputThemingStyle = Partial<
   Pick<CSSProperties, 'caretColor'> & {
-    '--eti-placeholder-text-color': string;
-    '--eti-selection-color': string;
+    '--et-placeholder-text-color': string;
+    '--et-selection-color': string;
   }
 >;
 
@@ -25,10 +25,10 @@ export function enrichedInputThemingToCSSProperties({
   if (caret) extra.caretColor = caret;
 
   const placeholderCss = toColor(placeholderTextColor);
-  if (placeholderCss) extra['--eti-placeholder-text-color'] = placeholderCss;
+  if (placeholderCss) extra['--et-placeholder-text-color'] = placeholderCss;
 
   const selectionCss = toColor(selectionColor);
-  if (selectionCss) extra['--eti-selection-color'] = selectionCss;
+  if (selectionCss) extra['--et-selection-color'] = selectionCss;
 
   return extra;
 }

package/src/web/styleConversion/htmlStyleToCSSVariables.ts

@@ -1,7 +1,15 @@
 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 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 {
@@ -12,17 +20,21 @@ import { toColor } from './toColor';
 import { isMentionStyleRecord } from '../../utils/isMentionStyleRecord';
 
 export function mergeWithDefaultHtmlStyle(
-  htmlStyle?: HtmlStyle
+  htmlStyle?: HtmlStyle,
+  htmlStyleToMergeWith: HtmlStyle = DEFAULT_HTML_STYLE
 ): Required<HtmlStyle> {
   const style = htmlStyle ?? {};
 
-  const mentionMap = expandMentionStylesForIndicatorsIncludeDefault(style);
+  const mentionMap = expandMentionStylesForIndicatorsIncludeDefault(
+    style,
+    htmlStyleToMergeWith
+  );
   const converted: HtmlStyle = {
     ...style,
     mention: mentionMap,
   };
 
-  const merged: Record<string, unknown> = { ...DEFAULT_HTML_STYLE };
+  const merged: Record<string, unknown> = { ...htmlStyleToMergeWith };
 
   for (const key in converted) {
     if (key === 'mention') {
@@ -30,7 +42,7 @@ export function mergeWithDefaultHtmlStyle(
       continue;
     }
     merged[key] = {
-      ...DEFAULT_HTML_STYLE[key as keyof HtmlStyle],
+      ...htmlStyleToMergeWith[key as keyof HtmlStyle],
       ...(converted[key as keyof HtmlStyle] as object),
     };
   }
@@ -38,39 +50,76 @@ export function mergeWithDefaultHtmlStyle(
   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',
+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 ETI_MENTION_CSS_VARS = {
+export const ET_MENTION_CSS_VARS = {
   color: (indicator: string) =>
-    `--eti-mention-${indicatorToMentionCssKey(indicator)}-color`,
+    `--et-mention-${indicatorToMentionCssKey(indicator)}-color`,
   backgroundColor: (indicator: string) =>
-    `--eti-mention-${indicatorToMentionCssKey(indicator)}-background-color`,
+    `--et-mention-${indicatorToMentionCssKey(indicator)}-background-color`,
   textDecorationLine: (indicator: string) =>
-    `--eti-mention-${indicatorToMentionCssKey(indicator)}-text-decoration-line`,
+    `--et-mention-${indicatorToMentionCssKey(indicator)}-text-decoration-line`,
 } as const;
 
 function setColorVar(
@@ -94,8 +143,8 @@ 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);
+  setColorVar(vars, ET_CSS_VARS.codeColor, code?.color);
+  setColorVar(vars, ET_CSS_VARS.codeBgColor, code?.backgroundColor);
 }
 
 function applyHeadingVars(
@@ -105,9 +154,9 @@ function applyHeadingVars(
   for (const level of HEADING_TAGS) {
     const h = htmlStyle?.[level];
     if (h?.fontSize != null)
-      vars[`--eti-${level}-font-size`] = `${h.fontSize}px`;
+      vars[`--et-${level}-font-size`] = `${h.fontSize}px`;
     if (h?.bold != null)
-      vars[`--eti-${level}-font-weight`] = h.bold ? 'bold' : 'normal';
+      vars[`--et-${level}-font-weight`] = h.bold ? 'bold' : 'normal';
   }
 }
 
@@ -115,28 +164,28 @@ 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);
+  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, ETI_CSS_VARS.codeblockBgColor, cb?.backgroundColor);
-  setColorVar(vars, ETI_CSS_VARS.codeblockColor, cb?.color);
-  setPxVar(vars, ETI_CSS_VARS.codeblockBorderRadius, cb?.borderRadius);
+  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, ETI_CSS_VARS.linkColor, anchor?.color);
+  setColorVar(vars, ET_CSS_VARS.linkColor, anchor?.color);
   if (anchor?.textDecorationLine != null) {
-    vars[ETI_CSS_VARS.linkTextDecorationLine] = anchor.textDecorationLine;
+    vars[ET_CSS_VARS.linkTextDecorationLine] = anchor.textDecorationLine;
   }
 }
 
@@ -144,21 +193,21 @@ 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);
+  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, ETI_CSS_VARS.olMarginLeft, ol?.marginLeft);
-  setPxVar(vars, ETI_CSS_VARS.olGapWidth, ol?.gapWidth);
-  setColorVar(vars, ETI_CSS_VARS.olMarkerColor, ol?.markerColor);
+  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[ETI_CSS_VARS.olMarkerFontWeight] = String(ol.markerFontWeight);
+    vars[ET_CSS_VARS.olMarkerFontWeight] = String(ol.markerFontWeight);
   }
 }
 
@@ -166,35 +215,36 @@ 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);
+  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,
-      ETI_MENTION_CSS_VARS.color(indicator),
-      mentionStyle.color
-    );
-    setColorVar(
-      vars,
-      ETI_MENTION_CSS_VARS.backgroundColor(indicator),
+      ET_MENTION_CSS_VARS.backgroundColor(indicator),
       mentionStyle.backgroundColor
     );
     if (mentionStyle.textDecorationLine != null) {
-      vars[ETI_MENTION_CSS_VARS.textDecorationLine(indicator)] =
+      vars[ET_MENTION_CSS_VARS.textDecorationLine(indicator)] =
         mentionStyle.textDecorationLine;
     }
   }
 }
 
-function expandMentionStylesForIndicatorsIncludeDefault(htmlStyle?: HtmlStyle) {
+function expandMentionStylesForIndicatorsIncludeDefault(
+  htmlStyle: HtmlStyle,
+  htmlStyleToMergeWith: HtmlStyle
+) {
   const mentionIndicators = isMentionStyleRecord(htmlStyle?.mention)
     ? Object.keys(htmlStyle?.mention)
     : [];
@@ -204,11 +254,12 @@ function expandMentionStylesForIndicatorsIncludeDefault(htmlStyle?: HtmlStyle) {
 
   return expandMentionStylesForIndicators(
     htmlStyle?.mention,
-    mentionIndicators
+    mentionIndicators,
+    htmlStyleToMergeWith
   );
 }
 
-export function htmlStyleToCSSVariables(htmlStyle?: HtmlStyle): CSSProperties {
+export function htmlStyleToCSSVariables(htmlStyle: HtmlStyle): CSSProperties {
   const vars: Record<string, string> = {};
   applyCodeVars(vars, htmlStyle?.code);
   applyHeadingVars(vars, htmlStyle);
@@ -220,7 +271,7 @@ export function htmlStyleToCSSVariables(htmlStyle?: HtmlStyle): CSSProperties {
   applyCheckboxListVars(vars, htmlStyle?.ulCheckbox);
   applyMentionVars(
     vars,
-    expandMentionStylesForIndicatorsIncludeDefault(htmlStyle)
+    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/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

@@ -2,7 +2,7 @@ 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';
+import { normalizeHtmlFromTiptap } from './normalization/tiptapHtmlNormalizer';
 
 export const useOnChangeHtml = (
   editor: Editor,

package/src/web/useOnChangeState.ts

@@ -4,6 +4,7 @@ import type { OnChangeStateEvent } from '../types';
 import type { NativeSyntheticEvent } from 'react-native';
 import { adaptWebToNativeEvent } from './adaptWebToNativeEvent';
 import {
+  getCurrentAlignment,
   isAnyParagraphFormatActive,
   isFormatBlocked,
 } from './formats/formatRules';
@@ -97,21 +98,22 @@ function buildState(
       isConflicting: editor.isActive('link'),
       isBlocking: isFormatBlocked('image', editor, htmlStyle),
     },
-    alignment: 'left',
+    alignment: getCurrentAlignment(editor) ?? 'auto',
   };
 }
 
 function hashState(state: OnChangeStateEvent): string {
   return Object.values(state)
-    .map((formatState) =>
-      String(
+    .map((formatState) => {
+      if (typeof formatState === 'string') return formatState;
+      return String(
         getFormatHash(
           formatState.isActive,
           formatState.isConflicting,
           formatState.isBlocking
         )
-      )
-    )
+      );
+    })
     .join('');
 }
 

package/src/web/useOnLinkDetected.ts

@@ -1,82 +1,70 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { type Editor } from '@tiptap/react';
 import { getMarkRange, getMarksBetween } from '@tiptap/core';
-import type { OnLinkDetected } from '../types';
+import type { EditorState } from '@tiptap/pm/state';
+import type { MarkType } from '@tiptap/pm/model';
+import { emitLinkDetected, type LinkEmitterRef } from './emitLinkDetected';
 import { tiptapPosToNativePos } from './positionMapping';
 
+function findLinkRangeAt(
+  state: EditorState,
+  linkType: MarkType
+): { from: number; to: number } | null {
+  const $pos = state.selection.$from;
+  const direct = getMarkRange($pos, linkType);
+  if (direct) return direct;
+  if ($pos.pos > 0) {
+    const $before = state.doc.resolve($pos.pos - 1);
+    const before = getMarkRange($before, linkType);
+    if (before && before.to === $pos.pos) return before;
+  }
+  return null;
+}
+
 export const useOnLinkDetected = (
   editor: Editor | null,
-  onLinkDetected?: (e: OnLinkDetected) => void
+  ref: LinkEmitterRef
 ) => {
-  const lastEmittedRef = useRef<OnLinkDetected | null>(null);
-  const wasInLinkRef = useRef(false);
-
   useEffect(() => {
-    if (!editor || !onLinkDetected) return;
+    if (!editor) return;
 
     const handleUpdate = () => {
       const { state } = editor;
       const linkType = state.schema.marks.link;
       if (!linkType) return;
 
-      const $pos = state.selection.$from;
-      const range = getMarkRange($pos, linkType);
+      const range = findLinkRangeAt(state, linkType);
 
       if (!range) {
-        if (wasInLinkRef.current) {
-          wasInLinkRef.current = false;
-          onLinkDetected({
-            text: '',
-            url: '',
-            start: 0,
-            end: 0,
-          });
-        }
-        lastEmittedRef.current = null;
+        const last = ref.current.lastEmitted;
+        if (!last || last.url === '') return;
+        emitLinkDetected(ref.current, {
+          text: '',
+          url: '',
+          start: 0,
+          end: 0,
+        });
         return;
       }
 
       const linkMark = getMarksBetween(range.from, range.to, state.doc).find(
         (entry) => entry.mark.type === linkType
       )?.mark;
+      if (!linkMark) return;
 
-      if (!linkMark) {
-        wasInLinkRef.current = false;
-        lastEmittedRef.current = null;
-        return;
-      }
-
-      wasInLinkRef.current = true;
-
-      const { from, to } = range;
-      const url = (linkMark.attrs.href as string | undefined) ?? '';
-      const text = state.doc.textBetween(from, to, '\n');
-      const start = tiptapPosToNativePos(state.doc, from);
-      const end = tiptapPosToNativePos(state.doc, to);
-
-      const next: OnLinkDetected = { text, url, start, end };
-      const prev = lastEmittedRef.current;
-
-      if (
-        prev !== null &&
-        prev.text === next.text &&
-        prev.url === next.url &&
-        prev.start === next.start &&
-        prev.end === next.end
-      ) {
-        return;
-      }
-
-      lastEmittedRef.current = next;
-      onLinkDetected(next);
+      emitLinkDetected(ref.current, {
+        text: state.doc.textBetween(range.from, range.to, '\n'),
+        url: (linkMark.attrs.href as string | undefined) ?? '',
+        start: tiptapPosToNativePos(state.doc, range.from),
+        end: tiptapPosToNativePos(state.doc, range.to),
+      });
     };
 
     handleUpdate();
     editor.on('transaction', handleUpdate);
 
     return () => {
-      wasInLinkRef.current = false;
       editor.off('transaction', handleUpdate);
     };
-  }, [editor, onLinkDetected]);
+  }, [editor, ref]);
 };

package/src/web/usePressInteractions.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+export function usePressInteractions(
+  containerRef: React.RefObject<HTMLDivElement | null>
+) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+
+      const anchor = target.closest('a');
+      if (anchor && container.contains(anchor)) {
+        e.preventDefault();
+      }
+    };
+
+    container.addEventListener('click', handleClick);
+    return () => container.removeEventListener('click', handleClick);
+  }, [containerRef]);
+}

package/src/web/useStableRef.ts

@@ -0,0 +1,12 @@
+import { useEffect, useRef, type RefObject } from 'react';
+
+//TODO: When upgrading to React 19.2 migrate to useEffectEvent instead
+export const useStableRef = <T>(value: T): RefObject<T> => {
+  const ref = useRef<T>(value);
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref;
+};