refactor: Image node and view clean-up

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);

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" : "",
+          selected && "ProseMirror-selectednode",
-          classes.imagePlaceholder,
+          classes.imageWrapper,
           alignClass,
         )}
         style={{

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,
       },