react-native-enriched-html 1.0.0 → 1.0.1

package/src/web/EnrichedTextInput.tsx

@@ -1,11 +1,12 @@
 import {
+  useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
   type CSSProperties,
 } from 'react';
-import './EnrichedTextInput.css';
+import './EnrichedText.css';
 import type { Node } from '@tiptap/pm/model';
 import type {
   EnrichedTextInputInstance,
@@ -32,13 +33,14 @@ import { useOnChangeHtml } from './useOnChangeHtml';
 import { useOnChangeText } from './useOnChangeText';
 import { useOnChangeState } from './useOnChangeState';
 import { useOnLinkDetected } from './useOnLinkDetected';
+import type { LinkEmitterState } from './emitLinkDetected';
 import {
   prepareHtmlForTiptap,
   normalizeHtmlFromTiptap,
-} from './tiptapHtmlNormalizer';
+} from './normalization/tiptapHtmlNormalizer';
 import { ENRICHED_TEXT_INPUT_DEFAULT_PROPS } from '../utils/EnrichedTextInputDefaultProps';
 import { enrichedInputStyleToCSSProperties } from './styleConversion/enrichedInputStyleToCSSProperties';
-import { enrichedInputThemingToCSSProperties } from './styleConversion/enrichedInputThemingToCSSProperties';
+import { enrichedInputThemingToCSSProperties } from './styleConversion/enrichedThemingToCSSProperties';
 import { buildMentionRulesCSS } from './styleConversion/buildMentionRulesCSS';
 import {
   htmlStyleToCSSVariables,
@@ -60,6 +62,7 @@ import { EnrichedUnorderedList } from './formats/EnrichedUnorderedList';
 import { EnrichedOrderedList } from './formats/EnrichedOrderedList';
 import { EnrichedCheckboxItem } from './formats/EnrichedCheckboxItem';
 import { EnrichedCheckboxList } from './formats/EnrichedCheckboxList';
+import { EnrichedTextAlign } from './formats/EnrichedTextAlign';
 import { StripBoldInStyledHeadingsPlugin } from './pmPlugins/StripBoldInStyledHeadingsPlugin';
 import { StrictMarksPlugin } from './pmPlugins/StrictMarksPlugin';
 import { MergeAdjacentSameKindBlocksPlugin } from './pmPlugins/MergeAdjacentSameKindBlocksPlugin';
@@ -69,11 +72,15 @@ import {
   MentionPlugin,
   setMention,
   startMention,
-  subscribeMentionEvents,
+  useMentionEvents,
 } from './pmPlugins/MentionPlugin';
 import { StripMarksOnImagePlugin } from './pmPlugins/StripMarksOnImagePlugin';
 import { ShortcutPlugin } from './pmPlugins/ShortcutPlugin';
 import { returnKeyTypeToEnterKeyHint } from './returnKeyTypeToEnterKeyHint';
+import { ENRICHED_TEXT_INPUT_CLASSNAME } from './constants/classNames';
+import { AutolinkPlugin } from './pmPlugins/AutolinkPlugin';
+import { useStableRef } from './useStableRef';
+
 function runFocused(
   editor: Editor,
   apply: (chain: ChainedCommands) => ChainedCommands
@@ -110,60 +117,39 @@ export const EnrichedTextInput = ({
   onStartMention,
   onChangeMention,
   onEndMention,
+  linkRegex,
   htmlStyle,
+  useHtmlNormalizer,
 }: EnrichedTextInputProps) => {
   const tiptapContent =
-    defaultValue != null ? prepareHtmlForTiptap(defaultValue) : defaultValue;
+    defaultValue != null
+      ? prepareHtmlForTiptap(defaultValue, useHtmlNormalizer)
+      : defaultValue;
 
   const resolvedHtmlStyle = useMemo(
     () => mergeWithDefaultHtmlStyle(htmlStyle),
     [htmlStyle]
   );
-
-  const htmlStyleRef = useRef(resolvedHtmlStyle);
-  useEffect(() => {
-    htmlStyleRef.current = resolvedHtmlStyle;
-  }, [resolvedHtmlStyle]);
-
-  const onPasteImagesRef = useRef(onPasteImages);
-  useEffect(() => {
-    onPasteImagesRef.current = onPasteImages;
-  }, [onPasteImages]);
-
-  const mentionIndicatorsRef = useRef(mentionIndicators);
-  useEffect(() => {
-    mentionIndicatorsRef.current = mentionIndicators;
-  }, [mentionIndicators]);
-
-  const mentionCallbacksRef = useRef({
-    onStartMention,
-    onChangeMention,
-    onEndMention,
-    onMentionDetected,
-  });
-  useEffect(() => {
-    mentionCallbacksRef.current = {
+  const mentionCallbacks = useMemo(
+    () => ({
       onStartMention,
       onChangeMention,
       onEndMention,
       onMentionDetected,
-    };
-  }, [onStartMention, onChangeMention, onEndMention, onMentionDetected]);
+    }),
+    [onStartMention, onChangeMention, onEndMention, onMentionDetected]
+  );
 
-  const submitBehaviorRef = useRef(submitBehavior);
-  const onSubmitEditingRef = useRef(onSubmitEditing);
-  const onKeyPressRef = useRef(onKeyPress);
-  const editorInstanceRef = useRef<Editor | null>(null);
+  const htmlStyleRef = useStableRef(resolvedHtmlStyle);
+  const onPasteImagesRef = useStableRef(onPasteImages);
+  const mentionIndicatorsRef = useStableRef(mentionIndicators);
+  const submitBehaviorRef = useStableRef(submitBehavior);
+  const onSubmitEditingRef = useStableRef(onSubmitEditing);
+  const onKeyPressRef = useStableRef(onKeyPress);
+  const useHtmlNormalizerRef = useStableRef(useHtmlNormalizer);
+  const mentionCallbacksRef = useStableRef(mentionCallbacks);
 
-  useEffect(() => {
-    submitBehaviorRef.current = submitBehavior;
-  }, [submitBehavior]);
-  useEffect(() => {
-    onSubmitEditingRef.current = onSubmitEditing;
-  }, [onSubmitEditing]);
-  useEffect(() => {
-    onKeyPressRef.current = onKeyPress;
-  }, [onKeyPress]);
+  const editorInstanceRef = useRef<Editor | null>(null);
 
   const handleKeyDown = (doc: Node, event: KeyboardEvent): boolean => {
     onKeyPressRef.current?.(adaptWebToNativeEvent(event, { key: event.key }));
@@ -185,6 +171,16 @@ export const EnrichedTextInput = ({
     return false;
   };
 
+  const linkEmitterRef = useRef<LinkEmitterState>({
+    linkRegex,
+    onLinkDetected,
+    lastEmitted: null,
+  });
+  useEffect(() => {
+    linkEmitterRef.current.linkRegex = linkRegex;
+    linkEmitterRef.current.onLinkDetected = onLinkDetected;
+  }, [linkRegex, onLinkDetected]);
+
   const extensions = useMemo(
     () => [
       Document,
@@ -196,7 +192,9 @@ export const EnrichedTextInput = ({
       EnrichedUnderline,
       EnrichedStrike,
       EnrichedCode,
-      EnrichedLink,
+      EnrichedLink.configure({
+        getLinkRegex: () => linkEmitterRef.current.linkRegex,
+      }),
       EnrichedImage,
       EnrichedMention,
       EnrichedHeading,
@@ -207,6 +205,7 @@ export const EnrichedTextInput = ({
       EnrichedUnorderedList,
       EnrichedOrderedList,
       EnrichedCheckboxList,
+      EnrichedTextAlign,
       StripMarksInCodeBlockPlugin,
       StripMarksOnImagePlugin,
       StripBoldInStyledHeadingsPlugin.configure({
@@ -220,12 +219,15 @@ export const EnrichedTextInput = ({
       ShortcutPlugin.configure({
         getHtmlStyle: () => htmlStyleRef.current,
       }),
+      AutolinkPlugin.configure({
+        getLinkEmitter: () => linkEmitterRef.current,
+      }),
       Placeholder.configure({
         placeholder,
         showOnlyWhenEditable: true,
       }),
     ],
-    [placeholder]
+    [placeholder, htmlStyleRef, mentionIndicatorsRef]
   );
 
   const editor = useEditor(
@@ -264,6 +266,9 @@ export const EnrichedTextInput = ({
           autoCapitalize,
           enterkeyhint: returnKeyTypeToEnterKeyHint(returnKeyType),
         },
+        transformPastedHTML: (html) => {
+          return prepareHtmlForTiptap(html, useHtmlNormalizerRef.current);
+        },
       },
     },
     [tiptapContent, extensions]
@@ -291,15 +296,16 @@ export const EnrichedTextInput = ({
     editor?.commands.normalizeBoldInStyledHeadings();
   }, [editor, resolvedHtmlStyle]);
 
-  useEffect(() => {
-    if (!editor) return;
-    return subscribeMentionEvents(editor, () => mentionCallbacksRef.current);
-  }, [editor]);
+  const getMentionCallbacks = useCallback(
+    () => mentionCallbacksRef.current,
+    [mentionCallbacksRef]
+  );
 
+  useMentionEvents(editor, getMentionCallbacks);
   useOnChangeHtml(editor, onChangeHtml);
   useOnChangeText(editor, onChangeText);
   useOnChangeState(editor, resolvedHtmlStyle, onChangeState);
-  useOnLinkDetected(editor, onLinkDetected);
+  useOnLinkDetected(editor, linkEmitterRef);
 
   useImperativeHandle(
     ref,
@@ -307,7 +313,9 @@ export const EnrichedTextInput = ({
       focus: () => editor.commands.focus(),
       blur: () => editor.commands.blur(),
       setValue: (value: string) =>
-        editor.commands.setContent(prepareHtmlForTiptap(value)),
+        editor.commands.setContent(
+          prepareHtmlForTiptap(value, useHtmlNormalizerRef.current)
+        ),
       setSelection: (start, end) => {
         const doc = editor.state.doc;
         runFocused(editor, (c) =>
@@ -354,9 +362,15 @@ export const EnrichedTextInput = ({
       measureInWindow: () => {},
       measureLayout: () => {},
       setNativeProps: () => {},
-      setTextAlignment: () => {},
+      setTextAlignment: (alignment) => {
+        if (alignment === 'auto') {
+          runFocused(editor, (c) => c.unsetTextAlign());
+        } else {
+          runFocused(editor, (c) => c.setTextAlign(alignment));
+        }
+      },
     }),
-    [editor]
+    [editor, mentionIndicatorsRef, useHtmlNormalizerRef]
   );
 
   const editorStyle: CSSProperties = useMemo(
@@ -394,7 +408,7 @@ export const EnrichedTextInput = ({
       {mentionRulesCSS ? <style>{mentionRulesCSS}</style> : null}
       <EditorContent
         editor={editor}
-        className="eti-editor"
+        className={ENRICHED_TEXT_INPUT_CLASSNAME}
         style={finalStyle}
         data-placeholder={placeholder}
       />

package/src/web/constants/brokenImageGlyph.ts

@@ -0,0 +1,7 @@
+// SVG path of the broken-image glyph, shared between the editor's
+// image node view (rendered as an inline <svg>).
+export 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';
+
+// Glyph as a `mask`-ready data URI, used in EnrichedText.css.
+export const BROKEN_IMAGE_GLYPH_MASK = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 960'%3E%3Cpath d='${BROKEN_IMAGE_PATH_D}'/%3E%3C/svg%3E")`;

package/src/web/constants/classNames.ts

@@ -0,0 +1,2 @@
+export const ENRICHED_TEXT_INPUT_CLASSNAME = 'eti-editor';
+export const ENRICHED_TEXT_CLASSNAME = 'et-view';

package/src/web/emitLinkDetected.ts

@@ -0,0 +1,29 @@
+import type { RefObject } from 'react';
+import type { OnLinkDetected } from '../types';
+
+export interface LinkEmitterState {
+  linkRegex?: RegExp | null;
+  onLinkDetected?: (e: OnLinkDetected) => void;
+  lastEmitted: OnLinkDetected | null;
+}
+
+export type LinkEmitterRef = RefObject<LinkEmitterState>;
+
+function isSamePayload(a: OnLinkDetected, b: OnLinkDetected): boolean {
+  return (
+    a.text === b.text &&
+    a.url === b.url &&
+    a.start === b.start &&
+    a.end === b.end
+  );
+}
+
+export function emitLinkDetected(
+  state: LinkEmitterState,
+  next: OnLinkDetected
+): void {
+  const prev = state.lastEmitted;
+  if (prev && isSamePayload(prev, next)) return;
+  state.lastEmitted = next;
+  state.onLinkDetected?.(next);
+}

package/src/web/formats/EnrichedBlockquote.ts

@@ -29,7 +29,8 @@ export const EnrichedBlockquote = Blockquote.extend({
             () => editor.isActive('blockquote'),
             () => commands.lift('blockquote'),
             (c) => c.toggleWrap('blockquote'),
-            chain
+            chain,
+            editor
           ),
     };
   },

package/src/web/formats/EnrichedCheckboxList.ts

@@ -2,6 +2,7 @@ import { type CommandProps } from '@tiptap/core';
 import { TaskList } from '@tiptap/extension-list';
 
 import { applyWrappingListToSelection } from './applyWrappingListToSelection';
+import { withPreservedAlignment } from './formatRules';
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -24,9 +25,11 @@ export const EnrichedCheckboxList = TaskList.extend({
   addCommands() {
     return {
       toggleCheckboxList: (checked: boolean) => {
-        return ({ editor, commands, chain }: CommandProps): boolean => {
+        return ({ editor, chain }: CommandProps): boolean => {
           if (editor.isActive('checkboxList')) {
-            return commands.setParagraph();
+            return withPreservedAlignment(editor, chain(), (c) =>
+              c.clearNodes().setParagraph()
+            );
           }
 
           return applyWrappingListToSelection(

package/src/web/formats/EnrichedCodeBlock.ts

@@ -35,7 +35,8 @@ export const EnrichedCodeBlock = Blockquote.extend({
             () => editor.isActive('codeBlock'),
             () => commands.lift('codeBlock'),
             (c) => c.toggleWrap('codeBlock'),
-            chain
+            chain,
+            editor
           ),
     };
   },

package/src/web/formats/EnrichedHeading.ts

@@ -29,7 +29,8 @@ export const EnrichedHeading = Heading.configure({
             () => editor.isActive('heading', attrs),
             () => commands.setParagraph(),
             (c) => c.setHeading(attrs),
-            chain
+            chain,
+            editor
           ),
     };
   },

package/src/web/formats/EnrichedImageNodeView.tsx

@@ -1,12 +1,10 @@
 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;
 
-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

package/src/web/formats/EnrichedLink.ts

@@ -1,15 +1,63 @@
-import Link from '@tiptap/extension-link';
-import type { CommandProps } from '@tiptap/core';
+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';
 
-export const EnrichedLink = Link.extend({
+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', { href: HTMLAttributes.href }, 0];
+    return [
+      'a',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
   },
 
   addOptions() {
@@ -24,6 +72,9 @@ export const EnrichedLink = Link.extend({
         target: null,
         rel: null,
       },
+      getLinkRegex: () => {
+        throw new Error('EnrichedLink.configure({ getLinkRegex }) is required');
+      },
     };
   },
 
@@ -55,6 +106,10 @@ export const EnrichedLink = Link.extend({
       },
     };
   },
+
+  addPasteRules() {
+    return [];
+  },
 });
 
 export function removeLink(editor: Editor, start: number, end: number) {

package/src/web/formats/EnrichedOrderedList.ts

@@ -2,6 +2,7 @@ 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$/;
 
@@ -23,9 +24,11 @@ export const EnrichedOrderedList = OrderedList.extend({
     return {
       toggleOrderedList:
         () =>
-        ({ editor, commands, chain }) => {
+        ({ editor, chain }) => {
           if (editor.isActive('orderedList')) {
-            return commands.setParagraph();
+            return withPreservedAlignment(editor, chain(), (c) =>
+              c.clearNodes().setParagraph()
+            );
           }
 
           return applyWrappingListToSelection(

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/EnrichedUnorderedList.ts

@@ -2,6 +2,7 @@ import { wrappingInputRule, type CommandProps } from '@tiptap/core';
 import { BulletList } from '@tiptap/extension-list';
 
 import { applyWrappingListToSelection } from './applyWrappingListToSelection';
+import { withPreservedAlignment } from './formatRules';
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -33,9 +34,11 @@ export const EnrichedUnorderedList = BulletList.extend({
     return {
       toggleUnorderedList:
         () =>
-        ({ editor, commands, chain }: CommandProps) => {
+        ({ editor, chain }: CommandProps) => {
           if (editor.isActive('unorderedList')) {
-            return commands.setParagraph();
+            return withPreservedAlignment(editor, chain(), (c) =>
+              c.clearNodes().setParagraph()
+            );
           }
 
           return applyWrappingListToSelection(

package/src/web/formats/applyWrappingListToSelection.ts

@@ -4,6 +4,7 @@ import { Fragment } from '@tiptap/pm/model';
 import { TextSelection } from '@tiptap/pm/state';
 
 import { nativePosToTiptapPos, tiptapPosToNativePos } from '../positionMapping';
+import { withPreservedAlignment } from './formatRules';
 
 /**
  * Clears block styling with `clearNodes`, then wraps the selection’s blocks in a flat
@@ -31,9 +32,8 @@ export function applyWrappingListToSelection(
   const nativeAnchor = tiptapPosToNativePos(docBefore, selBefore.anchor);
   const nativeHead = tiptapPosToNativePos(docBefore, selBefore.head);
 
-  return chain()
-    .clearNodes()
-    .command(({ tr, state }) => {
+  return withPreservedAlignment(editor, chain(), (c) =>
+    c.clearNodes().command(({ tr, state }) => {
       const listType = state.schema.nodes[listTypeName];
       const itemType = state.schema.nodes[itemTypeName];
       if (!listType || !itemType) {
@@ -72,5 +72,5 @@ export function applyWrappingListToSelection(
       );
       return true;
     })
-    .run();
+  );
 }

package/src/web/formats/formatRules.ts

@@ -1,7 +1,6 @@
 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 {
@@ -77,8 +76,53 @@ export function toggleParagraphFormat(
   isActive: () => boolean,
   deactivate: () => boolean,
   activate: (c: ChainedCommands) => ChainedCommands,
-  chain: () => ChainedCommands
+  chain: () => ChainedCommands,
+  editor: Editor
 ): boolean {
-  if (isActive()) return deactivate();
-  return activate(chain().clearNodes()).run();
+  if (isActive()) {
+    return withPreservedAlignment(editor, chain(), (c) => {
+      deactivate();
+      return c;
+    });
+  }
+
+  return withPreservedAlignment(editor, chain(), (c) =>
+    activate(c.clearNodes())
+  );
+}
+
+export function getCurrentAlignment(editor: Editor): string | null {
+  const { doc, selection } = editor.state;
+  let { $from } = selection;
+
+  // If the user presses Cmd+A, the selection anchors to the document root (depth 0).
+  // We resolve position '1' to step exactly inside the first paragraph node
+  // so the loop can correctly read its alignment.
+  if ($from.depth === 0 && doc.content.size > 0) {
+    $from = doc.resolve(1);
+  }
+
+  for (let depth = $from.depth; depth >= 0; depth--) {
+    const node = $from.node(depth);
+    if (node.attrs.textAlign) {
+      return node.attrs.textAlign;
+    }
+  }
+  return null;
+}
+
+export function withPreservedAlignment(
+  editor: Editor,
+  chain: ChainedCommands,
+  mutateChain: (c: ChainedCommands) => ChainedCommands
+): boolean {
+  const currentAlignment = getCurrentAlignment(editor);
+
+  const c = mutateChain(chain);
+
+  if (currentAlignment && currentAlignment !== 'auto') {
+    c.setTextAlign(currentAlignment);
+  }
+
+  return c.run();
 }