From 91eaf1c71e5ad500ff2bfb81232dcff596fbe573 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Mon, 6 Feb 2023 10:06:47 +0500
Subject: [PATCH] editor: add rtl support in images

---
 packages/editor/src/extensions/image/component.tsx           | 5 ++++-
 packages/editor/src/extensions/image/image.ts                | 4 +++-
 .../editor/src/extensions/text-direction/text-direction.ts   | 3 ++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/extensions/image/component.tsx b/packages/editor/src/extensions/image/component.tsx
index a31f1e769..f45afab19 100644
--- a/packages/editor/src/extensions/image/component.tsx
+++ b/packages/editor/src/extensions/image/component.tsx
@@ -44,9 +44,12 @@ export function ImageComponent(
 ) {
   const { editor, node, selected } = props;
   const isMobile = useIsMobile();
-  const { src, alt, title, width, height, align, hash } = node.attrs;
+  const { src, alt, title, width, height, textDirection, hash } = node.attrs;
   const float = isMobile ? false : node.attrs.float;
 
+  let align = node.attrs.align;
+  if (!align) align = textDirection ? "right" : "left";
+
   const imageRef = useRef<HTMLImageElement>(null);
   const [error, setError] = useState<string>();
   const [source, setSource] = useState<string>();
diff --git a/packages/editor/src/extensions/image/image.ts b/packages/editor/src/extensions/image/image.ts
index a023f6954..ca5373224 100644
--- a/packages/editor/src/extensions/image/image.ts
+++ b/packages/editor/src/extensions/image/image.ts
@@ -25,6 +25,7 @@ import {
 } from "@tiptap/core";
 import { Attachment, getDataAttribute } from "../attachment";
 import { createSelectionBasedNodeView } from "../react";
+import { TextDirections } from "../text-direction";
 import { ImageComponent } from "./component";
 
 export interface ImageOptions {
@@ -38,6 +39,7 @@ export type ImageAttributes = Partial<ImageSizeOptions> &
     src: string;
     alt?: string;
     title?: string;
+    textDirection?: TextDirections;
   };
 
 export type ImageAlignmentOptions = {
@@ -106,7 +108,7 @@ export const ImageNode = Node.create<ImageOptions>({
 
       // TODO: maybe these should be stored as styles?
       float: getDataAttribute("float", false),
-      align: getDataAttribute("align", "left"),
+      align: getDataAttribute("align"),
 
       hash: getDataAttribute("hash"),
       filename: getDataAttribute("filename"),
diff --git a/packages/editor/src/extensions/text-direction/text-direction.ts b/packages/editor/src/extensions/text-direction/text-direction.ts
index 9b158ed57..cd2cbdac1 100644
--- a/packages/editor/src/extensions/text-direction/text-direction.ts
+++ b/packages/editor/src/extensions/text-direction/text-direction.ts
@@ -30,7 +30,8 @@ const TEXT_DIRECTION_TYPES = [
   "taskList",
   "table",
   "blockquote",
-  "embed"
+  "embed",
+  "image"
 ];
 
 type TextDirectionOptions = {