editor: fix unable to change text direction if default is rtl

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

apps/web/src/components/editor/manager.ts

@@ -31,6 +31,7 @@ type EditorConfig = {
   fontSize: number;
   zoom: number;
   lineHeight: number;
+  textDirection: "ltr" | "rtl";
 };
 
 type EditorContext = {
@@ -48,7 +49,8 @@ class EditorManager extends BaseStore<EditorManager> {
     fontFamily: "sans-serif",
     fontSize: 14,
     zoom: EDITOR_ZOOM.DEFAULT,
-    lineHeight: EDITOR_LINE_HEIGHT.DEFAULT
+    lineHeight: EDITOR_LINE_HEIGHT.DEFAULT,
+    textDirection: "ltr"
   });
   editors: Record<string, EditorContext | undefined> = {};
 

apps/web/src/components/editor/tiptap.tsx

@@ -198,6 +198,7 @@ function TipTap(props: TipTapProps) {
     "exportTableAsCsv",
     "importCsvToTable"
   ]);
+  const defaultTextDirection = useEditorConfig().editorConfig.textDirection;
 
   usePermissionHandler({
     claims: {
@@ -430,7 +431,8 @@ function TipTap(props: TipTapProps) {
             openInNewTab: openInNewTab
           });
         } else window.open(url, "_blank");
-      }
+      },
+      defaultTextDirection: defaultTextDirection === "ltr" ? undefined : "rtl"
     };
   }, [
     content,
@@ -440,7 +442,8 @@ function TipTap(props: TipTapProps) {
     timeFormat,
     dayFormat,
     markdownShortcuts,
-    fontLigatures
+    fontLigatures,
+    defaultTextDirection
   ]);
 
   const editor = useTiptap(

apps/web/src/dialogs/settings/editor-settings.ts

@@ -156,6 +156,28 @@ export const EditorSettings: SettingsGroup[] = [
             toggle: () => useSettingStore.getState().toggleFontLigatures()
           }
         ]
+      },
+      {
+        key: "text-direction",
+        title: strings.textDirection(),
+        description: strings.textDirectionDesc(),
+        onStateChange: (listener) =>
+          onEditorConfigChange((c) => c.textDirection, listener),
+        components: [
+          {
+            type: "dropdown",
+            options: [
+              { value: "ltr", title: "LTR" },
+              { value: "rtl", title: "RTL" }
+            ],
+            selectedOption: () => editorConfig().textDirection,
+            onSelectionChanged: (value) => {
+              useEditorManager
+                .getState()
+                .setEditorConfig({ textDirection: value as "ltr" | "rtl" });
+            }
+          }
+        ]
       }
     ]
   },

packages/editor/src/extensions/text-direction/text-direction.ts

@@ -23,7 +23,7 @@ import { Paragraph } from "../paragraph/index.js";
 import { Node as ProsemirrorNode } from "@tiptap/pm/model";
 import { isListActive } from "../../utils/list.js";
 
-export type TextDirections = undefined | "rtl";
+export type TextDirections = undefined | "rtl" | "ltr";
 const TEXT_DIRECTION_TYPES = [
   "paragraph",
   "heading",
@@ -90,13 +90,15 @@ export const TextDirection = Extension.create<TextDirectionOptions>({
             // NOTE: for some reason setting this to undefined breaks enter behaviour
             // on Android for some keyboards (GBoard etc.). Empty string works fine.
             default: this.options.defaultDirection || "",
-            parseHTML: (element) => (element.dir === "rtl" ? "rtl" : undefined),
+            parseHTML: (element) =>
+              element.dir === "rtl"
+                ? "rtl"
+                : element.dir === "ltr"
+                ? "ltr"
+                : undefined,
             keepOnSplit: true,
             renderHTML: (attributes) => {
-              if (
-                !attributes.textDirection ||
-                attributes.textDirection !== "rtl"
-              ) {
+              if (!attributes.textDirection) {
                 return {};
               }
 

packages/editor/src/index.ts

@@ -64,7 +64,9 @@ import { Table } from "./extensions/table/index.js";
 import TableCell from "./extensions/table-cell/index.js";
 import { TaskItemNode } from "./extensions/task-item/index.js";
 import { TaskListNode } from "./extensions/task-list/index.js";
-import TextDirection from "./extensions/text-direction/index.js";
+import TextDirection, {
+  TextDirections
+} from "./extensions/text-direction/index.js";
 import { WebClipNode, WebClipOptions } from "./extensions/web-clip/index.js";
 import { useEditor } from "./hooks/use-editor.js";
 import { usePermissionHandler } from "./hooks/use-permission-handler.js";
@@ -132,6 +134,7 @@ export type TiptapOptions = EditorOptions &
     isMobile?: boolean;
     doubleSpacedLines?: boolean;
     enableFontLigatures?: boolean;
+    defaultTextDirection: TextDirections;
   } & {
     placeholder: string;
   };
@@ -158,6 +161,7 @@ const useTiptap = (
     downloadOptions,
     editorProps,
     enableFontLigatures,
+    defaultTextDirection,
     ...restOptions
   } = options;
 
@@ -272,7 +276,9 @@ const useTiptap = (
         Subscript,
         Superscript,
         FontSize,
-        TextDirection,
+        TextDirection.configure({
+          defaultDirection: defaultTextDirection
+        }),
         FontFamily,
         BulletList.configure({ keepMarks: true, keepAttributes: true }),
         OrderedList.configure({ keepMarks: true, keepAttributes: true }),

packages/editor/src/toolbar/tools/text-direction.tsx

@@ -51,9 +51,10 @@ export function TextDirection(props: ToolProps) {
   const { editor } = props;
   const textDirection = getTextDirection(editor);
 
-  const newTextDirection: TextDirections = textDirection ? undefined : "rtl";
+  const newTextDirection: TextDirections =
+    textDirection === "rtl" ? "ltr" : "rtl";
 
-  const icon: IconNames = textDirection ? "rtl" : "ltr";
+  const icon: IconNames = textDirection === "rtl" ? "rtl" : "ltr";
 
   return (
     <TextDirectionTool direction={newTextDirection} {...props} icon={icon} />

packages/intl/locale/en.po

@@ -1354,6 +1354,10 @@ msgstr "Change app lock pin"
 msgid "Change backup directory"
 msgstr "Change backup directory"
 
+#: src/strings.ts:2637
+msgid "Change default text direction to LTR or RTL"
+msgstr "Change default text direction to LTR or RTL"
+
 #: src/strings.ts:465
 msgid "Change email address"
 msgstr "Change email address"
@@ -6424,6 +6428,7 @@ msgid "Text color"
 msgstr "Text color"
 
 #: src/strings.ts:2280
+#: src/strings.ts:2636
 msgid "Text direction"
 msgstr "Text direction"
 

packages/intl/locale/pseudo-LOCALE.po

@@ -1354,6 +1354,10 @@ msgstr ""
 msgid "Change backup directory"
 msgstr ""
 
+#: src/strings.ts:2637
+msgid "Change default text direction to LTR or RTL"
+msgstr ""
+
 #: src/strings.ts:465
 msgid "Change email address"
 msgstr ""
@@ -6383,6 +6387,7 @@ msgid "Text color"
 msgstr ""
 
 #: src/strings.ts:2280
+#: src/strings.ts:2636
 msgid "Text direction"
 msgstr ""
 

packages/intl/src/strings.ts

@@ -2632,5 +2632,7 @@ Use this if changes from other devices are not appearing on this device. This wi
   expiryDate: () => t`Expiry date`,
   exportCsv: () => t`Export CSV`,
   importCsv: () => t`Import CSV`,
-  noContent: () => t`This note is empty`
+  noContent: () => t`This note is empty`,
+  textDirection: () => t`Text direction`,
+  textDirectionDesc: () => t`Change default text direction to LTR or RTL`
 };