feat: Add comprehensive RTL (Right-to-Left) support

packages/affine/blocks/list/src/list-block.ts

@@ -11,7 +11,7 @@ import {
   EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
 } from '@blocksuite/affine-shared/consts';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
-import { getViewportElement } from '@blocksuite/affine-shared/utils';
+import { getViewportElement, getTextDirection } from '@blocksuite/affine-shared/utils';
 import type { BlockComponent } from '@blocksuite/std';
 import { BlockSelection, TextSelection } from '@blocksuite/std';
 import {
@@ -194,6 +194,7 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
             .inlineRangeProvider=${this._inlineRangeProvider}
             .enableClipboard=${false}
             .enableUndoRedo=${false}
+            .textDirection=${getTextDirection(this.model.props.text.yText.toString())}
             .verticalScrollContainerGetter=${() =>
               getViewportElement(this.host)}
           ></rich-text>

packages/affine/blocks/list/src/styles.ts

@@ -65,5 +65,20 @@ export const listBlockStyles = css`
     color: var(--affine-text-secondary-color);
   }
 
+  /* RTL support for list blocks */
+  [dir='rtl'] .affine-list-rich-text-wrapper {
+    flex-direction: row-reverse;
+  }
+
+  [dir='rtl'] .affine-list-block__numbered {
+    margin-left: 0;
+    margin-right: 2px;
+  }
+
+  [dir='rtl'] .affine-list-block__todo-prefix {
+    margin-left: 0;
+    margin-right: 2px;
+  }
+
   ${listPrefix}
 `;

packages/affine/blocks/paragraph/src/paragraph-block.ts

@@ -16,6 +16,8 @@ import {
   calculateCollapsedSiblings,
   getNearestHeadingBefore,
   getViewportElement,
+  getTextDirection,
+  TextDirection,
 } from '@blocksuite/affine-shared/utils';
 import type { BlockComponent } from '@blocksuite/std';
 import { TextSelection } from '@blocksuite/std';
@@ -334,6 +336,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
             .inlineRangeProvider=${this._inlineRangeProvider}
             .enableClipboard=${false}
             .enableUndoRedo=${false}
+            .textDirection=${getTextDirection(this.model.props.text.yText.toString())}
             .verticalScrollContainerGetter=${() =>
               getViewportElement(this.host)}
           ></rich-text>

packages/affine/blocks/paragraph/src/styles.ts

@@ -129,6 +129,16 @@ export const paragraphBlockStyles = css`
     border-radius: 18px;
   }
 
+  /* RTL support for quote */
+  [dir='rtl'] .quote {
+    padding-left: 0;
+    padding-right: 17px;
+  }
+  [dir='rtl'] .quote::after {
+    left: auto;
+    right: 0;
+  }
+
   .affine-paragraph-placeholder {
     position: absolute;
     display: none;
@@ -142,6 +152,12 @@ export const paragraphBlockStyles = css`
     color: var(--affine-black-30);
     fill: var(--affine-black-30);
   }
+
+  /* RTL support for placeholder */
+  [dir='rtl'] .affine-paragraph-placeholder {
+    left: auto;
+    right: 0;
+  }
   @media print {
     .affine-paragraph-placeholder {
       display: none !important;

packages/affine/blocks/root/src/page/page-root-block.ts

@@ -96,6 +96,15 @@ export class PageRootBlockComponent extends BlockComponent<RootBlockModel> {
       display: block;
     }
 
+    /* RTL support for page root */
+    [dir='rtl'] .affine-page-root-block-container {
+      text-align: right;
+    }
+
+    [dir='ltr'] .affine-page-root-block-container {
+      text-align: left;
+    }
+
     @media print {
       .selected {
         background-color: transparent !important;

packages/affine/model/src/consts/text.ts

@@ -7,6 +7,7 @@ export enum TextAlign {
   Center = 'center',
   Left = 'left',
   Right = 'right',
+  Justify = 'justify',
 }
 
 export const TextAlignMap = createEnumMap(TextAlign);
@@ -24,6 +25,7 @@ export type TextStyleProps = {
   fontStyle: FontStyle;
   fontWeight: FontWeight;
   textAlign: TextAlign;
+  textDirection?: TextDirection;
 };
 
 export enum FontWeight {
@@ -62,7 +64,14 @@ export enum TextResizing {
   AUTO_HEIGHT,
 }
 
+export enum TextDirection {
+  LTR = 'ltr',
+  RTL = 'rtl',
+  Auto = 'auto',
+}
+
 export const FontFamilySchema = z.nativeEnum(FontFamily);
 export const FontWeightSchema = z.nativeEnum(FontWeight);
 export const FontStyleSchema = z.nativeEnum(FontStyle);
 export const TextAlignSchema = z.nativeEnum(TextAlign);
+export const TextDirectionSchema = z.nativeEnum(TextDirection);

packages/affine/rich-text/src/rich-text.ts

@@ -2,6 +2,12 @@ import type {
   AffineInlineEditor,
   AffineTextAttributes,
 } from '@blocksuite/affine-shared/types';
+import { 
+  getTextDirection, 
+  getRTLTextAlignCSS, 
+  TextDirection,
+  isRTL 
+} from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/lit';
 import { ShadowlessElement } from '@blocksuite/std';
 import {
@@ -56,11 +62,53 @@ export class RichText extends WithDisposable(ShadowlessElement) {
     rich-text .nowrap-lines v-element span {
       white-space: pre !important;
     }
+
+    /* RTL support */
+    .inline-editor[dir="rtl"] {
+      text-align: right;
+    }
+
+    .inline-editor[dir="ltr"] {
+      text-align: left;
+    }
   `;
 
   #verticalScrollContainer: HTMLElement | null = null;
 
   private readonly _inlineEditor$ = signal<AffineInlineEditor | null>(null);
+
+  @property({ attribute: false })
+  accessor textDirection: TextDirection = TextDirection.Auto;
+
+  /**
+   * Get the current text direction based on content
+   */
+  private getCurrentTextDirection(): TextDirection {
+    if (this.textDirection !== TextDirection.Auto) {
+      return this.textDirection;
+    }
+
+    const inlineEditor = this.inlineEditor;
+    if (!inlineEditor) return TextDirection.LTR;
+
+    const text = inlineEditor.yTextString;
+    return getTextDirection(text);
+  }
+
+  /**
+   * Update the direction attribute on the inline editor
+   */
+  private updateTextDirection() {
+    const inlineEditor = this.inlineEditor;
+    if (!inlineEditor) return;
+
+    const direction = this.getCurrentTextDirection();
+    const directionValue = direction === TextDirection.RTL ? 'rtl' : 'ltr';
+
+    if (inlineEditor.rootElement) {
+      inlineEditor.rootElement.setAttribute('dir', directionValue);
+    }
+  }
 
   private readonly _onCopy = (e: ClipboardEvent) => {
     const inlineEditor = this.inlineEditor;
@@ -399,9 +447,13 @@ export class RichText extends WithDisposable(ShadowlessElement) {
       readonly: this.readonly,
     });
 
+    const direction = this.getCurrentTextDirection();
+    const directionValue = direction === TextDirection.RTL ? 'rtl' : 'ltr';
+
     return html`<div
       contenteditable=${this.readonly ? 'false' : 'true'}
       class=${classes}
+      dir=${directionValue}
     ></div>`;
   }
 

packages/affine/shared/src/styles/index.ts

@@ -1,4 +1,5 @@
 export { fontBaseStyle, fontSMStyle, fontXSStyle } from './font';
 export { panelBaseColorsStyle, panelBaseStyle } from './panel';
+export { rtlStyles, rtlCSSVariables } from './rtl';
 export { scrollbarStyle } from './scrollbar-style';
 export { affineTextStyles } from './text';