react-native-enriched-html 0.0.0 → 1.0.1

package/src/web/normalization/prepareHtmlForWeb.ts

@@ -0,0 +1,93 @@
+export function prepareHtmlForWeb(html: string): string {
+  if (typeof DOMParser === 'undefined') return html;
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+
+  wrapBareLiContentInParagraph(doc);
+  checkboxHtmlToWeb(doc);
+
+  return doc.body.innerHTML;
+}
+
+/*
+ * Native list format:
+ *   <ul>
+ *     <li>foo</li>
+ *     <li></li>
+ *   </ul>
+ *
+ * Web-native, with <p> wrappers to display the content correctly:
+ *   <ul>
+ *     <li>
+ *       <p>foo</p>
+ *     </li>
+ *     <li>
+ *       <p></p>
+ *     </li>
+ *   </ul>
+ */
+function wrapBareLiContentInParagraph(doc: Document) {
+  // Target only standard lists (ignore checkbox lists, as they get wrapped in <label> later)
+  const listItems = doc.querySelectorAll(
+    'ul:not([data-type="checkbox"]) > li, ol > li'
+  );
+
+  listItems.forEach((li) => {
+    if (li.firstElementChild?.tagName.toUpperCase() === 'P') return;
+
+    const nodesToWrap: Node[] = [];
+    const childNodes = Array.from(li.childNodes);
+
+    for (const node of childNodes) {
+      if (
+        node.nodeType === Node.ELEMENT_NODE &&
+        ['UL', 'OL'].includes((node as Element).tagName.toUpperCase())
+      ) {
+        break;
+      }
+      nodesToWrap.push(node);
+    }
+
+    if (nodesToWrap.length === 0 && childNodes.length > 0) return;
+
+    const p = doc.createElement('p');
+
+    li.insertBefore(p, childNodes[0] || null);
+
+    nodesToWrap.forEach((node) => p.appendChild(node));
+  });
+}
+
+/*
+ * Native checkbox format (as produced by the editor):
+ *   <ul data-type="checkbox">
+ *     <li checked>foo</li>
+ *     <li>bar</li>
+ *   </ul>
+ *
+ * Web-native, display-only format:
+ *   <ul data-type="checkbox">
+ *     <li>
+ *       <input type="checkbox" checked>
+ *       <label>foo</label>
+ *     </li>
+ *     <li>
+ *       <input type="checkbox">
+ *       <label>bar</label>
+ *     </li>
+ *   </ul>
+ */
+function checkboxHtmlToWeb(doc: Document) {
+  doc.querySelectorAll('ul[data-type="checkbox"]').forEach((ul) => {
+    ul.querySelectorAll('li').forEach((li) => {
+      const checked = li.hasAttribute('checked');
+      const labelContent = li.innerHTML;
+
+      li.removeAttribute('checked');
+      li.innerHTML =
+        `<input type="checkbox"${checked ? ' checked' : ''}>` +
+        `<label>${labelContent}</label>`;
+    });
+  });
+}

package/src/web/normalization/tiptapHtmlNormalizer.ts

@@ -0,0 +1,43 @@
+import {
+  checkboxHtmlForTiptap,
+  checkboxHtmlFromTiptap,
+} from './checkboxHtmlNormalizer';
+import { normalizeHtml } from './htmlNormalizer';
+
+export function prepareHtmlForTiptap(
+  html: string,
+  useHtmlNormalizer: boolean | undefined
+): string {
+  if (useHtmlNormalizer) {
+    html = normalizeHtml(html);
+  }
+  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([^>]*)>\s*<p[^>]*>(.*?)<\/p>\s*<\/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/pasteImages.ts

@@ -0,0 +1,96 @@
+/**
+ * Collect image `File`s from the clipboard and build `OnPasteImagesEvent` payloads with `blob:` URIs.
+ */
+
+import type { Editor } from '@tiptap/react';
+import type { NativeSyntheticEvent } from 'react-native';
+
+import type { OnPasteImagesEvent } from '../types';
+import { adaptWebToNativeEvent } from './adaptWebToNativeEvent';
+import { isImageBlocked } from './formats/formatRules';
+import { readImageDimensionsFromBlob } from './pastedImageDimensions';
+
+const isImageLikeClipboardFile = (file: File, reportedMime: string) =>
+  reportedMime.startsWith('image/') || file.type.startsWith('image/');
+
+/** Browsers often expose the same paste as two `File`s (items vs files) with different `name`. */
+function dedupeImageFiles(files: File[]): File[] {
+  const seen = new Set<string>();
+  const out: File[] = [];
+  for (const file of files) {
+    const key = `${file.size}\0${file.lastModified}\0${file.type}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(file);
+  }
+  return out;
+}
+
+export function clipboardImageFiles(data: DataTransfer): File[] {
+  const fromItems: File[] = [];
+  for (const item of [...data.items]) {
+    if (item == null || item.kind !== 'file') continue;
+    const file = item.getAsFile();
+    if (!file) continue;
+    if (isImageLikeClipboardFile(file, item.type)) fromItems.push(file);
+  }
+  if (fromItems.length > 0) return dedupeImageFiles(fromItems);
+
+  const fromFiles: File[] = [];
+  for (const file of [...data.files]) {
+    if (isImageLikeClipboardFile(file, file.type)) fromFiles.push(file);
+  }
+  return dedupeImageFiles(fromFiles);
+}
+
+export async function buildPasteImagesPayload(
+  files: File[]
+): Promise<OnPasteImagesEvent['images']> {
+  return Promise.all(
+    files.map(async (file) => {
+      const uri = URL.createObjectURL(file);
+      const { width, height } = await readImageDimensionsFromBlob(file, uri);
+      return {
+        uri,
+        type: file.type || 'image/png',
+        width,
+        height,
+      };
+    })
+  );
+}
+
+export function handleClipboardPasteImages(
+  event: ClipboardEvent,
+  getEditor: () => Editor | null,
+  getOnPasteImages: () =>
+    | ((e: NativeSyntheticEvent<OnPasteImagesEvent>) => void)
+    | undefined
+): boolean {
+  const clipboardData = event.clipboardData;
+  if (!clipboardData) return false;
+
+  const files = clipboardImageFiles(clipboardData);
+  if (files.length === 0) return false;
+
+  const ed = getEditor();
+  if (!ed || isImageBlocked(ed)) return false;
+
+  const onPasteImages = getOnPasteImages();
+  if (!onPasteImages) return false;
+
+  event.preventDefault();
+
+  (async () => {
+    try {
+      const images = await buildPasteImagesPayload(files);
+      const editor = getEditor();
+      if (!editor || isImageBlocked(editor)) return;
+      onPasteImages(adaptWebToNativeEvent(event, { images }));
+    } catch (err) {
+      console.error(err);
+    }
+  })();
+
+  return true;
+}

package/src/web/pastedImageDimensions.ts

@@ -0,0 +1,40 @@
+/**
+ * Best-effort intrinsic pixel size for pasted images (from Blob, with URL fallback).
+ * Returns 0×0 when decode fails (caller still emits onPasteImages).
+ */
+
+export async function readImageDimensionsFromBlob(
+  blob: Blob,
+  fallbackUrl: string
+): Promise<{ width: number; height: number }> {
+  try {
+    const bitmap = await createImageBitmap(blob);
+    const { width, height } = bitmap;
+    bitmap.close();
+    return { width, height };
+  } catch {
+    return tryImageElementDimensions(fallbackUrl);
+  }
+}
+
+function tryImageElementDimensions(
+  url: string
+): Promise<{ width: number; height: number }> {
+  return new Promise((resolve) => {
+    if (typeof Image === 'undefined') {
+      resolve({ width: 0, height: 0 });
+      return;
+    }
+    const img = new Image();
+    img.onload = () => {
+      const w = img.naturalWidth;
+      const h = img.naturalHeight;
+      resolve({
+        width: Number.isFinite(w) ? w : 0,
+        height: Number.isFinite(h) ? h : 0,
+      });
+    };
+    img.onerror = () => resolve({ width: 0, height: 0 });
+    img.src = url;
+  });
+}

package/src/web/pmPlugins/AutolinkPlugin/autolinkRegex.ts

@@ -0,0 +1,43 @@
+const FULL_URL_REGEX =
+  /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-z]{2,63}\b([-a-zA-Z0-9@:%_+.~#?&/=]*)/;
+const WWW_REGEX =
+  /www\.[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-z]{2,63}\b([-a-zA-Z0-9@:%_+.~#?&/=]*)/;
+const BARE_REGEX =
+  /[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-z]{2,63}\b([-a-zA-Z0-9@:%_+.~#?&/=]*)/;
+
+const DEFAULT_AUTOLINK_SUBSTRING_PATTERN = `(?:${FULL_URL_REGEX.source})|(?:${WWW_REGEX.source})|(?:${BARE_REGEX.source})`;
+
+export type AutolinkRangeInWord = {
+  start: number;
+  endExclusive: number;
+  text: string;
+};
+
+function asGlobalRegex(re: RegExp): RegExp {
+  return re.global
+    ? re
+    : new RegExp(re.source, `${re.flags.replace(/g/g, '')}g`);
+}
+
+// URL-like substrings inside a single whitespace-delimited token (`\S+`),
+export function findAutolinkRangesInWord(
+  word: string,
+  linkRegex: RegExp | undefined
+): readonly AutolinkRangeInWord[] {
+  const re = linkRegex
+    ? asGlobalRegex(linkRegex)
+    : new RegExp(DEFAULT_AUTOLINK_SUBSTRING_PATTERN, 'gi');
+
+  const out: AutolinkRangeInWord[] = [];
+  for (const m of word.matchAll(re)) {
+    const text = m[0] ?? '';
+    if (text.length === 0 || m.index === undefined) continue;
+    const start = m.index;
+    out.push({
+      start,
+      endExclusive: start + text.length,
+      text,
+    });
+  }
+  return out;
+}

package/src/web/pmPlugins/AutolinkPlugin/index.ts

@@ -0,0 +1,274 @@
+import { Extension } from '@tiptap/core';
+import type { MarkType, Node, Schema } from '@tiptap/pm/model';
+import { Plugin, PluginKey, type Transaction } from '@tiptap/pm/state';
+import { Mapping } from '@tiptap/pm/transform';
+import type { OnLinkDetected } from '../../../types';
+import {
+  emitLinkDetected,
+  type LinkEmitterState,
+} from '../../emitLinkDetected';
+import { tiptapPosToNativePos } from '../../positionMapping';
+import { findAutolinkRangesInWord } from './autolinkRegex';
+
+interface Run {
+  text: string;
+  startPos: number;
+}
+
+interface DirtyBlock {
+  node: Node;
+  pos: number;
+}
+
+interface AutolinkPluginOptions {
+  getLinkEmitter: () => LinkEmitterState;
+}
+
+const WHITESPACE_RE = /\S+/g;
+
+function removeAutoLinksInRange(
+  doc: Node,
+  tr: Transaction,
+  linkType: MarkType,
+  from: number,
+  to: number
+): void {
+  if (from >= to) return;
+
+  doc.nodesBetween(from, to, (node, pos) => {
+    if (!node.isText) return true;
+
+    const link = linkType.isInSet(node.marks);
+    if (link?.attrs.auto === true) {
+      tr.removeMark(
+        Math.max(from, pos),
+        Math.min(to, pos + node.nodeSize),
+        linkType
+      );
+    }
+
+    return false;
+  });
+}
+
+function rangeHasManualLink(
+  doc: Node,
+  linkType: MarkType,
+  from: number,
+  to: number
+): boolean {
+  let found = false;
+
+  doc.nodesBetween(from, to, (node) => {
+    if (found) return false;
+    if (!node.isText) return true;
+
+    const link = linkType.isInSet(node.marks);
+    if (link && link.attrs.auto !== true) found = true;
+
+    return false;
+  });
+
+  return found;
+}
+
+function rangeHasExactAutoLink(
+  doc: Node,
+  linkType: MarkType,
+  from: number,
+  to: number,
+  href: string
+): boolean {
+  let hasExact = true;
+  let hasText = false;
+
+  doc.nodesBetween(from, to, (node) => {
+    if (!hasExact) return false;
+    if (!node.isText) return true;
+
+    hasText = true;
+    const link = linkType.isInSet(node.marks);
+    if (!link || link.attrs.auto !== true || link.attrs.href !== href) {
+      hasExact = false;
+    }
+    return false;
+  });
+
+  return hasText && hasExact;
+}
+
+function extractRuns(
+  block: Node,
+  blockStartPos: number,
+  schema: Schema
+): Run[] {
+  const runs: Run[] = [];
+  let current: Run | null = null;
+
+  block.forEach((child, offset) => {
+    const eligibleText =
+      child.isText &&
+      child.text &&
+      !schema.marks.code?.isInSet(child.marks) &&
+      !schema.marks.mention?.isInSet(child.marks);
+
+    if (eligibleText) {
+      if (!current) {
+        current = { text: '', startPos: blockStartPos + 1 + offset };
+      }
+      current.text += child.text;
+      return;
+    }
+
+    if (current) {
+      runs.push(current);
+      current = null;
+    }
+  });
+
+  if (current) runs.push(current);
+  return runs;
+}
+
+function getDirtyBlocks(
+  doc: Node,
+  transactions: readonly Transaction[]
+): DirtyBlock[] {
+  const mapping = new Mapping();
+  for (const tr of transactions) mapping.appendMapping(tr.mapping);
+
+  const blocks = new Map<number, Node>();
+  const docSize = doc.content.size;
+
+  mapping.maps.forEach((stepMap, i) => {
+    const rest = mapping.slice(i + 1);
+
+    stepMap.forEach((_oldStart, _oldEnd, newStart, newEnd) => {
+      const from = Math.max(0, rest.map(newStart, -1) - 1);
+      const to = Math.min(docSize, rest.map(newEnd, 1) + 1);
+
+      doc.nodesBetween(from, to, (node, pos) => {
+        if (node.type.name === 'codeBlock') return false;
+
+        if (node.inlineContent && !blocks.has(pos)) {
+          blocks.set(pos, node);
+          return false;
+        }
+
+        return true;
+      });
+    });
+  });
+
+  return Array.from(blocks, ([pos, node]) => ({ pos, node }));
+}
+
+export const AutolinkPlugin = Extension.create<AutolinkPluginOptions>({
+  name: 'autolinkDetector',
+  addOptions() {
+    return {
+      getLinkEmitter: () => {
+        throw new Error(
+          'AutolinkPlugin.configure({ getLinkEmitter }) is required'
+        );
+      },
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('autolinkDetector'),
+        appendTransaction: (transactions, _oldState, newState) => {
+          if (!transactions.some((tr) => tr.docChanged)) return null;
+
+          const state = this.options.getLinkEmitter();
+          if (!state || state.linkRegex === null) return null;
+          const { schema, doc, tr } = newState;
+          const linkType = schema.marks.link;
+          if (!linkType) return null;
+
+          const dirtyBlocks = getDirtyBlocks(doc, transactions);
+          if (dirtyBlocks.length === 0) return null;
+
+          const detected: OnLinkDetected[] = [];
+
+          for (const { node, pos } of dirtyBlocks) {
+            const blockFrom = pos + 1;
+            const blockTo = pos + node.nodeSize - 1;
+
+            // find all valid links that should exist in this block
+            const desiredLinks: Array<{
+              start: number;
+              end: number;
+              href: string;
+            }> = [];
+
+            for (const run of extractRuns(node, pos, schema)) {
+              for (const match of run.text.matchAll(WHITESPACE_RE)) {
+                const word = match[0];
+                const wordStart = run.startPos + match.index!;
+                const wordEnd = wordStart + word.length;
+
+                const ranges = findAutolinkRangesInWord(word, state.linkRegex);
+                const fullMatch = ranges.some(
+                  (r) => r.start === 0 && r.endExclusive === word.length
+                );
+
+                if (!fullMatch) continue;
+                if (rangeHasManualLink(doc, linkType, wordStart, wordEnd))
+                  continue;
+
+                desiredLinks.push({
+                  start: wordStart,
+                  end: wordEnd,
+                  href: word,
+                });
+              }
+            }
+
+            let lastPos = blockFrom;
+
+            for (const link of desiredLinks) {
+              // strip auto links in the "gap" before this desired link
+              removeAutoLinksInRange(doc, tr, linkType, lastPos, link.start);
+
+              tr.addMark(
+                link.start,
+                link.end,
+                linkType.create({ href: link.href, auto: true })
+              );
+
+              const alreadyExisted = rangeHasExactAutoLink(
+                doc,
+                linkType,
+                link.start,
+                link.end,
+                link.href
+              );
+
+              // don't emit if the link was not changed
+              if (!alreadyExisted) {
+                detected.push({
+                  text: link.href,
+                  url: link.href,
+                  start: tiptapPosToNativePos(doc, link.start),
+                  end: tiptapPosToNativePos(doc, link.end),
+                });
+              }
+
+              lastPos = link.end;
+            }
+
+            // strip rest of the auto links that are now not desired
+            removeAutoLinksInRange(doc, tr, linkType, lastPos, blockTo);
+          }
+
+          if (tr.steps.length === 0) return null;
+
+          for (const event of detected) emitLinkDetected(state, event);
+          return tr;
+        },
+      }),
+    ];
+  },
+});

package/src/web/pmPlugins/MentionPlugin/index.ts

@@ -0,0 +1,45 @@
+import { Extension } from '@tiptap/core';
+import { Slice } from '@tiptap/pm/model';
+import { Plugin } from '@tiptap/pm/state';
+import { makeMentionPluginState } from './makeMentionPluginState';
+import { mentionPluginKey } from './mentionPluginKey';
+import { removeMentionMarksIfSpansResized } from './removeMentionMarksIfSpansResized';
+import { stripPartialMentionMarks } from './stripPartialMentionMarks';
+import type { MentionPluginOptions, TriggerState } from './types';
+
+export type { MentionPluginOptions, TriggerState } from './types';
+export { mentionPluginKey } from './mentionPluginKey';
+export { setMention } from './setMention';
+export { startMention } from './startMention';
+export { useMentionEvents } from './useMentionEvents';
+
+export const MentionPlugin = Extension.create<MentionPluginOptions>({
+  name: 'mentionTrigger',
+  addOptions() {
+    return {
+      getIndicators: () => {
+        throw new Error(
+          'MentionPlugin.configure({ getIndicators }) is required'
+        );
+      },
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      new Plugin<TriggerState>({
+        key: mentionPluginKey,
+        props: {
+          transformPasted(slice: Slice): Slice {
+            return new Slice(
+              stripPartialMentionMarks(slice.content),
+              slice.openStart,
+              slice.openEnd
+            );
+          },
+        },
+        state: makeMentionPluginState(this.options.getIndicators),
+        appendTransaction: removeMentionMarksIfSpansResized,
+      }),
+    ];
+  },
+});

package/src/web/pmPlugins/MentionPlugin/isCaretInBlockedContext.ts

@@ -0,0 +1,17 @@
+import { findParentNodeClosestToPos } from '@tiptap/core';
+import type { ResolvedPos, Schema } from '@tiptap/pm/model';
+import { EXCLUDED_MARKS as EXCLUDED_MARKS_BY_MENTION } from '../../formats/EnrichedMention';
+
+export function isCaretInBlockedContext(
+  $from: ResolvedPos,
+  schema: Schema
+): boolean {
+  for (const excludedMark of EXCLUDED_MARKS_BY_MENTION) {
+    if (schema.marks[excludedMark]?.isInSet($from.marks())) return true;
+  }
+
+  return (
+    findParentNodeClosestToPos($from, (n) => n.type.name === 'codeBlock') !=
+    null
+  );
+}