react-native-enriched-html 0.0.0 → 1.0.1

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

@@ -0,0 +1,102 @@
+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']
+): 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 wordEndPos = getCurrentWordEndPosition(newEditorState, $from);
+
+      const text = newEditorState.doc.textBetween(
+        blockStart,
+        wordEndPos,
+        '\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: wordEndPos,
+        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;
+
+    // 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/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,73 @@
+import { Fragment } from '@tiptap/pm/model';
+import { TextSelection } 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;
+
+  // 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,
+    text,
+    attributes: attributes ?? {},
+  });
+  const baseMarks = state.doc
+    .resolve(from)
+    .marks()
+    .filter((m) => m.type.name !== 'mention');
+
+  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, to, fragment);
+
+      const targetPos = from + fragment.size + (hasSpaceAfter ? 1 : 0);
+      tr.setSelection(TextSelection.create(tr.doc, targetPos));
+
+      return true;
+    })
+    .run();
+}

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);
+}

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/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>,
+  };
+}

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,105 @@
+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-a': ({ editor }) => {
+        const { doc } = editor.state;
+        return editor.commands.setTextSelection({
+          from: 0,
+          to: doc.content.size,
+        });
+      },
+      '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 });
+      },
+    };
+  },
+});