react-native-enriched-html 1.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/{tiptapHtmlNormalizer.ts → normalization/tiptapHtmlNormalizer.ts}

@@ -2,8 +2,15 @@ import {
   checkboxHtmlForTiptap,
   checkboxHtmlFromTiptap,
 } from './checkboxHtmlNormalizer';
+import { normalizeHtml } from './htmlNormalizer';
 
-export function prepareHtmlForTiptap(html: string): string {
+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;
@@ -16,7 +23,10 @@ export function normalizeHtmlFromTiptap(html: string): string {
   // 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>');
+  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>');

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

@@ -11,7 +11,7 @@ export type { MentionPluginOptions, TriggerState } from './types';
 export { mentionPluginKey } from './mentionPluginKey';
 export { setMention } from './setMention';
 export { startMention } from './startMention';
-export { subscribeMentionEvents } from './subscribeMentionEvents';
+export { useMentionEvents } from './useMentionEvents';
 
 export const MentionPlugin = Extension.create<MentionPluginOptions>({
   name: 'mentionTrigger',

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

@@ -1,6 +1,7 @@
-import type { StateField } from '@tiptap/pm/state';
+import type { EditorState, StateField } from '@tiptap/pm/state';
 import { isCaretInBlockedContext } from './isCaretInBlockedContext';
 import type { MentionPluginOptions, TriggerState } from './types';
+import type { ResolvedPos } from '@tiptap/pm/model';
 
 export function makeMentionPluginState(
   getIndicators: MentionPluginOptions['getIndicators']
@@ -19,9 +20,11 @@ export function makeMentionPluginState(
         return { active: false };
 
       const blockStart = $from.start();
+      const wordEndPos = getCurrentWordEndPosition(newEditorState, $from);
+
       const text = newEditorState.doc.textBetween(
         blockStart,
-        $from.pos,
+        wordEndPos,
         '\n',
         '\n'
       );
@@ -45,7 +48,7 @@ export function makeMentionPluginState(
         active: true,
         indicator: found.indicator,
         from: blockStart + found.indexInText,
-        to: $from.pos,
+        to: wordEndPos,
         query,
       };
     },
@@ -65,11 +68,35 @@ function findLastValidMentionIndicator(
     const isAfterSpace = idx > 0 && text[idx - 1] === ' ';
     if (!isAtStart && !isAfterSpace) continue;
 
-    // Skip indicators inside a finalized mention
-    if (isIndicatorInsideFinalizedMention(idx)) continue;
+    // Stops inside a finalized mention
+    if (isIndicatorInsideFinalizedMention(idx)) return null;
 
     return { indexInText: idx, indicator: ch };
   }
 
   return null;
 }
+
+function getCurrentWordEndPosition(state: EditorState, $from: ResolvedPos) {
+  const blockEnd = $from.end();
+
+  let wordEndPos = $from.pos;
+
+  while (wordEndPos < blockEnd) {
+    const char = state.doc.textBetween(wordEndPos, wordEndPos + 1);
+
+    if (/\s/.test(char)) {
+      break;
+    }
+
+    // Break if advancing enters a blocked context
+    const $nextPos = state.doc.resolve(wordEndPos + 1);
+    if (isCaretInBlockedContext($nextPos, state.schema)) {
+      break;
+    }
+
+    wordEndPos++;
+  }
+
+  return wordEndPos;
+}

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

@@ -1,5 +1,5 @@
 import { Fragment } from '@tiptap/pm/model';
-import type { EditorState } from '@tiptap/pm/state';
+import { TextSelection } from '@tiptap/pm/state';
 import type { Editor } from '@tiptap/react';
 import { isCaretInBlockedContext } from './isCaretInBlockedContext';
 import { mentionPluginKey } from './mentionPluginKey';
@@ -34,10 +34,13 @@ export function setMention(
 
   const { from, to } = triggerState;
 
-  const extendedTo = Math.max(
-    to,
-    exclusiveEndThroughMatchingMentionTail(state, from, text)
-  );
+  // avoid inserting a space if there already is one
+  const parentEnd = state.doc.resolve(to).end();
+  let hasSpaceAfter = false;
+  if (to < parentEnd) {
+    const charAfter = state.doc.textBetween(to, to + 1, '');
+    hasSpaceAfter = /\s/.test(charAfter);
+  }
 
   const mentionMark = mentionType.create({
     indicator,
@@ -48,36 +51,23 @@ export function setMention(
     .resolve(from)
     .marks()
     .filter((m) => m.type.name !== 'mention');
-  const fragment = Fragment.fromArray([
-    state.schema.text(text, mentionMark.addToSet(baseMarks)),
-    state.schema.text(' ', baseMarks),
-  ]);
+
+  const nodes = [state.schema.text(text, mentionMark.addToSet(baseMarks))];
+  if (!hasSpaceAfter) {
+    nodes.push(state.schema.text(' ', baseMarks));
+  }
+  const fragment = Fragment.fromArray(nodes);
 
   editor
     .chain()
     .focus()
     .command(({ tr }) => {
-      tr.replaceWith(from, extendedTo, fragment);
+      tr.replaceWith(from, to, fragment);
+
+      const targetPos = from + fragment.size + (hasSpaceAfter ? 1 : 0);
+      tr.setSelection(TextSelection.create(tr.doc, targetPos));
+
       return true;
     })
     .run();
 }
-
-// If the user moved the caret back into a partial match, extend `to` over the
-// matching tail to avoid leftover characters after the inserted mention.
-function exclusiveEndThroughMatchingMentionTail(
-  state: EditorState,
-  from: number,
-  text: string
-): number {
-  const parentEnd = state.doc.resolve(from).end();
-  let scanPos = from;
-  for (const ch of text) {
-    const end = scanPos + ch.length;
-    if (end > parentEnd || state.doc.textBetween(scanPos, end, '') !== ch) {
-      break;
-    }
-    scanPos = end;
-  }
-  return scanPos;
-}

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

@@ -0,0 +1,114 @@
+import { getMarkRange } from '@tiptap/core';
+import type { Editor } from '@tiptap/react';
+import type { OnMentionDetected } from '../../../types';
+import { mentionPluginKey } from './mentionPluginKey';
+import type { MentionCallbacks, TriggerState } from './types';
+import { useEffect } from 'react';
+import type { EditorState } from '@tiptap/pm/state';
+
+export function useMentionEvents(
+  editor: Editor,
+  getCallbacks: () => MentionCallbacks
+) {
+  useEffect(() => {
+    let prevTriggerState: TriggerState = { active: false };
+    let prevMentionKey: string | null = null;
+    let wasInMention = false;
+
+    const handleUpdate = () => {
+      const cb = getCallbacks();
+      const curr = mentionPluginKey.getState(editor.state);
+      if (!curr) return;
+
+      if (!prevTriggerState.active && curr.active) {
+        cb.onStartMention?.(curr.indicator);
+        if (curr.query !== '')
+          cb.onChangeMention?.({ indicator: curr.indicator, text: curr.query });
+      } else if (
+        prevTriggerState.active &&
+        curr.active &&
+        prevTriggerState.indicator !== curr.indicator
+      ) {
+        cb.onEndMention?.(prevTriggerState.indicator);
+        cb.onStartMention?.(curr.indicator);
+        if (curr.query !== '')
+          cb.onChangeMention?.({ indicator: curr.indicator, text: curr.query });
+      } else if (
+        prevTriggerState.active &&
+        curr.active &&
+        curr.query !== prevTriggerState.query
+      ) {
+        cb.onChangeMention?.({ indicator: curr.indicator, text: curr.query });
+      } else if (prevTriggerState.active && !curr.active) {
+        cb.onEndMention?.(prevTriggerState.indicator);
+      }
+      prevTriggerState = curr;
+
+      if (!cb.onMentionDetected) return;
+
+      const mention = getMentionInCurrentSelection(editor.state);
+      if (!mention) {
+        if (wasInMention) {
+          cb.onMentionDetected({
+            text: '',
+            indicator: '',
+            attributes: {},
+          });
+          wasInMention = false;
+          prevMentionKey = null;
+        }
+      } else {
+        wasInMention = true;
+        if (mention.key === prevMentionKey) return;
+        prevMentionKey = mention.key;
+        cb.onMentionDetected({
+          text: mention.text,
+          indicator: mention.indicator,
+          attributes: mention.attributes,
+        });
+      }
+    };
+
+    const handleBlur = () => {
+      const cb = getCallbacks();
+      if (prevTriggerState.active) {
+        cb.onEndMention?.(prevTriggerState.indicator);
+        prevTriggerState = { active: false };
+      }
+      prevMentionKey = null;
+    };
+
+    editor.on('transaction', handleUpdate);
+    editor.on('blur', handleBlur);
+
+    return () => {
+      editor.off('transaction', handleUpdate);
+      editor.off('blur', handleBlur);
+    };
+  }, [editor, getCallbacks]);
+}
+
+function getMentionInCurrentSelection(
+  state: EditorState
+): (OnMentionDetected & { key: string }) | null {
+  const mentionType = state.schema.marks.mention;
+  if (!mentionType) return null;
+
+  const { from: selFrom, to: selTo } = state.selection;
+  const $from = state.doc.resolve(selFrom);
+  const mark = mentionType.isInSet($from.marks());
+  if (!mark) return null;
+
+  const range = getMarkRange($from, mentionType);
+  if (!range) return null;
+
+  if (selFrom < range.from || selTo > range.to) return null;
+
+  const { text, indicator, attributes } = mark.attrs;
+  return {
+    key: `${range.from}:${range.to}:${text}:${indicator}`,
+    text: text as string,
+    indicator: indicator as string,
+    attributes: (attributes ?? {}) as Record<string, string>,
+  };
+}