react-native-enriched-html 0.0.0 → 1.0.1

package/src/web/formats/EnrichedCodeBlock.ts

@@ -0,0 +1,54 @@
+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,
+            editor
+          ),
+    };
+  },
+
+  addInputRules() {
+    return [];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: ({ editor }) => wrappedBlockEnter(editor, 'codeBlock'),
+      Backspace: ({ editor }) => wrappedBlockBackspace(editor, 'codeBlock'),
+    };
+  },
+});

package/src/web/formats/EnrichedHeading.ts

@@ -0,0 +1,37 @@
+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,
+            editor
+          ),
+    };
+  },
+});

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,87 @@
+import { NodeViewWrapper, type ReactNodeViewProps } from '@tiptap/react';
+import type { CSSProperties } from 'react';
+import { useState } from 'react';
+import { BROKEN_IMAGE_PATH_D } from '../constants/brokenImageGlyph';
+
+const IMAGE_FALLBACK_SIZE = 80;
+
+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,204 @@
+import Link, { type LinkOptions } from '@tiptap/extension-link';
+import { mergeAttributes, type CommandProps } from '@tiptap/core';
+import type { Editor } from '@tiptap/react';
+
+import { nativePosToTiptapPos } from '../positionMapping';
+import { isLinkBlocked } from './formatRules';
+import { findAutolinkRangesInWord } from '../pmPlugins/AutolinkPlugin/autolinkRegex';
+
+function isFullLinkMatch(text: string, linkRegex: RegExp | undefined): boolean {
+  const ranges = findAutolinkRangesInWord(text, linkRegex);
+  return ranges.some((r) => r.start === 0 && r.endExclusive === text.length);
+}
+
+export const EnrichedLink = Link.extend<
+  LinkOptions & { getLinkRegex: () => RegExp | null | undefined }
+>({
+  excludes: 'link code',
+
+  parseHTML() {
+    return [
+      {
+        tag: 'a[href]',
+        getAttrs: (node: string | HTMLElement) => {
+          if (typeof node === 'string') return null;
+          const href = node.getAttribute('href');
+          if (!href || /^javascript:/i.test(href)) return false;
+          return null;
+        },
+      },
+    ];
+  },
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      auto: {
+        default: false,
+        parseHTML: (el) => {
+          const href = el.getAttribute('href');
+          const textContent = el.textContent;
+          if (!href || href !== textContent) return false;
+
+          const linkRegex = this.options.getLinkRegex();
+          if (linkRegex === null) return false;
+
+          return isFullLinkMatch(href, linkRegex);
+        },
+        renderHTML: () => {
+          return {};
+        },
+      },
+    };
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'a',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+
+  addOptions() {
+    const parent = this.parent?.()!;
+    return {
+      ...parent,
+      openOnClick: false,
+      autolink: false,
+      linkOnPaste: false,
+      HTMLAttributes: {
+        ...parent.HTMLAttributes,
+        target: null,
+        rel: null,
+      },
+      getLinkRegex: () => {
+        throw new Error('EnrichedLink.configure({ getLinkRegex }) is required');
+      },
+    };
+  },
+
+  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;
+      },
+    };
+  },
+
+  addPasteRules() {
+    return [];
+  },
+});
+
+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,43 @@
+import { wrappingInputRule } from '@tiptap/core';
+import { OrderedList } from '@tiptap/extension-list';
+
+import { applyWrappingListToSelection } from './applyWrappingListToSelection';
+import { withPreservedAlignment } from './formatRules';
+
+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, chain }) => {
+          if (editor.isActive('orderedList')) {
+            return withPreservedAlignment(editor, chain(), (c) =>
+              c.clearNodes().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/EnrichedTextAlign.ts

@@ -0,0 +1,88 @@
+import { isTextSelection } from '@tiptap/core';
+import { TextAlign } from '@tiptap/extension-text-align';
+
+export const EnrichedTextAlign = TextAlign.extend({
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      setTextAlign: (alignment) => (props) => {
+        const { state, dispatch, tr } = props;
+
+        if (!this.options.alignments.includes(alignment)) {
+          return false;
+        }
+
+        const { $from } = state.selection;
+        let listNode: typeof $from.parent | null = null;
+        let listPos = -1;
+
+        // Walk up the tree to see if the cursor is inside a list wrapper
+        for (let depth = $from.depth; depth > 0; depth--) {
+          const node = $from.node(depth);
+          if (
+            ['orderedList', 'unorderedList', 'checkboxList'].includes(
+              node.type.name
+            )
+          ) {
+            listNode = node;
+            listPos = $from.before(depth);
+            break;
+          }
+        }
+
+        // If in a list, manually apply the alignment to the parent wrapper
+        if (listNode) {
+          if (dispatch) {
+            tr.setNodeMarkup(listPos, undefined, {
+              ...listNode.attrs,
+              textAlign: alignment,
+            });
+          }
+          return true;
+        }
+
+        // If not in a list, fire the original Tiptap command
+        return this.parent?.().setTextAlign?.(alignment)(props) ?? false;
+      },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      ...this.parent?.(),
+      Backspace: () => {
+        const { selection } = this.editor.state;
+
+        if (!selection.empty || !isTextSelection(selection)) {
+          return false;
+        }
+
+        const { $cursor } = selection;
+
+        if (!$cursor || !this.editor.isEmpty) {
+          return false;
+        }
+
+        const currentAlignment = $cursor.parent.attrs.textAlign;
+        const hasAlignment = currentAlignment && currentAlignment !== 'auto';
+
+        // If the input is empty and has an alignment, clear the alignment
+        if (hasAlignment) {
+          return this.editor.commands.unsetTextAlign();
+        }
+
+        return false;
+      },
+    };
+  },
+}).configure({
+  types: [
+    'paragraph',
+    'heading',
+    'orderedList',
+    'unorderedList',
+    'checkboxList',
+  ],
+  defaultAlignment: null,
+  alignments: ['left', 'center', 'right', 'justify'],
+});

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