From 13c29545a292fc48ddc75d6d95b45103f498aefb Mon Sep 17 00:00:00 2001
From: Arek Nawo <areknawo@areknawo.com>
Date: Mon, 19 Jan 2026 20:15:14 +0100
Subject: [PATCH] refactor: Image node and view clean-up

---
 .../editor/components/image/image-view.module.css     |  2 +-
 .../features/editor/components/image/image-view.tsx   |  4 ++--
 packages/editor-ext/src/lib/image/image.ts            | 11 +++++++----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/features/editor/components/image/image-view.module.css b/apps/client/src/features/editor/components/image/image-view.module.css
index 8ee9bc06..67a3629b 100644
--- a/apps/client/src/features/editor/components/image/image-view.module.css
+++ b/apps/client/src/features/editor/components/image/image-view.module.css
@@ -1,4 +1,4 @@
-.imagePlaceholder {
+.imageWrapper {
   border-radius: 8px;
   @mixin light {
     background-color: var(--mantine-color-gray-0);
diff --git a/apps/client/src/features/editor/components/image/image-view.tsx b/apps/client/src/features/editor/components/image/image-view.tsx
index 8fdd434d..0dac0966 100644
--- a/apps/client/src/features/editor/components/image/image-view.tsx
+++ b/apps/client/src/features/editor/components/image/image-view.tsx
@@ -19,8 +19,8 @@ export default function ImageView(props: NodeViewProps) {
     <NodeViewWrapper data-drag-handle>
       <div
         className={clsx(
-          selected ? "ProseMirror-selectednode" : "",
-          classes.imagePlaceholder,
+          selected && "ProseMirror-selectednode",
+          classes.imageWrapper,
           alignClass,
         )}
         style={{
diff --git a/packages/editor-ext/src/lib/image/image.ts b/packages/editor-ext/src/lib/image/image.ts
index 8ee2230d..05f76f14 100644
--- a/packages/editor-ext/src/lib/image/image.ts
+++ b/packages/editor-ext/src/lib/image/image.ts
@@ -91,11 +91,14 @@ export const TiptapImage = Image.extend<ImageOptions>({
           "data-size": attributes.size,
         }),
       },
-      placeholderId: {
-        default: null,
-        rendered: false,
-      },
       aspectRatio: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-aspect-ratio"),
+        renderHTML: (attributes: ImageAttributes) => ({
+          "data-aspect-ratio": attributes.aspectRatio,
+        }),
+      },
+      placeholderId: {
         default: null,
         rendered: false,
       },