From 3f4311ff1ca74e1971b9839e137ecd3e228b4711 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Fri, 24 Jan 2025 08:23:24 +0000
Subject: [PATCH] chore(editor): add RTL experiement flag for editor (#9882)

---
 .../block-suite-editor/blocksuite-editor-container.tsx   | 5 +++++
 .../frontend/core/src/modules/feature-flag/constant.ts   | 9 +++++++++
 packages/frontend/i18n/src/resources/en.json             | 2 ++
 3 files changed, 16 insertions(+)

diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx
index bd0b97ab6..a35f4adab 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx
@@ -1,3 +1,4 @@
+import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import { type DocMode, getLastNoteBlock } from '@blocksuite/affine/blocks';
 import { Slot } from '@blocksuite/affine/global/utils';
 import type {
@@ -7,6 +8,7 @@ import type {
   PageEditor,
 } from '@blocksuite/affine/presets';
 import { type Store } from '@blocksuite/affine/store';
+import { useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import type React from 'react';
 import {
@@ -49,6 +51,8 @@ export const BlocksuiteEditorContainer = forwardRef<
   const docRef = useRef<PageEditor>(null);
   const docTitleRef = useRef<DocTitle>(null);
   const edgelessRef = useRef<EdgelessEditor>(null);
+  const featureFlags = useService(FeatureFlagService).flags;
+  const enableEditorRTL = useLiveData(featureFlags.enable_editor_rtl.$);
 
   const slots: BlocksuiteEditorContainerRef['slots'] = useMemo(() => {
     return {
@@ -157,6 +161,7 @@ export const BlocksuiteEditorContainer = forwardRef<
   return (
     <div
       data-testid={`editor-${page.id}`}
+      dir={enableEditorRTL ? 'rtl' : 'ltr'}
       className={clsx(
         `editor-wrapper ${mode}-mode`,
         styles.docEditorRoot,
diff --git a/packages/frontend/core/src/modules/feature-flag/constant.ts b/packages/frontend/core/src/modules/feature-flag/constant.ts
index 91f29bbdd..d8d7793ce 100644
--- a/packages/frontend/core/src/modules/feature-flag/constant.ts
+++ b/packages/frontend/core/src/modules/feature-flag/constant.ts
@@ -250,6 +250,15 @@ export const AFFINE_FLAGS = {
     configurable: isCanaryBuild,
     defaultState: isCanaryBuild,
   },
+  enable_editor_rtl: {
+    category: 'affine',
+    displayName:
+      'com.affine.settings.workspace.experimental-features.enable-editor-rtl.name',
+    description:
+      'com.affine.settings.workspace.experimental-features.enable-editor-rtl.description',
+    configurable: isCanaryBuild,
+    defaultState: false,
+  },
 } satisfies { [key in string]: FlagInfo };
 
 // oxlint-disable-next-line no-redeclare
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index 19bfd8b0b..b89f6b649 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -1337,6 +1337,8 @@
   "com.affine.settings.workspace.experimental-features.enable-pdf-embed-preview.description": "Once enabled, you can preview PDF in embed view.",
   "com.affine.settings.workspace.experimental-features.enable-page-block-header.name": "Page Block Header",
   "com.affine.settings.workspace.experimental-features.enable-page-block-header.description": "Once enabled, the header of page block will be displayed.",
+  "com.affine.settings.workspace.experimental-features.enable-editor-rtl.name": "Editor RTL",
+  "com.affine.settings.workspace.experimental-features.enable-editor-rtl.description": "Once enabled, the editor will be displayed in RTL mode.",
   "com.affine.settings.workspace.not-owner": "Only an owner can edit the workspace avatar and name. Changes will be shown for everyone.",
   "com.affine.settings.workspace.preferences": "Preference",
   "com.affine.settings.workspace.billing": "Team's Billing",