From b66e6f4d02a25a769e3583d0f9457fc7415fba55 Mon Sep 17 00:00:00 2001
From: rjvelazco <rjvelazco21@gmail.com>
Date: Tue, 30 Jun 2026 10:50:38 -0400
Subject: [PATCH 1/8] fix(block-editor): apply links to a selected image
 instead of replacing it (#36361)

In the new block editor, selecting an image and clicking the toolbar Link
button deleted the image and replaced it with a text link. The image node
already supports href/target attributes end-to-end; the break was purely in
the UI flow, which always routed through the text-link insert path.

- Toolbar Link button now detects a selected dotImage and opens the link
  popover in image-link mode (URL + open-in-new-tab only; no Text/Advanced),
  applying the link via updateAttributes('dotImage') so the image is preserved.
- Add a Remove-link (trash) action when editing an image that already has a link.
- Clicking a linked image no longer opens the text-link editor; it selects the
  image node (link is edited from the toolbar) and prevents navigation.
- Fix layout jump/extra margin when a link wraps the image: zero the inline-block
  baseline gap and the Tailwind Typography img margin that returns once the image
  is no longer a direct figure child.
- Toolbar Link button reflects an active state for linked images (isImageLinked),
  mirroring isLink for text links.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../link-popover/link-popover.component.html  | 75 ++++++++++++-------
 .../link-popover/link-popover.component.ts    | 37 +++++++++
 .../toolbar/editor-toolbar.store.ts           |  6 ++
 .../components/toolbar/toolbar.component.html |  2 +-
 .../components/toolbar/toolbar.component.ts   | 14 ++++
 .../src/lib/editor/editor-chrome-click.ts     |  9 +++
 .../src/lib/editor/editor.component.css       | 16 ++++
 .../editor/services/editor-popover.service.ts |  6 ++
 .../WEB-INF/messages/Language.properties      |  1 +
 9 files changed, 136 insertions(+), 30 deletions(-)

diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.html b/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.html
index d10c24959161..950425a90aeb 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.html
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.html
@@ -75,22 +75,24 @@
                 </p-autoComplete>
             </div>
 
-            <div class="flex flex-col gap-1">
-                <label for="link-text" class="text-xs font-medium text-gray-700">
-                    {{ 'dot.block.editor.dialog.link.field.text.label' | dm }}
-                    <span class="font-normal text-gray-400">
-                        {{ 'dot.block.editor.dialog.link.field.text.optional' | dm }}
-                    </span>
-                </label>
-                <input
-                    pInputText
-                    id="link-text"
-                    type="text"
-                    [formControl]="form.controls.displayText"
-                    [placeholder]="'dot.block.editor.dialog.link.field.text.placeholder' | dm"
-                    pSize="small"
-                    class="w-full rounded-sm border border-gray-300 px-3 py-1.5 text-sm focus:border-indigo-500 focus:outline-none" />
-            </div>
+            @if (!isImageLink()) {
+                <div class="flex flex-col gap-1">
+                    <label for="link-text" class="text-xs font-medium text-gray-700">
+                        {{ 'dot.block.editor.dialog.link.field.text.label' | dm }}
+                        <span class="font-normal text-gray-400">
+                            {{ 'dot.block.editor.dialog.link.field.text.optional' | dm }}
+                        </span>
+                    </label>
+                    <input
+                        pInputText
+                        id="link-text"
+                        type="text"
+                        [formControl]="form.controls.displayText"
+                        [placeholder]="'dot.block.editor.dialog.link.field.text.placeholder' | dm"
+                        pSize="small"
+                        class="w-full rounded-sm border border-gray-300 px-3 py-1.5 text-sm focus:border-indigo-500 focus:outline-none" />
+                </div>
+            }
 
             <label class="flex cursor-pointer items-center gap-2" for="open-in-new-tab">
                 <input
@@ -103,20 +105,22 @@
                 </span>
             </label>
 
-            <button
-                type="button"
-                [attr.aria-expanded]="advancedOpen()"
-                aria-controls="link-advanced-section"
-                data-testid="link-advanced-toggle"
-                (mousedown)="$event.preventDefault(); toggleAdvanced()"
-                class="flex items-center gap-1 self-start rounded-sm text-xs font-medium text-gray-600 hover:text-indigo-700 focus:ring-2 focus:ring-indigo-300 focus:outline-none">
-                <span>{{ 'dot.block.editor.dialog.link.advanced' | dm }}</span>
-                <span aria-hidden="true" class="material-symbols-outlined text-base">
-                    {{ advancedOpen() ? 'expand_less' : 'expand_more' }}
-                </span>
-            </button>
+            @if (!isImageLink()) {
+                <button
+                    type="button"
+                    [attr.aria-expanded]="advancedOpen()"
+                    aria-controls="link-advanced-section"
+                    data-testid="link-advanced-toggle"
+                    (mousedown)="$event.preventDefault(); toggleAdvanced()"
+                    class="flex items-center gap-1 self-start rounded-sm text-xs font-medium text-gray-600 hover:text-indigo-700 focus:ring-2 focus:ring-indigo-300 focus:outline-none">
+                    <span>{{ 'dot.block.editor.dialog.link.advanced' | dm }}</span>
+                    <span aria-hidden="true" class="material-symbols-outlined text-base">
+                        {{ advancedOpen() ? 'expand_less' : 'expand_more' }}
+                    </span>
+                </button>
+            }
 
-            @if (advancedOpen()) {
+            @if (!isImageLink() && advancedOpen()) {
                 <div id="link-advanced-section" class="flex flex-col gap-3">
                     <div class="flex flex-col gap-1">
                         <label for="link-title" class="text-xs font-medium text-gray-700">
@@ -174,6 +178,19 @@
             }
 
             <div class="flex justify-end gap-2 pt-1">
+                @if (isImageLink() && isEditing()) {
+                    <button
+                        type="button"
+                        data-testid="link-remove"
+                        [attr.aria-label]="'dot.block.editor.dialog.link.remove' | dm"
+                        [attr.title]="'dot.block.editor.dialog.link.remove' | dm"
+                        (mousedown)="$event.preventDefault(); onRemoveImageLink()"
+                        class="mr-auto flex cursor-pointer items-center rounded-sm p-1.5 text-red-600 hover:bg-red-50 focus:ring-2 focus:ring-red-300 focus:outline-none">
+                        <span aria-hidden="true" class="material-symbols-outlined text-xl">
+                            delete
+                        </span>
+                    </button>
+                }
                 <button
                     type="button"
                     (mousedown)="$event.preventDefault(); manager.close()"
diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.ts b/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.ts
index d87dac74bc9f..5ac5f8a7e00d 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.ts
@@ -33,6 +33,7 @@ import { DotCMSContentlet } from '@dotcms/dotcms-models';
 import { DotMessagePipe } from '@dotcms/ui';
 
 import { FULLSCREEN_AWARE_OVERLAY_OPTIONS } from '../../config.utils';
+import { DOT_IMAGE_NODE_NAME } from '../../extensions/nodes/image.extension';
 import { LINK_SELECTION_KEY } from '../../extensions/selection-preserve.extension';
 import { EditorPopoverService } from '../../services/editor-popover.service';
 import { EditorStore } from '../../store/editor.store';
@@ -139,6 +140,15 @@ export class LinkPopoverComponent {
         () => this.manager.linkPayload()?.initialValues != null
     );
 
+    /**
+     * True when the popover targets a selected `dotImage` node. Hides the text-only fields (Text,
+     * Advanced) and routes {@link onInsert} to update the image node's `href`/`target` attributes
+     * instead of inserting a text node with a link mark.
+     */
+    protected readonly isImageLink = computed(
+        () => this.manager.linkPayload()?.isImageLink === true
+    );
+
     /**
      * Tracks whether the Advanced (Title / Aria Label / Rel) section is visible.
      * Auto-expands when an existing link's payload carries any of those values, so the
@@ -274,6 +284,8 @@ export class LinkPopoverComponent {
         effect((onCleanup) => {
             if (!this.manager.isOpen('link')) return;
             if (this.manager.linkPayload()?.linkEl) return;
+            // Image-link mode is a NodeSelection — there is no text range to paint.
+            if (this.manager.linkPayload()?.isImageLink) return;
             const view = this.editor().view;
             view.dispatch(view.state.tr.setMeta(LINK_SELECTION_KEY, { active: true }));
             onCleanup(() =>
@@ -364,6 +376,21 @@ export class LinkPopoverComponent {
             rel: (rel ?? '').trim() || null
         };
 
+        if (payload?.isImageLink) {
+            // Image-link mode — set the link on the selected image node's attributes. The node's
+            // renderHTML/nodeView wrap the <img> in <a href target>, so the image is preserved.
+            editor
+                .chain()
+                .focus()
+                .updateAttributes(DOT_IMAGE_NODE_NAME, {
+                    href,
+                    target: openInNewTab ? '_blank' : null
+                })
+                .run();
+            this.manager.close();
+            return;
+        }
+
         if (payload?.linkEl) {
             // Edit mode — update the link in place using the pre-computed anchor position.
             const linkEl = payload.linkEl;
@@ -401,4 +428,14 @@ export class LinkPopoverComponent {
 
         this.manager.close();
     }
+
+    /** Clears the link on the selected image node (image-link edit mode only). */
+    protected onRemoveImageLink(): void {
+        this.editor()
+            .chain()
+            .focus()
+            .updateAttributes(DOT_IMAGE_NODE_NAME, { href: null, target: null })
+            .run();
+        this.manager.close();
+    }
 }
diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/editor-toolbar.store.ts b/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/editor-toolbar.store.ts
index 4f7540c8410d..e70bd7a19e79 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/editor-toolbar.store.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/editor-toolbar.store.ts
@@ -24,6 +24,9 @@ export class EditorToolbarStore {
     readonly canIndent = signal(false);
     readonly canOutdent = signal(false);
     readonly isImageSelected = signal(false);
+    /** True when the selected `dotImage` node carries a link (`href`) — drives the toolbar
+     *  Link button's active state for linked images, mirroring `isLink` for text links. */
+    readonly isImageLinked = signal(false);
     readonly imageTextWrap = signal<string | null>(null);
     readonly imageTextAlign = signal<string | null>(null);
     readonly textAlign = signal<'left' | 'center' | 'right' | 'justify'>('left');
@@ -47,6 +50,9 @@ export class EditorToolbarStore {
                 this.isCodeBlock.set(editor.isActive('codeBlock'));
                 this.isLink.set(editor.isActive('link'));
                 this.isImageSelected.set(editor.isActive('dotImage'));
+                this.isImageLinked.set(
+                    editor.isActive('dotImage') && !!editor.getAttributes('dotImage').href
+                );
                 this.imageTextWrap.set(
                     editor.isActive('dotImage')
                         ? (editor.getAttributes('dotImage').textWrap ?? null)
diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.html b/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.html
index b1e52314fd57..307062add4b3 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.html
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.html
@@ -369,7 +369,7 @@
             [tooltipPosition]="TOOLTIP_POSITION"
             [tooltipOptions]="overlayTooltipOptions()"
             [showDelay]="TOOLTIP_SHOW_DELAY"
-            [class]="btnClass(state.isLink() || popovers.isOpen('link'))"
+            [class]="btnClass(state.isLink() || state.isImageLinked() || popovers.isOpen('link'))"
             (mousedown)="openLinkDialog($event)">
             <span aria-hidden="true" class="material-symbols-outlined">link</span>
         </button>
diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.ts b/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.ts
index fa0b47617e61..f3d93e939382 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/toolbar/toolbar.component.ts
@@ -26,6 +26,7 @@ import {
     FULLSCREEN_AWARE_OVERLAY_OPTIONS,
     OVERLAY_ABOVE_FULLSCREEN_Z_INDEX
 } from '../../config.utils';
+import { DOT_IMAGE_NODE_NAME } from '../../extensions/nodes/image.extension';
 import { BLOCK_TARGET_KEY } from '../../extensions/selection-preserve.extension';
 import { ContentletEditUrlService } from '../../services/contentlet-edit-url.service';
 import { EditorModalService } from '../../services/editor-modal.service';
@@ -412,6 +413,19 @@ export class ToolbarComponent implements OnDestroy {
         const { from, to, empty } = editor.state.selection;
         const btn = event.currentTarget as HTMLElement;
 
+        // Image selected → apply the link to the image node's href/target instead of inserting
+        // text. Without this branch the insert-text path below would delete the image (#36361).
+        if (editor.isActive(DOT_IMAGE_NODE_NAME)) {
+            const attrs = editor.getAttributes(DOT_IMAGE_NODE_NAME);
+            this.popovers.openLink(() => btn.getBoundingClientRect(), {
+                isImageLink: true,
+                initialValues: attrs['href']
+                    ? { href: attrs['href'], target: attrs['target'] ?? null }
+                    : undefined
+            });
+            return;
+        }
+
         // Check if cursor/selection is inside an existing link
         const linkMark = editor.state.doc
             .resolve(from)
diff --git a/core-web/libs/new-block-editor/src/lib/editor/editor-chrome-click.ts b/core-web/libs/new-block-editor/src/lib/editor/editor-chrome-click.ts
index fb0949209147..809a21c0d382 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/editor-chrome-click.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/editor-chrome-click.ts
@@ -14,6 +14,15 @@ export function handleEditorProseMirrorClick(
     const anchor = (event.target as HTMLElement).closest('a[href]');
     if (!anchor) return;
 
+    // A linked image renders as <a href><img></a>. Clicking it must NOT open the link editor —
+    // the click selects the `dotImage` node (surfacing the image toolbar group), and the link is
+    // edited from the toolbar Link button. Just stop the anchor from navigating. Opening the
+    // text-link editor here would show the wrong fields and, on save, replace the image (#36361).
+    if (anchor.querySelector('img')) {
+        event.preventDefault();
+        return;
+    }
+
     const href = anchor.getAttribute('href') ?? '';
     const displayText = anchor.textContent?.trim() ?? '';
     const target = anchor.getAttribute('target');
diff --git a/core-web/libs/new-block-editor/src/lib/editor/editor.component.css b/core-web/libs/new-block-editor/src/lib/editor/editor.component.css
index 354b6060141d..5f3870d28c25 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/editor.component.css
+++ b/core-web/libs/new-block-editor/src/lib/editor/editor.component.css
@@ -225,6 +225,22 @@
     display: inline-block;
     max-width: 100%;
     height: auto;
+    /* Align to the top of the line box so the inline-block image carries no baseline
+       descender gap. Without this, wrapping the image in an inline <a> (when a link is
+       added) introduces extra space below it and the layout visibly jumps (#36361). */
+    vertical-align: top;
+    /* Tailwind Typography's `.prose :where(img)` adds `margin: 2em 0`, normally cancelled by
+       its `figure > *` reset. Once the image is wrapped in <a> (linked), it's no longer a direct
+       figure child so that reset stops applying and the 2em margin returns. Zero it explicitly —
+       this selector out-specifies prose's zero-specificity `:where()` rules (#36361). */
+    margin: 0;
+}
+
+/* A linked image is rendered as <figure><a href><img></a></figure>. Keep the anchor a
+   zero-line-height inline-block so it hugs the image and linking doesn't shift layout. */
+:host ::ng-deep .ProseMirror figure a {
+    display: inline-block;
+    line-height: 0;
 }
 
 /* ─── Selected node ring ────────────────────────────────── */
diff --git a/core-web/libs/new-block-editor/src/lib/editor/services/editor-popover.service.ts b/core-web/libs/new-block-editor/src/lib/editor/services/editor-popover.service.ts
index cd60e3e1d499..e06458120a3a 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/services/editor-popover.service.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/services/editor-popover.service.ts
@@ -60,6 +60,12 @@ export interface LinkPopoverPayload {
     linkEl?: HTMLElement;
     /** Pre-computed position for edit-mode insertions — captured at open time. */
     anchorPos?: number;
+    /**
+     * True when the link targets a selected `dotImage` node. In this mode the popover sets the
+     * image node's `href`/`target` attributes instead of inserting a text node with a link mark,
+     * and hides the text-only fields (Text, Advanced).
+     */
+    isImageLink?: boolean;
 }
 
 interface ActivePopover {
diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
index 23429882a010..37171ccd7f4d 100644
--- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
+++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -6123,6 +6123,7 @@ dot.block.editor.dialog.link.field.aria-label.label=Aria Label
 dot.block.editor.dialog.link.field.aria-label.placeholder=Descriptive label for screen readers
 dot.block.editor.dialog.link.field.rel.label=Rel
 dot.block.editor.dialog.link.field.rel.placeholder=Select rel attribute
+dot.block.editor.dialog.link.remove=Remove link
 
 # Image properties dialog
 dot.block.editor.dialog.image-properties.aria-label=Edit image

From 9e71a36b10bd56d301ac40f3e48d36e93ef94e61 Mon Sep 17 00:00:00 2001
From: rjvelazco <rjvelazco21@gmail.com>
Date: Tue, 30 Jun 2026 11:05:24 -0400
Subject: [PATCH 2/8] fix(block-editor): add vertical-align:top to linked-image
 anchor to stop layout jump (#36361)

Once the <a> wraps the image, the anchor (not the img) is the inline-level box
in the figure's formatting context, so it sits on the baseline and the browser
reserves font-descender space below it (~12px). Align the anchor to the top too.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../new-block-editor/src/lib/editor/editor.component.css    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/core-web/libs/new-block-editor/src/lib/editor/editor.component.css b/core-web/libs/new-block-editor/src/lib/editor/editor.component.css
index 5f3870d28c25..2c36dbf7ea1b 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/editor.component.css
+++ b/core-web/libs/new-block-editor/src/lib/editor/editor.component.css
@@ -237,10 +237,14 @@
 }
 
 /* A linked image is rendered as <figure><a href><img></a></figure>. Keep the anchor a
-   zero-line-height inline-block so it hugs the image and linking doesn't shift layout. */
+   zero-line-height inline-block so it hugs the image and linking doesn't shift layout.
+   `vertical-align: top` is essential: once the anchor wraps the image, the *anchor* (not the
+   img) is the inline-level box in the figure's formatting context, so it must align to the top
+   or the browser reserves font-descender space below it and the layout jumps (#36361). */
 :host ::ng-deep .ProseMirror figure a {
     display: inline-block;
     line-height: 0;
+    vertical-align: top;
 }
 
 /* ─── Selected node ring ────────────────────────────────── */

From cfc6e620d2d94ec11a7db1272665c07f56bec35a Mon Sep 17 00:00:00 2001
From: rjvelazco <rjvelazco21@gmail.com>
Date: Tue, 30 Jun 2026 11:09:10 -0400
Subject: [PATCH 3/8] fix(block-editor): single-click selection for linked
 images (#36361)

The wrapping <a> made the browser treat clicks as link interactions, so
ProseMirror needed several clicks before it node-selected the image and showed
its toolbar options. Select the node on the first mousedown from the image
node view and suppress the anchor's default behaviour.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../lib/editor/extensions/nodes/image.extension.ts  | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/image.extension.ts b/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/image.extension.ts
index 3a40126a8bf8..8fc8adc826ad 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/image.extension.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/image.extension.ts
@@ -148,7 +148,7 @@ export const DotImage = Image.extend({
     },
 
     addNodeView() {
-        return ({ node }) => {
+        return ({ node, getPos, editor }) => {
             const figure = document.createElement('figure');
             const img = document.createElement('img');
 
@@ -175,6 +175,17 @@ export const DotImage = Image.extend({
                 if (target) a.setAttribute('target', String(target));
                 a.appendChild(img);
                 figure.appendChild(a);
+
+                // The wrapping <a> makes the browser treat clicks as link interactions, so
+                // ProseMirror won't cleanly node-select the image (it took several clicks to
+                // activate the image + its toolbar options). Select the node ourselves on the
+                // first mousedown and suppress the anchor's default behaviour (#36361).
+                figure.addEventListener('mousedown', (event) => {
+                    event.preventDefault();
+                    if (typeof getPos === 'function') {
+                        editor.commands.setNodeSelection(getPos());
+                    }
+                });
             } else {
                 figure.appendChild(img);
             }

From 4fef9097ae616e5e1ae39857071c0d092c8ccea6 Mon Sep 17 00:00:00 2001
From: rjvelazco <rjvelazco21@gmail.com>
Date: Tue, 30 Jun 2026 11:27:50 -0400
Subject: [PATCH 4/8] refactor(block-editor): address PR review on image-link
 fix (#36361)

- image.extension.ts: build anchorAttrs conditionally so a null href never
  serializes as href="null" (latent issue flagged in review).
- link-popover.component.html: make the Remove-link button keyboard-accessible
  by splitting into (mousedown) preventDefault + (click) handler, so Enter/Space
  activate it without blurring the editor or double-firing on mouse.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/link-popover/link-popover.component.html       | 3 ++-
 .../src/lib/editor/extensions/nodes/image.extension.ts        | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.html b/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.html
index 950425a90aeb..a97dcc916670 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.html
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.html
@@ -184,7 +184,8 @@
                         data-testid="link-remove"
                         [attr.aria-label]="'dot.block.editor.dialog.link.remove' | dm"
                         [attr.title]="'dot.block.editor.dialog.link.remove' | dm"
-                        (mousedown)="$event.preventDefault(); onRemoveImageLink()"
+                        (mousedown)="$event.preventDefault()"
+                        (click)="onRemoveImageLink()"
                         class="mr-auto flex cursor-pointer items-center rounded-sm p-1.5 text-red-600 hover:bg-red-50 focus:ring-2 focus:ring-red-300 focus:outline-none">
                         <span aria-hidden="true" class="material-symbols-outlined text-xl">
                             delete
diff --git a/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/image.extension.ts b/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/image.extension.ts
index 8fc8adc826ad..6112a17e90ec 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/image.extension.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/image.extension.ts
@@ -140,7 +140,9 @@ export const DotImage = Image.extend({
         else if (textAlign) figAttrs['class'] = `image-align-${textAlign}`;
 
         const img = ['img', mergeAttributes(this.options.HTMLAttributes, imgAttrs)];
-        const anchorAttrs: Record<string, string> = { href };
+        // Build conditionally so a null/absent href never serializes as href="null".
+        const anchorAttrs: Record<string, string> = {};
+        if (href) anchorAttrs['href'] = href;
         if (target) anchorAttrs['target'] = target;
         const inner = href ? ['a', anchorAttrs, img] : img;
 

From 814ba6c69a3a07e152e7041df18ab63626176d7d Mon Sep 17 00:00:00 2001
From: rjvelazco <rjvelazco21@gmail.com>
Date: Tue, 30 Jun 2026 11:34:33 -0400
Subject: [PATCH 5/8] fix(block-editor): scope linked-image click guard to the
 clicked image (#36361)

Gate the link-navigation preventDefault on the *clicked* element being an image
(within the anchor) rather than any descendant img, so a text click in a mixed
anchor still routes to the text-link editor. Addresses PR review feedback.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/lib/editor/editor-chrome-click.ts           | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/core-web/libs/new-block-editor/src/lib/editor/editor-chrome-click.ts b/core-web/libs/new-block-editor/src/lib/editor/editor-chrome-click.ts
index 809a21c0d382..baa02120098f 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/editor-chrome-click.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/editor-chrome-click.ts
@@ -14,11 +14,14 @@ export function handleEditorProseMirrorClick(
     const anchor = (event.target as HTMLElement).closest('a[href]');
     if (!anchor) return;
 
-    // A linked image renders as <a href><img></a>. Clicking it must NOT open the link editor —
-    // the click selects the `dotImage` node (surfacing the image toolbar group), and the link is
-    // edited from the toolbar Link button. Just stop the anchor from navigating. Opening the
-    // text-link editor here would show the wrong fields and, on save, replace the image (#36361).
-    if (anchor.querySelector('img')) {
+    // A linked image renders as <a href><img></a>. Clicking the image must NOT open the link
+    // editor — the click selects the `dotImage` node (surfacing the image toolbar group), and the
+    // link is edited from the toolbar Link button. Just stop the anchor from navigating. Opening
+    // the text-link editor here would show the wrong fields and, on save, replace the image
+    // (#36361). Gate on the *clicked* element being the image (not merely any descendant img) so
+    // a text click in a mixed anchor still routes to the text-link editor.
+    const clickedImage = (event.target as HTMLElement).closest('img');
+    if (clickedImage && anchor.contains(clickedImage)) {
         event.preventDefault();
         return;
     }

From ca68dc179a5adb8de19781e3d7be7d9e5c6b8908 Mon Sep 17 00:00:00 2001
From: rjvelazco <rjvelazco21@gmail.com>
Date: Tue, 30 Jun 2026 11:54:59 -0400
Subject: [PATCH 6/8] feat(block-editor): allow removing the link from text
 links too (#36361)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The trash (Remove link) button now shows whenever editing an existing link,
not just images. Generalized onRemoveImageLink → onRemoveLink: images clear
href/target; text links unset the link mark over its full range. Gated on
canRemoveLink (existing href for images, linkEl for text) so it never shows
while creating a new link over selected text.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../link-popover/link-popover.component.html  |  4 +-
 .../link-popover/link-popover.component.ts    | 47 +++++++++++++++++--
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.html b/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.html
index a97dcc916670..354693219ac1 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.html
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.html
@@ -178,14 +178,14 @@
             }
 
             <div class="flex justify-end gap-2 pt-1">
-                @if (isImageLink() && isEditing()) {
+                @if (canRemoveLink()) {
                     <button
                         type="button"
                         data-testid="link-remove"
                         [attr.aria-label]="'dot.block.editor.dialog.link.remove' | dm"
                         [attr.title]="'dot.block.editor.dialog.link.remove' | dm"
                         (mousedown)="$event.preventDefault()"
-                        (click)="onRemoveImageLink()"
+                        (click)="onRemoveLink()"
                         class="mr-auto flex cursor-pointer items-center rounded-sm p-1.5 text-red-600 hover:bg-red-50 focus:ring-2 focus:ring-red-300 focus:outline-none">
                         <span aria-hidden="true" class="material-symbols-outlined text-xl">
                             delete
diff --git a/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.ts b/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.ts
index 5ac5f8a7e00d..fb6c4f89ab30 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/components/link-popover/link-popover.component.ts
@@ -149,6 +149,17 @@ export class LinkPopoverComponent {
         () => this.manager.linkPayload()?.isImageLink === true
     );
 
+    /**
+     * True when there's an existing link to remove — drives the trash (Remove link) button.
+     * For images: the node already has an `href`. For text: the popover was opened on a real
+     * anchor (`linkEl` set), not while creating a new link over plain selected text.
+     */
+    protected readonly canRemoveLink = computed(() => {
+        const payload = this.manager.linkPayload();
+        if (!payload) return false;
+        return payload.isImageLink ? !!payload.initialValues?.href : !!payload.linkEl;
+    });
+
     /**
      * Tracks whether the Advanced (Title / Aria Label / Rel) section is visible.
      * Auto-expands when an existing link's payload carries any of those values, so the
@@ -429,12 +440,40 @@ export class LinkPopoverComponent {
         this.manager.close();
     }
 
-    /** Clears the link on the selected image node (image-link edit mode only). */
-    protected onRemoveImageLink(): void {
-        this.editor()
+    /**
+     * Removes the existing link. For an image, clears the node's `href`/`target`; for text,
+     * unsets the `link` mark over its full range (anchored at the captured edit position).
+     */
+    protected onRemoveLink(): void {
+        const payload = this.manager.linkPayload();
+        const editor = this.editor();
+
+        if (payload?.isImageLink) {
+            editor
+                .chain()
+                .focus()
+                .updateAttributes(DOT_IMAGE_NODE_NAME, { href: null, target: null })
+                .run();
+            this.manager.close();
+            return;
+        }
+
+        const linkEl = payload?.linkEl;
+        const anchorPos =
+            payload?.anchorPos ??
+            (() => {
+                try {
+                    return linkEl ? editor.view.posAtDOM(linkEl, 0) : editor.state.selection.from;
+                } catch {
+                    return editor.state.selection.from;
+                }
+            })();
+        editor
             .chain()
             .focus()
-            .updateAttributes(DOT_IMAGE_NODE_NAME, { href: null, target: null })
+            .setTextSelection(anchorPos)
+            .extendMarkRange('link')
+            .unsetMark('link')
             .run();
         this.manager.close();
     }

From f66dc079a52f785826575c097dd077cc2c9ef5d3 Mon Sep 17 00:00:00 2001
From: rjvelazco <rjvelazco21@gmail.com>
Date: Tue, 30 Jun 2026 13:17:00 -0400
Subject: [PATCH 7/8] fix(block-editor): preserve dotVideo
 width/height/mimeType/orientation attrs (#36361)

The new editor's dotVideo node only declared src/title/data, so the legacy
block-editor's mimeType/width/height/orientation attributes were silently
dropped when an old document was re-saved (TipTap discards undeclared attrs),
and server-side rendering that reads width/height would lose them. Re-declare
the four attributes (parse + conditional render) for round-trip parity with the
legacy node; title stays as an additive extra.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../extensions/nodes/video.extension.ts       | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/video.extension.ts b/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/video.extension.ts
index 9484056328a1..b3dafccc5428 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/video.extension.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/video.extension.ts
@@ -20,6 +20,31 @@ export const Video = Node.create({
         return {
             src: { default: null },
             title: { default: null },
+            // mimeType / width / height / orientation are preserved for round-trip parity with the
+            // legacy block-editor's `dotVideo` node. Existing stored content carries these keys, and
+            // server-side rendering may read them to size the <video>; without declaring them here
+            // TipTap would silently drop them when an old document is re-saved in the new editor.
+            // Rendered conditionally so a null value never serializes as e.g. width="null".
+            mimeType: {
+                default: null,
+                parseHTML: (el) => el.getAttribute('mimeType'),
+                renderHTML: (attrs) => (attrs.mimeType ? { mimeType: attrs.mimeType } : {})
+            },
+            width: {
+                default: null,
+                parseHTML: (el) => el.getAttribute('width'),
+                renderHTML: (attrs) => (attrs.width ? { width: attrs.width } : {})
+            },
+            height: {
+                default: null,
+                parseHTML: (el) => el.getAttribute('height'),
+                renderHTML: (attrs) => (attrs.height ? { height: attrs.height } : {})
+            },
+            orientation: {
+                default: null,
+                parseHTML: (el) => el.getAttribute('orientation'),
+                renderHTML: (attrs) => (attrs.orientation ? { orientation: attrs.orientation } : {})
+            },
             data: {
                 default: null,
                 parseHTML: (el) => {

From b53568d27e44c4f2601f5242a116f35b20f0f86e Mon Sep 17 00:00:00 2001
From: rjvelazco <rjvelazco21@gmail.com>
Date: Tue, 30 Jun 2026 13:32:31 -0400
Subject: [PATCH 8/8] feat(block-editor): populate dotVideo
 mimeType/width/height/orientation from contentlet (#36361)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mirrors the legacy getVideoAttrs but resolves file metadata via the canonical
getFileMetadata helper (handles both metaData and assetMetaData shapes) instead
of reading assetMetaData only. New shared videoMetaAttrsFromContentlet() is used
on both contentlet-bearing insert paths: the dotCMS picker
(insertDotVideoFromContentlet) and the drag-drop upload (uploadVideo →
UploadedVideo). URL-paste has no contentlet, so those attrs stay null.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/lib/editor/editor.utils.ts            | 13 +++++---
 .../extensions/nodes/video.extension.ts       | 32 +++++++++++++++++++
 .../lib/editor/services/dot-upload.service.ts | 32 ++++++++-----------
 3 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/core-web/libs/new-block-editor/src/lib/editor/editor.utils.ts b/core-web/libs/new-block-editor/src/lib/editor/editor.utils.ts
index a9c7b482d1c3..00b2016ffd52 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/editor.utils.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/editor.utils.ts
@@ -10,7 +10,11 @@ import {
     replacePlaceholder,
     removePlaceholder
 } from './extensions/nodes/upload-placeholder.extension';
-import { type DotVideoData, DOT_VIDEO_NODE_NAME } from './extensions/nodes/video.extension';
+import {
+    type DotVideoData,
+    DOT_VIDEO_NODE_NAME,
+    videoMetaAttrsFromContentlet
+} from './extensions/nodes/video.extension';
 import { type UploadedImage, type UploadedVideo } from './services/dot-upload.service';
 
 export function handleMediaDrop(
@@ -81,11 +85,11 @@ export function handleMediaDrop(
 
         if (uploadVideo) {
             uploadVideo(file)
-                .then(({ src, data }) => {
+                .then(({ src, data, mimeType, width, height, orientation }) => {
                     const title = file.name.replace(/\.[^.]+$/, '');
                     replacePlaceholder(editor, id, {
                         type: DOT_VIDEO_NODE_NAME,
-                        attrs: { src, title, data }
+                        attrs: { src, title, data, mimeType, width, height, orientation }
                     });
                 })
                 .catch((err) => {
@@ -154,7 +158,8 @@ export function insertDotVideoFromContentlet(editor: Editor, contentlet: DotCMSC
             attrs: {
                 src: data.asset,
                 title: data.title || null,
-                data
+                data,
+                ...videoMetaAttrsFromContentlet(contentlet)
             }
         })
         .run();
diff --git a/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/video.extension.ts b/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/video.extension.ts
index b3dafccc5428..f5a286756092 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/video.extension.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/video.extension.ts
@@ -1,5 +1,8 @@
 import { Node, mergeAttributes } from '@tiptap/core';
 
+import { DotCMSContentlet } from '@dotcms/dotcms-models';
+import { getFileMetadata } from '@dotcms/utils';
+
 /** TipTap node name for embedded dotCMS videos (slash menu → video). */
 export const DOT_VIDEO_NODE_NAME = 'dotVideo' as const;
 
@@ -11,6 +14,35 @@ export interface DotVideoData {
     asset: string;
 }
 
+/** The `dotVideo` metadata/layout attributes derived from a contentlet. */
+export interface DotVideoMetaAttrs {
+    mimeType: string | null;
+    width: number | null;
+    height: number | null;
+    orientation: 'vertical' | 'horizontal' | null;
+}
+
+/**
+ * Derives the `dotVideo` `mimeType` / `width` / `height` / `orientation` attributes from a
+ * contentlet, for parity with the legacy block-editor's `getVideoAttrs`. Resolves file metadata
+ * via the canonical {@link getFileMetadata} (handles both `metaData` and `assetMetaData` shapes) —
+ * the legacy code read `assetMetaData` only, missing FileAsset / per-field shapes. Each value is
+ * null when unavailable so it never serializes a bogus attribute.
+ */
+export function videoMetaAttrsFromContentlet(contentlet: DotCMSContentlet): DotVideoMetaAttrs {
+    const meta = getFileMetadata(contentlet);
+    const width = meta.width ?? null;
+    const height = meta.height ?? null;
+
+    return {
+        mimeType: contentlet.mimeType ?? meta.contentType ?? null,
+        width,
+        height,
+        orientation:
+            width != null && height != null ? (height > width ? 'vertical' : 'horizontal') : null
+    };
+}
+
 export const Video = Node.create({
     name: DOT_VIDEO_NODE_NAME,
     group: 'block',
diff --git a/core-web/libs/new-block-editor/src/lib/editor/services/dot-upload.service.ts b/core-web/libs/new-block-editor/src/lib/editor/services/dot-upload.service.ts
index b338a07cc7d6..094bd5ef3d75 100644
--- a/core-web/libs/new-block-editor/src/lib/editor/services/dot-upload.service.ts
+++ b/core-web/libs/new-block-editor/src/lib/editor/services/dot-upload.service.ts
@@ -3,9 +3,14 @@ import { firstValueFrom } from 'rxjs';
 import { Injectable, inject } from '@angular/core';
 
 import { DotUploadFileService } from '@dotcms/data-access';
+import { DotCMSContentlet } from '@dotcms/dotcms-models';
 
 import { type DotImageData } from '../extensions/nodes/image.extension';
-import { type DotVideoData } from '../extensions/nodes/video.extension';
+import {
+    type DotVideoData,
+    type DotVideoMetaAttrs,
+    videoMetaAttrsFromContentlet
+} from '../extensions/nodes/video.extension';
 
 /** Resolves API asset paths to a browser-usable URL on the current origin. */
 function sameOriginAssetUrl(asset: string): string {
@@ -20,7 +25,7 @@ export interface UploadedImage {
     data: DotImageData;
 }
 
-export interface UploadedVideo {
+export interface UploadedVideo extends DotVideoMetaAttrs {
     src: string;
     data: DotVideoData;
 }
@@ -57,15 +62,18 @@ export class DotUploadService {
         const contentlet = await this.publishAsset(file);
         return {
             src: sameOriginAssetUrl(contentlet.asset),
-            data: toAssetData(contentlet) satisfies DotVideoData
+            data: toAssetData(contentlet) satisfies DotVideoData,
+            // mimeType / width / height / orientation from the published contentlet's metadata,
+            // matching what the dotCMS picker path stores (parity with legacy getVideoAttrs).
+            ...videoMetaAttrsFromContentlet(contentlet)
         };
     }
 
-    private async publishAsset(file: File): Promise<PublishedAsset> {
+    private async publishAsset(file: File): Promise<DotCMSContentlet> {
         const dotAssets = await firstValueFrom(
             this.uploadFileService.publishContent({ data: file })
         );
-        const wrapped = dotAssets?.[0] as Record<string, PublishedAsset> | undefined;
+        const wrapped = dotAssets?.[0] as Record<string, DotCMSContentlet> | undefined;
         if (!wrapped) {
             throw new Error('Publish: missing results');
         }
@@ -78,19 +86,7 @@ export class DotUploadService {
     }
 }
 
-/**
- * Subset of {@link DotCMSContentlet} the editor needs after a publish — `asset` is required
- * (it's the storage path for the uploaded file). Other fields default safely for narrowing.
- */
-interface PublishedAsset {
-    asset: string;
-    identifier: string;
-    inode: string;
-    languageId: number;
-    title: string;
-}
-
-function toAssetData(contentlet: PublishedAsset): DotImageData {
+function toAssetData(contentlet: DotCMSContentlet): DotImageData {
     return {
         identifier: contentlet.identifier,
         inode: contentlet.inode,