react-native-enriched-html 0.0.0 → 1.1.0-nightly-20260617-3dfd09072

package/src/web/formats/EnrichedCodeBlock.ts

@@ -0,0 +1,53 @@
+import Blockquote from '@tiptap/extension-blockquote';
+import { toggleParagraphFormat } from './formatRules';
+import {
+  wrappedBlockBackspace,
+  wrappedBlockEnter,
+} from './wrappedBlockKeyboard';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    codeBlock: {
+      toggleCodeBlock: () => ReturnType;
+    };
+  }
+}
+
+// We extend Blockquote, not CodeBlock: this node wraps (paragraph)+; TipTap's CodeBlock is a leaf block, not a paragraph container.
+export const EnrichedCodeBlock = Blockquote.extend({
+  name: 'codeBlock',
+  content: '(paragraph)+',
+
+  parseHTML() {
+    return [{ tag: 'codeblock' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['codeblock', HTMLAttributes, 0];
+  },
+
+  addCommands() {
+    return {
+      toggleCodeBlock:
+        () =>
+        ({ editor, commands, chain }) =>
+          toggleParagraphFormat(
+            () => editor.isActive('codeBlock'),
+            () => commands.lift('codeBlock'),
+            (c) => c.toggleWrap('codeBlock'),
+            chain
+          ),
+    };
+  },
+
+  addInputRules() {
+    return [];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: ({ editor }) => wrappedBlockEnter(editor, 'codeBlock'),
+      Backspace: ({ editor }) => wrappedBlockBackspace(editor, 'codeBlock'),
+    };
+  },
+});

package/src/web/formats/EnrichedHeading.ts

@@ -0,0 +1,36 @@
+import Heading from '@tiptap/extension-heading';
+import { toggleParagraphFormat } from './formatRules';
+
+export const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;
+
+export type HeadingTag = `h${(typeof HEADING_LEVELS)[number]}`;
+
+export const HEADING_TAGS = HEADING_LEVELS.map(
+  (n) => `h${n}` as HeadingTag
+) as readonly HeadingTag[];
+
+export const EnrichedHeading = Heading.configure({
+  levels: [...HEADING_LEVELS],
+}).extend({
+  addKeyboardShortcuts() {
+    return {};
+  },
+  addInputRules() {
+    return [];
+  },
+
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      toggleHeading:
+        (attrs) =>
+        ({ editor, commands, chain }) =>
+          toggleParagraphFormat(
+            () => editor.isActive('heading', attrs),
+            () => commands.setParagraph(),
+            (c) => c.setHeading(attrs),
+            chain
+          ),
+    };
+  },
+});

package/src/web/formats/EnrichedImage.ts

@@ -0,0 +1,59 @@
+import type { CommandProps } from '@tiptap/core';
+import Image from '@tiptap/extension-image';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+
+import { EnrichedImageNodeView } from './EnrichedImageNodeView';
+import { isImageBlocked } from './formatRules';
+
+export const EnrichedImage = Image.extend({
+  addOptions() {
+    const parent = this.parent?.();
+    return {
+      ...parent,
+      inline: true,
+      allowBase64: false,
+      resize: false,
+      HTMLAttributes: parent?.HTMLAttributes ?? {},
+    };
+  },
+
+  renderHTML({ node }) {
+    return [
+      'img',
+      {
+        src: node.attrs.src,
+        width: node.attrs.width,
+        height: node.attrs.height,
+      },
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(EnrichedImageNodeView, { as: 'span' });
+  },
+
+  addInputRules() {
+    return [];
+  },
+
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      setImage:
+        (options: { src: string; width?: number; height?: number }) =>
+        ({ editor, commands }: CommandProps) => {
+          if (isImageBlocked(editor)) {
+            return false;
+          }
+          return commands.insertContent({
+            type: this.name,
+            attrs: {
+              src: options.src,
+              width: options.width ?? null,
+              height: options.height ?? null,
+            },
+          });
+        },
+    };
+  },
+});

package/src/web/formats/EnrichedImageNodeView.tsx

@@ -0,0 +1,89 @@
+import { NodeViewWrapper, type ReactNodeViewProps } from '@tiptap/react';
+import type { CSSProperties } from 'react';
+import { useState } from 'react';
+
+const IMAGE_FALLBACK_SIZE = 80;
+
+const BROKEN_IMAGE_PATH_D =
+  'M200,840Q167,840 143.5,816.5Q120,793 120,760L120,200Q120,167 143.5,143.5Q167,120 200,120L760,120Q793,120 816.5,143.5Q840,167 840,200L840,760Q840,793 816.5,816.5Q793,840 760,840L200,840ZM240,503L400,343L560,503L720,343L760,383L760,200Q760,200 760,200Q760,200 760,200L200,200Q200,200 200,200Q200,200 200,200L200,463L240,503ZM200,760L760,760Q760,760 760,760Q760,760 760,760L760,496L720,456L560,616L400,456L240,616L200,576L200,760Q200,760 200,760Q200,760 200,760ZM200,760L200,760Q200,760 200,760Q200,760 200,760L200,496L200,576L200,463L200,383L200,200Q200,200 200,200Q200,200 200,200L200,200Q200,200 200,200Q200,200 200,200L200,463L200,463L200,576L200,576L200,760Q200,760 200,760Q200,760 200,760Z';
+
+function BrokenImageGlyph() {
+  return (
+    <svg
+      viewBox="0 0 960 960"
+      width="100%"
+      height="100%"
+      preserveAspectRatio="none"
+      aria-hidden
+      focusable="false"
+      className="eti-inline-image-broken-glyph"
+    >
+      <path fill="currentColor" d={BROKEN_IMAGE_PATH_D} />
+    </svg>
+  );
+}
+
+function dim(value: unknown): number | undefined {
+  if (value == null) return undefined;
+  if (typeof value === 'number' && !Number.isNaN(value)) return value;
+  const n = parseFloat(String(value));
+  return Number.isNaN(n) ? undefined : n;
+}
+
+export function EnrichedImageNodeView({ node }: ReactNodeViewProps) {
+  const src = ((node.attrs.src as string | null | undefined) ?? '').trim();
+  const rawW = dim(node.attrs.width);
+  const rawH = dim(node.attrs.height);
+  const [errored, setErrored] = useState(false);
+  const showPlaceholder = src.length === 0 || errored;
+
+  const placeholderW = rawW ?? IMAGE_FALLBACK_SIZE;
+  const placeholderH = rawH ?? IMAGE_FALLBACK_SIZE;
+
+  const sizeStyle: CSSProperties = {
+    width: placeholderW,
+    height: placeholderH,
+  };
+
+  if (showPlaceholder) {
+    return (
+      <NodeViewWrapper
+        as="span"
+        className="eti-inline-image eti-inline-image--placeholder"
+        style={sizeStyle}
+        data-eti-image-placeholder=""
+      >
+        <BrokenImageGlyph />
+      </NodeViewWrapper>
+    );
+  }
+
+  let imgDims: { width?: number; height?: number };
+  let imgStyle: CSSProperties | undefined;
+
+  if (rawW != null && rawH != null) {
+    imgDims = { width: rawW, height: rawH };
+    imgStyle = undefined;
+  } else if (rawH != null) {
+    imgDims = { height: rawH };
+    imgStyle = { width: 'auto' };
+  } else {
+    imgDims = { width: rawW ?? IMAGE_FALLBACK_SIZE };
+    imgStyle = { height: 'auto' };
+  }
+
+  return (
+    <NodeViewWrapper as="span" className="eti-inline-image">
+      <img
+        {...imgDims}
+        src={src}
+        alt=""
+        className="eti-inline-image-img"
+        style={imgStyle}
+        contentEditable={false}
+        draggable={false}
+        onError={() => setErrored(true)}
+      />
+    </NodeViewWrapper>
+  );
+}

package/src/web/formats/EnrichedItalic.ts

@@ -0,0 +1,16 @@
+import Italic from '@tiptap/extension-italic';
+
+export const EnrichedItalic = Italic.extend({
+  addInputRules() {
+    return [];
+  },
+  addKeyboardShortcuts() {
+    return {};
+  },
+  parseHTML() {
+    return [{ tag: 'i' }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['i', HTMLAttributes, 0];
+  },
+});

package/src/web/formats/EnrichedLink.ts

@@ -0,0 +1,149 @@
+import Link from '@tiptap/extension-link';
+import type { CommandProps } from '@tiptap/core';
+import type { Editor } from '@tiptap/react';
+
+import { nativePosToTiptapPos } from '../positionMapping';
+import { isLinkBlocked } from './formatRules';
+
+export const EnrichedLink = Link.extend({
+  excludes: 'link code',
+
+  renderHTML({ HTMLAttributes }) {
+    return ['a', { href: HTMLAttributes.href }, 0];
+  },
+
+  addOptions() {
+    const parent = this.parent?.()!;
+    return {
+      ...parent,
+      openOnClick: false,
+      autolink: false,
+      linkOnPaste: false,
+      HTMLAttributes: {
+        ...parent.HTMLAttributes,
+        target: null,
+        rel: null,
+      },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {};
+  },
+
+  addCommands() {
+    const parent = this.parent?.();
+    return {
+      ...parent,
+      setLink: (attributes) => (props: CommandProps) => {
+        if (isLinkBlocked(props.editor)) {
+          return false;
+        }
+        return parent?.setLink?.(attributes)(props) ?? false;
+      },
+      toggleLink: (attributes) => (props: CommandProps) => {
+        if (isLinkBlocked(props.editor)) {
+          return false;
+        }
+        return parent?.toggleLink?.(attributes)(props) ?? false;
+      },
+      unsetLink: () => (props: CommandProps) => {
+        if (isLinkBlocked(props.editor)) {
+          return false;
+        }
+        return parent?.unsetLink?.()(props) ?? false;
+      },
+    };
+  },
+});
+
+export function removeLink(editor: Editor, start: number, end: number) {
+  const { doc, selection: selectionBefore } = editor.state;
+  const from = nativePosToTiptapPos(doc, start);
+  const to = nativePosToTiptapPos(doc, end);
+  editor
+    .chain()
+    .focus()
+    .setTextSelection({ from, to })
+    .unsetLink()
+    .command(({ tr }) => {
+      const mapped = selectionBefore.map(tr.doc, tr.mapping);
+      if (mapped) {
+        tr.setSelection(mapped);
+      }
+      return true;
+    })
+    .run();
+}
+
+export function setLink(
+  editor: Editor,
+  start: number,
+  end: number,
+  text: string,
+  url: string
+) {
+  if (url.length === 0 || text.length === 0) {
+    return;
+  }
+  const { state } = editor;
+  const doc = state.doc;
+  const from = nativePosToTiptapPos(doc, start);
+  const to = nativePosToTiptapPos(doc, end);
+
+  if (isRangeLinkBlocked(editor, from, to)) {
+    return;
+  }
+
+  const linkType = state.schema.marks.link;
+  if (!linkType) return;
+  const linkMark = linkType.create({ href: url });
+  editor
+    .chain()
+    .focus()
+    .command(({ tr, state: s }) => {
+      if (from === to) {
+        const marksAtRangeStart = doc.resolve(from).marks();
+        const marksWithLink = linkMark.addToSet(marksAtRangeStart);
+        tr.insert(from, s.schema.text(text, marksWithLink));
+      } else {
+        const currentText = doc.textBetween(from, to);
+
+        if (text !== currentText) {
+          const marksAtRangeStart = doc.resolve(from).marks();
+          const marksWithLink = linkMark.addToSet(marksAtRangeStart);
+          tr.replaceWith(from, to, s.schema.text(text, marksWithLink));
+        } else {
+          tr.addMark(from, to, linkMark);
+        }
+      }
+      return true;
+    })
+    .run();
+}
+
+// We use this function instead of relying on editor.isActive('...') because it
+// checks the current selection, not from and to passed by user
+function isRangeLinkBlocked(editor: Editor, from: number, to: number): boolean {
+  const { doc, schema } = editor.state;
+
+  const hasInlineCode =
+    schema.marks.code && doc.rangeHasMark(from, to, schema.marks.code);
+
+  if (hasInlineCode) {
+    return true;
+  }
+
+  let hasBlockedNode = false;
+  const blockedNodes = ['codeBlock', 'image'];
+  doc.nodesBetween(from, to, (node) => {
+    if (hasBlockedNode) return false;
+    if (blockedNodes.includes(node.type.name)) {
+      hasBlockedNode = true;
+      return false;
+    }
+    return true;
+  });
+
+  return hasBlockedNode;
+}

package/src/web/formats/EnrichedListItem.ts

@@ -0,0 +1,17 @@
+import { ListItem } from '@tiptap/extension-list';
+
+import { listBackspace, listEnter } from './listKeyboard';
+
+const LIST_WRAPPERS = ['unorderedList', 'orderedList'] as const;
+
+export const EnrichedListItem = ListItem.extend({
+  content: 'paragraph',
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: ({ editor }) => listEnter(editor, 'listItem'),
+      Backspace: ({ editor }) =>
+        listBackspace(editor, 'listItem', LIST_WRAPPERS),
+    };
+  },
+});

package/src/web/formats/EnrichedMention.ts

@@ -0,0 +1,55 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+
+export const EXCLUDED_MARKS = ['link', 'code', 'mention'];
+
+export const EnrichedMention = Mark.create({
+  name: 'mention',
+  inclusive: false,
+  excludes: EXCLUDED_MARKS.join(' '),
+  priority: 1000,
+
+  addAttributes() {
+    return {
+      indicator: {
+        default: '@',
+      },
+      text: {
+        default: '',
+      },
+      attributes: {
+        default: {},
+        parseHTML(el: HTMLElement): Record<string, string> {
+          const out: Record<string, string> = {};
+          for (let i = 0; i < el.attributes.length; i++) {
+            const attr = el.attributes.item(i);
+            if (!attr) continue;
+            if (attr.name === 'text' || attr.name === 'indicator') continue;
+            out[attr.name] = attr.value;
+          }
+          return out;
+        },
+        renderHTML(attrs: Record<string, unknown>): Record<string, string> {
+          return (attrs.attributes ?? {}) as Record<string, string>;
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'mention' }];
+  },
+
+  renderHTML({ mark }) {
+    return [
+      'mention',
+      mergeAttributes(
+        {
+          text: mark.attrs.text as string,
+          indicator: mark.attrs.indicator as string,
+        },
+        (mark.attrs.attributes ?? {}) as Record<string, string>
+      ),
+      0,
+    ];
+  },
+});

package/src/web/formats/EnrichedOrderedList.ts

@@ -0,0 +1,40 @@
+import { wrappingInputRule } from '@tiptap/core';
+import { OrderedList } from '@tiptap/extension-list';
+
+import { applyWrappingListToSelection } from './applyWrappingListToSelection';
+
+const ORDERED_LIST_INPUT_REGEX = /^1\.\s$/;
+
+export const EnrichedOrderedList = OrderedList.extend({
+  addInputRules() {
+    return [
+      wrappingInputRule({
+        find: ORDERED_LIST_INPUT_REGEX,
+        type: this.type,
+      }),
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {};
+  },
+
+  addCommands() {
+    return {
+      toggleOrderedList:
+        () =>
+        ({ editor, commands, chain }) => {
+          if (editor.isActive('orderedList')) {
+            return commands.setParagraph();
+          }
+
+          return applyWrappingListToSelection(
+            editor,
+            chain,
+            'orderedList',
+            'listItem'
+          );
+        },
+    };
+  },
+});

package/src/web/formats/EnrichedStrike.ts

@@ -0,0 +1,16 @@
+import Strike from '@tiptap/extension-strike';
+
+export const EnrichedStrike = Strike.extend({
+  addInputRules() {
+    return [];
+  },
+  addKeyboardShortcuts() {
+    return {};
+  },
+  parseHTML() {
+    return [{ tag: 's' }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['s', HTMLAttributes, 0];
+  },
+});

package/src/web/formats/EnrichedUnderline.ts

@@ -0,0 +1,16 @@
+import Underline from '@tiptap/extension-underline';
+
+export const EnrichedUnderline = Underline.extend({
+  addInputRules() {
+    return [];
+  },
+  addKeyboardShortcuts() {
+    return {};
+  },
+  parseHTML() {
+    return [{ tag: 'u' }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['u', HTMLAttributes, 0];
+  },
+});

package/src/web/formats/EnrichedUnorderedList.ts

@@ -0,0 +1,50 @@
+import { wrappingInputRule, type CommandProps } from '@tiptap/core';
+import { BulletList } from '@tiptap/extension-list';
+
+import { applyWrappingListToSelection } from './applyWrappingListToSelection';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    unorderedList: {
+      toggleUnorderedList: () => ReturnType;
+    };
+  }
+}
+
+const BULLET_LIST_INPUT_REGEX = /^\s*-\s$/;
+
+export const EnrichedUnorderedList = BulletList.extend({
+  name: 'unorderedList',
+
+  addInputRules() {
+    return [
+      wrappingInputRule({
+        find: BULLET_LIST_INPUT_REGEX,
+        type: this.type,
+      }),
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {};
+  },
+
+  addCommands() {
+    return {
+      toggleUnorderedList:
+        () =>
+        ({ editor, commands, chain }: CommandProps) => {
+          if (editor.isActive('unorderedList')) {
+            return commands.setParagraph();
+          }
+
+          return applyWrappingListToSelection(
+            editor,
+            chain,
+            'unorderedList',
+            'listItem'
+          );
+        },
+    };
+  },
+});

package/src/web/formats/applyWrappingListToSelection.ts

@@ -0,0 +1,76 @@
+import type { ChainedCommands, Editor } from '@tiptap/core';
+import type { Node } from '@tiptap/pm/model';
+import { Fragment } from '@tiptap/pm/model';
+import { TextSelection } from '@tiptap/pm/state';
+
+import { nativePosToTiptapPos, tiptapPosToNativePos } from '../positionMapping';
+
+/**
+ * Clears block styling with `clearNodes`, then wraps the selection’s blocks in a flat
+ * `listTypeName` (one `itemTypeName` per block).
+ *
+ * We don't use toggleList because we've changed ListItem's content to
+ * 'paragraph', in order not to allow nested lists. This however caused the
+ * default toggle implementation to fail.
+ *
+ * SELECTION PRESERVATION: Modifying node boundaries here (destroying and
+ * recreating blocks) causes ProseMirror's built-in selection to be invalid. To
+ * fix this, we use our Android/iOS native coordinate system. Because the native
+ * selection only cares about raw content and ignores Tiptap's node boundary
+ * tokens, we store the cursor positions in the native format before the
+ * transaction, and map them back to the new Tiptap document afterward.
+ */
+export function applyWrappingListToSelection(
+  editor: Editor,
+  chain: () => ChainedCommands,
+  listTypeName: string,
+  itemTypeName: string,
+  itemAttrs: Record<string, unknown> | null = null
+): boolean {
+  const { doc: docBefore, selection: selBefore } = editor.state;
+  const nativeAnchor = tiptapPosToNativePos(docBefore, selBefore.anchor);
+  const nativeHead = tiptapPosToNativePos(docBefore, selBefore.head);
+
+  return chain()
+    .clearNodes()
+    .command(({ tr, state }) => {
+      const listType = state.schema.nodes[listTypeName];
+      const itemType = state.schema.nodes[itemTypeName];
+      if (!listType || !itemType) {
+        return false;
+      }
+
+      const { $from, $to } = state.selection;
+      const range = $from.blockRange($to);
+      if (!range) {
+        return false;
+      }
+
+      const listItems: Node[] = [];
+      for (let i = range.startIndex; i < range.endIndex; i++) {
+        const block = range.parent.child(i);
+        listItems.push(
+          itemType.create(itemAttrs, Fragment.from(block.copy(block.content)))
+        );
+      }
+
+      if (listItems.length === 0) {
+        return false;
+      }
+
+      const list = listType.create(null, Fragment.from(listItems));
+      tr.replaceWith(range.start, range.end, list);
+
+      const docAfter = tr.doc;
+      const pmAnchor = nativePosToTiptapPos(docAfter, nativeAnchor);
+      const pmHead = nativePosToTiptapPos(docAfter, nativeHead);
+      tr.setSelection(
+        TextSelection.between(
+          docAfter.resolve(pmAnchor),
+          docAfter.resolve(pmHead)
+        )
+      );
+      return true;
+    })
+    .run();
+}