react-native-enriched-html 0.0.0 → 1.0.0

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

@@ -0,0 +1,105 @@
+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';
+
+export function subscribeMentionEvents(
+  editor: Editor,
+  getCallbacks: () => MentionCallbacks
+): () => void {
+  let prevTriggerState: TriggerState = { active: false };
+  let prevMentionKey: string | null = null;
+  let wasInMention = false;
+
+  const handleTransaction = () => {
+    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 &&
+      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 = getActiveMention(editor);
+    if (!mention) {
+      if (wasInMention) {
+        wasInMention = false;
+        prevMentionKey = null;
+        cb.onMentionDetected({
+          text: '',
+          indicator: '',
+          attributes: {},
+        });
+      } else {
+        prevMentionKey = null;
+      }
+      return;
+    }
+
+    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', handleTransaction);
+  editor.on('blur', handleBlur);
+
+  return () => {
+    editor.off('transaction', handleTransaction);
+    editor.off('blur', handleBlur);
+  };
+}
+
+function getActiveMention(
+  editor: Editor
+): (OnMentionDetected & { key: string }) | null {
+  const { state } = editor;
+  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>,
+  };
+}

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

@@ -0,0 +1,22 @@
+import type { OnChangeMentionEvent, OnMentionDetected } from '../../../types';
+
+export type TriggerState =
+  | { active: false }
+  | {
+      active: true;
+      indicator: string;
+      from: number;
+      to: number;
+      query: string;
+    };
+
+export interface MentionPluginOptions {
+  getIndicators: () => string[];
+}
+
+export interface MentionCallbacks {
+  onStartMention?: (indicator: string) => void;
+  onChangeMention?: (e: OnChangeMentionEvent) => void;
+  onEndMention?: (indicator: string) => void;
+  onMentionDetected?: (e: OnMentionDetected) => void;
+}

package/src/web/pmPlugins/MergeAdjacentSameKindBlocksPlugin.ts

@@ -0,0 +1,57 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { canJoin } from '@tiptap/pm/transform';
+
+const MERGEABLE_TYPE_NAMES = new Set([
+  'blockquote',
+  'codeBlock',
+  'unorderedList',
+  'orderedList',
+  'checkboxList',
+]);
+
+export const MergeAdjacentSameKindBlocksPlugin = Extension.create({
+  name: 'mergeAdjacentSameKindBlocks',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('mergeAdjacentSameKindBlocks'),
+        appendTransaction: (transactions, _oldState, newState) => {
+          if (!transactions.some((t) => t.docChanged)) {
+            return;
+          }
+
+          const tr = newState.tr;
+          const joinPositions: number[] = [];
+
+          newState.doc.descendants((node, pos) => {
+            if (!MERGEABLE_TYPE_NAMES.has(node.type.name)) {
+              return true;
+            }
+
+            const boundaryPos = pos + node.nodeSize;
+            const $pos = newState.doc.resolve(boundaryPos);
+            const after = $pos.nodeAfter;
+            if (after && after.type === node.type) {
+              joinPositions.push(boundaryPos);
+            }
+            return true;
+          });
+
+          let hasMerged = false;
+          joinPositions
+            .sort((a, b) => b - a)
+            .forEach((pos) => {
+              if (canJoin(tr.doc, pos)) {
+                tr.join(pos);
+                hasMerged = true;
+              }
+            });
+
+          return hasMerged ? tr : undefined;
+        },
+      }),
+    ];
+  },
+});

package/src/web/pmPlugins/ShortcutPlugin.ts

@@ -0,0 +1,98 @@
+import { Extension, type Editor } from '@tiptap/core';
+
+import type { HtmlStyle } from '../../types';
+import { isFormatBlocked } from '../formats/formatRules';
+
+export interface ShortcutPluginOptions {
+  getHtmlStyle: () => Required<HtmlStyle>;
+}
+
+function insertPlainTextFromClipboard(editor: Editor): Promise<void> {
+  return navigator.clipboard.readText().then((text) => {
+    if (editor.isDestroyed) return;
+    editor.chain().focus().deleteSelection().insertContent(text).run();
+  });
+}
+
+export const ShortcutPlugin = Extension.create<ShortcutPluginOptions>({
+  name: 'shortcutPlugin',
+
+  addOptions() {
+    return {
+      getHtmlStyle: () => {
+        throw new Error(
+          'ShortcutPlugin.configure({ getHtmlStyle }) is required'
+        );
+      },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    const htmlStyle = () => this.options.getHtmlStyle();
+
+    const mark =
+      (name: string, run: (editor: Editor) => boolean) =>
+      ({ editor }: { editor: Editor }) => {
+        if (!editor.isEditable) return false;
+        if (isFormatBlocked(name, editor, htmlStyle())) return true;
+        return run(editor);
+      };
+
+    return {
+      'Mod-Shift-v': ({ editor }) => {
+        if (!editor.isEditable) return false;
+        insertPlainTextFromClipboard(editor).catch(() => {});
+        return true;
+      },
+      'Mod-Alt-Shift-c': ({ editor }) => {
+        if (!editor.isEditable) return false;
+        return editor.commands.toggleCodeBlock();
+      },
+      'Mod-Shift-c': mark('code', (editor) => editor.commands.toggleCode()),
+      'Mod-Shift-x': mark('strike', (editor) => editor.commands.toggleStrike()),
+      'Mod-b': mark('bold', (editor) => editor.commands.toggleBold()),
+      'Mod-i': mark('italic', (editor) => editor.commands.toggleItalic()),
+      'Mod-u': mark('underline', (editor) => editor.commands.toggleUnderline()),
+      'Mod-Shift-7': ({ editor }) => {
+        if (!editor.isEditable) return false;
+        return editor.commands.toggleOrderedList();
+      },
+      'Mod-Shift-8': ({ editor }) => {
+        if (!editor.isEditable) return false;
+        return editor.commands.toggleUnorderedList();
+      },
+      'Mod-Shift-9': ({ editor }) => {
+        if (!editor.isEditable) return false;
+        return editor.commands.toggleCheckboxList(false);
+      },
+      'Mod-Alt-0': ({ editor }) => {
+        if (!editor.isEditable) return false;
+        return editor.commands.setParagraph();
+      },
+      'Mod-Alt-1': ({ editor }) => {
+        if (!editor.isEditable) return false;
+        return editor.commands.toggleHeading({ level: 1 });
+      },
+      'Mod-Alt-2': ({ editor }) => {
+        if (!editor.isEditable) return false;
+        return editor.commands.toggleHeading({ level: 2 });
+      },
+      'Mod-Alt-3': ({ editor }) => {
+        if (!editor.isEditable) return false;
+        return editor.commands.toggleHeading({ level: 3 });
+      },
+      'Mod-Alt-4': ({ editor }) => {
+        if (!editor.isEditable) return false;
+        return editor.commands.toggleHeading({ level: 4 });
+      },
+      'Mod-Alt-5': ({ editor }) => {
+        if (!editor.isEditable) return false;
+        return editor.commands.toggleHeading({ level: 5 });
+      },
+      'Mod-Alt-6': ({ editor }) => {
+        if (!editor.isEditable) return false;
+        return editor.commands.toggleHeading({ level: 6 });
+      },
+    };
+  },
+});

package/src/web/pmPlugins/StrictMarksPlugin.ts

@@ -0,0 +1,131 @@
+import { Extension } from '@tiptap/core';
+import { Mark, type ResolvedPos, type Schema } from '@tiptap/pm/model';
+import { Plugin, PluginKey, type EditorState } from '@tiptap/pm/state';
+
+const NONINCLUSIVE_MARKS = ['link', 'mention'] as const;
+
+function stripNonInclusiveMarksFromSet(
+  schema: Schema,
+  marks: readonly Mark[]
+): readonly Mark[] {
+  let out = marks.slice();
+  for (const name of NONINCLUSIVE_MARKS) {
+    const markType = schema.marks[name];
+    if (!markType?.isInSet(out)) continue;
+    out = out.filter((m) => m.type !== markType);
+  }
+  return out;
+}
+
+function stripNonInclusiveMarksIfAfterIsOut(
+  schema: Schema,
+  $from: ResolvedPos
+): readonly Mark[] {
+  const nodeBefore = $from.nodeBefore;
+  if (!nodeBefore) {
+    return [];
+  }
+  let out = nodeBefore.marks;
+  for (const name of NONINCLUSIVE_MARKS) {
+    const markType = schema.marks[name];
+    if (!markType?.isInSet(out)) continue;
+    const afterHasMark =
+      $from.nodeAfter != null && markType.isInSet($from.nodeAfter.marks);
+    if (!afterHasMark) {
+      out = out.filter((m) => m.type !== markType);
+    }
+  }
+  return out;
+}
+
+function resolveStrictMarks(
+  $from: ResolvedPos,
+  oldState: EditorState,
+  newState: EditorState,
+  docChanged: boolean,
+  textLengthChanged: boolean
+): readonly Mark[] {
+  // Editor completely empty
+  if (newState.doc.textContent.length === 0) {
+    return textLengthChanged
+      ? []
+      : (oldState.storedMarks ?? newState.storedMarks ?? []);
+  }
+
+  // Character to the left: strictly inherit from it
+  if ($from.nodeBefore) {
+    // Non-inclusive marks: do not carry onto text typed after the last marked
+    // character (e.g. space exits link/mention, matching native).
+    return stripNonInclusiveMarksIfAfterIsOut(newState.schema, $from);
+  }
+
+  // Start of line with text to the right
+  if ($from.nodeAfter) {
+    if (!docChanged) {
+      return []; // Pure cursor movement: kill RTL mark bleeding
+    }
+    const old$ = oldState.selection.$from;
+    const { nodeBefore: oldBefore, nodeAfter: oldAfter } = old$;
+    // Styled|plain boundary after Enter/paste/etc.: inherit the left inline's marks so
+    // bold, code, and other marks behave the same on a new paragraph.
+    if (
+      oldBefore &&
+      oldAfter &&
+      !Mark.sameSet(oldBefore.marks, oldAfter.marks)
+    ) {
+      return stripNonInclusiveMarksFromSet(newState.schema, oldBefore.marks);
+    }
+    return stripNonInclusiveMarksFromSet(
+      newState.schema,
+      $from.nodeAfter.marks
+    );
+  }
+
+  // Completely empty line
+  if (textLengthChanged) {
+    const prevEndPos = $from.before() - 1;
+    return prevEndPos > 0 ? newState.doc.resolve(prevEndPos).marks() : [];
+  }
+  if (oldState.storedMarks) {
+    return oldState.storedMarks; // Structural nav (Enter/Backspace): keep explicit marks
+  }
+  return newState.storedMarks ?? $from.marks();
+}
+
+export const StrictMarksPlugin = Extension.create({
+  name: 'strictMarksPlugin',
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('strictMarks'),
+        appendTransaction(transactions, oldState, newState) {
+          const { selection } = newState;
+
+          if (!selection.empty) return null;
+
+          const docChanged = !oldState.doc.eq(newState.doc);
+          const isExplicitToggle =
+            !docChanged && transactions.some((tr) => tr.storedMarks !== null);
+          if (isExplicitToggle) return null;
+
+          const { $from } = selection;
+          const textLengthChanged =
+            oldState.doc.textContent.length !== newState.doc.textContent.length;
+
+          const strictMarks = resolveStrictMarks(
+            $from,
+            oldState,
+            newState,
+            docChanged,
+            textLengthChanged
+          );
+
+          const activeMarks = newState.storedMarks ?? $from.marks();
+          if (Mark.sameSet(strictMarks, activeMarks)) return null;
+
+          return newState.tr.setStoredMarks(strictMarks);
+        },
+      }),
+    ];
+  },
+});

package/src/web/pmPlugins/StripBoldInStyledHeadingsPlugin.ts

@@ -0,0 +1,79 @@
+import { Extension, type CommandProps } from '@tiptap/core';
+import {
+  Plugin,
+  PluginKey,
+  type EditorState,
+  type Transaction,
+} from '@tiptap/pm/state';
+import type { HtmlStyle } from '../../types';
+import { HEADING_TAGS } from '../formats/EnrichedHeading';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    stripBoldInStyledHeadings: {
+      // Remove redundant bold marks from headings whose level is already bold via `htmlStyle` CSS.
+      normalizeBoldInStyledHeadings: () => ReturnType;
+    };
+  }
+}
+
+function transactionStripBoldInCssBoldHeadings(
+  state: EditorState,
+  htmlStyle: Required<HtmlStyle>
+): Transaction | null {
+  const boldType = state.schema.marks.bold;
+  if (!boldType) return null;
+
+  const tr = state.tr;
+  state.doc.descendants((node, pos) => {
+    if (node.type.name !== 'heading') return true;
+    const level = node.attrs.level as number;
+    if (level < 1 || level > HEADING_TAGS.length) return false;
+    const key = HEADING_TAGS[level - 1]!;
+    if (htmlStyle[key].bold) {
+      tr.removeMark(pos + 1, pos + node.nodeSize - 1, boldType);
+    }
+    return false;
+  });
+
+  return tr.steps.length > 0 ? tr : null;
+}
+
+export const StripBoldInStyledHeadingsPlugin = Extension.create({
+  name: 'stripBoldInStyledHeadings',
+  addOptions() {
+    return {
+      getHtmlStyle: () => {
+        throw new Error(
+          'StripBoldInStyledHeadingsPlugin.configure({ getHtmlStyle }) is required'
+        );
+      },
+    };
+  },
+  addCommands() {
+    return {
+      normalizeBoldInStyledHeadings:
+        () =>
+        ({ state, dispatch }: CommandProps) => {
+          const htmlStyle = this.options.getHtmlStyle();
+          const tr = transactionStripBoldInCssBoldHeadings(state, htmlStyle);
+          if (!tr) return false;
+          if (dispatch) dispatch(tr);
+          return true;
+        },
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('stripBoldInStyledHeadings'),
+        appendTransaction: (transactions, _oldState, newState) => {
+          if (!transactions.some((tr) => tr.docChanged)) return;
+          const htmlStyle = this.options.getHtmlStyle();
+
+          return transactionStripBoldInCssBoldHeadings(newState, htmlStyle);
+        },
+      }),
+    ];
+  },
+});

package/src/web/pmPlugins/StripMarksInCodeBlockPlugin.ts

@@ -0,0 +1,34 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+export const StripMarksInCodeBlockPlugin = Extension.create({
+  name: 'stripMarksInCodeBlock',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('stripMarksInCodeBlock'),
+        appendTransaction: (transactions, _oldState, newState) => {
+          if (!transactions.some((tr) => tr.docChanged)) return;
+
+          const tr = newState.tr;
+
+          const allMarks = Object.values(newState.schema.marks);
+
+          newState.doc.descendants((node, pos) => {
+            if (node.type.name === 'codeBlock') {
+              allMarks.forEach((markType) => {
+                tr.removeMark(pos + 1, pos + node.nodeSize - 1, markType);
+              });
+              return false;
+            }
+
+            return true;
+          });
+
+          return tr.steps.length > 0 ? tr : null;
+        },
+      }),
+    ];
+  },
+});

package/src/web/pmPlugins/StripMarksOnImagePlugin.ts

@@ -0,0 +1,33 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+export const StripMarksOnImagePlugin = Extension.create({
+  name: 'stripMarksOnImage',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('stripMarksOnImage'),
+        appendTransaction: (transactions, _oldState, newState) => {
+          if (!transactions.some((tr) => tr.docChanged)) {
+            return null;
+          }
+
+          const tr = newState.tr;
+          let modified = false;
+
+          newState.doc.descendants((node, pos) => {
+            if (node.type.name === 'image' && node.marks.length > 0) {
+              node.marks.forEach((mark) => {
+                tr.removeMark(pos, pos + node.nodeSize, mark);
+              });
+              modified = true;
+            }
+          });
+
+          return modified ? tr : null;
+        },
+      }),
+    ];
+  },
+});

package/src/web/positionMapping.ts

@@ -0,0 +1,81 @@
+import type { Node } from '@tiptap/pm/model';
+
+/**
+ * Position model mismatch: ProseMirror vs native (iOS/Android)
+ *
+ * Native selection/cursor offsets are plain string indices in rendered text
+ * Block boundaries are represented by a single '\n'.
+ *
+ * ProseMirror positions are tree positions. Entering/leaving block nodes
+ * consumes extra positions that do not map to extra native characters.
+ * Crossing one paragraph boundary is 1 native char ('\n') but usually 2 PM
+ * positions (close paragraph + open next paragraph).
+ *
+ * Example for three paragraphs "AAAA", "BBBB", "CCCC":
+ *
+ *   PM:      1  2  3  4  5  6  7  8  9  10 11 12 13 14 15 16 17
+ *   Native:  0  1  2  3  4  4  5  6  7   8  9  9 10 11 12 13 14
+ *
+ * PM 5 and PM 6 both map to native 4, PM 11 and PM 12 both map to native 9.
+ *
+ * Inline images occupy one index in the native plain string as a '\ufffc' character,
+ * we do the same for the web implementation.
+ */
+
+/**
+ * Plain text in the native coordinate model for [from, to), including '\ufffc' per inline image.
+ */
+export function nativeLeafText(doc: Node, from: number, to: number): string {
+  return doc.textBetween(from, to, '\n', () => '\ufffc');
+}
+
+function nativeTextLength(doc: Node, from: number, to: number): number {
+  return nativeLeafText(doc, from, to).length;
+}
+
+/**
+ * Returns the native position for a given TipTap document position.
+ */
+export function tiptapPosToNativePos(doc: Node, tiptapPos: number): number {
+  if (tiptapPos <= 1) return 0;
+  return nativeTextLength(doc, 0, tiptapPos);
+}
+
+/**
+ * Returns the TipTap document position for a given native position.
+ *
+ * Traverses only text-bearing block nodes (paragraphs, headings, etc.),
+ * skipping wrapper nodes like block quotes and lists. This ensures the result
+ * is always a valid cursor position drilled down to the innermost content node.
+ */
+export function nativePosToTiptapPos(doc: Node, nativePos: number): number {
+  let currentNativePos = 0;
+  let targetTiptapPos = -1;
+  let lastValidTiptapPos = -1;
+
+  doc.descendants((node, pos) => {
+    if (targetTiptapPos !== -1) return false;
+
+    // Only consider text-bearing leaf blocks (paragraphs, headings, code blocks).
+    // Wrapper nodes (lists, list items, block quotes) are skipped
+    if (node.isTextblock) {
+      const textLen = node.textContent.length;
+
+      if (currentNativePos + textLen >= nativePos) {
+        // pos is before the opening tag; pos+1 is the first position inside.
+        const offset = Math.max(0, nativePos - currentNativePos);
+        targetTiptapPos = pos + 1 + offset;
+        return false;
+      }
+
+      currentNativePos += textLen + 1; // +1 for the '\n' block separator
+      lastValidTiptapPos = pos + 1 + textLen;
+    }
+
+    return true;
+  });
+
+  if (targetTiptapPos !== -1) return targetTiptapPos;
+  if (lastValidTiptapPos !== -1) return lastValidTiptapPos;
+  return 1;
+}

package/src/web/returnKeyTypeToEnterKeyHint.ts

@@ -0,0 +1,29 @@
+import type { ReturnKeyTypeOptions } from 'react-native';
+
+// Keywords for the HTML global [`enterkeyhint`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/enterkeyhint) attribute
+export type EnterKeyHint =
+  | 'enter'
+  | 'done'
+  | 'go'
+  | 'next'
+  | 'previous'
+  | 'search'
+  | 'send';
+
+// Maps React Native `returnKeyType` to the HTML global `enterkeyhint` attribute
+// if possible, otherwise falls back to enter.
+export function returnKeyTypeToEnterKeyHint(
+  returnKeyType: ReturnKeyTypeOptions | undefined
+): EnterKeyHint {
+  switch (returnKeyType) {
+    case 'done':
+    case 'go':
+    case 'next':
+    case 'previous':
+    case 'search':
+    case 'send':
+      return returnKeyType;
+    default:
+      return 'enter';
+  }
+}