SD-1839: better image rendering

[johanneswilm]

Includes:

• Rendering o bitmap images in EMF files
• Rotation of images (including movement to fit with original top left corner)
• Application of grayscale filters on block images
• Application of grayscale, blacklevel and gain filters on inline images

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

[Copilot]

Pull request overview

Improves DOCX image fidelity across the conversion pipeline by adding support for additional EMF bitmap rendering paths and propagating OOXML/VML image effects (rotation/flip, grayscale, gain/blacklevel) through conversion contracts into DOM rendering.

Changes:

• Add grayscale/gain/blacklevel image attributes and round-trip grayscale in OOXML encode/decode helpers (with tests).
• Improve EMF rendering by handling EMR_STRETCHDIBITS and converting certain DIB bitmaps to PNG for browser compatibility.
• Add .tmp media file image-type detection by magic bytes and apply rotation/flip + grayscale/watermark filters in DOM painter (plus contract + converter updates/tests).

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/super-editor/src/extensions/image/image.js	Adds new image node attrs for grayscale/gain/blacklevel.
packages/super-editor/src/core/super-converter/v3/handlers/wp/helpers/rtfjs/index.ts	Updates attribution comment for extracted EMF/WMF rendering.
packages/super-editor/src/core/super-converter/v3/handlers/wp/helpers/rtfjs/emfjs/Renderer.ts	Adjusts EMF SVG viewBox/aspect handling and exposes bounds.
packages/super-editor/src/core/super-converter/v3/handlers/wp/helpers/rtfjs/emfjs/GDIContext.ts	Adds EMR_STRETCHDIBITS drawing support via stretchDibBits.
packages/super-editor/src/core/super-converter/v3/handlers/wp/helpers/rtfjs/emfjs/EMFRecords.ts	Parses EMR_STRETCHDIBITS and fixes some embedded bitmap offsets.
packages/super-editor/src/core/super-converter/v3/handlers/wp/helpers/rtfjs/emfjs/Bitmap.ts	Adds BMP→PNG conversion path and refactors data-URI generation.
packages/super-editor/src/core/super-converter/v3/handlers/wp/helpers/encode-image-node-helpers.js	Extracts grayscale from <a:blip> effects.
packages/super-editor/src/core/super-converter/v3/handlers/wp/helpers/encode-image-node-helpers.test.js	Tests grayscale extraction behavior.
packages/super-editor/src/core/super-converter/v3/handlers/wp/helpers/decode-image-node-helpers.js	Exports grayscale effect into OOXML when present.
packages/super-editor/src/core/super-converter/v3/handlers/wp/helpers/decode-image-node-helpers.test.js	Tests grayscale export behavior.
packages/super-editor/src/core/super-converter/helpers.js	Adds detectImageType() helper (magic-byte detection).
packages/super-editor/src/core/super-converter/helpers.test.js	Adds unit tests for detectImageType().
packages/super-editor/src/core/DocxZipper.js	Detects image type for .tmp and other unknown extensions.
packages/super-editor/src/core/DocxZipper.test.js	Tests .tmp image detection/handling behavior.
packages/layout-engine/pm-adapter/src/converters/inline-converters/image.ts	Propagates transforms/effects from node attrs into ImageRun.
packages/layout-engine/pm-adapter/src/converters/image.ts	Propagates transforms/effects from node attrs into ImageBlock.
packages/layout-engine/pm-adapter/src/converters/image.test.ts	Adds tests for rotation/flip extraction in imageNodeToBlock.
packages/layout-engine/painters/dom/src/renderer.ts	Applies rotation/flip + grayscale/watermark filters during DOM rendering.
packages/layout-engine/contracts/src/index.ts	Extends ImageRun/ImageBlock contracts for new effects/transforms.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

⚠️ AI Risk Review — potential issues found

• detectImageType function is not exported from helpers.js but is imported in DocxZipper.js - will cause runtime error
• Duplicate transform calculation logic in renderImageBlock and renderImageRun - DRY violation and maintenance risk

_{Via L3 deep analysis · critical risk}

[johanneswilm]

⚠️ AI Risk Review — potential issues found

• detectImageType function is not exported from helpers.js but is imported in DocxZipper.js - will cause runtime error

That's just not true. It is exported and it works in my manual tests as intended.

• Duplicate transform calculation logic in renderImageBlock and renderImageRun - DRY violation and maintenance risk

I can partially see your point, but the thing is that the exact way these 3 filters will have to be applied for background images, block images and inline filters may differ. So as long as it's just these three filters, I think it's OK. One may have to refactor if it turns out that block images and inline images always should apply filters the exact same way.

Via L3 deep analysis · critical risk