react-native-enriched-html 0.0.0 → 1.0.0

package/src/web/formats/formatRules.ts

@@ -0,0 +1,84 @@
+import type { Editor } from '@tiptap/core';
+import type { HtmlStyle } from '../../types';
+import { HEADING_LEVELS, HEADING_TAGS } from './EnrichedHeading';
+
+type ChainedCommands = ReturnType<Editor['chain']>;
+
+export function isAnyParagraphFormatActive(editor: Editor): boolean {
+  return (
+    editor.isActive('blockquote') ||
+    editor.isActive('codeBlock') ||
+    HEADING_LEVELS.some((level) => editor.isActive('heading', { level })) ||
+    editor.isActive('orderedList') ||
+    editor.isActive('unorderedList') ||
+    editor.isActive('checkboxList')
+  );
+}
+
+export function isLinkBlocked(editor: Editor): boolean {
+  return (
+    editor.isActive('code') ||
+    editor.isActive('codeBlock') ||
+    editor.isActive('mention') ||
+    editor.isActive('image')
+  );
+}
+function isMentionBlocked(editor: Editor): boolean {
+  return (
+    editor.isActive('code') ||
+    editor.isActive('codeBlock') ||
+    editor.isActive('link') ||
+    editor.isActive('image')
+  );
+}
+
+export function isImageBlocked(editor: Editor): boolean {
+  return (
+    editor.isActive('code') ||
+    editor.isActive('link') ||
+    editor.isActive('mention')
+  );
+}
+
+export function isFormatBlocked(
+  tiptapName: string,
+  editor: Editor,
+  htmlStyle: Required<HtmlStyle>
+): boolean {
+  if (tiptapName === 'image') {
+    return isImageBlocked(editor);
+  }
+  if (tiptapName === 'link') {
+    return isLinkBlocked(editor);
+  }
+  if (tiptapName === 'code' && editor.isActive('image')) {
+    return true;
+  }
+
+  if (tiptapName === 'mention') {
+    return isMentionBlocked(editor);
+  }
+
+  if (editor.isActive('codeBlock')) {
+    return ['bold', 'italic', 'underline', 'strike', 'code'].includes(
+      tiptapName
+    );
+  }
+  for (const level of HEADING_LEVELS) {
+    if (editor.isActive('heading', { level })) {
+      const key = HEADING_TAGS[level - 1]!;
+      if (tiptapName === 'bold' && htmlStyle[key].bold) return true;
+    }
+  }
+  return false;
+}
+
+export function toggleParagraphFormat(
+  isActive: () => boolean,
+  deactivate: () => boolean,
+  activate: (c: ChainedCommands) => ChainedCommands,
+  chain: () => ChainedCommands
+): boolean {
+  if (isActive()) return deactivate();
+  return activate(chain().clearNodes()).run();
+}

package/src/web/formats/listKeyboard.ts

@@ -0,0 +1,58 @@
+import { isTextSelection, type Editor, type JSONContent } from '@tiptap/core';
+
+import { lineStartBackspace } from './wrappedBlockKeyboard';
+
+function emptyListItemContent(itemName: string): JSONContent {
+  return {
+    type: itemName,
+    content: [{ type: 'paragraph' }],
+  };
+}
+
+// Enter: always extend the list — splitListItem fails on an empty last item (see TipTap splitListItem).
+export function listEnter(editor: Editor, itemName: string): boolean {
+  if (!editor.isActive(itemName)) {
+    return false;
+  }
+  if (editor.chain().focus().splitListItem(itemName).scrollIntoView().run()) {
+    return true;
+  }
+
+  const { selection } = editor.state;
+  if (!selection.empty || !isTextSelection(selection)) {
+    return false;
+  }
+
+  const $from = selection.$from;
+  if ($from.parent.content.size > 0) {
+    return false;
+  }
+
+  // Flat lists only: list item is always the parent block of the paragraph (depth − 1).
+  const itemDepth = $from.depth - 1;
+  if (itemDepth < 1) {
+    return false;
+  }
+  const insertPos = $from.after(itemDepth);
+
+  return editor
+    .chain()
+    .focus()
+    .insertContentAt(insertPos, emptyListItemContent(itemName))
+    .scrollIntoView()
+    .run();
+}
+
+// Backspace: first press at line start lifts the list item; second press (paragraph below list) joins backward.
+export function listBackspace(
+  editor: Editor,
+  itemName: string,
+  wrapperNames: readonly string[]
+): boolean {
+  return lineStartBackspace(editor, {
+    isActive: () => editor.isActive(itemName),
+    lift: () => editor.chain().focus().liftListItem(itemName).run(),
+    shouldJoinBefore: (beforeName) =>
+      beforeName != null && wrapperNames.includes(beforeName),
+  });
+}

package/src/web/formats/wrappedBlockKeyboard.ts

@@ -0,0 +1,76 @@
+import { isTextSelection, type Editor } from '@tiptap/core';
+import type { ResolvedPos } from '@tiptap/pm/model';
+
+// Same as prosemirror-commands `findCutBefore` (not exported from that package)
+// Resolves to the gap between this block and the block above it.
+export function findCutBefore($pos: ResolvedPos): ResolvedPos | null {
+  if (!$pos.parent.type.spec.isolating) {
+    for (let i = $pos.depth - 1; i >= 0; i--) {
+      if ($pos.index(i) > 0) {
+        return $pos.doc.resolve($pos.before(i + 1));
+      }
+      if ($pos.node(i).type.spec.isolating) {
+        break;
+      }
+    }
+  }
+  return null;
+}
+
+/** Line start → lift current block or join with the block above (wrapped blocks + lists). */
+export function lineStartBackspace(
+  editor: Editor,
+  options: {
+    isActive: () => boolean;
+    lift: () => boolean;
+    shouldJoinBefore: (nodeNameBefore: string | undefined) => boolean;
+  }
+): boolean {
+  const { selection } = editor.state;
+
+  if (
+    !isTextSelection(selection) ||
+    !selection.$cursor ||
+    selection.$cursor.parentOffset !== 0
+  ) {
+    return false;
+  }
+
+  if (options.isActive()) {
+    return options.lift();
+  }
+
+  const $cut = findCutBefore(selection.$cursor);
+  const beforeName = $cut?.nodeBefore?.type.name;
+  if (options.shouldJoinBefore(beforeName)) {
+    return editor.chain().focus().joinTextblockBackward().run();
+  }
+
+  return false;
+}
+
+// Enter only splits inside the wrapper so the default handler does not exit the block.
+export function wrappedBlockEnter(
+  editor: Editor,
+  wrapperNodeName: string
+): boolean {
+  if (editor.isActive(wrapperNodeName)) {
+    return editor.commands.splitBlock();
+  }
+  return false;
+}
+
+// Backspace at line start inside the wrapper lifts the current paragraph out.
+// Backspace at line start in a paragraph below the wrapper uses `joinTextblockBackward`
+// so default `joinBackward` / `deleteBarrier` does not re-wrap the paragraph into the
+// wrapper above.
+export function wrappedBlockBackspace(
+  editor: Editor,
+  wrapperNodeName: string
+): boolean {
+  return lineStartBackspace(editor, {
+    isActive: () => editor.isActive(wrapperNodeName),
+    lift: () => editor.chain().focus().lift(wrapperNodeName).run(),
+    shouldJoinBefore: (beforeName) => beforeName === wrapperNodeName,
+  });
+}

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/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 { subscribeMentionEvents } from './subscribeMentionEvents';
+
+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
+  );
+}

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

@@ -0,0 +1,75 @@
+import type { StateField } from '@tiptap/pm/state';
+import { isCaretInBlockedContext } from './isCaretInBlockedContext';
+import type { MentionPluginOptions, TriggerState } from './types';
+
+export function makeMentionPluginState(
+  getIndicators: MentionPluginOptions['getIndicators']
+): StateField<TriggerState> {
+  return {
+    init(): TriggerState {
+      return { active: false };
+    },
+
+    apply(_tr, _prev, _old, newEditorState): TriggerState {
+      const { selection } = newEditorState;
+      if (!selection.empty) return { active: false };
+
+      const $from = selection.$from;
+      if (isCaretInBlockedContext($from, newEditorState.schema))
+        return { active: false };
+
+      const blockStart = $from.start();
+      const text = newEditorState.doc.textBetween(
+        blockStart,
+        $from.pos,
+        '\n',
+        '\n'
+      );
+
+      const mentionType = newEditorState.schema.marks.mention;
+      const indicators = getIndicators();
+      const found = findLastValidMentionIndicator(text, indicators, (idx) => {
+        if (!mentionType) return false;
+        const $at = newEditorState.doc.resolve(blockStart + idx + 1);
+        return Boolean(mentionType.isInSet($at.marks()));
+      });
+
+      if (!found) return { active: false };
+
+      const query = text.slice(found.indexInText + 1);
+
+      // Native platforms end the trigger after two spaces in the query.
+      if ((query.match(/ /g) ?? []).length >= 2) return { active: false };
+
+      return {
+        active: true,
+        indicator: found.indicator,
+        from: blockStart + found.indexInText,
+        to: $from.pos,
+        query,
+      };
+    },
+  };
+}
+
+function findLastValidMentionIndicator(
+  text: string,
+  indicators: readonly string[],
+  isIndicatorInsideFinalizedMention: (indexInText: number) => boolean
+): { indexInText: number; indicator: string } | null {
+  for (let idx = text.length - 1; idx >= 0; idx--) {
+    const ch = text[idx];
+    if (!ch || !indicators.includes(ch)) continue;
+
+    const isAtStart = idx === 0;
+    const isAfterSpace = idx > 0 && text[idx - 1] === ' ';
+    if (!isAtStart && !isAfterSpace) continue;
+
+    // Skip indicators inside a finalized mention
+    if (isIndicatorInsideFinalizedMention(idx)) continue;
+
+    return { indexInText: idx, indicator: ch };
+  }
+
+  return null;
+}

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

@@ -0,0 +1,4 @@
+import { PluginKey } from '@tiptap/pm/state';
+import type { TriggerState } from './types';
+
+export const mentionPluginKey = new PluginKey<TriggerState>('mention');

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

@@ -0,0 +1,68 @@
+import type { Mark, MarkType, Node } from '@tiptap/pm/model';
+import type { EditorState, Transaction } from '@tiptap/pm/state';
+
+export type MentionMarkRange = { from: number; to: number; mark: Mark };
+
+export function removeMentionMarksIfSpansResized(
+  transactions: readonly Transaction[],
+  oldState: EditorState,
+  newState: EditorState
+): Transaction | null {
+  if (!transactions.some((tr) => tr.docChanged)) return null;
+
+  const mentionType = newState.schema.marks.mention;
+  if (!mentionType) return null;
+
+  const merged = mergeContiguousSameMarkRanges(
+    collectMentionMarkRanges(oldState.doc, mentionType)
+  );
+
+  const tr = newState.tr;
+  let changed = false;
+
+  for (const { from, to, mark } of merged) {
+    const origLen = to - from;
+    let newFrom = from;
+    let newTo = to;
+
+    for (const t of transactions) {
+      newFrom = t.mapping.map(newFrom, 1);
+      newTo = t.mapping.map(newTo, -1);
+    }
+
+    if (newTo - newFrom !== origLen) {
+      tr.removeMark(newFrom, newTo, mark.type);
+      changed = true;
+    }
+  }
+
+  return changed ? tr : null;
+}
+
+function collectMentionMarkRanges(
+  doc: Node,
+  mentionType: MarkType
+): MentionMarkRange[] {
+  const ranges: MentionMarkRange[] = [];
+  doc.descendants((node, pos) => {
+    if (!node.isText) return;
+    const m = mentionType.isInSet(node.marks);
+    if (m) ranges.push({ from: pos, to: pos + node.nodeSize, mark: m });
+  });
+  return ranges;
+}
+
+function mergeContiguousSameMarkRanges(
+  ranges: MentionMarkRange[]
+): MentionMarkRange[] {
+  const merged: MentionMarkRange[] = [];
+  for (const range of ranges) {
+    const prev = merged[merged.length - 1];
+    if (prev && prev.mark === range.mark && prev.to === range.from) {
+      prev.to = range.to;
+    } else {
+      merged.push({ ...range });
+    }
+  }
+  return merged;
+}

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

@@ -0,0 +1,83 @@
+import { Fragment } from '@tiptap/pm/model';
+import type { EditorState } from '@tiptap/pm/state';
+import type { Editor } from '@tiptap/react';
+import { isCaretInBlockedContext } from './isCaretInBlockedContext';
+import { mentionPluginKey } from './mentionPluginKey';
+
+// Insert a mention mark at the current active trigger range.
+export function setMention(
+  editor: Editor,
+  indicator: string,
+  text: string,
+  attributes?: Record<string, string>
+): void {
+  const { state } = editor;
+  const triggerState = mentionPluginKey.getState(state);
+
+  if (!triggerState?.active) {
+    console.warn(
+      '[EnrichedMention] setMention called but there is no active mention trigger'
+    );
+    return;
+  }
+
+  const mentionType = state.schema.marks.mention;
+  if (!mentionType) return;
+
+  const $from = state.selection.$from;
+  if (isCaretInBlockedContext($from, state.schema)) {
+    console.warn(
+      '[EnrichedMention] setMention called but caret is inside a blocked context'
+    );
+    return;
+  }
+
+  const { from, to } = triggerState;
+
+  const extendedTo = Math.max(
+    to,
+    exclusiveEndThroughMatchingMentionTail(state, from, text)
+  );
+
+  const mentionMark = mentionType.create({
+    indicator,
+    text,
+    attributes: attributes ?? {},
+  });
+  const baseMarks = state.doc
+    .resolve(from)
+    .marks()
+    .filter((m) => m.type.name !== 'mention');
+  const fragment = Fragment.fromArray([
+    state.schema.text(text, mentionMark.addToSet(baseMarks)),
+    state.schema.text(' ', baseMarks),
+  ]);
+
+  editor
+    .chain()
+    .focus()
+    .command(({ tr }) => {
+      tr.replaceWith(from, extendedTo, fragment);
+      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/startMention.ts

@@ -0,0 +1,14 @@
+import type { Editor } from '@tiptap/react';
+
+export function startMention(
+  editor: Editor,
+  indicator: string,
+  indicators: string[]
+): void {
+  if (!indicators.includes(indicator)) {
+    console.warn(
+      `[EnrichedMention] startMention: "${indicator}" is not in mentionIndicators`
+    );
+  }
+  editor.chain().focus().insertContent(indicator).run();
+}

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

@@ -0,0 +1,20 @@
+import { Fragment } from '@tiptap/pm/model';
+import type { Node } from '@tiptap/pm/model';
+
+export function stripPartialMentionMarks(fragment: Fragment): Fragment {
+  const nodes: Node[] = [];
+  fragment.forEach((node) =>
+    nodes.push(
+      node.isText
+        ? node.mark(
+            node.marks.filter(
+              (m) =>
+                m.type.name !== 'mention' ||
+                node.text === (m.attrs.text as string)
+            )
+          )
+        : node.copy(stripPartialMentionMarks(node.content))
+    )
+  );
+  return Fragment.from(nodes);
+}