Block Editor: Enable TipTap native image resize

[rjvelazco]

Description

Enable image resizing in the Block Editor (libs/new-block-editor) using the resize support built into @tiptap/extension-image.

Laura raised this as feedback: content authors currently have no way to change an image's displayed size from inside the editor. The only layout controls available today are textWrap (left/right) and textAlign (left/center/right), both written as <figure> classes by DotImage.

Reference: https://tiptap.dev/docs/editor/extensions/nodes/image#resize

⚠️ Blocked on product approval. The behavior is agreed technically but has not been signed off by Product. Do not start implementation until approval is recorded on this issue.

Current state (verified)

@tiptap/extension-image@3.22.2 — already the installed version — exposes resize natively:

resize: {
    enabled: boolean;
    directions?: ResizableNodeViewDirection[];
    minWidth?: number;
    minHeight?: number;
    alwaysPreserveAspectRatio?: boolean;
} | false;   // default: false

The parent extension also already declares width / height node attributes and accepts them in setImage(), so DotImage's ...this.parent?.() spread picks them up for free.

Known technical constraint

DotImage overrides addNodeView() in core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/image.extension.ts to build the <figure> / <a> / <img> wrapper by hand. TipTap's resize handles are provided by the parent's own resizable node view, which that override replaces — so simply setting resize: { enabled: true } will not surface handles until the custom node view is reworked to compose with the resizable node view (or to render the handles itself).

This is the main implementation cost of the ticket and should be scoped before committing to a sprint.

Files in scope

File	Change
core-web/libs/new-block-editor/src/lib/editor/extensions/nodes/image.extension.ts	Enable resize, rework addNodeView() to keep handles, persist width/height
dotCMS/src/main/webapp/WEB-INF/velocity/static/storyblock/dotImage.vtl	Emit width/height on <img>
core-web/libs/sdk/** (React, Vue, Angular ×2)	Emit width/height on <img>
core-web/libs/sdk/types/src/lib/components/block-editor-renderer/internal.ts	Add width/height to the image attrs type

Acceptance Criteria

Preconditions

• Product approval for the resize behavior is recorded as a comment on this issue before implementation starts

Happy path

• Selecting an image in the Block Editor shows TipTap resize handles on the image
• Dragging a resize handle changes the image's rendered size live in the editor
• Releasing a resize handle persists the resulting width and height as attributes on the dotImage node
• Reopening the contentlet renders the image at the persisted size, not at its intrinsic size

Rendering parity

• A resized image renders at the persisted size through the VTL renderer (dotImage.vtl)
• A resized image renders at the persisted size through the React, Vue, and both Angular SDK block renderers

Interaction with existing layout attrs

• Resizing an image that has textWrap set keeps the image-wrap-left / image-wrap-right figure class intact
• Resizing an image that has textAlign set keeps the image-align-* figure class intact
• Resizing an image wrapped in a link (href set) does not break the anchor or the node-selection fix from Block Editor: cannot add a link to an image (image properties menu not accessible) #36361

Edge cases

• Resizing below the configured minWidth / minHeight clamps to the minimum instead of collapsing the image
• Existing stored content with no width/height attributes renders unchanged (no regression)

Tests

• Unit specs in libs/new-block-editor/ cover: resize persists width/height, minimum clamping, and layout-attr preservation

Priority

Medium

Additional Context

• Scope is libs/new-block-editor only. The legacy libs/block-editor is not in scope.
• Related: caption field work (Block Editor: Add a caption field to image properties #37496) touches the same node and the same set of renderers — coordinate to avoid conflicting edits to image.extension.ts and dotImage.vtl.

[syedATdot]

Customer request: additional scope for this issue

A priority customer has asked for this feature (internal refs: Freshdesk #39511, and earlier #38100 in July 2026). They want to resize images in the Block Editor from Edit Image Properties. These are the requirements from their request:

Requested requirements

• Aspect-ratio lock: authors can keep the image's original aspect ratio while resizing, e.g. with a lock toggle. This should be a requirement of this issue, not only an available TipTap option (alwaysPreserveAspectRatio).
• Dimensions in Edit Image Properties: the dialog shows the image's current width and height (it currently shows only Image URL, Tooltip and Alt text). Ideally authors can also enter values there.
• The new width/height is saved on the image and shows on the live site (already in scope via dotImage.vtl and the SDKs).