From ec4b797bcd8db98cb5ff38bc311b081b3e3dadde Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Tue, 28 Apr 2026 11:52:47 +0200
Subject: [PATCH 01/17] feat: base implementation

---
 apps/example-web/src/App.tsx                  |  19 +++
 .../example-web/src/components/ImageModal.tsx |  91 +++++++++++
 apps/example-web/src/components/Toolbar.tsx   |  13 +-
 .../src/testScreens/VisualRegression.tsx      |   7 +-
 package.json                                  |   1 +
 src/web/EnrichedTextInput.css                 |  29 ++++
 src/web/EnrichedTextInput.tsx                 |   7 +-
 src/web/formats/EnrichedImage.tsx             | 145 ++++++++++++++++++
 src/web/formats/formatRules.ts                |  14 +-
 src/web/pmPlugins/stripMarksOnImagePlugin.ts  |  33 ++++
 src/web/useOnChangeState.ts                   |   6 +-
 yarn.lock                                     |  10 ++
 12 files changed, 370 insertions(+), 5 deletions(-)
 create mode 100644 apps/example-web/src/components/ImageModal.tsx
 create mode 100644 src/web/formats/EnrichedImage.tsx
 create mode 100644 src/web/pmPlugins/stripMarksOnImagePlugin.ts

diff --git a/apps/example-web/src/App.tsx b/apps/example-web/src/App.tsx
index 864668b48..197b25aae 100644
--- a/apps/example-web/src/App.tsx
+++ b/apps/example-web/src/App.tsx
@@ -15,6 +15,7 @@ import { WEB_DEFAULT_HTML_STYLE } from './defaultHtmlStyle';
 import type { NativeSyntheticEvent } from 'react-native';
 import { EditorActions } from './components/EditorActions';
 import { SetValueModal } from './components/SetValueModal';
+import { ImageModal } from './components/ImageModal';
 import { LinkModal } from './components/LinkModal';
 import { HtmlOutputPanel } from './components/HtmlOutputPanel';
 import './App.css';
@@ -41,6 +42,7 @@ function App() {
   const [currentLink, setCurrentLink] =
     useState<OnLinkDetected>(DEFAULT_LINK_STATE);
   const [isLinkModalOpen, setIsLinkModalOpen] = useState(false);
+  const [isImageModalOpen, setIsImageModalOpen] = useState(false);
 
   const isLinkActive = !!editorState?.link.isActive;
   const hasLinkUrl = currentLink.url.length > 0;
@@ -89,6 +91,18 @@ function App() {
     setIsLinkModalOpen(false);
   };
 
+  const openImageModal = () => {
+    setIsImageModalOpen(true);
+  };
+
+  const closeImageModal = () => {
+    setIsImageModalOpen(false);
+  };
+
+  const submitImage = (url: string, width: number, height: number) => {
+    ref.current?.setImage(url, width, height);
+  };
+
   const submitLink = (text: string, url: string) => {
     if (!selection || url.length === 0) {
       closeLinkModal();
@@ -140,6 +154,7 @@ function App() {
         editorRef={ref}
         state={editorState}
         onOpenLinkModal={openLinkModal}
+        onOpenImageModal={openImageModal}
       />
 
       <EditorActions
@@ -184,6 +199,10 @@ function App() {
           onClose={closeLinkModal}
         />
       )}
+
+      {isImageModalOpen && (
+        <ImageModal onSubmit={submitImage} onClose={closeImageModal} />
+      )}
     </div>
   );
 }
diff --git a/apps/example-web/src/components/ImageModal.tsx b/apps/example-web/src/components/ImageModal.tsx
new file mode 100644
index 000000000..0e857dc76
--- /dev/null
+++ b/apps/example-web/src/components/ImageModal.tsx
@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import { BaseModal } from './BaseModal';
+import './LinkModal.css';
+
+interface ImageModalProps {
+  onClose: () => void;
+  onSubmit: (url: string, width: number, height: number) => void;
+}
+
+const DEFAULT_WIDTH = 80;
+const DEFAULT_HEIGHT = 80;
+
+export function ImageModal({ onClose, onSubmit }: ImageModalProps) {
+  const [width, setWidth] = useState('');
+  const [height, setHeight] = useState('');
+  const [url, setUrl] = useState('');
+
+  const reset = () => {
+    setWidth('');
+    setHeight('');
+    setUrl('');
+  };
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  const handleSave = () => {
+    const trimmedUrl = url.trim();
+    if (trimmedUrl.length === 0) {
+      return;
+    }
+    const parsedW = parseFloat(width);
+    const parsedH = parseFloat(height);
+    const w = Number.isNaN(parsedW) ? DEFAULT_WIDTH : parsedW;
+    const h = Number.isNaN(parsedH) ? DEFAULT_HEIGHT : parsedH;
+    onSubmit(trimmedUrl, w, h);
+    reset();
+    onClose();
+  };
+
+  return (
+    <BaseModal testIdPrefix="image-modal" onClose={handleClose}>
+      <input
+        type="text"
+        className="modal-input modal-input--single"
+        data-testid="image-modal-url-input"
+        placeholder="Image URL"
+        value={url}
+        onChange={(e) => {
+          setUrl(e.target.value);
+        }}
+        autoCapitalize="none"
+        autoCorrect="off"
+        spellCheck={false}
+      />
+      <input
+        type="text"
+        className="modal-input modal-input--single"
+        data-testid="image-modal-width-input"
+        placeholder={`Width (default ${String(DEFAULT_WIDTH)})`}
+        value={width}
+        onChange={(e) => {
+          setWidth(e.target.value);
+        }}
+        inputMode="decimal"
+      />
+      <input
+        type="text"
+        className="modal-input modal-input--single"
+        data-testid="image-modal-height-input"
+        placeholder={`Height (default ${String(DEFAULT_HEIGHT)})`}
+        value={height}
+        onChange={(e) => {
+          setHeight(e.target.value);
+        }}
+        inputMode="decimal"
+      />
+      <button
+        className="btn modal-submit-btn"
+        type="button"
+        data-testid="image-modal-submit-button"
+        disabled={url.trim().length === 0}
+        onClick={handleSave}
+      >
+        Insert image
+      </button>
+    </BaseModal>
+  );
+}
diff --git a/apps/example-web/src/components/Toolbar.tsx b/apps/example-web/src/components/Toolbar.tsx
index dbfe5efbe..91ab0260b 100644
--- a/apps/example-web/src/components/Toolbar.tsx
+++ b/apps/example-web/src/components/Toolbar.tsx
@@ -10,6 +10,7 @@ interface ToolbarProps {
   editorRef: RefObject<EnrichedTextInputInstance | null>;
   state: OnChangeStateEvent | null;
   onOpenLinkModal: () => void;
+  onOpenImageModal: () => void;
 }
 
 interface ToolbarButtonProps {
@@ -52,7 +53,12 @@ function ToolbarButton({
   );
 }
 
-export function Toolbar({ editorRef, state, onOpenLinkModal }: ToolbarProps) {
+export function Toolbar({
+  editorRef,
+  state,
+  onOpenLinkModal,
+  onOpenImageModal,
+}: ToolbarProps) {
   const s = state;
   const dragScroll = useDragScroll();
 
@@ -156,6 +162,11 @@ export function Toolbar({ editorRef, state, onOpenLinkModal }: ToolbarProps) {
       label: '🔗',
       onPress: onOpenLinkModal,
     },
+    {
+      key: 'image',
+      label: '🖼',
+      onPress: onOpenImageModal,
+    },
     {
       key: 'unorderedList',
       label: '•',
diff --git a/apps/example-web/src/testScreens/VisualRegression.tsx b/apps/example-web/src/testScreens/VisualRegression.tsx
index c3f8f692e..9b91c48d0 100644
--- a/apps/example-web/src/testScreens/VisualRegression.tsx
+++ b/apps/example-web/src/testScreens/VisualRegression.tsx
@@ -80,7 +80,12 @@ export function VisualRegression() {
         />
       </div>
 
-      <Toolbar editorRef={ref} state={editorState} onOpenLinkModal={() => {}} />
+      <Toolbar
+        editorRef={ref}
+        state={editorState}
+        onOpenLinkModal={() => {}}
+        onOpenImageModal={() => {}}
+      />
 
       <div style={styles.controlsContainer}>
         <label
diff --git a/package.json b/package.json
index b8edb7c7d..ef0db990b 100644
--- a/package.json
+++ b/package.json
@@ -97,6 +97,7 @@
     "@tiptap/extension-code": "3.20.4",
     "@tiptap/extension-document": "3.20.4",
     "@tiptap/extension-heading": "3.20.4",
+    "@tiptap/extension-image": "3.20.4",
     "@tiptap/extension-italic": "3.20.4",
     "@tiptap/extension-link": "3.20.4",
     "@tiptap/extension-list": "3.20.4",
diff --git a/src/web/EnrichedTextInput.css b/src/web/EnrichedTextInput.css
index 63fe1f8e9..5acb0911e 100644
--- a/src/web/EnrichedTextInput.css
+++ b/src/web/EnrichedTextInput.css
@@ -123,3 +123,32 @@
 .eti-editor li p {
   margin: 0;
 }
+
+.eti-editor .eti-inline-image {
+  vertical-align: text-bottom;
+  line-height: 0;
+}
+
+.eti-editor .eti-inline-image-img {
+  vertical-align: text-bottom;
+  max-width: 100%;
+}
+
+.eti-editor .eti-inline-image--placeholder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  color: inherit;
+}
+
+.eti-editor .eti-inline-image-broken-glyph {
+  display: block;
+  flex-shrink: 0;
+}
+
+.eti-editor
+  .react-renderer.node-image.ProseMirror-selectednode
+  .eti-inline-image {
+  box-shadow: inset 0 0 0 999px Highlight;
+}
diff --git a/src/web/EnrichedTextInput.tsx b/src/web/EnrichedTextInput.tsx
index eefce0d8d..421f47f7e 100644
--- a/src/web/EnrichedTextInput.tsx
+++ b/src/web/EnrichedTextInput.tsx
@@ -44,6 +44,7 @@ import { EnrichedCode } from './formats/EnrichedCode';
 import { EnrichedHeading } from './formats/EnrichedHeading';
 import { EnrichedBlockquote } from './formats/EnrichedBlockquote';
 import { EnrichedCodeBlock } from './formats/EnrichedCodeBlock';
+import { EnrichedImage } from './formats/EnrichedImage';
 import { EnrichedLink, setLink, removeLink } from './formats/EnrichedLink';
 import { EnrichedListItem } from './formats/EnrichedListItem';
 import { EnrichedUnorderedList } from './formats/EnrichedUnorderedList';
@@ -52,6 +53,7 @@ import { createStripBoldInStyledHeadingsPlugin } from './pmPlugins/stripBoldInSt
 import { StrictMarksPlugin } from './pmPlugins/strictMarksPlugin';
 import { MergeAdjacentSameKindBlocksPlugin } from './pmPlugins/mergeAdjacentSameKindBlocksPlugin';
 import { StripMarksInCodeBlockPlugin } from './pmPlugins/stripMarksInCodeBlockPlugin';
+import { StripMarksOnImagePlugin } from './pmPlugins/stripMarksOnImagePlugin';
 function runFocused(
   editor: Editor,
   apply: (chain: ChainedCommands) => ChainedCommands
@@ -108,6 +110,7 @@ export const EnrichedTextInput = ({
         EnrichedStrike,
         EnrichedCode,
         EnrichedLink,
+        EnrichedImage,
         EnrichedHeading,
         EnrichedBlockquote,
         EnrichedCodeBlock,
@@ -115,6 +118,7 @@ export const EnrichedTextInput = ({
         EnrichedUnorderedList,
         EnrichedOrderedList,
         StripMarksInCodeBlockPlugin,
+        StripMarksOnImagePlugin,
         stripBoldInStyledHeadingsPlugin,
         MergeAdjacentSameKindBlocksPlugin,
         StrictMarksPlugin,
@@ -204,7 +208,8 @@ export const EnrichedTextInput = ({
         setLink(editor, start, end, text, url),
       removeLink: (start: number, end: number) =>
         removeLink(editor, start, end),
-      setImage: () => {},
+      setImage: (src: string, width: number, height: number) =>
+        runFocused(editor, (c) => c.setImage({ src, width, height })),
       startMention: () => {},
       setMention: () => {},
       measure: () => {},
diff --git a/src/web/formats/EnrichedImage.tsx b/src/web/formats/EnrichedImage.tsx
new file mode 100644
index 000000000..27b80fb15
--- /dev/null
+++ b/src/web/formats/EnrichedImage.tsx
@@ -0,0 +1,145 @@
+import type { CommandProps } from '@tiptap/core';
+import Image from '@tiptap/extension-image';
+import {
+  NodeViewWrapper,
+  ReactNodeViewRenderer,
+  type ReactNodeViewProps,
+} from '@tiptap/react';
+import type { CSSProperties } from 'react';
+import { useState } from 'react';
+
+import { isImageBlocked } from './formatRules';
+
+const INLINE_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%"
+      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;
+}
+
+function EnrichedImageNodeView({ node }: ReactNodeViewProps) {
+  const src = ((node.attrs.src as string | null | undefined) ?? '').trim();
+  const w = dim(node.attrs.width) ?? INLINE_IMAGE_FALLBACK_SIZE;
+  const h = dim(node.attrs.height) ?? INLINE_IMAGE_FALLBACK_SIZE;
+  const [errored, setErrored] = useState(false);
+  const showPlaceholder = src.length === 0 || errored;
+
+  const sizeStyle: CSSProperties = {
+    verticalAlign: 'text-bottom',
+    width: w,
+    height: h,
+    maxWidth: '100%',
+    boxSizing: 'border-box',
+    ...(showPlaceholder
+      ? {
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }
+      : { display: 'inline-block' }),
+  };
+
+  if (showPlaceholder) {
+    return (
+      <NodeViewWrapper
+        as="span"
+        className="eti-inline-image eti-inline-image--placeholder"
+        style={sizeStyle}
+        data-eti-image-placeholder=""
+      >
+        <BrokenImageGlyph />
+      </NodeViewWrapper>
+    );
+  }
+
+  return (
+    <NodeViewWrapper as="span" className="eti-inline-image">
+      <img
+        src={src}
+        width={w}
+        height={h}
+        alt=""
+        className="eti-inline-image-img"
+        contentEditable={false}
+        draggable={false}
+        onError={() => setErrored(true)}
+      />
+    </NodeViewWrapper>
+  );
+}
+
+export const EnrichedImage = Image.extend({
+  addOptions() {
+    const parent = this.parent?.();
+    return {
+      ...parent,
+      inline: true,
+      allowBase64: false,
+      resize: false,
+      HTMLAttributes: parent?.HTMLAttributes ?? {},
+    };
+  },
+
+  renderHTML({ node }) {
+    const src = node.attrs.src as string | null | undefined;
+    if (src == null || src === '') {
+      return [
+        'img',
+        {
+          src: '',
+        },
+      ];
+    }
+
+    return ['img', { 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,
+            },
+          });
+        },
+    };
+  },
+});
diff --git a/src/web/formats/formatRules.ts b/src/web/formats/formatRules.ts
index dc44491b0..9f42b4512 100644
--- a/src/web/formats/formatRules.ts
+++ b/src/web/formats/formatRules.ts
@@ -15,7 +15,15 @@ export function isAnyParagraphFormatActive(editor: Editor): boolean {
 }
 
 export function isLinkBlocked(editor: Editor): boolean {
-  return editor.isActive('code') || editor.isActive('codeBlock');
+  return (
+    editor.isActive('code') ||
+    editor.isActive('codeBlock') ||
+    editor.isActive('image')
+  );
+}
+
+export function isImageBlocked(editor: Editor): boolean {
+  return editor.isActive('code');
 }
 
 export function isFormatBlocked(
@@ -23,6 +31,10 @@ export function isFormatBlocked(
   editor: Editor,
   htmlStyle: Required<HtmlStyle>
 ): boolean {
+  if (tiptapName === 'image') {
+    return isImageBlocked(editor);
+  }
+
   if (tiptapName === 'link') {
     return isLinkBlocked(editor);
   }
diff --git a/src/web/pmPlugins/stripMarksOnImagePlugin.ts b/src/web/pmPlugins/stripMarksOnImagePlugin.ts
new file mode 100644
index 000000000..42bdf9876
--- /dev/null
+++ b/src/web/pmPlugins/stripMarksOnImagePlugin.ts
@@ -0,0 +1,33 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+export const StripMarksOnImagePlugin = Extension.create({
+  name: 'stripMarksOnImage',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('stripMarksOnImage'),
+        appendTransaction: (transactions, _oldState, newState) => {
+          if (!transactions.some((tr) => tr.docChanged)) {
+            return null;
+          }
+
+          const tr = newState.tr;
+          let modified = false;
+
+          newState.doc.descendants((node, pos) => {
+            if (node.type.name === 'image' && node.marks.length > 0) {
+              node.marks.forEach((mark) => {
+                tr.removeMark(pos, pos + node.nodeSize, mark);
+              });
+              modified = true;
+            }
+          });
+
+          return modified ? tr : null;
+        },
+      }),
+    ];
+  },
+});
diff --git a/src/web/useOnChangeState.ts b/src/web/useOnChangeState.ts
index 41a5f82f8..90c6825f5 100644
--- a/src/web/useOnChangeState.ts
+++ b/src/web/useOnChangeState.ts
@@ -89,7 +89,11 @@ function buildState(
         editor.isActive('enrichedCodeBlock')
     ),
     mention: { isActive: false, isConflicting: false, isBlocking: false },
-    image: { isActive: false, isConflicting: false, isBlocking: false },
+    image: {
+      isActive: editor.isActive('image'),
+      isConflicting: editor.isActive('link'),
+      isBlocking: isFormatBlocked('image', editor, htmlStyle),
+    },
   };
 }
 
diff --git a/yarn.lock b/yarn.lock
index 75f9e83f6..c7ac9461d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4165,6 +4165,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tiptap/extension-image@npm:3.20.4":
+  version: 3.20.4
+  resolution: "@tiptap/extension-image@npm:3.20.4"
+  peerDependencies:
+    "@tiptap/core": ^3.20.4
+  checksum: 10c0/5aa7941f525b0242918a6b06084a51a9753fd178b2f34b299fe03442cd081961eadd6d73c1a28ec9097b863378cfffecac44979c41df0f61ca950fc9368acc71
+  languageName: node
+  linkType: hard
+
 "@tiptap/extension-italic@npm:3.20.4":
   version: 3.20.4
   resolution: "@tiptap/extension-italic@npm:3.20.4"
@@ -12674,6 +12683,7 @@ __metadata:
     "@tiptap/extension-code": "npm:3.20.4"
     "@tiptap/extension-document": "npm:3.20.4"
     "@tiptap/extension-heading": "npm:3.20.4"
+    "@tiptap/extension-image": "npm:3.20.4"
     "@tiptap/extension-italic": "npm:3.20.4"
     "@tiptap/extension-link": "npm:3.20.4"
     "@tiptap/extension-list": "npm:3.20.4"

From 23259fc32719fbfae534cad6165785302bccc324 Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Tue, 28 Apr 2026 12:02:40 +0200
Subject: [PATCH 02/17] fix: image blocks code

---
 src/web/formats/formatRules.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/web/formats/formatRules.ts b/src/web/formats/formatRules.ts
index 9f42b4512..55176d8f7 100644
--- a/src/web/formats/formatRules.ts
+++ b/src/web/formats/formatRules.ts
@@ -34,10 +34,12 @@ export function isFormatBlocked(
   if (tiptapName === 'image') {
     return isImageBlocked(editor);
   }
-
   if (tiptapName === 'link') {
     return isLinkBlocked(editor);
   }
+  if (tiptapName === 'code' && editor.isActive('image')) {
+    return true;
+  }
 
   if (editor.isActive('codeBlock')) {
     return ['bold', 'italic', 'underline', 'strike', 'code'].includes(

From f07968e70467938412fe0ca88ef5fd99eaa654d3 Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Tue, 28 Apr 2026 12:21:16 +0200
Subject: [PATCH 03/17] refactor: simplify styling

---
 src/web/EnrichedTextInput.css     |  6 +-----
 src/web/formats/EnrichedImage.tsx | 29 ++++++++---------------------
 2 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/src/web/EnrichedTextInput.css b/src/web/EnrichedTextInput.css
index 5acb0911e..0ec520704 100644
--- a/src/web/EnrichedTextInput.css
+++ b/src/web/EnrichedTextInput.css
@@ -127,11 +127,7 @@
 .eti-editor .eti-inline-image {
   vertical-align: text-bottom;
   line-height: 0;
-}
-
-.eti-editor .eti-inline-image-img {
-  vertical-align: text-bottom;
-  max-width: 100%;
+  display: inline-block;
 }
 
 .eti-editor .eti-inline-image--placeholder {
diff --git a/src/web/formats/EnrichedImage.tsx b/src/web/formats/EnrichedImage.tsx
index 27b80fb15..c32da23b9 100644
--- a/src/web/formats/EnrichedImage.tsx
+++ b/src/web/formats/EnrichedImage.tsx
@@ -45,18 +45,8 @@ function EnrichedImageNodeView({ node }: ReactNodeViewProps) {
   const showPlaceholder = src.length === 0 || errored;
 
   const sizeStyle: CSSProperties = {
-    verticalAlign: 'text-bottom',
     width: w,
     height: h,
-    maxWidth: '100%',
-    boxSizing: 'border-box',
-    ...(showPlaceholder
-      ? {
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }
-      : { display: 'inline-block' }),
   };
 
   if (showPlaceholder) {
@@ -101,17 +91,14 @@ export const EnrichedImage = Image.extend({
   },
 
   renderHTML({ node }) {
-    const src = node.attrs.src as string | null | undefined;
-    if (src == null || src === '') {
-      return [
-        'img',
-        {
-          src: '',
-        },
-      ];
-    }
-
-    return ['img', { src, width: node.attrs.width, height: node.attrs.height }];
+    return [
+      'img',
+      {
+        width: node.attrs.width,
+        height: node.attrs.height,
+        src: node.attrs.src,
+      },
+    ];
   },
 
   addNodeView() {

From 6722284748c17d5bd1aafcca3711812a55a8cf83 Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Tue, 28 Apr 2026 12:36:29 +0200
Subject: [PATCH 04/17] fix: fixed styling issues

---
 src/web/EnrichedTextInput.css     | 7 +++----
 src/web/formats/EnrichedImage.tsx | 1 +
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/web/EnrichedTextInput.css b/src/web/EnrichedTextInput.css
index 0ec520704..a89cffc67 100644
--- a/src/web/EnrichedTextInput.css
+++ b/src/web/EnrichedTextInput.css
@@ -131,16 +131,15 @@
 }
 
 .eti-editor .eti-inline-image--placeholder {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  display: inline-block;
   overflow: hidden;
   color: inherit;
 }
 
 .eti-editor .eti-inline-image-broken-glyph {
   display: block;
-  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .eti-editor
diff --git a/src/web/formats/EnrichedImage.tsx b/src/web/formats/EnrichedImage.tsx
index c32da23b9..07b647465 100644
--- a/src/web/formats/EnrichedImage.tsx
+++ b/src/web/formats/EnrichedImage.tsx
@@ -21,6 +21,7 @@ function BrokenImageGlyph() {
       viewBox="0 0 960 960"
       width="100%"
       height="100%"
+      preserveAspectRatio="none"
       aria-hidden
       focusable="false"
       className="eti-inline-image-broken-glyph"

From 7c624399f3916bbc49d730d0d7bc37a8137be184 Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Tue, 28 Apr 2026 13:05:12 +0200
Subject: [PATCH 05/17] test: added tests

---
 .../images-blockquote-placeholder.png         | Bin 0 -> 2911 bytes
 .../screenshots/images-inline-routed-png.png  | Bin 0 -> 557 bytes
 .../screenshots/images-loaded-in-list.png     | Bin 0 -> 2025 bytes
 .../screenshots/images-ol-placeholder.png     | Bin 0 -> 2973 bytes
 .../images-paragraph-placeholder.png          | Bin 0 -> 2709 bytes
 .../images-placeholder-broken-url.png         | Bin 0 -> 1221 bytes
 .../images-placeholder-empty-src.png          | Bin 0 -> 2044 bytes
 .../screenshots/images-ul-placeholder.png     | Bin 0 -> 2254 bytes
 .playwright/tests/images.spec.ts              | 166 ++++++++++++++++++
 9 files changed, 166 insertions(+)
 create mode 100644 .playwright/screenshots/images-blockquote-placeholder.png
 create mode 100644 .playwright/screenshots/images-inline-routed-png.png
 create mode 100644 .playwright/screenshots/images-loaded-in-list.png
 create mode 100644 .playwright/screenshots/images-ol-placeholder.png
 create mode 100644 .playwright/screenshots/images-paragraph-placeholder.png
 create mode 100644 .playwright/screenshots/images-placeholder-broken-url.png
 create mode 100644 .playwright/screenshots/images-placeholder-empty-src.png
 create mode 100644 .playwright/screenshots/images-ul-placeholder.png
 create mode 100644 .playwright/tests/images.spec.ts

diff --git a/.playwright/screenshots/images-blockquote-placeholder.png b/.playwright/screenshots/images-blockquote-placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..4112d6e27ebd436580716a7a1e278f882908a534
GIT binary patch
literal 2911
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

literal 0
HcmV?d00001

diff --git a/.playwright/screenshots/images-inline-routed-png.png b/.playwright/screenshots/images-inline-routed-png.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c4443b975dee079ab82a3a73d4b4569c9f7fd0c
GIT binary patch
literal 557
zcmeAS@N?(olHy`uVBq!ia0y~yV2lH@r*SX=Ny*l71)#tqPZ!6KiaBqtZR9<~AaLM-
z`za=!S&2sX-yh(*BB+-!LE~N9hMG6;81Be2e{hs)P~df#z^35AEU<);;}Qc)CPR}6
z!^71kHtVzNUY5>d{v&)HDu_cZ`NDF$tr^PKA#5ezBqXPg07DK*Gcf%BZ>N6q5iru(
cK(WotaB>1y9dFvP#Xu1TPgg&ebxsLQ0C4k)kN^Mx

literal 0
HcmV?d00001

diff --git a/.playwright/screenshots/images-loaded-in-list.png b/.playwright/screenshots/images-loaded-in-list.png
new file mode 100644
index 0000000000000000000000000000000000000000..182aa10fe9e2fa56ac5f3421d5229fbc61c354e9
GIT binary patch
literal 2025
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

literal 0
HcmV?d00001

diff --git a/.playwright/screenshots/images-ol-placeholder.png b/.playwright/screenshots/images-ol-placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..c9bcceae8b538ff9973280b27cc631a0041f1dfd
GIT binary patch
literal 2973
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

literal 0
HcmV?d00001

diff --git a/.playwright/screenshots/images-paragraph-placeholder.png b/.playwright/screenshots/images-paragraph-placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..30820a53a42aee82cee11a41a94b72fe1115932d
GIT binary patch
literal 2709
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
NWN(AAuC%(8_%8*Y6p8=<

literal 0
HcmV?d00001

diff --git a/.playwright/screenshots/images-placeholder-broken-url.png b/.playwright/screenshots/images-placeholder-broken-url.png
new file mode 100644
index 0000000000000000000000000000000000000000..2af9b61e5a4a0b7af6a4c06e262d4dc616e195d1
GIT binary patch
literal 1221
zcmeAS@N?(olHy`uVBq!ia0y~yV2lH@r*SX=Ny*l71qKF|Do+>3kcv5P?)rE5<}w`r
zn67p<AZycxz>cZ)okuPmJLDELNov*vRZW+T8<%#hS)=pE^QK0Sn2wIC%gqV1j)Zy5
zntAlh?<ZHj>@&81Kfn6@m6_Ymr+>Y3x%mC3+r{UK&)IU@)%}TJ_?P9#IKx${!GQ?0
z;IN5J<)<g#-riokc=1y4u(eU9Ha2^TpPyse;vCQZ|N4g)7Z-a^*P9w=UHt6Ky4c-Z
z7nuG&-M_o|x!+9Y@9*wvJ6M+#IemP3dU{&Hj}H%hXPZrZx2N*+vu9^#mwx#9`8m*(
z@ac-->tc2S1uxCbzrWA4dF9HLOk0{|xfCX_LD7qp&qY!3@$oiwudl6re}Dh<`cIFJ
zc2C!j7h6!fE6VhUZL4<pI-80Q4_;ngetli6w3O7ZyXEnFt4iP9*(o)BZ}oSv1*t%F
zXRehj<g=^&Rr2Ua=l!*^_x9CRe|vMYv$ON#$B(<q-vbp@&1`#peZ6^XhDqs<kB^V{
zWNzhN?l*T;tcFAMR~_E1+~42dpI=x|COb>-%26lAs5PriuDtFz``}ow^yS!y9R-QD
zYa@1-<$nHnxSfBw|NMVHKc~y?ul~NSZ~5+m7Z(;Xv-61n9lVR@C(!Vv-qZbnz`kH>
z#>GXar|ak6*pPU3mTBqUfZYN7`|AJydvbEJd%v7*{l7mqZbTS=esHkay-!ASf8LaJ
z`-2<IUOrj)=I!n6#~(L0H;1o}i``#W`+4I$cNy!lHS>bc%-abJ$;Ze0%^#<qpBKBM
zV4<Xa{l7g7x)(NQ1AS4t*Whkz*2hOjOaB*reRb71?cYvr2kWnDyv)qZTe+pp^X3%R
zWMpKx$(AraYh8C~1JE&z@p^H4EOvAEF5}Y<TeIS^ZS}VoOlP=bW7}f3=iR-wHv0GP
z-`jI;elowDCHv~yGob(7-Q2hg<V&g-f7zCM``_6!s@~IpI+W+_VPVQ-fS{&zmkg||
ze*OCT`qJFEy-eIM7W!S<kaKg>`uP3V96$f-h>P4;Q^|O1;pFIfZSC!+Wo9g%&uVqy
z<f=qq!UB4GZ>{XR6DLme$y#$=;G1hx$@%B~&4o~-;dYENhzWrvdte##|9{lO{mnoI
d8>kdwW=P0qKK|g5$O51UgQu&X%Q~loCIE49`=bB=

literal 0
HcmV?d00001

diff --git a/.playwright/screenshots/images-placeholder-empty-src.png b/.playwright/screenshots/images-placeholder-empty-src.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf95530adb8115100ce59490abf5bb0f71d627c6
GIT binary patch
literal 2044
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
X5oc8BmckN6SOJ{uToEl71JeEk9q5M!

literal 0
HcmV?d00001

diff --git a/.playwright/screenshots/images-ul-placeholder.png b/.playwright/screenshots/images-ul-placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..83ca0bbf0362eec0d6ae179ae91b6b1bafc5fb07
GIT binary patch
literal 2254
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
V2=IjbAQkBifU<K$R$RK1_;0vz3L^jj

literal 0
HcmV?d00001

diff --git a/.playwright/tests/images.spec.ts b/.playwright/tests/images.spec.ts
new file mode 100644
index 000000000..d333fd011
--- /dev/null
+++ b/.playwright/tests/images.spec.ts
@@ -0,0 +1,166 @@
+import { test, expect } from '@playwright/test';
+
+import { toolbarButton } from '../helpers/toolbar';
+import {
+  editorLocator,
+  getSerializedHtml,
+  gotoVisualRegression,
+  setEditorHtml,
+} from '../helpers/visual-regression';
+
+test.describe('images', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoVisualRegression(page);
+
+    const routePattern = '**/pw-e2e-ok.png';
+    const pngBody = Buffer.from(
+      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==',
+      'base64'
+    );
+    await page.route(routePattern, async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'image/png',
+        body: pngBody,
+      });
+    });
+  });
+
+  test('empty src shows placeholder only', async ({ page }) => {
+    const snapshotName = 'images-placeholder-empty-src.png';
+    await setEditorHtml(
+      page,
+      '<html><p>Hi <img src="" width="40" height="40" /> bye</p></html>'
+    );
+
+    await expect(page.locator('[data-eti-image-placeholder]')).toBeVisible();
+    await expect(page.locator('.eti-inline-image-img')).toHaveCount(0);
+
+    await expect(editorLocator(page)).toHaveScreenshot(snapshotName);
+  });
+
+  test('broken image URL shows placeholder after onError', async ({ page }) => {
+    const routePattern = '**/pw-e2e-broken.png';
+    const snapshotName = 'images-placeholder-broken-url.png';
+    await page.route(routePattern, (route) => route.abort());
+
+    await setEditorHtml(
+      page,
+      '<html><p><img src="/pw-e2e-broken.png" width="40" height="40" /></p></html>'
+    );
+
+    await expect(page.locator('[data-eti-image-placeholder]')).toBeVisible({
+      timeout: 15_000,
+    });
+    await expect(page.locator('.eti-inline-image-img')).toHaveCount(0);
+
+    await expect(editorLocator(page)).toHaveScreenshot(snapshotName);
+  });
+
+  test('real PNG shows img element', async ({ page }) => {
+    const snapshotName = 'images-inline-routed-png.png';
+
+    await setEditorHtml(
+      page,
+      '<html><p><img src="/pw-e2e-ok.png" width="32" height="32" /></p></html>'
+    );
+
+    await expect(page.locator('.eti-inline-image-img')).toBeVisible({
+      timeout: 15_000,
+    });
+    await expect(page.locator('[data-eti-image-placeholder]')).toHaveCount(0);
+
+    await expect(editorLocator(page)).toHaveScreenshot(snapshotName);
+  });
+
+  test('image attrs round-trip in serialized HTML', async ({ page }) => {
+    await setEditorHtml(
+      page,
+      '<html><p><img src="https://example.com/pic.png" width="120" height="60" alt="x" /></p></html>'
+    );
+
+    await expect
+      .poll(async () => getSerializedHtml(page))
+      .toMatch(/<img[^>]*src="https:\/\/example\.com\/pic\.png"/i);
+    await expect
+      .poll(async () => getSerializedHtml(page))
+      .toMatch(/width="120"/i);
+    await expect
+      .poll(async () => getSerializedHtml(page))
+      .toMatch(/height="60"/i);
+    await expect
+      .poll(async () => getSerializedHtml(page))
+      .not.toMatch(/alt="x"/i);
+  });
+
+  test.describe('visual: image with blocks and lists', () => {
+    const visualBlockListCases = [
+      {
+        name: 'paragraph with placeholder image',
+        snapshot: 'images-paragraph-placeholder.png',
+        html: '<html><p>Before <img src="" width="40" height="40" /> after</p></html>',
+      },
+      {
+        name: 'blockquote with placeholder image',
+        snapshot: 'images-blockquote-placeholder.png',
+        html: '<html><blockquote><p>Before <img src="" width="40" height="40" /> after</p></blockquote></html>',
+      },
+      {
+        name: 'unordered list item with placeholder image',
+        snapshot: 'images-ul-placeholder.png',
+        html: '<html><ul><li><p>Item <img src="" width="40" height="40" /> end</p></li></ul></html>',
+      },
+      {
+        name: 'ordered list item with placeholder image',
+        snapshot: 'images-ol-placeholder.png',
+        html: '<html><ol><li><p>Step <img src="" width="40" height="40" /> done</p></li></ol></html>',
+      },
+      {
+        name: 'loaded image inside list (routed PNG)',
+        snapshot: 'images-loaded-in-list.png',
+        html: '<html><ul><li><p>See <img src="/pw-e2e-ok.png" width="28" height="28" /> tiny</p></li></ul></html>',
+      },
+    ] as const;
+
+    for (const row of visualBlockListCases) {
+      test(row.name, async ({ page }) => {
+        await setEditorHtml(page, row.html);
+
+        await expect(page.locator('.eti-inline-image')).toBeVisible({
+          timeout: 15_000,
+        });
+
+        await expect(editorLocator(page)).toHaveScreenshot(row.snapshot);
+      });
+    }
+  });
+
+  test('strip marks on image: bold italic strike underline code leave img unwrapped', async ({
+    page,
+  }) => {
+    const expectedHtml =
+      '<html><p><code><b><i><u><s>Alpha </s></u></i></b></code><img width="48" height="48" src=""><code><b><i><u><s> Beta</s></u></i></b></code></p></html>';
+    const toolbarOrder = [
+      'bold',
+      'italic',
+      'strikeThrough',
+      'underline',
+      'inlineCode',
+    ] as const;
+    const selectAllMod = process.platform === 'darwin' ? 'Meta' : 'Control';
+
+    await setEditorHtml(
+      page,
+      '<html><p>Alpha <img src="" width="48" height="48" /> Beta</p></html>'
+    );
+
+    const editor = editorLocator(page);
+    for (const key of toolbarOrder) {
+      await editor.click();
+      await page.keyboard.press(`${selectAllMod}+A`);
+      await toolbarButton(page, key).click();
+    }
+
+    await expect.poll(async () => getSerializedHtml(page)).toBe(expectedHtml);
+  });
+});

From 0cedfbced59b69da05a9dac2b15db0dc2ea131e3 Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Tue, 28 Apr 2026 13:15:56 +0200
Subject: [PATCH 06/17] refactor: split EnrichedImage

---
 .playwright/tests/images.spec.ts              |  3 +-
 src/web/formats/EnrichedImage.ts              | 59 +++++++++++++++++
 ...hedImage.tsx => EnrichedImageNodeView.tsx} | 65 +------------------
 3 files changed, 62 insertions(+), 65 deletions(-)
 create mode 100644 src/web/formats/EnrichedImage.ts
 rename src/web/formats/{EnrichedImage.tsx => EnrichedImageNodeView.tsx} (62%)

diff --git a/.playwright/tests/images.spec.ts b/.playwright/tests/images.spec.ts
index d333fd011..426cfc403 100644
--- a/.playwright/tests/images.spec.ts
+++ b/.playwright/tests/images.spec.ts
@@ -147,7 +147,6 @@ test.describe('images', () => {
       'underline',
       'inlineCode',
     ] as const;
-    const selectAllMod = process.platform === 'darwin' ? 'Meta' : 'Control';
 
     await setEditorHtml(
       page,
@@ -157,7 +156,7 @@ test.describe('images', () => {
     const editor = editorLocator(page);
     for (const key of toolbarOrder) {
       await editor.click();
-      await page.keyboard.press(`${selectAllMod}+A`);
+      await editor.press('Meta+A');
       await toolbarButton(page, key).click();
     }
 
diff --git a/src/web/formats/EnrichedImage.ts b/src/web/formats/EnrichedImage.ts
new file mode 100644
index 000000000..38181fbd3
--- /dev/null
+++ b/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',
+      {
+        width: node.attrs.width,
+        height: node.attrs.height,
+        src: node.attrs.src,
+      },
+    ];
+  },
+
+  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,
+            },
+          });
+        },
+    };
+  },
+});
diff --git a/src/web/formats/EnrichedImage.tsx b/src/web/formats/EnrichedImageNodeView.tsx
similarity index 62%
rename from src/web/formats/EnrichedImage.tsx
rename to src/web/formats/EnrichedImageNodeView.tsx
index 07b647465..d4fec2bb8 100644
--- a/src/web/formats/EnrichedImage.tsx
+++ b/src/web/formats/EnrichedImageNodeView.tsx
@@ -1,15 +1,7 @@
-import type { CommandProps } from '@tiptap/core';
-import Image from '@tiptap/extension-image';
-import {
-  NodeViewWrapper,
-  ReactNodeViewRenderer,
-  type ReactNodeViewProps,
-} from '@tiptap/react';
+import { NodeViewWrapper, type ReactNodeViewProps } from '@tiptap/react';
 import type { CSSProperties } from 'react';
 import { useState } from 'react';
 
-import { isImageBlocked } from './formatRules';
-
 const INLINE_IMAGE_FALLBACK_SIZE = 80;
 
 const BROKEN_IMAGE_PATH_D =
@@ -38,7 +30,7 @@ function dim(value: unknown): number | undefined {
   return Number.isNaN(n) ? undefined : n;
 }
 
-function EnrichedImageNodeView({ node }: ReactNodeViewProps) {
+export function EnrichedImageNodeView({ node }: ReactNodeViewProps) {
   const src = ((node.attrs.src as string | null | undefined) ?? '').trim();
   const w = dim(node.attrs.width) ?? INLINE_IMAGE_FALLBACK_SIZE;
   const h = dim(node.attrs.height) ?? INLINE_IMAGE_FALLBACK_SIZE;
@@ -78,56 +70,3 @@ function EnrichedImageNodeView({ node }: ReactNodeViewProps) {
     </NodeViewWrapper>
   );
 }
-
-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',
-      {
-        width: node.attrs.width,
-        height: node.attrs.height,
-        src: node.attrs.src,
-      },
-    ];
-  },
-
-  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,
-            },
-          });
-        },
-    };
-  },
-});

From 1159602f9d8b0f74157aed633e2b8c9c514a1e7d Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Tue, 28 Apr 2026 15:23:46 +0200
Subject: [PATCH 07/17] fix: fixed positionMapping

---
 .playwright/tests/images.spec.ts            | 11 +++++++++--
 .playwright/tests/testLinks.spec.ts         | 10 ++++++++++
 apps/example-web/src/components/Toolbar.tsx |  2 +-
 src/web/formats/EnrichedImage.ts            |  2 +-
 src/web/positionMapping.ts                  | 11 +++++++++--
 src/web/tiptapHtmlNormalizer.ts             |  3 +++
 6 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/.playwright/tests/images.spec.ts b/.playwright/tests/images.spec.ts
index 426cfc403..546f9b65b 100644
--- a/.playwright/tests/images.spec.ts
+++ b/.playwright/tests/images.spec.ts
@@ -139,7 +139,7 @@ test.describe('images', () => {
     page,
   }) => {
     const expectedHtml =
-      '<html><p><code><b><i><u><s>Alpha </s></u></i></b></code><img width="48" height="48" src=""><code><b><i><u><s> Beta</s></u></i></b></code></p></html>';
+      '<html><p><code><b><i><u><s>Alpha </s></u></i></b></code><img src="" width="48" height="48"/><code><b><i><u><s> Beta</s></u></i></b></code></p></html>';
     const toolbarOrder = [
       'bold',
       'italic',
@@ -150,7 +150,7 @@ test.describe('images', () => {
 
     await setEditorHtml(
       page,
-      '<html><p>Alpha <img src="" width="48" height="48" /> Beta</p></html>'
+      '<html><p>Alpha <img src="" width="48" height="48"/> Beta</p></html>'
     );
 
     const editor = editorLocator(page);
@@ -158,6 +158,13 @@ test.describe('images', () => {
       await editor.click();
       await editor.press('Meta+A');
       await toolbarButton(page, key).click();
+      await expect
+        .poll(async () => {
+          const cls =
+            (await toolbarButton(page, key).getAttribute('class')) ?? '';
+          return cls.includes('toolbar-btn--active');
+        })
+        .toBe(true);
     }
 
     await expect.poll(async () => getSerializedHtml(page)).toBe(expectedHtml);
diff --git a/.playwright/tests/testLinks.spec.ts b/.playwright/tests/testLinks.spec.ts
index 9dc5ba044..c82bb0b42 100644
--- a/.playwright/tests/testLinks.spec.ts
+++ b/.playwright/tests/testLinks.spec.ts
@@ -163,6 +163,16 @@ test.describe('test-links setLink table', () => {
       url: 'https://clamp.setlink',
       expectContains: '<p><a href="https://clamp.setlink">Z</a></p>',
     },
+    {
+      name: 'setLink wraps link text before inline image - keeps the image',
+      html: '<html><p>abc<img width="80" height="80" src=""></p></html>',
+      start: '0',
+      end: '3',
+      text: 'abc',
+      url: 'https://example.com',
+      expectContains:
+        '<p><a href="https://example.com">abc</a><img src="" width="80" height="80"/></p>',
+    },
   ];
 
   for (const c of cases) {
diff --git a/apps/example-web/src/components/Toolbar.tsx b/apps/example-web/src/components/Toolbar.tsx
index 91ab0260b..9d52b9f0a 100644
--- a/apps/example-web/src/components/Toolbar.tsx
+++ b/apps/example-web/src/components/Toolbar.tsx
@@ -164,7 +164,7 @@ export function Toolbar({
     },
     {
       key: 'image',
-      label: '🖼',
+      label: '🏞️',
       onPress: onOpenImageModal,
     },
     {
diff --git a/src/web/formats/EnrichedImage.ts b/src/web/formats/EnrichedImage.ts
index 38181fbd3..4f2845507 100644
--- a/src/web/formats/EnrichedImage.ts
+++ b/src/web/formats/EnrichedImage.ts
@@ -21,9 +21,9 @@ export const EnrichedImage = Image.extend({
     return [
       'img',
       {
+        src: node.attrs.src,
         width: node.attrs.width,
         height: node.attrs.height,
-        src: node.attrs.src,
       },
     ];
   },
diff --git a/src/web/positionMapping.ts b/src/web/positionMapping.ts
index f2f0a392b..1d41cea4c 100644
--- a/src/web/positionMapping.ts
+++ b/src/web/positionMapping.ts
@@ -17,14 +17,21 @@ import type { Node } from '@tiptap/pm/model';
  *   Native:  0  1  2  3  4  4  5  6  7   8  9  9 10 11 12 13 14
  *
  * PM 5 and PM 6 both map to native 4, PM 11 and PM 12 both map to native 9.
+ *
+ * Inline images occupy one index in the native plain string as a '\ufffc' character,
+ * we do the same for the web implementation.
  */
 
+function nativeTextLength(doc: Node, from: number, to: number): number {
+  return doc.textBetween(from, to, '\n', () => '\ufffc').length;
+}
+
 /**
  * Returns the native position for a given TipTap document position.
  */
 export function tiptapPosToNativePos(doc: Node, tiptapPos: number): number {
   if (tiptapPos <= 1) return 0;
-  return doc.textBetween(0, tiptapPos, '\n').length;
+  return nativeTextLength(doc, 0, tiptapPos);
 }
 
 /**
@@ -44,7 +51,7 @@ export function nativePosToTiptapPos(doc: Node, nativePos: number): number {
   if (nativePos <= 0) return 1;
 
   const maxPos = doc.content.size;
-  const totalNativeLen = doc.textBetween(0, maxPos, '\n').length;
+  const totalNativeLen = nativeTextLength(doc, 0, maxPos);
 
   if (nativePos >= totalNativeLen) {
     return maxPos - 1; // clamp to end of last block's content
diff --git a/src/web/tiptapHtmlNormalizer.ts b/src/web/tiptapHtmlNormalizer.ts
index 6b86645e6..1507aed5c 100644
--- a/src/web/tiptapHtmlNormalizer.ts
+++ b/src/web/tiptapHtmlNormalizer.ts
@@ -15,5 +15,8 @@ export function normalizeHtmlFromTiptap(html: string): string {
   // Convert remaining empty <p></p> to <br> (outside of lists)
   content = content.replace(/<p><\/p>/g, '<br>');
 
+  // Convert <img> tags to self-closing tags
+  content = content.replace(/<img([^>]*?)>/g, '<img$1/>');
+
   return `<html>${content}</html>`;
 }

From ce96a71d701acc54de00bcfb9cbe5555a6ee7ec4 Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Wed, 29 Apr 2026 08:59:42 +0200
Subject: [PATCH 08/17] fix: position mapping and block setLink when image
 inside selection

---
 src/web/EnrichedTextInput.tsx   |  8 ++++++--
 src/web/formats/EnrichedLink.ts | 11 ++++++-----
 src/web/positionMapping.ts      |  9 ++++++++-
 src/web/tiptapHtmlNormalizer.ts |  7 ++++++-
 src/web/useOnChangeText.ts      |  8 +++++---
 5 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/web/EnrichedTextInput.tsx b/src/web/EnrichedTextInput.tsx
index 421f47f7e..df9dabd6b 100644
--- a/src/web/EnrichedTextInput.tsx
+++ b/src/web/EnrichedTextInput.tsx
@@ -11,7 +11,11 @@ import type {
   EnrichedTextInputWebProps,
 } from '../types';
 import { adaptWebToNativeEvent } from './adaptWebToNativeEvent';
-import { tiptapPosToNativePos, nativePosToTiptapPos } from './positionMapping';
+import {
+  tiptapPosToNativePos,
+  nativePosToTiptapPos,
+  nativeLeafText,
+} from './positionMapping';
 import {
   useEditor,
   EditorContent,
@@ -145,7 +149,7 @@ export const EnrichedTextInput = ({
 
         const start = tiptapPosToNativePos(state.doc, from);
         const end = tiptapPosToNativePos(state.doc, to);
-        const text = state.doc.textBetween(from, to, '\n');
+        const text = nativeLeafText(state.doc, from, to);
         onChangeSelection?.(adaptWebToNativeEvent(null, { start, end, text }));
       },
       editorProps: {
diff --git a/src/web/formats/EnrichedLink.ts b/src/web/formats/EnrichedLink.ts
index 7c3d0dd24..15be9baac 100644
--- a/src/web/formats/EnrichedLink.ts
+++ b/src/web/formats/EnrichedLink.ts
@@ -123,15 +123,16 @@ function isRangeLinkBlocked(editor: Editor, from: number, to: number): boolean {
     return true;
   }
 
-  let hasCodeBlock = false;
+  let hasBlockedNode = false;
+  const blockedNodes = ['codeBlock', 'image'];
   doc.nodesBetween(from, to, (node) => {
-    if (hasCodeBlock) return false;
-    if (node.type.name === 'codeBlock') {
-      hasCodeBlock = true;
+    if (hasBlockedNode) return false;
+    if (blockedNodes.includes(node.type.name)) {
+      hasBlockedNode = true;
       return false;
     }
     return true;
   });
 
-  return hasCodeBlock;
+  return hasBlockedNode;
 }
diff --git a/src/web/positionMapping.ts b/src/web/positionMapping.ts
index 1d41cea4c..5f6d9f1e6 100644
--- a/src/web/positionMapping.ts
+++ b/src/web/positionMapping.ts
@@ -22,8 +22,15 @@ import type { Node } from '@tiptap/pm/model';
  * we do the same for the web implementation.
  */
 
+/**
+ * Plain text in the native coordinate model for [from, to), including '\ufffc' per inline image.
+ */
+export function nativeLeafText(doc: Node, from: number, to: number): string {
+  return doc.textBetween(from, to, '\n', () => '\ufffc');
+}
+
 function nativeTextLength(doc: Node, from: number, to: number): number {
-  return doc.textBetween(from, to, '\n', () => '\ufffc').length;
+  return nativeLeafText(doc, from, to).length;
 }
 
 /**
diff --git a/src/web/tiptapHtmlNormalizer.ts b/src/web/tiptapHtmlNormalizer.ts
index 1507aed5c..9cde09cfa 100644
--- a/src/web/tiptapHtmlNormalizer.ts
+++ b/src/web/tiptapHtmlNormalizer.ts
@@ -16,7 +16,12 @@ export function normalizeHtmlFromTiptap(html: string): string {
   content = content.replace(/<p><\/p>/g, '<br>');
 
   // Convert <img> tags to self-closing tags
-  content = content.replace(/<img([^>]*?)>/g, '<img$1/>');
+  content = content.replace(/<img\b([^>]*)>/gi, (_, attrs: string) => {
+    if (attrs.trimEnd().endsWith('/')) {
+      return `<img${attrs}>`;
+    }
+    return `<img${attrs}/>`;
+  });
 
   return `<html>${content}</html>`;
 }
diff --git a/src/web/useOnChangeText.ts b/src/web/useOnChangeText.ts
index cfa362f70..f3a70bbc5 100644
--- a/src/web/useOnChangeText.ts
+++ b/src/web/useOnChangeText.ts
@@ -1,13 +1,15 @@
 import { type Editor } from '@tiptap/react';
 import type { OnChangeTextEvent } from '../types';
 import type { NativeSyntheticEvent } from 'react-native';
+import { nativeLeafText } from './positionMapping';
 import { useOnEditorChange } from './useOnEditorChange';
 
 export const useOnChangeText = (
   editor: Editor,
   onChangeText?: (e: NativeSyntheticEvent<OnChangeTextEvent>) => void
 ) => {
-  useOnEditorChange(editor, onChangeText, (e) =>
-    e.getText({ blockSeparator: '\n' })
-  );
+  useOnEditorChange(editor, onChangeText, (e) => {
+    const doc = e.state.doc;
+    return nativeLeafText(doc, 0, doc.content.size);
+  });
 };

From 575c5b59913856179096b23e5677b5d3ccd5a39a Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Wed, 29 Apr 2026 09:24:36 +0200
Subject: [PATCH 09/17] fix: style

---
 src/web/EnrichedTextInput.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/web/EnrichedTextInput.css b/src/web/EnrichedTextInput.css
index 0dc0cb14c..c44b18ddc 100644
--- a/src/web/EnrichedTextInput.css
+++ b/src/web/EnrichedTextInput.css
@@ -142,12 +142,20 @@
   height: 100%;
 }
 
+
 .eti-editor
   .react-renderer.node-image.ProseMirror-selectednode
   .eti-inline-image {
-  box-shadow: inset 0 0 0 999px Highlight;
+    box-shadow: inset 0 0 0 999px Highlight;
+}
+
+.eti-editor
+  .react-renderer.node-image.ProseMirror-selectednode
+  img.eti-inline-image-img {
+  outline: 2px solid currentColor;
 }
 
+
 .eti-editor ul[data-type="checkboxList"] {
   margin: 0;
   list-style: none;

From f9816228e8bf9653ed73e4e910a7c3b43db03d1b Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Wed, 29 Apr 2026 10:18:38 +0200
Subject: [PATCH 10/17] fix: styling

---
 src/web/EnrichedTextInput.css             |  9 +++---
 src/web/formats/EnrichedImageNodeView.tsx | 39 +++++++++++++++++++----
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/web/EnrichedTextInput.css b/src/web/EnrichedTextInput.css
index c44b18ddc..16c3a1a6a 100644
--- a/src/web/EnrichedTextInput.css
+++ b/src/web/EnrichedTextInput.css
@@ -130,6 +130,10 @@
   display: inline-block;
 }
 
+.eti-editor .eti-inline-image-img {
+  object-fit: contain;
+}
+
 .eti-editor .eti-inline-image--placeholder {
   display: inline-block;
   overflow: hidden;
@@ -149,11 +153,6 @@
     box-shadow: inset 0 0 0 999px Highlight;
 }
 
-.eti-editor
-  .react-renderer.node-image.ProseMirror-selectednode
-  img.eti-inline-image-img {
-  outline: 2px solid currentColor;
-}
 
 
 .eti-editor ul[data-type="checkboxList"] {
diff --git a/src/web/formats/EnrichedImageNodeView.tsx b/src/web/formats/EnrichedImageNodeView.tsx
index d4fec2bb8..90f59995f 100644
--- a/src/web/formats/EnrichedImageNodeView.tsx
+++ b/src/web/formats/EnrichedImageNodeView.tsx
@@ -2,7 +2,7 @@ import { NodeViewWrapper, type ReactNodeViewProps } from '@tiptap/react';
 import type { CSSProperties } from 'react';
 import { useState } from 'react';
 
-const INLINE_IMAGE_FALLBACK_SIZE = 80;
+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';
@@ -32,14 +32,17 @@ function dim(value: unknown): number | undefined {
 
 export function EnrichedImageNodeView({ node }: ReactNodeViewProps) {
   const src = ((node.attrs.src as string | null | undefined) ?? '').trim();
-  const w = dim(node.attrs.width) ?? INLINE_IMAGE_FALLBACK_SIZE;
-  const h = dim(node.attrs.height) ?? INLINE_IMAGE_FALLBACK_SIZE;
+  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: w,
-    height: h,
+    width: placeholderW,
+    height: placeholderH,
   };
 
   if (showPlaceholder) {
@@ -55,14 +58,36 @@ export function EnrichedImageNodeView({ node }: ReactNodeViewProps) {
     );
   }
 
+  let imgDims: { width?: number; height?: number };
+  if (rawW != null && rawH != null) {
+    imgDims = { width: rawW, height: rawH };
+  } else if (rawW != null) {
+    imgDims = { width: rawW };
+  } else if (rawH != null) {
+    imgDims = { height: rawH };
+  } else {
+    imgDims = { width: IMAGE_FALLBACK_SIZE };
+  }
+
+  let imgStyle: CSSProperties | undefined;
+  if (rawW != null && rawH != null) {
+    imgStyle = undefined;
+  } else if (rawW != null) {
+    imgStyle = { height: 'auto' };
+  } else if (rawH != null) {
+    imgStyle = { width: 'auto' };
+  } else {
+    imgStyle = { height: 'auto' };
+  }
+
   return (
     <NodeViewWrapper as="span" className="eti-inline-image">
       <img
+        {...imgDims}
         src={src}
-        width={w}
-        height={h}
         alt=""
         className="eti-inline-image-img"
+        style={imgStyle}
         contentEditable={false}
         draggable={false}
         onError={() => setErrored(true)}

From 6b7d75cc38527a8f959f9a03e155924ca254f7c5 Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Wed, 29 Apr 2026 13:43:38 +0200
Subject: [PATCH 11/17] refactor: extract out EnrichedInputStyle to it's own
 .md

---
 docs/API_REFERENCE.md        |  17 +---
 docs/enriched-input-style.md | 171 +++++++++++++++++++++++++++++++++++
 2 files changed, 175 insertions(+), 13 deletions(-)
 create mode 100644 docs/enriched-input-style.md

diff --git a/docs/API_REFERENCE.md b/docs/API_REFERENCE.md
index a84462ad6..f53dc4af2 100644
--- a/docs/API_REFERENCE.md
+++ b/docs/API_REFERENCE.md
@@ -467,20 +467,11 @@ Color of the selection rectangle that gets drawn over the selected text. On iOS,
 
 ### `style`
 
-Accepts most [ViewStyle](https://reactnative.dev/docs/view#style) props, but keep in mind that some of them might not be supported.
+The `style` prop controls the layout, dimensions, typography, borders, shadows, opacity, and similar container-level appearance of the editable content container. The exact supported properties are listed under [EnrichedInputStyle](enriched-input-style.md).
 
-Additionally following [TextStyle](https://reactnative.dev/docs/text#style) props are supported
-
-- color
-- fontFamily
-- fontSize
-- fontWeight
-- lineHeight
-- fontStyle only on Android
-
-| Type                                                                                                               | Default Value | Platform |
-| ------------------------------------------------------------------------------------------------------------------ | ------------- | -------- |
-| [`View Style`](https://reactnative.dev/docs/view#style) \| [`Text Style`](https://reactnative.dev/docs/text#style) | -             | Both     |
+| Type                                                | Default Value | Platform |
+| --------------------------------------------------- | ------------- | -------- |
+| [EnrichedInputStyle](enriched-input-style.md)       | -             | Both     |
 
 ### `ViewProps`
 
diff --git a/docs/enriched-input-style.md b/docs/enriched-input-style.md
new file mode 100644
index 000000000..dc65a5280
--- /dev/null
+++ b/docs/enriched-input-style.md
@@ -0,0 +1,171 @@
+# EnrichedInputStyle
+
+Defines the [`style`](API_REFERENCE.md#style) prop’s shape. This type is a subset of React Native’s [TextStyle](https://reactnative.dev/docs/text-style-props), meaning some properties are not supported by this component (e.g. `textAlign`, `textDecorationLine`, `justifyContent`). Certain properties are platform-specific and include an `@platform` directive indicating where they are supported.
+
+
+```ts
+export interface EnrichedInputStyle {
+  // Layout / FlexStyle
+  alignSelf?: TextStyle['alignSelf'];
+  aspectRatio?: number | string;
+  borderBottomWidth?: number;
+  borderEndWidth?: number;
+  borderLeftWidth?: number;
+  borderRightWidth?: number;
+  borderStartWidth?: number;
+  borderTopWidth?: number;
+  borderWidth?: number;
+  bottom?: DimensionValue;
+  boxSizing?: TextStyle['boxSizing'];
+  display?: TextStyle['display'];
+  end?: DimensionValue;
+  flex?: number;
+  flexBasis?: DimensionValue;
+  flexGrow?: number;
+  flexShrink?: number;
+  height?: DimensionValue;
+  inset?: DimensionValue;
+  insetBlock?: DimensionValue;
+  insetBlockEnd?: DimensionValue;
+  insetBlockStart?: DimensionValue;
+  insetInline?: DimensionValue;
+  insetInlineEnd?: DimensionValue;
+  insetInlineStart?: DimensionValue;
+  left?: DimensionValue;
+  margin?: DimensionValue;
+  marginBlock?: DimensionValue;
+  marginBlockEnd?: DimensionValue;
+  marginBlockStart?: DimensionValue;
+  marginBottom?: DimensionValue;
+  marginEnd?: DimensionValue;
+  marginHorizontal?: DimensionValue;
+  marginInline?: DimensionValue;
+  marginInlineEnd?: DimensionValue;
+  marginInlineStart?: DimensionValue;
+  marginLeft?: DimensionValue;
+  marginRight?: DimensionValue;
+  marginStart?: DimensionValue;
+  marginTop?: DimensionValue;
+  marginVertical?: DimensionValue;
+  maxHeight?: DimensionValue;
+  maxWidth?: DimensionValue;
+  minHeight?: DimensionValue;
+  minWidth?: DimensionValue;
+  padding?: DimensionValue;
+  paddingBlock?: DimensionValue;
+  paddingBlockEnd?: DimensionValue;
+  paddingBlockStart?: DimensionValue;
+  paddingBottom?: DimensionValue;
+  paddingEnd?: DimensionValue;
+  paddingHorizontal?: DimensionValue;
+  paddingInline?: DimensionValue;
+  paddingInlineEnd?: DimensionValue;
+  paddingInlineStart?: DimensionValue;
+  paddingLeft?: DimensionValue;
+  paddingRight?: DimensionValue;
+  paddingStart?: DimensionValue;
+  paddingTop?: DimensionValue;
+  paddingVertical?: DimensionValue;
+  position?: TextStyle['position'];
+  right?: DimensionValue;
+  start?: DimensionValue;
+  top?: DimensionValue;
+  width?: DimensionValue;
+  zIndex?: number;
+
+  // Shadows
+  /** @platform ios */
+  shadowColor?: ColorValue;
+  /** @platform ios */
+  shadowOffset?: TextStyle['shadowOffset'];
+  /** @platform ios */
+  shadowOpacity?: TextStyle['shadowOpacity'];
+  /** @platform ios */
+  shadowRadius?: number;
+
+  // Transforms
+  transform?: TextStyle['transform'];
+  transformOrigin?: TextStyle['transformOrigin'];
+
+  // View appearance
+  /** @platform ios web */
+  backfaceVisibility?: TextStyle['backfaceVisibility'];
+  backgroundColor?: ColorValue;
+  /** @platform ios web */
+  borderBlockColor?: ColorValue;
+  /** @platform ios web */
+  borderBlockEndColor?: ColorValue;
+  /** @platform ios web */
+  borderBlockStartColor?: ColorValue;
+  /** @platform ios web */
+  borderBottomColor?: ColorValue;
+  /** @platform ios web */
+  borderBottomEndRadius?: TextStyle['borderBottomEndRadius'];
+  /** @platform ios web */
+  borderBottomLeftRadius?: TextStyle['borderBottomLeftRadius'];
+  /** @platform ios web */
+  borderBottomRightRadius?: TextStyle['borderBottomRightRadius'];
+  /** @platform ios web */
+  borderBottomStartRadius?: TextStyle['borderBottomStartRadius'];
+  /** @platform ios web */
+  borderColor?: ColorValue;
+  /** @platform ios web */
+  borderEndColor?: ColorValue;
+  /** @platform ios web */
+  borderEndEndRadius?: TextStyle['borderEndEndRadius'];
+  /** @platform ios web */
+  borderEndStartRadius?: TextStyle['borderEndStartRadius'];
+  /** @platform ios web */
+  borderLeftColor?: ColorValue;
+  /** @platform ios web */
+  borderRadius?: TextStyle['borderRadius'];
+  /** @platform ios web */
+  borderRightColor?: ColorValue;
+  /** @platform ios web */
+  borderStartColor?: ColorValue;
+  /** @platform ios web */
+  borderStartEndRadius?: TextStyle['borderStartEndRadius'];
+  /** @platform ios web */
+  borderStartStartRadius?: TextStyle['borderStartStartRadius'];
+  /** @platform ios web */
+  borderStyle?: TextStyle['borderStyle'];
+  /** @platform ios web */
+  borderTopColor?: ColorValue;
+  /** @platform ios web */
+  borderTopEndRadius?: TextStyle['borderTopEndRadius'];
+  /** @platform ios web */
+  borderTopLeftRadius?: TextStyle['borderTopLeftRadius'];
+  /** @platform ios web */
+  borderTopRightRadius?: TextStyle['borderTopRightRadius'];
+  /** @platform ios web */
+  borderTopStartRadius?: TextStyle['borderTopStartRadius'];
+  boxShadow?: TextStyle['boxShadow'];
+  /** @platform web */
+  cursor?: TextStyle['cursor'];
+  /** @platform android */
+  elevation?: number;
+  /** @platform android web */
+  filter?: TextStyle['filter'];
+  /** @platform android web */
+  mixBlendMode?: TextStyle['mixBlendMode'];
+  opacity?: TextStyle['opacity'];
+  /** @platform ios web */
+  outlineColor?: ColorValue;
+  outlineOffset?: TextStyle['outlineOffset'];
+  /** @platform android web */
+  outlineStyle?: TextStyle['outlineStyle'];
+  outlineWidth?: TextStyle['outlineWidth'];
+  /** @platform ios web */
+  pointerEvents?: TextStyle['pointerEvents'];
+
+  // Typography
+  color?: ColorValue;
+  fontFamily?: string;
+  fontSize?: number;
+  fontStyle?: TextStyle['fontStyle'];
+  fontWeight?: TextStyle['fontWeight'];
+  lineHeight?: number;
+  /** @platform web */
+  letterSpacing?: number;
+}
+```

From 12def9280852e6838aefd58b3f7cceb00c7ebe5d Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Wed, 29 Apr 2026 16:29:31 +0200
Subject: [PATCH 12/17] fix: fixed for ul

---
 src/web/EnrichedTextInput.css | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/web/EnrichedTextInput.css b/src/web/EnrichedTextInput.css
index 16c3a1a6a..fdf4f1ee0 100644
--- a/src/web/EnrichedTextInput.css
+++ b/src/web/EnrichedTextInput.css
@@ -78,11 +78,12 @@
   left: calc(
     -1 * var(--eti-ul-gap-width, 16px) - var(--eti-ul-bullet-size, 8px)
   );
-  top: 0.6em; 
-  @supports (top: 0.5lh) {
-    top: 0.5lh;
+  bottom: 0.4em; 
+  @supports (bottom: 0.5lh) {
+    bottom: 0.5lh;
   }
-  transform: translateY(-50%);
+
+  transform: translateY(50%);
   width: var(--eti-ul-bullet-size, 8px);
   height: var(--eti-ul-bullet-size, 8px);
   border-radius: 50%;
@@ -174,16 +175,16 @@
   left: calc(
     -1 * var(--eti-checkbox-gap-width, 16px) - var(--eti-checkbox-box-size, 24px)
   );
-  transform: translateY(-50%);
+  transform: translateY(50%);
   display: inline-flex;
   align-items: center;
   gap: 0;
   margin: 0;
   padding: 0;
   user-select: none;
-  top: 0.6em;
-  @supports (top: 0.5lh) {
-    top: 0.5lh;
+  bottom: 0.4em; 
+  @supports (bottom: 0.5lh) {
+    bottom: 0.5lh;
   }
 }
 

From 99762f5105c5d52894476986b4e0a215ca706446 Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Wed, 29 Apr 2026 16:37:41 +0200
Subject: [PATCH 13/17] fix: fixed for rest of lists

---
 .../images-checkbox-list-placeholder.png      | Bin 0 -> 3125 bytes
 .../screenshots/images-loaded-in-list.png     | Bin 2025 -> 2031 bytes
 .../screenshots/images-ol-placeholder.png     | Bin 2973 -> 2938 bytes
 .../screenshots/images-ul-placeholder.png     | Bin 2254 -> 2254 bytes
 .playwright/tests/images.spec.ts              |   5 +++++
 src/web/EnrichedTextInput.css                 |   2 +-
 6 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .playwright/screenshots/images-checkbox-list-placeholder.png

diff --git a/.playwright/screenshots/images-checkbox-list-placeholder.png b/.playwright/screenshots/images-checkbox-list-placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0226c0e4cfedd7ac175d9c68ee82bac1e93740b
GIT binary patch
literal 3125
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

literal 0
HcmV?d00001

diff --git a/.playwright/screenshots/images-loaded-in-list.png b/.playwright/screenshots/images-loaded-in-list.png
index 182aa10fe9e2fa56ac5f3421d5229fbc61c354e9..b75a46c7168378471302a7cf16e92664ad17ca00 100644
GIT binary patch
delta 1583
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

delta 1610
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
IM6N<$f+}b_@Bjb+

diff --git a/.playwright/screenshots/images-ol-placeholder.png b/.playwright/screenshots/images-ol-placeholder.png
index c9bcceae8b538ff9973280b27cc631a0041f1dfd..1ad20860818691b5845fc8fba354cf51d7200a28 100644
GIT binary patch
delta 2568
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
au|iUpPS>+7FR_9rkefHmuU8v9c=BHX<t)ws

literal 2973
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

diff --git a/.playwright/screenshots/images-ul-placeholder.png b/.playwright/screenshots/images-ul-placeholder.png
index 83ca0bbf0362eec0d6ae179ae91b6b1bafc5fb07..69c010baeaa7ce4f661807b85518cc064005aaa4 100644
GIT binary patch
delta 1864
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
CpvXx8

delta 1851
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

diff --git a/.playwright/tests/images.spec.ts b/.playwright/tests/images.spec.ts
index 546f9b65b..0242d7062 100644
--- a/.playwright/tests/images.spec.ts
+++ b/.playwright/tests/images.spec.ts
@@ -120,6 +120,11 @@ test.describe('images', () => {
         snapshot: 'images-loaded-in-list.png',
         html: '<html><ul><li><p>See <img src="/pw-e2e-ok.png" width="28" height="28" /> tiny</p></li></ul></html>',
       },
+      {
+        name: 'placeholder image inside checkbox list',
+        snapshot: 'images-checkbox-list-placeholder.png',
+        html: '<html><ul data-type="checkbox"><li checked>Before <img src="" width="40" height="40" /> after</li></ul></html>',
+      },
     ] as const;
 
     for (const row of visualBlockListCases) {
diff --git a/src/web/EnrichedTextInput.css b/src/web/EnrichedTextInput.css
index fdf4f1ee0..9b6087748 100644
--- a/src/web/EnrichedTextInput.css
+++ b/src/web/EnrichedTextInput.css
@@ -109,7 +109,7 @@
   content: counter(eti-ol) '.';
   position: absolute;
   left: calc(-1 * var(--eti-ol-gap-width, 16px));
-  top: 0;
+  bottom: 0;
   transform: translateX(-50%);
   color: var(--eti-ol-marker-color, currentColor);
   font-weight: var(--eti-ol-marker-font-weight, inherit);

From 0cf1dd1d9c15de620a47f2b125c4923112fe1c30 Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Wed, 29 Apr 2026 16:44:09 +0200
Subject: [PATCH 14/17] test: harden image tests

---
 .playwright/tests/images.spec.ts | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/.playwright/tests/images.spec.ts b/.playwright/tests/images.spec.ts
index 0242d7062..17660ac95 100644
--- a/.playwright/tests/images.spec.ts
+++ b/.playwright/tests/images.spec.ts
@@ -8,6 +8,8 @@ import {
   setEditorHtml,
 } from '../helpers/visual-regression';
 
+const VISIBILITY_TIMEOUT_MS = 15_000;
+
 test.describe('images', () => {
   test.beforeEach(async ({ page }) => {
     await gotoVisualRegression(page);
@@ -33,7 +35,9 @@ test.describe('images', () => {
       '<html><p>Hi <img src="" width="40" height="40" /> bye</p></html>'
     );
 
-    await expect(page.locator('[data-eti-image-placeholder]')).toBeVisible();
+    await expect(page.locator('[data-eti-image-placeholder]')).toBeVisible({
+      timeout: VISIBILITY_TIMEOUT_MS,
+    });
     await expect(page.locator('.eti-inline-image-img')).toHaveCount(0);
 
     await expect(editorLocator(page)).toHaveScreenshot(snapshotName);
@@ -50,7 +54,7 @@ test.describe('images', () => {
     );
 
     await expect(page.locator('[data-eti-image-placeholder]')).toBeVisible({
-      timeout: 15_000,
+      timeout: VISIBILITY_TIMEOUT_MS,
     });
     await expect(page.locator('.eti-inline-image-img')).toHaveCount(0);
 
@@ -66,7 +70,7 @@ test.describe('images', () => {
     );
 
     await expect(page.locator('.eti-inline-image-img')).toBeVisible({
-      timeout: 15_000,
+      timeout: VISIBILITY_TIMEOUT_MS,
     });
     await expect(page.locator('[data-eti-image-placeholder]')).toHaveCount(0);
 
@@ -132,7 +136,7 @@ test.describe('images', () => {
         await setEditorHtml(page, row.html);
 
         await expect(page.locator('.eti-inline-image')).toBeVisible({
-          timeout: 15_000,
+          timeout: VISIBILITY_TIMEOUT_MS,
         });
 
         await expect(editorLocator(page)).toHaveScreenshot(row.snapshot);
@@ -158,17 +162,24 @@ test.describe('images', () => {
       '<html><p>Alpha <img src="" width="48" height="48"/> Beta</p></html>'
     );
 
+    await expect(page.locator('.eti-inline-image')).toBeVisible({
+      timeout: VISIBILITY_TIMEOUT_MS,
+    });
+
     const editor = editorLocator(page);
     for (const key of toolbarOrder) {
       await editor.click();
       await editor.press('Meta+A');
       await toolbarButton(page, key).click();
       await expect
-        .poll(async () => {
-          const cls =
-            (await toolbarButton(page, key).getAttribute('class')) ?? '';
-          return cls.includes('toolbar-btn--active');
-        })
+        .poll(
+          async () => {
+            const cls =
+              (await toolbarButton(page, key).getAttribute('class')) ?? '';
+            return cls.includes('toolbar-btn--active');
+          },
+          { timeout: VISIBILITY_TIMEOUT_MS }
+        )
         .toBe(true);
     }
 

From f2474f0273b6b00828461956fe1fc0abb0d78afd Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Wed, 29 Apr 2026 16:48:19 +0200
Subject: [PATCH 15/17] refactor: simplify imgStyle, imgDims creation

---
 src/web/formats/EnrichedImageNodeView.tsx | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/web/formats/EnrichedImageNodeView.tsx b/src/web/formats/EnrichedImageNodeView.tsx
index 90f59995f..deec852d1 100644
--- a/src/web/formats/EnrichedImageNodeView.tsx
+++ b/src/web/formats/EnrichedImageNodeView.tsx
@@ -59,24 +59,16 @@ export function EnrichedImageNodeView({ node }: ReactNodeViewProps) {
   }
 
   let imgDims: { width?: number; height?: number };
-  if (rawW != null && rawH != null) {
-    imgDims = { width: rawW, height: rawH };
-  } else if (rawW != null) {
-    imgDims = { width: rawW };
-  } else if (rawH != null) {
-    imgDims = { height: rawH };
-  } else {
-    imgDims = { width: IMAGE_FALLBACK_SIZE };
-  }
-
   let imgStyle: CSSProperties | undefined;
+
   if (rawW != null && rawH != null) {
+    imgDims = { width: rawW, height: rawH };
     imgStyle = undefined;
-  } else if (rawW != null) {
-    imgStyle = { height: 'auto' };
   } else if (rawH != null) {
+    imgDims = { height: rawH };
     imgStyle = { width: 'auto' };
   } else {
+    imgDims = { width: rawW ?? IMAGE_FALLBACK_SIZE };
     imgStyle = { height: 'auto' };
   }
 

From cb7894c7fb1b0390590ddff02f8b9a6423c80187 Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Thu, 30 Apr 2026 16:00:14 +0200
Subject: [PATCH 16/17] feat: implemented paste

---
 apps/example-web/src/App.tsx     | 12 ++++
 docs/API_REFERENCE.md            |  1 +
 src/types.ts                     |  5 ++
 src/web/EnrichedTextInput.tsx    | 18 ++++++
 src/web/pasteImages.ts           | 96 ++++++++++++++++++++++++++++++++
 src/web/pastedImageDimensions.ts | 40 +++++++++++++
 6 files changed, 172 insertions(+)
 create mode 100644 src/web/pasteImages.ts
 create mode 100644 src/web/pastedImageDimensions.ts

diff --git a/apps/example-web/src/App.tsx b/apps/example-web/src/App.tsx
index 197b25aae..03c57d164 100644
--- a/apps/example-web/src/App.tsx
+++ b/apps/example-web/src/App.tsx
@@ -10,6 +10,7 @@ import {
   type BlurEvent,
   type EnrichedInputStyle,
   type OnLinkDetected,
+  type OnPasteImagesEvent,
 } from 'react-native-enriched';
 import { WEB_DEFAULT_HTML_STYLE } from './defaultHtmlStyle';
 import type { NativeSyntheticEvent } from 'react-native';
@@ -127,6 +128,16 @@ function App() {
     setCurrentLink(e);
   };
 
+  const handlePasteImages = (e: NativeSyntheticEvent<OnPasteImagesEvent>) => {
+    const DEFAULT_W = 80;
+    const DEFAULT_H = 80;
+    for (const image of e.nativeEvent.images) {
+      const w = image.width > 0 ? image.width : DEFAULT_W;
+      const h = image.height > 0 ? image.height : DEFAULT_H;
+      ref.current?.setImage(image.uri, w, h);
+    }
+  };
+
   return (
     <div className="container">
       <h1 className="app-title">Enriched Text Input</h1>
@@ -147,6 +158,7 @@ function App() {
         onChangeHtml={handleOnChangeHtml}
         onChangeState={handleChangeState}
         onLinkDetected={handleOnLinkDetected}
+        onPasteImages={handlePasteImages}
         htmlStyle={WEB_DEFAULT_HTML_STYLE}
       />
 
diff --git a/docs/API_REFERENCE.md b/docs/API_REFERENCE.md
index f53dc4af2..18e7a8409 100644
--- a/docs/API_REFERENCE.md
+++ b/docs/API_REFERENCE.md
@@ -417,6 +417,7 @@ export interface OnKeyPressEvent {
 Callback invoked when the user pastes one or more images or GIFs into the input.
 
 - `images` - is an array of objects containing the details (URI, MIME type, and dimensions) for each pasted image/GIF.
+- **Web:** each `uri` is a `blob:` URL (`URL.createObjectURL`). If you retain URIs, call `URL.revokeObjectURL` when finished so blobs can be released. 
 
 ```ts
 export interface OnPasteImagesEvent {
diff --git a/src/types.ts b/src/types.ts
index 12a96790f..1949114b2 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -469,6 +469,11 @@ export interface EnrichedTextInputProps extends Omit<ViewProps, 'children'> {
   onChangeSelection?: (e: NativeSyntheticEvent<OnChangeSelectionEvent>) => void;
   onKeyPress?: (e: NativeSyntheticEvent<OnKeyPressEvent>) => void;
   onSubmitEditing?: (e: NativeSyntheticEvent<OnSubmitEditing>) => void;
+  /**
+   * Web: each `images[].uri` is a `blob:` URL from `URL.createObjectURL`. If you keep
+   * URIs around (or replace them after upload), call `URL.revokeObjectURL(uri)` when done
+   * to avoid retaining blob memory. Native uses non-blob URIs; revoke does not apply.
+   */
   onPasteImages?: (e: NativeSyntheticEvent<OnPasteImagesEvent>) => void;
   contextMenuItems?: ContextMenuItem[];
   /**
diff --git a/src/web/EnrichedTextInput.tsx b/src/web/EnrichedTextInput.tsx
index 247757f02..73cd9b2f0 100644
--- a/src/web/EnrichedTextInput.tsx
+++ b/src/web/EnrichedTextInput.tsx
@@ -59,6 +59,7 @@ import { createStripBoldInStyledHeadingsPlugin } from './pmPlugins/stripBoldInSt
 import { StrictMarksPlugin } from './pmPlugins/strictMarksPlugin';
 import { MergeAdjacentSameKindBlocksPlugin } from './pmPlugins/mergeAdjacentSameKindBlocksPlugin';
 import { StripMarksInCodeBlockPlugin } from './pmPlugins/stripMarksInCodeBlockPlugin';
+import { handleClipboardPasteImages } from './pasteImages';
 import { StripMarksOnImagePlugin } from './pmPlugins/stripMarksOnImagePlugin';
 function runFocused(
   editor: Editor,
@@ -84,6 +85,7 @@ export const EnrichedTextInput = ({
   onChangeHtml,
   onChangeState,
   onLinkDetected,
+  onPasteImages,
   htmlStyle,
 }: EnrichedTextInputWebProps) => {
   const tiptapContent =
@@ -104,6 +106,12 @@ export const EnrichedTextInput = ({
     []
   );
 
+  const editorRef = useRef<Editor | null>(null);
+  const onPasteImagesRef = useRef(onPasteImages);
+  useEffect(() => {
+    onPasteImagesRef.current = onPasteImages;
+  }, [onPasteImages]);
+
   const editor = useEditor(
     {
       extensions: [
@@ -161,6 +169,12 @@ export const EnrichedTextInput = ({
           onKeyPress?.(adaptWebToNativeEvent(event, { key: event.key }));
           return false;
         },
+        handlePaste: (_view, event) =>
+          handleClipboardPasteImages(
+            event,
+            () => editorRef.current,
+            () => onPasteImagesRef.current
+          ),
         attributes: {
           autoCapitalize,
         },
@@ -169,6 +183,10 @@ export const EnrichedTextInput = ({
     [tiptapContent]
   );
 
+  useEffect(() => {
+    editorRef.current = editor;
+  }, [editor]);
+
   useEffect(() => {
     editor?.commands.normalizeBoldInStyledHeadings();
   }, [editor, resolvedHtmlStyle]);
diff --git a/src/web/pasteImages.ts b/src/web/pasteImages.ts
new file mode 100644
index 000000000..1f16f1dad
--- /dev/null
+++ b/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;
+}
diff --git a/src/web/pastedImageDimensions.ts b/src/web/pastedImageDimensions.ts
new file mode 100644
index 000000000..1240dc8ba
--- /dev/null
+++ b/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;
+  });
+}

From 752641518775353b5c70c121489af96cf20e6c36 Mon Sep 17 00:00:00 2001
From: Piotr Karamon <piotrkaramon3@gmail.com>
Date: Thu, 7 May 2026 13:05:01 +0200
Subject: [PATCH 17/17] docs: update docs

---
 docs/WEB.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/WEB.md b/docs/WEB.md
index 6b1640bfc..0a633430a 100644
--- a/docs/WEB.md
+++ b/docs/WEB.md
@@ -16,7 +16,6 @@ Web support is still experimental. APIs and behavior can change in future releas
 ## Unsupported
 
 - **Mentions**: `startMention` and `setMention` are no-ops. Props `mentionIndicators`, `onMentionDetected`, `onStartMention`, `onChangeMention`, and `onEndMention` are ignored. `onChangeState.mention` is always inactive.
-- **Pasting images**: `onPasteImages` is never called.
 - **Automatic link detection**: `linkRegex` is ignored. Links only work when set explicitly via the `setLink` ref method.
 - **Submit and keyboard props**: `onSubmitEditing`, `returnKeyType`, `returnKeyLabel`, and `submitBehavior` have no effect.
 - **Context menu**: `contextMenuItems` is ignored.