editor: add rtl support in images

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

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"),

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 = {