fix: Full-width images in editor are incorrectly aligned in RTL documents

closes #4712

shared/editor/components/Styles.ts

@@ -295,6 +295,7 @@ li {
   max-width: 100vw;
   clear: both;
   position: initial;
+  ${props.rtl ? `margin-right: var(--offset)` : `margin-left: var(--offset)`};
 
   img {
     max-width: 100vw;

shared/editor/nodes/Image.tsx

@@ -726,17 +726,22 @@ const ImageComponent = (
     : { width: size.width || "auto" };
 
   return (
-    <div contentEditable={false} className={className}>
+    <div
+      contentEditable={false}
+      className={className}
+      style={
+        isFullWidth
+          ? ({
+              "--offset": `${-(contentWidth - documentWidth) / 2}px`,
+            } as React.CSSProperties)
+          : undefined
+      }
+    >
       <ImageWrapper
         isFullWidth={isFullWidth}
         className={isSelected || dragging ? "ProseMirror-selectednode" : ""}
         onClick={dragging ? undefined : props.onClick}
-        style={{
-          ...style,
-          ...(isFullWidth
-            ? { marginLeft: -(contentWidth - documentWidth) / 2 }
-            : {}),
-        }}
+        style={style}
       >
         {!dragging && size.width > 60 && size.height > 60 && (
           <Button onClick={props.onDownload}>