rtl direction docx fixes

src/editor/utils/docx/heading.ts

@@ -5,7 +5,8 @@ export function $convertHeadingNode(node: HeadingNode) {
   const heading = node.getTag().replace('h', 'Heading') as IParagraphOptions['heading'];
   const alignment = node.getFormatType().replace('justify', 'both') as IParagraphOptions['alignment'];
   const indent = node.getIndent() || 0;
-  return new Paragraph({ heading, alignment, indent: { left: convertInchesToTwip(indent / 2) } });
+  const dir = node.getDirection();
+  return new Paragraph({ heading, alignment, indent: { left: convertInchesToTwip(indent / 2) }, bidirectional: dir === 'rtl' });
 }
 type Index = 1 | 2 | 3 | 4 | 5 | 6;
 type HeadingMap = Record<Index, number>;

src/editor/utils/docx/index.ts

@@ -48,7 +48,8 @@ function $mapNodeToDocx(node: LexicalNode): FileChild | ParagraphChild | Paragra
   if ($isParagraphNode(node)) {
     const alignment = node.getFormatType().replace('justify', 'both') as IParagraphOptions['alignment'];
     const indent = node.getIndent() || 0;
-    return new Paragraph({ alignment, indent: { left: convertInchesToTwip(indent / 2) } });
+    const dir = node.getDirection();
+    return new Paragraph({ alignment, indent: { left: convertInchesToTwip(indent / 2), }, bidirectional: dir === 'rtl' });
   }
   if ($isHeadingNode(node)) {
     return $convertHeadingNode(node);
@@ -94,12 +95,18 @@ function $mapNodeToDocx(node: LexicalNode): FileChild | ParagraphChild | Paragra
   if ($isQuoteNode(node)) {
     const alignment = node.getFormatType().replace('justify', 'both') as IParagraphOptions['alignment'];
     const indent = node.getIndent() || 0;
+    const dir = node.getDirection();
     return new Paragraph({
       style: 'Quote',
       alignment,
-      indent: { left: convertInchesToTwip(indent / 2) },
+      indent: { 
+        // start: 15 * 15 * (indent + 1),
+        hanging: 14 * 15
+       },
+      bidirectional: dir === 'rtl',
       border: {
-        left: { size: 30, color: '#ced0d4', space: 8, style: 'single' },
+        left: dir === 'rtl' ? undefined : { size: 30, color: '#ced0d4', style: 'single', space: 8 },
+        right: dir === 'rtl' ? { size: 30, color: '#ced0d4', style: 'single', space: 8 } : undefined,
         top: { space: 4, style: 'none' },
         bottom: { space: 2, style: 'none' },
       },

src/editor/utils/docx/list.ts

@@ -11,30 +11,30 @@ export function $convertListItemNode(node: ListItemNode) {
   const listType = ListNode.getListType();
   const value = listType === 'number' ? node.getValue().toString() : '1';
   const checked = node.getChecked();
+  const dir = node.getDirection();
+
   if (listType === 'check') {
     return new Paragraph({
       alignment,
-      indent: { left: convertInchesToTwip(indent / 4), hanging: convertInchesToTwip(0.1) },
+      indent: {
+        start: 22 * 15 * (indent + 1),
+        hanging: 24 * 15,
+      },
+      bidirectional: dir === 'rtl',
       children: [new CheckBox({ checked }), new TextRun({ text: ' ', })],
     });
   }
   return new Paragraph({
     alignment,
     numbering: { reference: listKey, level: indent, },
-    indent: { hanging: convertInchesToTwip(0.1 + value.length * 0.1) },
+    indent: {
+      start: 22 * 15 * (indent + 1),
+      hanging: 24 * 15,
+    },
+    bidirectional: dir === 'rtl',
   });
 }
 
-function basicIndentStyle(indent: number): Pick<ILevelsOptions, 'style' | 'alignment'> {
-  return {
-    alignment: AlignmentType.START,
-    style: {
-      paragraph: {
-        indent: { left: convertInchesToTwip(indent / 2), hanging: convertInchesToTwip(0.2) },
-      },
-    },
-  };
-}
 
 export const numbered = Array(3)
   .fill([LevelFormat.DECIMAL, LevelFormat.UPPER_LETTER, LevelFormat.LOWER_LETTER])
@@ -43,7 +43,6 @@ export const numbered = Array(3)
     level,
     format,
     text: `%${level + 1}.`,
-    ...basicIndentStyle((level + 1) / 4),
   }));
 
 export const bullets = Array(3)
@@ -53,5 +52,4 @@ export const bullets = Array(3)
     level,
     format: LevelFormat.BULLET,
     text,
-    ...basicIndentStyle((level + 1) / 4),
   }));

src/editor/utils/docx/table.ts

@@ -10,9 +10,11 @@ export function $convertTableNode(node: TableNode) {
   const float = $getNodeStyleValueForProperty(node, 'float').replace('none', '');
   const alignment = (node.getFormatType().replace('justify', 'both') || 'both') as IParagraphOptions['alignment'];
   const columnWidth = (float || alignment !== 'both') ? 75 * 15 : 600 * 15 / columnCount;
+  const dir = node.getDirection();
 
   const table = new Table({
     rows: rows,
+    visuallyRightToLeft: dir === 'rtl',
     width: (float || alignment !== 'both') ? undefined : { size: 100, type: 'pct', },
     columnWidths: columnWidths ? columnWidths.map((width) => width * 15) : Array(columnCount).fill(columnWidth),
     margins: { top: 8 * 15, right: 8 * 15, bottom: 8 * 15, left: 8 * 15, },

src/editor/utils/docx/text.ts

@@ -1,7 +1,7 @@
 import { $findMatchingParent, $isHeadingNode, $isLinkNode, $isListItemNode, $isTableCellNode } from "@/editor";
 import { $getNodeStyleValueForProperty } from "@/editor/nodes/utils";
 import { TextRun } from "docx";
-import { TextNode } from "lexical";
+import { ElementNode, TextNode } from "lexical";
 
 export function $convertTextNode(node: TextNode) {
   const textContent = node.getTextContent();
@@ -13,6 +13,9 @@ export function $convertTextNode(node: TextNode) {
   const tableCellColor = nearestTableCell ? $getNodeStyleValueForProperty(nearestTableCell, 'color').replace('inherit', '') : undefined;
   const fontsizeInPx = parseInt($getNodeStyleValueForProperty(node, 'font-size'));
   const backgroundColor = $getNodeStyleValueForProperty(node, 'background-color').replace('inherit', '') || undefined;
+  const parent = node.getParent<ElementNode>();
+  const direction = parent?.getDirection();
+
   const textRun = new TextRun({
     text: textContent,
     bold: node.hasFormat('bold') || isHeadingText,
@@ -29,6 +32,7 @@ export function $convertTextNode(node: TextNode) {
       fill: node.hasFormat('code') ? '#F2F4F6' : backgroundColor,
     }) : undefined,
     style: isLinkText ? 'Hyperlink' : undefined,
+    rightToLeft: direction === 'rtl',
   });
 
   return textRun;